JavaScript

js(JavaScript)

简介

1.什么是JavaScript
JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行
Web前端三层：
    结构层HTML，定义页面的结构
    样式层CSS，定义页面的样式
    行为层JavaScript用来实现交互，提升用户的体验
2.JavaScript作用
    在客户端浏览器上动态的操作页面
    在客户端浏览器上做数据的校验
    在客户端上发送异步请求
3.JavaScript有三个组成：
	ECMA Script:基础语法.
	BOM:Browser Object Model 浏览器对象模型.
	DOM:Document Object Model 文档对象模型.

注释

单行注释
	// 注释的内容
多行注释
	/*
	注释的内容
	*/

输入输出语句

输入框
	prompt(“提示内容”);
弹出警告框
	alert(“提示内容”);
控制台输出
	console.log(“显示内容”);
页面内容输出
	document.write(“显示内容”);

变量和常量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。
定义局部变量
	let 变量名 = 值;
定义全局变量
	变量名 = 值;
	var 变量名 = 值;
定义常量
	const 常量名 = 值;

数组

数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。
定义格式
	let 数组名 = [元素1,元素2,…];
索引范围
	从 0 开始，最大到数组长度-1
数组长度
	数组名.length
数组高级运算符…
	数组复制
	合并数组
	字符串转数组

数据类型

js中的数据类型:

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined

检测数据类型:

typeof(value); 或者typeof value;     返回这个变量的类型. 
说明 : 同一个变量, 可以进行不同类型的数据赋值.

<script type="text/javascript">
    
    var a;
    alert(typeof a);  // undefined
 
    a = 998;
    alert(typeof a); // number
 
    a = "用心学习";
    alert(typeof a); // string
 
    a = true;
    alert(typeof a); // boolean
    
</script>

DOM

• DOM(Document Object Model)：文档对象模型.
• 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素
子元素对象.parentElement	获取当前元素的父元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器获取一个元素，如："#id" “.类名” “标签名”
document.querySelectorAll(CSS选择器)	通过css选择器获取一组元素

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
元素.remove()	删除自己(自杀)(在ie浏览器中无法使用)
父元素.replaceChild(新元素, 旧元素)	用新元素替换子元素

Attribute 属性的操作	作用
setAtrribute(属性名, 属性值)	设置属性
getAtrribute(属性名)	根据属性名获取属性值
removeAtrribute(属性名)	根据属性名移除指定的属性
style属性	为元素添加样式

Text 文本的操作	作用
innerText	添加文本内容，不解析标签
innerHTML	添加文本内容，解析标签

事件

• 用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

常用事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	获得焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出
onsubmit	当表单提交是触发该事件

绑定事件的方式

方式1
	通过标签中的事件属性进行绑定。
	<button id="btn" onclick="执行的功能"> </button>
方式2
	通过 DOM 元素属性绑定。
	document.getElementById("btn").onclick = 执行的功能

类的定义和使用

//定义Person类
class Person{
    //构造方法
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    //show方法
    show(){
        document.write(this.name + "," + this.age + "<br>");
    }

    //eat方法
    eat(){
        document.write("吃饭...");
    }
}

//使用Person类
let p = new Person("张三",23);
p.show();
p.eat();

字面量定义类和使用

//定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
    person.eat();

内置对象

• 字符串对象的方法

方法名	作用
substring(startIndex,endIndex)	包头不包尾
split(delimiter)	切割字符串
toLowerCase()	转成小写
toUpperCase()	转成大写
trim()	去掉前后空格

• 全局函数

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成小数
isNaN(字符串)	判断非数字

编码和解码	说明
encodeURI(字符串)	URI编码
decodeURI(字符串)	URI解码

执行字符串	说明
eval(字符串)	执行字符串中JS代码

• 能够使用数组中常用的方法

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组拼接成一个字符串
sort()	排序，默认按字符串大小
pop()	删除
push()	添加

• 能够使用日期对象常用的方法

方法名	作用
getFullYear()	得到年份
getDay()	得到周几
getTime()	得到毫秒数
toLocaleString()	转成本地的时间

json

JSON(JavaScript Object Notation, JavaScript对象标记)，是一种轻量级的数据交换格式，用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。

• XML不足

1. 描述的数据比需要的真实数据多
2. 占用了更多的传输的带宽
3. 解析XML比较麻烦

<contact>
	<name>貂蝉</name>
	<gender>false</gender>
	<age>20</age>
</contact>

• json

{
  name: "貂蝉",
  gender: false,
  age: 20
}

json的语法格式

类型	语法	解释
对象类型	{键:值, 键:值}	代表一个对象，可以有多个属性 属性与值之间使用冒号，属性与属性之间使用逗号
数组/集合类型	[元素,元素,元素]	数组中每个元素类型是可以不同
混合类型	[{键:值},{键:值},{键:值}]	数组中每个元素是一个对象
	{键:[元素,元素,元素]}	是一个对象，但某个属性是一个数组或集合

JS中操作JSON的方法

语法	功能
JSON.parse(字符串)	将一个字符串转成JSON对象 注：JSON字符串中属性名一定要使用双引号引起来
JSON.stringify(JSON对象)	将一个JSON对象转成字符串

BOM

• BOM(Browser Object Model)：浏览器对象模型。
• 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作

BOM常用对象	作用
window	浏览器窗口方法： prompt(), alert(), setInterval() confirm() 确定框，有2个选择按钮(确定，取消)
location	代表浏览器的地址栏
history	浏览的历史记录

window对象

window中的方法	作用
setTimeout(函数名, 间隔毫秒数)	过一段时间后调用一次指定的函数，单位是毫秒，只调用一次。 返回值是一个整数类型，这就是计时器
clearTimeout(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值
setInterval(函数名, 间隔毫秒数)	每隔一段时间调用一次指定的函数，单位是毫秒，不停的调用。 返回值是一个整数类型，这就是计时器
clearInterval(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值

location对象

• 作用：代表浏览器上地址栏对象，主要用于页面的跳转

属性	功能
href	1. 获取属性值，得到当前访问的地址 2. 设置属性值，跳转到指定的页面
search	获取?后面的参数字符串 GET方法提交表单的时候，参数会显示在地址栏上

location常用方法

location的方法	描述
reload()	重载加载当前的页面，类似于刷新

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：location对象</title>
</head>
<body>

<!--点击以后调用方法-->
<input type="button" onclick="location.reload()" value="刷新">

<script type="text/javascript">
    //1. 获取属性值，得到当前访问的地址
    //document.write(location.href + "<br/>");
    //2. 设置属性值，跳转到指定的页面
    //location.href = "http://www.itcast.cn";

    //获取?后面的参数字符串
    //document.write(location.search + "<br/>");

    //显示现在的时候
    document.write(new Date().toLocaleString() + "<br/>");
</script>
</body>
</html>

与window对象关系

1. location对象是window对象的一个属性，完整写法：window.location
2. location对象默认的属性是href

小结

1. location学习了哪些属性？
   1. href 进行页面跳转
   2. search 获取?后面的参数字符串
2. 学习了哪些方法
   1. reload 重新加载页面
3. 它与window是什么关系?
   1. 是window的一个属性

history对象

• 作用：访问历史记录中页面

方法	作用
forward()	相当于浏览器上前进按钮，如果浏览器上前进按钮不可用，这个方法也不起作用
back()	相当于浏览器上后退按钮
go(正数或负数)	go(1)相当于前进，go(-1)相当于后退

注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：历史记录对象</title>
</head>
<body>
<a href="demo04_location.html">跳转到demo04</a>

<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进" onclick="history.go(1)">
</body>
</html>