48JS核心语法【流程控制语句、函数】；DOM【查找元素、操作元素、事件】

已于 2024-07-11 20:06:19 修改
阅读量1.2k 收藏 16
点赞数 34
分类专栏： JavaEE 文章标签： javascript 学习 java-ee
于 2024-05-23 10:04:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gangain/article/details/139131523
版权

day48

JS核心技术

JS核心语法

继day47

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

流程控制语句

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

案例：

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

<!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万元

<!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的源文件中都看不到效果，读者可以在标签中加入预格式标签查看效果

<!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的函数里没有重载的概念

<!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>

运行：
函数

<!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>

运行：
函数无重载

<!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>
函数也是数据
//函数也是一种数据，我们可以把函数赋值给一个变量
var add = function(a,b,c){
	return a+b+c;
}
系统提供的预定义函数

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

parseFloat()：同上类似

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

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

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

<!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 模型被构造为对象的树。
DOM树

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

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

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

DOM树理解图

图中元素：标签属性（橙）、内容（蓝）、样式（绿）
查找元素、操作元素、绑定事件、操作节点
DOM树理解图

查找元素

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

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

通过id

var x=document.getElementById(“intro”);

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

如果未找到该元素，则 x 将包含 null。

注意：id重复了也只会找第一个，所以不使用重复id

<!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>

运行：
查找元素

通过属性
例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>
通过标签
<!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>
操作元素
操作内容
<!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>

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

操作属性
<!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>

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

操作样式
<!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：

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

ps2：

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

ps3：

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

ps4：

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

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

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

<!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基础-1】JavaScript语言简单介绍（语法、变量、数组、流程控制语句、函数、对象和事件）
m0_64378913的博客
04-10 1907
目录1 JS概述2 在HTML中引入JS代码2.1 内部引用2.2 外部引用2.3 功能演示：修改标签内容2.3.1 内部引用2.3.2 外部引用3 JS变量3.1 变量名的命名规则3.2 变量的声明3.3 变量的赋值3.4 变量类型3.4.1 Number3.4.2 字符串3.4.3 布尔值4 JS数组5 流程控制5.1 if 语句5.2 else 语句5.3 else if 语句6 JS函数7 JS对象7.1 对象的创建及访问7.2 浏览器内置基本对象7.2.
移除元素所有事件监听_JavaScript事件详解（上）
weixin_26706567的博客
01-10 2602
本章介绍web前端开发JavaScript事件讲解上篇，小伙伴可以根据自己学习风格学习观看文章版或者视频版，以下是视频版可以点击观看https://www.bjsxt.com/down/9225.html​www.bjsxt.com事件实例视频教程-尚学堂事件实例视频教程-尚学堂​www.bjsxt.com一、关于事件1.1 什么是事件 事件就是在文档中或者在浏览器窗口中通...
js函数对象和DOM查询元素
zjjdawang的博客
06-28 245
js函数对象和DOM查询元素
JavaScript（JS）学习笔记 3 DOM部分（DOM简介 DOM元素获取 事件简介 DOM元素修改 节点操作 事件操作）
hanmo22357的博客
09-22 740
从一名学习过其他编程语言的学习者的视角详细介绍了JS中的DOM、事件、元素修改和节点操作等内容。
JavaScript语法、DOM对象和监听事件简介
Reggie97的博客
03-28 814
本文详细解释JavaScript语法知识和如何使用DOM对象，介绍了使用JavaScript语言的监听事件等知识
Dom基础语法
Primary_Insist的博客
11-14 1703
目录 一、获取元素 二、操作元素 改变元素的内容 获取、修改元素属性 修改表单元素 修改样式属性 三、节点 获取节点 创建节点 添加节点 删除节点 复制节点 三种动态创建元素的区别 四、事件 事件三要素 注册事件 删除事件（解绑事件） DOM事件流 事件对象 事件对象常见的属性和方法 事件委托 console.dir 打印我们返回的元素对象，更好查看里面的属性和方法 一、获取元素 document.getElementById(id)...
js大纲（流程控制语句对象，函数，数组等）
weixin_46724415的博客
03-09 2223
js流程控制语句
Web API：DOM-获取元素、事件基础、操作元素
weixin_49555741的博客
05-08 1393
1. web APIs 和JS基础关联性 1.1 JS 的组成 JavaScript由以下三部分组成 ECMAScript： JavaScript的语法（JavaScript基础） DOM：页面文档对象模型 （Web APIs） BOM： 浏览器对象模型（Web APIs） JS基础阶段：掌握ECMAScript标准语法 ，做不了网页交互，为JS打基础，做铺垫 Web APIs阶段：是w3c的基础，是JS独有的部分，主要学习DOM和BOM，可以实现页面交互功能 web APIs 是JS的应用，大
js操作完的数值赋回html元素,JS的学习
weixin_35671171的博客
06-16 1632
JavaScript是什么？JS是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。JS是嵌入到浏览器软件当中去的，有浏览器就可以执行JS程序了。JS是一种面向对象的程序语言。在程序中，对象是由“属性”和“方法”构成。在现实中，男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。“对象”有各种各样的特征(属性)，如：身高，体重，年龄，姓名，学历等。“对象”有很多方法。...
JavaScript基础语法+变量与数据类型+流程控制：条件语句与循环+函数与作用域+对象与原型链全套教程
07-30
流程控制：条件语句与循环 函数与作用域 对象与原型链 数组与字符串操作 DOM操作与事件处理 JavaScript面向对象编程 异步编程：回调函数与Promise 模块化编程与CommonJS ES6新特性：箭头函数，let与const ES6新特性...
JavaScript基础语法+变量与数据类型+流程控制：条件语句与循环+函数与作用域+对象与原型链+数组与字符串操作等全套教程
08-01
流程控制：条件语句与循环 函数与作用域 对象与原型链 数组与字符串操作 DOM操作与事件处理 JavaScript面向对象编程 异步编程：回调函数与Promise 模块化编程与CommonJS ES6新特性：箭头函数，let与const ES6新特性...
JavaScript基础语法、dom操作树及document对象
10-25
本文将详细介绍JavaScript的三个核心部分：基础语法、DOM操作树和document对象。 ### JavaScript基础语法 1. **数据类型**：JavaScript中的基本数据类型包括字符串（String）、数字（Number，其中包含小数和整数）...
js DOM的事件常见操作实例详解
12-13
本文实例讲述了js DOM的事件常见操作。分享给大家供大家参考，具体如下： 一、JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 839
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
在Android开发中WebView的详细使用方法
LLZjiayou的博客
10-25 1217
WebView是一个非常强大的工具，用于在应用内加载网页内容。通过使用和其他配置，可以实现丰富的网页交互功能，同时确保应用的安全性和稳定性。如果有特定功能需求，可以在 Android 官方文档中查阅的详细说明。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 601
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
vue实现语音合成功能，Android和wap端
ahualong1的博客
10-25 1096
vue项目需要实现小说朗读功能，wap端和Android APP端，wap端能使用的方法在Android端不能使用，需要使用原生Android的方法实现小说朗读功能。
echarts 遍历多个图表，并添加resize缩放
最新发布
licongmingli的博客
10-30 126
遍历echarst多个图表，并添加独立的缩放函数
Vue3用户关注与粉丝列表展示
m0_74963840的博客
10-27 619
粉丝列表小组件
JavaScript基础函数与语法全览：从DOM操作到数据类型详解
JavaScript是一种广泛应用于网页开发的脚本语言，本文档汇集了100多个基础且常用的JavaScript函数和语法，涵盖了核心概念和技术细节，帮助开发者提升工作效率。以下是部分内容的详细解析： 1. **输出语句**：`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值