没有合适的资源?快使用搜索试试~ 我知道了~
首页JavaScript学习笔记:从基础到进阶
JavaScript学习笔记:从基础到进阶
需积分: 2 9 下载量 105 浏览量
更新于2024-07-09
收藏 3MB PDF 举报
"JavaScript-学习笔记涵盖了JavaScript的基础和进阶知识,包括语言构成、语法要点以及实际应用中的关键概念。从JavaScript的起源和组成开始,介绍了JS书写的位置,强调了在HTML中嵌入脚本的重要性。接下来,详细讲解了变量的使用,包括变量命名规范和数据类型的处理,如简单数据类型、获取数据类型、类型转换等。 运算符部分深入剖析了算术、逻辑、赋值等各种运算符,以及它们的优先级规则,这对于理解和编写高效代码至关重要。流程控制方面,涵盖了顺序结构、条件控制(如if语句和三元表达式)、循环(for、while、do-while)以及continue和break的使用。 数组是JavaScript的重要组成部分,包括数组的创建、遍历、添加元素等内容。函数是程序组织的核心,讲解了函数的概念、参数传递和返回值,以及对象的定义和操作。对象的创建方式、new关键字、遍历和内置对象(如Math、Date、Array和String对象)都得到了详细介绍。 DOM(文档对象模型)和BOM(浏览器对象模型)是前端开发的两大支柱,DOM用于处理网页内容,包括元素获取、事件处理和节点操作,而BOM则关注浏览器与用户交互,如窗口对象、定时器、事件流等高级特性。最后,介绍了JavaScript的执行机制,如事件注册、取消、队列和浏览器对象的使用。 这份学习笔记不仅适合初学者系统地学习JavaScript,也对有一定基础的开发者提升技能和理解深入的JavaScript原理有很大帮助。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/20704511/bga.jpg)
用来判断一个变量是否为非数字的类型,返回 true 或者 false
1
1
let
let
usrAge
usrAge
=
=
21
21
;
;
2
2
console
console
.
.
log
log
(
(
isNaN
isNaN
(
(
usrAge
usrAge
));
));
// false , 21不是一个非数字
// false , 21不是一个非数字
3
3
let
let
usrName
usrName
=
=
'你好'
'你好'
;
;
4
4
console
console
.
.
log
log
(
(
isNaN
isNaN
(
(
usrName
usrName
));
));
// true , 'andy'是一个非数字
// true , 'andy'是一个非数字
2.3 字符串类型 String
字符串型可以是引号中的任意文本,其语法为 双引号"" 和 单引号''
1
1
let
let
strMsg
strMsg
=
=
"你好"
"你好"
;
;
// 使用双引号表示字符串
// 使用双引号表示字符串
2
2
let
let
strMsg2
strMsg2
=
=
'你也好'
'你也好'
;
;
// 使用单引号表示字符串
// 使用单引号表示字符串
3
3
// 常见错误
// 常见错误
4
4
let
let
strMsg3
strMsg3
=
=
你好
你好
;
;
// 报错,没使用引号,会被认为是js代码,单js没有这些语法
// 报错,没使用引号,会被认为是js代码,单js没有这些语法
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
1. 字符串引号嵌套
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号(外双内单,外单内双)
1
1
let
let
strMsg
strMsg
=
=
'我是"高帅富"程序猿'
'我是"高帅富"程序猿'
;
;
// 可以用 '' 包含 ""
// 可以用 '' 包含 ""
2
2
let
let
strMsg2
strMsg2
=
=
"我是'高帅富'程序猿"
"我是'高帅富'程序猿"
;
;
// 可以用 "" 包含 ''
// 可以用 "" 包含 ''
3
3
// 常见错误
// 常见错误
4
4
let
let
badQuotes
badQuotes
=
=
'你好"
'你好"
;
;
// 报错,不能 单双引号搭配
// 报错,不能 单双引号搭配
2. 字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
3. 字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长
度。
转义符 解释说明
\n 换行符,n 是 newline 的意思
\\ 斜杠 \
\' ' 单引号
\" " 双引号
\t tab 缩进
\b 空格,b 是 blank 的意思
![](https://csdnimg.cn/release/download_crawler_static/20704511/bgb.jpg)
1
1
let
let
strMsg
strMsg
=
=
'你好啊!'
'你好啊!'
;
;
2
2
alert
alert
(
(
strMsg
strMsg
.
.
length
length
);
);
// 显示 4
// 显示 4
4. 字符串拼接
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
1
1
// 1. 字符串 “相加”
// 1. 字符串 “相加”
2
2
alert
alert
(
(
'hello'
'hello'
+
+
' '
' '
+
+
'world'
'world'
);
);
// hello word
// hello word
3
3
// 2. 数值字符串 “相加”
// 2. 数值字符串 “相加”
4
4
alert
alert
(
(
'100'
'100'
+
+
'100'
'100'
);
);
// 100100
// 100100
5
5
// 3. 数值字符串 + 数值
// 3. 数值字符串 + 数值
6
6
alert
alert
(
(
'11'
'11'
+
+
12
12
);
);
// 1112
// 1112
+ 号总结口诀:数值相加,字符相连
5. 字符串拼接加强
1
1
console
console
.
.
log
log
(
(
'pink老师'
'pink老师'
+
+
18
18
);
);
// 只要有字符就会相连
// 只要有字符就会相连
2
2
let
let
age
age
=
=
18
18
;
;
3
3
// console.log('pink老师age岁'); // 这样不行
// console.log('pink老师age岁'); // 这样不行
4
4
console
console
.
.
log
log
(
(
'pink老师'
'pink老师'
+
+
age
age
);
);
// pink老师18
// pink老师18
5
5
console
console
.
.
log
log
(
(
'pink老师'
'pink老师'
+
+
age
age
+
+
'岁'
'岁'
);
);
// pink老师18岁
// pink老师18岁
我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
变量是不能添加引号的,因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接,口诀 “引引加加”,删掉数字,变量写加中间
2.4 布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
1
1
console
console
.
.
log
log
(
(
true
true
+
+
1
1
);
);
// 2 参与加法运算当1来看
// 2 参与加法运算当1来看
2
2
console
console
.
.
log
log
(
(
false
false
+
+
1
1
);
);
// 1 参与加法运算当0来看
// 1 参与加法运算当0来看
2.5 Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
1
1
let
let
variable
variable
;
;
2
2
console
console
.
.
log
log
(
(
variable
variable
);
);
// undefined
// undefined
3
3
console
console
.
.
log
log
(
(
'你好'
'你好'
+
+
variable
variable
);
);
// 你好undefined
// 你好undefined
4
4
console
console
.
.
log
log
(
(
11
11
+
+
variable
variable
);
);
// NaN
// NaN
5
5
console
console
.
.
log
log
(
(
true
true
+
+
variable
variable
);
);
// NaN
// NaN
一个声明变量给 null 值,里面存的值为空
1
1
let
let
vari
vari
=
=
null
null
;
;
2
2
console
console
.
.
log
log
(
(
'你好'
'你好'
+
+
vari
vari
);
);
// 你好vari
// 你好vari
![](https://csdnimg.cn/release/download_crawler_static/20704511/bgc.jpg)
3
3
console
console
.
.
log
log
(
(
11
11
+
+
vari
vari
);
);
// 11
// 11
4
4
console
console
.
.
log
log
(
(
true
true
+
+
vari
vari
);
);
// 1
// 1
3. 获取变量数据类型
3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
1
1
let
let
num
num
=
=
18
18
;
;
2
2
console
console
.
.
log
log
(
(
typeof
typeof
num
num
);
);
// 结果 number
// 结果 number
不同类型的返回值
3.2 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8, 9, 10
字符串字面量:'黑马程序员', "大前端"
布尔字面量:true,false
4. 数据类型转换
4.1 什么是数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据
类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:
转换为字符串类型
转换为数字型
转换为布尔型
4.2 转换为字符串
方式 说明 案例
toString() 转成字符串 let num = 1; alert(num.toString());
String()强制转换 转成字符串 let num = 1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 let num = 1; alert(num + '我是字符串');
剩余57页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/3ffd7fde88e9413c9a99f3a3dccb9ca1_weixin_50697957.jpg!1)
CN-浮幻
- 粉丝: 316
- 资源: 1
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)