JS的三大部分
一、ECMAJavaScript基础语法：
1.javascript的引入方式
1) 行内式
<script>
alert(1)
</script>
2） 引入式
<script src='test.js'> </script>
2.javascript基础语法
1） 几个简单的函数
alert()、 # 警告对话框
confirm()、# 确认对话框
prompt()、 # 输入对话框，接收的为字符串
console.log() # 控制台 输出
console.dir() # 可以显示一个对象的所有属性和方法
document.write() # 向网页文档中输出了一段文字
typeof(变量) # 类型查询
语法规则：JavaScript对换行、缩进、空格不敏感，语句末尾加分号，单行注释// 多行注释/* */
2) 直接量、变量
（1） 直接量：数字99和字符串“99”
（2） 变量的定义、赋值、命名规范
var a ；
a = 1 ；
· 变量名的命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。并且区分大小写。
Camel 标记法
首字母是小写的，接下来的字母都以大写字符开头。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 标记法 首字母是大写的，接下来的字母都以大写字符开头。例如： Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利类型标记法 在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“ Var iMyTestValue = 0, sMySecondValue = "hi";
3） 数据类型
基础数据类型：
String：模板字符串·模板字符串&{name}·
Number：
Number.MAX_VALUE,Number.MIN_VALUE.
NaN不等于NaN
isNaN('test') #true
Infinity
Boolean：
Null：
Undefined：
引用数据类型：
Array：数组
(1) 数组的创建：
字面量方式：var a = ['a','b']
构造函数：var a = new Array();
(2) 赋值
a[0] = 'a';
a[1] = 'b';
(3) 方法：
concat():把几个数组合并成一个数组；
join():返回字符串，将数组中的元素，用指定的字符串连接起来
pop()：删除数组最后一个元素并返回
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
shift() :删除并返回数组的第一个元素；
unshift()：向元组的开头添加一个或多个元素，并返回新数组的长度。
sort()：对数组的数据进行排序。
reverse()：颠倒数组中的元素的顺序。
slice()：切片，左闭右开
splice()： 删除元素，个数，添加新元素。
toString():将数组中所有的元素合在一块用逗号隔开，便构成一个长字符串。
isArray():
indexOf(): 索引位置或-1
(4) 属性
length
prototype
String：
(1) 创建
(2) 赋值
(3) 属性
(4) 方法
charAt() : 返回指定索引的位置的字符；
concat():返回新字符串，将两个或多个字符串拼接。
match():返回正则表达式模式对字符串进行查找，并将包含查找结果作为结果返回。
replace（a,b） 字符串b替换a
search() 指明是否存在相应的匹配，存在则返回这个匹配距离字符串开始的偏移量。如果没有找到匹配，返回-1
slice():切片
split('a',1):分割字符串，并制定返回数组的长度
substr(）:截取子字符串
toUpperCase():
toLowerCase():
Date：
1.创建，只有构造方法一个方式，Date()
2.方法
getDate():（1-31）一个月的第几天
getDay():（0-6）一个星期的第几天
getMonth():（0-11）一年中的第几个月
getYear():四位数年份
getHours():
getMinutes():
getSeconds():
mydata.toLocalString()
Object：protoType
Math：
Math.floor():
.ceil()
.max(a,b)
.min(a,b)
random() 0~1包含0不包含1
max-min之间的随机数：min+Math.random()*(max-min)
4） 数据类型转换
-
-
- 数字 + 字符串：数字转换为字符串
- 数字 + 布尔值：true转换为1，false转换为0
- 字符串 + 布尔值：布尔值转换为字符串true或false
- 转换成字符串：toString（）
- 转换成数字：parseInt（）
- 转化成浮点数：parseFloat（）
- 强制类型转换：String（）、Boolean（）、Number（）
-
5） 流程控制
# if(){}else{}
# if(){}else if(){}else{}
# && ||
# while(){}
# do{}while()
# for(var i=0;i<10;i++){}、
# switch(条件){ // 注意case穿透问题
case 1：
执行语句；
break；
case 2：
执行语句；
break；
。。。。。。。。
default:
执行语句；
}
6) 函数
避免重复，让编程模块化。
函数定义的几种形式：
function 函数名(){};
var 函数名= function(){};
箭头形式定义：
var f=v=>v 等同于var f = function（v）{return V;};
var sum=(sum1,sum2)=>sum1+sum2;
等同于:
var sum = function(sum1,sum2){
return sum1+sum2;};
函数的实参数量可以大于形参数量。
引申：定义类？名字首字母大写，伪面向对象。
function Add(){};
var a = new Add()
7) 伪数组
有数据的长度和索引，但是没有数组的方法。
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------"); }
var array = [1,2,3,4,5,6]; array.splice(0); //方式1：删除数组中所有项目 array.length = 0; //方式1：length属性可以赋值，在其它语言中length是只读 array = []; //方式3：推荐
二、DOM 文档对象模型，操作网页上的元素的API。
(一)、事件
JS是以事件驱动为核心的一门语言。
事件的三要素：
事件源、事件、事件驱动程序。
常见事件如下：
onclick：鼠标单击
ondblclick：鼠标双击
onmouseover：鼠标悬停
onmouseout：鼠标移出
onkeyup：按下并释放键盘上的一个键时触发
onchange：文本内容或下拉菜单中的选项发送改变
onfocus:获取焦点，表示文本框等获得鼠标光标
onblur：失去焦点，表示文本框等失去鼠标光标
onload：网页文档加载事件
onunload：关闭网页时
onsubmit：表单提交事件、
onreset:重置表单时。
1.获取事件源的方式（DOM节点的获取）
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s2.绑定事件的方式
1) 直接绑定匿名函数
div1.onclick=function(){};
2) 先单独定义函数，再绑定（注意函数名不带括号）
div.onclick = fn；
function fn(){};
3) 行内绑定(绑定函数名fn())
<div id="box1" onclick="fn()"></div>
3.事件驱动程序
1） 操作标签属性和样式
注意两点：
（1） 在js里写属性值时，要用引号
（2） 在js里写属性名 -变成驼峰形式，backgroud-color->backgroudColor
标签自带属性class-》className
2） onload事件
当文档加载（先文本后图片）完毕的时候，触发onload事件
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
(二)、DOM
1.DOM树
1） 节点
元素节点：HTML标签
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：标签的属性
整个html文档是一个文档节点。所有的节点都是object
2） DOM节点有啥用？
-
-
-
-
找对象（元素节点）
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应：事件源、事件、事件的驱动程序
-
-
-
（3）DOM节点的三种获取方式
（4） DOM访问关系的获取
父节点：
parentNode
兄弟节点：
nextSibling
nextElementSibling
previousSibling
previousElementSibling
子节点：
firstChild
firstElementChild
lastChild
lastElementChild
所有子节点：
childNodes
children
多种浏览器支持方式：下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
节点自己.parentNode.children[index]; //随意得到兄弟节点
这里讲一下nodeType。
nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
新的标签(元素节点) = document.createElement("标签名");
插入节点：
两种方式：
父节点.appendChild(新的子节点);
父节点.insertBefore(新的子节点,作为参考的子节点);
删除节点：
父节点.removeChild(子节点);
复制节点：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。 要复制的节点.cloneNode(true);
（6） 设置节点属性：
a.获取节点的属性值
方式1：
元素节点.属性; 元素节点[属性];
方式2： 元素节点.getAttribute("属性名称")；
b.设置节点属性：
1. myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
2.元素节点.setAttribute(属性名, 新的属性值);
c.删除节点属性
元素节点.removeAttribute(属性名);
三、BOM
四、预习和扩展
1.innerHTML、innerText 、value
innerHTML:获取的是当前元素下的标签和文本 +=‘<a href="#">haha</a>’;
innerText：获取的是所有的文本 +='增加文本内容'
value：获取的是input元素输入内容。
2 创建对象的几种常用方式
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
3. 考试题练习：
47、[1,2,3]+[4,5,6]的结果是多少？
两个列表相加，等价于extend
48、提高python运行效率的方法
1、使用生成器，因为可以节约大量内存
2、循环代码优化，避免过多重复代码的执行
3、核心模块用Cython PyPy等，提高效率
4、多进程、多线程、协程
5、多个if elif条件判断，可以把最有可能先发生的条件放到前面写，这样可以减少程序判断的次数，提高效率
4. this的四种用法：
this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，
function test(){
this.x = 1;
}
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
1.在一般函数方法中使用 this 指代全局对象 1 2 3 4 5 function test(){ this.x = 1; alert(this.x); } test(); // 1 2.作为对象方法调用，this 指代上级对象 复制代码 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1 复制代码 3.作为构造函数调用，this 指代new 出的对象 复制代码 function test(){ this.x = 1; } var o = new test(); alert(o.x); // 1 //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变： var x = 2; function test(){ this.x = 1; } var o = new test(); alert(x); //2 复制代码 4.apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数 复制代码 var x = 0; function test(){ alert(this.x); } var o={}; o.x = 1; o.m = test; o.m.apply(); //0 //apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为 o.m.apply(o); //1