JavaScript学习笔记

hxznh

已于 2022-06-30 17:57:03 修改

阅读量222

点赞数

分类专栏：学习笔记文章标签： javascript 前端 html

于 2022-06-29 11:02:27 首次发布

本文链接：https://blog.csdn.net/hxznh/article/details/125516677

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript

概念:一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有]avascript的解析引擎*脚本语言:不需要编译，直接就可以被浏览器解析执行了

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

发展史
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为∶C–，后来更名为:scriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言:LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为Javascript
3. 1996年，微软抄袭Javascript开发出Jscript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，ECNAScript，就是所有客户端脚本语言的标准。
5. javascript = ECMAScript + Javascript自己特有的东西(BOM+DOM)

基本语法

与 html 结合方式
1. 内部 JS:
  - 定义 <script> 标签，标签内代码就是 js 执行代码
2. 外部JS:
  - <script src=""> 通过 src 引入外部 js 脚本文件
- 注意：
  1. <script> 标签可以定义在 html 页面任意位置，但是定义的位置会影响执行顺序
  2. <script> 标签可以定义多个
注释
1. // 单行注释
2. /* 多行注释 */
数据类型
1. 原始数据类型（基本数据类型）
  1. number：数字，整数 / 小数 / NaN
  2. string：字符串， ‘a’, “abc”, ‘abc’
  3. boolean：true 和 false
  4. null：一个对象为空的占位符
    - 注意：typeof(null) == object
  5. undefined：未定义。如果一个变量没有初始化值，就默认赋值为 undefined
2. 引用数据类型（对象）
变量：小块存储数据的内存空间
- java 语言是强类型语言，而 Javascript 是弱类型语言。
  - 强类型∶在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  - 弱类型∶在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
- 语法︰var变量名=初始化值;
运算符
- 基本同 java
- == 比较规则：
  - 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
  - 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
  - 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
  - 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
  在比较时，该运算符还遵守下列规则：
  - 值 null 和 undefined 相等。
  - 在检查相等性时，不能把 null 和 undefined 转换成其他值。
  - 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
  - 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
- 示例：
```
null == undefined 	true
"NaN" == NaN 	false
5 == NaN 	false
NaN == NaN 	false
NaN != NaN 	true
false == 0 	true
true == 1 	true
true == 2 	false
undefined == 0 	false
null == 0 	false
"5" == 5 	true
```
- 全等号 === 和非全等号 !==
  - 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。
    
    全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。
```
var sNum = "66";
var iNum = 66;
alert(sNum == iNum);	//输出 "true"
alert(sNum === iNum);	//输出 "false"
```
- 比较运算符：
  - 字符串比较按照字典序比较
  - 如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。
```
2 < 12 	true
2 < "12" 	true
2 < "Bill" 	false
2 > "Bill" 	false
2 == "Bill" 	false
"2" < "12" 	false
"2" > "12" 	true
"2" == "12" 	false
```
- 转 boolean 规则
```
Undefined 	false
Null 		false
Boolean 	结果等于输入的参数（不转换）
Number 		如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。
String 		如果参数为空字符串，则结果为 false；否则为 true。
Object 		true
```
流程控制
- switch：可以接受任意类型变量
- 其他和java一样

特殊语法

一行只有一条语句时，行末分号可以省略（不建议使用）
定义变量可以用 var 关键字，也可以不用
- 用：定义的是局部变量
- 不用：定义的是全局变量（不建议使用）

基本对象

Function

创建
1. var fun = new Function("形参列表", "方法体"); 不用
2. function 方法名(形参列表) { 方法体 }
3. var fun = function(形参列表) { 方法体 }
属性：
- length：形参的个数

特点

方法定义时，形参类型名可以不写，返回值类型不写

方法是一个对象，定义名称相同的方法时，后一个方法会覆盖前一个方法

function fun1(a, b) {    alert(a + b);}function fun1(a, b) {    alert(a - b);}fun1(3, 4);	// -1

方法调用只与方法名有关，参数列表可以不匹配

function fun4(a, b) {    document.write(a + " " + b + "<br>");}fun4(3);	// 3 undefinedfun4(3, 4); // 3 4 fun4(3, 4, 5);	// 3 4

方法中有一个 arguments 对象，是一个数组，储存了所有传进来的参数

// 求任意个数的和function add() {    var sum = 0;    for (var i = 0; i < arguments.length; i++) {        sum += arguments[i];    }    return sum;}

Array

创建
1. var arr = new Array(元素列表);
2. var arr = new Array(元素列表);
3. var arr = [元素列表];
  - 可跨行，但不要在最后一个元素后加逗号
  - 执行效率更高
方法
- join(String type) ：将数组中元素按照传入的字符串作为分隔符，拼接成字符串，默认是一个逗号
- push() ：向数组尾部加入一个元素，并返回新的长度
- 参考手册
属性
- length() 数组的长度
特点
1. 数组中元素类型可变
2. 数组长度可变

Date

创建
- var date = new Date()
方法
- toLocaleString() ：根据本地时间格式，把 Date 对象转换为字符串。
- getTime()：返回 1970 年 1 月 1 日至今的毫秒数。
- 参考手册

Math

创建
- 不用创建，Math.方法() 直接调用
方法
1. Math.random()：产生 [0, 1) 之间的随机数
2. Math.cell() ：上取整
3. Math.floor()：下取整
4. Math.round()：四舍五入
5. 参考手册

RegExp

正则表达式

在这里插入图片描述

参考手册
对象
1. 创建
  1. var reg = new RegExp("正则表达式") 注意：字符串中，\\ 才是一个 \
  2. var reg = /正则表达式/
  3. 建议：
    - 正则表达式以 ^ 开始， $ 结尾。如： ^正则表达式$
    - 一般用第二种方式创建正则表达式
2. 方法
  1. reg.test(string s) ：验证 s 是否符合正则表达式，返回 Boolean

Global

特点：全局对象，其中封装的方法不需要对象名就可以直接调用，即 方法名()
方法：
1. decodeURI() 解码 URI。
  decodeURIComponent() 解码 URI 组件。编码的字符更多
2. encodeURI() 对 URI 进行编码。
  encodeURIComponent() 对 URI 组件进行编码。编码的字符更多
3. parseInt()：将字符串转为数字
  - 逐一判断每个字符是否是数字，直到不是数字为止，将前面是数字的部分返回
  - 如果不能转成数字，返回 NaN
4. isNaN() ：判读是否是 NaN
  - 注意：因为 NaN == NaN 会返回 false
5. eval(string s)：将字符串解析成 js 代码来执行
```
var js = "alert(123);";
eval(js);
```
6. 参考手册

DOM

概念：
- Document object Model 文档对象模型。将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行 CRUD 的动态操作
W3C DOM标准分为 3 个部分
- 核心DOM -针对任何结构化文档的标准模型
  - Document :文档对象
  - Element :元素对象
  - Attribute :属性对象
  - Text :文本对象
  - comment:注释对象
  - Node :节点对象，其他5个的父对象
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
功能：控制html文档的内容

Document

创建：
- document.
方法：
1. 获取 Element 对象：
  - document.getElementById(String id) ：通过元素 id 获取元素对象，id一般唯一
  - getElementsByTagName()：根据元秦名称获取元秦对象们。返回值是一个数组
  - getElementsByclassName()：根据class属性值获取元秦对象们。返回值是一个数组
  - getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他 DOM 对象：
  - createAttribute(name)
  - createComment()
  - createElement()
  - createTextNode()
3. XML DOM 参考手册
4. HTML DOM 参考手册

Element

修改属性值
1. 明确获取的对象 (by id)
2. 查看API文档，找其中有哪些属性值可以设置

修改标签体内容

innerHTML

<h1 id="title"> 悔创阿里杰克马 </h1>var title = document.getElementById("title");alert("change title");title.innerHTML = "不识妻美刘强东";

修改属性

<a> 点我 </a><script>    var btn_del = document.getElementById("btn_del");    btn_del.onclick = function () {        var ele_a = document.getElementsByTagName("a")[0];        ele_a.removeAttribute("href");    }</script>

Node

特点：所有 DOM 对象都可以被认为是一个节点
方法：
- CURD DOM树：
  - appendChild() 向节点的子节点列表的结尾添加新的子节点。
  - removeChild() 删除（并返回）当前节点的指定子节点。
  - replaceChild() 用新节点替换一个子节点。

XML DOM 参考手册

HTML DOM

标签体的设置和获取: innerHTML
使用html元秦对象的属性

控制元秦样式

使用元素的style属性来设置

div1.style.border = "1px solid red";div1.style.width = "200px";

提前定义好类选择器，通过设置元素的 className 设置 class 属性值

.d1 {    border: 1px solid red;    width: 100px;    height: 100px;}div2.className = "d1";

事件

事件：一个操作：如点击，鼠标悬浮等
事件源：组件如：按钮，输入框等
监听：代码
注册监听：将事件，事件源，监听器绑定，事件源上发生对应事件后，触发代码执行
功能：某些组件被执行了某个操作后，触发了一段代码的执行

如何绑定事件：

直接在 html 标签上指定事件属性，属性值就是 js 代码

<img id="light" src="imgs/light_off.png" onclick="alert('单击')"/>

通过 js 获取对象，指定事件属性，绑定一个函数

function fun2() {	alert("click");}var light2 = document.getElementById("light2");light2.onclick = fun2;	// 函数没有括号！

事件分类
1. 鼠标事件：代码触发时会传入一个参数，可以获取到对应属性值
2. 键盘事件
3. 加载事件： onload() ：加载完成后再获取对象，保证所有对象能够被正常获取到
4. 焦点事件
  1. 失去焦点：用于表单正则校验
5. 选择和改变
  1. onchange() ：域的内容被改变
  2. onselect()：文本被选中
6. 表单事件
  1. onsubmit() ：提交按钮被点击方法返回 false时则阻止表单提交
  2. onreset()：重置按钮被点击
参考手册

BOM

Browser Object Model 浏览器对象模型
- 将浏览器各个组份封装成对象
组成：
- Window: 窗口对象
- Navigator ：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象

window

属性：
- 获取其他 BOM 属性
  - history
  - Navigator
  - Screen
  - location
- 获取 DOM 属性
  - document.getElementById
方法：
1. 与弹出窗口有关：
  - alert() 显示带有一段消息和一个确认按钮的警告框。
  - confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    - 用户点击确定，则方法返回 true
    - 用户点击取消，则方法返回 false
  - prompt() 显示可提示用户输入的对话框。
    - 返回用户输入的值
2. 与打开关闭有关
  - open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
    - 返回一个新窗口的 window 对象
  - close() 关闭调用者浏览器窗口。
3. 与定时器有关
  - setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    - 参数一： js 代码段或函数方法
    - 参数二：时间毫秒值
    - 返回一个对象
  - clearInterval() 取消由 setInterval() 设置的 timeout。
    - 可以传入一个对象，指定要取消的周期定时器
  - setTimeout() 在指定的毫秒数后调用函数或计算表达式。
    - 参数一： js 代码段或函数方法
    - 参数二：时间毫秒值
    - 返回一个对象
  - clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    - 可以传入一个对象，指定要取消的定时器
特点：
- 可以直接用方法名调用方法
- 可以用 window.方法名() 调用方法
参考手册

Location

地址栏对象

创建
1. window.location
2. location
方法：
- reload() 刷新
属性
- href

History

创建
- history
方法
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
  - 参数：
    - 正数：前进几个历史页面
    - 负数：后退几个历史页面
属性
- length 返回当前窗口历史列表中的 URL 数量。
[参考手册](