本文是JavaScript入门教程的第一部分，涵盖了JavaScript的基础知识，包括JavaScript简介、变量、数组、基本数据类型、运算符和语句。介绍了如何声明、赋值和更新变量，数组的使用，数据类型如Number、String、Boolean、undefined和null，以及控制台输出和类型转换。还讨论了赋值、比较、逻辑和运算符优先级，并简要提及了分支语句（if和switch）。
目录
目录
变量
数组
赋值运算符
比较运算符
JavaScript简介
1.JavaScirpt是什么?
JavaScirpt是一种运行在浏览器的编程语言，可以实现人机交互的效果。
作用：
网页特效（监听用户的行为让浏览器做出反馈）
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
2.JavaScript组成是什么？
ECMAScript，web APIs（Dom，Bom）
3.JavaScript 书写位置
1.内部引入样式
直接写在html文件中 用<script></script>包裹住
规范：script标签写</body>在上面
2.外部引入样式
代码写在以.js结尾的文件里
通过<script src="文件路径"></script>引入
3.行内引入样式
代码写在标签内部
4.JavaScript 注释
//单行注释 ctrl+/
/* 多行注释 shift+ait+a
多行注释
多行注释*/
5.输入和输出语法
输出语法：
1.document.write（'要出的内容') 向body内输出内容
2.console.log（'控制台打印') F12 点console查看
3.alert('要出的内容') 页面弹出警告对话框
输入语法 :
prompt('请输入你的姓名:')
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
JavaScript 代码执行顺序：
按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被执行
变量
变量是什么？
变量就是一个存储数据的容器 用白话来说 变量就是一个用来装东西的盒子
生活中常见的一些变量比如（教室，水杯，箱子）
1.声明变量
要想使用变量，首先需要创建变量
声明变量由两部分组成：声明关键字(let）和变量名
let age 声明了一个名为age 的变量
2. 变量赋值
定义了一个变量后，就能够初始化它（赋值） 在变量名后跟上一个"=",然后写上数值。
“=”被称为赋值运算符
let age = 18声明了一个age 变量 ，里面存放了 18 这个数据。
3. 更新变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
//声明了一个age变量，同时里面存放了 18 这个数据
let age = 18
//变量里面的数据发生变化 改为19
age = 19
//在页面输出的结果为19
document.write(age)
//声明了一个age变量，同时里面存放了 18 这个数据
let age = 18
//let不允许多次声明一个变量
let age = 19
//会报错
document.write(age)注意： let 不允许多次声明一个变量。
4. 声明多个变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开。
//说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量
let age = 18, uname = “宇智波带土”
//多行变量声明有点长 但是有更好的可读性
let age = 18,
let uname = “宇智波鼬”数组
数组的基本使用
1.取值语法
数组名[下标]
通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问
let arr = ['旗木卡卡西','宇智波佐助','小樱','漩涡鸣人']
console.log(arr)2.访问数组
/* 访问数据 数组名[下标] 或 数组名[索引] 从0开始 */
console.log(arr[3])
console.log(arr[1])
console.log(arr[4])3.数组的专业术语
元素 :数组中保存的每个数据都叫数组元素
下标 :数组中的数据编号
长度 :数组中数据的个数
4.数组的长度
数组名.length
// 数组的长度 = 索引号 + 1
// 索引号从 0 开始
// 数组的长度从 1 开始
console.log(arr.length) // 5模板字符串
拼接字符串和变量
// 模板字符串
// 外面用`` 里面 ${变量名}
/* let age = 40
document.write(`我今年${age}岁了`) */
let username = prompt('请输入姓名')
let age = prompt('请输入年龄')
document.write(`大家好,我叫${username},我今年贵庚${age}岁了`)常量
// 使用const声明的变量为常量
// 常量 关键字 使用const 来声明
const PI = 3.14
// 常量 不允许更改值
// PI = 3.15 // Uncaught TypeError: Assignment to constant variable.
console.log(PI)
// 常量声明的时候必须赋值
// const Age注意：常量不允许重新赋值,声明的时候必须赋值（初始化）
变量值也不能修改
基本数据类型
1.数据类型 – 数字类型（Number）
数字可以有很多操作。
比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。 数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。
+：求和
-：求差
*：求积
/：求商
%：取模（取余数 开发中经常作为某个数字是否被整除）
执行优先级同小学算术相同
先乘除后加减 有括号先算括号里面的
NAN（not a number）
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN
console.log('老师' + 2 )//NaN 老师是字符串 不能和 2 做运算
console.log(NaN + 2 ) //NaN
2.数据类型 – 字符串类型（string）
通过单引号（ ''） 、双引号（ ""）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用 单引号。
//数据类型 字符串 String 推荐使用单引号定义字符串
let str = '旗木卡卡西'
let str1 = "19" // 字符串19
// 反引号
let str2 = `宇智波鼬`
// 空字符串
let str3 = ''
// 获取字符串的长度 变量名.length
console.log(str2.length) // 4
// 单引号 双引号可以互相嵌套 规则: 外双内单 外单内双
// console.log('宇智波鼬''很帅') // 报错
console.log('宇智波鼬"很帅"') // 正确
//必要时可以使用转义符 \，输出单引号或双引号
console.log('宇智波鼬\'很帅\'') // 正确
console.log('宇智波鼬`很帅`') // 正确
console.log('--------------')
// 字符串拼接 +
// 数字相加 字符相连
console.log(1 + 4) // 5
console.log('宇智波' + '鼬') // 宇智波鼬
console.log('我叫' + 'Yuki') // 我叫Yuki
console.log('10' + 10) // 1010
let age = 30
// 我今年30岁了
console.log('我今年' + age + '岁了')3.数据类型 – 布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
let isCool = true
console.log(isCool) // true4.数据类型 – 未定义类型（undefined）
未定义是比较特殊的类型，只有一个值 undefined。
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少直接为某个变量赋值为 undefined。
let name //声明了变量但是未赋值
document.write(name) //输出undefined5.数据类型 – null（空类型）
let obj = null
console.log(obj) // nullnull 和 undefined 区别： undefined 表示没有赋值 ，null 表示赋值了，但是内容为空
用白话来说就是有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
控制台输出语句和检测数据类型
// 检测变量的数据类型 typeof()
// 1 运算符的写法 typeof 变量名(推荐写法)
// 函数形式 typeof(变量名)
let num = 20
console.log(typeof num) // number
let str = 'yuki'
console.log(typeof (str)) // string
let bool = true
console.log(typeof bool) // boolean
let age
console.log(typeof age) // undefined
let obj = null
console.log(typeof null) // object
// 为什么检测null得到的数据类型是object?是由于js底侧语言设计缺陷所导致的,后面有专门的人员
来提供修复此bug,但是被js官方无情的拒绝.
let num1 = prompt('请您输入数字')
console.log(typeof num1) // string类型转换
1.隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
console.log(1 + 1) // 2
console.log('宇智波鼬' + 3) // 宇智波鼬3
console.log(5 + '宇智波鼬') // 5宇智波鼬
console.log('5' + 5) // 55
// 隐式转换
console.log('5' - 5) // 0
console.log('6' * 5) // 30
console.log('8' / 4) // 2
console.log(typeof (+'123'))//number 转换为数字型
// 任何数据类型和字符串相加得到的结果就是字符串显式转换
转换成数字型
1.Number(数据)
转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
NaN也是number类型的数据，代表非数字
2.parseInt(数据)
保留整数
3.parseFloat(数据)
可以保留小数
转换为字符型
String(数据)
变量.toString(进制)
银行卡余额案例（简易的）
<!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,
th,
td {
margin: 0 auto;
padding: 5px 30px;
border-collapse: collapse;
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<h2>银行卡余额案例</h2>
</body>
</html> <script>
// 1.定义银行卡总额 电费 水费 网费。
let total = +prompt("请输入银行卡总额")
let electricity = +prompt("请输入电费")
let water = +prompt("请输入水费")
let internet = +prompt("请输入网费")
// 2.算出余额 余额等于 银行卡总额减电费加水费加网费。
let balance = (total - electricity - water - internet)
// console.log (total ,electricity , water, internet, balance)
// 页面渲染
document.write(`
<table>
<tr>
<th>银行卡总额</th>
<th>电费</th>
<th>水费</th>
<th>网费</th>
<th>余额</th>
</tr>
<td>${total}</td>
<td>${electricity}</td>
<td>${water}</td>
<td>${internet}</td>
<td>${balance}</td>
</table>`)
</script>
运算符
赋值运算符
对变量进行赋值的运算符
= ( 将等号右边的值赋值给左边， 要求左边必须是一个容器)
<
>
*=
/=
%=
<script>
//没有运算符时的写法
let i = 1
i = i + 1
console.log(i) //结果是2
//使用+=运算符
let i = 1
i += 1 (相当于 i = i +1)
console.log(i) //结果是2
</script>JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
//一元运算符
//只需要正负号（+、-） 自增或自减也属于一元运算符
//自增++：让变量的值+1
//自减++：让变量的值-1
//如
let num = 1
num++ //让num的值 加1 num+1
//前置自增 和后置自增 单独使用的时候没有区别 都是让变量的值+1
//每执行一次，让变量的值加1
//相当于 num += 1
//--------------------------------------------------------------
//前置自增和后置自增参与运算就有区别
let i = 1
console.log(++i + 2) //结果是4
//参与运算时 i在前面 i先自加 1 + i =2 这时 i = 2 再进行运算 i + 2 = 4
console.log(i++ + 2) //结果是3
//参与运算时 i在后面 先计算 i + 2 即 1 + 2 = 3 输出完毕后 i再自加变成2比较运算符
| > | 左边是否大于右边 |
| < | 右边是否大于左边 |
| >= | 左边是否大于等于右边 |
| <= | 右边是否大于小于左边 |
| == | 左右两边的值是否相等 |
| === | 左右两变是否类型和值都相等 |
| !== | 左右两边是否全等 |
= == 和===的区别
| = | 赋值 |
| == | 是判断 只要求值相等，不要求数据类型一样即可返回true |
| === | 是全等 要求值和数据类型都一样返回的才是true |
比较结果：比较结果为boolean类型，即只会得到 true 或 false
1.字符串比较，是比较的字符对应的ASCII码
从左往右依次比较
2. NaN不等于任何值，包括它本身
3.不同类型之间比较会发生隐式转换
逻辑运算符
| && 并且 | 符号两边都为ture 则返回true |
| || 或者 | 符号两边只要有一变为true 则返回true |
| ! 取反 | true变false false变true |
运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算术运算符 | 先* / % 后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
let a = 3 > 5 && 2 < 7 && 3 == 4
console.log(a); //false
let b = 3 <= 4 || 3 > 1 || 3 != 2
console.log(b); //true
let c = 2 === "2"
console.log(c); //false
let d = !c || b && a
console.log(d);//true语句
表达式和语句
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
表达式 i = 3 + 4
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出
分支语句
以前写代码都是 解释一行 执行一行 这叫顺序结构
有的时候需要根据条件来选择执行代码 这叫分支结构
某段代码被重复执行 这叫循环结构
if语句
if单分支
if(条件){
满足条件执行代码
}
括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
--------------------------------------------------------------------------------------
if双分支
if(条件){
满足条件执行代码}
else {
不满足条件执行代码
}
if多分支
if(条件1) {
满足条件执行的代码1
} else if (条件2) {
满足条件执行的代码2
}else if (条件3) {
满足条件执行的代码3
}else if (条件4) {
满足条件执行的代码4
}else {
满足条件执行的代码n
}
先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
可以写N个条件三元运算符
(判断条件) ? 满足条件执行的结果 : 不满足条件执行的结果
比如我们常见到的倒计时 利用三元运算符 补0 计算
// 1.用户输入
let num = prompt('请用户输入一个数')// 小于10进行补0 比如01 02 03 04
// 2. 判断输出- 小于10才补0 不小于10直接是num
num =num < 10 ? 0 + num : num
console.log(num)switch语句
switch(数据) {
case 值1:
代码1
break
case 值2:
代码2
break
case 值3:
代码3
break
case 值4:
代码4
break
default:
代码n
break
}
/* 找到跟小括号里数据全等的case值，并执行里面对应的代码
若不全等 则执行 default */
//switch case语句一般用于等值判断,不适合于区间判断
//switch case一般需要配合break关键字使用 没有break会造成case穿透
while 循环
While(循环条件){
要重复执行的代码(循环体)
}
//小括号的值必须为真 while大括号里代码执行完毕后不会跳出 它会一直执行到括号内条件不满足才跳出
//while循环需要具备三要素：1.变量初始值 2.终止条件（没有终止条件他就会一直循环） 3.变量更新
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
