Javascript学习

目录

js引入的三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// js引入的三种方式
			/*
			1、第一种：行间事件: 直接在元素上 通过给元素添加事件绑定，来执行js代码
			2、第二种：通过script标签引入外部的js文件
			3、第三中：直接爱页面的script标签中编写js代码
			*/ 
		</script>
		<!-- 引入js文件 -->
		<script type="text/javascript" src="js/main.js"></script>
		<script>
			function func1(){
				alert('func1')
			}
		</script>
		
	</head>
	<body>
		<!-- 绑定行间事件 -->
		<button type="button" onclick="alert(123456)">按钮1</button>
		<button type="button" onclick="alertInfo()">按钮2</button>
		<button type="button" onclick="func1()">按钮3</button>
		
		
	</body>
</html>

js基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 单行注释
			/*
			多行注释
			注释11
			注释222
			注释222
			*/ 
			// 一、js条件语句
			// 1、if-else语句
			
			// if(10>20){
			// 	console.log('10>5成立！')
			// }else{
			// 	console.log('10>5不成立！')
			// }
			
			// 2、if- else if -else
			// var number = 55
			// if (number>=80){
			// 	console.log('成绩很优秀')
			// }else if(60<number && number<80){
			// 	console.log(number)
			// 	console.log('成绩及格')
			// }else{
			// 	console.log('成绩不及格')
			// }	
			
			// 二、js中的函数
			
			//1、函数的定义：
			// function printUserInfo(name,age){
			// 	console.log('我的名字:'+name+'我的年纪:'+age)
			// }
			// // 2、函数的返回值
			// function addNumber(a,b){
			// 	// 返回a+b的结果
			// 	return a+b
			// }
			
			// 三、js中的对象
			/*
			对象的定义：1、{}   ,2、new Object()
			
			对象的属性和方法：
				属性名：属性值
				方法名：函数
			
			对象中的this:代表的是对象本身
			
			*/ 
			var objA = {
				name:'zzx',
				age:18,
				func1:function(){
					console.log('objA的func1方法')
				},
				func2:function(){
					console.log('打印对象中的this')
					console.log(this.name)
				}
			}
			var objB = new Object()
			objB.name ='yuze'
			objB.age =18
			objB.func001 = function(){
				console.log('objB的func1方法')
			}
			//  扩展：函数中的this:代表的是window对象（窗口）
			function work01(){
				console.log(this)
			}
			
		</script>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 单行注释
			/*
			多行注释
			注释11
			注释222
			注释222
			*/ 
			// 一、js条件语句
			// 1、if-else语句
			
			// if(10>20){
			// 	console.log('10>5成立！')
			// }else{
			// 	console.log('10>5不成立！')
			// }
			
			// 2、if- else if -else
			// var number = 55
			// if (number>=80){
			// 	console.log('成绩很优秀')
			// }else if(60<number && number<80){
			// 	console.log(number)
			// 	console.log('成绩及格')
			// }else{
			// 	console.log('成绩不及格')
			// }	
			
			// 二、js中的函数
			
			//1、函数的定义：
			// function printUserInfo(name,age){
			// 	console.log('我的名字:'+name+'我的年纪:'+age)
			// }
			// // 2、函数的返回值
			// function addNumber(a,b){
			// 	// 返回a+b的结果
			// 	return a+b
			// }
			
			// 三、js中的对象
			/*
			对象的定义：1、{}   ,2、new Object()
			
			对象的属性和方法：
				属性名：属性值
				方法名：函数
			
			对象中的this:代表的是对象本身
			
			*/ 
			var objA = {
				name:'zzx',
				age:18,
				func1:function(){
					console.log('objA的func1方法')
				},
				func2:function(){
					console.log('打印对象中的this')
					console.log(this.name)
				}
			}
			var objB = new Object()
			objB.name ='yuze'
			objB.age =18
			objB.func001 = function(){
				console.log('objB的func1方法')
			}
			//  扩展：函数中的this:代表的是window对象（窗口）
			function work01(){
				console.log(this)
			}
			
		</script>
		
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			
			// 一、 while循环
			//  break 和continue关键字和python中的作用时一样的
			// var count = 1
			// while(count<=10){
			// 	console.log(count)
			// 	count++
			// 	// 当count等于5时，强制退出循环
			// 	if (count==8){
			// 		// break
			// 		// continue
			// 	}
			// 	console.log(`--------------`)
			// }
			
			
			// 二、for循环
			// 1、for条件循环 ：for(循环开始之前执行的代码，是否执行循环体的条件，循环体执行完执行执行的代码)
			 // for (var i=1;i<=10;i++){
				//  console.log(i) 
			 // }
			 
			 // 2、for 遍历循环
			// var arryA = [11,22,33,44]
			// for循环遍历数组
			// for(i in arryA){
			// 	console.log(i,arryA[i])
			// }
			// 注意点：for循环遍历数组时，遍历出来的时数组的索引
			
			
			var objA = {
				name:'zxj',
				age:18,
				func1:function(){
					console.log('objA的func1方法')
				},
				func2:function(){
					console.log('打印对象中的this')
					console.log(this.name)
				}
			}
			// for循环遍历对象
			for (i in objA){
				console.log(i,objA[i])
			}
			// 注意点：for循环遍历对象时，遍历出来的是对象的属性名
			
		
		</script>
		
	</body>
</html>

数组遍历的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arryA = [11,22,33,44,55,66]
			// forEach遍历数组
			// arryA.forEach(function (item,i,arry){
			// 	// item 是遍历出来的值
			// 	// i 是对应的索引
			// 	//arry 是数组本身
			// 	console.log(item,i,arry)
			// })
			
			// filter:遍历数组，进行过滤
			// var res = arryA.filter(function(item,i){
			// 	return item>50
			// })
			// console.log(res)
			
			// find方法：查找第一个符合条件的值
			var res = arryA.find(function(item,i){
				console.log('---------',item)
				if(item ==33){
					return  true
				}else{
					return false
				}
			})
			console.log(res)
			
		</script>	
		
	</body>
</html>

es6中的箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			// 箭头函数和普通函数中this的区别
			// 普通函数中的this代表的对象本身
			// 箭头函数中的this代表的当前对象外层作用域的对象
			var objA ={
				// 箭头函数
				func: ()=>{
					console.log('这个是func方法')
				},
				func3:(a,b)=>{
					return a+b
				},
				// 箭头函数只有一个参数时，括号可以省略
				func4:a=>{
					console.log(a)
					// 这个this代表的window对象
					console.log(this)
				},
				func2:function (){
					console.log('这个是func2方法')
					// this代表objA
					console.log(this)
				}
			}
		</script>
	</body>
</html>

js使用的中的注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script>
			// window.onloan 是窗口的一个事件，这个事件会等到页面元素加载完毕之后才会执行
			window.onload = function(){
				document.querySelector('#box1').innerText='python001'
			}
		</script>
		
		<div id="box1">
			box1
		</div>
		<div id="box2">
			box2
		</div>
		
		<!-- <script>
			document.querySelector('#box1').innerText='python001'
		</script> -->
	</body>
</html>

js变量声明的三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			var：定义的变量可以跨代码块访问(全局变量)。
			let：定义块级作用局的变量（代码块内的局部变量）
			const: 定义常量，初始化必须赋值，值不可修改，只能在块级作用域访问
			 * 
			 * {} :包起来的代码，就是代码块
			 * 
			 * 
			 */
			const c10 = 1000
			let b10 = 99
			
			if (10>5){
				var a = 10
				let b = 20
				const c = 30
			}
			
			for (item in [11,22,33]){
				var aa = 100
				let bb = 200
				console.log(a)
			
			}
		</script>
	</body>
</html>
posted @   进击的bug~  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
·  css学习
·  【测试平台开发】Vue的事件修饰符、按键修饰符、计算属性学习教程
·  js学习笔记-基础语法
·  JS 和 CSS 小结
·  前端学习 JavaScript
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示