JavaScript

Posted 2020-09-21 功不唐捐 玉汝于成

JS是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上

1、JS的特点

交互性
安全性：（不可以访问本地的硬盘）
跨平台性：浏览器就可以解析js的文件

2、JS组成

（1）ECMAScript 标准（js的语法，变量，函数）

（2）BOM （Browser Object Model） 浏览器对象模型

（3）DOM （Document Object Model） 文档对象模型

3、语法

把JS和html的结合一起

方式一：

HTML的文件提供了一个标签 <script type="text/javascript">js的代码</script>，标签可以放在HTML文件的任意位置上。

方式二：引入外部的文件，有一个外部的文件。编写js文件

 <script src="引入js文件（相对路径）" >

如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了

 

var 声明变量

基本数据类型

Undefined、Null、Boolean、Number 和 String 

String 字符串类型
双引号和单引号都代表的是字符串

Number 数字类型
不区分整数和小数

Null 空，给引用赋值的

Undefined 未定义（声明变量，没有赋值）

typeof() 判断当前变量是什么类型的数据

 

运算符

算术运算符

0或者null是false，非0或者非null是true，默认用1表示

比较运算符

== 比较值是否相同

 === 比较值和类型是否相同

数组

声明数组

1  var arr = [12,34,55];
2 var arr = new Array(5);
3 var arr = new Array(2,3,4)

数组的属性

长度：length

数组的长度是可变的

方法

function 方法名称(参数列表 (num,str)){
    return;
}

参数列表：不能使用var关键字

返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写

 

动态函数

1 function getSum(){
2     return 50;
3 }

js提供了内置对象 Function

匿名函数

没有名称的函数

1 function(){
2     return 50;
3 }

 

全局变量：在<script>标签内部定义的变量，全局变量

局部变量：在函数的内部定义的变量，局部变量

 

对象和API

String 对象

声明

1 var str = "abc";
2 var str = new String("abc");

属性：

length：字符串的长度

方法:

和HTML相关的方法

1 bold()  // 使用粗体显示显示字符串
2 fontcolor(color)  // 参数是必须的，设置字体的颜色
3 fontsize(size)  //设置字体的大小（1-7）
4 italics()  // 斜体
5 link(url) // 设置链接
6 sub()  //下标
7 sup()  // 上标

和java中String对象类似的

1 charAt(index)  // 返回指定位置的字符
2 indexOf(str,fromIndex)  // 检索字符串，没有返回-1
3 lastIndexOf(str,fromIndex)  // 从后向前检索字符串
4 replace(要替换的字符串,替换成啥)
5 substring(start,stop)    // 截取字符串
6 substr(start,length)    // 截取字符串，从哪开始，截取多长

 

Array对象

声明数组

1 var arr = [12,33];
2 var arr = new Array(4,4);

属性：

length：长度

方法：

1 concat(元素，数组);   // 返回新的数组
2 join(s)  // 通过s标识（-），进行分隔，返回字符串
3 pop()  // 删除末尾的元素，返回最后一个元素
4 push()  // 向末尾添加元素，返回新数组的长度
5 sort()  // 排序的方法    

 

Date日期对象

var date = new Date();    // 当前的日期

方法：

 1 toLocaleString() // 转换本地的日期格式
 2 toLocaleDateString()    // 只包含日期
 3 toLocaleTimeString()     // 只包含时间
 4 
 5 getDate()     // 返回一个月中的某一天（1-31）
 6 getDay()    // 返回一周中的某一天(0-6)
 7 getMonth()  // 返回月份（0-11）
 8 getFullYear()  // 返回年份
 9 
10 getTime()    // 返回毫秒数
11 setTime()    // 通过毫秒数获取日期
12 
13 parse(str)    // 解析字符串，返回毫秒数

Math对象

1 ceil(x)  // 上舍入
2 floor(x)  // 下舍入
3 round(x)  // 四舍五入
4 random()  // 0-1的随机数

RegExp对象

正则表达式对象

应用：编写注册的表单，对表单输入的内容进行校验

1 var reg = new RegExp("表达式");  // （开发中不经常使用）
2 var reg = /表达式/    // 开发中经常使用
3 var reg = /^表达式$/   // 开发中经常使用
4 
5 exec(string)  // 不经常使用，如果匹配，返回匹配的结果
6 test(string)   // 如果匹配，返回是true，如果不匹配，返回是false
7 if(reg.test("abc"))

 

全局函数

使用全局函数，不需要任何的对象

全局函数可以拿过来使用

global帮着管理全局函数

 1 eval()  // 可以解析字符串，执行字符串中间的js代码
 2 isNaN()  // 判断是否是非数字值
 3 parseInt()      // 解析字符串，返回整数
 4 
 5 encodeURI()    // 进行编码
 6 decodeURI()    // 解析解码
 7 
 8 encodeURIComponent()
 9 decodeURIComponent()
10 
11 escape()
12 unescape()

 

BOM 浏览器对象模型（Brower Object Model）

Window   窗口对象

Navigator 和浏览器版本相关的对象

userAgent      // 获取浏览器的相关的信息
window.navigator.userAgent    // window可以省略不写

Screen 和屏幕相关的对象

History 和浏览器历史相关

1 back()  // 返回上一个页面
2 forward()  // 去下一个页面
3 go()  // 传1等于forward,传-1等于back

Location 和浏览器地址相关的对象

 href      // 获取和设置浏览器的路径

 

事件

onclick 点击事件

 

Document 文档对象

1 alert()  // 弹出提示框
2 confirm("参数")      // 询问框，提供俩按钮，确定和取消；如果点击是确定，返回true，如果点击取消，返回false
3 moveBy()  // 移动浏览器
4 setInterval("函数",毫秒值)  // 定时相关的，每隔毫秒值执行一次函数，返回唯一的id值
5 setTimeout("函数",毫秒值)   // 到了毫秒值后执行一次函数，返回唯一的id值
6 clearInterval(id的值)      // 清除定时
7 clearTimeout()
8 close()  // 关闭浏览器的窗口
9 open()  // 打开浏览器窗口

属性

opener 返回对创建此窗口的窗口的引用

win  open() 弹出baidu的窗口

 

document对象方法

document.getElementById("nameId");   // 获取到是input标签的对象    

 

DOM 文档对象模型（Document Object Model）

文档：标记型文档（HTML/XML）

对象：封装属性和行为（方法）

模型：共性特征的体现

 

DOM解析HTML

通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象

<span id="spanId">文本</span>

DOM想要操作标记型文档先解析

DOM解析HTML（浏览器就可以HTML）

 

DHTML不是一种编程语言

html ：封装数据。 <span>展示给用户的数据</span>

css ：设置样式（显示效果）

dom ：操作HTML（解析HTML）

js ：提供逻辑（判断语句，循环语句）

 

Document：代表整个文档

方法

1 getElementById("id的值");       // 通过元素的id的属性获取元素（标签）对象。
2 getElementsByName("name属性值");      // 通过名称获取元素对象的集合（返回数组）
3 getElementsByTagName("标签名称");  // 通过标签名称获取元素对象的集合（返回数组）
4 write("文本的内容（html的标签）")  // 把文本内容写到浏览器上
5 createElement("元素名称");  // 创建元素对象
6 createTextNode("文本内容")  // 创建文本对象
7 appendChild("子节点")  // 添加子节点

 

Element对象

获取元素对象

1 getAttribute("属性名称");    // 获取属性的值
2 setAttribute("属性名称","属性的值");    // 设置或者修改属性的值
3 removeAttribute("属性名称");  // 删除属性

 获取元素下的所有子节点

ul.getElementsByTagName();

 

Node节点对象

nodeName ：节点名称

nodeType ：节点类型

nodeValue ：节点的值

parentNode 获取父节点（永远是一个元素节点）

 

IE6-8

1 firstChild   // 第一个节点
2 lastChild  // 最后一个节点
3 nextSibling   // 下一同级节点 
4 previousSibling   // 上一同级节点

 

IE9-11 Chrome FireFox

1 firstElementChild  // 第一个节点
2 lastElementChild   // 最后一个节点
3 nextElementSibling  // 下一同级节点
4 previousElementSibling  // 上一同级节点

1 <ul>
2     <li>北京</li>
3 </ul>            
4 //  如果通过ul获取北京的子节点，使用是    ul.firstElementChild;    获取北京的子节点（IE9-11 Chrome FireFox）
5 // 但是如果IE6-8，需要使用firstChild;    

1 <span id="spanId">
2     文本内容
3 </span>    
4 //  使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）

方法

1 hasChildNodes() // 检查是否包含子节点
2 hasAttributes()     // 检查是否包含属性
3 appendChild(node)  // 父节点调用，在末尾添加子节点
4 insertBefore(new,old)  // 父节点调用，在指定节点之前添加子节点
5 replaceChild(new,old)  // 父节点调用，替换节点
6 removeChild(node)  // 父节点调用,删除节点
7 cloneNode(boolean)  // 不是父节点调用,复制节点,boolean如果是true，复制子节点,如果是false，不复制子节点，默认是false

 

innerHTML ：获取和设置文本内容。

属性

获取文本内容

设置文本内容

事件

onclick 点击事件

onload 加载事件

onfocus 获取焦点事件

onblur 失去焦点事件

 

 

全选/全不选/反选的练习

1 <input type="checkbox" />
2 // 指定默认值：checked    只要出现在<input type="checkbox" />,对号就勾上了。

 

鼠标移动的事件

onmousemove

onmouseout

onmouseover

 

鼠标点击事件

onclick 单击

ondblclick 双击

 

加载和卸载

 onload 加载

 onunload 卸载

 

获取焦点和失去焦点

onfocus 获取焦点

onblur 失去焦点

 

键盘

onkeyup 按下抬起

 

 

改变事件

onchange

 

控制表单的提交

onsubmit