2020年JavaScript课堂笔记

javaScript（基础）

1.JavaScript简介

javaScript是“弱类型”语言

功能：
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

2. JavaScript语法

与HTML结合方式

1. 内部js：定义<script>,标签体内容就是JavaScript代码
2. 外部js：定义<script>通过src属性引入外部的js文件

注意：

1. `<script>`可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2.  `<script>`可以定义多个。

注释方式：

• 单行注释：//注释语句
• 多行注释：/*注释语句*/

数据类型:

1. 基本数据类型
   • number：数字
   • string：字符串
   • boolean：布尔值
   • null：一个对象为空的占位符
   • undefined：未定义
2. 引用数据类型：对象

JavaScript变量的要求

1. 变量名区分大小写
2. 允许包括字母、数字、$、下划线
3. 关键词var来声明变量

定义变量：var 变量名 = 初始值;

typeof运算符：获取变量的类型

注意：null运算后得到的是Object

运算符

1. 一元运算符：++ –

   • 其他类型转number：
     • string转number：按照字面值转化，如果字面值不是数字，转为NaN
     • boolean转number：true转为1，false转为0

2. 算数运算符：+ - / % …

3. 赋值运算符：= += -= …

4. 比较运算符：> < >= <= == ===（全等于）

   • ===全等于，在比较之前先判断类型，如果类型不一样，则直接返回false

5. 逻辑运算符：&& || ！

   • 其他类型转为boolean：
     1. number：0或NaN为false，其他为true
     2. string：除了空字符串("")，其他都是true
     3. null&undefined：都是false
     4. 对象：所有对象都是true

6. 三元运算符： 表达式？值1:值2

Array数组

1. 创建数组的方式

1. var 变量名 = Array([数组长度]);
2. var 变量名 = Array(元素列表);
3. var 变量名 = [元素列表];

2. 常用方法

• join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
• push()：向数组的末尾添加一个或更多元素，并返回新的长度

3. 属性：

length：数组的长度

4. 特点：

1. 数组元素是类型可变的
2. 数组中长度可变

对象

对象：由一些属性和方法组合在一起而构成的一个数据实体

对象的要求

1. 对象的每个值都是对象的一个属性
2. 创建对象使用Object关键字，使用对象名.属性名获取属性

创建对象的两种方式

1. var 对象名 = Object();
2. var 对象名 = {p1:v1,p2:v2,...,pn:vn};

对象里的数据可以通过属性和方法来访问

• 属性是隶属于某个特定对象的变量
• 方法是某个特定对象才能调用的函数

Date日期对象

1. 创建：

var date = new Date();

2. 常用方法：

方法声明	功能描述
toLocaleString()	返回当前date对象对应的时间本地字符串格式
getTime()	获取当前时间到时间源点之间的毫秒值

Math数学对象

1. 创建：

Math.方法名();

2. 常用方法

方法声明	功能描述
random()	返回(0,1]之间的随机数
ceil(num)	对数值num向上取整
floor(num)	对数值num向下取整
round(num)	对数值num四舍五入

3. 属性：PI

RegExp正则表达式对象

1. 正则表达式：定义字符串的组成规则

单个字符

符号	含义
[ ]	单个字符，如[a] [ab] [a-zA-Z0-9_]
\d	单个数字字符[0-9]
\w	单个单词字符[a-zA-Z0-9_]
\s	匹配任何空白字符，包括空格、制表符、换页符等

量词符号

符号	含义
？	表示出现0次或1次
*	表示出现0次或多次
+	表示出现1次或多次
{m}	正好匹配m次
{m,n}	表示m<= 数量 <=n
{,n}	最多n次
{m,}	最少出现m次

开始结束符号

符号	含义
^	开始
$	结束

正则对象：

1. 创建
   1. var reg = new RegExp("正则表达式");
   2. var reg = /正则表达式/;
2. 常用方法

方法声明	功能描述
test(参数)	验证指定的字符串是否符合正则定义的规范

GLobal

1. 特点：全局对象，GLobal中封装的方法不需要对象就可以直接调用。方法名();
2. 常用方法

方法声明	功能描述
encodeURL()	url编码
decodeURL()	url解码
encodeURLComponent()	url编码，但码更复杂更多
decodeURLComponent()	url解码
parseInt()	将字符串转为数字
isNaN()	判断一个值是否是NaN（NaN参与的==比较全部false）
eval()	将JavaScript字符串作为脚本代码来执行

函数

函数：一组允许在你的代码里随时调用的语句

定义函数的两种方式

1. function 函数名([参数]){}
2. var 函数名 = function([参数]){}

注意：参数可以是任意类型，且无需声明，函数可以用return返回值

3.DOM

功能：控制html文档的内容，对标记语言文档进行CRUD的动态

document：文档对象

1. 创建

   1. window.document
   2. document

2. 常用方法

获取元素节点的3种方法

方法声明	功能描述
getElementById(id值)	根据id属性值获取对象
getElementByTagName(标签名称)	根据标签名称获取对象数组
getElementByClassName(class值)	根据class属性值获取对象数组

获取和设置元素

方法声明	功能描述
对象名.createAttribute(属性名)	在该对象创建属性
对象名.getAttribute(属性名称)	获取该对象的属性值
对象名.setAttribute(属性名称,属性值)	对该对象修改指定属性为指定属性值
对象名.removeAttribute(属性名)	删除该对象属性

Node：节点对象

1. 创建：不需创建，直接调用方法
2. 常用方法

方法声明	功能描述
appendChild()	向节点的字节点列表的结尾添加新的子节点
removeChild()	删除（并返回）当前子节点的指定子节点
replaceChild()	用新节点替换一个子节点

3. 属性

parentNode返回节点的父节点

innerHTML

1. 标签体的获取和设置：innerHTML
2. 控制元素样式的方法
   1. 使用元素的style属性来设置
   2. 提前定义好css，通过元素的className属性来设置其class属性值

事件处理函数

1. 点击事件

方法声明	功能描述
onclick	单击事件
ondblclick	双击事件

2. 焦点事件

方法声明	功能描述
onblur	失去焦点
onfocus	元素获得焦点

3. 加载事件

方法声明	功能描述
onload	一张页面或一幅图像完成加载

4. 鼠标事件

方法声明	功能描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

5. 键盘事件

方法声明	功能描述
onkeydown	某个键盘按键被按下
onkeyup()	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

6. 选择和改变

方法声明	功能描述
onchange	域的内容被改变
onselect	文本被选中

7. 表单事件

方法声明	功能描述
onsubmit	确认按钮被点击
onreset	重置按钮被点击

注意：可以把任意数量的JavaScript语句放在引号之间，中间用分号;隔开，数件处理函数执行后会返回true值

4.BOM

功能：将浏览器的各个组成部分封装成对象

分类：

1. window：窗口对象
2. Navigator：浏览器对象
3. Screen：显示器屏幕对象
4. History：历史记录对象
5. Location：地址栏对象

Window：窗口对象

1. 创建：window对象不需要创建，直接调用其方法

2. 常用方法

与弹窗有关的方法

方法声明	功能描述
alert()	显示带有一段消息和一个确认按钮的弹窗
confirm()	显示带有一段消息、确认和取消按钮的弹窗
prompt()	弹出客户输入框的弹窗，返回客户输入值

与打开关闭有关的方法

方法声明	功能描述
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口

与定时器有关的方式

方法声明	功能描述
setTimeout(毫秒值)	在指定的毫秒值后调用函数或计算表达式，返回取消的标识
clearTimeout()	取消setTimeout()方法设置的timeout
setInterval(毫秒值)	按照指定的周期来调用函数或计算表达式
clearInterval()	取消由setInterval()设置的timeout

3. 属性
   • 获取其他BOM对象：history、location、Navigator、Screen
   • 获取DOM对象：document
4. 特点
   • window引用可以省略。方法名();

Location：地址栏对象

1. 创建：
   1. window.location
   2. location
2. 常用方法

方法声明	功能描述
reload()	重新加载当前文档。刷新

3. 属性
   • href设置或返回完整的URL

History：历史记录对象

1. 创建：
   1. window.history
   2. history
2. 常用方法

方法声明	功能描述
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go(整数)	加载history列表中的某一个具体面

3. 属性
   • length 返回当前窗口历史列表中的URL数量