javascrip学习二

最新推荐文章于 2024-07-22 17:32:31 发布

『Knight』

最新推荐文章于 2024-07-22 17:32:31 发布

阅读量273

点赞数

分类专栏： HTML学习文章标签：学习 javascript

本文链接：https://blog.csdn.net/weixin_63204687/article/details/127518357

版权

HTML学习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一、变量与函数预解析

1.问题

a.对于正常情况来说应该先定义变量再赋值最后使用

b.而对于没有定义直接alert(i)将会报错程序崩了

一、变量与函数预解析

1.问题

a.对于正常情况来说应该先定义变量再赋值最后使用

1.var iNum;

2.iNum=12;

3.alert(iNum);

b.而对于没有定义直接alert(i)将会报错程序崩了

c.报undefined

1.alert(i)

2.var i;

3.i=8;

将会弹出undefined即未定义。

2.解释

js代码在被执行的时候会先进行预解析（对于变量的处理是把声明提前但是赋值不提前）。

所以经过预解析后c方式只有声明而没有赋值。

3.拓展

对于函数来说

故可知预解析把函数的定义和声明全部提前。

4.总结

js在执行前会进行预解析，而预解析对于变量来说会把变量的定义提前而赋值不提前，对于函数来说会把函数的定义和声明均提前。

草稿代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 这部分代码被执行的时候会先预解析一遍，并把声明提前但是赋值不提前故对于1来说只是弹出undefine即变量声明未初始化 */
			/* 1.var iNum = 12;alert(iNum); 正常弹出12*/
			 /*2.alert(inum) 程序直接崩了inum没有定义没有声明*/
			 /*
			  3.myalert()
			 function myalert(){
				 alert('hello world');
			 }
			  对于函数的所有定义会整体提前
			  */
			 
		</script>
	</head>
	<body>
	</body>
</html>
<!-- 预解析会使函数的定义和声明直接提前，而对于变量声明提前赋值不提前 -->

二、函数传参

案例1

function fnMyalert(a){
				alert(a);
			}
fnMyalert('hellow world!');

将‘hello world!’作为a进行传参结果为弹出字符 ‘hello world!’

案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				function fnChange(mystyle,value){
					var oDiv=document.getElementById('div1');
					oDiv.style[mystyle] = value;
				}
				fnChange('color', 'red');
				fnChange('backgroundColor', 'pink');
				fnChange('fontSize', '40px');
			}
		</script>
	</head>
	<body>
		<div id="div1">这个是一个idv</div>
	</body>
</html>
<!-- 
 return关键字作用：
	1.返回函数执行结果
	2.结束函数的运行
	3.阻止默认行为
 -->

通过函数fnChange（a,b）传入两个参数来改变div内容的不同属性的值

草稿代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* function fnMyalert(a){
				alert(a);
			}
			fnMyalert('hellow world!'); */
			window.onload=function(){
				function fnChange(mystyle,value){
					var oDiv=document.getElementById('div1');
					oDiv.style[mystyle] = value;
				}
				fnChange('color', 'red');
				fnChange('backgroundColor', 'pink');
				fnChange('fontSize', '40px');
			}
		</script>
	</head>
	<body>
		<div id="div1">这个是一个idv</div>
	</body>
</html>
<!-- 
 return关键字作用：
	1.返回函数执行结果
	2.结束函数的运行
	3.阻止默认行为
 -->

三、return函数

		<script>
			function fnAdd(a,b){
				var c=a+b;
				return c;
			}
			var iresult = fnAdd(2,3);
			alert(iresult);
		</script>

return关键字作用：
   1.返回函数执行结果
   2.结束函数的运行
   3.阻止默认行为

四、案例计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<script>
			window.onload=function(){
				var oInput01=document.getElementById('input01');
				var oInput02=document.getElementById('input02');
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					var iVal01=parseInt(oInput01.value);
					var iVal02=parseInt(oInput02.value);/* 得出的是一个字符串 */
					alert(iVal01+iVal02);
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="input01"> +
		<input type="text" name="" id="input02">
		<input type="button" value="相加" id="btn">
	</body>
</html>

代码中通过oInput01.value来获取输入框里面的值，此时是以字符串的格式获取的，如果不使用parseInt进行格式转换，最后相加的结果类似于字符串的拼接。

五、求余操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var iNum =0;
			var iNum1=2;
			alert(iNum%iNum1);//0
			iNum++;
			++iNum1;
			alert("++iNum1值为"+iNum1)
			alert('iNum++值为'+iNum);//等同于iNum01 += 1;
			//感觉和c语言差不多
		</script>
	</head>
	<body>
	</body>
</html>

要注意的是0和任何数取余结果为0

六、条件运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var iNum=1;
			var sNum='1';
			//===相当于先比较类型再比较数值，而==如果两边类型不同先进行转换再比较。
			if (iNum===sNum){
				alert("相等");
			}
			else{
				alert("不相等");
			}
		</script>
	</head>
	<body>
	</body>
</html>

要注意的是==比较的是两者同类型的值，即如果==两边比较的类型不同会先转换为同类型再进行比较。

七、switch语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var iweek=2;
			window.onload=function(){
			var oBady01=document.getElementById('body01');
			switch (iweek){
				case 1:
					oBady01.style.backgroundColor='gold';
					break;//匹配到了就结束
				case 2:
					oBady01.style.backgroundColor='pink';
					break;
				case 3:
					oBady01.style.backgroundColor='red';
					break;
				case 4:
					oBady01.style.backgroundColor='#fefefe';
					break;
				case 5:
					oBady01.style.backgroundColor='#000';
					break;
				case 6:
					oBady01.style.backgroundColor='#666';
					break;
				case 7:
					oBady01.style.backgroundColor='#123';
					break;
				default:
					oBady01.style.backgroundColor="#fff";
				}
				
				
			}
		</script>
	</head>
	<body id="body01">
	</body>
</html>

switch(){

case num1:

        xxxxx;

        break;//指如果匹配成功则直接跳出此函数

case num2:

        xxxxx;

default://如果以上都没匹配成功的最后选择；

        xxxx；

八、案例—按钮切换元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				     var oBtn=document.getElementById('btn');
					 var oDiv=document.getElementById('box01');
					 oBtn.onclick=function(){
						 //对于oDiv.style.display值一开始为空为什么因为他是去行间找，所以一开始读不到这个值
						 //补救措施可以是在行间加入display='black'
						 if(oDiv.style.display=='block' || oDiv.style.display==''){
							 oDiv.style.display='none';
						 }
						 else{
							 oDiv.style.display='block';
						 }
					 }	 
			}
		</script>
		<style>
			.box{
				width: 200px;
				height: 400px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<input type="button" value="切换" id='btn'>
		<div class="box" id="box01"></div>
	</body>
</html>

在js里面创建元素对象，然后通过对象访问、改变元素的属性。这种方法需要注意：如本代码中div默认的display是block但是它并不是以<div class="box" id="box01" display="block"></div>形式写在div中，故当div为<div class="box" id="box01"></div>时使用元素对象去读取其display属性得出来的是空。