JavaScript入门

JavaScript
一、JavaScript简介

1. 什么是JavaScript？
   JavaScript简介JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行
   补充：
   机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译）
   高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件
   解释：
   ·结构层HTML，定义页面的结构
   ·样式层CSS，定义页面的样式
   ·行为层JavaScript，用来实现交互，提升用户体验
   2. JavaScript作用
   ·在客户端动态的操作页面
   ·在客户端数据的校验
   ·在客户端发送异步请求
   二、 引用方式
   1内联方式
   在页面中使用scrip标签，在scrip标签的标签中编写js代码
   2. 行内方式
   在普通的标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等
   对象：客观存在的，并且可以相互区别的事物—如：各种标签
   eg：对象：
   ·外观----宽度、高度，背景色-----css
   ·事件----多态性同一个事件发生的对象不同，所引发的反应也不同
   3 外部方式
   使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
   
   注意：如果某个scrip标签用于引入外部的js文件，则该script标签的标签中不能再写js代码
   三、基本用法
   1变量
   js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
   语法：var 变量名=常数或表达式；
   注意：
   1.由字母，汉字，下划线开头
   1.不能和保留字同名
   1.大小写敏感
   回忆

数据类型：常量和变量
常量：具体的值，不变的量----常数项
变量：变化的量，存放常量的是—容器

在ECMAScript 6规范中新增let关键字，也用于声明变量
使用let声明的变量支持模块级作用域，而使用var声明的变量不支持模块级作用域
注：在IDEA中配置ES版本settings–>Language&FrameWorks–>JavaScript–>JavaScript Version
2. 输入和输出
输出：
·alert() 弹出警告框
·console.log() 输出到浏览器的控制台
·document.write() 输出到页面
输入：
·prompt() 弹出一个输入框，获取用户输入的数据
使用typeof 变量名判断变量的类型
使用Number(变量名)将字符串转换为数值
3. 转义字符
常用转义字符
·\n换行
·\t制表位，缩进
·"双引号
·'单引号
·\a响铃，警告
4. 注释
单行注释：//
多行注释：/* */
5. 编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、 核心语法
1.数据类型
常量：具体的值 eg:‘abc’ ‘20’ 3.14 100
变量：存放常量的量—容器
基础数据的类型：
·string字符串
·number 数值（NaN表示非数字Not a Number,其自身是number类型,表示数值是不正常状态
·boolean布尔
·null空类型
·undefined未定义类型
数据类型转换：
·转换为number
·使用Number()、parselnt()、parsFloat()
·转换为string
拼接空字符串
·转换为布尔
使用Boolean()
注意：0、空字符串、undefined、null、NaN会被转换为逻辑假false，其他的类型在转换为布尔时，转换为true
运算符
算数运算符：+、-、、/、%、、++、–
比较运算符：>、>=、<、<=、== 、===、!=
赋值运算符：=、+=、.=、=、/=、%=、=、
逻辑运算符：&&并且、||或、|与
条件运算符：条件？表达式1:表达式2

使用Math对象进行数学运算，用法：Math.方法名(参数)
选择结构
if…else、swich
4.循环结构
white、do…white、for、for…in
break、continue
break：退出整个循环
continue：结束本次循环。返回到条件判断数继续进行下一次是否执行循环的条件判断


5. 数组
5.1定义方式
语法：
注意：
·数组长度会自动扩展
·数组中元素的默认值为undefined
·使用数字的lenght属性可以获得数字的长度(数组中有多少个元素

5.2常用方法


5.3二维数组
二维数组可以认为是特殊的的一维数组，即一维数组中的每个元素又是一个一维数组
语法：

6.函数
6.1自定义函数
语法：
注意：
·定哟函数时不需要指定参数的类型
·实参个数和形参个数可以不同，未给形参传入实参的，其默认值为undefined
·不需要指定返回值的类型，如果有返回值，直接使用return返回
·如果函数中没有使用return语法返回值，则默认返回undefined
变量的作用域：
·局部作用域
在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
·全局作用域
在函数外部声明的变量，在任何位置都可以访问
·块级作用域
使用let关键字声明变量，只能在声明它的代码块内访问
6.2回调函数
不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback调用时只写函数名，没有小括号（）和参数
应用：
·作为事件绑定的函数
·作为另一个函数的参数

6.3匿名函数
没有名字的函数，称为匿名函数，一般用于回调
应用场景：
·用于函数的回调
·用于一次性执行的函数，会自动执行，称为自动执行函数-----用于定义一个插件

6.4箭头函数
ES6中允许使用箭头=>定义函数，称为箭头函数，也叫lambda表达式，也是一种特殊匿名函数
五、复合数据
1.string
1.1定义方式
语法：
使用length属性获取字符串的长度
1.2常用方法


2.Date
2.1定义方式
语法：


3.JSON
3.1 JSON简介
JavaScript object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式
采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成
3.2基本语法
语法{“属性名”：属性值，“属性名”：属性值,…}
注意：
·JSON结构是由一系列的键值对所组成的的，称为JSON对象
·属性名必须用双引号括起来
使用：
·简单的JSON对象
·复合属性，属性的值为JSON对象
·JSON对象的集合
3.3JSON转换
·JSON转换为字符串
·字符串转换为JSON

4.对象类型
4.1对象简介
补充：
1.对象：客观存在的并且可以互相区别的事物 eg：一个同学 一本书 页面上的命令按钮 复选框
2.描述一个对象
​ 属性-----外观，长相
方法-----行为模式-----干什么
事件-----单击，双击
3.对象有三个基本特征：封装、继承和多态
对象类型可以理解为JAVA中的引用数据类型
JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征
4.2 创建对象
三种方式：
·使用object

·使用构造函数，模拟类的定义，相当于自定义了一个类型
·使用JSON格式定义对象，一般只在JSON对象中定义属性

六、 DOM操作
1DOM简介
Document Object Model文档对象模型
浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树
·HTML文档和DOM树节点是——对应的关系
·当DOM树被改变时，与之对应的HTML文档会随之改变
·当需要对HTML中内容进行动态改变时，可以使用DOM来进行操作
·DOM提供了一组用来操作html文档的API，即提供了一套属性、方法和事件
·树上的每个节点都量一个DOM对象，树的顶层为documen对象，表示整个文档
2. 查询操作
即获取DOM对象
3. 访问操作
3.1 访问属性
即获取/设置DOM对象的属性
DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与应对的HTML标签同名的属性
用法：DOM对象、属性
3.2 访问内容
即获取/设置标签中的内容
两种方式：
·使用innerHTML
·用法：DOM对象.innerHTML即内容解析为HTM
·使用innertText
用法：DOM对象.innertText将内容作为纯文本

3.3 访问CSS
即获取/设置CSS样式
两种方式：
·使用style属性
用法：DOM对象.style.样式属性
如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写
·使用className属性
用法：DOM对象.className
4.添加操作
5. 删除操作
七、事件处理

1. 简介
   事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如
   ·用户点击了某个HTML元素
   ·用户将鼠标移动到某个HTML元素上
   ·用户输入数据时光标离开
   ·页面加载完成
   事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等
   事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象
   事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数
   2. 绑定事件
   两种方式：
   ·静态绑定，通过标签的事件属性绑定
   ·动态绑定，通过JS代码来绑定事件
   ·可以通过事件回调函数的第一个参数获取事件对象event
   在事件回调函数中，this表示事件源，即发生事件的元
   3.常用事件
   3.1鼠标事件
   
   3.2键盘事件
   3.3表单事件
   
   链接：https://pan.baidu.com/s/1tTLkqO6bf5CjtfQ1xVy9AA
   提取码：8qwc