JavaScript 笔记汇总

JavaScript 笔记汇总

在这里插入图片描述

引入方式

  1. 内部方式

    通过 script 标签包裹 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert('hello word')</script>
</body>
</html>

  1. 外部形式

    一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js"></script>
</body>
</html>

注释和结束符

  1. 单行注释

    使用 // 注释单行代码

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title></head><body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write('hello word');</script></body></html>

  1. 多行注释

    使用 /* */ 注释多行代码

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title></head><body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('hello word')</script></body></html>

输入输出

  1. 输入

    向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavaScript 基础 - 输入输出</title></head><body><script> // 1. 输入的任意数字，都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script></body></html>

  1. 输出

    JavaScript 可以接收用户的输入，然后再将输入的结果输出：

    alert()、document.wirte()

    以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

变量

变量是计算机中用来存储数据的 “容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！// 将用户输入的内容保存在 num 这个变量（容器）中num = prompt('请输入一数字!')// 通过 num 变量（容器）将用户输入的内容输出出来alert(num)document.write(num)
</script>

声明

声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age</script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

赋值

声明（定义）变量相当于创造了一个空的 “容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age// 赋值，将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

  1. 允许声明和赋值同时进行

  2. 不允许重复声明

    let age = 'this'
// 重复 'let' 会导致 error
let age = 'that' // SyntaxError: 'message' has already been declared

  3. 允许同时声明多个变量并赋值

  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let。

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

  1. 只能是字母、数字、下划线、$，且不能能数字开头
  2. 字母区分大小写，如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词（关键字或保留字）不允许使用
  4. 尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确// let 1age = 18; // 错误，不可以数字开头let $age = 18 // 正确let Age = 24 // 正确，它与小写的 age 是不同的变量// let let = 18; // 错误，let 是关键字let int = 123 // 不推荐，int 是保留字</script>
</body>
</html>

常量

概念：使用 const 声明的变量称为 “常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是 let。

命名规范：和变量一致

const PI = 3.14

注意： 常量不允许重新赋值, 声明的时候必须赋值（初始化）

const myBirthday = '18.04.1982';myBirthday = '01.01.2001'; // 错误，不能对常量重新赋值

数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1)</script>
</body>
</html>
Number 类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let score = 100 // 正整数let price = 12.345 // 小数let temperature = -40 // 负数document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number</script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

除了上述的常规数字外还有三种特殊数值：

  • Infinity 代表数学概念中的 无穷大∞。是一个比任何数字都大的特殊值。

    alert( 1 / 0 ); // Infinity

  • NaN 代表一个计算错误. NaN是粘性的。任何对NaN的进一步数学运算都会返回NaN（0 除外）

    alert( "not a number" / 2 ); // NaN，这样的除法是错误的

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。 JavaScript 中 优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同

加、减优先级相同

乘、除、取余优先级大于加、减

使用 () 可以提升优先级

总结： 先乘除后加减，有括号先算括号里面的~~

String 类型

通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号 / 双引号可以互相嵌套，但是不以自已嵌套自已
  3. 必要时可以使用转义符 \，输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let user_name = '小明' // 使用单引号let gender = "男" // 使用双引号let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了let str1 = '' // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>
Boolean 类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> //  pink老师帅不帅？回答 是 或 否let isCool = true // 是的，摔死了！isCool = false // 不，套马杆的汉子！document.write(typeof isCool) // 结果为 boolean</script>
</body>
</html>
undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 只声明了变量，并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined</script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

null

代表无、空或值未知的特殊值。

let age = null;

undefined 和 null 的区别：

undefined 代表没有赋值

null 代表赋值了但是为空

类型转换

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

  • 号两边只要有一个是字符串，都会把另外一个转成字符串

除了 + 以外的算术运算符 比如 - * / 等都会把数据转成数字类型

  • 号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')alert(a + b);</script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

转换为数字型 Number(数据）

转换为字符型 String(数据)

parseInt(数据) 只保留整数

parseFloat(数据) 可以保留小

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script>let t = '12'let f = 8// 显式将字符串 12 转换成数值 12t = Number(t)// 检测转换后的类型// console.log(typeof t);console.log(t + f) // 结果为 20// 并不是所有的值都可以被转成数值类型let str = 'hello'// 将 hello 转成数值是不现实的，当无法转换成// 数值时，得到的结果为 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>
布尔型转换

转换规则如下：

  • 直观上为 “空” 的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。

  • 其他值变成 true。

  • 例如：

    alert( Boolean(1) ); // true
alert( Boolean(0) ); // falsealert( Boolean("hello") ); // true
alert( Boolean("") ); // false

运算符

运算元：运算符应用的对象。比如说乘法运算 5 * 2，有两个运算元：左运算元 5 和右运算元 2。有时候人们也称其为 “参数” 而不是“运算元”。

算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符作用
+求和
-求差
*求积
/求商
%取模（取余数），开发中经常用于作为某个数字是否被整除
取余 
alert( 5 % 2 ); // 1，5 除以 2 的余数
alert( 8 % 3 ); // 2，8 除以 3 的余数

求幂

求幂运算 a ** b 将 a 提升至 a 的 b 次幂。

在数学运算中我们将其表示为 ab。

例如：

alert( 2 ** 2 ); // 2² = 4
alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2⁴ = 16
赋值运算符

对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符作用
+=加法赋值
-+减法赋值
*=乘法赋值
/=除法赋值
%=取余赋值
```javascript let num = 1 num = num+1 //结果为2 console.log(num)

let num = 1
num += 1 //结果为2
console.log(num)


#### 自增 / 自减运算符<table data-relingo-block="true"><thead data-relingo-bloc

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/879802.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot Kafka发送消息与接收消息实例

SpringBoot Kafka发送消息与接收消息实例

前言 Kafka的基本工作原理 我们将消息的发布&#xff08;publish&#xff09;称作 producer(生产者)&#xff0c;将消息的订阅&#xff08;subscribe&#xff09;表述为 consumer&#xff08;消费者&#xff09;&#xff0c;将中间的存储阵列称作 broker(代理)&#xff0c;这…
阅读更多...
QT打开摄像头采集

QT打开摄像头采集

QT打开摄像头采集 今天好不容易把opencv的环境装好&#xff0c;然后想学习一下人脸识别的功能&#xff0c;但是在图书馆坐了4个多小时了&#xff0c;屁股疼就先写个摄像头采集的功能&#xff0c;明天继续学习吧&#xff0c;废话不多&#xff0c;嚼个奶片开始发车&#xff01;&…
阅读更多...
JVM java主流的追踪式垃圾收集器

JVM java主流的追踪式垃圾收集器

目录 前言 分代垃圾收集理论 标记清除算法 标记复制算法 标记整理法 前言 从对象消亡的角度出发, 垃圾回收器可以分为引用计数式垃圾收集和追踪式垃圾收集两大类, 但是java主流的一般是追踪式的垃圾收集器, 因此我们重点讲解. 分代垃圾收集理论 分代收集这种理…
阅读更多...
Linux Vim编辑器常用命令

Linux Vim编辑器常用命令

目录 一、命令模式快捷键 二、编辑/输入模式快捷键 三、编辑模式切换到命令模式 四、搜索命令 注&#xff1a;本章内容全部基于Centos7进行操作&#xff0c;查阅本章节内容前请确保您当前所在的Linux系统版本&#xff0c;且具有足够的权限执行操作。 一、命令模式快捷键 二…
阅读更多...
企业专用智能云盘 | 帮助企业便捷管控企业文档 | 天锐绿盘云文档安全管理系统

企业专用智能云盘 | 帮助企业便捷管控企业文档 | 天锐绿盘云文档安全管理系统

由于当前多数企业内部的办公文件普遍散落于各员工电脑中&#xff0c;导致存在诸多潜在的文档使用风险。为优化团队协作效率&#xff0c;天 锐 绿盘是一款集文档统一管理、高效协同于一体的企业云盘&#xff0c;帮助企业解决文档管理中的诸多难题。 【地址&#xff1a;点击了解天…
阅读更多...
【2023工业异常检测文献】SimpleNet

【2023工业异常检测文献】SimpleNet

SimpleNet:ASimpleNetworkforImageAnomalyDetectionandLocalization 1、Background 图像异常检测和定位主要任务是识别并定位图像中异常区域。 工业异常检测最大的难题在于异常样本少&#xff0c;一般采用无监督方法&#xff0c;在训练过程中只使用正常样本。 解决工业异常检…
阅读更多...
TCP客户端编码和解码处理：发送和接收指定编码消息

TCP客户端编码和解码处理：发送和接收指定编码消息

文章目录 引言基于Netty实现TCP客户端Netty发送GBK编码指令Netty接收GBK编码基于Channel发送指令基于ChannelHandlerContext发送指令：建立连接时发送登陆指令开启日志，查看报文信息基于ChannelInboundHandlerAdapter进行业务逻辑处理原生API实现TCP客户端基于DataOutputStrea…
阅读更多...
AI预测福彩3D采取888=3策略+和值012路或胆码测试9月19日新模型预测第92弹

AI预测福彩3D采取888=3策略+和值012路或胆码测试9月19日新模型预测第92弹

经过90多期的测试&#xff0c;当然有很多彩友也一直在观察我每天发的预测结果&#xff0c;得到了一个非常有价值的信息&#xff0c;那就是9码定位的命中率非常高&#xff0c;90多期一共只错了10次&#xff0c;这给喜欢打私房菜的朋友提供了极高价值的预测结果~当然了&#xff0…
阅读更多...
C语言中的assert断言

C语言中的assert断言

Assert断言 断言是程序中处理异常的一种高级形式。可以在任何时候启用和禁用断言验证&#xff0c;因此可以在测试时启用断言&#xff0c;而在部署时禁用断言。同样&#xff0c;程序投入运行后&#xff0c;最终用户在遇到问题时可以重新启用断言。 用法&#xff1a; #…
阅读更多...
23.面试题02.07链表相交

23.面试题02.07链表相交

public class Solution {public ListNode getIntersectionNode(ListNode headA, ListNode headB) {ListNode apheadA;ListNode bpheadB;int lenA0,lenB0;//求两个链表长度while(ap!null){apap.next;lenA;}while(bp!null){bpbp.next;lenB;}apheadA;bpheadB;int len0;//用来计算让…
阅读更多...
Msf之Python分离免杀

Msf之Python分离免杀

Msf之Python分离免杀 ——XyLin. 成果展示&#xff1a; VT查杀率:8/73 (virustotal.com) 火绒和360可以过掉&#xff0c;但Windows Defender点开就寄掉了 提示&#xff1a;我用360测的时候&#xff0c;免杀过了&#xff0c;但360同时也申报了&#xff0c;估计要不了多久就寄…
阅读更多...
【C++ Primer Plus习题】6.9

【C++ Primer Plus习题】6.9

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <string> #include <…
阅读更多...
2-99 基于matlab多尺度形态学提取眼前节组织

2-99 基于matlab多尺度形态学提取眼前节组织

基于matlab多尺度形态学提取眼前节组织&#xff0c;通过应用不同尺度的结构元素进行边缘检测&#xff0c;再通过加权融合的思想来整合检测到的边缘&#xff0c;降低图像噪声的影响&#xff0c;提高边缘检测的精度。程序已调通&#xff0c;可直接运行。 下载源程序请点链接&…
阅读更多...
OpenAI o1解决了「Quiet-STaR」的挑战吗？

OpenAI o1解决了「Quiet-STaR」的挑战吗？

随着OpenAI o1近期的发布&#xff0c;业界讨论o1关联论文最多之一可能是早前这篇斯坦福大学和Notbad AI Inc的研究人员开发的Quiet-STaR&#xff0c;即让AI学会先安静的“思考”再“说话” &#xff0c;回想自己一年前对于这一领域的思考和探索&#xff0c;当初也将这篇论文进行…
阅读更多...
Electron 图标修改

Electron 图标修改

目录 1. 图片基本要求 2. 在main.js中配置icon 位置 ​3. 在package.json 中配置icon 位置 4. 问题&#xff1a;左上角图片 开发环境下显示&#xff0c;生产环境下不显示 1. 图片基本要求 图片格式为ico&#xff0c;图片像素像素为256*256&#xff1b; 将ico文件放在pub…
阅读更多...
C++编译环境（IDE）推荐及安装

C++编译环境（IDE）推荐及安装

IDE是什么 嗨嗨嗨&#xff0c;我又来水博文了 今天来给大家推荐几款好用的IDE IDE是集成开发环境&#xff08;Integrated Development Environment&#xff09;的缩写&#xff0c;是一种软件应用程序&#xff0c;提供了用于软件开发的各种工具和功能&#xff0c;包括代码编辑…
阅读更多...
人工智能安全治理新篇章：《2024人工智能安全治理框架1.0版》深度解读@附20页PDF文件下载

人工智能安全治理新篇章：《2024人工智能安全治理框架1.0版》深度解读@附20页PDF文件下载

在数字化浪潮席卷全球的今天&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度融入我们的日常生活&#xff0c;从智能助手到自动驾驶&#xff0c;从医疗诊断到金融风控&#xff0c;AI的身影无处不在。然而&#xff0c;技术的双刃剑特性也让我们不得不面对…
阅读更多...
螺栓与散装物体检测系统源码分享

螺栓与散装物体检测系统源码分享

螺栓与散装物体检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…
阅读更多...
数据结构-3.3.栈的链式存储实现

数据结构-3.3.栈的链式存储实现

一.链栈的定义&#xff1a; 二.总结&#xff1a;
阅读更多...
Solidwork角度尺寸标注

Solidwork角度尺寸标注

效果如下&#xff1a; 首先&#xff0c; 先选第一条边 然后选第二条边&#xff0c;即可
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023