###web前端###js

####数据类型

• 在JavaScript中只有对象类型
• 常见的对象类型：

1. 数值对象类型：number
   浮点数和整数都是number ，底层都是浮点数，在运算的过程中会自动转换整数或浮点数
   NaN： Not a Number isNaN(x) 判断x是不是NaN
2. 字符串：string
   var s1 = “abc”; var s2 = ‘abc’;
3. 布尔值：boolean
   var b = true; var b = false;
4. 对象： object
   var p = new Person(); var p = null;
5. 未定义：undefined
   当变量只声明不赋值时 此变量的类型和值都是undefined
   #####变量的声明和赋值

• js属于弱类型语言
  var x = 18;
  var name = ‘张三’ 或 “张三”;
  var b = true 或 false;
  var p = new Person();
  var y;
  x = “abc”;

• typeof x; 获取变量的类型 返回值是一个字符串
  ####各种数据类型之间的隐式转换

1. 数值类型

• 转字符串： 直接转 18->“18” “age”+18 = “age18”
• 转布尔值： 0和NaN转 false 其它转true

2. 字符串

• 转数值： 能转直接转不能转转成NaN 任何数和NaN进行任何运算结果都是NaN “20”-5 = 15
• 转布尔值： 空字符串转false 其它true if(""){alert(‘aaa’)}else{alert(‘bbb’)}

3. 布尔值

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

4. undefined

• 转字符串： 直接转
• 转数值： NaN
• 转布尔值： false

5. null

• 转字符串： 直接转

• 转数值： 0

• 转布尔值： false
  ###运算符 + - * / %

• JS中的运算符和Java中大体一致

• = =和===，==先统一两个变量的类型再比较值 ===先比较类型如果类型相等再比较值

  “666”===666

• typeof 66+6 “number6”

• 除法运算会自动转换整数和浮点数
  ###语句 if else while for do while

• JS中的语句和Java中大体一致

• if和while后面括号里面的内容如果不是布尔值会自动隐式转换成布尔值

• for循环中的 int i改成 var i 不支持增强for循环

###方法声明

• java声明方法：
  public void 方法名(参数列表){方法体}
• js声明方法（一）
  function 方法名(参数列表){方法体}
• 四种常见方法的声明

  1. 无参无返回

  2. 无参有返回

  3. 有参有返回

  4. 有参无返回

     /* 无参无返回 /
     function fn1(){
     alert(“无参无返回”);
     }
     / 调用fn1 /
     //fn1();
     / 无参有返回 */
     function fn2(){
     return “abc”;
     }
     //调用
     var s = fn2();
     alert(s); /
     / 有参无返回 /
     function fn3(name,age){
     alert(“name=”+name+":"+“age=”+age);
     }
     //调用
     //fn3(“刘德华”,18);
     / 有参有返回 /
     function fn4(x,y){
     return xy;
     }
     var result = fn4(3,8);
     alert(result);

• 方法声明（二）
  格式： var 方法名 = function(参数列表){方法体}
• 方法声明（三）
  格式： var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

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

1. 通过id获取页面中的元素
   var d = document.getElementById(“id”);
2. 获取和设置元素的文本内容
   d.innerText=“哈哈”;
3. 获取和设置元素的html内容
   d.innerHTML=“

   abc

   ”;
4. 获取和设置文本框的内容
   i.value=“abc”;
   var s = i.value;
   ###String
5. 创建字符串的两种方式

• var s1 = “abc”/‘abc’;
• var s2 = new String(“abc”);

2. 字符串转数值

• parseFloat() 把字符串转成浮点数
• parseInt() 把字符串转成整数，也可以把浮点数转成整数
• Number() 等效parseFloat()

3. 转换大小写

• toUpperCase()
• toLowerCase()

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

• str.indexOf(‘a’); 获取第一个出现的位置
• str.lastIndexOf(“a”); 获取最后一个出现的位置

5. 截取字符串

• str.substring(start,end?);

6. 替换字符串

• str.replace(old,new); //只能替换出现的第一个

7. 拆分字符串

• str.split("."); 返回值是数组
  ###数组相关

1. 创建数组

• var arr1 = [“张飞”,28,true];
• var arr2 = new Array();

2. 往数组中添加元素

• arr.push(obj);

3. 获取和修改数组长度（Java中数组长度不可修改）

• arr.length=2;

4. 数组遍历 和 Java一样
5. 数组反转

• arr.reverse();

6. 数组排序

• arr.sort(); 默认以字符串的形式，按照Unicode编码进行排序
• 自定义排序
  function mysort(a,b){
  //return a-b;//升序
  return b-a;//降序
  }
• arr.sort(new Function(“a”,“b”,“return a-b;”));
  ###日期相关
• 服务器时间和客户端时间

1. 获取客户端时间
   var d = new Date();
2. 把字符串时间转成时间对象
   2019/3/11 08:00:00
   var d1 = new Date(“2019/3/11 08:00:00”);
3. 获取和设置时间戳(距1970年1月1号 00：00：00 的毫秒数)

• 获取时间对象的时间戳 d.getTime();
• 设置时间戳 d.setTime();

4. 获取时间分量 (年、月、日、时、分、秒、星期几)

• d.getFullYear(); 得到年
• d.getMonth(); 得到月 从0开始
• d.getDate(); 得到日
• d.getHours(); 小时
• d.getMinutes(); 分
• d.getSeconds(); 秒
• d.getDay(); 星期几

5. 获取年月日 和 获取时分秒

• d.toLocaleDateString();
• d.toLocaleTimeString();
  ###正则表达式
• 应用场景：1. 查找内容 2. 校验文本
• .匹配任意字符
• \w匹配任意数字、字母、下划线
• \d匹配任意数字
• \s匹配任意空白
• ^ 开头
• $ 结尾

1. 创建正则表达式对象 两种格式：

• 第一种格式： var reg = /规则/模式; 两种模式：g全局查找 i忽略大小写
  举例：
  以m开头 reg = /^m/;
  以n结尾 reg = /nKaTeX parse error: Expected 'EOF', got '\d' at position 25: …含两位数字 reg = /\̲d̲{2}/; 以3位数字…/;
  包含3-5位数字 reg = /\d{3,5}/;
  6-10位数字、字母下划线 reg = /^\w{6,10}KaTeX parse error: Expected 'EOF', got '\d' at position 33: …-6位数字 reg = /^x\̲d̲{3,6}y/;
• 第二种格式： var reg = new RegExp(“规则”,“模式”?); 此种形式如果有反斜杠需要写成\
  var reg = new RegExp("/^\w{6,10}$/");

2. 正则相关方法

• 查找内容 reg.exec(str);
  var str = “you can you up no can no b b”;
  var reg = /no/g;
  reg.exec(str); //如果不是全局查找每次返回找到的第一个
  ，如果是全局查找,执行一次返回一个，直到找不到时返回null
• 校验方法 reg.test(str)
  var str = “You can you up no can no b b”;
  var reg = /^y/i;
  reg.test(str);
• 字符串和正则相关的方法
  1. 查找内容match() 如果是全局查找则返回所有内容
     var str = “you can you up no can no b b”;
     var reg = /no/g;
     var arr = str.match(reg);
  2. 查找替换 替换所有
     str.replace(reg,“不”);

###修改和获取页面元素的class属性值

• d.className=“abc”;

###文本框失去焦点事件

• 事件名称onblur，当光标从文本框中离开时触发此事件

###元素隐藏的两种方式

1. display:none 元素隐藏并且会脱离文档流
2. visibility:hidden(隐藏)/visible(显示) 元素不脱离文档流
   ###事件取消

• 在任何事件中执行return false；都可以把当前事件取消掉

###自定义对象
//自定义对象声明
function Person(name,age){
//给对象添加属性
this.name=name;
this.age=age;
//添加方法
this.run = function(){
alert(“我是”+this.name+“今年”+this.age);
}
}
//实例化对象
var p = new Person(“貂蝉”,68);
p.run();

	/* 第二种创建对象的方式 */
	 	
	 	var p2 = {
			"name":"刘备",
			"age":30,
			"run":function(){
				alert("我叫"+this.name+"今年"+this.age);
			}
	}
		p2.run();

###DHTML

• 简介： Dynamic（动态）html，把通过html+css+js实现出来的页面称为dhtml
• DHTML包括 BOM 和 DOM 两部分
• BOM： Browser浏览器 Object对象 Model模型，浏览器对象模型，包含和浏览器相关的各种内容
• DOM： Document文档 Object对象 Model模型，文档对象模型，包含和页面相关的所有内容
  ###浏览器对象模型
• window： 窗口对象， window对象中的属性称为全局属性，方法称为全局方法，调用时可以省略window.
• window中常见的全局方法包括：
  alert() 弹出提示框
  comfirm() 弹出确认框
  prompt() 弹出文本框
  parseInt/Float()
  isNaN() 判断变量是否是数
• window中常见的全局属性包括：

1. location：位置
   location.href 可以获取和修改浏览器的访问地址
   location.reload(); 刷新页面
2. history 历史
   history.length 历史页面数量
   history.back() 返回上一页面
   history.forward() 前往下一页面
   history.go(n) n正值前进 负值后退
3. screen 屏幕
   screen.width/height 屏幕宽高
   screen.availWidth/availHeight 屏幕可用宽高
4. navigator 导航/帮助
   navigator.userAgent 获取浏览器的版本信息
5. document 文档 DOM

###window里面常用的事件

1. 点击事件： onclick 当点击窗口页面内部任何区域触发
2. 页面加载完成事件： onload 当页面加载完成时触发
3. 页面获取焦点事件：onfocus 当用户返回页面时触发
4. 页面失去焦点事件：onblur 当用户离开页面时触发

###eval方法

• 此方法可以将字符串以js代码形式执行

###通过js代码给元素添加样式
元素对象.style.样式名称=“值”;
###定时器
setInterval(方法,时间间隔 毫秒);

###通过标签名获取页面中的元素们
var arr = document.getElementsByTagName(“标签名”);

###轮播图相关事件

1. 当鼠标移动到元素上触发的事件 onmouseover
2. 当鼠标移出元素触发的事件 onmouseout

###定时器
开启 var timer = setInterval(方法,时间间隔);
停止 clearInterval(timer);
###只执行一次的定时器
setTimeout(方法,时间间隔)

###DOM 文档对象模型 包含和页面相关的内容

• 学习DOM主要学习如果对页面内容进行修改
  ####如何获取页面中的元素

1. 通过id获取
   var d = document.getElementById(“id”);
2. 通过标签名获取
   var arr = document.getElementsByTagName(“标签名”);
3. 通过name属性获取
   var arr = document.getElementsByName(“name”);
4. 通过class属性获取
   var arr = document.getElementsByClassName(“class”);
5. 获取body
   document.body

####创建元素对象
var d = document.createElement(“div”);
d.innerText=“zzz”; d.innerHTML="";
####把元素添加到某个元素内部
父元素.appendChild(新的子元素);
####插入元素
父元素.insertBefore(新的子元素,弟弟元素);
####删除元素
父元素.removeChild(被删除的子元素);

###事件相关

• 已经接触过的事件： onclick onblur onsubmit onfocus onmouseover onmouseout onchange onload onresize
• 事件：事件就是一些特定的时间点，事件包括鼠标事件、键盘事件、状态改变事件
• 鼠标事件： 鼠标点击事件onclick 鼠标移入事件onmouseover 鼠标移出onmouseout 鼠标按下事件onmousedown 鼠标抬起事件onmouseup 鼠标移动事件onmousemove
• 键盘事件：键盘按下事件onkeydown 键盘抬起事件onkeyup
• 状态改变事件： 页面加载完成onload 值改变事件onchange 获取焦点onfocus 失去焦点onblur 提交事件onsubmit 窗口尺寸改变事件onresize
  ####事件绑定

1. 在元素内部通过事件属性绑定事件
   在事件方法中this代表window
2. 动态绑定，通过js代码给元素对象添加事件
   在事件方法中this代表事件源
   ####event对象

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

1. 鼠标事件中 可以获取鼠标的坐标 event.clientX/Y
2. 键盘事件中 可以获取键盘的字符编码 event.keyCode
3. 在任何事件中可以通过event对象获取事件源
   var obj = event.target||event.srcElement;
   ####获取事件源的三种方式
4. 非动态绑定可以将事件源从事件属性的位置传递过去
   
5. 动态绑定的事件中 this代表的就是事件源
6. 在任何方式绑定的事件中 通过event对象获取都可以
   var obj = event.target||event.srcElement;
   ####取消事件

• 在任何事件中执行return false; 即可取消当前事件
  ####事件传递（事件冒泡）
• 如果在同一个范围有多个事件响应，响应顺序从底层往上层传递，类似气泡从下往上，所以称为事件冒泡
• 如果在某一个范围多个元素需要添加事件，可以把事件添加到这些元素共同的上级元素，只需要添加一次，即可让所有子元素全部具备该事件，好处是可以节省代码。