JavaScript详解（JS总结）

最新推荐文章于 2023-01-17 16:51:19 发布
最新推荐文章于 2023-01-17 16:51:19 发布
阅读量216 收藏 2
点赞数
分类专栏： 总结 文章标签： js javascript java 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45702990/article/details/108481880
版权

文章目录

一、概念

JavaScript = ECMAScript + (BOM + DOM)

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

二、ES（ECMAScript）

1. 与 HTML 结合方式

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

2. 注释

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

3. 数据类型

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

4. 变量

  • Java 是强类型语言，JS 是弱类型语言
    • 强类型：在开辟变量存储空间时，定义了空间存储的数据类型，只能存储固定的数据类型
    • 弱类型：在开辟变量存储空间时，不定义空间存储的数据类型，可以存放任意类型的数据
  • 语法
//var 声明的变量为全局变量
var 变量名 = 初始值;
//let 声明的变量为局部变量，只在 let 命令所在的代码块内有效
let 变量名 = 初始值;
//const 声明的变量为常量，不能被修改（类似 Java 中的 final 关键字）
const 变量名 = 初始值;

5. 运算符

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

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

    1. 其他类型转 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;

    2. 其他类型转 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";

  2. JS 中的比较方式

    1. 类型相同：直接比较
      • string：按字典顺序比较
    2. 类型不同：先进行类型转换，再比较
      • ===：全等于。在比较之前，会先进行数据类型的判断，如果类型不同，直接返回 false

6. 流程控制语句

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

三、ES 基本对象

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

  1. 创建
1.var 方法名 = new Function(形参列表，方法体);
2.function 方法名（形参列表）{
    方法体
}
3.var 方法名 = function(形参列表){
    方法体
}
  1. 属性
length：形参个数
  1. 调用方法
方法名(实参列表)

  1. 特点

    1. 方法定义时，不用写参数类型及返回值
    2. 方法时一个对象，如果定义同名方法，会覆盖之前的方法
    3. 在 JS 中，方法的调用只与方法名有关，与参数列表无关（即可以传递任意个数的参数，多的参数无效，未传值的参数类型为 undefined）
    4. 在方法声明中有一个隐藏的内置对象 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. 创建
1.var 数组名 = new Array(元素列表);
2.var 数组名 = new Array(数组长度);
3.var 数组名 = [元素列表];
  1. 属性
length：数组的长度
  1. 方法
    • concat()：数组连接，并返回结果（不改变原数组）
    • join(参数)：将数组中元素按指定的参数分隔符（默认为 “,” ）拼接字符串
    • pop()：删除并返回数组的最后一个元素
    • push()：向数组的末尾添加一个或多个元素，并返回新的长度
    • reverse()：数组逆序
    • shift()：删除并返回数组的第一个元素
    • sort()：数组排序
    • unshift()：向数组的开头添加一个或多个元素，并返回新的长度
    • toString()：将数组转换为字符串，并返回结果
  2. 特点
    1. 数组数据类型可变
    2. 数组长度可变

3. Date：日期对象

  1. 创建
var 对象名 = new Date();
  1. 方法
    • toLocalString()：返回当前 Date 对象对应的本地时间字符串格式
    • getTime()：返回当前日期对象描述的时间与 1970 年 1 月 1 日的毫秒值差（用于时间戳）

4. Math：数学对象

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

  1. 方法

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

    示例：

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

5. RegExp：正则表达式对象

  1. 创建
1.var 对象名 = new RegExp("正则表达式");
2.var 对象名 = /^正则表达式$/;
  1. 方法
    • test()：验证指定的字符串是否符合正则定义的规则

6. Global：全局对象

  1. 特点

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

  2. 方法

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

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

    • 如在 GBK 编码中，一个中文字符占用 2 个字节（16 位二进制），URL 编码会将该字符转换为十六进制（4 位二进制转换为 1 位十六进制），并加上 “%”

      示例：

      ​ "中国"在 UTF-8 编码（一个中文字符占用 3 个字节）下对应的 URL 编码为 %E4%B8%AD%E5%9B%BD

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

  1. Number
  2. String
  3. Boolean

四、BOM

1. 概念

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

2. 组成

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

3. Window：窗口对象

  1. 方法

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

      • alert()：显示带有一段消息和一个确认按钮的警告框
      • confirm()：显示带有一段消息以及确认按钮和取消按钮的提示框
        • 点击确认按钮，返回 true
        • 点击取消按钮，返回 false
      • prompt()：显示课提示用户输入的对话框
        • 返回值为用户输入的内容

    2. 打开关闭窗口的方法

      • open()：打开一个新的窗口（可通过传递参数打开特定的窗口，如：open(“https://www.baidu.com”) ）
        • 返回一个新的 Window 对象
      • close()：关闭窗口

    3. 与定时器有关的窗口

      • 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>

  2. 属性

    1. 获取其他 BOM 对象

      • History

      • Location

      • Navigator

      • Screen

    2. 获取 DOM 对象

      • Document

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

  3. 特点

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

4. Location：地址栏对象

  1. 创建

    • 通过 Window 对象获取

  2. 方法

    • reload()：刷新当前页面

  3. 属性

    • 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：历史记录对象

  1. 创建
    • 通过 Window 对象获取
  2. 方法
    • back()：加载记录列表中的上一个 URL（后退一个页面）
    • forward()：加载历史记录列表中的下一个 URL（前进一个页面）
    • go()：加载历史记录列表中的某个具体页面
      • 参数为正：前进几个页面
      • 参数为负：后退几个页面
  3. 属性
    • 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：文档对象

  1. 创建

    • 通过 BOM 的 Window 对象获取

  2. 方法

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

2. Element：元素对象

  1. 创建
    • 通过 Document 对象的方法创建
  2. 方法
    • removeAttribute()：删除属性
    • setAttribute()：设置属性
      • 第一个参数：属性名
      • 第二个参数：属性值

3. Node：节点对象

  1. 特点
    • 所有 DOM 对象都可以被认为是一个节点（对象）
  2. 方法
    • appendChild()：向节点的子节点列表的结尾添加新的节点
    • removeChild()：删除并返回当前节点的指定子节点
    • replaceChild()：用新节点替换一个子节点
  3. 属性
    • parentNode：返回节点的父节点

文档与节点对应关系图示

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. 样式控制

  1. 通过元素的 style 属性设置

    示例：

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

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

    示例：

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

4. 事件监听机制

1. 概念

某些组件被执行了某些操作后，出发了某些代码的执行

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

2. 常见的事件

  1. 点击事件
    • onclick：单击事件
    • ondbclick：双击事件
  2. 焦点事件
    • onfocus：元素获得焦点
    • onblur：元素失去焦点
  3. 加载事件
    • onload：一张页面或一副图像完成加载
  4. 鼠标事件
    • onmousedown：鼠标按键被按下
    • onmouseup：鼠标按键被松开
    • onmousemove：鼠标在某元素上移动
    • onmouseover：鼠标移到某元素上
    • onmouseout：鼠标从某元素上移开
  5. 键盘事件
    • onkeydown：键盘某个按键被按下
    • onkeyup：键盘某个按键被松开
    • onkeypress：键盘某个按键被按下并松开
  6. 选择与改变
    • onchange：域的内容被改变
    • onselect：文本被选中
  7. 表单事件
    • onsubmit：提交按钮被点击
    • onreset：重置按钮被点击

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

示例：

function checkUsername(){}
username.onblur = checkUsername;  //√
username.onblur = checkUsername();  //×
qq_45702990
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript代码讲解ppt
09-24
javascript有深入了解
js详解
小屋博客
12-27 646
js this 详解
想飞的猪的博客
12-18 696
this详解  你可能遇到过这样的 JS 面试题： { var obj = { foo: function () { console.log(this) } } var bar = obj.foo obj.foo(); // 打印出的 this 是 obj bar(); // 打印出的 this 是 window }  这个原因是因为“Javascript中this永远是...
函数（上）
m0_60505343的博客
07-27 193
我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西 函数的概念 对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行 先看一段代码 // 这个是我们以前写的一段代码 for (var i = 0; i < 10; i++) { console.log(i) } ​ // 函数，这个 {} 就是那个 “盒子” function fn() { ...
js基础详解
yihuliunian的博客
08-04 142
转载自品略图书馆 JavaScript是一门编程语言，但凡是编程语言，其在基本语法上都是大同小异的。 我们学了Java，那么再学习其它语言时，学它不同于Java的地方即可，这样也能更好地记忆。 一、js中的运算符 1算术运算符 无外乎就是加减乘除，取模，自增自减这些，用法和Java中都是一样的。 但js中的运算也有和Java的不同之处; ①变量之间的运算 在js中，不同数据类型之间的变量也能运算。 100和true相加结果竟然是101，这在Java中会直接报错，因为不确定结果...
JavaScript详解（第2版）
07-22
资源名称：JavaScript详解(第2版)内容简介：　Javaｓｃｒｉｐｔ是目前最流行和最重要的Web编程语言。《Javaｓｃｒｉｐｔ详解(第2版)》从Javaｓｃｒｉｐｔ的编程结构开始，循序渐进地讲述了Javaｓｃｒｉｐｔ及相关的...
JavaScript函数详解
10-24
本文由简入深，详细介绍了javascript的函数问题，非常的详尽，非常的实用，这里推荐给大家，是篇不可多得的
JavaScript触发器详解
10-31
JavaScript触发器详解
JavaScript闭包详解
10-24
本文详细介绍了javascript闭包，十分的详尽，推荐给有需要的小伙伴参考下。
Javascript异步编程详解
02-26
Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）."异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，...
JavaScript详解
亦翼的博客
07-10 221
文章目录JavaScript简介JS的特点JS的组成HTML与JavaScript的结合方式行内脚本内部脚本外部脚本JavaScript的使用变量自动类型转换数据类型转换函数null & undefined算术运算关系运算逻辑运算控制语句常用字符串API数组初始化数组的三种方式数组的常用方法Math数学对象number对象正则表达式日期对象函数参数对象构造函数匿名函数全局函数闭包弹框输出DOM操作DOM访问DOM修改事件窗口事件 (Window Events)表单元素事件 (Form Element
注解原理
weixin_34392843的博客
05-30 70
原理： Annotation其实是一种接口。通过java的反射机制相关的API来访问Annotation信息。相关类（框架或工具中的类）根据这些信息来决定如何使用该程序元素或改变它们的行为。Java语言解释器在工作时会忽略这些Annotation，因此在JVM中这些Annotation是“不起作用”的，只能通过配套的工具才能对这些Annotation类型的信息进行访问和处理。 An...
javascript购物车实现详细代码讲解
热门推荐
小圣贤君的博客
09-27 10万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操
js基础实例代码详细
12-22 1257
js:嵌入在html中，处理数据，其实和as差不多，个人理解是html展示界面，js处理数据 嵌入在html中使用script document.write 用于像页面输出语句 document.write("hello world"); 生成普通文件和标签 document.write("hello world");
JS让图片无缝滚动的实现（JS代码讲解，非直拷型内容）
learn_2的专栏
11-16 3817
为了教学需要，整理了一下JS图片无缝滚动的代码。 以前一直均是拷贝网上的经典JS滚动代码，稍为更改即成自己的了，现重新讲解下，JS是如何让图片们动起来的！ 下面是网上源码，百度一大堆，多数是这个样，如果你是为了解决实际效果显示，请拷贝，勿需向后翻看。 图片滚动 #demo { background: #FFF; overflow:h
javascript的讲解
weixin_58276266的博客
11-05 1326
js的了解
JS基础总结篇（1）---js入门基础详细（语法，基本语句、变量、数据类型转换、流程控制）
weixin_44164982的博客
07-11 497
1、JS组成 2.第一个javascript程序 2.1 程序书写的位置 2.2 语法规则 2.3 注释 2.4 JS基本语句 2、变量 2.1 变量命名 2.2 变量的定义和赋值 2.3 变量的数据类型 2.4 运算符 2.5 变量格式转换 3、js流程控制
JavaScript 注释
笔记
01-17 261
这段代码包含了一些有用的注释，帮助阅读者了解代码的目的和工作原理。总的来说，使用注释是一种很好的编程习惯，它可以帮助我们更好地理解和维护代码。使用有意义的注释标题和解释性注释，并遵循规范的注释风格，是一个程序员的良好习惯。在这个例子中，我们给出了一个赋值语句，并且使用注释来禁用了另一个赋值语句，这样就可以避免 z 变量的定义和赋值。通过使用注释，我们可以在程序中添加描述性文字，解释代码的用途和工作原理。例如，说明变量的用途或算法的工作原理。总之，注释是一种非常有用的工具，可以帮助我们更好地理解和维护代码。
javascript箭头函数详解
最新发布
10-22
箭头函数是ES6中新增的一种函数表达式，它的语法比传统的函数表达式更加简洁，可以让代码更加易读。箭头函数总是函数表达式，不存在箭头函数声明。箭头函数是匿名函数表达式，没有用于递归或者事件绑定/解绑定的命名...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值