概述：JavaScript是一种具有函数优先的轻量级，解释型的编程语言，是一种独立于硬件和操作系统的跨平台，事件驱动，动态类型的编程语言
作用：与用户交互，提供反馈，创建自定义web界面，处理表单，设置cokie
调试方法：alert：断点调试，console.Log输出变量结构调试
在页面在引入js：
行内式：直接在html标签属性（事件属性,on开头的属性）中编写代码，不推荐使用
内联式：script标签包裹，script标签可以在head，body中任意位置多次出现，但要注意顺序
<body><h1>Hello Javascrip<h1><button id=>Hello</button></body>
<head><scrip>window.οnlοad=function(){document.getelementById.....}</scrip></head>
外联式:大量代码时使用，script属性是“src”,b不是href
<scrip src=”hello js”></scrip>
变量：JS是动态类型语言，变量类型无限制
命名规则：包括字母，数字（不能开头），下划线，$,避免使用关键字作为变量名
命名规范：小驼峰第二个单词首字母大写：firstName，大驼峰首字母大写:FirstName，下划线:first_name
声明与赋值：var声明变量，使用（初始化后才能使用）=为变量赋值，未初始化的变量其默认值为undefined
例如：var a;console.log(a);
undefined
a=10;console.log(a);
10
作用域：
全局变量：通过关键字globalThis，Window访问全局对象，所有函数声明外的变量即为全局变量，具有全局作用域；生存周期：关闭网页所在浏览器窗口后销毁
局部变量：函数内声明的变量为局部变量，包括函数的形参变量具有当前函数的局部作用域；生存周期：所在函数执行完毕自动销毁
JS工作方式：先解析代码（预编译），获取当下作用域所有被声明的变量和函数，再逐行运行代码
变量提升：所有变量声明语句都会被提升到代码头部执行；全局：所有变量和函数声明会被提升到代码之前执行；局部：函数内部变量和内部函数的声明会在该函数被调用时提升到函数体最前面；表现：变量在声明代码前可以访问，但其变量值为undefined，函数在声明代码前可以调用
JS数据类型：
基本数据类型：字符串（string）数值（number）布尔（boolean）undefined，null:使用var声明但未初始化null：表示空引用，当声明的变量准备用于保存对象是，可以将该变量初始化为NUll
引用数据类型：对象（object）数组（array，不是类型）日期时间（data），函数（function），所有自定义对象，对象是属性的集合，属性有：名/值对构成（较为特殊的对象-全局对象，对象是“命名值的无序集合”，数组是带编号的值的有序集合），函数是一种特殊的对象（如果函数来初始化一个新建的对象，即为构造函数，使用new运算符）
字符串：字符串必须放到引号里“\”为转义字符 var mood=”happy”
| 转义序列 | 字符 |
| \b | 退格符 |
| \f | 换页符 |
| \n | 换行符 |
| \r | 回车 |
| \t | Tab（制表符） |
| \’ | 单引号 |
| \’’ | 双引号 |
| \\ | 反斜杠 |
数值：所有能够进行算术运算的数，包括（正负）整数和浮点数
Var age=33; var temperature=-10; var height=1.77
JS中用NaN(not a number)表示非数值，仅在类型转换时出现，NaN不和任何值相等，包括自身
var x = 0.3 - 0.2;
var y = 0.2 - 0.1;
console.log(x == y);（输出位false，浮点数精度问题）
布尔值：true，false：是或否，真或假，0或1，任意JS的值都可以转换为布尔值，undefined，NUll，0，-0，NaN,”空字符串”都会转换为false，其他为true
Object：对象是一组数据（属性）和功能（方法）的集合
创建对象方法new构造函数 :
var person=new Object();person=”john”;person.age=12;
对象字面量：var person={name:”Mike”,age:12}
Array：包含0-n个连续存储空间的有序列表，即一组连续的变量
var nums1=[1,2,3,4];
var nums2=new Array（10,20,30,40）
Date类型：使用new操作符和Date()构造函数创建对象：var now=new Date();
Date对象包括多种处理日期时间的方法：
getFullYear()返回4位数字年份，getDate()返回当月第几天（1-31），setMonth()返回月份，toDateString()返回日期部分字符串表示，toLocaleDataString()返回本地格式的字符串
数据转换：JS可以自由进行数据类型转换
转换与相等性：==被认为期望相等，如：null==undefined“0”==0
显式类型转换：
1.通过类型函数（如String（））可以显示的将值从一种数据类型转换成另一种数据类型
2.注意：不使用new关键字，new String（123）得到的是一个字符串对象，而String（123）返回字符串原始值
3.可以通过包装对象或引用对象的toString（）的方法获得该值的字符串表示，不同的对象的toString（）方法结果不同
String(123)
'123'
String(12.3)
'12.3'
String(null)
'null'
String(undefined)
'undefined'
null.toString()错误，toString要排除null和undefined
4.惯用法：
X+””,String(x)；
+x,Number(x);
Number (false)
0
Number(true)
1
Number(undefined)
NaN
Number(null)
0
Number("1.2")
1.2
Number("1.2.3")
NaN
Number(new Object())
NaN
Number(123)
123
!!X,Boolean(x);
Boolean("")
false
Boolean("s")
true
Boolean(0)
false
Boolean(1)
true
Boolean(null)
false
Boolean(undefined)
false
Boolean(new Object())
true
利用全局函数，如parseLnt()整数内容取出,parseFloat()有效浮点数取出;
parseInt("100")
100
parseInt("100.4")
100
parseInt("100px")
100
parseFloat("300")
300
parseFloat("3.14")
3.14
parseFloat("5.6b")
5.6
parseFloat(".66")
0.66
parseFloat("..66")
NaN
利用对象的valueOf（）获得对象原始值（无原始值，返回对象本身）
利用typeof（）函数获取值的类型描述（字符串）：
typeof “John”--string;
typeof 3.14--number;
typeof NaN--number ;
typeof false--boolean;
typeof [1,2,3,4]--object;
typeof {x:100,y:200}--object;
typeof new Date--object；
typeof function (){}--function;
typeof mycar--undefined;
typeof null--object;
练习：
1+"2"+3
'123'
1+"2"+"3"
'123'
"A"-"B"+"2"
'NaN2'
"100"-90
10
"100"-"90"
10
运算符：
算数运算符：+，-，*，/，%，++，——
字符串运算符：2个字符串拼接处一个新字符串 +
关系运算符：比大小，结果为true，false,>,<,>=,<=,==,===(恒等，2个数据党的数据类型和值都想吐时结果为true),!==，字符串比较用ASCII码
逻辑运算符：！，&&，||
赋值运算符：=（右边的值给左边），+=，*=
其他运算符：条件运算符：条件表达式？结果1：结果2，对表达式进行计算，如果为true，执行结果1，反之亦然；逗号运算符，
表达式中的类型转换：运算符自动转换不匹配的数据类型
转换为数值：
1.字符串：若其格式为数字，则转换成对于数值，否则为NaN
2.布尔值：true=1，false=0；
3.undefined：NaN
4.null：0
5.其他对象：NaN
转换为字符串：
- 数值：转换为包含数字字符的字符串
2.布尔值：转换为true，false；
3.undefined：“undefined”
4.null：“null”
5.其他对象：若对象有toString（）方法，则转换为该方法的返回值，否则”[object Object]”
转换为布尔:
- 字符串：长度为0的字符串转换为false
2.数值：值为0和NaN时，转换成false，否则为true
3.undefined，null：false
5.其他对象：转换成true
流程控制
分支语句:
If:通过对表达式的布尔结果进行判断，从而选择一个分支执行
If（条件）{语句}if（条件）{语句}elseif（条件）{语句}
Switch（表达式）{case1：语句1break；default:语句n}
循环语句:
do{statements}while(condition):statements会在检查条件前执行一次
While（）{ }
For（1：2：3）{ }
break：终止循环和Switch语句continue:中断本次执行，继续下一轮执行的while，do-while，for
函数;只可以传递给一个函数，函数可以返回一个值；一个函数如果没有return语句，则默认返回undefined，若返回特定值，只需要使用return（使用new关键字调用构造函数除外）
内置函数：默认被包含全局对象上（Window对象）如：
alert(“Hello world!”),语句会弹出一个对话框，显示一个问候语“Hello World”
confirm()：确定取消对话框
,prompt()：弹出提示框，要求用户输入文本信息
,parseInt(),parseFloat(),eval(),isNaN()：检查数字是否是非数值
,isFinite()：是否为一个有限数值,escape(),unescape()
函数定义：
函数声明：function是关键字，函数名是必选项且唯一，命名与变量一样，函数体必选项，return是可选项
function 函数名（[参数1]，[参数2...）
{函数体;
[return 表达式]}
函数表达式 ：函数表达式不能提升，所以不能在定义前调用
var myFunction =function name([param[,param[,...]]]){statements}
name:函数名，省略就是匿名函数，param:传递函数参数名称，statement：组成函数体的声明语句
var myFunc=function() var myFunc=function
{ namedFunction(){
statements statements
} }
函数作用域：ES5将函数认为是唯一的局部作用域；函数参数（形参）和内部声明的变量为局部变量，随函数调用产生，执行完毕而销毁
函数参数：实参：传递给函数的值；形参对应位置函数参数名
如果实参包含原始值（数值，字符串，布尔值）的变量，就算函数内部改变了对应的形参，返回后，该实参变量的值也不会改变
如果实参是一个对象引用，则对应形参和该实参指向同一个对象，如果函数内部形参改变，则返回实参也会改变
arguments 对象：函数的实际参数会被保存在一个类似数组的arguments对象中
默认参数：
undefined
回调函数：当函数作为参数传递给另一个函数时，被传递的函数称为回调函数（callback）
函数闭包：
词法作用域中使用的域，是变量在代码中声明的位置所决定，嵌套函数可以访问其外部声明的变量
JS中的函数会形成闭包，闭包是有函数级创建该函数的词法环境组合而成，以下环境包含了这个闭包创建时所能访问的所有局部变量
内置对象：
| 内置对象 | 说明 |
| Math | 数学对象，数学运算 |
| Date | 日期对象，用于定义日期对象 |
| String | 字符串对象，用于定义字符串对象和处理字符串 |
| Array | 数组对象 |
| Number | 原始数值对象 |
| Boolean | 布尔值对象 |
| Function | 函数对象，用于定义函数 |
| Object | 基类，JS所有内置函数都是从基类继承（派生） |
| RegExp | 正则表达式对象 |
| Error | 异常对象 |
Object对象：JS所有对象都是直接或间接从Object派生（继承）
String对象：
创建方法：用new关键字：var str=new String（“Hello”）;var c=str.length
字符串字面量默认转换：var str =”String”;var c=str.length;
常用属性
| 属性 | 描述 |
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串长度 |
| prototype | 允许向对象添加属性和方法 |
常用方法
| 方法 | 描述 var str=“Hello world!” |
| indexOf() | 返回检索字符第一次出现位置 |
| lastIndex() | 返回检索字符最后一次出现位置 |
| toLowerCase() | 字符串转换为小写 |
| toUpperCase() | 字符串转换为大写 |
| concat() | 连接2个多个字符串，返回新字符串 |
| includes() | 查找字符串中是否有指定字字符串var str1=”world”true |
| split() | 字符串分割成字符串数组varnewstr=str.split(“, ”)[“Hello,”,“world!” |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取2个指定索引号之间的字符 |
| slice() | 提取字符串的片段，并在新的字符串中返回被提取的部分 |
| replace() | 代替新字符串 var newstr=str.replace(“world”,” ”)”Hello, !” |
| sort() | 排序 |
数组应用基础：数组可以认为是一组连续的变量，同一个数组元素可以是任意值包括undefined，null
创建数组：
数字字面量：[1,2,3],[1,,3][1,”2”,3],[ ]
数组初始化器：new Array(10);Array(10):表示创建一个初始化为10的数组对象
new Array(1,”2”,3);Array(1,”2”,3)表示创建一个1，”2”,3的数组对象
使用数组：
填充数组：
通过[index]（索引运算符）访问指定位置的数组元素，index可以=0的整数如：name[0]=”Tom”;name[1]=”Jerry”
如果index非整数，将其创建为当前数组对象的一个属性，而非元素
如：name[12.4]=”No Name”;
引用数组元素：如果访问元素，通过[index]（索引运算符），访问属性（包括自定义属性），则通过.(点运算符)或[“propertyName”]
如：names[1] names[“length”] names.length
length属性：用于获取设置数组元素个数，值为当前数组最大索引值+1
如： var nums=[1,2,3];//nums.length=3 nums.length=2;//nums=[1,2]
nums.length=4//num=[1,2,undefined,undefined] nums.length=0//num=[ ]
遍历数组：
利用for循环：
利用for...of
多维数组：JS中不支持多维数组
采用一维数组作为另一个一维数组的元素来当做二维数组：
使用双重for或者for..or遍历二维数组：
数组对象：length设置获取数组对象元素个数
修改器方法：
push：末尾加一个或多个元素，返回新数组长度，pop：删除最后一个数组元素，返回该元素
unshift:：在数组开头添加一个或多个元素，并返回新数组长度,shift：删除数组第一个元素，并返回该元素
splice():在任意位置给数组添加，删除或替换任意元素，并返回包含了被删除元素的数组
Reverse：颠倒元素排列顺序，并返回颠倒后的数组
Sort（不是迭代器）：对数组元素排序，返回排序的数组
Sort高阶：可以接受一个回调函数为参数，该回调函数必须有2个参数，且返回值大于0，小于0，或等于0；
Concat:返回一个由当前数组和其他若干数组或若干非数值值组合而成的新数组
Join：连接所有数组元素组成一个字符串
Slice：抽取当前数组的一段元素组合成一个新数组
访问方法：
indexOf():返回数组中第一个与指定元素相等的索引，找不到则-1；
lastindexOf():返回数组中最后一个与指定元素相等的索引
toString():返回一个由所有元素组合而成的字符串，以逗号连接
迭代方法：
forEach()：为数组中每个元素执行一次回调，类似利用for，for of遍历数组
filter():将所有在过滤函数中返回true的数组元素放进一个新数组中并返回
map():返回一个新数组，结果是该数组中每个元素是调用一次提供的函数后的返回值
every():所有元素满足测试返回true
some():至少有一个满足测试返回true
reduce()/reduceRight():从左到右，从右到左，为每个数组元素执行一次回调函数，并把上次回调的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
DOM编程：
常见BOM（浏览器对象模型）对象：主要用于访问和操纵浏览器窗口即Window对象
document：访问和操作当前窗口的html文档
Navigate：获取浏览器和操作系统的信息
History：保存和管理用户在当前窗口中上网的历史记录
Location：代表该窗口当前显示的文档的URL
Screen：提供有关用户显示器的大小和可用的颜色和数量的信息
Frames：返回窗口中所有命名的框架（数组）
DOM：DOM对象是处理HTML文档的技术，通过DOM对象，JS可以动态访问，更新，操纵HTML页面的内容，结构和样式
Document 对象HTML文档的根；document与Window.Document等价;当浏览器开始加载HTML文档，document对象就存在，加载完成，document对象就与页面中每个元素实时映射
基本原理：DOM为树状模型，结点分为12种类型，常用有文档，元素，属性，文本，注释
| 节点类型 | ID | 说明 |
| Element | 1 | 元素结点，HTML标签对head，body |
| Attribute | 2 | 属性，<a>中的href |
| Text | 3 | 文本，<p>中的文档段落 |
| Comment | 8 | 注释 |
| Document | 9 | 文档结点，整个文档 |
DOM操作：
获取元素：
document.getElementById(id):通过元素的ID属性返回元素对象
document.getElementsByName(name):通过元素的name属性返回元素对象集合
document.getElementsByTagName(tagName):通过元素标签名返回元素对象集合
document.getElementsByClassName(className):通过元素属性返回元素对象集合
document.querySelector(selector):通过选择器返回符合规则第一个元素对象
document.querySelectorAll(selector):返回符合规则的所有元素对象集合
选择器：id:以#开头如#btn-ok;class:以.开头如.container;标签选取器：di;复合选择器：基本选择器组合如div.container
创建元素:
document.createElement(tagName):标签名创建返回改标签对应元素对象
document.createTextNode([textContent]):创建并返还包含文本内容文本节点对象
添加元素：
appendChild():node.appendChild(node)将元素对象追加指定为元素最后一个结点
insertBefore():node.insertBefore(new,exist)在已存在结点后插入新结点，node为exist父节点
替换元素：
replaceChild():node.replaceChild(new,old)新结点替换某个子节点，返回被替换节点，node为old父节点
删除元素：
removeChild():node.removeChild(node)删除指定元素的某个指定子节点，以node为对象，返回被删除节点，如果节点不存在，返回null
克隆元素：
cloneNode():node.cloneNode(deep)创建节点的拷贝，并返回该副本，若要克隆该节点所有属性，内容以及子节点，deep参数应为true，否则false（默认）
属性操作：
元素属性读写
getAttribute():element.getAttribute(attributename)返回元素节点指定属性值
setAttribute():element.setAttribute(attributename,attributeevalue)把指定属性设置更改为属性值
hasAttribute():element.hasAttribute(attributename):如果元素拥有指定属性，则返回true，否则为false
HTML-DOM属性读写:element.attribute,如通过link.href对link元素href属性读写
节点属性
childNodes:返回节点子节点集合（包括文本节点）
children:返回节点子节点集合
firstChild:返回节点第一个子节点
lastChild:返回节点最后一个子节点
parentNode:返回节点父节点
nextSibling:返回指定下一个兄弟节点，无则null
previousSibling:返回节点上一个兄弟节点，无则null
nodeName:返回节点名称，即标记名
nodeType:返回节点类型，1表示元素节点，2表示属性节点，3表示文本节点
nodeValue:获取设置文本结点内容
textContent:设置或返回节点及其后代的文本内容
title:设置或返回元素的title属性
样式操作
style属性：获取或设置元素的CSS样式
例如：element.style.fontSize=”1.2em”;element.style.border=”1px solid red”;
classList属性：对应标签class属性
事件驱动
事件三要素：事件源（标签）.on 事件（动作）=function(){事件体(代码)}
事件核心要素：事件对象，事件目标，事件处理程序
事件与事件处理：
事件是指在页面上与用户进行交互时发生的操作，主要包括用户动作和状态变化例:单击超链接或按钮就会触发单击(click)事件；载入页面就会载入(load)事件
事件处理程序（event handler）或事件侦听程序（event listener）：
处理或响应事件的函数；
应用程序通过指明事件类型和事件目标，Web浏览器中注册它们的事件处理程序函数；
当在特定的目标上发生特定类型的事件时，浏览器会调用对应的处理程序，称之为事件触发
事件对象（event object）：
事件对象作为参数传递给事件处理函数；所有事件对象都有用来指定事件类型type属性和指定事件目标的target属性
| 属性 | 说明 |
| type | 返回事件名称，如单击事件名click |
| srcElement | 返回事件元素对象，如单击click事件，该事件的srcElement属性就是对应这个按钮对象的引用 |
| canceBubble | 取消当前事件向上冒泡,传递给上一层元素对象,默认为false,允许冒泡,否则为true,禁止冒泡 |
| returnValue | 指定事件返回值，默认true，若设置为false，则取消事件默认处理动作 |
| keyCode | 指键盘事件的按键Unicode键码值 |
| altKey | Alt键，按下为true |
| ctrlKey | Ctrl键，按下为true |
| shiftKey | shift键，按下为true |
| repeat | 指示keydown事件是否重复，只适用于keydown事件 |
| fromElement | mouseover和mouseout事件，指示鼠标从哪个元素移来 |
| toElement | mouseover和mouseout事件，指示鼠标向哪个元素移来 |
事件类型（event type）也称事件名（event name）：说明发送什么事件类型的字符串，如“click”“mousemove”
事件目标（event target）：发生事件或与之相关的对象，Window，document，element是常见的事件目标
事件与时间处理：
事件传播（event propagation）:对于单个对象的特定事件是不能传播的，如window的load事件；
DOM事件流有2种：冒泡事件，捕获事件
事件传播分为三阶段：
捕捉阶段：事件沿着DOM向下传播，经过目标节点的每一个祖先节点，直到目标节点
目标阶段：在此阶段中，事件传导到目标节点。在浏览器中查找到已经指定给目标事件的监听器后，运行该事件监听器
冒泡事件：事件沿着DOM树向上转送，在逐次访问目标元素的祖先节点直到document节点。该过程的每一步，都会检查那些不是捕捉事件监听的事件监听器并执行
阻止冒泡，取消事件传播：调用stopPropagation()方法 例：event.stopPropagation();
取消事件，阻止事件的默认操作：
将属性注册的事件处理程序的返回值为false；
调用事件对象的preventDefault()方法；例：event.preventDefault();
设置事件对象的returnValue属性为false；event.returnValue=false;
事件绑定：事件绑定是通过事件的属性绑定，事件属性是指在事件名称前加上前缀“on”
常见的时间属性：
onload:当文件载入完成时触发
onclick:当单击鼠标左键时触发
onmousedown：当按下鼠标时触发
onmouseup:当鼠标弹起时触发
onmouseover:当鼠标指针移出某个元素到另一个元素时触发
onmouseout:当鼠标指针位于某个元素且将要移出元素的边界时触发
onmousemove:当鼠标在某个元素上时持续触发
onkeypress:当敲击键盘按键时触发
onkeydown:按下键盘按键时触发
onkeyup:当键盘按键弹起时触发
事件绑定:
静态绑定：当事件处理程序（函数）直接作为HTML元素的事件属性值
例：为button指定一个单击onclick事件
<button οnclick=”alert(‘Hello JavaScript!’)”/>欢迎<button>
动态绑定：将事件处理程序赋值给元素对象的事件属性（DOM level-0）
例：element.οnclick=fn;//fn为事件处理函数（函数引用）
取消事件绑定：如element.οnclick=null;
常见事件：
鼠标单击：click(左键单击)dbclick（左键双击）mousedown(按键按下)mouseup(按键弹起)
鼠标移动：mouseover(鼠标经过)mousemove(鼠标移动)mouseout(鼠标移开)
键盘事件：keypress(敲击按键)keydown(按下按键)keyup(弹起按键)
表单处理：
表单标签：<form id=”formid” name=”my`
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
