前端-js

js

作用

控制网页的行为

JS的书写语法

1. 大小写敏感

2. 结尾分号可有可无

3. // 单行注释
 /* */ 多行注释

4. {}代表代码块

JS声明变量的关键字

var 全局变量

let 局部变量

const 常量

JS控制语句 哪些会返回false

0 NaN “”Null Undefined  

数据类型

number:数字(整数、小数、NaN(Not a Number))
string:字符串,单双引皆可
boolean:布尔。true,false
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值是 undefined

typeof函数

返回变量的数据类型

typeof  数据

运算符

== 会进行类型转换

只比较值是否相等,不区分数据类型,哪怕类型不一致,==也会自动转换类型进行值得比较

=== 不会进行类型转换

不光比较值,还要比较类型,如果类型不一致,直接返回false

JavaScript弱数据类型的语言

- 形式参数不需要声明类型,并且JavaScript中不管什么类型都是let或者var去声明,加上也没有意义。

- 返回值也不需要声明类型,直接return即可

JS中的函数

函数定义的两种方式

function 函数名(参数1,参数2..){
    要执行的代码
}

var functionName = function (参数1,参数2..){   
    //要执行的代码
}

JS中的对象

Array

语法格式

var 变量名 = new Array(元素列表); 

var 变量名 = [ 元素列表 ]; 

属性

获取数组长度        length

方法

遍历数组

数组名.foreach()

只会遍历有值的元素 

ES6中,引入箭头函数的写法,arr.forEach((e) => {
     console.log(e);
}) 

添加元素到末尾

数组名.push()

删除元素

数组名.splice( , )

参数1:表示从哪个索引位置删除

参数2:表示删除元素的个数

String

语法格式

var 变量名 = new String("…") ;

var 变量名 = "…" ;

属性

获取字符串长度       length

方法

获取指定角标的字符        charAt

获取指定字符串的索引        indexOf

去除字符串两端的空格        trim

字符串截取        subString

JSON

定义json

JavaScriptObject Notation,JavaScript对象标记法。

格式

var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

键值对的格式

键必须用字符串

  1. 字符串        加引号
  2. 数字        直接写
  3. 数组        []
  4. 对象        {}

调用

属性        对象名.属性名

函数        对象名.函数名()

JSON对象和JSON字符串的互相转换

对象转字符串        JSON.stringify(json对象)

字符串转对象        JSON.parse(字符串对象)

BOM

浏览器对象模型

  1. Window浏览器窗口对象
  2. Navigator浏览器对象
  3. Screen屏幕对象
  4. History历史记录对象
  5. Location地址栏对象

BOM对象

  • window

警告框        alert()

对话框        confirm("要弹出的文本内容")

周期性执行的定时任务        setInterval(fn,毫秒值)

        fn:函数,需要周期性执行的功能代码

        毫秒值:间隔时间

一次性执行的定时任务        setTimeout(fn,毫秒值)

  • location

设置或获取url        href

DOM

文档对象模型

- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象

DOM技术主要作用

- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

使用document对象获取Element元素对象

通过id获取        getElementById()
通过标签获取    getElementsByTagName()
通过name获取   getElementsByName()
通过class获取    getElementsByClassName()

小知识
                div标签对象的innerHTML属性来修改标签的内容
                    div名.innerHTML = "要改的文本内容";
                修改img标签对象的src属性值
                    img.src = "img/on.gif";
                改变checkbox为选中状态
                    先遍历复选框,并将值拿出来,给一个常量  常量名.checked = true;

事件监听

事件绑定的函数,只有在事件被触发时,函数才会被调用。

事件的绑定方式

方式一:在HTML标签中使用属性绑定事件
                第一步<input type="button" id="btn1" value="事件绑定1" οnclick="on()">
                第二步<script>
                    function on(){
                        alert("按钮1被点击了...");
                    }
                </script>

方式二:使用DOM的属性进行绑定事件

第一步<input type="button" id="btn2" value="事件绑定2">
第二步document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}

常见事件

鼠标单击事件                onclick
元素失去焦点                onblur
元素获得焦点                onfocus
页面或图像完成加载    onload
表单提交                      onsubmit
键盘的键被按下           onkeydown
鼠标移动到元素上        onmouseover
鼠标从元素上移开        onmouseout

小知识

切换大小写

获取到的var的变量名.value = var的变量名.value.toLowerCase();//toUpperCase();大写

MVVM的前端开发思想

(Model-View-ViewModel)
            - Model: 数据模型,前端中通过请求从后台获取的数据
            - View: 视图,用于展示数据的页面的html+css搭建的页面,但是没有数据
            - ViewModel: 数据绑定到视图,将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上
 

查看更多作品

了解更多请查看w3school官网