web前端技术笔记（十）JavaScript函数、条件语句、数组、循环语句

已于 2022-02-12 13:20:49 修改
阅读量141 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript html html5
于 2021-09-02 19:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27251475/article/details/120037069
版权

JavaScript函数

函数

函数就是重复执行的代码片。

函数定义与执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">


		//函数的定义
		function fnMyalert()
		{
			alert('hello world!');	
		}
		//函数调用执行
		// fnMyalert();

		function fnChange(){
			var oDiv = document.getElementById('div1');
			oDiv.style.color = "red";
			oDiv.style.fontSize = "30px";
		}

	</script>
</head>
<body>
	<!-- 标签内调用   -->
	<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
	<input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		

		// 预解析会让变量的声明提前
		alert(iNum);  //弹出undefined

		// 预解析会让函数的声明和定义提前
		myalert();


		// 使用一个未声明的变量，出错！
		//alert(iNum02);

		var iNum = 12;


		function myalert(){
			alert('hello world!');
		}


	</script>
</head>
<body>
	
</body>
</html>

提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById('btn01');

			// 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
			oBtn.onclick = fnChange;

			function fnChange(){
				var oDiv = document.getElementById('div1');
				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			}


		}
	</script>
</head>
<body>
	<!-- 标签内调用   -->
	<div id="div1">这是一个div元素</div>
	<input type="button" name="" value="改变div" id="btn01">
</body>
</html>

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		window.onload = function(){

			var oBtn = document.getElementById('btn01');

			/*
			oBtn.onclick = fnChange;

			function fnChange(){
				var oDiv = document.getElementById('div1');
				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			}			
			转化成匿名函数的写法：
			*/

			oBtn.onclick = function(){
				var oDiv = document.getElementById('div1');
				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			};


		}
	</script>
</head>
<body>
	
	<div id="div1">这是一个div元素</div>
	<input type="button" name="" value="改变div" id="btn01">
</body>
</html>

网页换肤

skin01.css

body{
	background-color:green;
}

input{
	width:200px;
	height:50px;
	background-color:gold;
	border:0;
}

skin02.css

body{
	background-color:#ddd;
}

input{
	width:200px;
	height:50px;
	border-radius:25px;
	background-color:pink;
	border:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
	<script type="text/javascript">
		window.onload = function(){

			var oBtn01 = document.getElementById('btn01');
			var oBtn02 = document.getElementById('btn02');
			var oLink = document.getElementById('link01');

			oBtn01.onclick = function(){
				oLink.href = "css/skin01.css";
			}
			oBtn02.onclick = function(){
				oLink.href = "css/skin02.css";
			}
		}

	</script>
</head>
<body>
	<input type="button" name="" value="皮肤一" id="btn01">
	<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>

函数传参

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){

			function fnMyalert(a){
				alert(a);
			}

			//fnMyalert('hello world!');


			function fnChangestyle(mystyle,val){
				var oDiv = document.getElementById('div1');
				oDiv.style[mystyle] = val;
			}

			fnChangestyle('fontSize','30px');
			fnChangestyle('color','red');
			fnChangestyle('backgroundColor','pink');

		}

	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

函数’return’关键字

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		function fnAdd(a,b) {
			var c = a + b;

			// 返回c的值，然后结束函数的运行
			return c;

			alert("内部的c="+c);

		}


		var iResult = fnAdd(2,5);

		alert(iResult);



	</script>
</head>
<body>
	
</body>
</html>

条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		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" name="" value="相加" id="btn">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		var iNum01 = 11;
		var iNum02 = 2;

		//alert(iNum01%iNum02);  // 弹出1


		var iNum03 = 0;
		var iNum04 = 10;

		alert(iNum03%iNum04);  // 弹出0
	</script>
</head>
<body>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		var iNum01 = 12;

		// iNum01 = iNum01 + 2; 可以简写成下面的写法：

		iNum01 += 2;

		alert(iNum01); // 弹出14


		// iNum01 = iNum01 - 5;  可以简写成下面的写法：

		iNum01 -= 5;


		alert(iNum01);


		//iNum01 = iNum01*2; 可以简写成下面的写法：


		iNum01 *= 2;


		alert(iNum01);


		//iNum01 = iNum01/2;

		iNum01 /= 2;

		alert(iNum01);


		//iNum01 = iNum01%2;

		iNum01 %= 2;

		alert(iNum01);



		iNum01++  // 等同于 iNum01 += 1 ;

		alert(iNum01);



	</script>
</head>
<body>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">		
		var iNum01 = 2;
		var sNum01 = '2';
		/*
		用“==” 弹出相等
		if(iNum01==sNum01){
			alert('相等');
		}
		else{
			alert('不相等');
		}

		*/
        // 先比较类型在比较值
		if(iNum01===sNum01){
			alert('相等');
		}
		else{
			alert('不相等');
		}

		if(3!=4)
		{
			alert(true);
		}
		else
		{
			alert(false);
		}

		// 将逻辑运算的结果取反，比如运算是true，取反后就是false
		if(!4>3){
			alert('大于')
		}
		else
		{
			alert('不大于')
		}
		// 多个条件运算，都是true，最终结果才是true
		if(4>3 && 5>6)
		{
			alert('都是大于')
		}
		else
		{
			alert('不是都大于')
		}

		// 多个条件运算中只要有一个是true，最终结果就是true
		if(4>3 || 5>6)
		{
			alert('只有部分大于')
		}
		else
		{
			alert('都不大于')
		}
	</script>
</head>
<body>
	
</body>
</html>

if else

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		var iNum01 = 12;
		var iNum02 = 24;

		if(iNum01>iNum02){
			alert('大于');
		}
		else{
			alert('不大于');	
		}
	</script>
</head>
<body>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 2;
			var oBody = document.getElementById('body01');

			if(iWeek==1){
				oBody.style.backgroundColor = 'gold';
			}
			else if(iWeek==2)
			{
				oBody.style.backgroundColor = 'green';
			}
			else if(iWeek==3){
				oBody.style.backgroundColor = 'pink';
			}
			else if(iWeek==4){
				oBody.style.backgroundColor = 'yellowgreen';
			}
			else if(iWeek==5){
				oBody.style.backgroundColor = 'lightblue';
			}
			else{
				oBody.style.backgroundColor = 'lightgreen';
			}

		}
	</script>
</head>
<body id="body01">
	
</body>
</html>

按钮切换元素显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oBtn = document.getElementById('btn01');
			var oDiv = document.getElementById('box01');


			// oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空

			oBtn.onclick = function(){

				if(oDiv.style.display=='block'||oDiv.style.display=='')
				{
					oDiv.style.display = 'none';
				}
				else
				{
					oDiv.style.display = 'block';
				}				
			}
		}
	</script>
	<style type="text/css">		
		.box{
			width:200px;
			height:400px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="切换" id="btn01">
	<div class="box" id="box01"></div>
</body>
</html>

switch语句

多重if else语句可以换成性能更高的switch语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 3;
			var oBody = document.getElementById('body01');

			/*if(iWeek==1){
				oBody.style.backgroundColor = 'gold';
			}
			else if(iWeek==2)
			{
				oBody.style.backgroundColor = 'green';
			}
			else if(iWeek==3){
				oBody.style.backgroundColor = 'pink';
			}
			else if(iWeek==4){
				oBody.style.backgroundColor = 'yellowgreen';
			}
			else if(iWeek==5){
				oBody.style.backgroundColor = 'lightblue';
			}
			else{
				oBody.style.backgroundColor = 'lightgreen';
			}*/

			switch (iWeek){
				case 1:
					oBody.style.backgroundColor = 'gold';
					break;
				case 2:
					oBody.style.backgroundColor = 'green';
					break;
				case 3:
					oBody.style.backgroundColor = 'pink';
					break;
				case 4:
					oBody.style.backgroundColor = 'yellowgreen';
					break;
				case 5:
					oBody.style.backgroundColor = 'lightblue';
					break;
				default:
					oBody.style.backgroundColor = 'lightgreen';
			}



		}
	</script>
</head>
<body id="body01">
	
</body>
</html>

数组

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		// 通过类实例化来创建数组
		var aList01 = new Array(1,2,3);


		// 通过直接量的方式创建数组
		var aList02 = ['a',2,3];


		// 通过length来获取数组成员的个数
		//alert(aList02.length);

		// 通过下标操作数组的某个成员
		//alert(aList02[0]);


		// 通过push方法在数组的后面增加成员
		aList02.push('b');

		//alert(aList02); // 弹出a,2,3,b

		aList02.pop();
		//alert(aList02); // 弹出a,2,3

		aList02.unshift('b');
		//alert(aList02);  // 弹出b,a,2,3

		aList02.shift();
		//alert(aList02); // 弹出a,2,3


		aList02.reverse();
		//alert(aList02); // 弹出3,2,a


		var aList03 = ['a','b','c','d','a','b'];
		//alert(aList03.indexOf('b')); //弹出1


		// 第一个参数是开始的位置，第二个参是从起始位置删除多少个成员，第三个（包括第三个）之后是要增加的成员的值
		aList03.splice(1,0,'e');

		//alert(aList03); // 弹出 a,e,b,c,d,a,b



		aList03.splice(1,2,'f','g');
		//alert(aList03); // 弹出 a,f,g,c,d,a,b


		var sTr = aList03.join("-");  // 数组执行方法后返回一个字符串
		alert(sTr);


		var sTr2 = aList03.join("");

		alert(sTr2);

	</script>
</head>
<body>
	
</body>
</html>

多维数组
多维数组指的是数组的成员也是数组的数组。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
	  var aList = [[1,2,3,4],['a','b','c'],[6,7,8]];


	  //alert(aList.length);

	  alert(aList[0].length);


	  alert(aList[1][0]);



	</script>
</head>
<body>
	
</body>
</html>

批量操作数组中的数据，需要用到循环语句

循环语句

程序中进行有规律的重复性操作，需要用到循环语句。

for循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		
	 /* for(var i=0;i<5;i++)
	  {
	  	 alert('ok!');
	  }*/


	  var aList = ['a','b','c','d'];
	  var iLen = aList.length;

	  for(var i=0;i<iLen;i++)
	  {
	  	 alert(aList[i]);
	  }



	</script>
</head>
<body>
	
</body>
</html>

循环将数据放入到页面中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oUl = document.getElementById('list');
			var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
			var iLen = aList.length;
			var sTr = '';


			for(var i=0;i<iLen;i++)
			{
				sTr += '<li>'+ aList[i]+ '</li>';
			}

			oUl.innerHTML = sTr;

		}

		

	</script>

	<style type="text/css">
		
		.list{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:300px;
			height:305px;
			
		}

		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height:60px;
			font-size:16px;
		}


	</style>
</head>
<body>
	<ul class="list" id="list">
		<!-- <li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li> -->
	</ul>
</body>
</html>

while循环

var i=0;

while(i<8){
    ......
    i++;
}

数组去重

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		var aList = [2,3,4,3,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
		var iLen = aList.length;

		var aList2 = [];

		for(var i=0;i<iLen;i++)
		{
			if(aList.indexOf(aList[i])==i){
				aList2.push(aList[i]);
			}
		}

		alert(aList2);

	</script>
</head>
<body>
	
</body>
</html>

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script type="text/javascript">
		window.onload = function(){

			// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
			var aLi = document.getElementsByTagName('li');

			// 读取选择集内元素的个数
			//alert(aLi.length);  // 弹出13

			var iLen = aLi.length;


			//给一个li设置背景色
			//aLi[0].style.backgroundColor = 'gold';

			// 不能给选择集设置样式属性
			//aLi.style.backgroundColor = 'gold';

			/*
			同时给所有的li加背景色
			for(var i=0;i<iLen;i++)
			{
				aLi[i].style.backgroundColor = 'gold';
			}
			*/


			var oUl = document.getElementById('list1');
			var aLi2 = oUl.getElementsByTagName('li');

			var iLen2 = aLi2.length;

			for(var i=0;i<iLen2;i++)
			{
				if(i%2==0)
				{
					aLi2[i].style.backgroundColor = 'gold';
				}
			}

		}

	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul id="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>

Javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法

字符串操作方法

1、字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt() 获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

7、substring() 截取字符串 用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

8、toUpperCase() 字符串转大写

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF

9、toLowerCase() 字符串转小写

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);
M行者X
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端开发必备JavaScript（含源码课件笔记总结）
02-27
在JavaScript的学习中，首先需要理解其基础语法，包括变量声明（var、let、const）、数据类型（原始类型和引用类型）、操作符（算术、比较、逻辑、三元）、流程控制（条件语句、循环语句）、函数（声明式与表达式、...
10种常用的 JavaScript 语法，包括基本语法、条件语句、循环语句、数组、函数、对象、类、模板字符串、箭头函数、以及 async/await。
m0_75198698的博客
04-23 95
JavaScript 是一种弱类型语言，所以定义变量不需要指定类型，直接使用。JavaScript 中的条件语句包括。JavaScript 中的循环语句包括。
javascript不同方法实现1-100累加
tcy9099的专栏
07-16 8680
本文就三种方式实现1-100的累加，并简单分析一下不同方法的执行效率。 方法1：常规for循环 var total = 0; for(var i=1;i<=100;i++){ total += i; } 方法2：数组reduce var total = new Array(100).fill().map((item,index)=>index+1).reduce((total,cu...
JavaScript基础语法五（条件语句）
shao_xuan_的博客
10-26 961
JavaScript基础语法五（条件语句、循环语句）条件语句1、if语句2、比较操作符3、逻辑操作符 条件语句 1、if语句 条件语句是可以根据人们给出的各种条件作出决策。JavaScript使用条件语句来做判断。 在解释脚本时浏览器将依次执行这个脚本中的各条语句，我们可以在这个脚本用条件语句来设置一个条件，只有满足条件才能让更多的语句得到执行。最常见的语句就是if语句，if语句的基础语法： if (1>2){ alert("this is false"); } 由于1>2不满足，所以这个条件
JS Array数组几个循环实用方法总结
测试开发转型之旅上的小学生
03-29 3176
掌握JS Array的几个高效用法，编程事半功倍！
js 处理并且 、或者、 包含 、不包含的多条件查询
weixin_36706903的博客
01-16 5189
需求：前端的多条件查询，特别涉及到并且/或者，还有包含/不包含 如图 所以查询得时候的考虑一些问题，具体如下： 1、目前查询的时候拿到的用户数据格式如下： let data= [ {cond: { keyword:"年会", operate:"$regex"，//包含关系 }, { k...
JavaScript学习笔记整理_关于表达式和语句
11-23
表达式是计算值的单元，例如 `2 + 2`，而语句则是执行特定任务的代码块，如 `if` 语句或 `for` 循环。本文将深入探讨 `eval()` 函数、`delete` 运算符以及 `void` 运算符，同时还会讨论对象的创建、属性访问以及逻辑...
前端学习笔记-黑马程序员JS
最新发布
01-09
"前端学习笔记-黑马程序员JS" ...这篇前端学习笔记涵盖了 JavaScript 的基础知识，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象和 Web APIs 等知识点，为学习 JavaScript 提供了系统的指导。
程序员web前端视频教程（文档+代码+视频）.rar
05-29
学习JavaScript时，你需要掌握变量、数据类型、条件语句、循环、函数等基础语法，同时理解DOM（Document Object Model）的概念，以便能够操作网页元素。 Web前端开发还包括CSS（Cascading Style Sheets）的学习，它...
前端笔记大全，非常全！
05-23
JavaScript的核心概念包括变量、数据类型、运算符、控制流（条件语句、循环）、函数、对象和闭包。DOM（文档对象模型）操作是JavaScript与HTML交互的关键，允许动态修改网页内容。现代JavaScript有ES6（ECMAScript ...
JavaScript之条件语句、循环语句
派拉斯兔子的博客
01-19 473
一、条件语句 for( var i = 0; i < 10; i++){ document.write('a'); } 条件语句执行顺序： 先执行 var i = 0； 会把中间的 i < 10；当成条件拿到 i f（i < 10 ) 语句中，进行条件判断，进行执行 i f （ i<10）{在这里面执行document.write(‘a’)这条执行体，条件判断...
web前端-JavaScript流程控制语句（条件判断,条件分支和循环语句）
苏凉.py的博客
06-01 886
JS中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程, 使程序可以根据一定的条件来选择执行。使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。 注意：在条件表达式中判断为true才会执行后面的语句。含有多个条件表达式时用与运算符连接。语法一： 语法二： 语法三： 判断三数大小。在javascript中可以用prompt函数来输入内容，调用此函数，会在浏览器中弹出一个输入框输入内容。默认输入为字符串！！！ 效果： switch. …case
JavaScript语法基础：JS循环语句
m0_60416689的博客
12-28 2442
第1关：while类型 任务描述 质数的定义如下：大于1的自然数，且除了1和本身外没有别的因数。如2、3、5、7。 本关任务：利用循环结构求质数的和。 相关知识 在选择结构中，条件会被测试一次，成立则执行if内语句，结束后回到主线执行下一条语句。循环结构在执行结束后会再次判断条件是否成立，这样一直重复下去直到条件不成立。 本关将介绍while型循环结构。 while类型 while类型的循环结构如下： while(条件表达式) { //条件成立执行里面的语句 } 和条件语句一
Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组
小宇y的博客
12-22 1954
目录一、数组的创建（一）Array()构造函数（二）字面量方法二、数组元素的读写和遍历三、添加和删除数组元素（一）添加数组元素（二）删除数组元素（三）splice()方法四、二维数组及多维数组五、数组的搜索和排序（一）数组的排序（二）数组的搜索六、数组的截取和合并 一、数组的创建 JavaScript中数组和其它语言不一样，它的一个数组中可以存放多种类型的元素，即数组每一项可以是任何一种数据类型的数据，且数组的大小是可以动态调整的，即根据数据的增加而自动增长以容纳更多的数据。 有两种方式可以创建数组，分别是
JavaScript条件语句+循环语句+函数
ZhzetFor的博客
01-16 241
一、条件语句 1.if/else 与c++基本一致，如   var score=92; if (score>90){ alert("成绩非常优秀！"); } else{ alert("成绩不优秀！")： } 2.switch case 与c++基本一致 var xinqi=1; switch(xinqi){ case 1:  alert("今天是星期一");
【代码笔记】Web-JavaScript-JavaScript 条件语句
weixin_30757793的博客
12-18 50
一，效果图。 二，代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript 条件语句</title> </head> <body> <p&g...
JavaScript 基本语法 -- 条件语句 & 循环语句
weixin_33859504的博客
02-08 128
条件语句 条件语句（Conditional statement）是JavaScript里面的基本结构之一，程序根据表达式的真假决定执行或者跳过某个分支，于是，条件语句有时候也可以称为“分支语句” 1. if & else if & else 基本写法如下： if (表达式1) { // 如果表达式1为真，执行代码块1 代码块1 } else i...
web前端技术笔记（二）html 表单 和页面嵌套
行者
05-30 1938
1.相对路径和绝对路径 2.有序和无序列表 3.表格 4.注册表单 5.勾选框 6.下拉框 7.多行文本 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </hea...
web前端技术笔记（八）屏幕适配、移动端布局
行者
08-28 1836
屏幕适配移动端与PC端页面布局区别视口视网膜屏幕（retina屏幕）清晰度解决方案适配布局类型PC及移动端页面适配方法流体布局响应式布局 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将
JavaScript笔记.pdf
07-24
3. **流程控制**：这部分涵盖了条件语句(如if-else, switch-case)、循环结构(for, while, do-while)以及递归等，这些是编写程序逻辑的关键部分，确保代码根据不同的条件执行相应的代码块。 4. **Map和Set**：ES6...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值