1.1 js三个组成部分
问题1：为什么要学习JavaScript?
-
一个前端网页主要由
三门语言组成，他们之间是缺一不可的关系-
HTML：确定网页的结构
-
CSS: 确定网页的样式
-
JavaScript: 确定网页的行为(交互)
-
众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
-
-
-
总结：因为前端网页由三部分组成,HTML、CSS、JavaScript
问题2：JavaScript作用？
-
JavaScript作用:确定网页的行为交互-
说人话： 教网页做事请。
-
问题3：JavaScript三个组成部分？
-
ECMAScript- JavaScript的核心-
ECMAScript定义了JavaScript的语言规范
-
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
-
-
DOM- 文档对象模型-
一套操作页面元素的API
-
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
-
-
BOM- 浏览器对象模型-
一套操作浏览器功能的API
-
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
-
1.2 js三种书写位置
1-复习CSS代码的三种写法
-
1.行内样式：不推荐，因为不便于维护
-
<h1 style="background: bisque">哈哈哈</h1>
-
-
2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
-
<style>.div{background: hotpink;}</style>
-
-
3.外部样式：写在css文件中，使用link导入
-
<link rel="stylesheet" href="./01-css外联样式.css">-
css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码
-
-
2-JS代码三种写法
-
JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
-
1.行内样式：不推荐，因为不便于维护
-
<button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
-
-
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
-
<script >alert("这是JS内联样式")</script >
-
-
3.外部样式：写在js文件中，使用script的src属性导入
-
<script src="./01-JS外联写法.js"></script>
-
3-细节注意点
-
1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
-
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 3.js外部写法 -->
<script src="./js外部.js"></script>
</head>
<body>
<!-- 1.行内写法 -->
<button οnclick="alert('01-行内写法')">我是按钮</button>
<!-- 2-内部写法 -->
<script>
alert('02-我是js内部写法')
</script>
</body>
</html>
<!-- js三种书写位置(与css一致)
1.行内写法 : 写在标签行内
2.内部写法 : 写在script标签内部
3.外部写法 : 写在js外部文件中,使用script标签的src属性导入
* 注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。
-->
1.3 js两种注释写法
-
代码注释的作用：
-
1.理清思路，方便自己以后阅读代码
-
2.规范编程，方便以后别人接手代码便于维护
-
-
JS注释有两种写法
-
// 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少-
vscode快捷键 CTRL + /
-
-
/* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下-
vscode快捷键 ALT + SHIFT + A
-
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //单行注释：注释内容只能是这一行 /* 多行注释：注释内容可以是多行 第一行 第二行 */ </script> </body> </html>
1.4-输入与输出语句
输出语句1 : 在网页弹出一个提示框，输出数据
//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert('欢迎来到黑马程序员武汉校区')
输出语句2：在控制台打印某个数据
//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log('我是ikun老师，我喂自己袋盐')
输出语句3：将数据显示到网页
//输出语句3:将数据显示到网页，相当于给body添加内容
document.write('<h2>我是黑马ikun</h2>')
输入语句1：在网页弹出一个输入框，让用户输入数据
//输入语句1：弹出一个输入框，可以用来输入数据
prompt('请输入您的期望薪资?')
输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一
//输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一
confirm('您确认要退出吗?')
1.5-js结束符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 本小节注释内容仅为帮助大家理解,不需要编写 (1) 分号;作用 : 结束符,代表一个语法书写结束。 (2) 如果一行代码只有一个语句,则可以省略分号（js编译器会自动给你加） (3) 开发中,一般保持代码风格统一。要么每一个语句都加分号，要么都不加 */ </script> </body> </html>
1.6-js代码执行原理介绍
1-计算机组成
-
1.软件
-
应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、webstorm
-
系统软件：windows，Linux，unix，OSX，iOS，android
-
-
2.硬件
-
三大件：CPU,内存,硬盘
-
输入设备：鼠标,键盘,摄像头等
-
输出设备：显示器,打印机,投影仪等
-
2-代码运行的原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 程序运行原理： 1.计算机将存储在硬盘中的html文件读取到内存中 2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制） 3.CPU处理与计算 4.CPU将我们代码在运行时产生的数据保存到内存中 --> </body> </html>
02-数据类型
1.1-数据类型介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 本小节仅为帮助大家理解概念，不需要编写 */ /* 1.为什么需要有数据类型？ * js编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。 2.数据类型作用？ * 程序员合理的使用数据类型，可以更加高效的使用内存 */ console.log( '123' )//打印 黑色 123 console.log( 123 )//打印 蓝色 123 console.log( 'true' )//打印 黑色 true console.log( true )//打印 蓝色 true console.log( '武汉前端' )//打印 武汉前端 console.log( 武汉前端 )//程序报错 Uncaught ReferenceError: 武汉前端 is not defined </script> </body> </html>
1.2-五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*本小节学习目标 :
1. 掌握js五种基本类型语法
2. 掌握 string number boolean 类型作用
*/
//1. string类型 : 字符串 一切以 单引号'' 双引号"" 反引号``包起来的内容
//作用 : 用于展示文本
console.log("黑马程序员")
console.log("武汉前端")
console.log(`黑马颜值担当`)
console.log('我"爱"前端')//嵌套字符串
//2. number类型 : 数值 一切数学中的数字。
//作用 : 用于数学计算
console.log(123) //整数,默认正整数
console.log(-123) //负数
console.log(9.9) //小数
console.log(Infinity) //特殊数值,无穷大
//3. boolean类型 : 布尔 只有两个值 : true(真) false(假)
//作用 : 用于条件判断 true:条件成立 false:条件不成立
console.log(true)
console.log(false)
//4. undefined : 未定义类型 只有一个值 undefined
console.log( undefined )
//5. null : 空值类型 只有一个值 null
console.log( null )
</script>
</body>
</html>
1.3-随堂练习：数据类型与输出语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 此练习为随堂练习：没有标准答案,老师会随堂抽查 练习目的: (1) 了解数据类型的概念,知道js只能识别符合要求的数据,养成书写正确数据类型语法规范 (2) 记住每一种数据类型的作用,可以结合场景思考选择合适的数据类型 */ //需求1 浏览器弹出对话框: 你好,js //需求2 页面打印你的姓名, 如 : 张三 //需求3 控制台打印你的年龄,如 : 20 //需求4 控制台打印教室, 如 : 201 //需求5 控制台打印手机号 </script> </body> </html>
1.4-typeof检测数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //(1) typeof 数据 (2) typeof (数据) //语法结果：得到一个字符串来告诉你这个数据是什么类型。 console.log( typeof 123 )//'number' console.log( typeof '123' )//'string' console.log( typeof true )//'boolean' console.log( typeof undefined )//'undefined' console.log( typeof null )//'object' </script> </body> </html>
03-变量
问题1：为什么要学习变量？
-
需求：弹出一个输入框，让用户输入自己的年龄，我们
如何拿到用户输入的数据，并且显示在网页呢？-
使用变量就可以获取到用户输入的数据
-
问题2：变量的作用？
-
==将数据存储在内存中==
问题3：变量原理
-
变量原理：内存中一块存储数据的空间
-
说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间
-
1.1-变量声明/取值/赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //变量作用： 在内存中存储数据 //1.声明变量 ： 在内存中开辟一个空间 let age //2.变量赋值 // = : 赋值运算符（把右边的数据放入左边的变量中） age = 18 //3.变量取值 ： 读取变量(容器)中存储的数据 document.write( age ) //4.变量初始化 : 变量可以在声明的时候赋值 let name = '班长'//等价于 (1) let name (2)name = '班长' document.write( name ) </script> </body> </html>
1.2-变量使用注意点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> //1.变量不允许重复声明的 let name = 'ikun' //程序报错： 变量不允许重复声明 // let name = '坤哥' //2.变量重新赋值 : 先销毁旧值，然后存入新值 let money = 50 money = 100 console.log(money)//100 //3.变量给变量赋值 ： 取出变量的数据拷贝一份，然后复制 let num1 = 20 let num2 = num1// num1中的数据拷贝一份，赋值给num2 console.log(num2)//20 console.log(num1)//20 </script> </body> </html>
1.3-变量命名规则与规范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 1.规则(法律) ： 强制遵守，不遵守则程序报错 1.1 变量名必须以： 字母、下划线_ 、$符号开头，结尾可以是字母、下划线_ 、$符号、数字 1.2 变量不能使用关键字作为变量名 1.3 变量严格区分大小写 2.规范(道德) ： 大家共同遵守的一种习惯。 不遵守，不报错。但是不规范 2.1 变量取名要有意义，最好是英语名词 2.2 多个单词使用驼峰命名法 : 第一个单词首字母小写，后面单词首字母大写 */ //存名字 let name = '坤哥' //存年龄 let age = 30 //存性别 let gender = '男' //存女朋友 let girlFriend = '代码' </script> </body> </html>
1.4-随堂练习：变量语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 此练习为随堂练习：没有标准答案,老师会随堂抽查 练习目的: 熟悉变量的声明、赋值、取值 语法 */ // 需求1 ： 弹出一个输入框,让用户输入姓名 // 需求2 : 在页面打印刚才用户输入的姓名 // 需求3 ：弹出一个确认框, 让用户选择确定还是取消 // 需求4 : 在控制台打印 用户刚才选择的结果(观察确认框的结果是什么数据类型) </script> </body> </html>
1.5-变量练习：交换两个变量的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 需求：交换两个变量里面的值 cup1变量里面存储的是 "苹果汁" cup2变量里面存储的是 "橘子汁" 交换cup1和cup2变量的值. 最终cup1里面是 "橘子汁" , cup2 里面是 "苹果汁" */ let cup1 = "苹果汁" let cup2 = "橘子汁" //思考：能否直接交换 // cup1 = cup2 // cup2 = cup1 // console.log( cup1,cup2)//苹果汁,苹果汁 //正确方式：使用临时变量交换 let temp = cup1 cup1 = cup2 cup2 = temp console.log( cup1,cup2 )//"橘子汁" "苹果汁" </script> </body> </html>
1.6-常量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 变量 : 值可以修改, 使用let声明 常量 : 值不可以修改,使用const声明 * 例如 let G = 9.8 let PI = 3.14 */ //变量可以修改值 let age = 18 age = 19 console.log(age) //常量不可以修改值, 必须要在声明的时候就赋值 const G = 9.8 G = 10//程序报错 console.log(G) </script> </body> </html>
1.7-字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* 本小节为概念知识点,不需要学生写代码 */
/*
js中的数据有两种使用方法
第一种 : 先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
第二种 : 不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据（字面量是数据）
*/
//1. name是变量, '张三'是字面量
let name = '张三'
console.log( name )//变量取值,控制台打印'张三'
console.log( '李四' )//字面量(又叫直接量)
//2. 字面量举例
console.log( 123 )//数字字面量
console.log( '123' )//字符串字面量
console.log( true )//布尔字面量
console.log( [10,20,30] )//数组字面量
console.log( {name:'ikun'} )//对象字面量
//3. 字面量是数据,没有存储功能。所以字面量永远不能出现在 =号的左边
// 1 = 2 // 程序报错 Uncaught SyntaxError: Invalid left-hand side in assignment
//4. 变量是内存空间标识符。 所以千万不要给变量加 引号, 否则就变成了一个 字符串字面量
let str = "我是ikun"
console.log('str')//控制台打印 str这个字符串
console.log(str)//打印 "我是ikun" (变量名是一个标识符,没有引号)
</script>
</body>
</html>
04-运算符与表达式
1.0-重要概念：表达式和语句
1.1-算术运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> /* 1.运算符 : 有运算作用的符号 2.算术运算符 : 用于 数学算术运算 + - * / %(求模运算,相当于取余数) 3.表达式 : 由运算符组成的式子 4.算术表达式 ： 由算术运算符组成的式子 例如 1+1 重点： 任何表达式,都一定会有运算结果 */ //将表达式的结果存入变量 let num = 1 + 1 console.log(num) //2 //直接打印表达式结果 console.log(10 - 1) //9 console.log(10 % 3) // 10除以3, 余数 1 </script> </body> </html>
1.2-赋值运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /*赋值运算符 = += -= *= /= %= */ // += let num1 = 10 num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式 console.log ( num1 )//20 // -= let num2 = 70 num2 -= 10 //相当于 num2 = num2 - 10; console.log(num2)//60 // *= let num3 = 20 num3 *= 4 //相当于 num3 = num3 * 4; console.log(num3)//80 // /= let num4 = 90 num4 /= 3//相当于 num4 = num4 / 3 console.log(num4)//30 // %= let num5 = 10 num5 %= 3 // num5 = num5 % 3; console.log(num5)//1 </script> </body> </html>
1.3-自增自减运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //1.自增运算符 ++ //自增表达式: num++ let num1 = 10 num1++//这行代码相当于 num1 = num1 + 1 的简写形式 console.log ( num1 )//11 //2.自减运算符 -- //自减表达式： num-- let num2 = 20 num2--//这行代码相当于 num2 = num2 - 1 的简写形式 console.log ( num2 )//12 </script> </body> </html>
1.4-连接符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//需求：让用户输入 名字 和 年龄。 控制台打印‘大家好，我的名字叫：xxx,我的年龄是：xxx’
let name = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
console.log(name, age)
//1.错误方式 ： 此时name和age都是字符串的一部分，无法取值
// console.log( '大家好，我的名字叫： name,我的年龄是：age' )
//2.正确方式： 使用连接符 +
// +号 ： 只要遇到字符串,就是连接符
console.log('大家好，我的名字叫:' + name + '我的年龄是:' + age)
//3.推荐方式： 使用模板字符串 ``
//作用： 拼接字符串 ${ 表达式 }
console.log(`大家好，我的名字叫:${name},我的年龄是:${age}`)
/* 4. 字符串连接符 和 模板字符串 的区别
连接符不能识别字符串的格式,需要用到 js转义符 (这是以前的写法,了解即可)
模板字符串可以识别字符串的格式
*/
console.log('大家好，我的名字叫:'
+ name
+ '我的年龄是:'
+ age)// 控制台只会打印一行. 因为连接符不能识别字符串的格式
console.log(`大家好，我的名字叫:
${name},
我的年龄是:
${age}`)// 控制台会打印四行，因为模板字符串可以识别字符串的格式
</script>
</body>
</html>
1.5-关系运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> /* 1.关系运算符作用 : 比较两个数据的关系 > >= < <= ==(相等) !=(不等) ===(全等) !==(不全等) 2.关系表达式 : 由关系运算符组成的式子 例如: 2 > 1 重点： 关系表达式的运算结果一定是布尔类型 ： true成立 false不成立 */ let res = 2 > 1 console.log(res) /*=号注意点 = : 赋值运算符 右边数据存入左边变量 == : 相等运算 只比较值，不比较数据类型 === : 全等运算 既比较值，也比较数据类型 */ // == : 相等运算符。 只比较值，不比较数据类型 console.log(1 == "1") //true // === : 全等运算符。 先比较类型,后比较值 console.log(1 === "1") //false </script> </body> </html>
1.6-逻辑运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <body></body> <script> /* 0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20 1.逻辑运算符：多个条件之间的关系，例如 我不仅年龄比你大 而且 我身高比你大 2.逻辑运算符只有三种 * && :逻辑与 ，读作并且 * || :逻辑或，读作或者 * ! :逻辑非，读作取反 * true（真）变false（假），false（假）变true（真） 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 */ //1.逻辑与&&结果： 一假为假 （左右两边同时成立，才为真，否则为假） //表达式1 && 表达式2 运算结果 //真 真 真 //真 假 假 //假 真 假 //假 假 假 console.log(100 > 50 && 10 > 9) //true 左右两边同时成立 console.log(100 > 500 && 10 > 9) //false 因为左边不成立 //普通丈母娘找女婿 ： 有房 有车 有存款 三个条件都要满足，缺一不可 //2.逻辑或 ||结果 : 一真则真 （左右两边同时为假，才为假，否则为真） //表达式1 || 表达式2 运算结果 //真 真 真 //真 假 真 //假 真 真 //假 假 假 console.log(100 > 500 || 10 > 9) //true 只要有一边为真则为真 console.log(100 > 500 || 8 > 9) //false 只有两边都不成立才为假 //我的丈母娘找女婿 ： 要么有房 要么有车 要么有存款 三个条件满足任何一个即可 //3.逻辑非！ ： 又叫做取反 真变假 假变真 // ！ 表达式 结果 // 假 真 // 真 假 let res = !false console.log(res) //true 假变真，真变假 console.log(!(2 > 1)) //false 2>1的结果是true 与true相反的就是false //有的丈母娘找女婿 ：只要不是外地的。 `非xxxx`类似于一种否定逻辑 </script> </html>
1.7-随堂练习：运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> //需求1: 请计算a、b、c、d结果 let a = 3 > 5 && 2 < 7 && 3 == 4 console.log(a) // let b = 3 <= 4 || 3 > 1 || 3 != 2 console.log(b) // let c = 2 === "2" console.log(c)// let d = !c || (b && a) console.log(d)// // 需求2 : 让用户输入一个数字. 判断一个数是4的倍数，且不是100的倍数 // (1) 用户输入一个数字 // (2) 计算是不是 4的倍数 且 不是100的倍数 // (3) 打印计算结果 </script> </body> </html>
1.8-运算符优先级
-
实际开发中，我们不需要刻意去记忆运算符优先级。你想让哪个式子先计算，使用小括号 () 包起来即可
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> /* 运算符优先级： 不同的运算符在一个式子中的运算顺序 () : 优先级最高 一元: ++ -- ! 算术 关系 逻辑 赋值 开发中遇到复杂的式子，一般使用()小括号提升优先级 */ let res = (3 + 2) * 5 console.log(res) </script> </body> </html>
05-第一天综合案例：订单信息管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.title {
text-align: center;
color: #3e3e3e;
}
.order {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
border-radius: 10px 10px 0 0;
overflow: hidden;
}
/* 给行添加渐变背景颜色 */
.order tr:nth-child(1) {
background-image: linear-gradient(to right, #f46e33, #f057a5);
}
.order tr:nth-child(2) {
background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
}
.order tr:nth-child(2) :last-child {
color: #f282bb;
}
.order th {
padding: 5px 50px;
color: #fff;
}
.order,
th,
td {
border: 1px solid #fff;
line-height: 50px;
}
</style>
</head>
<body>
<h2 class="title">订单详情页面</h2>
<script>
//1.输入4个数据：商品名称、 数量、 价格 、 地址
let name = prompt('请输入名称')
let count = prompt('请输入数量')
let price = prompt('请输入价格')
let address = prompt('请输入地址')
console.log(name, count, price, address)
//2.计算总价格 = 数量 * 价格
let total = count * price
//3.在页面输出表单
document.write(`<table class="order">
<thead>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</thead>
<tr>
<td>${name}</td>
<td>${price}</td>
<td>${count}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>`)
</script>
</body>
</html>
06-课后自学：js常见错误
-
1.变量名单词写错
-
2.变量名重复声明
5418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
