JS（JavaScript）Web的脚本语言
脚本语言：无法独立执行，必须嵌入到其他语言当中结合使用
作用：控制页面特效展示
注：JavaScript没有访问系统的权限，并且JavaScript和Java没有任何关系！！！！！
JavaScript组成：
ECMAScript(核心):规定了JS的语法和基本对象
DOM文档对象模型（标记型文档）：处理网页内容的方法和接口
BOM浏览器对象模型：与浏览器交互的方法和接口
JavaScript的引入方式：
1. 内部脚本：
<script type="text/javascript">
..........
</script>
2. 外部脚本（常用）：
<script type="text/javascript" src="...">
</script>
<script>开发规定放在body结束标签之前
目的：增强用户体验性
变量声明：
var 变量名; //如果没有赋值则自动赋值为undefined
变量名规则和JAVA一样
JavaScript基本数据类型： string、number、boolean、undefined、null
null: 空，一个占位符
undefined:未定义类型。（从null中派生出来的，所以undefined == null）
我们可以通过typeof运算符来分辨变量值属于哪种基本数据类型
注：typeof(null) -----> obj
引用数据类型的创建方式（例子）：
var str = new String();
var str = new String;
JavaScript运算符和Java基本一致
特殊： ===全等：对比值且对比类型
JavaScript的逻辑运算符没有（位运算符）& 只有标准三个 &&、||、！
正则对象：确定某个字符串是否符合正则
RegExp对象的创建方法：
①var reg =newRegExp("表达式");
②var reg = /^表达式$/; （直接量方式的正则是对象，不是字符串）【^代表开始，$代表结束】
正则对象.text(String); 用来校验字符串是否匹配正则。全部字符匹配返回true。
普通正则表达式：var reg = /表达式/;
普通方式：除非全部字符不符合正则，否则返回true （适用于字符串查找、替换）
直接量方式：适用于表单校验
JS数组对象：可看作Java中的ArrayList集合。
数组中的每一个成员没有类型限制，即可存放任意类型。
数组的长度可以自动修改。
JS数组的四种创建方式：
1. var arr = [1,2,3,"a",true]; // 常用的JS数组
2. var arr = newArray(); // 数组长度默认为0
3. var arr = newArray(4);
4. var arr = newArray(1,2); // 数组元素是1,2 （其他基本数据类型也可以）
具体的方法实现：
arr.length; 设置或返回数组中元素的数目。
arr.join(); 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。
arr.reverse(); 颠倒数组中的元素顺序 （物理反转） 会对当前数组进行操作。
arr.pop() 删除并返回数组最后一个元素。
arr.push() 向数组的末尾添加一个或更多元素，并返回新的长度。
全局函数（global）： eval() 计算js字符串，并把他作为脚本代码执行 （可以扩展程序功能）
但只能传递基本数据类型的字符串，不能传入字符串对象。
encodeURI() 把字符串编码为URI
decodeURI() 解码某个编码的URl
URI是统一资源标识符，标识资源详细名称。 URL是统一资源定位器，定位资源的网络位置。
URI标识资源的详细名称，包含资源名。 URL定位资源的网络位置（包含http:// ）。
资源：可以通过浏览器访问的信息统称为资源
字符串转数字： parseInt() 解析一个字符串并返回一个整数。
parseFloat() 解析一个字符串并返回一个浮点数。
均从第一个字符开始解析，如果第一个字符解析错误则会返回NaN。
NaN(Not A Number, 一个数字类型的标识，表示不是一个正确的数字)。
自定义函数/自定义方法： 如果一段代码需要被重复编写使用，那么我们可以将其进行封装成一个函数（方法）中。
作用：增强代码的复用性。
函数格式：
function 方法名(参数列表){
函数体
}
注意事项：
JavaScript函数定义必须用小写的function。
JavaScript函数无需定义返回值类型，直接在function后面书写方法名即可。
参数的定义无需使用var关键字，否则报错。
JavaScript函数体中，return可以不写，也可以return具体值，或者仅仅写return。
JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，则返回值为undefined
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义。
因为JavaScript不存在函数重载，所有JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用。
如果形参未赋值，就使用默认值undefined。
自定义对象:
function构造函数：
无形参格式：（相当于java中创建某个class类）
形参格式：
function n(a,b){
this.name=a;
this.age=b;
}
// 实现
var p = new n("Charles",20);
p.sex = "man"; //为n对象声明了一个sex并赋值
// 调用只需要 p.name p.age p.sex 即可
应用场景：适用于对象构造及代码复用
对象直接量：开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式成为“对象直接量”。
格式：var 对象名 = {属性名1：“属性值1”，属性名2：“属性值2”......}；
该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可。
应用场景：适用于快速创建实例对象及数据封装。
BOM对象：
BOM(Browser Object Model)浏览器对象模型
作用：用来实行浏览器的相关操作（例如：浏览器的地址、弹出消息等）
一般情况下，window代表了BOM对象
window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写
消息框：
alert()：警告框，用来弹出警告消息。
注：不同浏览器显示的组件样式不同，无需关注。
confirm()：确认框，用于告知用户信息并收集选择 // 可用于电商
返回Boolean类型的返回值
定时器：
启动循环定时器：调用一次就会创建并循环执行一个定时器
格式：setInterval(调用方法，毫秒值）；
毫秒值：循环周期
取消循环定时器： clearInterval(循环定时器的ID); // ID指的是定义的变量名
一次性定时器：只执行一次
格式:setTimeout(调用方法,毫秒值);
Location对象： （href属性：设置或返回完整的URL）
location.href; 获取当前地址
设置： location.href="xxxx"; // 跳转到xxxx地址
DOM对象：
DOM(Document Object Model) 文档对象模型
文档：标记型文档（HTML等）
DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。（通俗点就是搞特效）
HTML文档会被浏览器由上到下依次加载并解析，加载到浏览器的内存，加载后形成DOM树。
DOM树：
每个标签会被加载成DOM树上的一个元素节点对象。
每个标签的属性会被加载成DOM树上的一个属性节点对象。
每个标签的内容体会被加载成DOM树上的一个文本节点对象。
整个DOM树，是一个文档节点对象，即DOM对象。
一个HTML文档加载到内存中就会形成一个DOM对象。
DOM树的特点：
必定会有一个根节点 每个节点都是节点对象
常见的节点关系：父子节点关系
文本节点对象没有子节点---叶子节点
每个节点都有一个父节点，零到多个子节点
只有根节点没有父节点
获取元素节点对象：
4种方式获取对应的元素对象：
document.getElementById(); ---通过元素ID获取对应元素对象
document.getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
document.getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素 //通过标签名
document.getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素
注：通过name属性，获取所有需要的元素，返回是一个元素节点对象数组，如果找不到，就返回空数组 0
元素对象常见属性：
value
元素对象.value // 获取元素对象
元素对象.value=属性值 // 修改value属性值 修改元素属性
className
元素对象.className 获取元素对象
元素对象.className=属性值 修改class属性值 修改元素样式
注：HTML中checked="checked" 在js当中赋值true 就是默认选中
修改单选/复选的选中与否
innerHTML (操作元素的内容体)
元素对象.innerHTML 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体
JS事件
通常鼠标或热键的动作我们称之为事件
通过JS事件，我们可以完成页面的指定特效
JS事件驱动机制：事件源、事件、监听器、注册/绑定监听器
事件源：专门产生事件的组件。
事件：由事件源所产生的动作或者事情
监听器：专门处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。
常见的JS事件：
点击事件(onclick)：由鼠标或热键点击元素组件时触发。
onclick="函数"
焦点事件(onblur、onfoucs):即整个页面的注意力
通常焦点也能反映出用户目前的关注点，或者正在操作的组件
获取焦点事件：当元素组件获取焦点时触发
onfoucs="函数"
失去焦点事件(onblur):
onblur="函数"
域内容改变事件：元素组件的值发生改变时触发
onchange="函数"
加载完毕事件：元素组件加载完毕就触发
onload="函数"
表单提交事件(onsubmit)：表单的提交按钮被点击时触发
主要用于表单的校验 该事件也能控制表单的提交
true 允许表单提交 false 阻止表单提交
键位弹起事件(onkeyup):在组件中输入某些内容时，键盘键位弹起时触发该事件 可以进行输入的实时校验
鼠标移入事件(onmouseover):鼠标移入某个元素组件时触发
鼠标移出事件(onmouseout):鼠标移出某个元素组件时触发
元素事件句柄绑定方式：将事件以元素属性的方式写到标签内部，进而绑定对应函数
事件句柄绑定方式：
优点：①开发快捷 ②传参方便 ③可以绑定多个函数
缺点：JS和HTML代码高度糅合在一起，不利于多个部门的项目开发维护。
DOM绑定方式：对象.事件属性 ①window.onload=run1; ②window.onload=function(){...};
优点：使得HTML代码和JS代码完全分离
缺点：①不能传递参数。 解决方法：匿名函数是可以的 ②一个事件只能绑定一个函数 解决方法：匿名函数内部是可以绑定多个函数。
以上就是JS的简单基本内容了，可供后端人员了解。
加油！
时间：2020-03-20 22:09:18
