1 JavaScript基础
1.1 JavaScript 是什么
1.JavaScript(是什么?)
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
2.作用(做什么?)
- 网页特效(监听用户的一些行为让网页做出对应的反馈)
- 表单验证(针对表单数据的合法性进行判断)
- 数据交互(获取后台的数据,渲染到前端)
- 服务端编程(node.js)
3.JavaScript的组成(有什么?)
ECMASCript:
规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等
Web APIs:
DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
权威网站:MDN
JavaScript权威网站:MDN 网页文档 (mozilla.org)
1.2 JavaScript 书写位置
1.2.1 内部 JavaScript
通过 script
标签包裹 JavaScript 代码
规范:script标签写在</body>
上面
拓展:alert('你好,js')页面弹出警告对话框
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨,欢迎来传智播学习前端技术!')
</script>
</body>
注意事项:
我们将<script>
放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
如果先加载的JavaScript期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。
因此,将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
1.2.2 外部 javaScript
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script
标签的 src
属性引入
// demo.js
document.write('嗨,欢迎来传智播学习前端技术!')
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!如下代码所示:
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉!!!!
alert(666);
</script>
</body>
1.2.3 内联 JavaScript
代码写在标签内部。
<body>
<button onclick="alert('逗你玩~~~')">点击我你即可成功</button>
</body>
1.3 JavaScript的注释
1.3.1 单行注释
- 符号:
//
- 作用:
//
右边这一行的代码会被忽略 - 快捷键:
ctrl + /
<script>
//这种是单行注释的语法
//一次只能注释一行
//可以重复注释
</script>
1.3.2 块注释
- 符号:
/* */
- 作用:在
/*
和*/
之间的所有内容都会被忽略 - 快捷键:
shift + alt + a
<script>
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
这些可以任意换行
多少行都可以
*/
</script>
1.4 JavaScript的结束符
- 作用:使用英文的 ; 代表语句结束
- 实际情况:实际开发中,可写可不写,浏览器(JavaScript 引擎)可以自动推断语句的结束位置
- 现状:在实际开发中,越来越多的人主张,书写 JavaScript 代码时省略结束符
- 约定:为了风格统一,结束符要么每句都写,要么每句都不写(按团队要求)
1.5 JavaScript 输入输出语法
输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用,这便是一次输入和输出的过程。
举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。
1.5.1 输出语法:
- 语法1:
document.write('要输出的内容')
作用:向body内输出内容
注意:如果输出的内容写的是标签,也会被解析成网页元素
- 语法2:
alert('要输出的内容')
作用:也买你弹出警告对话框
- 语法3:
console.log('控制台打印')
作用:控制台输出语法,程序员调试使用
1.5.2 输入语法:
语法:
prompt('请输入您的姓名:')
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
展示:
JavaScript 代码执行顺序:
- 按HTML文档流顺序执行JavaScript代码
- alert() 和 prompt() 它们会跳过页面渲染先被执行
1.6 字面量
在计算机科学中,字面量(literal)是在计算机中描述 事/物。
比如:
- 我们的工资:1000 此时 1000 就是 数字字面量
- '尘缘' 字符串字面量
- 还有接下来的学习的 [] 数组字面量 {} 对象字面量 等等
2 变量
2.1 变量是什么?
变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)。
- 注意:变量不是数据本身,它们仅仅是一个用于存储值的容器。可以理解为是一个个用来装东西的纸箱子。
<script>
// x 符号代表了 5 这个数值
x = 5
// y 符号代表了 6 这个数值
y = 6
//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!
// 将用户输入的内容保存在 num 这个变量(容器)中
num = prompt('请输入一数字!')
// 通过 num 变量(容器)将用户输入的内容输出出来
alert(num)
document.write(num)
</script>
2.2 变量的基本使用
2.2.1 声明变量:
声明(定义)变量有两部分构成:声明关键字、变量名(标识)。
<!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
声明变量!!!
2.2.2 变量赋值:
定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个 “=” ,然后是数值。
注意:是通过变量名来获得变量里面得数据。
简单点,也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量的初始化。
<script>
// 声明了一个age变量,同时里面存放了 18 这个数据
let age = 18
</script>
2.2.3 更新变量:
变量赋值后,还可以通过简单地给它一个不同的值来更新它。
注意:let 不允许多次声明一个变量。
语法:多个变量中间用逗号隔开。
let age = 18, uname = 'chenyuan'
说明:看上去代码长度更短,但并不推荐这样。为了更好的可读性,请一行只声明一个变量。
// 多行变量声明有点长,但更容易阅读
let age = 18
let uname = 'chenyuan'
2.3 案例:
2.3.1 变量案例-弹出姓名
需求:浏览器中弹出对话框:请输入姓名, 页面中输出:刚才输入的姓名。
分析:
- 输入:用户输入框:prompt()
- 内部处理:保存数据
- 输出:页面打印
<script>
// 输出用户名
// 1. 用户输入
// prompt('请输入姓名')
// 2.内部处理保存数据
let uname = prompt('请输入姓名')
// 3. 打印输出
document.write(uname)
</script>
2.3.2 变量案例-交换变量的值
需求:
有2个变量:num1 里面放的是 10,num2 里面放的是 20
最后变为 num1 里面放的是 20,num2 里面放的是 10
目的:
- 练习变量的使用
- 为了后面冒泡排序做准备
分析:
-
核心思路:使用一个 临时变量 用来做中间存储。
步骤:
- 声明一个临时变量 temp
- 把num1的值赋值给 temp
- 把num2的值赋值给num1
- 把temp的值给num2
- 没了~~临时变量不用自动销毁
<script>
let num1 = 10
let num2 = 20
let temp
// 都是把右边给左边
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)
</script>
2.4 变量的本质
内存:计算机中存储数据的地方,相当于一个空间。
变量本质:是程序在内存中申请的一块用来存放数据的小空间。
2.5 变量命名规则与规范
关于变量的名称(标识符)有一系列的规则需要遵守:
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用
- 尽量保证变量具有一定的语义,见字知义
规范:
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词首字母小写,后面每个单词首字母大写。例:userName
注:所谓关键字是指 JavaScript 内部使用的词语,如 let
和var
,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语。
<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>
2.6 关键字let与var
JavaScript 使用专门的关键字 let
和 var
来声明(定义)变量,在使用时需要注意一些细节:
以下是使用 let
时的注意事项:
- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var
时的注意事项:
- 允许声明和赋值同时进行
- 允许重复声明
- 允许同时声明多个变量并赋值
大部分情况使用 let
和 var
区别不大,但是 let
相较 var
更严谨,因此推荐使用 let
,后期会更进一步介绍二者间的区别。
2.7 变量拓展-数组
数组(Array)——一种将 一组数据存储在单个变量名下 的优雅方式。
2.7.1 数组的基本使用
1.声明语法
let 数组名 = [数据1, 数据2, ..., 数据n]
let names = ['小明', '小刚', '小红', '小丽', '小米']
- 数组是按顺序保存,所以每个数据都有自己的编写。
- 计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推。
- 在数组中,数据的编号也叫索引或下标。
- 数组可以存储任意类型的数据。
2.取值语法
数组名[下标]
let names = ['小明', '小刚', '小红', '小丽', '小米']
names[0] // 小明
names[1] // 小刚
- 通过下标取数据。
- 取出来是什么类型的,就根据这种类型特点来访问。
3.一些术语
- 元素:数组中保存的每个数据都叫数组元素。
- 下标:数组中数据的编号。
- 长度:数组中数据的个数,通过数组的length属性获取。
let names = ['小明', '小刚', '小红', '小丽', '小米']
console.log(names[0]) // 小明
console.log(names[1]) // 小刚
console.log(names.length) // 5
3 常量
概念:使用 const 声明的变量称为“常量”。
使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。
命名规范:和变量一致。
const PI = 3.14
注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)。
4 数据类型
计算机世界中的万事成物都是数据。
计算机程序可以处理大量的数据,为了方便数据的管理,将数据分成了不同的类型:
注:通过 typeof 关键字检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 检测 1 是什么类型数据,结果为 number
document.write(typeof 1)
</script>
</body>
</html>
4.1 数字类型(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) // 结果为 number
document.write(typeof price) // 结果为 number
document.write(typeof temperature) // 结果为 number
</script>
</body>
</html>
JavaScript 中的数值类型与数学中的数字是一样的,分为正数、负数、小数等。
JS是若数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认。
Java是强数据类型 例如 int a = 3 必须是整数。
4.1.1 案例:计算圆的面积
需求:对话框中输入圆的半径,算出圆的面积,并显示到页面。
分析:
- 面积的数学公式:
Π*r²
- 转换为JavaScript写法:变量
*r*r
<script>
// 1.页面弹出输入框
let r = prompt('输入圆的半径')
// 2.计算圆的面积(内部处理)
let re = 3.14 * r * r
// 3.页面输出
document.write(re)
</script>
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。
console.log('尘缘' - 2) // NaN
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN。
console.log(NaN + 2) // NaN
4.2 字符串类型(string)
通过单引号( ''
) 、双引号( ""
)或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
注意事项:
- 无论单引号或是双引号必须成对使用。
- 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)。
- 必要时可以使用转义符
\
,输出单引号或双引号。
let user_name = '小明' // 使用单引号
let gender = "男" // 使用双引号
let str = '123' // 看上去是数字,但是用引号包裹了就成了字符串了
let str1 = '' // 这种情况叫空字符串
documeent.write(typeof user_name) // 结果为 string
documeent.write(typeof gender) // 结果为 string
documeent.write(typeof str) // 结果为 string
字符串拼接:
场景: + 运算符 可以实现字符串的拼接。
口诀:数字相加,字符串相连。
document.write('我叫' + '尘缘') // 我叫尘缘
let uname = '尘缘'
let song = '忘情水'
document.write(uname + song) // 尘缘忘情水
4.2.1 模板字符串(ES6)
使用场景:
- 拼接字符串和变量。
- 在没有它之前,要拼接变量比较麻烦
document.write('大家好,我叫' + name + ',今年' + age + '岁')
语法
- ``(反引号)
- 在英文输入模式下按键盘的tab键上方那个键(1左边那个键)
- 内容拼接变量时,用
${}
包住变量
document.write(`大家好,我叫${name},今年${age}岁`)
4.2.2 案例:页面输出 用户信息案例
需求:页面弹出对话框,输入名字和年龄,页面显示:大家好,我叫xxx,我今年xx岁了
let uname = prompt('请输入名字')
let age = prompt('请输入年龄')
// 输出
document.write(`大家好,我是${uname},我今年${age}岁了`)
4.3 布尔类型(boolean)
表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 true
和 false
,表示肯定的数据用 true
,表示否定的数据用 false
。
// JavaScript 好玩不?
let isCool = true
console.log(isCool)
4.4 未定义类型(undefined)
未定义是比较特殊的类型,只有一个值 undefined。只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
let age // 声明变量但是未赋值
document.write(age) // 输出 undefined
注:JavaScript 中变量的值决定了变量的数据类型。
4.5 null(空类型)
JavaScript 中的null
仅仅是一个代表”无“、”空“ 或 ”值未知“ 的特殊值。
let obj = null
console.log(obj) // null
null
和 undefined
区别:
- undefined 表示没有赋值
- null 表示赋值了,但是内容为空
null
开发中的 使用场景:
官方解释:把null
作为尚未创建的对象。
大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null
。
4.6 检测数据类型
通过 typeof
关键字检测数据类型
typeof
运算符可以返回被检测的数据类型。它支持两种语法形式:
- 作为运算符:
typeof x
(常用的写法) - 函数形式:
typeof(x)
换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。
5 类型转换
理解弱类型语言的特征,掌握显式类型转换的方法
在 JavaScript 中数据被分成了不同的类型,如数值、字符串、布尔值、undefined,在实际编程的过程中,不同数据类型之间存在着转换的关系。
5.1 隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+
号两边只要有一个是字符串,都会把另外一个转成字符串。- 除了
+
以外的算术运算符 比如- * /
等都会把数据转成数字类型。
缺点:
- 转换类型不明确,靠经验才能总结。
小技巧:
+
号作为正号解析可以转换成数字型。- 任何数据和字符串相加结果都是字符串。
<!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 减去 数值 2
console.log(num - num2)
let a = prompt('请输入一个数字')
let b = prompt('请再输入一个数字')
alert(a + b);
</script>
</body>
</html>
注:数据类型的隐式转换是 JavaScript 的特征,后续学习中还会遇到,目前先需要理解什么是隐式转换。
补充介绍模板字符串的拼接的使用
5.2 显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
概念:
自己写代码告诉系统该转换成什么类型 。
转换为数字型
-
Number(数据)
- 转成数字类型
- 如果字符串内容里有非数字,转换失败结果为 NaN(Not a Number)即不是一个数字
- NaN也是number类型的数据,代表非数字
-
parseInt(数据)
- 只保留整数
-
parseFloat(数据)
- 可以保留小数
5.2.1 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 转换成数值 12
t = 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>
练习:输入2个数,计算两者的和,打印到页面中
// 1.用户输入 prompt 得到是字符串类型 要转换为 数字型
let num1 = +prompt('请输入第一个数:')
let num2 = +prompt('请输入第二个数:')
// 2.输出
alert(`两个数相加的和是:${num1 + num2}`)
6 案例:用户订单信息案例
需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息
分析:
①:需要输入3个数据,所以需要3个变量来存储 price
num
address
②:需要计算总的价格 total
③:页面打印生成表格,里面填充数据即可
④:记得最好使用模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
// 1.用户输入
let price = +prompt('请输入商品的价格:')
let num = +prompt('请输入商品数量:')
let assress = prompt('请输入收货地址:')
// 2.计算总的价格
let total = price * num
// 3.页面打印渲染
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${assress}</td>
</tr>
</table>
`)
</script>
</body>
</html>
7 常见错误
- 下面可能出现的原因是什么?
const age
console.log(age) // 错误 const 必须有赋值操作
分析:
const
声明的时候必须要赋值,进行初始化
console.log(age) //没有age变量
分析:
- 提示
age
变量没有定义过 - 很可能
age
变量没有声明和赋值 - 或者我们输出变量名个声明的变量不一致引起的(简单来说写错变量名了)
let age = 18
let age = 21
console.log(age) // c错误 let不允许重复声明
分析:
- 提示
age
已经声明 - 很大概率是因为重复声明了一个变量。
- 注意
let
或者const
不允许多次声明同一个变量
const age = 18
age = 21
console.log(age) //错误 常量不能被重新赋值
分析:
- 常量被重新赋值了
- 常量不能被重新赋值