Web阶段 - JavaScript学习总结

一、概述

• JavaScript是基于对象与事件驱动的解释性脚本语言,不进行预编译,严格区分大小写,执行顺序从上往下
• 基于对象:JavaScript是一种基于对象的弱类型语言,这意味着它能运用自己已经创建的对象,因此许多功能可以来自脚步环境种对象的方法与脚步的相互作用
• 事件驱动:JavaScript可以直接对用户或者客户输入做出响应,无须经过 web 服务器,它对用户的响应,以事件驱动的方式进行
• 解释性:浏览器可以直接识别和解析js代码
• 组成: ECMAScript基础语法, DOM操作页面元素, BOM操作浏览器

二、ECMAScript

书写位置

• 方式一 : 行内式

<input type="button"  value="点击" onclick="alert(1)" />

• 方式二 : 内嵌式

<script type="text/javascript">
    alert('Hello World!');
</script>

• 方式三 : 外部js文件

<script type="text/javascript" src="路径+文件名"></script>

变量声明

• 格式:var 变量名 = 值; //自动设定类型
• 若没有对变量进行初始化,它的值将是undefined

注释

• 单行注释://
• 多行注释:/…/

输出

• window.alert() 弹出警告框
• document.write() 方法将内容写到HTML文档中
• innerHTML 写入到HTML元素
• 写入到浏览器的控制台(debug < info < warn < error)
  console.log(参数1,参数2,…)
  console.debug(参数1,参数2,…) //调试程序的信息
  console.info(参数1,参数2,…) //普通信息
  console.warn(参数1,参数2,…) //警告消息
  console.error(参数1,参数2,…) //错误消息

数据类型

• 基本类型: Number(数字), String(字符串), Boolean(布尔), Null(对空), Undefined(未定义), Symbol(ES6新类型表独一无二)
• 引用类型：Object(对象)、Array(数组)、Function(函数)
• 类型转换
  • 转为字符串
    类型数据.toString()方法 //不可以转null和underfined
    String(类型数据)
    隐式转换:num + “” //一个操作符是字符串类型’+'拼接
  • 转为数值类型
    Number(类型数据) //任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN
    parseInt(类型数据) //如果第一个字符是数字会解析知道遇到非数字结束
    parseFloat(类型数据) //字符串转换成浮点数
    隐式转换:“” - num
  • 转换为布尔
    Boolean(类型数据) //0 ‘’" null undefined NaN 会转换成false 其它都会转换成true
    隐式转换:!!
• 模板字符串es6
  模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式,变量名和表达式写在${}中,模板字符串中的换行和空格都是会被保留的

  var a = `world`;
  b = ` hello
  ${a} `;
  console.log(b);
  

• typeof(“值”)内置函数,检测变量的数据类型

声明变量关键字

• var
  • 不定义在方法内就是全局变量
  • 若变量未用var修饰且在定义前使用会报错
• let
  • 声明的变量只在let声明所在的代码块内有效,相当于局部变量
• const
  • 声明一个只读的常量,一旦声明,常量的值就不能改变

运算符

• 一元运算符: ++ –
• 算数运算符: + - * / %
• 关系运算符: < <= > >= == != === !==
• 逻辑运算符: & | && || ! //&&(短路与) 左边表达式如果为false,右边不执行,逻辑运算符的优先级:！ > & > |
• 三元运算符: 布尔表达式 ? 值1 : 值2
• 赋值运算符: = += -= *= /= %=
• 优先级: 一元>二元>三元
  • 算术运算符(先乘除后加减)>关系运算符> 逻辑运算符(not and or)>赋值运算符
  • 用( )可以改变优先级

流程控制语句

• 分支结构
  • if(表达式){代码;}
  • if(表达式){代码;} else {代码;}
  • if(表达式){代码;} else if (表达式){代码;} else {代码;}
  • switch(表达式){
    case 条件1: 代码; break;
    case 条件2: 代码; break;
    default : 代码;
    }
• 循环结构
  • while(判定条件) {
    循环体;循环增量;
    }
  • do {
    循环体;循环增量;
    } while(判定条件);
  • for (初始值; 判定条件; 循环增量){
    循环体;
    }
  • for (var 变量 in 循环的对象){ //for循环的增强,变量是下标
    循环体;
    }
  • for (var 变量 of 循环的对象){ //增强for,变量是值
    循环体;
    }
• 结束循环
  • break:结束本层循环
  • continue:结束本次循环

数组

• JavaScript中的数组长度不固定,类型可以不同
• 字面量方式创建(静态)
  • var 数组名 = [长度];
  • var 数组名 = [元素列表];
• 构造函数方式创建(动态)
  • var 数组名 = new Array();
  • var 数组名 = new Array(长度);
  • var 数组名 = new Array(元素列表);
• 添加一个新元素
  • 数组名.unshift(元素); //头部添加
  • 数组名.push(元素); //末尾添加
  • 数组名[下标] = “元素”;
• 删除一个新元素
  • 数组名.shift(); //头部删除
  • 数组名.pop(); //末尾删除
  • 数组名.length=小于数组长度的整数; //末尾删除
  • delete 数组名[下标]; //下标是从0开始的整数
• 获取数组长度:数组名.length
• 对字符数组进行排序:数组名.sort();
• 反转数组:数组名.reverse()
• 向/从数组中添加/删除项目，然后返回被删除的项目:splice(添加/删除项目的位置,要删除的项目数量[,添加项目1,…,添加项目X])
• 判断是否为数组
  • Array.isArray(数组名); //是数组返回true

类

• 静态创建
  • let 类名={属性名:“属性值”,方法名:方法体};
  • es6简写
    let 属性名 = 属性值;
    let 类名={
        变量名:“变量值”, //可简写为:变量名,
        方法名:方法体 //可简写为:方法名(形参列表){ 方法体 }
    };
• 动态创建
  • let 类名=new Object(); 类名.变量名 = “变量值”; //变量名有值则改值,无值则赋值

函数

• 函数由事件驱动的或者当他被调用时可重复使用的代码块,不依赖于任何元素可以单独存在
• 函数声明及调用
  • 普通声明:function 函数名([参数列表]){ 代码块; [return ~] }
    调用:函数名([参数列表]);
  • 表达式声明:var 函数名 = function([参数列表]){ 代码块; [return ~] }
    调用:变量名([参数列表]);
  • 函数的调用和定义没有顺序,可在定义前提前调用,函数的调用只与函数名称和参数列表有关
• 全局变量的作用域是全局性的,即在整个JavaScript程序中,在函数外声明。而在函数内部声明的变量,只在函数内部起作用,这些变量是局部变量,作用域是局部性的,函数的参数也是局部性的,多个函数嵌套时,内层作用域的变量找不到会从外层找
• es6箭头函数
  • 基本语法:参数 => 函数体

语法格式一：无参数，无返回值
	var 函数名 = () => console.log("Hello Lambda!");
语法格式二：有一个参数，并且无返回值
 	var 函数名 = (x) => console.log(x)
语法格式三：若只有一个参数，小括号可以省略不写
	var 函数名 = x => console.log(x)
语法格式四：有两个以上的参数，有返回值，并且 Lambda 体中有多条语句
	var 函数名 = (x, y) => {
 			let result = a+b;
 			return result;
 	}
语法格式五：若 Lambda 体中只有一条语句， return 和 大括号都可以省略不写
	var 函数名 = (x, y) => console.log(x+y);

• 匿名函数

//()() 第一个()里面是方法的定义 第二个()里面是实参
(function (){
		console.log("匿名函数");
})();

• 方法:必须写在类的里面,不能独立存在,方法也是值
• 模拟构造器

function Animal(){ 
	this.name="熊猫"; //this表示当前的对象
}
let a=new Animal(); 
console.log(a.name);

• 模拟静态属性

function Animal(){ 
	this.name="熊猫"; //this表示当前的对象
}
//在类型上定义属性或者方法
Animal.prototype.type="动物";
let a=new Animal();
let b=new Animal();
console.log(a.type); //动物
console.log(b.type); //动物

对象

• JavaScript一切皆为或皆可以被用作对象,拥有属性和方法,可通过new一个对象或者直接以字面量形式创建变量
  • 原生对象: Object , Function , String , Math , Date , Array , Boolean , Number , RegExp , Error
  • 内置对象：Global , Math
  • 宿主对象：DOM BOM
  • 全局对象：Window
• 访问对象属性
  对象名.属性
  对象名[“属性”]
• 访问对象方法
  对象名.方法()

常用方法

• 全局对象
  • encodeURI(URIstring) //字符串作为 URI 进行编码
  • decodeURI(URIstring) //对编码过的 URI 进行解码
  • eval(string) //计算某个字符串，并执行其中的的 JS 代码
  • isNaN(x) //检查其参数是否是非数字值
  • Number(object) //把对象的值转换为数字
  • String(object) //把对象的值转换为字符串
  • parseFloat(string) //解析一个字符串，并返回一个浮点数(首个字母为数字)
  • parseInt(string[, radix]) //解析一个字符串，并返回一个整数
  • 定时器
    定时器分为两类，延迟执行(setTimeout)、间歇执行(setInterval)
    • 延迟执行:setTimeout(函数,毫秒时间)
    • 清除延迟定时器:clearTimeout(定时器名) //执行一次
    • 间歇执行:setInterval(函数,毫秒时间)
    • 清除间歇定时器:clearInterval(定时器名) //执行多次
• String对象
  • concat(str1,str2,…) //字符串连接
  • charAt(index) //获取指定位置的字符
  • indexOf(要检查的字符串,开始检索的位置) //获取某个指定的字符串值在字符串中首次出现的位置
  • lastIndexOf(待检查的字符串,开始检索的位置) //从后向前搜索字符串
  • replace(要替换的字符串或正则表达式,替换字符) //替换
  • search(正则表达式) //检索与正则表达式相匹配的值
  • split(字符串或正则表达式,可指定返回的数组的最大长度) //字符串分割成字符串数组
  • substring(起始下标,结束下标) //提取字符串
  • match(字符串或正则表达式) //获得多个匹配某个模式的字符串
• Math对象
  • ceil(x) //数字向上取整(比参数大的最小整数值)
  • floor(x) //数字向下取整(比参数小的最大整数值)
  • round(x) //数字四舍五入
  • random() //获取0 ~ 1之间的随机数
• Date对象
  • 创建
    • var myDate=new Date()
    • var myDate=new Date(年，月，日)
    • var myDate=new Date(年，月，日，时，分，秒)
  • 方法
    • getFullYear() //获得年份
    • getMonth() //获得月份
    • getDay() //获得日期
    • getHours() //获得小时
    • getMinutes() //获得分钟
    • getSeconds() //获得秒数
• RegExp对象
  • test(string) //检测字符串是否匹配正则表达式
  • exec(string) //检测字符串中的正则表达式的匹配

事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
onclick单击	onkeydown某个键盘的键被按下时触发	onsubmit提交按钮被点击时触发	onready页面解析完成后触发
ondblclick双击	onkeypress某个键盘的键被按下或按住时触发	onchange用户改变域的内容时触发	onload页面所有元素加载完成后触发
onmousedown某个鼠标按键被按下时触发	keyup某个键盘的键被松开时触发	onfocus元素获得焦点时(选中此元素)触发	unload用户退出页面时触发
onmouseup某个鼠标按键被松开时触发		onblur元素失去焦点时(不选中此元素)触发
onmousemove鼠标移动时触发
onmouseleave鼠标指针从元素及其子元素上移开时才触发
onmouseout鼠标指针从元素或者其子元素上移开时都触发
mouseenter鼠标指针移入指定才元素触发
mouseover鼠标指针移入元素或者其子元素上时都触发

异常处理

• try {
  //供测试的代码块
  } catch(err) {
  //处理错误的代码块
  } finally {
  //无论 try / catch 结果如何都执行的代码块
  }
• throw 语句创建自定义异常
  格式:异常语句 throw 执行语句;

二、DOM文档对象模型

• 获取元素节点
  • document.getElementById(“id”) //使用id属性值获取元素
  • document.getElementByName(“name”) //使用name属性值获取元素集合
  • document.getElementByClassName(“class”) //使用class属性值获取元素集合
  • document.getElementByTagName(“标签名”) //使用标签名获取元素集合
• 读写属性节点
  • 使用元素节点.属性名="值"读写属性
  • 使用元素节点.getAttributeNode(“属性名”)获取属性节点(nodeValue来读写属性)
  • 使用元素节点.getAttribute(“属性名”)获取属性值
• 读写文本节点
  • 使用元素节点.childNode获取所有子节点
  • 使用元素节点.firstNode获取第一个子节点(nodeValue来读写文本)
  • 使用元素节点.lastNode获取最后一个子节点
• 节点属性
  • 节点对象.nodeType //元素的节点类型(1代表元素等等)
  • 节点对象.nodeName //节点名称
  • 节点对象.nodeValue //节点值
  • 节点对象.parentNode //获取指定节点父节点
  • 节点对象.childNode //获取指定节点子节点
  • 节点对象.parentElement //获取指定节点父元素
  • 节点对象.innerHTML //获取标签或文本内容
  • 节点对象.innerText|textContent //获取文本内容
• 创建元素节点
  • document.createElement(“新元素节点”)
  • 节点对象.appendChild(创建的节点对象) //将新节点添加到文档的指定节点对象
• 创建文本节点
  • document.createTextNode(“新文本”)
  • 节点对象.appendChild(创建的节点对象) //将新节点添加到文档的指定节点对象
• 替换节点
  • 节点对象.replaceChild(“新元素节点”,“旧元素节点”)
• 复制节点
  • 节点对象.cloneNode(true)
• 删除节点
  • 父节点对象.removeChild(“子元素节点”) //返回被删除的节点
• 插入节点
  • 节点对象.insertBefore(“新元素节点”,“目标节点”) //返回被插入的节点
• 自定义属性
  • 节点对象.setAttribute(“新属性名”,“新属性值”) //设置自定义属性
  • 节点对象.getAttribute(“属性值”) //获取自定义属性
  • 节点对象.removeAttribute(“属性值”) //移除属性

三、BOM浏览器对象模型

• 概述:将浏览器的各个组成部分封装为对象(也就是每个组成部分分别看成是一个对象,然后针对部分进行需求操作),BOM对象不能自己创建,当文档加载进内存,浏览器会自动创建
• 组成
  • Window:窗口对象,Location:地址栏对象,History:历史记录(当前窗口)对象,Navigator:浏览器对象,Screen:显示器屏幕
• Window对象
  • window.opener //当前窗口的父窗口的Window对象
  • window.open(“URL”[,“新窗口名”,“新窗口浏览器特征”,“布尔值规定浏览记录是否新增”]) //打开新窗口
  • window.close() //关闭新窗口
  • window.confirm(“提示信息”) //显示带有一段消息以及确认按钮和取消按钮的对话框
  • window.prompt(“URL”,“默认文字”) //显示可提示用户输入的对话框
  • window.onload = 功能代码 //页面加载完毕后执行
  • window.onunload = 功能代码 //页面关闭后执行
  • window.onbeforeunload = 功能代码 //页面关闭前执行
  • window.setInterval(函数,毫秒时间) //间隔执行定时器
  • window.clearInterval(定时器名) //清除定时器
  • window.setTimeout(函数,毫秒时间) //一次性定时器
    (用于onmousedown,onmouseup,onmousemove事件)
  • window.event.clientX //鼠标点击的x坐标的值
  • window.event.offsetX //鼠标当前的x坐标的值
  • window.event.screenX //鼠标相对于屏幕的x坐标
• Location对象
  • window.location //获取Location对象
  • window.location.hash //获取地址栏#及后面内容
  • window.location.host //获取主机名及端口号
  • window.location.hostname //获取主机名
  • window.location.pathname //获取相对路径
  • window.location.port //获取端口号
  • window.location.portocol //获取协议
  • window.location.search //搜索内容
  • window.location.href=“URL” //页面跳转
  • window.location.assign(“URL”) //页面跳转
  • window.location.reload() //重新加载
  • window.location.replace //没有历史记录的跳转
• History对象
  • window.history //获取History对象
  • window.history.forward() //历史记录前进
  • window.history.back() //历史记录后退
  • window.history.go() //加载历史列表中的某个具体的页面
• Navigator:浏览器对象
  • window.navigator //获取Navigator对象
  • window.navigator.platform //判断浏览器所在的平台类型
  • window.navigator.userAgent //判断用户浏览器类型
• offset系列
  • element.offsetHeight //返回元素的高度
  • element.offsetWidth //返回元素的宽度
  • element.offsetLeft //返回元素的水平偏移位置
  • element.offsetTop //返回元素的垂直偏移位置
  • element.offsetParent //返回元素的偏移容器
• scroll系列
  • element.scrollHeight //返回元素内容的高
  • element.scrollWidth //返回元素内容的宽
  • element.scrollLeft //返回元素内容向左滑出的高
  • element.scrollTOP //返回元素内容向上滑出的高
• client系列
  • element.clientHeight //返回可视区域的高(无边框)
  • element.clientWidth //返回可视区域的宽(无边框)
  • element.clientLeft //返回可视区域的左边框的宽
  • element.clientTop //返回可视区域的上边框的宽