JavaScript基础知识梳理-CSDN博客

本文链接：https://blog.csdn.net/qq_57598287/article/details/128040197

1.概念

一门客户端脚本语言
- 运行在客户端浏览器中，每一个浏览器都有JavaScript脚本的解析引擎
- 脚本语言：不与要编译，直接就可以被浏览器解析执行
功能
- 可以用来增强用户和html页面的交互，可以用来控制html元素，增加动态效果

2.ECMAScript：客户端脚本语言的标准

基本语法
- 与html结合
  - 定义<script>,标签体内容就是js代码
  - 定义<script>,通过src属性引入外部js文件
  - <script>可以定义在html页面的任何地方，但定义位置会影响执行的顺序
  - <script>可以定义多个

3.数据类型

JavaScript 原始值

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型：

string
number ：数字、NaN
boolean
null：占位
undefined

原始值是一成不变的(它们是硬编码的，因此不能改变)。

假设 x = 3.14，能够改变 x 的值。但是您无法改变 3.14 的值。

关键词var:用是局部变量，不用是全局变量
字符串
数组
- 可以包含任意数据类型
- 数组大小可变
- push压入尾部，pop弹出尾部的一个元素(类似于栈)
- unshift压入头部，shift弹出头部
- concat()返回一个新数组，不会改变原数组

对象

var 对象名 = {
    属性名：属性值,
    属性名：属性值，
    属性名：属性值
}//使用逗号隔开，最后一个键值对不用加括号，键是字符串

使用一个不存在的对象属性不会报错，undefined

可以动态的删减属性

delete 对象名.属性名 //删除属性
对象名.属性名=值 //添加属性

流程控制

if，while，for，switch

for/in 遍历对象键,for/of遍历对象值

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

Map/Set

var map = new Map([key,value],[key,value],[key,value]);
map.get("key") //取值 
map.set("key",value) //存值
var set = new Set([value,value,value]);
set.has(value) //判断是否包含

Function对象

创建方式：

//参数类型不用写
function 方法名(形式参数列表){
    //方法体
    //不需要定义返回值类型
}

var 方法名 = function(形式参数列表){
    //方法体
}

方法是一个对象。如果定义一个名称相同的方法会覆盖。

方法的调用只与方法的名称有关与参数列表无关。

function fun(a,b){
    alert(a+b);
}
fun(1) //此时b为undefind
fun(1,2,3,4) //方法声明中有一个隐藏的内置对象(数组)，arguments,封装所有的实际参数，3，4被其接收。
//一个使用内置对象的示例
function add(){
    var sum=0;
    for(var i=0;i<arguments.length;i++){
        sum += arguments[i];
    }
    return sum;
}

Date日期对象

var date = new Date(); //创建一个当前浏览器的时区并将日期显示为全文本的字符串
//Fri Oct 23 2020 11:12:25 GMT+0800 (中国标准时间)

Global对象
- encodeURL()
  - url编码:将对应的字符串编码成页面所指定格式的16进制码
  - "你好吗？"=%E4%BD%A0%E5%A5%BD%E5%90%97%EF%BC%9F
- dedecodeURL()
  - url解码
- encodeURLComponent()
  - 较上面的编\解的字符更多
- deencodeURLComponent()
- parseInt()
  - 解析一个字符串转换为数字
- isNaN ()
  - 检查是否不是数字
- eval()
  - 将字符串解析为为脚本代码执行

4.DOM

概念：Document Object Model 文档对象模型，将标记语言文档的各个组成部分封装为对象，可以使用这些对象对文档进行增删改查的动态操作。
- DOM树，对应HTML文档的结构
- 包括：Core DOM - 所有文档类型的标准模型
  XML DOM - XML 文档的标准模型
  HTML DOM - HTML 文档的标准模型
document文档对象
- 获取Element对象：
  - getElementById()：查找具有指定的唯一 ID 的元素
  - getElementsByTagName()：返回所有具有指定标签名称的元素节点，返回值是一个数组
  - getElementsByNam()：返回所有具有指定Name属性的元素节点，返回值是一个数组
  - getElementsByClassName()：返回所有具有指定Class属性的元素节点，返回值是一个数组
  - 代码：获取页面标签对象 Element
```
document.getElementById("test") //通过元素(标签)的id值获取指定的标		签
```
- 创建其他DOM对象：
  - createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象
  - createComment() 创建注释节点
  - createElement() 创建元素节点
```
var table = document.createElement("table")
```
  - createTextNode() 创建文本节点
- 操作标签对象
  - 修改属性值
  - 修改标签体内容
```
anchorObject.innerHTML=text
```

Element元素对象：

获取/创建方法：通过documen来获取和创建

方法：

setAttribute()

elementNode.setAttribute(name,value) //name	必需。规定要设置的属性名 value	必需。规定要设置的属性值。

removeAttribute()

elementNode.removeAttribute(name) //name	必需。规定要删除的属性名

Node节点对象：
- 特点：其他所有DOM对象都可以认为是一个节点
- 方法：增删改查DOM树：
  - appendChild() 向节点的子节点列表的结尾添加新的子节点
  - removeChild() 删除(并返回)当前节点的指定子节点
```
var div1 = getElementById("div1");
var div2 = getElementById("div2");
div1.removeChild("div2");
```
  - replaceChild() 用新节点替换一个子节点
- 属性：
  - parentNode 返回节点的父节点
  - childNodes 返回节点到子节点的节点列表
```
var x=nodeObject.childNodes;

for (i=0;i<x.length;i++)
  {
	//操作
  }
```

HTML DOM

标签体的设置和获取：innerHTML

/*修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
如需修改 HTML 元素的内容，使用此语法：*/
document.getElementById(id).innerHTML = new text

使用HTML元素的对象和属性：

document.getElementById(id).attribute = new value //attribute属性，value值
<!--本例修改了 <img> 元素的 src 属性的值-->
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

设置样式:

方法一：

document.getElementById(id).style.property = new style

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

方法二：

document.getElementById(id).className="name"

.name{
    //css样式控制
}

5.事件

功能：HTML 事件可以是浏览器或用户做的某些事情：
- 下面是 HTML 事件的一些例子：
  - HTML 网页完成加载
  - HTML 输入字段被修改
  - HTML 按钮被点击
  通常，当事件发生时，用户会希望做某件事，JavaScript 允许在事件被侦测到时执行代码。
- 通过 JavaScript 代码，HTML 允许向 HTML 元素添加事件处理程序。
事件源：组件，如：按钮，文本输入框... ...

事件绑定/注册事件:

直接在html页面上，指定事件的属性(操作),属性值就是js代码

<button onclick="displayDate()">时间是？</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
//代码耦合度太高

通过js获取元素对象，指定事件属性，设置一个函数

<img src="#" id=image>


var object = getElementById("image");
object.onclik=fun;
function fun(){
    alert("点了一下！")
}

常见的事件：
- 点击事件：
  - onclick 当用户点击某个对象时调用的事件句柄
  - ondblclick 当用户双击某个对象时调用的事件句柄
- 焦点事件：
  - onblur 元素失去焦点
    - 一般用于表单校验
  - onfocus 元素获得焦点
- 加载事件：
  - onload 一张页面或一幅图像完成加载
    - 可以与window绑定
- 鼠标事件：
  - onmousedown 鼠标按钮被按下
    - 将会传递一个参数 ,定义方法时定义一个形参，指示哪一个鼠标按键被点击
  - ,onmouseup 鼠标按键被松开
  - onmousemove 鼠标被移动
  - onmouseout 鼠标从某元素移开
  - onmouseover 鼠标移到某元素之上
- 键盘事件：
  - onkeydown 某个键盘按键被按下
  - onkeypress 某个键盘按键被按下并松开
  - onkeyup 某个键盘按键被松开
- 选中和改变：
  - onchange 域的内容被改变
  - onselect 文本被选中
- 表单事件
  - onsubmit 确认按钮被点击
    - 只支持表单form，返回true则被提交，要注意此处是否需要添加return，事件注册的方法一需要return，方法二不需要。
  - onreset 重置按钮被点击

6.BOMze

概念：Browser object model 浏览器对象模型

将浏览器各个组成部分封装成对象

1.window ：浏览器窗口对象

特点：window不需要创建，可以直接使用
window.方法名()，可以直接省略window

与弹出框有关的方法：

alert()		//显示带有一段消息和一个确认按钮的警告框
confirm()		//显示带有一段消息及确认和取消按钮的警告框，有boolean类型的返回值
prompt()		//显示提示用户输入的对话框，有返回值

与开发关闭有关的窗口：

open()		//打开一个新窗口
close()		//关闭已经打开的窗口，谁调用关闭谁

与定时器有关的方法：

setTimeout(code,millisec)		//code：要调用的函数后要执行的JavaScript代码串；millise：在执行代码前需等待的毫秒数，返回值为唯一标识，用于取消计时。
clearTimeout(id_of_settimeout)		//id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
setInterval(code,millisec)		//code：要调用的函数后要执行的JavaScript代码串；millise：在执行代码前需等待的毫秒数。setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()		//取消由 setInterval()设置的 timeout。

获取其他BOM对象

window.history
history		//可以直接省略window

获取DOM对象
```
document
```

2.location ：地址栏对象
- 属性：
  - href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
```
location.href //得到当前地址栏的值，或者设置当前地址栏的值
```
  - reload() 方法用于重新加载当前文档
  location.reload(force) //参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。
history：历史记录对象
screen：显示器屏幕对象
Navigator：浏览器对象