前端学习之JavaScript用法总结
1|0一、JavaScript 基本功能
-
能直接写入HTML输出流中
-
能对事件的反应
-
能改变HTML内容
-
改变HTML图像
-
能改变HTML样式,属于改变HTML属性的变种
-
用于验证用户的输入
2|0二、JavaScript 引入方法
浏览器会解释并执行位于<script></script>
之间的JavaScript代码。
3|0三、JavaScript 输出
-
使用window.alert()弹出警告框
-
使用document.write()方法将内容写到HTML文档中
-
如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖
-
使用innerHTML写入或获取HTML元素
-
使用console.log()写入到浏览器的控制台
4|0四、JavaStript 语法
在编程中,一般固定不变的定值称为字面量,如1,2,3,123.456
4|14.1 JavaScript字面量(typeof)-值
- 数字(Number)字面量:整数、小数、科学计数
- 字符串(String)字面量:单引号、双引号
- 表达式字面量:用于计算,如
5+6
- 数组(Array)字面量:定义一个数组
- 对象(Object)字面量:定义一个对象
- 函数(Function)字面量:定义一个函数
4|24.2 JavaScript变量-名称
变量用于存储数据值,使用关键字var定义变量,使用等号为变量赋值。
需求:假设y=5,计算x=y+2并显示结果
4|34.3 JavaScript操作符
用算术运算符来计算值;
用赋值运算符给变量赋值
注:关键字用于标识要执行的操作,语句用分号分隔,注释用//表示,对大小写敏感,使用Unicode字符集,驼峰法命名规则lastName。
4|44.3 JavaScript语句标识符
语句 | 描述 |
---|---|
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
5|0五、JavaScript 常见的HTML事件
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
6|0六、Javastript break和Continnue语句
-
break语句用于跳出循环
-
continue用于跳出循环中的一个迭代
7|0七、undefined 和 null的区别
8|0八、JavaScript 类型
-
类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
-
在JavaScript中有5种不同的数据类型:
- string
- number
- boolean
- object
- function
-
在JavaScript中有3中对象类型:
- Object
- Date
- Array
-
在JavaScript中有2个不包含任何值得数据类型:
- ull
- undefined
9|0九、typeof 操作符
- NaN的数据类型是number
- 数组(Array)的数据类型是object
- 日期(Date)的数据类型为object
- null的数据类型是object
- 未定义变量的数据类型为underfined
- 若对象是JavaScript Array或JavaScript Date,我们无法通过typeof来判断类型,因为返回都是object。
10|0十、constructor属性
返回所有JavaScript变量的构造函数
使用constructor属性来查看对象是否为数组(包含字符串"Array")
使用constructor属性来查看对象是否为日期(包含字符串"Date")
11|0十一、date 日期对象
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
12|0十二、数据类型的转换
12|112.1 字符与数值
方法 | 描述 |
---|---|
parseFloat() | 解析一个字符串,并返回一个浮点数。 |
parseInt() | 解析一个字符串,并返回一个整数。 |
12|212.2 布尔值与数字
12|312.3 日期与数字
12|412.4 不同的数值转换
false | 0 | "false" | false |
---|---|---|---|
true | 1 | "true" | true |
0 | 0 | "0" | false |
1 | 1 | "1" | true |
"0" | 0 | "0" | true |
"000" | 0 | "000" | true |
"1" | 1 | "1" | true |
NaN | NaN | "NaN" | false |
Infinity | Infinity | "Infinity" | true |
-Infinity | -Infinity | "-Infinity" | true |
"" | 0 | "" | false |
"20" | 20 | "20" | true |
"Runoob" | NaN | "Runoob" | true |
[ ] | 0 | "" | true |
[20] | 20 | "20" | true |
[10,20] | NaN | "10,20" | true |
["Runoob"] | NaN | "Runoob" | true |
["Runoob","Google"] | NaN | "Runoob,Google" | true |
function(){} | NaN | "function(){}" | true |
NaN | "[object Object]" | true | |
null | 0 | "null" | false |
undefined | NaN | "undefined" | false |
13|0十三、RegExp正则
用于所有文本搜索和文本替换的操作,语法:/正则表达式主体/修饰符(可选)
-
search()方法使用正则表达式——文本搜索
-
replace()方法使用正则表达式——文本替换
13|113.1 正则表达式修饰符
修饰符可以在全局搜索中不区分大小写
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
13|213.2 正则表达式模式
方括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
\d | 查找数字。 |
\s | 查找空白字符。 |
\b | 匹配单词边界。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
14|0十四、JavaScript 错误处理
-
try语句测试代码块的错误
-
catch语句处理错误
-
throw语句创建自定义错误
-
finally语句在try和catch语句之后,无论是否触发异常,该语句都会执行。
15|0十五、JavaScript 严格模式
"use strict"指令只允许出现在脚本或函数的开头
-
不允许使用未声明的变量
-
不允许删除变量或对象
-
不允许删除函数
-
不允许变量重名
-
不允许使用转义字符
-
不允许对只读属性赋值
-
不允许对一个使用getter()方法读取的属性进行赋值
-
变量名不能使用"eval"与"arguments"字符串
-
由于一些安全原因,在作用域eval()创建的变量不能被调用
-
禁止this关键字指向全局对象
__EOF__
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)