JS（JavaScript）基础【补充】

何为js？

JavaScript是目前非常流行的一种动态开发网页的脚本语言，它可以嵌入到HTML文档中，使网页更加生动活泼，并且具有交互性。最初是由Netscape公司开发的，前身是LiveScript语言，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

在使用JavaScript语言进行网页制作时，不但可以应用于编写客户端的脚本程序，实现在Web浏览器端解释并执行脚本程序；而且还可以编写在服务器端执行的脚本程序，实现服务器端处理用户提交的信息并相应的更新浏览器显示的Web服务器程序。

• 客户端
  客户端的JavaScript脚本程序是被嵌入到HTML文件中链接到HTML页面的，当用户使用浏览器请求HTML文件时，JavaScript脚本程序与HTML一起被下载到客户端，由客户端的浏览器读取HTML文件，并辨别其中是否含有JavaScript脚本，如果有，就解释并执行它，以页面方式显示出来。
  
• 服务器端
  服务器端封装了只与在服务器上运行JavaScript有关的预定义对象和函数。

---

语法规则

• 区分大小写

• 空白符和换行符
  记号：关键字 变量名 数字 函数名 其他实体
  忽略程序记号之间的空格、制表符、换行符，除非他们是字符串常量的一部分。

• 结尾加分号

• 注释
  // /* */

• 数据类型
  数字（number）
  字符串 (string)
  布尔型 (boolean)

  空值 (null):
  表示无值，不是0和空字符串，代表无对象的值。如果一个变量的值为null,那么表示它的值不是有效的对象，数字，字符串，布尔值。null可用于初始化变量，当把null赋值给某个变量后，这个变量中就不再保存任何有效的数据

  对象（odject）

  未定义字符(undefined)：
  1.使用了一个并未声明的变量时
  2.使用了已经声明但还没有赋值的变量时
  3.使用了一个并不存在的变量属性时

• undefined和null的区别
  null的数据类型为关对象（object）
  undefined是JavaScript中的一个预定义全局变量，其类型为(undefined)
  使用 = =判断 两者相等 结果为true
  使用 ===判断结果为false

检验数据类型
typeof();

---

输出

alert();//弹框输出
confirm()；//带确定取消按钮的弹框
document.write();//在文档流中输出
document.getElementByID.innerHTML修改页面中的HTML元素
console,log();//在调试平台中输出

输入
prompt(“提示信息”，“默认值”)；//弹框输入
页面表单元素输入值；innerHTML提取

---

变量
变量提供一个具名的、可供程序操作的存储空间。变量的数据类型决定着变量所占空间的大小和布局方式、该空间能存储的值的范围，以及变量能参与的运算。

采用变量存储数据，对于变量必须要有明确的变量名称、类型和变量的值这三个方面的特性。实际上就是程序中一个已命名的存储单元。

变量声明
在声明变量的同时，可以为变量指定一个值，这个过程称为变量的初始化，若不初始化，该变量的数据类型为undefined

var x=值；//多个变量之间逗号间隔
"+ "相加，连接

变量的数据类型
number string boolean null undefined object
如何检验变量的数据类型？

var a=null;
var b={}
console.log(typeof a);//object
console.log(typeof b);//object

变量提前声明

console.log(a);//undefined 未赋值
var a=10;

变量的作用域

• 局部变量 在函数体内，函数结束，局部变量消失
• 全局变量 在函数体外部，页面关闭，全局变量消失

数组

var douzi=["金豆子","银豆子","铁豆子"];
document.write(douzi[0]);

var douzi={name:"车银优",birthday:"19970330",age:22};
document.write(douzi.name);

---

对象

• 变量为对象命名

• 对象编程概述：
  将一组函数和变量组织成一个对象，从而将数据分装起来，达到模块化编程的目的。在对象编程技术中，对象是构成程序的基本单位，==对象是将数据和对该数据的所有必要操作的代码封装起来的程序模块。==它是有着各种特殊属性（数据）和行为方式（方法）的逻辑实体。对象封装了所需的数据和方法，而且只有通过对象本身的方法才能操纵数据，这就使对象具有模块的独立性，是一个完全封装的实体。
  -对象的基本概念
  本质上是属性和方法的集合。
  属性：指对象内部包含的一些自己的特征
  方法：表示对象可以具有的行为

• 对象获取值方式：
  1.针对HTML元素
  对象.innerHTML;
  2.针对表单元素：
  对象.value;

内置对象

基于对象的javaScript

• 预定义对象
  内置对象
  将一些常用的功能预先定义为对象，用户可以直接使用
  浏览器对象
  浏览器提供的对象

• 用户自定义对象

• 创建对象
  1.new+构造函数【构造函数是一种特殊的函数，它具备了创建对象并初始化对象的功能】
  2.通过对象直接创建
  var object={属性名1:属性值1，属性名2:属性值2}
  3.通过函数创建

• number对象
  toString（进制数）转换为不同进制数。省略参数时，按十进制转换
  toFixed（小数位数）：保留小数位数

• string对象

方法	说明
.length	字符串长度
indexOf()	查找字符串返回字符串位置，如果没有找到返回-1
match()	查找字符串，找到返回该字符串，没有返回null
replace(“被替换内容”，“替换的新内容”)	替换第一个找到的
toUpperCase()	转换成大写
toLowerCase()	转换成小写
split(“间隔符”)	把字符串转换为数组(间隔符为字符串内含有的符号，默认为逗号)
charAt(n)	返回指定位置的字符 n【第一个位置为0】
slice(start,end)	截取指定位置字符串 【包含start不包含end】
substring(起始位置索引值，结束位置索引值)	截取指定位置字符串 【不包含结束位置】
substr(start,length)	截取字符串长度【截取位置，截取长度，省略length时获取从start开始到结尾的字符串】
trim()	去除字符串两端空白

• Date对象
  obj=new Date()//获取当前系统时间

方法	说明
obj.getFullYear()	年
obj.getMonth()	月
obj,getDay()	日
obj.getHours()	小时
obj.getMinutes()	分
obj.getSeconds()	秒

计时器

• 计时器名=setInterval(“函数”，时间)
  在指定时间内多次调用函数，时间单位为毫秒
  清除计时器：clearInterval(计时器名)
  注：一般写在函数外部
• 计时器名=setTimeOut("函数’，时间)
  在指定时间内调用一次函数，时间单位为毫秒
  清除计时器：clearTimeOut(计时器名)
  注：一般写在函数内部
• Math对象

方法	含义
Math.PI	圆周率
Math.floor()	向下舍入
Math.ceil()	向上舍入
Math.random()	随机数0~1
Math.max()	最大值
Math.min()	最小值

• 数组

concat()	合并连接数组
toString()	数组转换成字符串
indexOf()	字符串在数组中出现的位置（索引值）
join()	数组转化成为指定分隔符的字符串
toString()	数组转换成字符串
valueOf()	返回数组的原始值 转化为字符串
pop()	删除数组最后一个元素
shift()	删除数组第一个元素
push()	像数组末尾添加一个元素
unshift()	像数组开头添加一个元素
reverse()	反转数组元素
sort()	数组排序
splice(插入或删除的位置，规定删除的元素如果为0表示插入，【可选，表示要添加的新元素】)	用于插入、删除或替换数组的元素

文档对象模型DOM

利用DOM中的对象，开发人员可以对文档进行读取、搜索、修改、添加和删除等操作。DOM为文档导航及操作HTML和XML文档的内容和结构提供了标准函数。根据树结构以节点形式对文本进行操作就是DOM的工作原理。

DOM树的根节点是Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是html标记）

• 节点类型
  1.元素节点
  2.属性节点
  3.文本节点
• 节点关系
  1.父子节点
  2.兄弟节点
  3.元素的属性不是元素的子节点

节点也是一种对象，称作Node
元素储存在Element节点中
属性储存在Attribute节点中

nodeName:节点的名称
nodeType：节点的属性
属性值：

• 1：元素节点
• 2：属性节点
• 3：文本节点

---

• 获取元素方式

//4种动态获取方式
var a=document.getELEmentByTagName("p");
var b=document.getELEmentByClassName("p");
var c=document.getELEmentByID("p");
var d=document.getELEmentByName("p");
console.log(a);//htmlCollection  集合类型
console.log(b;//htmlCollection  集合类型
console.log(c);//object  单个对象
console.log(d);//NodeList 集合

//固定获取  初始化页面有几个元素就获取几个 后期动态添加的不能直接获取
var querry1=document.querySelector(".class");
var querry2=document.querySelectorAll(".class");
console.log(querry1);//对象 object  获取第一个
console.log(querry2);//集合  NodeList  获取全部

//两个固定元素的获取
//body
console.log(document.body);
//html
console.log(document.documentElement);

---

• 获取子节点方式
  childNodes[索引号] //包含空白节点
  children[索引号] //不包含空白节点
• 获取元素属性
  getAttribute(属性名）//获取元素属性
  setAttribute(属性名，属性值) //设置元素属性
• 父节点：parentNode
• 第一个子元素：firstChild
• 最后一个子元素：lastChild
• 赋值方式
  1.ps.属性名=属性值
  2.ps.setAttribute(属性值，属性名)
• 在节点前插入元素
  父元素.insertBefore(新元素，参考元素)
• 删除元素
  父元素.removeChild(子元素)
• 替换元素
  父元素.replaceChild(替换的新元素，被替换的元素)

---

函数
函数是完成特定任务的一段程序代码，如果一个函数是某个对象的对象的成员，那么习惯上称这个函数为对象的方法。

• 语法
  function 函数名(){
  //函数体
  }
• function是定义函数的保留关键字
• 函数名要与定义函数时使用的名称相同
• 参数
  实际参数：传递给函数的变量或值（实参）
  形式参数：用于接收调用函数时传递的变量和值（形参）

function 函数名(形式参数1，形式参数2，形式参数3.....){
	语句组；
}
函数名（实际参数1，实际参数2，...实际参数n）

函数调用：

• <事件=“javascript:“函数”></>
• 触发事件=函数名（）
• 对象.事件=function(){}

函数的提前声明（常规函数）

js();
function js(){
	console.log("函数的提前声明");
};

不带参传参函数
arguments是一个对应于传递给函数的参数的类数组对象。

java(1,2,3)
function java(){
	console.log(raguments[0]);
	console.log(raguments[1]);
	console.log(raguments[2]);
}

匿名函数
不能提前声明

var book=function (){ }
//自执行函数
（function() {
	console.log(1);
}）();

---

事件：
onclick//点击事件
onmouseover//鼠标悬停事件
onmouseout//鼠标离开事件
onload//页面加载时调用
onfocus//获取焦点时
onblur//失去焦点
onchange//HTML元素发生改变时触发

更改样式：

• 修改属性值
  对象.属性名=属性值
• 修改CSS样式
  对象.style.样式名=样式值 样式名（驼峰式写法 font-size:fontSize）

---

运算符

• 算数运算符
  ”+“ ”-“ ”*“ ”/“
  a++:先赋值 后自加
  ++a：先自加 后赋值
• 赋值运算符（结果都为布尔值）
  = += -= *= /= %=
• 比较运算符
  “= =”相等
  ”= = = “绝对相等
  相等和绝对相等的区别：
  1.在比较两个字符串时，只有他们长度相等，对应的字符位置也一样时，这两个字符串才相等，否则不等。
  2.当字符串与一个数值相比较时，如果数值的字符与字符串的字符完全一致，那么他们两个相等（比较前先会进行类型转换）
  3.正零和负零相等
  4.当两个对象引用同一个对象时，这两个对象相等
  5.当两个布尔值都是true或都是false时这两个布尔值相等
  6.null和undefined数据类型相等
  ！= ！= = > < >= <=
• 逻辑运算符
  &&（与）:当两边都为true时，结果为true
  ||（或）：当有一边为true时，结果为true
  ！（非）：你为true,结果为false
• 条件运算符
  语法：条件？条件成立是输出内容：条件不成立时输出内容；
• 条件判断语句

//if语句
if（条件）{
条件成立时执行语句
}
else{
条件不成立时执行语句
}


//switch语句
switch(判断条件){
	case 值：{
		执行语句；
		break;
	}
	default{
		其他情况下执行语句；
	}
}

//for循环语句
for(初始条件；终止条件；变化量变化的条件){
	执行语句；
}

//while语句
//do while语句
区别：当条件不成立时，do while至少会执行一遍

break:结束整个语句循环
continue:跳出当前语句循环

---

事件冒泡阻止方式

• event.stopPropagation();
  阻止了事件冒泡，但不会阻止默认行为
• return false;
  阻止事件冒泡和默认行为
• event.preventDefault();
  不阻止事件冒泡，但阻止默认行为

捕获和冒泡
监听事件

• addEventListener(”事件‘，方法，true/false)
  为true时表示捕获
• 移除监听事件
  removeEventListener()