JS必知必会

拾阿拾阿

已于 2022-07-12 20:33:41 修改

阅读量299

点赞数

文章标签： javascript 前端开发语言

于 2022-07-12 17:21:01 首次发布

本文链接：https://blog.csdn.net/shasha_bucou_sha/article/details/125747613

版权

JS必知必会

JS(JavaScript)控制网页的行为。
JS是互联网中最流行的脚本语言，网页、小程序、app等。
1.JS是脚本语言；
2.JS是轻量级的编程语言；
3.JS是可插入HTML页面的代码；
4.所有现代浏览器均可执行JS代码。
5.JS代码可以借助script标签放到head或者body标签中。

	<body>
		<!-- 第一种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>
	</body>

JS小案例

	<body>
		<!-- 修改标签的内容 -->
		<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(1).png" alt="" id="photo">
		<input type="submit" value="更改图片" onclick="document.getElementById('photo').src = './img/cat_close(1).png'">
		
		<!-- 修改文字标签 -->
		<p id="style">段落</p>
		<input type="submit" value="华丽的" onclick="document.getElementById('style').style='color:pink;font-size:20p;'">
		<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;'
			}
			
		</script>
	</body>

JS基础

1.定义变量
变量名 = 变量值（全局变量）
var 变量名 = 值（函数中的局部变量）
let 变量名 = 值（{}中的局部变量）
const 变量名 = 值（常量）
2.运算符：
1)数学运算符： +、—、*、/、%、**
2)比较运算符：>、<、>=、<=、==、!=、===、!==
==：两边的元素转换成字符串以后是否相等
!=：两边的元素转换成字符串以后是否不相等
===：直接判断两边数据是否相等
!==：直接判断两边数据是否不相等
3)赋值运算符：=、+=、-=、*=、/=、**=、%=
4)逻辑运算符：&&（逻辑与）、||（逻辑或）、!(逻辑非)
3.分支结构
语法1：
if(条件语句){
代码块
}else{
代码块
}
语法2：
if(条件语句){
代码块
}else if(条件语句){
代码块
}else if(条件语句){
代码块
}else{

}
分支结构：else可以省略不写
4.三目运算符：
python版本：结果1 if 条件 else 结果2.
java、c、js版本：条件？结果1：结果2 --> 条件成立，结果1；反之，结果2.

	<body>
		<script>

			num = 1
			//console:控制台
			//log:日志
			console.log(num)

			var age = 18
			console.log(age)

			let gender = '男'
			console.log(gender)

			const stu_id = 'Python001'
			console.log(stu_id)

			console.log(1 + 2)
			console.log(1 * 2)
			console.log(2 / 3)
			console.log(2 % 3)

			console.log(10 > 20)    //false

			console.log(5 == 3)    //false
			console.log('5' == 5)    //true

			console.log('5' != 5)    //false

			num_1 = 3
			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))

		  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之间属于正常
			hight = 1.62
			weight = 100
			console.log(weight / (hight ** 2))
			if (18.5 <= (weight / (hight ** 2)) && (weight / (hight ** 2)) <= 24.9){
				console.log('是否正常：true')
			}else{
				console.log('是否正常：false')
			}
		</script>
	</body>

JS循环

1.for-in循环
for(变量 in 序列){
代码块
}
2.while
while(条件语句){
代码块
}
3.传统的for循环
for(表达式1;表达式2;表达式3){
代码块
}
4.传统for循环改while循环
表达式1
while(表达式2){
代码块
表达式3
}

	<body>
		<script>
		   //计算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>
	</body>

JS函数

函数：将重复的代码封装起来，以便重复调用。
作用：1.降低代码的冗余度。2.将执行某一功能的代码封装起来，更容易让人理解。
1.定义函数
function 函数名(形参列表){
函数体
}
2.调用函数
函数名(实参列表)

	<body>
		<script>
			// 计算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>
	</body>

JS数组

js中的数组就是python中的列表
js数组只有正向下标
数组的增删改查:
1)增加：push - 向数组末尾添加新元素
2)删除：pop() - 删除数组中最后一个元素
3)删除：splice(下标，个数) - 从指定下标开始，删除指定个数的数据。
4)修改：列表名[下标]=新的元素
5)查找：列表名[下标]

	<body>
		<script>
			list1 = ['Python','javascript','c','HTML']

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

			list1.pop()
			console.log(list1)
			list1.pop()
			console.log(list1)
：
			list1[1]='java'
			console.log(list1)

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

			console.log(list1.length)
			console.log(list1[0])
		</script>
	</body>

JS字符串

字符串: ‘’ 或者 “”
1）字符串的拼接：+
2）字符串的重复(不可用)
3）字符串比较大小符合编码值比较大小规则

	<body>
		<script>
			a = 'abcd'
			b = '1234'

			console.log(a + b)

			console.log(a > b)
			// 字符串的长度
			console.log(a.length)
			// 格式化输出
			age=18
			name='张三'
			str1=`${name}今年${age}岁`  // 此处是反引号
			console.log(str1)
		</script>
	</body>

JS字典

字典:{}表示容器
{key:value} – key:说明；value:值
key:js中key可以用引号引起来，也可以不使用引号；python中key如果是字符串，必须使用引号。
1.调用字典中的元素
方法一：字典[key] - []中的key必须加引号(python只能使用字典{key})
方法二：字典.key - .key不需要加引号
2.字典的长度(字典没有长度，js和python都一样)

	<body>
		<script>
			list1 = ['小红',20,100,50,170]

			stu_info_dict = {name:'小红',age:20,score:100,weight:50,height:170}
			console.log(stu_info_dict)

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

			console.log(stu_info_dict.length)
			
			// 字典的实际应用
			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>

拾阿拾阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS必知必会

JS(JavaScript)控制网页的行为。JS是互联网中最流行的脚本语言，网页、小程序、app等。1.JS是脚本语言；2.JS是轻量级的编程语言；3.JS是可插入HTML页面的代码；4.所有现代浏览器均可执行JS代码。5.JS代码可以借助script标签放到head或者body标签中。JS小案例JS基础1.定义变量变量名 = 变量值（全局变量）var 变量名 = 值（函数中的局部变量）let 变量名 = 值（{}中的局部变量）const 变量名 = 值（常量）2.运算符：
复制链接

扫一扫