JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS内联定义</title>
</head>
<body>
    <h1 class="wrap"></h1>
</body>
<script type="text/javascript">
    var div = document.querySelector(".wrap"); //通过class选择器获取对应的标签，
    div.innerHTML = 'Hello JavaScript!';//给对应的标签设置内容
</script>
</html>

在这个示例中，无需关注代码的内容，只需要关注script在HTML页面中的位置即可。

外部引入

· 在项目中创建js目录，在其中创建一个js文件，例如quickstart.js，文件内容如下：

var div = document.querySelector(".wrap"); //通过class选择器获取对应的标签，
div.innerHTML = 'Hello JavaScript!';//给对应的标签设置内容

· 在Html页面的body标签之后使用以下方式引入外部的js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS外部引入</title>
</head>
<body>
    <h1 class="wrap"></h1>
</body>
    <script type="text/javascript" charset="UTF-8" src="js/quickstart.js"></script>
</html>

在这个示例中，无需关注代码的内容，只需要关注script在HTML页面中的位置以及如何引入即可。

PS：无论是内联定义还是外部引入，script标签书写的位置很重要，一般来说，需要确保放到你要

操作的标签后边

三、基础语法

1.JavaScript是区分大小写的。(例如，定义age和Age两个变量，两个变量之间相互独立，互不影响)

2.代码最后的分号不是必须的。(如果一条语句独占一行的话(不建议),那么分号是可以省略的但如果一行中有多条语句，那么这些语句必须以分号隔开)

3.字符串不区分单双引号。(str='字符串'与str="字符串"两者效果一致)

4.注释方式

// 单行注释

/*

这是一个，

多行注释

*/

四、变量与基本数据类型

1.命名规范

一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；后续的字符也可以是数字（0-9）。因为 JavaScript 语言是区分大小写的，所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。

2.声明方式

· var 变量名 = 初始值

声明一个变量，可选初始化一个值，全局变量。

ps:全局变量是全局对象的属性。在网页中,全局对象是 window ,所以你可以用形如 window. variable 的语法来设置和访问全局变量。

示例：

var name="李四";

console.log(name);

console.log(window.name);

· let 变量名 = 初始值

声明一个块作用域的局部变量，可选初始化一个值。

· const 常量 = 初始值

声明一个块作用域的只读常量，不能更改

3.数据类型

布尔类型(Boolean)

JS中的Boolean类型也有两个值:true和false。

数字 (Number)

在 JS 中整数和浮点数都是同一个类型， Number 。

字符串 (String）
空值(Null)

一个表明 null 值的特殊关键字。

未定义 (undefined)

和 null 一样是一个特殊的关键字， undefined 表示变量未定义时的属性。
Symbol

表示唯一的、不可变的数据类型，通常用于对象的属性键。

五、运算符

与Java类似，在此就列举两个Java中没有的运算符。

恒等于 ===	不仅仅比较值，还比较类型
恒不等于 !==	不仅仅比较值，还比较类型

六、流程控制语句

与Java类似，在此就列举两个Java中不同的语法。

方法	遍历数组	遍历对象
for (item) in ...	遍历出来的是数组的下标	遍历出来的是对象的属性
for (item) of ...	遍历的是数组的元素	无法遍历

七、数组

1.创建方式

(1) let 数组名 = new Array() ;长度为0的数组

(2) let 数组名 = new Array(10); 长度为10的数组

(3) let 数组名 = new Array(1,2,3,"A",true);

(4) let 数组名 = [元素.......]

2.JS中数组的特征

(1) 数组中可以同时保存多种不同的数据类型的数据。

(2) 数组长度是可变的，可以实现缩放。

(3) 默认值是undefined。

3.数组的遍历

方式一：普通for循环

for(let i=0;i<arr.length;i++){
arr[i];
}

方式二：加强for循环

for(let k in arr){
k; // 代表额是数组下标
arr[k]; // 数组中的每一个数据
}

for(let v of arr){
v; // 数组的值
}

方式三：forEach方法

forEach(function(
遍历的数组元素,遍历数组的元素下标,当前遍历的数组
){

方法体
})

4.常用方法

方法	作用	返回值
push()	在数组最后的位置添加一个或多个元素
pop()	删除最后一个元素	返回删除的元素
unshift()	在数组开头的位置添加一个或多个元素
shift()	删除第一个元素	返回删除的元素
join()	将数组所有元素连接成一个字符串	字符串
concat()	将一个或多个数组中的元素拼接成一个新的数组，（不修改原数组）	数组
splice("开始删除掉下标","删除的个数","添加的与元素")	将元素添加到数组中指定位置，并删除该位置后若干元素	返回删除的元素
reverse()	将数组中的元素顺序反转
slice()	根据传入的start 下标和 end 下标从数组中截取部分元素生成新的数组	返回新的数组
sort()	以将数组中的元素按照默认的排序算法做升序排序

八、函数

1.概念

函数类似java，c，c++中的方法，就是对重复性的代码进行封装，多次被调用的方式。即用来封装具有一定功能代码块的方式。

2.使用

定义方式：

// 方式一: 有名函数命名函数
function 函数名(参数列表){
   函数体;
   多行代码块；
}

// 方式二：匿名函数函数表达式
let 函数名 = function(参数列表){
   函数体;
   多行代码块;
}

匿名函数的自调用
(function(形参){代码块})(实参);

九、对象

1.自定义对象

(1)方式一：使用Object来创建对象

let 对象名 = new Object();

(2)方式二：在创建对象的同时，直接使用赋值

let 对象名 = {
属性: 值,
属性：值,
.....,
行为:function(){
......
},
.......
}

(3)方式三：使用构造函数来创建对象格式

function 函数名(属性列表){
this.属性=属性列表;
this.属性=属性列表;
.....;
this.行为 = function(){
......
}
}

//创建对象方式

let 对象名 = new 构造函数名(......);

PS：函数名的首字母要大写。

2.内置对象

(1)String

常用属性:

length

获取字符串的长度

常用方法:

indexOf()	根据内容获取该内容第一次出现的下标
lastIndexOf()	根据内容获取该内容在字符串中最后一次出出现的下标
charAt()	根据下标获取内容
replace()	替换字符串中的字符
subString(开始位置,结束位置[不包括])	从字符串中截取字符串，可以输入一个参数或两个参数
subStr(开始位置,截取的个数)	从字符串中截取字符串，可以输入一个参数或两个参数
toLowerCase()	转为小写字母
toUpperCase()	转为大写字母
split()	根据符号分割
concat()	拼接字符串

(2)Date

创建方式：

new Date(); // 获取系统的当前时间
new Date(毫秒数); // 从基准时间过了多少毫秒后的时间
new Date(year,month,day,hour,minute,second); // 指定年月日时分秒的时间,注意：月份要-1

获取当前时间方法

let year = date.getFullYear();//获取年
let mon = date.getMonth()//获取月
let day = date.getDate();//获取日
let h = date.getHours();//获取时
let m = date.getMinutes()//获取分
let s = date.getSeconds()//获取秒

本地格式日期： toLocalString()

(3)Math

常用属性：

Math.PI

圆周率

常用方法：

Math.abs()	绝对值
Math.floor()	向下取整
Math.ceil()	向上取整
Math.random()	生成随机数
Math.round()	四舍五入
Math.min()	最小值
Math.max()	最大值

(4)Array

详细见上面数组。

十、DOM对象

1.概念

Document Object Model :文档对象模型：把整个页面视为一个文档对象，页面中的每个内容(标签，属性，文本)都视为了一个节点，形成一种DOM树，可以通过一些API ，完成对页面的操作。

2.document对象

常见方法：

document.getElementById();	根据id名称来获取第一个元素对象
document.getElementsByTagName();	根据标签名称来获取元素对象集合
document.getElementsByClassName();	根据class名称来获取元素对象集合
document.getElementsByName();	根据name名称来获取元素对象集合
document.querySelector();	根据css选择器来选择第一个元素对象
document.querySelectorAll();	根据css选择器来选择所有的元素对象集合
createElement("标签名“)	创建元素
appendChild(元素)	父元素对象追加元素(不会替换容器里原本的内容)
removeChild(子元素)	父元素对象删除元素
setAttribute("属性名","属性值")	设置元素属性
getAttribute("属性名")	获取元素属性

十一、BOM对象

1.概念

浏览器对象模型：用来操作浏览器窗口的一些对象。

2.windows对象

常见属性：

属性名	属性或方法(带括号是方法，不带是属性)	介绍
document	见上	见上
history	forward()	浏览器页面的跳转：前进
	back()	浏览器页面的跳转：后退
	go(数字)	浏览器页面的跳转：1 前进 -1 后退
location	href	设置跳转的网址
screen	width	获取浏览器的屏幕宽
screen	height	获取浏览器的屏幕高

常见方法：

alert()	警告框
prompt()	输入框
confirm()	确认框
open()	打开新窗口
close()	关闭窗口
setInterval()	安装指定周期(毫秒)来重复性执行函数(间歇调用)
clearInterval()	清除重复性的任务
setTimeout()	定时毫秒后执行一次函数(延迟调用)
clearTimeout()	清除定时任务

计时器示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器</title>
	</head>
	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			//方式一 间歇调用(重复调用)
			let div1 = document.querySelector("#div1");
			let interval = setInterval("test()",1000);
			function test(){
				let d = new Date();
				div1.innerHTML=d.toLocaleString();
			}
			clearInterval(interval)//清除间歇调用
			//方式二  延迟调用
			let timeout = setTimeout(time(),1000);
			function time(){
				let d = new Date();
				div1.innerHTML=d.toLocaleString();
				setTimeout("time()",1000);
			}
			clearTimeout(timeout)//清除延迟调用
		</script>
	</body>
</html>