day16

最新推荐文章于 2024-02-21 21:08:23 发布

lmj275871

最新推荐文章于 2024-02-21 21:08:23 发布

阅读量316

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lmj275871/article/details/125750559

版权

JavaScript

js必知必会

JS(JavaScript) : 控制网页的行为
JS是互联网中最流行的脚本语言，网页、小程序、app等

1.JS是脚本语言。
2.js是轻量级的编程语言。
3.JS是可插入HTML页面的代码。
4.所有现代浏览器均可执行JS代码。

JS代码可以借助script标签放到head或者body标签中

注释：

// js代码注释的单行注释

/* */ js代码注释的多行注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		   //document -->指代HTML
		   //write --> 写入
           <!-- 第一种js引入方式 -->
		   document.write("<h1>这是一个标题</h1>")
		   document.write("<p>这是一个段落</p>")
		</script>
		<!-- 第二种js引入方式 -->
		<script type = "text/javascript" src="js/demo1.js"></script>
	</body>
</html>

js小案例

修改标签内容

		<!-- 修改标签内容 -->
		<span>请输入姓名：</span><span id="name">张三丰</span>
		<br>
		<input type="text" name="" id="info">
		<!-- onclick -- 点击事件 -->
		<input type="submit" value="提交" onclick="document.getElementById('name').innerText = document.getElementById('info').value">

修改图片

		<!-- 修改图片 -->
		<img src="img/cat_open.png" alt="" id="photo">
		<input type="submit" value="更改图片" 
		onclick="document.getElementById('photo').src = './img/cat_close.png'">

修改文字样式

		<!-- 修改文字样式 -->
		<p id="style">段落</p>
		<input type="submit" value="华丽的"
		onclick="document.getElementById('style').style=''">

插入html代码

				<!-- 插入html代码 -->
		<script type="text/javascript">
			//Python的列表在其他编程语言中叫做数组。
			titles = ['四川','云南','贵州','湖北']
			for (x in titles){
				title=titles[x]
				html_str = "<span id="one">"+title+"</span><span>|</span>"
				document.write(html_str)
			}
			document.getElementById('one').style = 'color:red;'

javascript基础

变量

console:控制台
log:日志

全局变量

变量名 = 变量值（全局变量）

			num = 1
			console.log(num)

局部变量

			//var 变量名 = 值（函数中的局部变量）
			var age = 18
			console.log(age)
			
			//let 变量名 = 值（{}中的局部变量）
			let gender = '男'
			console.log(gender)
			
			//const 变量名 = 值（常量）
			const stu_id = 'python001'
			console.log(stu_id)

运算符

数学运算符

			数学运算符：+、-、*、/、%、**
			console.log(1 + 1)
			console.log(1 * 2)
			console.log(2 / 3)
			console.log(2 % 3)

比较运算符

			比较运算符：>、<、>=、<=、==、!=、===、!==
			console.log(10 > 20)   // false
			// 两边的元素转换成字符串以后是否相等
			console.log(5 == 3)
			console.log('5' == 5)
			// 两边的元素转换成字符串以后是否不相等
			console.log('5' != 5)
			// ===直接判断两边数据是否相等
			// !==直接判断两边数据是否不相等

赋值运算符

			赋值运算符：=、+=、-=、*=、/=、**=、%=
			num_1 = 1
			num_2 = 6
			num_1 += num_2
			//和python同理
			console.log(num_1)

逻辑运算符

			逻辑运算符：&&（逻辑与）、||（逻辑或运算）、！（逻辑非运算）
			console.log(4 > 3 && 4 < 5)
			console.log(4 > 3 && 4 > 5)
			console.log(4 > 3 || 4 > 5)
			console.log(!(4 > 3 || 4 > 5))

分支结构

语法1：
if(条件语句){
代码块
}else{
代码块
}

语法2：

 语法2：
  	   if(条件){
  		   代码块
  	   }else if(条件){
  		   代码块
  	   }else{
  		   代码块
  	   }

分支结构:else可以省略不写

三目运算符

python版本:结果1 if 条件 else 结果2
java、c、js版：条件?结果1:结果2 - 条件成立，结果1;反之，结果

例题：

1.判断是否成年

 		  age = 18
		  if(age >= 18){
			  console.log('成年')
		  }else{
			  console.log('未成年')
		  }
		  
		  console.log(age >= 18?'成年':'未成年')

2.判断是闰年还是平年

		  year = 2000
		  if(year % 4 === 0 && year % 100 !== 0){
			  console.log('闰年')
		  }else if(year % 400 === 0){
			  console.log('闰年')
		  }else{
			  console.log('平年')
		  }

3.定义两个变量保存⼀个⼈的身⾼和体重，编程实现判断这个⼈的身材是否正常!

 公式：体重(kg) / (身⾼(m)的平⽅值) 在18.5 ~ 24.9之间属于正常。

		  height = 1.7
		  weight = 50
		  if(18.5 <= weight/(height**2) && weight/(height**2) <= 24.9){
			  console.log(true)
		  }else{
			  console.log(false)
		  }

js的循环

for-in循环

			for(变量 in 序列){
				代码块
			}

while

			while(条件语句){
				代码块
			}

传统for循环

			for(表达式1;表达式2;表达式3){
				代码块
			}

传统for循环改while循环

			表达式1
			while(表达式2){
				代码块
				表达式3
			}

例题：计算1-100的和

		   //while循环
		   i = 1
		   total = 0
		   while (i <= 100){
			   total += i
			   i += 1
		   }
		   console.log(total)
		   //传统for循环
		   total = 0
		   for(i = 0;i<=100;i+=1){
			   total+=i
		   }
		   console.log(total)
		   
		   list1 = [10,20,30,40]
		   for (i in list1){
			   console.log(list1[i])
		   }
		   
		   //document.cookie ---获取用户的账号密码信息的cookie
		   
		   str1 = 'abc123'
		   for(i in str1){
			   console.log(i)
		   }

for-in循环取的是序列中每个元素的下标,通过序列[下标]的形式再将元素取出

		   list1 = [10,20,30,40]
		   for (i in list1){
			   console.log(list1[i])
		   }
		   
		   //document.cookie ---获取用户的账号密码信息的cookie
		   
		   str1 = 'abc123'
		   for(i in str1){
			   console.log(i)
		   }

函数

函数：将重复的代码封装起来，以便重复调用。
作用：1.降低代码的冗余度。
2.将执行某一功能的代码封装起来，更容易让人理解。

步骤：
1.定义函数
function 函数名(形参列表){
函数体
}
2.调用函数
函数名（实参列表）

实例：计算1-n的值

			function num_total(n){
				total = 0
				for(i=1;i<=n;i+=1){
					total+=i
				}
				console.log(total)
			}
			
			num_total(100)
			num_total(50)

数组

js中的数组就是python中的列表,数组只有正向下标

数组的增删改查：

增加：push --向数组末尾添加新元素

			list1.push('C++')
			console.log(list1)

删除：pop() – 删除数组中的最后一个元素

			list1.pop()
			console.log(list1)
			list1.pop()
			console.log(list1)

修改

			list1[1] = 'Java'
			console.log(list1)

删除：splice(下标，个数) - 从指定下标开始，删除指定个数的数据

			list1.splice(0,2)
			console.log(list1)

查找

			console.log(list1.length)
			console.log(list1[0])

字符串

字符串：''或者""

字符串的拼接

			a = 'abcd'
			b = '1234'
			console.log(a+b)

字符串的重复（不可用）

			console.log(a * 2)

字符串比较大小符合编码值比较大小规则

			console.log(a > b)

字符串长度

			console.log(a.length)

格式化输出

			age = 18
			name = '张三'
			str1 = `${name}今年${age}岁`
			console.log(str1)

字典

字典：{}表示容器

1.{key:value} – key:说明；value:值

key:可以用引号引起来，也可以不使用引号；
python中key如果是字符串，必须使用引号

	<body>
		<script>
			list1 = ['小红',20,100,50,170]
			stu_info_dict = {name:'小红',age:20,score:100,weight:50,height:170}
			console.log(stu_info_dict)

2.调用字典中的元素

方法一：字典[key] - []中的key必须加引号（python只能使用[key]）
方法二：字典.key - .key不需要加引号

			console.log(stu_info_dict['name'])
			console.log(stu_info_dict.name)

3.字典的长度(字典没有长度，js和python都一样)

			console.log(stu_info_dict.lenght)

4.字典的实际应用

			stu = [
				{name:'李华',age:20},
				{name:'李刚',age:25},
				{name:'小明',age:17}
			]
			//将成年的学生的名字打印出来？
			for(x in stu){
				if(stu[x].age >= 18){
					console.log(stu[x].name)
				}
			}