JS核心语法【流程控制语句、函数】；DOM【查找元素、操作元素、事件】--学习JavaEE的day48

程序奇男子2024-05-24 11:16

day48

JS核心技术

JS核心语法

继day47

注意：用到控制台输出、弹窗

流程控制语句

If else、For、For-in(遍历数组时，跟Java是否一样【java没有】)、While、Do while、break、continue

案例：

1.求1-100之间的偶数之和

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">

			var sum = 0;
			for(var i = 1;i<=100;i++){
				if(i%2 == 0){
					sum += i;
				}
			}
			
			console.log("1~100之间偶数之和为：" + sum);
			
			
		</script>
		
	</body>
</html>

2.我的梦想:第一个月存3000，每月递增1000，问多少个月后可以存到1000万元

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">

			var allMoney = 0;
			var money = 3000;
			var month = 0;
			
			while(allMoney < 200000){
				allMoney += money;
				month++;
				if(month % 12 == 0){
					money += 1000;
				}
			}
			
			console.log(month + "个月后存满20万");
			
			
			
		</script>
		
	</body>
</html>

3.打印图形

理解：document表示整个页面

Write和Writeln的区别

Write不可以换行，Writeln可以换行。

如何查看Writeln的换行效果

在网页中是看不到writeln的换行效果的，它是被浏览器表现为一个空格显示出来了。

在HTML文件和JSP的源文件中都看不到效果，读者可以在标签中加入预格式标签查看效果

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
			 * 知识点：流程控制语句
			 * 
			 * 3.打印图形
					*
					**
					***
					****
					*****
			 */
			
			for(var i = 0;i<5;i++){
				for(var j = 0;j<=i;j++){
					document.write("*");
				}
				document.write("<br/>");
			}
			
			/**
			 * 下列两个方法有什么区别：write()和writeln()
			 * document.write("<br/>");
			 * document.writeln("<br/>");
			 */
			
			
		</script>
		
	</body>
</html>
函数

语法结构：【任意多的参数，由逗号 (,) 分隔】

function 函数名(参数列表){

...代码块...

}

注意：函数就是方法

分类：

​ 无参无返回值的函数

​ 带参数的函数

​ 带返回值的方法

案例：

一个求和函数为例来讲解基本的应用

js函数传参的特性：

实参传什么类型，形参就是什么类型

js的重载问题：

JS的函数里没有重载的概念

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			//无参无返回值的函数
			function fun01(){
				console.log("函数1");
			}
			fun01();
			
			//带参数的函数
			//注意：形参不需要加类型，调用方法时可以传参也可以不传参
			function fun02(a,b){
				console.log("函数2：" + a + " -- " + b);
			}
			fun02();
			fun02(10,20);
			fun02("xxx","yyy");
			fun02("abc",12345);
			
			//带返回值的方法
			//注意：JS函数里的返回值不用像Java方法里必须指定返回值类型
			function fun03(){
				return "函数3";
			}
			var v = fun03();
			console.log(v);
		</script>
	</body>
</html>

运行：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * 知识点：函数的重载
			 * 注意：JS的函数里没有重载的概念
			 */
			
			function fun(a,b){
				alert(a+b);
			}
			
			function fun(a,b,c){
				alert(a+b+c);
			}
			
			//a - 10
			//b - 20
			//c - undefind
			fun(10,20);
		</script>
	</body>
</html>

运行：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * 知识点：函数的递归
			 * 注意：递归是一种思想，只要是面向对象的语言都有这个思想
			 * 
			 * 需求：设计一个函数，传入n，求n的阶乘
			 */
			
			function fun(n){
				if(n != 1){
					return fun(n-1)*n;
				}else{
					return 1;
				}
			}
			
			var num = fun(5);
			alert(num);
		</script>
	</body>
</html>
函数也是数据
html 复制代码 
//函数也是一种数据，我们可以把函数赋值给一个变量
var add = function(a,b,c){
	return a+b+c;
}
系统提供的预定义函数

parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN

parseFloat()：同上类似

isNaN(xxx)：判断是否为非数字

isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字

eval()：会将其输入的字符串当作代码来执行

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			console.log("判断参数是否是数字：" + isFinite("abc"));//false
			console.log("判断参数是否不是数字：" + isNaN("abc"));//true
			console.log("将字符串转换为整数：" + parseInt("100.123"));//100
			console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123
			
			var str = "alert('big胆');";
			eval(str);//认为字符串为js代码去执行
			
		</script>
		
	</body>
</html>

运行：

DOM

采用DOM的方式来操作网页的元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

通过 HTML DOM，可访问JavaScript HTML文档的所有元素。

JavaScript 能够改变页面中的所有 HTML 元素、HTML 属性、 CSS 样式，对页面中的所有事件做出反应
DOM树理解图

图中元素：标签属性（橙）、内容（蓝）、样式（绿）

查找元素、操作元素、绑定事件、操作节点

查找元素

通过 id、标签名 、类名找到 HTML 元素

注意：document表示该文档，就是dom树

通过id

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。
注意：id重复了也只会找第一个，所以不使用重复id

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span id="span01">用良心做教育</span>
		<br />
		<span>做真实的自己</span>
		
		<script type="text/javascript">
			
			//通过id获取元素
			var span01 = document.getElementById("span01");
			
			//绑定单击事件
			span01.onclick = function(){
				//设置内容
				span01.innerHTML = "做真实的自己";
			}
			
			
		</script>
	</body>
</html>

运行：

通过属性
html 复制代码 
例1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span class="myclass">用良心做教育</span>
		<br />
		<span class="myclass">做真实的自己</span>
		
		<script type="text/javascript">
			
			//通过class属性获取元素数组
			var span01 = document.getElementsByClassName("myclass")[0];
			
			//绑定单击事件
			span01.onclick = function(){
				//设置内容
				span01.innerHTML = "xxxx";
			}
			
		</script>
	</body>
</html>
例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		
		<img name="xxx" src="../../img/波多野结衣.jpg" />
		<img name="xxx" src="../../img/波多野结衣.jpg" />
		
		<script type="text/javascript">
			
			//通过name属性获取元素数组
			var img = document.getElementsByName("xxx")[0];
			
			//绑定单击事件
			img.onclick = function(){
				//设置属性
				img.src = "../../img/樱井步.jpg";
			}
		
		</script>
	</body>
</html>
通过标签
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span>用良心做教育</span>
		<br />
		<span>做真实的自己</span>
		
		<script type="text/javascript">
			
			//通过标签获取元素数组
			var span01 = document.getElementsByTagName("span")[0];
			
			//绑定单击事件
			span01.onclick = function(){
				//设置内容
				span01.innerHTML = "xxxx";
			}
			
		</script>
	</body>
</html>
操作元素
操作内容
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取内容 - innerText</button>
		<button onclick="fun02()">设置内容 - innerText</button>
		<br />
		<span>用良心做教育</span>
		<br />
		
		<button onclick="fun03()">获取内容 - innerHTML</button>
		<button onclick="fun04()">设置内容 - innerHTML</button>
		<br />
		<span>用良心做教育</span>
		
		<script type="text/javascript">
			/**
			 * 知识点：操作内容
			 */
			var span01 = document.getElementsByTagName("span")[0];
			var span02 = document.getElementsByTagName("span")[1];
			
			function fun01(){
				console.log(span01.innerText);
			}
			
			function fun02(){
				span01.innerText = "<h1>做真实的自己</h1>";
			}
			
			function fun03(){
				console.log(span02.innerHTML);
			}
			
			function fun04(){
				//把文本当做html标签设置
				span02.innerHTML = "<h1>做真实的自己</h1>";
			}
			
		</script>
	</body>
</html>

运行：上面个：先获取；再设置再获取。下面个同理

操作属性
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取属性</button>
		<button onclick="fun02()">设置属性</button>
		<br />
		<img src="../../img/樱井步.jpg" width="100px" height="100px" />
		<br />
		
		<button onclick="fun03()">获取属性</button>
		<button onclick="fun04()">设置属性</button>
		<br />
		<img src="../../img/樱井步.jpg" width="100px" height="100px" />
		
		<script type="text/javascript">
			/**
			 * 知识点：操作属性
			 */
			
			var img1 = document.getElementsByTagName("img")[0];
			var img2 = document.getElementsByTagName("img")[1];
			
			function fun01(){
				console.log(img1.src);
				console.log(img1.width);
				console.log(img1.height);
			}
			
			function fun02(){
				img1.src = "../../img/波多野结衣.jpg";
				img1.width = "200";
				img1.height = "200";
			}
			
			function fun03(){
				console.log(img2.getAttribute("src"));
				console.log(img2.getAttribute("width"));
				console.log(img2.getAttribute("height"));
			}
			
			function fun04(){
				img2.setAttribute("src","../../img/波多野结衣.jpg");
				img2.setAttribute("width","100%");
				img2.setAttribute("height","100%");
			}
			
		</script>
		
	</body>
</html>

运行：上面个：先获取；再设置再获取。下面个同理

操作样式
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取样式</button>
		<button onclick="fun02()">设置样式</button>
		<br />
		<span>用良心做教育</span>
		
		<script type="text/javascript">
			/**
			 * 知识点：操作样式
			 */
			
			var span = document.getElementsByTagName("span")[0]
			
			function fun01(){
				console.log(span.style.color);
				console.log(span.style.fontSize);
			}
			
			function fun02(){
				span.style.color = "red";
				span.style.fontSize = "50px";
			}
		</script>
		
	</body>
</html>

运行：先获取；再设置再获取。

事件

DOM事件：对事件做出反应，以下简单举例

单击事件

以下例子都是点击变化，效果相同，只是操作不同

ps1：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 onclick="this.innerText='做真实的自己'">用良心做教育</h1>
		
	</body>
</html>

ps2：

html 复制代码 
	<body>
		
		<h1 onclick="fun01()">用良心做教育</h1>
		
		<script type="text/javascript">
			var h1 = document.getElementsByTagName("h1")[0];
			function fun01(){
				h1.innerText = "做真实的自己";
			}
		</script>
	</body>

ps3：

html 复制代码 
	<body>
		
		<h1 onclick="fun01(this)">用良心做教育</h1>
		
		<script type="text/javascript">
			
			function fun01(obj){
				obj.innerText = "做真实的自己";
			}
		</script>
	</body>

ps4：

html 复制代码 
	<body>
		
		<h1>用良心做教育</h1>
		
		<script type="text/javascript">
			
			var h1 = document.getElementsByTagName("h1")[0];
			
			//绑定单击事件
			h1.onclick = function(){
				this.innerText = "做真实的自己";
			}
		</script>
	</body>
页面加载事件

逐行编译，前面没有，需要页面加载事件

onload 一般可以来做一些网页的环境准备工作，事件会在页面或图像加载完成后立即发生。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			//页面加载事件：事件会在页面元素和图像加载完成后立即发生
			window.onload = function(){
				var h1 = document.getElementsByTagName("h1")[0];
				h1.onclick = function(){
					this.innerText = "做真实的自己";
				}
			}
			
		</script>
		
	</head>
	<body>
		
		<h1>用良心做教育</h1>		
		
	</body>
</html>

小结：

JS核心语法：

流程控制语句、函数

DOM：【DOM树】

查找元素、操作元素、事件

相关推荐
周亚鑫1 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二10 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364811 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
武子康23 分钟前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘
fruge25 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
使者大牙32 分钟前
【大语言模型学习笔记】第一篇：LLM大规模语言模型介绍
笔记·学习·语言模型
neter.asia34 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
嚣张农民41 分钟前
JavaScript中Promise分别有哪些函数？
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play