简单认识并使用JavaScript【供后端人员作为了解】

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 对象名(){
    函数体
}

形参格式：

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