学习使我快乐第十六天

最新推荐文章于 2022-11-28 07:07:05 发布

Mr_suyi

最新推荐文章于 2022-11-28 07:07:05 发布

阅读量249

点赞数

分类专栏： python HTML 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Mr_suyi/article/details/125748257

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

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>