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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值