JavaScript(2)

不会敲代码呀～

于 2022-07-02 15:13:10 发布

阅读量211

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67509637/article/details/125573095

版权

7、流程控制

7.1顺序

自上而下执行的语句

7.2分支

分支：选择，当条件满足时，执行某段代码，否则跳过这段代码

7.2.1 if分支语句

格式1：if(条件){

如果条件为true，则执行此部分

}

格式2：if(条件){

如果条件为true，则执行此部分

} else{

否则执行此部分

}

格式3：if(条件1){

如果条件1为true，则执行此部分，不会判断下面的条件

}else if(条件2){

如果条件2为true，则执行此部分，不会判断下面的条件

}...else{

如果以上条件都不满足，则执行此部分

}

if在执行语句是一条的情况下，{}可以省略
if语句条件判断时，false、空串、0、null、undefined代表假，其他情况代表真

7.2.2 switch：开关语句

switch(变量){

case 值1：

如果变量和值1相等，则执行此部分diamond

break;

...

default:

如果变量和所有值都不相等，则执行此部分

break;

}

注意：1.break可以省略，如果没有break，会继续执行，直到遇到一个break或者程序结束

2.匹配是严格等于，即类型，值均相等

3.default可以放在任意位置，以上没有匹配时默认执行

7.3循环

循环：反复判断，直到条件不满足为止

7.3.1 while循环语法

1.初始变量

while(2.循环条件){

3.循环体

4.迭代因子

}

执行顺序：1234 234 234...

7.3.2 for循环语法

for(1.初始变量; 2.循环条件; 4.迭代因子){

3.循环体

}

执行顺序：1234 234 234...

冒泡排序

<script type="text/javascript">
		var arr = [200, 9, 150, 170, 60, 99];
		for(var i = 0; i < arr.length - 1; i++) {
			for(var j = 0; j < arr.length - 1 - i; j++) {
				// 升序（由小到大）
				if(arr[j] > arr[j + 1]) {
					// 交换
					var t = arr[j];
					arr[j] = arr[j + 1];
					arr[j + 1] = t;
				}
			}
		}
		document.write(arr);
	</script>

7.3.3 do while循环语法

1.初始变量

do{

3.循环体

4.迭代因子

}while(2.循环条件);

执行顺序：1342 342 342...

至少执行一次

7.3.4 循环控制

break：终止整个循环
continue：终止本次循环，还会执行下次循环

注意：break，continue下的代码不会被执行

8、随机数

产生随机数[min,max)：console.log(parseInt(Math.random()*(max-min))+min);

9、单击事件

onclick：当单击某个元素时触发事件

获取页面标签（元素）对象

document.getElementById("id值")

找到图片myImg1 => get获得 Element元素 ById通过id

通过 元素.属性 获得或设置属性值

 <body>

        <img id="myImg1" src="img/李现.jpg" width="200" height="300" onclick="show('img/小岳1.jpg')" />
    </body>
    <script type="text/javascript">
        /*function show(){
            //alert("李现被点了")
            //获取页面标签（元素）对象：document.getElementById("id值");
            //找到图片myImg1 =》 get获得   Element元素   ById通过id
            var img = document.getElementById("myImg1");
            img.src = "img/小岳1.jpg";
        }*/
        
        // 利用事件传值
        function show(n){
            var img2 = document.getElementById("myImg1");
            img2.src = n;
        }
    </script>

10、利用id获得输入框(input)的值

元素.value

<body>
		姓名：<input type="text" placeholder="输入用户名" id="account" /><br />
		密码：<input type="password" placeholder="输入密码" id="pwd" /><br />
		<input type="button" value="登录" onclick="login()" />
	</body>
	<script type="text/javascript">
		function login(){
			var account = document.getElementById("account");
			var pwd = document.getElementById("pwd");
			if(account.value == "admin" && pwd.value == "123"){
				alert("登录成功");
			}else{
				alert("登录失败");
				// 清空
				account.value = "";
				pwd.value = "";
			}
		}
	</script>

11、修改标签体内容

元素.innerHTML = 内容; 识别标签

元素.innerText = 内容；不识别标签

	<body>
		<img src="img/3.jpeg" onclick="show()" />
		<div id="div">hello</div>
		<h1 id="h1">title</h1>
	</body>
	<script type="text/javascript">
		function show(){
			var d1 = document.getElementById("div");
			var h1 = document.getElementById("h1");
			/*
			 * 修改标签体内容：
			 * 元素.innerHTML = 内容; 识别标签
			 * 元素.innerText = 内容; 不识别标签
			 */
			d1.innerHTML = '<font color="red">你好</font>';
			h1.innerText = '<font color="red">标题...</font>';
		}
	</script>

12、数组

数组：可以存储多个数据的类型
每一个元素有对应的下标，且下标从0开始
数组长度：数组名字.length

声明数组的4种方式：

1.声明数组：var 数组名 = new Array(元素1, 元素2, ...);

 var names = new Array("tom", "amy", "john", "jack", "rose", 1);

        // 遍历数组
        for(var i = 0; i < names.length; i++) {
            document.write(names[i] + " ");
        }

        for(var n in names) {
            document.write("<br />" + names[n] + " ");
        }
        
        document.write(names)

2.声明数组：var 数组名 = new Array(); 其数组长度是0，但是可以通过索引给数组元素进行赋值

 // 声明一个空数组
        var names = new Array();
        console.log(names.length);//0
        names[0] = "tom";
        console.log(names.length);//1
        names[2] = "amy";
        console.log(names.length);//3
        // 未赋值的元素，默认是undefined
        console.log(names[1]);

3.声明数组：var 数组名 = new Array(长度); //数组个数，不等同于约束他的个数

<script type="text/javascript">
        var names = new Array(3);
        console.log(names.length); //3
        console.log(names[0]);//undefined
        names[0] = "a";
        names[1] = "b";
        names[2] = "c";
        names[8] = "d";
        names[10] = 'w';
        console.log(names.length); //11
    </script>

4.声明数组：var 数组名 = [元素1, 元素2...];

   var movies = ["送你一朵小红花","八佰","齐天大圣"];
        console.log(movies[2]);
        
        var names = [];
        console.log(names.length);
        names[0] = "西游记";
        console.log(names.length);

二维数组：将一维数组当成元素存储在数组中
二维数组需要用两个下标确定

<script type="text/javascript">
		//二维数组：将一维数组当成元素存储在数组中
		var arr1 = [
			["孙悟空", "猪八戒", "沙和尚", "白骨精"],
			["紫薇", "五阿哥", "尔康"]
		];
		console.log(arr1[1][2]); //尔康

		// 每一部电视剧输出一行
		var result = "";
		for(var i = 0; i < arr1.length; i++) {
			for(var j = 0; j < arr1[i].length; j++) {
				result += arr1[i][j] + " ";
			}
			result += "<br/>";
		}
		document.write(result);
	</script>

不会敲代码呀～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(2)

自上而下执行的语句分支：选择，当条件满足时，执行某段代码，否则跳过这段代码注意：1.break可以省略，如果没有break，会继续执行，直到遇到一个break或者程序结束 2.匹配是严格等于，即类型，值均相等 3.default可以放在任意位置，以上没有匹配时默认执行循环：反复判断，直到条件不满足为止冒泡排序注意：break，continue下的代码不会被执行产生随机数[min,max)：console.log(parseInt(Math.random()
复制链接

扫一扫