WEB前端开发--4（JavaScript基础）

JavaScript

1.JavaScript概述与基础语法

JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言

运行环境：1.独立安装的JS解释器(Node JS)

解释型：运行之前不需要编译，运行之前不会检查错误，直到碰到错误为止

编译型：对源码进行编译，还能检查语法错误（C/C++）

1.1 JS组成

完整的JS由三部分组成：

　　1. 核心(ECMAScript)

　　2. 文档对象模型(DOM,Document Object Model)

　　3. 浏览器对象模型(BOM,Browser Object Model)

1.2 JS特点

　　1.开发工具简单，记事本即可

　　2.无需编译，直接由JS引擎负责执行

　　3.弱语言由数据来决定数据类型

　　4.面向对象

1.3 浏览器内核的作用

负责页面内容的渲染，内核主要由两部分组成：

　　1.内容排版引擎解析HTML和CSS

　　2.脚本解释引擎解析JavaSript

1.4 JS脚本嵌入在HTML页面中执行的步骤

1.4.1 将JS代码嵌入在元素"事件中"

　　onclick：当单击元素时所做的操作

<html>

　<body>

　　　　打印消息

　　</button>

　</body>

</html>

注意单引号双引号的使用

1.4.2 将JS代码嵌入在<script>标记中

　　<script></script>允许出现在网页的任意位置处

<html>

　<body>

　　　　document.write('<b>欢迎<b>')

　　　　console.log("脚本执行结束了...")

　　</script>

　</body>

<html>

1.4.3 将JS代码写在外部脚本文件中(**.js)

　　1. 创建js文件，并且编写JS代码

　　2. 在页面中引入js文件

注意：<script src=""></script>标记中间不允许出现任何内容，出现就是错误的

2. JS语法规范

2.1 语句 允许被JS引擎所解释的代码，使用分号来表示结束

　　　　　　console.log() document.write()　　

　　　　大小写敏感

　　　　　　console.log()正确 Console.log()错误

　　　　英文标点符号

　　　　　　console.log("")正确 console.log(“”)错误

　　　　由表达式、关键字、运算符组成

2.2 注释

　　　　单行注释：//

　　　　多行注释：/**/

　　　　sublime text中为Ctrl+/

2.3 变量

　　内存：保存程序在运行过程中，所需要用到的数据。8bit(比特是表示信息的最小单位)=1 byte

　　变量：就是内存中一段存储空间名：内存空间的别名，可以自定义值：保存在内存空间中的数据

2.3.1变量的声明

声明：var 变量名； var userName;

　　赋值： var userName=25.5;

　　变量名=值

一次性声明多个变量：

var 变量名1，变量名2...变量名n

var stuName="PP.XZ",stuAge=25,stuHeight=50;

2.3.2 变量名命名规范

1. 不允许使用JS的关键字和保留关键字

2. 由字母、数字、下划线以及$组成

　　var stuName;

　　var stuName1;

　　var stu_name;

　　var stu$name;

3. 不能以数字开头

4. 尽量见名知意

5. 可以采用"驼峰命名法"

　　变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符大写

　　var stuName

2.3.3 变量的使用

　　var stuName="小猪佩奇"

　　console.log(stuName)

2.3.4 变量的存取操作

1.获取变量的值-GET操作

　　var userPwd='123456'

　　console.log(userPwd)

　　document.write(userPwd)

　　var newPwd = userPwd;

2. 保存(设置)变量的值-SET操作

　　var oldPwd='123'

　　oldPwd='456'

　　oldPwd=newPwd

3. 数据类型

3.1 原始类型(基本类型)

1）数字类型——number类型

　　可以表示32位的整数以及64位的浮点数

　　整数：32位即4字节

　　浮点数：即小数，64位，8字节

2）布尔类型——bool

　　作用：表示条件的结果

　　取值：true：真，肯定的结果

　　　　　false：假，否定的结果

3）字符串类型——string类型

　　由Unicode字符、数字、标点组成

4）空——null

5）未定义——undefined

　　　　1.声明变量未赋值

　　　　2.访问对象不存在的属性

3.2 数据类型转换

弱类型：由数据来决定变量的数据类型是什么——JS语言数据类型为弱类型

　　　　var stu; //undefined

　　　　stu=25; //number

　　　　stu="15" //string

3.2.1 隐式转换

自动转换，由JS在运算过程中，自己转换的操作，不需要人为参与

函数：typeof() 或 typeof

　　　　var num1 = 15

　　　　var s = typeof(num1); 获取num1的数据类型

　　　　var s1 = typeof num1; 获取num1的数据类型

NaN：

　　Not a Number 不是一个数字

　　isNaN：判断数据是否为非数字

　　结果为boolean类型：true——不是一个数字

　　　　　　　　　　　 false——是一个数字

注：所有的数据类型与string做加法运算时，最后的结果都为string

3.2.2 强制转换

1. toString()

　　作用：将任意的数据类型转换为string类型

　　用法：变量.toString(）

2. parsesInt（）

　　作用：获取指定数据的整数部分

　　用法：var result=parseInt(数据)

　　注意：parseInt从左到右依次转化，碰到第一个非整数类型，则停止

　　　　　若第一个字符就是非整数字符，则结果为NaN

3. parseFloat()

　　作用：将指定数据转换成小数

　　用法：var result=parseFloat(数据)

　　同样，一旦碰到非数字则停止转换，第一个为非数字会输出NaN

4. Number()

　　作用：将一个字符串解析为NaN

　　语法：var result=Nmuber(数据)

　　注意：数据中一旦包含非数字字符，则一律输出NaN

4. 运算符与表达式 略，只谈重点，类似python

== 判断等于——不比较类型，只比较数值

!= 不等于——数值不等于

=== 全等于——除了数值之外，连同类型也会一起比较

!== 不全等——类型也不同

5. 函数：

function 函数名(参数列表声明){

　　//代码块(函数体，功能体，方法体)

　　return 值;

}

、

6. 循环 与c语言相同

while(boolean表达式){循环体语句}

for(表达式1;表达式2;表达式3){}

7. 数组

　　创建：var arr=[] var arr=new Array()

　　添加：arr[1]=值 arr[5]=值

7.1 数组转字符串

　　String(arr)：将arr中每个元素转为字符串，用逗号分隔

　　arr.join(连接符)：将arr中的每个元素转为字符串，用自定义字符串连接

固定套路：1.chars.join("") ->无缝连接

　　　　　2.判断数组是空数组 chars.join("")==""

　　　　　3.将数组转化为也没面元素的内容

　　　　　　　"<开始标签>"+

　　　　　　arr.join("</结束标签><开始标签>")

　　　　　　　+"</结束标签>"

7.2 拼接和选取

不直接修改原数组，而返回新数组！

1. concat() 拼接两个或更多的数组，并返回结果

　　var newArr=arr1.contact(值1，值2，值3)

　　arr1不变 newArr为拼接后

2.slice() 返回现有数组的一个子数组

　　var subArr=arr.slice(starti,endi+!)

　　选取arr中starti位置开始，到endi结束的所有元素组成新数组返回——原数组保持不变

　　复制数组：arr.slice(0,arr.length+1)

3.splice 直接修改原数组

　　删除：

　　　　arr.splice(starti,n);

　　　　删除arr中starti位置开始的n个元素不考虑含头不含尾

　　　　var deletes=arr.splice(starti,n;)

　　　　返回值deletes保存了删除的元素组成的临时数组

　　插入：

　　　　arr.splice(starti,0,值1,值2,...)

　　　　在arr中starti位置，插入新值1、值2...原starti位置的值以及在其之后的值向后顺移

　　替换：

　　　　其实就是删除旧的，插入新的

　　　　arr.splice(starti,n,值1,值2,...)

　　　　先删除arr中starti位置的n个值，再再starti位置插入新值

　　　　强调：删除的元素个数和插入的新元素数不必一致

8. DOM——document object model

DOM是W3C(万维网联盟)的标准，是中立于平台的和语言的接口，它允许程序

和脚本动态地访问和更新文档的内容、结构和样式。

对网页进行增删改查的操作。

8.1.DOM查找

8.1.1 按id属性，精确查找一个元素对象(效率非常高)

　　 var elem=document.getElementById("id")

　强调：getElementById只能用在document上

　问题：不是所有元素都有id

　　</ul>

　　var ul = document.getElementById('myList');

　　console.log(ul);

8.1.2 按标签名查找

　　var elems=parent.getElemengtsByTagName("tag");

　　查找指定parent节点下的所有标签为tag的子代节点

　　强调：1.可用再任意父元素上

　　　　　2.不仅查直接子节点，而且查所有子代节点

　　　　　3.返回一个动态集合，即使只找到一个元素，也返回集合必须用[0],取出唯一元素

　　问题：不但找直接，而且找所有子代

　　</ul>

　　var ul = document.getElementById('menuList');

　　var list=ul.getElementsByTagName('li');

　　console.log(list);

8.1.3 通过name属性查找

　　document.getElementByName('name属性值')

　　可以返回DOM树种具有指定name属性值的所有子元素集合

　　</form>

　　var list = document.getElementsByName('boy');

　　console.log(typeof list);

8.1.4 通过class查找

　　查找父元素下指定class属性的元素

　　var elems=parent.getElementsByClassName('class属性值')

　　有兼容性问题：IE9+

　　</div>

　　var div=document.getElementById('news');

　　var list = div.getElementsByClassName('mainTitle');

　　console.log(list);

8.1.5 通过CSS选择器查找

元素选择器　　类选择器　　 ID选择器

后代选择器　　子代选择器　　群组选择器

8.1.5.1 只找一个元素：（selector为选择器）

　　var elem = parent.querySelector("selector")

　　强调：1.selector支持一切css中的选择器

　　　　2.如果选择器匹配的有多个，只返回第一个

8.1.5.2 找多个

　　var elems=parent.querySelectorAll("selector")

　　强调：selector API 返回的是非动态集合

9.DOM标准

核心DOM：可操作一切结构化文档的API，包括HTML和XML，万能繁琐

HTML DOM：专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化，不是万能简单

开发：先用简单的，再用复杂的补充——以实现效果为目标

9.1 核心DOM——4个操作

读取属性值：

　　1.先获得属性节点对象，再获得节点对象的值：

　　　　var attrNode = elem.attributes[下标/属性名]；

　　　　var attrNode = elem.getAttributeNode(属性名)

　　　　attrNode.value——属性值

　　2.直接获得属性值

　　　　var value = elem.getAttribute("属性名")

修改属性值：

　　elem.setAttribute("属性名",value)

　　var h1=document.getElementById("a1");

　　h1.setAttribute("name",zhangji);

判断是否包含指定属性：

　　var bool=elem.hasAttribute("属性名") //true或者false

　　element,getElementById("bt1").hasAttribute("onclick") //组合用法

移除属性：

　　elem.removeAttribute("属性名") 移除属性

　　var a = document.getElementById('alink')

　　a.removeAttribute('class')

9.2 修改样式

内联样式：elem.style.属性名="值"

强调：属性名为去横线变驼峰表示

例如：css:background-color——backgroundColor

　　　　　list-style-type——listStyleType

10. DOM添加

10.1.添加元素的步骤

10.1.1创建空元素

　　var elem=document.createElement("元素名")

　　var table = document.createElement('table')

　　console.log(table)

10.1.2.1设置关键属性

　　元素.属性名=值

　　a.innerHTML="go to mooc"

　　a.href="http://tmooc.cn"

　　<a href="http://tmooc.cn"> go to tmooc</a>

10.1.2.2设置关键样式

　　a.style.opacity="1"

　　a.style.cssText="width:100px;height:100px;"

10.1.3将元素添加到DOM树

　　parentNode.appendChild(childNode)

　　可用于将一个父元素追加最后一个子节点

　　var div=document.creatElement('div')

　　div.appendChild(txt) // 将txt的内容放入div

　　document.body.appendChild(div)

　　parentNode.insertBefore(newChild,existingChild)

　　用于在父元素中的指定子节点之前添加一个新的子节点

　　</ul>

　　var ul=document.getElementById('menu')

　　var newLi=document.createElement('li')

　　ul.InsertBefore(newLi,ul.lastChild)

10.2 添加元素优化：

　　尽量少的操作DOM树——每次修改DOM树都会导致重新layout

　　解决：

　　　　1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面上

　　　　2.如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面

　　文档片段：内存中，临时保存多个平级子元素的虚拟父元素。用法和普通父元素完全一致

　　1.创建片段

　　　　var frag=document.createDocumentFragment();

　　2.将子元素临时追加到frag中

　　　　frag.appendChild(child);

　　3.将frag追加到页面

　　　　parent.appendChild(frag);

　　　　强调：append之后，frag自动释放，不会占用元素

11.BOM

Browser Object Model：专门操作浏览器窗口的API——没有标准、兼容性问题

11.1 对象

　　windows：代表整个窗口

　　hstory：封装当前窗口打开后，成功访问过的历史url记录

　　navigator：封装浏览器配置信息

　　document：封装当前正在加载的网页内容

　　location：封装了当前窗口正在打开的url地址

　　screen：封装了屏幕的信息

　　event：定义了网页中的事件机制

11.2 获取当前窗口大小

　　完整当前窗口大小：

　　　　window.outerWidth/outerHeight

　　文档显示区大小：

　　　　window.innerWidth/innerHeight

11.3定时器——让程序按指定时间间隔自动执行任务，实现网页动态效果、计时功能

　　11.3.1 周期性定时器

　　　　让程序按指定时间间隔反复自动执行一项任务

　　　　setInterval(exp,time)：周期性触发代码exp

　　　　　　exp：执行语句

　　　　　　time：时间周期，单位为毫秒

　　　　setInterval(function(){console.log("Hellow World");},1000}

　　　　停止定时器

　　　　　　1.给定时器取名

　　　　　　　　var timer=setInterval(function(){console.log("Hello World");},1000)

　　　　　　2. 停止定时器

　　　　　　　　clearInterval(timer)

　　11.3.2 一次性定时器——让程序延迟一段时间执行

　　　　setTimeout(exp,time)：一次性触发代码exp

　　　　　　exp：代码语句

　　　　　　time：间隔时间，单位为毫秒

　　　　setTimeout(function(){alert("恭喜过关");},3000);

选择：只要反复执行，就选周期性定时器

　　　只要只执行一次，就用一次性定时器

WEB前端开发--4（JavaScript基础）

推荐阅读