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"); //方式三：通过 类名 获得 标签数组，所以有s
2.绑定事件的方式
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(); //
2.作为对象方法调用，this 指代上级对象 复制代码
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); //
复制代码
3.作为构造函数调用，this 指代new 出的对象 复制代码
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); //
//运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //
复制代码 4.apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数 复制代码
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //
//apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为 o.m.apply(o); //
this的四种用法