C1-任务04 JavaScript编程

2023-07-17 10:52:28

C1-04 LGZ小组

说明

⼤多数⼩公司的⼯程师需要处理的数据量很少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。⼤⼚就完全不同了——⼤⼚的⼯程师可能会⾯对⼏千万甚⾄⼏亿的注册⽤户，开发的是TB、PB级别的数据处理系统，需要利⽤各种中间件整合衔接多个上下游系统——可⽤性、健壮性、响应速度这些最基本的性能指标是⼯程师时时刻刻都要关注和解决的问题。⼀个看似简单的使⽤ArrayList还是LinkedList的决定，就可能会造成系统⼏千倍的性能差别——这既是整个计算机科学最让⼈着迷的地⽅，也是最能体现思维模式、开发⽔平、动⼿能⼒的领域。

任务一

一、⾸先，能够⽤HTML + CSS + JavaScript在⻚⾯正中⽣成⼀幅⼴告图⽚

打开前端编辑器，我用的是sublime
打开sublime编辑器，Ctrl+N新建文件，Ctrl+S保存将此文件命名，后缀必须是.html 我的命名有点随意是1.html
在1.html的同目录下建立一个名为images的文件，此文件用来保存图片
分析上图需要用到什么HTML标签？需要用到什么CSS样式？
下图是我所调试(右击–在浏览器中打开)出来的效果

6. 代码如下

<!DOCTYPE html>
<html>
	<head>
		<title>公告图片</title>
		<style type="text/css">
			.c4{
				border:1px solid #000;
				margin:0px auto;
				width: 500px;
				height: 500px;
			}
			img{
				padding-top: 65px;
				padding-left: 50px;
				width: 380px;
				height: 320px;
			}
		</style>
	</head>
	<body>
		<div class="c4">
			<img src="images/1.PNG">
		</div>
	</body>
</html>

代码讲解

二、其次，⽤JavaScript数组在⻚⾯上放置多张⼴告图⽚，同时动态计算不同⼴告位之间的布局，实现⽔平等间距布局

分析上图，知道自己需要用的的js语句
我直插入了两张照片，效果图如下
代码如下

<!DOCTYPE html>
<html>
	<head>
		<title>公告图片</title>
		<style type="text/css">
			.c4{
				border:1px solid #000;
				margin:0px auto;
				width: 500px;
				height: 500px;
			}
			img{
				padding-top: 165px;
				padding-left: 40px;
				width: 180px;
				height: 120px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var cImg1 = document.createElement("img");//创建一个img元素
				var cImg2 = document.createElement("img");//创建一个img元素
				cImg1.src = "images/1.PNG";
				cImg2.src = "images/2.PNG";
				var c = document.getElementsByClassName("c4")[0];
				c.appendChild(cImg1);
				c.appendChild(cImg2);
			}
		</script>
	</head>
	<body>
		<div class="c4">
		</div>
	</body>
</html>

代码讲解

三、最后，⽤JavaScript代码实现多张⼴告图⽚轮播效果：在⻚⾯正中每隔3秒切换不同的⼴告图⽚，多张图⽚轮流显示

分析要求，知道自己需要用到什么js语句
效果图如下，因为我这个不会录视频所以截了屏
刚开始的效果：

3秒钟之后的效果
代码如下

<!DOCTYPE html>
<html>
	<head>
		<title>公告图片</title>
		<style type="text/css">
			.c4{
				border:1px solid #000;
				margin:0px auto;
				width: 500px;
				height: 500px;
			}
			img{
				margin-top: 100px;
				margin-left: 100px;

			}
		</style>
		
	</head>
	<body>
		<div class="c4">
			<img src="images/1.PNG" id="i1" style="display: block; width: 280px;height: 220px;">
			<img src="images/2.PNG" id="i2" style="display: none;width: 280px;height: 220px;">
		</div>
	</body>
</html>
<script type="text/javascript">
			var i1 = document.getElementById("i1");
			var i2 = document.getElementById("i2");
			function n1(){
				i1.style.display="none";
			}
			function b1(){
				i1.style.display="block";
			}
			function b2(){
				i2.style.display="block";
			}
			function n2(){
				i2.style.display="none";
			}
			setInterval("n1()",3000);
			setInterval("b2()",3000);
			setInterval("n2()",6000);
			setInterval("b1()",6000);
</script>

部分代码讲解：

任务二

在code.org上以「所⻅即所得（WYSIWYG）」的编码⽅式完成「应⽤实验室」系列任务
变量，条件和函数相关任务（ https://studio.code.org/s/csp4-2020 ）
列表、循环和遍历相关任务（ https://studio.code.org/s/csp5-2020 ）
计算机程序算法相关的任务（ https://studio.code.org/s/csp6-2020 ）
可选任务：参数、返回值和库（ https://studio.code.org/s/csp7-2020 ）
加深对代码逻辑和程序语法的理解

点击这3个链接进行学习

自测

实现对数组[0,9,12,1,6,3,7,11]的冒泡排序

答：代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>冒泡排序</title>
	</head>
	<script type="text/javascript">
		var num=[0,9,12,1,6,3,7,11];
		console.log(num);
		for(var j=0;j<num.length-1;j++){
			for (var i = 0; i < num.length; i++) {
				if(num[i]>num[i+1]){
					var temp = num[i];
					num[i]=num[i+1];
					num[i+1]=temp;
				}
			}
		}
		document.documentElement.innerHTML=num;
	</script>
	<body>
		<div id="n"></div>
	</body>
</html>

代码解析
效果如下：

解释JavaScript中的堆和栈数据结构的区别

答：栈：是一种先进后出的数据结构，栈内存是内存中用于存放临时变量的一片内存块，当声明一个变量的时候，这个变量就会存储到栈内存中，动态分配的控件一般有程序员分配释放，若程序员不释放最后会由OS回受，分配方式类似于链表。
堆：队列优先，先进先出；有操作系统自动分配释放，存放函数的参数值，局部变量的值等。操作方式类似于数据结构中的栈

a=1,b=2使⽤⾄少三种⽅法交换变量a和b的值

答：
效果图如下：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>转换两个数</title>
	</head>
	<script type="text/javascript">
		var a = 1;
		var b = 2;
		// 第一种方式：引入临时变量进行数据交换
		var temp = a;
		var a = b;
		var b = temp;
		console.log(a,b);
		// 第二种方式：运用数字之间的运算进行数据交换
		a = a + b;
		b = Math.abs(a - b);
		a = Math.abs(b - a);
		console.log(a,b);
		// 第三种方式：运用数据进行数据交换
		var a2=[a,b];
		a=a2[1];
		b=a2[0];
		console.log(a,b);
	</script>
	<body>
	
	</body>
</html>

代码图片

使⽤for循环求出0～300之间的奇数之和

答：代码如下

var h=0;
		for (var i = 0; i < 300; i++) {
			if(i%2 != 0){
				h+=i;
			}
		}
		console.log(h);

去除数组[8, 7, 2, 1, 5, 0, 1, 9, 2]中重复的值，相同的值只保留⼀个

答：我用的是for循环去重
代码如下

var number=[8, 7, 2, 1, 5, 0, 1, 9, 2];
	for (var i = 0; i < number.length; i++) {
		for(var j = i+1;j<number.length;j++){
			if(number[i]==number[j]){
				number.splice(j,1);
				j--;
			}
		}
	}
	console.log(number);

使⽤⾮递归⽅式对数组[8, 7, 12, 1, 5, 0, 6, 9, 2]执⾏折半查找

答：
代码如下

function binSearch(arr,x){
		var lowPoint=1;
		var higPoint = arr.length;
		var returnValue = -1;
		var midPoint;
		var found = false;
		while((lowPoint<=higPoint)&&(!found)){
			midPoint=Math.ceil((lowPoint+higPoint)/2);
			if(x>arr[midPoint-1]){
				lowPoint=midPoint+1;
			}else if(x<arr[midPoint-1]){
				higPoint=midPoint-1;
			}else if(x=arr[midPoint-1]){
				found=true
			}
		}
		if(found){
			returnValue = midPoint;
		}
		return returnValue;
	}
	var arr=[8, 7, 12, 1, 5, 0, 6, 9, 2];
	console.log(binSearch(arr,'6'));

码农公寓

C1-04 LGZ小组

说明

任务一

任务二

自测

相关文章