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树】

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

相关推荐
长风清留扬6 分钟前
小程序毕业设计-音乐播放器+源码（可播放）下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_7482478020 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
biter008821 分钟前
opencv(15) OpenCV背景减除器（Background Subtractors）学习
人工智能·opencv·学习
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Code哈哈笑1 小时前
【Java 学习】深度剖析Java多态：从向上转型到向下转型，解锁动态绑定的奥秘，让代码更优雅灵活
java·开发语言·学习
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特2 小时前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
QQ同步助手2 小时前
如何正确使用人工智能：开启智慧学习与创新之旅
人工智能·学习·百度
流浪的小新2 小时前
【AI】人工智能、LLM学习资源汇总
人工智能·学习
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play