JavaScript基础（详细版）

JavaScript基础
一，ECMAScript5.0
1，变量
（1）变量的概述/概念
变量：是指一段程序中不断变化的量，主要用来储存数据
（2）变量的作用
储存数据值的容器
（3）变量的语法结构和声明以及初始化和数据访问
<1>变量的语法结构：使用关键字var 变量的名称=值；
＜２＞变量的声明var　变量名称； 　　
＜３＞变量的初始化var　变量的名称＝值；
＜４＞数据的访问：typeof，eg：alert（type　变量）
（4）变量的应用场景：在什么时候 声明变量 （注：只要想到需要存储某个值或是结构）
（5）技术加深：变量的生命周期（GC垃圾回收机制了解）；变量在内存中的存储结构（重点）
ＧＣ垃圾回收机制：JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
（6）局部变量和全局变量
（１）全局变量：全局变量写在函数的最前面，所有数据都可以访问，局部变量去掉var　也就默认成全局变量
（２）局部变量：局部变量只限于函数体内
总结：函数体内部可以读取到函数外部的变量，而函数外的不能读取到函数内的变量
（7）变量的作用域：变量能够使用的范围
理解函数作用域要了解这几点
＜１＞函数变量的作用域有全局变量和局部变量两种，全局变量写在函数的最前面，局部变量写在函数体内，局部变量省略了var也就默认成了全局变量
＜２＞函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量
2，数据类型
（1）基本数据类型
string
字符串的拼接
＜１＞双引号套单引号或者单引号套双引号
＜２＞＋字符串指连接，数字类型指相加
number
数字类型
＜１＞数字类型包括浮点型数据
如何把数字类型转化为字符字符串类型
parseInt转化为整数；如果有小数点后的数字不被保留，用了parseInt小数点后面的数据就会丢失不被保留
parseFloat转换为小数（浮点数）
boolean
结果:true/fasle
用的多，不等于空，eg：贪吃蛇创建多个食物用不等于空，这就是判断正确的，是boolean
（2）复杂/特殊的数据类型
Object
这个数据类型是所有数据类型的父类，除了function（function的父类还是function）以外
Math()，Date为内置对象
内置对象是指：面向对象的编程语言，JS语言自己已经定义好的一些对象如string，Date，Array，Math．．．．
Array数组（也是内置对象）
内置对象：主要是用来存储数据（数组的）——>array 中的数据结构（课外知识自己了解）
function
声明函数的关键字
扩展。。。。
（3）空类型
undefiled未定义的
未定义：应用场景：eg：声明了变量，但是未初始化
null空值
查看错误时返回结果为null，表示没有获取我们想要的数据
3，数据类型之间的转换
（1）String：字符串转换为数字
（１）直接在等于后加加号（＋）也可变成数字类型
（２）parseInt将字符串类型转化为数字类型　　（会导致数据丢失）
（3）pardefloat转化为浮点数：可以保留完整的数据　（看情况而定）
（2）Number：数字转换字符串
（１） 变量.toStriong() eg:console.log(num.toString)
(2)数字+任何字符串 eg：console.log（num+""）
4，运算符和表达式
(1)算数运算符
+ ， - ，* ， / ，% ，++ ，–
（2）赋值运算符
+= ，-= ，*= ，/= ， %=
（3）逻辑运算符
！ || &&
（4）比较运算符
== ， >= ， <= ，= ，=== ，> ，<
（5）条件/三目/三元运算符
条件？true/false
5，流程控制语句
（1）顺序结构
代码从上往下，从左往右按顺序执行
（2）选择结构
<1>单项选择结构
a，if(){}语句
子主题 6
<2>双项选择结构
b，if(){}else{}
<3>多项选择结构
c，if(){}else if(){}else if(){}…
d，if语句嵌套
<4>switch语句
e，switch…case
（3）循环结构
<1>for
<2>do{}while()
<3>while(){}
6，数组（一维数组和二维数组）
数组的概念：数组是一组数据的集合，
在JS中的数组里面的数据可以是不同类型
(1)一维数组声明以及初始化
（2）二维数组的声明以及初始化
（3）数组数据的访问：一维通过for循环访问 二维通过for嵌套
（4）重点：数组的属性只有一个（length），索引（index）
数组的操作方法：主要是用来操作数组中的数据方法（7种）
（1）Jion():将数组成员通过一个分隔符合并成字符串（将一个数组合并成字符串器中Jion（’’）这样写）
（2）Push()和Pop():从数组最后增加成员或是删除成员
（3）Unshift()和shift()：从数组的前面增加成员或是删除成员
（4）Reverse():将数组值进行翻转
（5）IndexOf（）：返回数组中元素第一次出现的索引值
（6）splice（）：在数组中增加或是删除成员；从第几个索引或元素开始，删除（选择索引位置的数包含选择索引本身的数）一个或后几个元素。
（7）slice（start，end）从一个数组中选择（截取）元素，从0开始计算，最后一个值不包含
7，字符串对象以及处理字符串的方法
（1）JS中比较常用的内置对象
<1>字符串对象
<2>日期对象Date
<3>数组对象Array
<4>数值对象Math() 和 Number()
（2）处理字符串的方法（10种方法）
<1>Match（）（用一个任意元素查字符串中是否有这个元素）可以使字符串内索引指定的值，或者找到一个或多个正则表达式
<2>search()检索字符串中的子字符串（用元素查索引位置）
<3>IndexOf（字符串中的某个元素，数字）用元素和数字查找索引位置
<4>Replace(值1，值2)替换字符，把1替换成2
<5>CharAt（）数字获取字符（可以用for把每个字符获取）
<6>字符串大小写转换toLowercase和toUppercase
<7>连接字符串concat（字符串1，字符串2，。。。。字符串n）括号里用字符串变量名字连接
<8>比较运算符变量.localecompare(变量)两个值比较
<9>分割字符串split（）可以把字符串转化成数组
<10>substring（）用索引值截取字符串，不包含最后要截取的数字
8，函数
（1）什么是函数：是指重复执行的代码段
（2）函数有什么作用
（3）函数的声明
a，带有参数的函数声明 functuin 变量（参数1，参数2，…参数n）
b，带有返回值的函数声明return
c，匿名函数的声明 function（）｛｝
（4）函数的调用
（1）自调：函数自己调用
（2）事件驱动调用（2种）
<1>行间事件调用 eg：在标签里面添加事件并起名字，调用在script（不用添加加载事件，因为它调用的就是标签里面的）
<2>DOM节点操作调用：就是先获取元素，在用获取元素的变量调用 （要用加载事件）eg：变量.function((){}
（5）匿名函数的使用：：如果你希望函数只被调用一次，不希望被其他地方调用
（6）封闭函数
（function(){函数体})()用于匿名函数的自调，小括号想当于自调
（7）重点：代码优化 ，函数的封装（一定要会封装）---->其实就是某些函数的提成业务逻辑
9，事件
（1）事件的概念以及事件的产生和事件的作用
事件的概念：是某个事物的被动行为，
是指文档或者浏览器通过某个交互瞬间，
同时是一种受外界的指令
（2）事件分类
键盘事件
鼠标事件
加载事件
表单事件
触屏事件（移动端）
鼠标滚轮事件
…
（3）事件对象
给事件提供详细的事件信息
（4）事件的应用案例
点击登录 跳转页面
点击登录 判断用户的信息是否匹配
选择下拉框内容 改变省份城市以及区县
点击文本框，获得焦点
鼠标移动 将图片的局部放大
点击菜单，显示二级菜单
滑轮滚动，固定头部导航菜单
…
（5）重点：事件兼容的问题
10，计时器
（1）循环定时器：setIntervel
（2）炸弹定时器setTimeout
（3）计时器的应用场景
倒计时（获取验证码，秒杀，活动倒计时）
页面自动输出；时钟
聊天记录是通过计时器每多少毫秒获取查看
重复播放
。。。。。
11，应用案例
（1）结合事件以及之前所学的内容实现 页面的动态功能添加
（2）失去焦点判断用户登录时输入的数据是否匹配我们设定的结果
（3）获得焦点：焦点事件onfocus 失去焦点onblur
（4）重点：三级联动：事件的使用以及流程控制语句的使用和数组的使用
二，DOM
1，DOM的概述
（1）DOM 是 W3C（万维网联盟）的标准。
（2）DOM许程序和脚本动态地访问和更新文档的内容、结构和样式
2，DOM中的方法使用
获取元素
getXXXXXX
（1）getElementById() 返回带有指定 ID 的元素。ID 的元素。
（2）getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点
列表（集合/节点数组）。/节点数组）。
（3）getElementsByClassName() 返回包含带有指定类名的所有元素的节点列
表。
（4）getElementsByName() 返回带有指定 name 的所有元素的节点列表
设置元素
setXXXXXX
（1）setAttribute()方法功能：把指定属性设置或修改为指定的值
创建元素
createXXXXXX
（1）createElement() 创建元素节点。
（2）createTextNode() 创建文本节点。
（3）createAttribute() 创建属性节点
3，DOM中的属性使用
获取（没有等号）
eg：1,person.age;–>age是person的属性
2,person.student.age；表示对象底下的对象的属性；
设置有等号赋值
DOM常用属性
（1）innerHTML 属性，功能： 设置或返回表格行的开始和结束标签之间的 HTML
（2）parentNode 属性，功能：以 Node 对象的形式返回指定节点的父节点;如果指定节点没有父节点，则返回 null
（3） childNodes 属性，功能：返回节点的子节点集合，以 NodeList 对象
（4） attributes 属性，功能： 返回指定节点的属性集合，即 NamedNodeMap
（5） nodeName 属性，功能： nodeName 属性指定节点的节点名称。
（6） nodeValue 属性，功能： 设置或返回指定节点的节点值
（7）nodeType 属性，返回节点的类型

Web API======》DOM操作
三，BOM
1，了解BOM的概述
BOM
2，BOM操作
3，BOM（浏览器对象模型）
（1）浏览器模型
window窗口
location地址栏信息
document文档流
history历史记录
属性的使用
（2）脚本模型
Date，Math，String，Array，Object，Number
（3）HTML模型
HTML的基本标签
使用弄好的
JS常用的内置对象有很多种
，所谓的内置对象，和内置函数
类似，说明就是JS内部定义好的
东西，可以让我们直接用
属性：length 获取字符串长度 空格是一个字符串
因为是弱类型所以根据值判断数据类型