1 JavaScript介绍

1.1 JS简介

1.JavaScript
	是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2.作用
	—— 网页特效（监听用户的一些行为，让网页作出对应的反馈，如轮播图、下拉菜单等）
    —— 表单验证（针对表单数据的合法性进行判断，如输入邮箱的判断）
    —— 数据交互（后台的数据，渲染到前端）
    —— 服务端编程（node.js）
3.JavaScript的组成
	ECMAScript:(js的书写语法和书写规则)
        规定了js基础语法核心知识。
        比如：变量、分支语句、循环语句、对象等。
    Web APIs：
    	DOM 操作文档，比如对页眉元素进行移动、大小、添加删除等操作
        BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

1.2 JS的书写位置

与css的书写位置一样。
1.内部JavaScript
	直接写在html文件里，用script标签包住。通常写在body的最底端。
2.外部JavaScript
	代码写在js文件夹里以.js为扩展名的文件里。
	<script src="./js/my.js"></script>
3.内联JavaScript
	代码写在标签内部。
	<button οnclick="alert('假的')">点击我月薪过万</button>

1.3 JavaScript书写规则

1.注释
	单行注释：// ,快捷键：ctrl+/
    块注释：/*  */，快捷键：shift+alt+a
2.结束符
	英文的;代表语句结束，实际开发中，可写可不写，注意风格统一。

1.4 JavaScript输入输出语法

1.输出语法
	语法1：
    document.write('我是div标签')
    document.write('<h1>一级标题</h>')
    作用：向body内输出内容，输出内容写的是标签也会被解析。
    语法2：
    alter('这是一个警告框！')
    语法3：
    console.log('控制台输出语法')
    作用：程序员调试使用。
2.输入语法
	语法：
    prompt('请输入您的姓名：')
    作用：显示一个对话框，对话框上方显示文字信息，用来提示。
3.js代码执行顺序
	按照HTML文档流顺序执行JavaScript代码。
    alter()和prompt()会跳过页面渲染先被执行。

2 js基础语法

2.1 变量的概念

1.变量是计算机用来存储数据的容器，通俗来理解是一个盒子。
2.变量是容器而不是数据

2.2变量的基本使用

1.声明变量：
语法：
	let 变量名 //var可以声明相同的变量名也可以先使用再声明，所以现在不用var
eg：let age
2.变量赋值
	age=18
    
可以在声明变量的同时赋值，即变量初始化

2.3 数组

1.数组的定语
语法：
	let 数组名 = [数据1，数据2……]
数组的索引（下标）从0开始
数组中的元素可以数据类型不同
通过length属性来获得数组元素的个数

2.4 常量

1.使用const声明的变量称为“常量”
eg: const PI=3.14
常量必须在声明的同时赋值，并且不允许重新赋值

2.5 数据类型

1.基本数据类型
	number 数字型		可以进行算术运算
	string 字符串型		用‘’、“”或反引号``包裹，进行+拼接运算；模板字符串${变量名}，外面用反引号包裹，eg：`我今年${age}岁了`
	boolean	布尔型		两个固定的值true和false
	undefined 未定义型  声明变量但未赋值
	null 空类型 
	#typeof 变量名 #判断变量类型
2.复杂（引用）数据类型
	object 对象
3.js是弱数据类型，声明变量后通过赋值才能知道变量的类型
4.数据转换
	转换为数字型
        在输入时前面写上+	eg：let num1=+prompt('请输入一个数字：')
		number(数据)	转换为数字类型
		parseInt(数据)	保留整数
		parseFloat(数据) 	保留小数
5.运算符 与C语言基本相同
	比较运算符中注意 === 判断值和类型是否全等，!== 判断不全等
	运算符优先级也是非算关与或赋逗
		

3.Web APIs

3.1 DOM

1. DOM(Docment Object Moel——文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API，实现操作网页内容的功能
2.作用：	开发网页内容特效和实现用户交互
3.DOM树 	将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树，非常直观的体现了标签与标签之间的关系。
4.DOM对象：浏览器根据html标签生成js对象，每个标签都是对象

3.2获取DOM对象

1.选择匹配的第一个元素
	document.querySelector('css选择器')  	//一个或多个有效的css选择器
2.选择所有匹配的多个元素
	document.querySelectorAll('css选择器')		//所有元素以一个数组的形式返回，但是是伪数组，没有pop()、push()等功能
    
获取单个元素可以直接修改属性的值，获取多个元素就要用遍历的方式来修改单个元素的属性的值。
3.获取元素的方式
	(1)根据id名称获取
    	语法：document.getElementById('id名称')
        作用：获取文档流中id名对应的一个元素，如果没有就返回null
        如果一个元素有id属性，那么该元素的值可以直接写成id名称.value。
    (2) 根据元素类名获取
    	语法：document.getElementsByClassName('元素类名')
        作用：获取文档流中所有类名对应的元素
        返回值：必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
    (3) 根据元素标签名获取
    	语法：document.getElementsByTagName('标签名')
        作用：获取文档流中所有标签名对应的元素
        返回值：必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
    (4)根据选择器获取一个
    	语法：document.querySelector('css选择器')
        作用：获取文档流中满足选择器规则的第一个元素
        返回值：如果有就获取到第一个，没有就是null
    (5)根据选择器获取一组
    	语法：document.querySelectorAll('css选择器')
        作用：获取文档流中满足选择器规则的所有元素
        返回值：如果有必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
    

3.3 操作元素内容

1.修改对象内容
	(1)对象.innerText='值'		//不解析标签
    等价于对象变量.value
    (2)对象.innerHTML='值'		//解析标签，更常用
    eg：
    <div class="box">文字内容</div>
    <script>
    	const box=document.querySelector(".box")
        console.log(box.innerText)
        box.innerHTML="<strong>我是一个盒子</strong>"
    </script>
    

3.4操作元素属性

1.操作元素常用属性
	对象.属性=值
2.操作元素样式属性
	实现方法：(1)通过style属性操作css  对象.style.属性=新值
    		(2)操作类名(ClassName)操作css
        	(3)通过ClassList操作类控制css

3.5 操作元素类名

步骤：
	1.获取：元素.classname
	2.设置：元素.classname='新类名'

3.6操作元素行内样式

步骤：
	1.获取：元素.style.样式名
	2.设置：元素.style.样式名='样式值'
注意：如果带有中划线的样式名在js里面要用驼峰命名法去表示，诸如background-color表示为backgroundColor

3.7 获取元素非行内样式

获取：window.getComputedStyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式

3.8 节点操作

创建、插入、删除、替换和克隆节点
1.创建节点
	语法：document.createElement('标签名称')
	作用：创建一个指定标签元素
	返回值：一个创建好的元素节点
2.插入节点
	语法1：父节点.appendChild(子节点)
	作用：把子节点放在父节点的内部，并且放在最后的位置

4 BOM操作

4.1 BOM操作内容

browser object model

一整套操作浏览器相关内容的属性和方法

​ 操作浏览器历史记录

​ 操作浏览器滚动条

​ 操作浏览器页面跳转

​ 操作浏览器标签页的开启和关闭

​ ……

常用的对象window对象(window表示对象的名称)，此对象称之为全局对象，方法也是全局方法，所以语法可以省略"window."

4.2 常用BOM操作

1.获取浏览器窗口尺寸

​ 可视窗口宽度：window.innerWidth

​ 可视窗口高度：window.innerHeight

2.浏览器的弹出层

​ 提示框：window.alert(‘提示信息’)

​ 询问框：window.confirm(‘提示信息’)

​ 输入框：window.prompt(‘提示信息’)

3.开启和关闭标签页

​ 开启：window.open(‘地址’)

​ 关闭：window.close()

<body>
  <button id="on">开启</button>
  <button id="off">关闭</button>
  <script>
    on.onclick = function () {
      window.open('https://www.baidu.com')
    }

    off.onclick = function () {
      window.close()
    }
  </script>
</body>

4.浏览器常见事件

​ 资源加载完毕：window.οnlοad=function(){}

​ 可视尺寸改变：window.οnresize=function(){}

​ 滚动条位置改变：window.οnscrοll=function(){}

5.浏览器的历史记录操作

​ 回退页面：window.history.back()

​ 前进页面：window.history.forward()

6.浏览器卷去的尺寸

​ 高度：

​ (1)document.documentElement.scrollTop

​ (2)document.body.scrollTop

​ 宽度：

​ (1)document.documentElement.scrollLeft

​ (2)document.body.scrollLeft

7.浏览器滚动到

window.scrollTo():

(1)window.scrollTo(left,top)

(2)window.scrollTo({

left:xx,

top:yy,

behavior:‘smooth’

})