javascript编程全解下载 javascript编程精解

转载

墨香四溢 2023-06-08 17:18:35

文章标签 javascript编程全解下载 js javascript java 后端 文章分类 JavaScript 前端开发

文章目录

一、概念
二、ES（ECMAScript）

1. 与 HTML 结合方式
2. 注释
3. 数据类型
4. 变量
5. 运算符
6. 流程控制语句

三、ES 基本对象

1. Function：函数（方法）对象
2. Array：数组对象
3. Date：日期对象
4. Math：数学对象
5. RegExp：正则表达式对象
6. Global：全局对象
7.原始数据类型包装类对象

四、BOM

1. 概念
2. 组成
3. Window：窗口对象
4. Location：地址栏对象
5. History：历史记录对象

五、Dom

1. 概念
2. 核心DOM

1. Document：文档对象
2. Element：元素对象
3. Node：节点对象

3. HTML DOM

1. innerHTML
2. 样式控制

4. 事件监听机制

1. 概念
2. 常见的事件

一、概念

JavaScript = ECMAScript + (BOM + DOM)
JavaScript 是一门客户端脚本语言（不需要编译，可以直接被浏览器解析引擎解析），ECMAScript 是客户端脚本语言的标准（统一编码方式，所有客户端脚本语言通用），BOM 和 DOM 是 JavaScript 特有的对象模型。

二、ES（ECMAScript）

1. 与 HTML 结合方式

内部 JS：定义 script 标签，标签体内容就是 JS 代码（可以定义多个，可以在 HTML 的任意位置定义，但定义的未知会影响执行顺序）
外部 JS：定义 script 标签，通过 src 属性引入外部的 JS 文件

2. 注释

单行注释：//注释内容
多行注释：/* 注释内容 */

3. 数据类型

原始数据类型

number：数字。整数/小数/NaN（Not a Number，不是数字的数字类型）
string：字符串（在 JS 中没有单独的字符类型，单双引都是字符串）
boolean：布尔类型，true/false
null：一个对象为空的占位符（使用 typeof() 运算符会将其识别为对象类型【bug】）
undefined：未定义（如果一个变量没有给初始值，则会默认赋值为 undefined）

引用数据类型：对象类型

4. 变量

Java 是强类型语言，JS 是弱类型语言

强类型：在开辟变量存储空间时，定义了空间存储的数据类型，只能存储固定的数据类型
弱类型：在开辟变量存储空间时，不定义空间存储的数据类型，可以存放任意类型的数据

语法

//var 声明的变量为全局变量
var 变量名 = 初始值;
//let 声明的变量为局部变量，只在 let 命令所在的代码块内有效
let 变量名 = 初始值;
//const 声明的变量为常量，不能被修改（类似 Java 中的 final 关键字）
const 变量名 = 初始值;

5. 运算符

一元运算符：++，–，+（正号），-（负号），…
算数运算符：+，-，*，/，%，…
赋值运算符：=，+=，-=，…
比较运算符：>，<，>=，<=，==，===
逻辑运算符：&&，||，!
三元运算符：? : 表达式

在 JS 中，如果运算数不是运算符所要求的数据类型，则 JS 引擎会自动将运算数进行类型转换

其他类型转 number：

string：按照字面值转，如果字面值不是纯数字，则转换为 NaN
boolean：true 转 1，false 转 0

示例：

//等价于 var a = 123;
var a = +"123";
//等价于 var a = NaN;
var a = +"123abc";
//等价于 var a = 0
var a = +false;

其他类型转 boolean

number：0 或 NaN 为 false，其他为 true
string：除了空字符串（""），其他都为 true
null && undefined：都为 false
对象：都为 true

示例：

//等价于 var flag = false;
var flag = !"abc";

//等价于 if(obj!=null && obj.length>0){} 
if(obj){}
//var 定义的变量为全局变量，在任意地方都可以使用，即使定义在使用语句之后
var obj = "abc";

JS 中的比较方式

类型相同：直接比较

string：按字典顺序比较

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，会先进行数据类型的判断，如果类型不同，直接返回 false

6. 流程控制语句

if…else…
switch（JS中的 swith 可以接收任意原始数据类型）
while
do…while
for

三、ES 基本对象

1. Function：函数（方法）对象

创建

1.var 方法名 = new Function(形参列表，方法体);
2.function 方法名（形参列表）{
    方法体
}
3.var 方法名 = function(形参列表){
    方法体
}

属性

length：形参个数

调用方法

方法名(实参列表)

特点

方法定义时，不用写参数类型及返回值
方法时一个对象，如果定义同名方法，会覆盖之前的方法
在 JS 中，方法的调用只与方法名有关，与参数列表无关（即可以传递任意个数的参数，多的参数无效，未传值的参数类型为 undefined）
在方法声明中有一个隐藏的内置对象 arguments（数组对象），封装所有实际参数

示例：

//求任意个数数字的和
function sum(){
    var sum = 0;
    //使用内置对象 arguments 获取传入的实际参数
    for(var i=0; i<arguments.length; i++){
        sum+=arguments[i];
    }
    return sum;
}
//调用 sum 方法，结果 sum = 10
var sum = sum(1,2,3,4);

2. Array：数组对象

创建

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

属性

length：数组的长度

方法

concat()：数组连接，并返回结果（不改变原数组）
join(参数)：将数组中元素按指定的参数分隔符（默认为 “,” ）拼接字符串
pop()：删除并返回数组的最后一个元素
push()：向数组的末尾添加一个或多个元素，并返回新的长度
reverse()：数组逆序
shift()：删除并返回数组的第一个元素
sort()：数组排序
unshift()：向数组的开头添加一个或多个元素，并返回新的长度
toString()：将数组转换为字符串，并返回结果

特点

数组数据类型可变
数组长度可变

3. Date：日期对象

创建

var 对象名 = new Date();

方法

toLocalString()：返回当前 Date 对象对应的本地时间字符串格式
getTime()：返回当前日期对象描述的时间与 1970 年 1 月 1 日的毫秒值差（用于时间戳）

4. Math：数学对象

创建

//Math 对象不用创建，直接使用（类似于工具类）
Math.方法名();

方法

random()：返回 [0,1) 之间的随机数
round()：将数四舍五入为最接近的整数
floor()：向下取整
ceil()：向上取整

示例：

//获取 [1,100] 之间的随机整数
var num = Math.floor((Math.random()*100))+1;

5. RegExp：正则表达式对象

创建

1.var 对象名 = new RegExp("正则表达式");
2.var 对象名 = /^正则表达式$/;

方法

test()：验证指定的字符串是否符合正则定义的规则

6. Global：全局对象

特点

Global 中封装的方法不需要对象就能直接调用（方法名(); ）

方法

parseInt()：字符串转数字
inNaN()：判断变量值是否为 NaN
eval（)：将 JS 字符串解析为脚本执行
encodeURI()：URL 编码
decodeURI()：URL 解码
encodeURIComponent()：URL 编码（编码的字符更多）
decodeURIComponent()：URL 解码

URL 编码（传输协议 (如http) 下发送中文数据需要转码）

如在 GBK 编码中，一个中文字符占用 2 个字节（16 位二进制），URL 编码会将该字符转换为十六进制（4 位二进制转换为 1 位十六进制），并加上 “%”
示例：
"中国"在 UTF-8 编码（一个中文字符占用 3 个字节）下对应的 URL 编码为 %E4%B8%AD%E5%9B%BD

7.原始数据类型包装类对象

Number
String
Boolean

四、BOM

1. 概念

Browser Object Model，浏览器对象模型（将浏览器的各个部分封装为对象）

2. 组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

3. Window：窗口对象

方法

与弹出框有关的方法（方法参数为提示消息）

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的提示框

点击确认按钮，返回 true
点击取消按钮，返回 false

prompt()：显示课提示用户输入的对话框

返回值为用户输入的内容

打开关闭窗口的方法

open()：打开一个新的窗口（可通过传递参数打开特定的窗口，如：open(“https://www.baidu.com”) ）

返回一个新的 Window 对象

close()：关闭窗口

与定时器有关的窗口

setTimeOut()：一次性定时器
setInterval()：循环定时器

参数1：JS 代码或 Function 对象
参数2：指定循环间隔毫秒值
返回值：唯一标识（用于取消计时器的参数）

clearTimeOut()：取消一次性计时器
clearInterval()：取消循环计时器

示例：

//三张图片的轮播图
//script 标签定义在图片标签之后，先加载图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img id="img" src="图片1.jpg" alt="未找到对应图片"/>
<script>
    let num = 1;
    function fun() {
        num++;
        if(num>3){
            num =1;
        }
        //通过规范图片命名及字符串拼接的方式实现 src 属性值的切换
        //将三张图片分别命名为 图片1，图片2，图片3
        let img = document.getElementById("img");
        img.src = "图片" + num + ".jpg";
    }

    setInterval(fun, 3000);
</script>
</body>
</html>

属性

获取其他 BOM 对象

History
Location
Navigator
Screen

获取 DOM 对象

Document

注意：在 script 标签中，直接使用的上述对象其实都是通过 Window 对象获取的，只是 window 引用可以省略

特点

Window 对象不需要创建可以直接使用 window（如：window.方法名(); ）
window 引用可以省略（如：方法名(); ）

4. Location：地址栏对象

创建

通过 Window 对象获取

方法

reload()：刷新当前页面

属性

href：设置或返回完整的 URL

示例：

//5 秒倒计时结束后跳转到百度页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
<p>
    <span id="time">5</span>秒之后，自动跳转到百度...
</p>
<script>
    //设置与 span 标签中相同的初始值
    let num = 5;
    function fun() {
        num--;
        if (num <= 0) {
            //通过 Location 对象的 href 属性实现跳转
            location.href = "https://www.baidu.com";
        }
        let time = document.getElementById("time");
        time.innerHTML = num;
    }

    setInterval(fun, 1000);
</script>
</body>
</html>

5. History：历史记录对象

创建

通过 Window 对象获取

方法

back()：加载记录列表中的上一个 URL（后退一个页面）
forward()：加载历史记录列表中的下一个 URL（前进一个页面）
go()：加载历史记录列表中的某个具体页面

参数为正：前进几个页面
参数为负：后退几个页面

属性

length：返回当前窗口历史记录列表中的 URL 个数（历史记录个数）

五、Dom

1. 概念

Document Object Model，文档对象模型
将标记语言文档的各个组成部分，封装成对象，可以使用这些对象对标记语言文档进行 CRUD 操作
W3C（万维网联盟）DOM标准被分为 3 个不同的部分：
核心DOM（ XML与HTML通用）
XML DOM
HTML DOM

2. 核心DOM

Attribute：属性对象
Text：文本对象
Comment：注释对象
Document：文档对象
Element：元素对象
Node：节点对象

1. Document：文档对象

创建

通过 BOM 的 Window 对象获取

方法

getElementById()：根据 id 属性获取元素
getElementsByTagName()：根据元素名获取所有相关元素
getElementsByClassName()：通过 class 属性获取所有相关元素
getElementsByName()：通过 name 属性获取所有相关元素
创建其他 DOM 对象相关方法

createAttribute()
createElement()
createComment()
createTextNode()

2. Element：元素对象

创建

通过 Document 对象的方法创建

方法

removeAttribute()：删除属性
setAttribute()：设置属性

第一个参数：属性名
第二个参数：属性值

3. Node：节点对象

特点

所有 DOM 对象都可以被认为是一个节点（对象）

方法

appendChild()：向节点的子节点列表的结尾添加新的节点
removeChild()：删除并返回当前节点的指定子节点
replaceChild()：用新节点替换一个子节点

属性

parentNode：返回节点的父节点

javascript编程全解下载 javascript编程精解_javascript

3. HTML DOM

1. innerHTML

可通过该属性获取和设置标签体的内容

示例：

<div>div</div>
<script>
    var div = document.getElementByTagName("div");
    //获取标签体内容
    var innerHTML = div.innerHTML;
    //替换标签体内容
    div.innerHTML = "<input type="text">";
    //在标签体中追加内容
    div.innerHTML += "<input type="text">"
</script>

2. 样式控制

通过元素的 style 属性设置
示例：

div.style.border = "1px solid red";
div.style.width = "200px";
div.style.fontsize = "20px";

提前在 style 标签中通过类选择器定义好样式，使用元素的 className 属性来设置其 class 属性值
示例：

<style>
    .d1{
        border:1px solid red;
        width:200px;
        font-size:20px;
    }
</style>
<script>
    div.className = "d1";
</script>

4. 事件监听机制

1. 概念

某些组件被执行了某些操作后，出发了某些代码的执行
事件：某些操作。如：单击、双击、移动鼠标，按下键盘按键
事件源：组件。如：按钮、文本输入框
监听器：代码
注册监听：将事件、事件源、监听器绑定在一起

2. 常见的事件

点击事件

onclick：单击事件
ondbclick：双击事件

焦点事件

onfocus：元素获得焦点
onblur：元素失去焦点

加载事件

onload：一张页面或一副图像完成加载

鼠标事件

onmousedown：鼠标按键被按下
onmouseup：鼠标按键被松开
onmousemove：鼠标在某元素上移动
onmouseover：鼠标移到某元素上
onmouseout：鼠标从某元素上移开

键盘事件

onkeydown：键盘某个按键被按下
onkeyup：键盘某个按键被松开
onkeypress：键盘某个按键被按下并松开

选择与改变

onchange：域的内容被改变
onselect：文本被选中

表单事件

onsubmit：提交按钮被点击
onreset：重置按钮被点击

注意：如果给事件绑定的不是匿名方法，则不用不用加括号（实际绑定的是 Function 对象），加括号会失效

示例：

function checkUsername(){}
username.onblur = checkUsername;  //√
username.onblur = checkUsername();  //×

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：ios智能家居开发代码 apple 智能家居全套方案

下一篇：javascript小项目源码 javascript 项目

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javascript编程全解下载 javascript编程精解

javascript编程全解下载 javascript编程精解

文章目录

一、概念

二、ES（ECMAScript）

1. 与 HTML 结合方式

2. 注释

3. 数据类型

4. 变量

5. 运算符

6. 流程控制语句

三、ES 基本对象

1. Function：函数（方法）对象

2. Array：数组对象

3. Date：日期对象

4. Math：数学对象

5. RegExp：正则表达式对象

6. Global：全局对象

7.原始数据类型包装类对象

四、BOM

1. 概念

2. 组成

3. Window：窗口对象

4. Location：地址栏对象

5. History：历史记录对象

五、Dom

1. 概念

2. 核心DOM

1. Document：文档对象

2. Element：元素对象

3. Node：节点对象

3. HTML DOM

1. innerHTML

2. 样式控制

4. 事件监听机制

1. 概念

2. 常见的事件

51CTO博客