16day JS相关知识

四 JS相关知识

4.1 js必会

	<!-- 第一种js引入方式 -->
	<script type="text/javascript">
		// js代码注释（单行注释）
		/*
		js代码注释的多行注释
		*/
	   // document --> 指代HTML
	   // write --> 写入
	   document.write("<h1>这是一个标题</h1>")
	   document.write("<p>这是一个段落</p>")
	</script>
	
	<!-- 第二种js引入方式 -->
	<script type="text/javascript" src="js/demo1.js"></script>

	<!-- 修改标签内容 -->
	<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 = 'color:pink;font-size:20px;'">
	<input type="submit" value="朴素的" 
	onclick="document.getElementById('style').style = ''">
	
	<!-- 插入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;'
		// 错误的
		// for (x in titles):
		// 	title = titles[x]
		// 	html_str = "<span>" + title + "</span><span>|</span>"
		// 	document.write(html_str)
	</script>

4.2 JavaScript基础

	<script>
		// 1.定义变量
		// 变量名 = 变量值(全局变量)
		num = 1
		// console：控制台
		// log：日志
		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)
		
		// 2.运算符：
		// 1)数学运算符：+、-、*、/、%、**
		console.log(1 + 1)
		console.log(1 * 2)
		console.log(2 / 3)
		console.log(2 % 3)
		
		// 2)比较运算符：>、<、>=、<=、==、!=、===、!==
		console.log(10 > 20)	// false
		// 两边的元素转换成字符串以后是否相等
		console.log(5 == 3)
		console.log('5' == 5)
		// 两边的元素转换成字符串以后是否不相等
		console.log('5' != 5)
		// ===直接判断两边数据是否相等
		// !==直接判断两边数据是否不相等
		
		// 3)赋值运算符：=、+=、-=、*=、/=、**=、%=
		num_1 = 3
		num_2 = 6
		num_1 += num_2
		// 和python同理
		console.log(num_1)
		
		// 4）逻辑运算符：&&（逻辑与）、||（逻辑或运算）、!(逻辑非运算)
		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{
			代码块
		}
		*/
	   
	   /*
	   语法二：
	   if(条件){
		  代码块 
	   }else if(条件){
		   代码块 
	   }else if(条件){
		   代码块
	   }else{
		   
	   }
	   */
	  
	  // 分支结构：else可以省略不写
	  // 三目运算符：
	  // python版本：结果1 if 条件 else 结果2
	  // java、c、js版：条件?结果1:结果2 - 条件成立，结果1；反之，结果2
	  
	  age = 18
	  if(age >= 18){
		  console.log('成年')
	  }else{
		  console.log('未成年')
	  }
	  
	  console.log(age >= 18?'成年':'未成年')
	  
	  year = 2000
	  if(year % 4 === 0 && year % 100 !== 0){
		  console.log('闰年')
	  }else if(year % 400 === 0){
		  console.log('闰年')
	  }else{
		  console.log('平年')
	  }
	  
	  sum1 = 0
	  for(n=1;n<=100;n+=1){
		  sum1 += n
	  }
	  console.log(sum1)
	  
	  /*
	  定义两个变量保存⼀个⼈的身⾼和体重，编程实现判断这个⼈的身材是否正常! 
	  公式：体重(kg) / (身⾼(m)的平⽅值) 在18.5 ~ 24.9之间属于正常。
	  输出格式：是否正常：true / false
	  */
	 weight = 60
	 height = 1
	 console.log(weight/(height**2))
	 if(18.5 <= weight/(height**2) && weight/(height**2) <= 24.9){
		 console.log(true)
	 }else{
		 console.log(false)
	 }
	</script>

4.3 JS循环

		<script>
			/*
			循环
			1.for-in循环
			for(变量 in 序列){
				代码块
			}
			2.while
			while(条件语句){
				代码块
			}
			3.传统for循环
			for(表达式1;表达式2;表达式3){
				代码块
			}
			4.传统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)
			
			// 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)
			}
		</script>

4.4 函数

	<script>
		// 函数：将重复的代码封装起来，以便重复调用。
		// 作用：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)
	   
	   // 计算10和20的和
	   // 计算100和30的和
	   function sum(a,b){
		   console.log(a + b)
	   }
	   
	   sum(10,20)
	   sum(100,30)
	</script>

4.5 数组

	<script>
		// js中的数组就是Python中的列表
		// 数组只有正向下标
		list1 = ['Python','JavaScript','C','HTML']
		// 数组的增删改查
		// 增加：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])
	</script>

4.6 字符串

	<script>
		// 字符串：''  或者  ""
		a = 'abcd'
		b = '1234'
		// 字符串的拼接
		console.log(a + b)
		// 字符串的重复(不可用)
		console.log(a * 2)
		// 字符串比较大小符合编码值比较大小规则
		console.log(a > b)
		// 字符串长度
		console.log(a.length)
		// 格式化输出
		age = 18
		name = '张三'
		// 反引号(`) - 英文状态ESC下方按键
		Str1 = `${name}今年${age}岁`
		console.log(Str1)
	</script>

4.7 字典

	<script>
		list1 = ['小红',20,100,50,170]
		// 字典:{}表示容器
		// {key:value} -- key:说明；value：值
		stu_info_dict = {name:'小红',age:20,score:100,weight:50,height:170}
		console.log(stu_info_dict)
		// key：value
		// key:js中key可以用引号引起来，也可以不使用引号；
		// python中key如果是字符串，必须使用引号
		
		// 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.length)
		
		// 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)
			}
		}
	</script>