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;

letvar 都是 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 使用专门的关键字 letvar 来声明(定义)变量,在使用时需要注意一些细节:

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

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

  2. 不允许重复声明

    let age = 'this'
    // 重复 'let' 会导致 error
    let age = 'that' // SyntaxError: 'message' has already been declared
  3. 允许同时声明多个变量并赋值

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

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

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

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

变量名命名规则

关于变量的名称(标识符)有一系列的规则需要遵守:

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

注:所谓关键字是指 JavaScript 内部使用的词语,如 letvar,保留字是指 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 类型

表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 truefalse,表示肯定的数据用 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、空字符串、nullundefinedNaN)将变为 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 ** ba 提升至 ab 次幂。

在数学运算中我们将其表示为 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.rhkb.cn/news/425510.html

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

相关文章

校园社团|基于springBoot的校园社团信息管理系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信…

顺序表(c语言实现)

顺序表是一种数据结构&#xff0c;它在计算机内存中以连续的存储位置来存储数据元素。 一、特点 1. 随机访问&#xff1a;可以在常数时间内访问特定位置的元素&#xff0c;例如&#xff0c;通过下标可以快速找到对应元素。 2. 存储密度高&#xff1a;不需要额外的指针来链接…

【运维监控】Prometheus+grafana+kafka_exporter监控kafka运行情况

运维监控系列文章入口&#xff1a;【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、部署kafka_exporter1、下载2、解压3、配置4、启动5、验证 四、prometheus集成grafana监控kafka1、修改prometheus配置2、导入grafana模板3、验证 本示例通过kafka_export…

从0书写一个softmax分类 李沐pytorch实战

输出维度 在softmax 分类中 我们输出与类别一样多。 数据集有10个类别&#xff0c;所以网络输出维度为10。 初始化权重和偏置 torch.norma 生成一个均值为 0&#xff0c;标准差为0.01,一个形状为size(num_inputs, num_outputs)的张量偏置生成一个num_outputs 10 的一维张量&a…

【计网】数据链路层:概述之位置|地位|链路|数据链路|帧

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山岗&#xff01; &#x1f4ab; 欢迎来到我的学习笔记&#xff01; ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 1. 在OSI体系结构中的位置 1. 位置&#xff1a;数…

ICMP

目录 1. 帧格式2. ICMPv4消息类型(Type = 0,Code = 0)回送应答 /(Type = 8,Code = 0)回送请求(Type = 3)目标不可达(Type = 5)重定向(Type = 11)ICMP超时(Type = 12)参数3. ICMPv6消息类型回见TCP/IP 对ICMP协议作介绍 ICMP(Internet Control Message Protocol…

即插即用!高德西交的PriorDrive:统一的矢量先验地图编码,辅助无图自动驾驶

Driving with Prior Maps: Unified Vector Prior Encoding for Autonomous Vehicle Mapping 论文主页&#xff1a;https://misstl.github.io/PriorDrive.github.io/ 论文链接&#xff1a;https://arxiv.org/pdf/2409.05352 代码链接&#xff1a;https://github.com/missTL/Pr…

基于python+django+vue的学生成绩管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于协同过滤pythondjangovue…

用Python解决综合评价问题_模糊综合评价,决策树与灰色关联分析

一&#xff1a;模糊综合评价 模糊综合评价是一种有效的处理不确定性和模糊性的评价方法&#xff0c;特别是在人才评价等领域。它允许我们综合考虑多个评价指标&#xff0c;并给出一个综合的评价结果。以下是利用模糊综合评价对人才进行评价的步骤&#xff1a; 确定评价指标&am…

Git常用指令整理【新手入门级】【by慕羽】

Git 是一个分布式版本控制系统&#xff0c;主要用于跟踪和管理源代码的更改。它允许多名开发者协作&#xff0c;同时提供了强大的功能来管理项目的历史记录和不同版本。本文主要记录和整理&#xff0c;个人理解的Git相关的一些指令和用法 文章目录 一、git安装 & 创建git仓…

【AI大模型】ChatGPT模型原理介绍(上)

目录 &#x1f354; 什么是ChatGPT&#xff1f; &#x1f354; GPT-1介绍 2.1 GPT-1模型架构 2.2 GPT-1训练过程 2.2.1 无监督的预训练语言模型 2.2.2 有监督的下游任务fine-tunning 2.2.3 整体训练过程架构图 2.3 GPT-1数据集 2.4 GPT-1模型的特点 2.5 GPT-1模型总结…

深度学习-神经网络

文章目录 一、基本组成单元&#xff1a;神经元二、神经网络层三、偏置与权重四、激活函数1.激活函数的作用2.常见的激活函数1).Sigmoid2).Tanh函数3).ReLU函数 五、优点与缺点六、总结 神经网络&#xff08;Neural Network, NN&#xff09;是一种模拟人类大脑工作方式的计算模型…

Debian11.9镜像基于jre1.8的Dockerfile

Debian11.9基于jre1.8的Dockerfile编写 # 使用Debian 11.9作为基础镜像 FROM debian:11.9 # 维护者信息&#xff08;建议使用LABEL而不是MAINTAINER&#xff0c;因为MAINTAINER已被弃用&#xff09; LABEL maintainer"caibingsen" # 创建一个目录来存放jre …

LabVIEW提高开发效率技巧----VI服务器和动态调用

VI服务器&#xff08;VI Server&#xff09;和动态调用是LabVIEW中的两个重要功能&#xff0c;可以有效提升程序的灵活性、模块化和可扩展性。通过这两者的结合&#xff0c;开发者可以在运行时动态加载和调用VI&#xff08;虚拟仪器&#xff09;&#xff0c;实现更为复杂的应用…

【我的 PWN 学习手札】Unsortedbin Attack

前言 Unsortedbin Attack不能说是一种getshell的方式&#xff0c;而只能说是一种利用手法。在glibc2.28之前有效&#xff0c;条件是存在uaf&#xff0c;效果是能在某一地址写一个大数&#xff08;glibc上的一个地址&#xff09;。 一、Unsortedbin的unlink过程 unsortedbin …

Android Framework(六)WMS-窗口显示流程——窗口内容绘制与显示

文章目录 窗口显示流程明确目标 窗户内容绘制与显示流程窗口Surface状态完整流程图 应用端处理finishDrawingWindow 的触发 system_service处理WindowState状态 -- COMMIT_DRAW_PENDING本次layout 流程简述 窗口显示流程 目前窗口的显示到了最后一步。 在 addWindow 流程中&…

C语言中数据类型

一、C 语言中数据类型 基本数据类型&#xff1a; 整型&#xff08;int&#xff09;&#xff1a;用于存储整数&#xff0c;如&#xff1a;1、2、3等。字符型&#xff08;char&#xff09;&#xff1a;用于存储单个字符&#xff0c;如&#xff1a;‘a’、‘b’、c’等。浮点型&a…

中秋献礼!2024年中科院一区极光优化算法+分解对比!VMD-PLO-Transformer-LSTM多变量时间序列光伏功率预测

中秋献礼&#xff01;2024年中科院一区极光优化算法分解对比&#xff01;VMD-PLO-Transformer-LSTM多变量时间序列光伏功率预测 目录 中秋献礼&#xff01;2024年中科院一区极光优化算法分解对比&#xff01;VMD-PLO-Transformer-LSTM多变量时间序列光伏功率预测效果一览基本介…

一种多策略改进小龙虾智能优化算法MSCOA 改进策略:种群混沌映射初始化+透镜成像反向学习+黄金正弦变异策略

一种多策略改进小龙虾智能优化算法MSCOA 改进策略&#xff1a;种群初始化精英反向透镜成像反向学习黄金正弦变异策略 文章目录 一、小龙虾COA基本原理二、改进策略2.1种群初始化 映射2.2 透镜成像反向学习2.3 黄金正弦变异策略 三、实验结果四、核心代码五、代码获取六、总结 一…

每日一个数据结构-跳表

文章目录 什么是跳表&#xff1f;示意图跳表的基本原理跳表的操作跳表与其他数据结构的比较 跳表构造过程 什么是跳表&#xff1f; 跳表&#xff08;Skip List&#xff09;是一种随机化的数据结构&#xff0c;它通过在有序链表上增加多级索引来实现快速查找、插入和删除操作。…