JS

###JavaScript

• 作用：给页面添加动态效果和动态数据 ， html负责搭建页面结构和内容，css美化页面
  ###JS历史

1995年由网景（NetScape）公司发布，LiveScript，同年更名为JavaScript，和Java语言没啥关系，为了蹭热度
###JS特点

1. 属于脚本语言，不需要编译，由浏览器解析执行
2. js语言可以嵌入到html页面中
3. js语言基于面向对象
4. js属于弱类型的语言
5. 交互性高
6. 安全性高 js语言只能访问浏览器中的各种数据，不能访问浏览器以外的数据
   ###JS语言的引入方式

• 内联：在元素的事件属性中添加js代码，当事件触发时js代码执行
• 内部：在html页面中添加

1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined
5. 自定义类型 object

####变量的声明和赋值

• js属于弱类型语言
• java： int x = 10;
• js: var x = 10; var s = “abc”; var b = true/false;

####常见类型介绍

1. 数值类型

• js中数值类型的底层都是浮点数，在使用过程中会自动转换整数或小数
  java int x =5 int y= 2 int z = x/y; z=2
  js var x = 5 var y = 2 var z = x/y; z=2.5
• NaN: Not a Number 不是一个数， 用于判断变量是否是数值类型 ， 使用 isNaN(变量) 进行判断 isNaN(x) 返回值是true或false ，true代表不是数，false代表是数

2. 布尔值类型
   var b = true/false;
3. 字符串
   var s = “abc”;
   var s = ‘abc’;
4. 未定义类型undefined

• 当一个变量只声明不赋值的情况下，则此变量为未定义类型
  ###各种类型间的隐式转换

1. 数值类型

• 转字符串： 直接转 24-> “24”
• 转布尔值： 0和NaN转成false 其它转成true

2. 布尔值类型

• 转字符串： 直接转 true->“true” “abc”+true
• 转数值： true->1 false->0 18+true=19

3. 字符串类型

• 转数值： 能转直接转 不能转转成NaN
  加法会把数值转字符串 “20”+5 = “205”
  减乘除会把字符串转成数值 “20”-5 = 15
  任何数值和NaN进行任何运算 结果都是NaN
• 转布尔值： 空字符串转false 其它true

4. 未定义undefined

• 转数值： NaN
• 转字符串： 直接转 “abc”+undefined “abcundefined”
• 转布尔值： false if(undefined){alert(“aaa”)}

5. null

• 转数值： 0
• 转布尔值： false
• 转字符串： 直接转 “abc”+null = “abcnull”
  ####运算符 + - * / % = > < >= <= == !=
• 和Java大体相同
• 和= ： == 先统一类型再比较值 ===先比较类型 如果类型相等再比较值
• 除法运算 会自动转换整数和小数
• typeof x; typeof 66 + 6 = “number6”
  ####语句 if else while do while for switch case
• 和Java大体相同
• 不同点：

1. if 和 while 括号里面的内容 如果不是布尔值会自动隐式转换成布尔值
2. for循环中int i改成var i 不支持增强（新）for循环

####方法声明

• java： public void 方法名(参数列表){方法体}

• js： function 方法名(参数列表){方法体}

• 常见的四种方法：

1. 无参无返回值
2. 无参有返回值
3. 有参无返回值
4. 有参又返回值

• 三种声明方法的格式：

1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体};
3. var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

###和页面元素相关的方法

1. 通过id获取页面元素的方法
   var d = document.getElementById(“d1”);
2. 获取和修改元素的文本内容
   d.innerText
   d.innerText = “abc”;
3. 获取和修改文本框的值
   var i = document.getElementById(“i1”);
   i.value 获取
   i.value=“xxx”;
4. 获取和修改元素的html内容
   d.innerHTML
   d.innerHTML=“

   abc

   ”;
   追加 d.innerHTML+=“

   abc

   ”;

###课程回顾：

1. JavaScript 作用：负责给页面添加动态相关和动态内容
2. 引入方式：

• 内联：在元素的事件属性中添加js代码 当事件触发时代码执行
• 内部：在html页面中添加script标签 在标签体内写js代码 页面加载时执行
• 外部：在单独的js文件中写js代码，在html页面中通过 script标签的src属性引入， 如果引入了文件则不能在标签体内继续写js代码

3. 数据类型

• js中只有对象类型
• 常见对象类型：
  1. 数值number
     底层都是浮点数，使用过程中自动转换整数和小数
  2. 字符串string
     ""和’’
  3. 布尔值boolean
     true和false
  4. 未定义undefined
     当变量只声明不赋值的情况下 变量类型为undefined
  5. 自定义object

4. 数据类型间的隐式转换

• 字符串：
  转数值：能转直接转 不能转转成NaN
  转布尔值： “”->false 其它true
• 数值：
  转字符串：直接转
  转布尔值：0和NaN转false 其它true
• 布尔值
  转字符串：直接转
  转数值： false->0 true->1
• undefined
  转字符串：直接转
  转数值： NaN
  转布尔值： false
• null
  转字符串：直接转
  转数值： 0
  转布尔值： false

5. 运算符： 和Java大体相同

• 和=，==先统一类型 再比较值 ===先比较类型再比较值
• typeof 获取变量的类型 以字符串形式返回 typeof 66+6 “number6”
• 除法会自动转换整数和小数

6. 语句： 和Java大体相同

• 不支持增强for循环 ，for的int i改成var i
• if和while括号内的内容 如果不是布尔值 会自动隐式转换成布尔值

7. 三种方法声明：

• function 方法名（参数列表）{方法体}
• var 方法名 = function（参数列表）{方法体}
• var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

8. 和页面元素相关的方法

• 通过id获取页面元素
  var d = document.getElementById(“d1”);
• 获取和修改元素的文本内容
  d.innerText
  d.innerText += “xxx”;
• 获取和修改元素的HTML内容
  d.innerHTML
  d.innerHTML += “

  xxx

  ”;
• 获取和修改文本框的值
  input.value
  input.value=“xxx”;
• 随机数 0-1 Math.random()
• 获取body
  document.body

###代码介绍

1. js三种引入方式
2. 方法声明
3. 通过id获取元素 修改文本内容练习
4. 获取和修改文本框的值
5. 平方和求和练习
6. 超级low的计算器
7. 添加li的练习
8. 猜数字练习
9. 添加div 并且带样式的练习
10. 红蓝框练习

###String相关

1. 创建字符串

• var s1 = “abc”; //单引号和双引号都可以
• var s2 = new String(“abc”);

2. 把字符串转成数值

• parseFloat(“8”) 8
• parseInt(8.5) 8
• Number(“8.5”) 8.5 作用和parseFloat类似

3. 字符串转大小写

• 转大写 str.toUpperCase();
• 转小写 str.toLowerCase();

4. 获取字符串出现的位置

• str.indexOf(‘b’) 第一个出现的位置 从0开始
• str.lastIndexOf(‘b’) 最后一个出现的位置

5. 截取字符串

• str.substring(start,?end);

6. 替换字符串

• str.replace(old,new); 只替换第一个

7. 拆分字符串

• var arr = str.split(".");
  ###数学相关

1. 随机数 Math.random() 0-1 *3
   3-5 0-2 + 3
   25-36 0-11 +25
   100-200 0-100 + 100
   parseInt(Math.random()*101)+100
   6-9
   parsetInt(Math.random()*4)+6;
2. 四舍五入
   num.toFixed(m); m代表保留几位小数
   18.23456.toFixed(4); 18.2346
   ####数组相关
3. 创建数组

• var arr1 = [“小明”,18,true];
• var arr2 = new Array();

2. 往数组中添加内容

• arr.push(“刘德华”);
• arr.push(18);

3. 数组遍历 和Java一样
   var arr = [“小明”,18,true];
   for(var i=0;i<arr.length;i++){
   alert(arr[i]);
   }
4. 获取和修改数组长度

• java数组的长度不可变
  arr.length//获取
  arr.lenght=3;

5. 数组反转 arr.reverse();
6. 数组排序 arr.sort(); 默认排序规则是 以Unicode编码进行排序，比完第一个再比第二个

• 自定义排序：
  var arr = [18,11,26,22,2,7,3];
  //自定义排序方法
  function mysort(a,b){
  return b-a;//代表升序 b-a代表降序
  }
  alert(arr.sort(mysort));

• arr.sort(new Function(“a”,“b”,“return a-b;”));
  ###日期相关

• 服务器时间和客户端时间

1. 获取客户端时间
   var d = new Date();
2. 把字符串时间转成时间对象 2019/5/8 14:37:30
   var d = new Date(“2019/5/8 14:37:30”);
3. 获取和设置时间戳(距1970年1月1日 08:00:00)
   d.getTime();
   d.setTime();
4. 获取时间分量
   d.getFullYear();// 年
   d.getMonth(); 月 从0开始 +1
   d.getDate(); 日
   d.getDay(); 星期几
   d.getHours(); //小时
   d.getMinutes(); 分钟
   d.getSeconds(); 秒
5. 获取年月日 和 获取时分秒
   d.toLocaleDateString();
   d.toLocaleTimeString();
   ###正则表达式

• 应用场景：
  1. 查找内容
  2. 校验文本
• . ：匹配任意字符 除了换行
• \w : 匹配任意数字、字母、下划线
• \d : 匹配任意数字
• \s : 匹配任意空白
• ^ : 开头
• $ : 结尾
• 举例：
  1. 以m开头 ^m
  2. 以n结尾 n$
  3. 包含两位数字 \d{2}
  4. 只有两位数字 ^\d{2}$
  5. 以3个数字开头 ^\d{3}
  6. 以x开头以y结尾中间有5个数字 ^x\d{5}y$
  7. 以m开头中间有3-5个数字n结尾 ^m\d{3,5}n$
  8. 6-10位数字字母下划线组成 ^\w{6,10}$
• 创建正则对象的两种方式

1. var reg = /规则/模式; （两种模式：i忽略大小写，g全局查找）
   reg = /^\w{6,10}$/;
2. var reg = new RegExp(“规则”,？“模式”);
   reg = new RegExp("^\w{6,10}$");

• 正则对象相关的方法

1. 查找内容的方法 reg.exec(str)
   var str = “you can you up no can no b b”;
   var reg = /no/;
   • 如果没有g则每次找到的都是第一个
     reg.exec(str);
   • 如果添加了g则从全文中查找 每次查找下一个,直到找不到的时候返回null
     var reg = /no/g;
     reg.exec(str);
2. 校验方法 reg.test(str);
   var reg = /^you/;
   reg.test(str);

• 字符串中和正则相关的方法

1. 查找内容 str.match(reg)
   • 此查找方法如果是全局查找会一次性把查找到的所有返回到一个数组中
2. 替换方法 str.replace(reg,new);
   reg = /no/g;
   str.replace(reg,“不”);

####修改元素的class属性值

• div.className=“xxx”;

###课程回顾：

1. 字符串相关

• 创建字符串
  1. var s1 = “xx”;
  2. var s2 = new String();
• 把字符串转数值
  parseInt()
  parseFloat()
  Number()
• 转大小写 str.toUpperCase() str.toLowerCase()
• 获取字符串出现的位置 str.indexOf() str.lastIndexOf()
• 截取字符串 str.substring(start,?end);
• 替换 str.replace(old,new)
• 拆分 var arr = str.split(".")

2. 数学

• 随机数 Math.random()
• 四舍五入 num.toFixed(m) m代表保留小数位数

3. 日期

• 创建日期对象 var d = new Date();
• 把字符串日期转成日期对象 var d = new Date(“2019/5/8 17:25:00”);
• 获取和设置时间戳 d.setTime(1000) d.getTime();
• 获取时间分量
  d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
• 获取年月日 获取时分秒
  d.toLocaleDateString() d.toLocalTimeString();

4. 正则

• 应用场景： 1. 查找内容 2.校验文本
• . \w \d \s ^ $
• 创建正则对象
  1. var reg = /规则/模式(i/g);
  2. var reg = new RegExp(“规则”,“模式”？);
• 正则相关方法：
  1. 查找 reg.exec(str)
  2. 校验 reg.test(str)
  3. 查找 var arr = str.match(reg)
  4. 替换 str.replace(reg,new);

5. 修改元素的class属性 d.className=“xxx”;
6. 失去焦点事件 onblur

###如何让页面中元素隐藏

1. display：none 元素隐藏并且脱离文档流，如果再显示回来的话需要改回元素的默认值
2. visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流

###自定义对象

	/* function Person(name,age){
	//添加属性
	this.name=name;
	this.age=age;
	//添加方法
	this.run = function(){
		alert("我叫："+this.name+
				"今年"+this.age);
	}
}
//实例化对象
var p = new Person("张三",5);
p.run(); */

function Person(){}
var p = new Person();
//动态添加属性和方法
p.name = "张三";
p.age = 18;
p.run = function(){
	alert("我叫："+this.name+
			"今年"+this.age);
}
//调用 
//p.run();
//第二种实例化对象的方式 
var p2 = {
		"name":"李四",
		"age":18,
		"run":function(){
			alert("我叫："+this.name+
					"今年"+this.age);
		}
}
p2.run();

###DHTML

• 简介： Dynamic（动态） HTML，并不是新的技术，是把通过html、CSS、JavaScript结合到一起开发的页面称为动态的html
• DHTML包括：BOM、DOM
• BOM： Browser 浏览器 Object对象 Model模型，包含和浏览器相关的内容
• DOM：Document 文档 Object对象 Model模型，包含和页面相关的内容
  ###BOM浏览器对象模型
  ####window对象
  window对象里面的属性称为全局属性，方法称为全局方法，调用时可以省略
  #####window里面常见的方法
  1. parseInt() 和 parseFloat()
  2. alert() 提示框
  3. confirm() 确认框
  4. prompt() 弹出文本框
  5. isNaN()
     #####window中常用的属性

1. location 位置

• location.href 获取和修改浏览器的访问地址
  获取 location.href
  修改 location.href=“http://www.tmooc.cn”;
• location.reload(); 刷新

2. history 历史 当前窗口历史

• history.length 页面数量
• history.back() 返回上一页面
• history.forward() 前往下一页面
• history.go(n) n正值前进 负值后退 0刷新

3. screen 屏幕

• screen.width/height 得到屏幕的分辨率
• screen.availWidth/Height 得到屏幕可用分辨率

4. navigator 导航、帮助

• navigator.userAgent; 浏览器版本信息
  ####window相关的事件
• 窗口点击事件 onclick
• 页面加载完成事件 onload
• 页面获取焦点事件 onfocus
• 页面失去焦点事件 onblur
  ####eval()
• 可以将字符串以js代码的形式执行

####通过js代码给元素添加样式

• 元素对象.style.样式名 = “值”;
  ####定时器
• 每隔一段事件执行某段代码
• 格式： setInterval(方法,时间间隔);
  setInterval(function(){
  alert(“哈哈”);
  },1000);

####第一版轮播图步骤

1. 通过css样式让图片全部隐藏
2. 页面加载完成时取出第一张图片让其显示
   • 添加onload事件 在事件里面获取所有的图片数组，从数组中取出下标为0的图片，设置display属性为inline-block让其显示
3. 开启定时器 每隔1秒 换下一张显示
   • 创建每隔一秒执行的定时器，声明一个全局的变量x用于自增，在定时器里面让x自增并且对其取3的余数 得到的值为图片显示的下标，
   • 得到所有图片的数组，遍历数组，如果数组下标为上一步得到的值则设置图片的display样式为inline-block 反之则设置为none

###停止定时器
var timer = setInterval(function(){},1000);
clearInterval(timer);

###第二版轮播图步骤：

1. 搭建页面，通过css给图片和div设置相同的宽高
2. 修改图片的定位为绝对定位，并且在上级div里添加相对定位
3. 在页面加载完成的时候得到所有的图片数组，遍历数组，让数组里面图片的left值为i*200
4. 创建1秒执行100次的定时器 在定时器里面获取所有图片数组，遍历数组，得到当前遍历图片的left值 让其-=2 把新的值再次给到图片
5. 在移动图片时 如果left值<=-200时 让left值=400
6. 让上级div超出范围不显示
7. 让定时器通过一个moveTimer记录 ，在判断left值<=-200时让定时器停止
8. 把移动一张 图片定时器的所有代码封装到一个方法中，再开启另外一个定时器，每隔2秒调用次方法
9. 给div添加鼠标悬停事件 悬停时调用stop方法 在此方法中停止2秒执行的定时器
10. 给div添加鼠标移出事件 调用start方法 在方法中再次开启2秒执行的定时器。
11. 当页面失去焦点时调用 stop方法
12. 当页面获取焦点时调用 start方法
13. 在start方法中调用stop方法 为了避免重复开启定时器

####倒计时练习步骤：

1. 给按钮添加点击事件
2. 在事件方法中获取时分秒 然后声明一个全局变量total 值为小时3600+分钟60+秒
3. 开启定时器每隔一秒执行
4. 定时器里面让total–
5. 减完之后 通过total除3600 取整得到小时
6. 通过total%3600再除60取整得到分钟
7. 通过total%60 得到秒
8. 最后把得到的时分秒拼接到一起显示到h2里面

###只执行一次的定时器

• setTimeout(function(){},时间);

###DOM 文档对象模型
####查找元素

1. 通过id获取页面元素
   var d = document.getElementById(“d1”);
2. 通过标签名获取元素
   var arr = document.getElementsByTagName(“div”);
3. 通过class属性值查找元素
   var arr = document.getElementsByClassName(“class”);
4. 通过name属性值查找元素
   var arr = document.getElementsByName(“name”);
5. 获取body
   document.body
   ####创建元素对象

• var d = document.createElement(“div”);
  ####添加元素
  父元素.appendChild(元素对象);
  ####插入元素
  父元素.insertBefore(新元素,弟弟元素);

####删除元素
父元素.removeChild(被删除的元素);

###事件相关内容

• 事件：事件就是一些特定的时间点，事件包括：鼠标事件、键盘事件、状态改变事件
  ####事件分类

1. 鼠标事件：点击事件onclick，鼠标移入事件onmouseover，鼠标移出事件onmouseout, 鼠标按下事件onmousedown，鼠标抬起事件onmouseup,鼠标移动事件onmousemove

2. 键盘事件： 键盘按下事件 onkeydown 键盘抬起事件onkeyup

3. 状态改变事件： 获取焦点onfocus 失去焦点onblur 窗口尺寸改变onresize
   值改变事件onchange 表单提交事件onsubmit 页面加载完成事件onload

####事件对象event

• 事件对象中保存着事件相关的信息

1. 鼠标事件中保存鼠标的坐标信息 event.clientX/Y
2. 键盘事件中保存按键信息 event.keyCode String.fromCharCode(65);
3. 任何事件中都可以得到事件源对象
   事件源就是添加事件的标签
   var obj = event.target||event.srcElement; (解决兼容性写法)
   ###事件的绑定

• 事件有两种绑定方式
  1. 通过标签内部的事件属性 添加事件 方法中的this代表window对象
  2. 动态绑定：通过js代码给元素添加事件 执行的方法中this代表事件源
     ###事件的传递(事件冒泡)
• 如果一个范围内有多个元素响应事件，则事件的传递顺序是从最底层往上层传递（类似于气泡所以称为事件冒泡）