JS中的函数和数组

一条要上岸的鱼

已于 2022-07-22 19:44:54 修改

阅读量388

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

于 2022-07-21 17:03:56 首次发布

本文链接：https://blog.csdn.net/wk3510/article/details/125914841

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、函数的理解

if(){ 代码块 } 通过条件表达式控制代码块是否执行解决某段代码执行
for(){ 代码块 } 通过条件表达式控制代码块执行次数解决连续出现的重复代码

function(){ 代码块 } 通过调用控制代码块何时执行通过调用函数的形式让函数的代码块执行

<script>
			function gaga(){
				document.write("八嘎");
				document.write("八嘎");
				document.write("八嘎");
			}
			gaga();
</script>

js中函数的定义:

        function 名字() {代码块}   此时代码是不执行的

js中函数的调用:         当调用一次函数的时候代码块执行一次

        名字();

二、事件绑定

<button onclick="color()">改变颜色</button>
		<script>
			
			function color(){
				document.body.style.backgroundColor="red";
				document.body.style.backgroundImage="url(img/1.jpg)";
			}
		</script>

<button onclick="color()">改变颜色与背景</button>
		<script>
			function color(){
				document.body.style.backgroundColor=prompt("请输入颜色");
				document.body.style.backgroundImage="url(img/13.jpg)";
			}
		</script>

<button onclick="color()">切换颜色</button>
		
		<script>
			function color(){
				if(document.body.style.backgroundColor=="red"){
					document.body.style.backgroundColor="purple";
				}else{
					document.body.style.backgroundColor="red";
				}
			}
		</script>

2.1 JS猜数字

<input type="text" id="name"/>
		<button onclick="guess()">猜数字</button>
		<div id="zhi"></div>
		<script>
			var  b = parseInt(Math.random()*50);
			function guess(){
				var a = document.getElementById("name").value ;
				if(a>b){
					document.getElementById("zhi").innerHTML="猜大了";
				}else if(a<b){
					document.getElementById("zhi").innerHTML="猜小了";
				}else{
					document.getElementById("zhi").innerHTML="猜对了";
				}
			}
			
		</script>

2.2 函数参数计算器

数:<input type="text" id="a"/><br>
		数:<input type="text" id="b"/><br>
		<button onclick="insert('+')">添加</button>
		<button onclick="insert('-')">减少</button>
		<button onclick="insert('*')">乘法</button>
		<button onclick="insert('/')">除法</button>
		<div id="y"></div>
		<script>
			
			function insert(t){
				y.innerHTML=eval(a.value +t+ b.value);
			}
			
		</script>

三、数组

数组（Array）是有序的元素序列。
若将有限个类型相同的变量的集合命名，那么这个名称为数组名。组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。
数组是在程序设计中，为了处理方便，把具有相同类型的若干元素按有序的形式组织起来的一种形式。这些有序排列的同类数据元素的集合称为数组。

数组：能存储一组数据的数据类型。我们之前学习的变量只能存储一个数据，数据能存储多个数据

3.1 数组的创建

<script>
			
			var arr = new Array(112,51,123,1,5156,132,132,1);
			console.log(arr);
			
			
			var arr1 = [];
			arr1 =[132,03,15,13,123,156,156];
			console.log(arr1);
			
</script>

3.2 数组的存取

<script>
			var arr = [];
			
			arr[0] = 55;
			console.log(arr);
			
			arr.push(99,88,77,33,2,2,1);
			console.log(arr);
			
			arr.splice(4,1);
			console.log(arr);
			
			arr.splice(3,0,444444444);
			console.log(arr);
			
			for(i=0;i<arr.length;i++){
				console.log(arr[i]);
			}
			
 </script>

3.3 数据源思想

<button id="www">变变变</button>
		<script>
			var i=0;
			var arr = ["yellow","blue","red","green"];
			
			www.onclick = function(){
				document.body.style.backgroundColor=arr[i%arr.length];
				i++;
			}
			
		</script>

3.4 多按钮点击

<button class="a">uu</button>
		<button >pp</button>
		<button >ii</button>
		<script>
			var arr = document.getElementsByTagName("button");
			for(i=0;i<arr.length;i++){
				var mmm = arr[i];
				mmm.onclick = function(){
					document.getElementsByClassName("a")[0].className="";
					this.className="a";
				}
			}
		</script>

3.5 冒泡排序

<script>
			
			var arr = [1,5,9,3,4,2,8,7];
			
			for(i=1;i<arr.length;i++){
				for(j=0;j<arr.length-1;j++){
					if(arr[j]>arr[j+1]){
						temp = arr[j];
						arr[j] = arr[j+1];
						arr[j+1] = temp;
					}
				}
			}
			console.log(arr);
</script>