目录
1.1js三个组成部分
问题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>
<!-- 2.js外部写法 -->
<script src="./js外部.js"></script>
</head>
<body>
<!-- 1.行内写法 -->
<button onclick="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("hello world");
输出语句2:在控制台打印某个数据
//输出语句2:打印某个数据的值,查看数据是否成功
//这个写法不是给用户看的,而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");
输出语句3:将数据显示到网页
//输出语句3:将数据显示到网页,相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");
输入语句1:在网页弹出一个输入框,让用户输入数据
//输入语句1:弹出一个输入框,可以用来输入数据
prompt("深圳的前端平均薪资是多少呀?");
输入语句2:在网页弹出一个确认框,让用户选择确认或取消
//输入语句1:弹出一个确认框,可以用来判断用户选择确认或取消
confirm("深圳的前端平均薪资是多少呀?");
1.5-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.为什么需要有数据类型?
* 每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
2.什么是数据类型?
* js编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。
*/
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
</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 )
//变量可以在声明的时候赋值
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">
<title>Title</title>
</head>
<body>
<script>
/*
1.变量作用 : 在内存中存储数据
2.变量语法:
2.1 声明变量 : let 变量名;
2.2 变量赋值 : 变量名 = 值;
2.3 变量取值 : 变量名
3.变量使用注意点:
3.1 变量不能重复声明,程序会报错
3.2 变量重复赋值,会先销毁旧值,然后存入新值
3.3 一个变量 赋值给 另一个变量,会将自己的数据拷贝一份然后赋值
*/
//声明变量并且赋值
let num1 = 10;
/* 注意点1 : 变量不能重复声明,否则程序会报错 */
// let num1 = 20;
/* 注意点2 : 变量重复赋值,会先销毁旧值,然后存入新值 */
num1 = 20;
/* 注意点3 : 一个变量 赋值给 另一个变量,会将自己的数据拷贝一份然后赋值 */
let num2 = num1;
console.log(num1,num2);
</script>
</body>
</html>
1.3-变量命名规则与规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
1.变量(letiable)作用 : 在内存中 存储数据
2.变量语法
a. 声明变量 : let 变量名;
b. 变量赋值 : 变量名 = 值
c. 变量取值 : 变量名
2.变量补充说明
a. 变量初始化
语法: let 变量名 = 值;
b. let变量 不允许重复声明
c. 变量重新赋值
语法 : 变量名 = 值;
特点 : 先销毁旧值,然后存入新值
d. 变量的值是另一个变量
语法 : 变量名a = 变量名b
特点 : 将变量b中的数据, 拷贝一份赋值给a
3.变量命名规则
* 3.1规则:必须要遵守,否则会报错。由语法决定
* 1.变量只能以下划线、字母、$开头,后面接任意的数字、下划线、字母、$
* 2.不能以JS的关键字作为变量名
* 3.js是严格区分大小写的, 例如:age与Age这是两个不同的变量名
* 3.2规范: 大家都遵守的一种编码习惯,主要是为了提高代码的易读性
* 1.起名要有意义,最好用英语名词作为变量名
* * 2.使用驼峰命名法:变量名第一个单词首字母小写,后面如果由其他单词则每一个单词的首字母大写
*/
//存名字
let name = '坤哥'
//存年龄
let age = 30
//存性别
let gender = '男'
//存女朋友
let girlFriend = '代码'
</script>
</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 : 弹出一个确认框, 让用户选择确定还是取消
需求5 : 在控制台打印 用户刚才选择的结果(观察确认框的结果是什么数据类型)
*/
</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>
//需求:交换两个变量里面的值
let num1 = 10
let num2 = 20
//思考:能否直接交换
// num1 = num2
// num2 = num1
// console.log( num1,num2)//20 20
//正确方式:使用临时变量交换
let temp = num1
num1 = num2
num2 = temp
console.log( num1,num2 )//20 21
</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中的数据有两种使用方法
第一种 : 先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
第二种 : 不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据(字面量是数据)
*/
// name是变量, '张三'是字面量
let name = '张三'
console.log( name )//变量取值,控制台打印'张三'
console.log( '李四' )//字面量(又叫直接量)
//字面量举例
console.log( 123 )//数字字面量
console.log( '123' )//字符串字面量
console.log( true )//布尔字面量
console.log( [10,20,30] )//数组字面量
console.log( {name:'ikun'} )//对象字面量
</script>
</body>
</html>
04-运算符与表达式
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">
<title>Title</title>
</head>
<body>
</body>
<script>
/**1.关系运算符(比较运算符):比较两个数据之间的关系(某种条件是否成立)
* 八种: > >= < <= == != ===全等 !== 不全等
* 2.关系表达式:由关系运算符组成的式子 例如: 2 > 1
* 只要是表达式,就会有运算结果
* 3.关系表达式的结果一定是布尔类型:true代表成立,false代表不成立
*/
//1.基本使用
console.log ( 5 > 3 );//true 成立
console.log ( 100 < 1 );//false 不成立
//2.相等与不等:只比较数据的值,不比较数据的类型
//注意:一个 = 号表示赋值运算符 两个 == 是比较运算符,它们作用不一样,不要搞混淆了
console.log ( 1 == 1 );//true 常用
console.log ( "1" == 1 );//true 他们的值一样,只是数据类型不一样
//3.全等不全等: 先比较数据的值,再比较数据的类型
console.log ( "1" === 1 );//false 两者的值虽然相等都是1,但是他们数据类型不一样,所以不成立
</script>
</html>
扩展:字符串比较的是ASCII码:
ASCII码:计算机识别的二进制编码
1.5-逻辑运算符
<!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.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>
//请计算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)//
</script>
</body>
</html>
1.7-运算符优先级
实际开发中,我们不需要刻意去记忆运算符优先级。你想让哪个式子先计算,使用小括号 () 包起来即可
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>
table{
margin: 20px auto;
/* 合并边框 */
border-collapse: collapse;
text-align: center;
}
table,th,td{
border: 1px solid #000
}
</style>
</head>
<body>
<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>
<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>