js

【1.js简史】
（1）js出生于1995年，它一开始出生的目的是为了数据的验证
（2）js的组成部分--这个有可能是面试时候的考题
核心：（ECMAscript）:描述了该语言的语法和基本对象
文档对象模型（DOM--document object model）描述了与网页内容进行交互的对象和接口
浏览器对象模型（BOM--borwser object model）描述了与浏览器进行交互的对象和接口

【2.js的作用】
1.可以控制html和css
2.可以为网页添加动画、添加交互效果
3.可以做数据的验证

【3.函数（方法）】
函数就是方法，他们两个是对同一事物的不同叫法，大家可以把他们理解为“命令”或者“功能”
书写方法：函数名+小括号
例：alert()

【4.函数的参数】
写在小括号里面的内容就是参数，如果有多个参数，他们之间用逗号来分割的，我们初学阶段，参数要用单引号括起来（注意：双引号也可以，但是强烈推荐大家使用单引号）

【5.初学者代码书写规范-版本1】
script标签是js的家，放在了body标签结束的后面，每写完一行代码要用英文状态下的分号结束

【6.文档对象】
document在js当中代表着文档对象，我们只要一提到对象就要想到它是一堆的方法（函数）的集合体
【7.搜索功能】
document.getElementById

【8.变量】
变量就是一个容器，它可以存储任何的数据，变量的目的就是为了简化代码存在（可以理解为给等号后面的数据，起了一个昵称）。
变量的书写：
var 名字 = 数据
例：var ctob = document.getElementById('box01');
命名规矩：不能用数字开头、不用使用js已经有的命名（只要颜色变成洋红色就代表命名冲突了）

【9.控制html】
1.控制html标签属性
通过点语法去控制便签属性  例：box01.title = '我是js控制的';
注意：唯一有一点不同的是控制class的时候，一定要使用className去控制
2.控制html标签内容
通过innerHTML 来控制 例：box01.innerHTML = '我是用js添加进来的';

【10.事件】
事件三要素
1.事件源：（这个事件是加给谁的）
2.事件的类型：（这个事件是在什么外力的驱动下发生的，例：推、按、声控）
3.执行的命令：执行的操作或者命令。
事件的基本结构：
事件源.事件类型 = 匿名函数

生活中的例子：
我按动开关灯变亮
空调按钮被我按动空调开启
我推门门开启
注意：我们在写代码的时候 要记住一点 如果一个效果可以用css去做 就一定不要用js（因为css的运行速度永远要比js要快）

【11.匿名函数】
function(){ 执行命令 }

【12初学者书写格式版本2】
script来放置js代码，并且把script标签放在body标签的最后，用变量把需要操作的元素保存起来，下一步按照事件的基本步骤来写js代码

【13事件类型】
1.onclick      鼠标单击事件
2.ondblclick   鼠标双击事件
3.onmouseover  鼠标移上事件
4.onmouseout   鼠标移出事件

【14js的书写位置】
1.内嵌js 
例：
<script type="text/javascript">
    alert('哈哈哈');
</script>

2.外链js
例：
<script type="text/javascript" src="js.js">外链js的这个位置不能写东西！</script>

3.行内js
例：
<div onclick="alert('我是行内的');">我是行内的js</div>   

注意：执行顺序是由上至下的，但是事件例外；

 

 

 

【1.数据】
html .avi psd jpg js png

1.数值型
number 例： 1 2 123 456.771

2.字符串型
string 例：'呵呵' '哈哈' ‘123’
注意：字符串类型的相加操作 相当于做了一件连接起来的操作
例： '呵呵' + '123'  ‘呵呵123’

3.布尔型
boolean  只有两个值 true、false

4.对象型
object 它是一种复杂数据类型 默认值是null 表示空

5.未定义
undefined 代表是的未定义 只有一个值 就是它自己

【2.数据类型检测】
typeof() 来检测数据类型

用法：
var num1 = '123';
typeof(num1)
只有这样写才会给我们返回5大数据类型中的一个
【3.数据类型转换】
字符串转数字类型 parseInt
使用方法：
var num1 = '123';   
num1 = parseInt(num1);//我们写parseInt(num1)相当于在草稿纸上进行了计算，我们的计算结果必须要放回到试卷上，所以必须把parseInt(num1)再等于回num1

【4.用js在页面中写代码】
使用方法：
document.write('<h1>写想要让浏览器看的代码</h1>');
书写规范：只要遇到了符号 我们最好给他们前后都加上空格，方便看代码，使得代码看起更加的整洁

【5.关于什么是程序】
一堆数据和处理数据的指令
数据+指令=程序
注意：只要是执行的命令都是object对象类型；

【6.自定义函数】
到目前为止我们学习了两个js的关键字 var function

自定义函数的结构：
function fn(){}

function 叫做定义自定义函数的关键字
fn       自定义函数的名字
()       参数集
{}       函数体

如何调用：函数名+小括号 以后大家只要见到类似 alert() 这样的结构 就要想到 它是在调用这个方法（函数）

注意：js语法规定 在自定义方法中 不用var就可以声明变量 一般来说这个名字用param来命名 简写是par。我们调用自定义方法的时候有几参数，在自定义方法的小括号中就要有几个参数，他们是11对应的关系。

 

 

 

【1.条件判断语句】
单项判断：
结构 if(){}
if表示如果 小括号表示判断的条件 大括号里面写要执行的命令

双向判断：
结构：if(){代码段1}else{代码段2}
如果条件成立那么执行代码段1，否则执行代码段2

多项判断：
if(判断条件1){代码段1}else if(判断条件2){代码段2}else if(判断条件3){代码段3}.....else{前面的条件都不成立的情况下，才执行else的代码，可以理解为默认状态}

【2.比较运算符】
大于   >
小于   <
等于   ==
不等于 !=
注意：所有的比较运算符都会返回一个值，要么是true，要么是false
【3.逻辑运算符】
或     ||    两个条件只要满足其中一个是true，那么判断结果就是真，两个条件都是true，结果也是true

且     &&    两个条件必须都是true，结果才是true，只要有一个是false，那么结果就是false

非     !     在js中感叹号代表取反，也就是说 之前是true，加上叹号之后就是false

isNaN() 判断是不是一个非数字的值  如果返回值是true 代表输入是一个非数字的值 如果返回的是false 代表输入的是一个数字

【4.失去焦点获取焦点】
onfocus    获取焦点
onblur     失去焦点 

【5.循环语句】

生活中：循环都有那些？
一天： 早中晚
手表：转一圈
太阳：每天都东升西落

人的一生也是一个循环，由此引申出js的三个必要的量
人出生      0岁                循环的初始值
人的寿命    100岁              循环的次数
人要成长    每过一年长一岁     循环的增量   

循环的作用：
利用循环的三个条件来设置代码运行多少遍；
注意：在程序当中，只要涉及到群体控制，就要用到for循环

结构：for(var i = 0; i < x.length; i++){
    要循环的代码
    }
为什么要使用for循环：为了简化代码量
使用for循环的初衷：给计算机一个样例，让它帮我们去做重复性的操作，这才是我们编程的初衷

【6.通过标签名字去获取页面元素】

书写格式：document.getElementsByTagName('div')
命名行规：如果获取的元素的是多个  那么保存变量的时候名字要加一个a
例：var aDiv = document.getElementsByTagName('div');

如何获取集合当中元素的个数？
aDiv.length

 

 

 

【1.数组】
定义：数组就是容器，里面的元素师按照编号来排列的
[]  这个符号是数组的符号 代表着编号集
注意：数组是对象类型的(object)

基本结构：
var a数组名字 = [];
例： var aName = ['张三','李四','王五'。。。。。];
注意：数组中的每一个值之间用逗号分隔

push()
用法： aName.push('张飞')   在数组的最后部分添加数据

【2.数学对象】
数学对象：Math 这里面包含了所有关于数学的方法和属性
生成0到1之间随机数字：Math.random()
如果想生成0到4之间的随机数字（有小数）: Math.random() * 4
如果想生成0到4之间的随机整数:parseInt(Math.random() * 4)
注意：parseInt() 向下取整  所以上面那个例子生成的数字可能是 0 1 2 3

【3.定时器】
定时器有两种：
1.单次定时器 ： setTimeout(function(){执行的代码},时间)
例：setTimeout(function(){},3000);    这个3000代表的是3000毫秒，他和秒之间的换算是1:1000

2.循环多次定时器：setInterval(function(){执行的代码},时间)
例： setInterval(function(){},3000);   3000代表3秒

循环定时器的书写步骤：
var timer = null;//先定义一个变量 来存储定时器 （因为我们一会需要 清除定时器）
按照多次定时器的书写格式去写代码
点击停止定时器的时候 要执行一句  clearInterval(写我们之前定义定时器的变量)
注意：在最后停止定时器的地方 可以加一句代码 ： timer = null;
这件话的意思是调用js的垃圾回收机制，也就是说告诉我们的浏览器，这个定时器变量肯定是不使用了，请帮我彻底的删除掉；

【4.动画定时器的开启步骤】
1.定义两个变量 timer用来存储定时器 num 用来存储初始值
var timer = null; var num = 0;

2.用事件去开启多次循环定时器：
在开启定时器之前要清除掉之前的定时器
clearInterval(timer);
timer = setInterval(function(){
num += 3;
控制代码
},30);
说明：
1.30是最小的时间间隔 
2.num+=3 就等于 num = num +3
3.如果想让一个元素left值变化，那么必须这个元素是定位元素才可以

【5.window.onload】
我们的js代码理论上可以写在任意的位置，但是在工作当中一般是写在head里面的，这时候我们就务必要给代码加上一个事件，window.onload 才能执行里面的代码

书写规范(版本3)：
先在head里面写script标签，然后写window.onload = function(){ 这里再写代码  } 后面步骤一样

【6.关于this】
在我们当前阶段，可以理解为事件源就是this，在循环事件当中this代表着用户要操作的那个标签；

【7.index】
这个index是我们人为加上去的 相当于给每一个元素都加上了一个自定义的标签属性

【8.排他性思想】
在程序当中一但遇到了只允许自己怎么样，不允许其他人怎么样的操作，就要想到排他性思想；
注意：排他性思想有一个关键的书写步骤 一定要先排他人，再控制自己，排他性思想往往会用到for循环

【9.缩小搜索范围】
一般来说我们不会在页面上通过标签名称去搜索，因为范围太大了，我们可以利用给想要找寻的元素找个“父亲”，也就是说找到了这个父亲之后，再通过标签名字去找寻元素，就可以缩小搜索的范围。
var myDiv = document.getElementById('myDiv');
var aLi = myDiv.getElementsByTagName('li');