Day 016
一、JavaScript 简介
1.JavaScript 简介
a. JS是脚本语言。
b. JS是轻量级的编程语言。
c. JS是可插入HTML页面的代码。
d. 所有现代浏览器均可执行JS代码。
- JS(JavaScript) 控制网页的行为 。
- JS是互联网中最流行的脚本语言,小程序,app等 。
2.写入方法
a. JS 代码可以借助script标签放入head或者body标签中
<script type="text/javascript">
b. 写入js文件在进行引入
<script type="text/javascript"scr="js/demo1.js"></script>
二、JavaScript 基础
1.定义变量
a. 变量名=变量值(全局变量)
- num = 1
- console.log(num)
b.var变量名=值(函数中的局部变量)
- var age = 18
- console.log(age)
c. 变量名 = 值({}中的局部变量)
- let gender = ‘男’
- console.log(gender)
d.const变量名=值(常量)
- const stu_id = ‘python001’
- console.log(stu_id)
e. console.log
- 可以网页开发者助手控制台进行打印查看
- console:控制台 log:日志
2.运算符
a. 数学运算符+、-、x、/、%、xx
console.log(1 + 1)
console.log(1 - 2)
console.log(1 * 1)
console.log(2 / 3)
console.log(2 % 3)
b.比较运算符:>、<、>=、<=、、!=、=、!==
console.log(10 > 20) // false
// 两边的元素转换成字符串以后是否相等
console.log(5 == 3)
console.log('5' == 5)
// 两边的元素转换成字符串以后是否相等
console.log('5' != 5)
// === 直接判断两边数据是否相等
// !== 直接判断两边数据是否不相等
c.赋值运算符
num_1 = 3
num_2 = 6
num_1 += num_2
// 和python同理
console.log(num_1)
d. 逻辑元素符:&&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
console.log(4 > 3 && 4 < 5)
console.log(4 > 3 && 4 > 5)
console.log(4 > 3 || 4 > 5)
console.log(!(4 > 3 || 4 > 5))
3.分支结构
语法1:
if (条件语句){
代码块
}lelse{
代码块
}
语法二:
if (条件){
代码块
}else if(条件){
代码块
}else if(条件){
代码块
}else{
分支结构:else可以省略不写
- 三目运算符:
- python版本: 结果 if条件 else 结果
- Java、C、JavaScript版本:条件?结果 :结果2 ——> 条件成立结果1;反之结果2
练习题:定义两个变量保存⼀个⼈的身⾼和体重,编程实现判断这个⼈的身材是否正常!
公式:体重(kg) / (身⾼(m)的平⽅值) 在18.5 ~ 24.9之间属于正常。
输出格式:是否正常:true / false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
h = 1.6
kg = 90
// if (18.5 <= (kg/(h**2)) <= 24.9){ ——>不能连续写
// console.log('true')
// }else{
// console.log('false')
// }
if (18.5 <= (kg / (h ** 2)) && (kg / (h ** 2)) <= 24.9) {
console.log('true')
} else {
console.log('false')
}
</script>
</body>
</html>`
三、04-JavaScript的循环
1.for in循环
for (变量 in 序列){
代码块
}
2.while循环
while(条件语句){
代码块
}
3.传统for循环
for(表达式1;表达式2;表达式3){
代码块
}
4.传统for循环改while循环
表达式1
while(表达式2){
代码块
表达式3
}
- 计算1-100的和
- JS while写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
i = 1
total = 0
while (i<=100){
total += 1
i+=1
}
console.log(total)
</script>
</body>
</html>`
- JS 传统for循环写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
total = 0
for (i = 0; i <= 100; i = +1) {
total += 1
}
console.log(total)
// for in 循环取得是序列中每一个元素的下标,通过序列[]的形式再将元素取出
list1 = [10, 20, 30, 40]
for (i in list1) {
console.log(list1[i])
}
</script>
</body>
</html>`
四、JavaScript的函数
1.JavaScript 函数
- 函数:将重复的代码封装起来,以便重复调用。
- 作用:1.降低代码的冗余度 2.将执行某一功能的代码封装起来,更容易让人理解。
2.函数的语法
- 定义函数
function:函数名(形参列表){
函数体
} - 调用函数
函数名(实参列表)
例子:计算 1-N 的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function num_total(n) {
total = 0
for (i = 1; i <= n; i += 1) {
total += i
}
console.log(total)
}
num_total(100)
num_total(50)
</script>
</body>
</html>`
五、JavaScript的数组、字符串。
1.数组
- JS 中的数组就是python中的列表
- 数组只有正向下标
2.数组的增删改查
a. 增加:push——> 向数末尾增加新元素
b. 删除:pop()——> 删除数组中最后一个元素
c. 修改:列表[下标] = [ 元素] ——> 修改对应元素
d. 查找:列表[下标]] ——> 查找对应元素
3.字符串
a. 字符串形式:’ ’ 或者 " "
- 例: a = ‘abcd’ b = ‘1234’
b. 字符串的拼接 - 例:console.log(a + b)
c.字符串比较大小符合编码值比较大小规则
d.字符串的长度
e.格式化输出形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
age = 18
name = '张三'
str1 = `${name}今年${age}岁`
console.log(str1)
</script>
</body>
</html>
五、JavaScript的字典
1.字典
- 字典:{}表示容器
- {key:value} ——> key:说明;value:值
- kye:value
- kye:JS可以使用引号也可以不使用;python中如果key是字符串必须使用引号
2.调用字典中的元素
a. 字典[key]——> []中的key必须加引号 (python只能使用此方法)
b. 字典.key——> .key不需要加引号
3.字典的长度(字典没有长度)JS 和 python都一样
4.字典的实际应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
stu = [
{name:'李华',age:20},
{name:'李刚',age:25},
{name:'小明',age:17},
]
// 将成年的学生姓名打印出来
for (x in stu){
if (stu[x].age >= 18){
console.log(stu[x].name)
}
}
</script>
</body>
</html>