C1见习工程师认证C1-04任务记录&教学

最新推荐文章于 2024-08-27 15:59:21 发布

深海重苹果

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量1.4k

点赞数 4

分类专栏： C1认证文章标签： javascript css html js 算法

本文链接：https://blog.csdn.net/shenhaizpg/article/details/116805266

版权

C1认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

C1-04

任务一：生成图片广告

问题1：用HTML+CSS＋JavaScript在页面正中生成一幅广告图片

在这里插入图片描述
这里由于题目没有限制实现的工具，所以我们可以直接使用txt编写代码转html格式运行查看效果。
这里我使用的是Notepad++提取码：uf3n。可以理解为一个高级文本文档，编写普通代码比较方便。
代码如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #abc{
	width:800px;
	height:400px;
    position:absolute;
}
</style>
</head>
<body>
<div>
<img id="abc" src="ad.jpg">
</div>
</body>
<script type="text/javascript">
var div = document.getElementById("abc");
var window_width = document.documentElement.clientWidth;
var window_height = document.documentElement.clientHeight;
div.style.top = (window_height-400) / 2 + "px";
div.style.left = (window_width-800) / 2 + "px";
</script>
</html>

这里的ad.jpg是我html文件同目录下的jpg文件，所以可以直接调用。这里用的思路是利用JavaScript动态计算，由于图片之前的尺寸记不清楚了，我这里直接用css重设图片的大小方便计算了。
实现效果如下：~~把以前打职业做主播的封面图拿来用了请无视图片内容哈哈哈~~
在这里插入图片描述

问题2：用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局

在这里插入图片描述
直接上代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    *{
	padding:0;
	margin:0;
}
    .abc{
	width:200px;
	height:100px;
	margin-top:20px;
	margin-left:0px;
	float:left;
}
</style>
</head>
<body>
<div>
<img class="abc" src="ad.jpg">
<img class="abc" src="ad.jpg">
<img class="abc" src="ad.jpg">
<img class="abc" src="ad.jpg">
<img class="abc" src="ad.jpg">
</div>
</body>
<script type="text/javascript">
var window_width = document.documentElement.clientWidth;
var div_s = document.getElementsByClassName("abc");
for (var i = 0; i < div_s.length; i++) {
	div_s[i].style.marginLeft = (window_width - div_s.length * div_s[i].offsetWidth) / (div_s.length + 1) + "px";
}
</script>
</html>

效果如下：
在这里插入图片描述

问题3：用JavaScript代码实现多张广告图片轮播效果∶ 在页面正中每隔3秒切换不同的广告图片，多张图片轮流显示

在这里插入图片描述
也是直接上代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    *{
	padding:0;
	margin:0;
}
    #abc{
	width: 800px;
	height: 400px;
	position: absolute;
}
</style>
</head>
<body>
<div>
<img id="abc" src="ad.jpg">
</div>
</body>
<script type="text/javascript">
var div = document.getElementById("abc");
var window_width = document.documentElement.clientWidth;
var window_height = document.documentElement.clientHeight;
div.style.top = (window_height-400) / 2 + "px";
div.style.left = (window_width-800) / 2 + "px";
var a = ["ad.jpg", "ad2.jpg", "ad3.jpg"];
var num = 1;
setInterval(function() {
	document.getElementsByTagName("img")[0].src = a[num];
	num++;
	if (num == 3) {
		num = 0;
	}
}, 3000);
</script>
</html>

效果图如下：
在这里插入图片描述
这里我们的思路就是首先实现问题1中的完全居中，然后再实现图片的切换。

任务二：程序逻辑训练

变量，条件和函数相关任务

问题1：变量探索

1-1

Overview

Develop a mental model for how information is stored and processed by programs.

1-2

My Pet Rock App

Try out this app with a friend. Then discuss the new features this app has. Be ready to share your thoughts with the class.

打开这个任务后是一个小型APP，点击运行后，可以通过点击图片来增加次数，同时还可以使用已经点击的次数来升级每次点击增加的次数（如：消耗20次点击可以将接下来的点击每次算2个、消耗100次点击可以将接下来的点击每次算20个）如下图所示：
在这里插入图片描述

1-3

Poetry App

Try this app with a partner.

这个任务又是一个小型APP，我们需要点击单词组成一首小诗。~~喂！为什么我们还要写诗的？~~
在这里插入图片描述
这里我们并不需要把单词全部用完，就随便写了一句。

1-4

Thermostat App

Do This: With a partner test this app.
Try:
username: raysHouse
password: hotandcold
Also try:
username: jillsHouse
password: hotandcold

接下来这个任务是一个模拟登陆APP，我们需要输入题目里给的两组账号密码，如下：
在这里插入图片描述
我们可见这两组账号密码均能登陆，登录后是一个华氏度-摄氏度的简易温度计。

1-5

根据题目我们发现应该选B，因为最后输出有字符串“The score is”加上score本身的数值（3+1），输出应为The score is 4。

问题2：变量调查

2-1

Overview

Investigate and modify sample apps that use variables and learn common programming patterns with variables.

2-2

这个任务是一个显示华氏度的模拟温度计，我们按照要求运行如下：
在这里插入图片描述
可见变量储存的是一个数值（华氏度），而我们点“上”按键可以给变量+1，反之-1。

2-3

Do This

Make a watcher for the temp variable and run the code. This will help you track the value of the variable as it changes.
Run the program at least once. Then with a partner, choose one of two code sections below
Section 1: Lines 1-12
Section 2: Lines 14-21
Read the code in your section carefully, making sure you understand how each line works.
Discuss
Find a group that investigated a different section and:
Explain what your section does
Call out any lines of code you thought were interesting or confusing
Ask good questions about how their section works
Modify
Right now temperature changes by one degree when the buttons are clicked. Modify the code so the temperature changes by two degrees when the buttons are clicked.

这个任务要求我们阅读实现这个APP的代码，以及改变点一次数字变化1的功能为点一次数字变化2，这个代码的可视化还是非常高的，我们将两个按钮部分的代码的1改为2即可。
在这里插入图片描述

2-4

这个任务让我们查看Math.round的功能以及“ F”的空格的功能。
当我们删除Math.round后，APP便不能正确显示数字了，可见Math.round可以使显示数字为整数。
在这里插入图片描述
删掉F前的空格会使显示的时候数字和F直接没有空格，这边其实就是一个字符串，空格也是字符串的一部分。

2-5

这个任务点击运行后直接可以登陆，我们发现这个APP已经更加精准了，可以正确显示摄氏度和华氏度的对应温度。
在这里插入图片描述

2-6

Do This

Read the Code: Investigate the code for this new version of the Thermostat App. What’s changed? What’s been added? Discuss with a partner.
Discuss with the Class: What’s happening on line 40? Hover over the getText() block in the toolbox to read its documentation.
Modify: Using concatenation, add an exclamation point “!” to the end of the string stored in myName so the following is displayed:

根据这里的要求图，我们直接对40行的代码字符串进行改动，如下：

  myName = "Hi,Lola!" + getText("nameInput");

在这里插入图片描述

2-7

Updating Variables

Explain in your own words the process of creating and updating a variable. How does the Counter Pattern with Event work?

这里就是让我们解释一下累加器的作用，非常简单：就是点击按钮后用变量的值+1给原变量赋值。

问题3：变量练习

3-1

3-2

在这里插入图片描述

var myFavoriteNumber;
var myFavoriteFood;
// Change this line
myFavoriteNumber = 1;
// Change this line
myFavoriteFood = "pizza";
console.log("My favorite number is");
console.log(myFavoriteNumber);
console.log("My favorite food is");
console.log(myFavoriteFood);

这个任务就是让我们学会如何定义变量，且变量的值可以在范围内随意修改。

3-3

这个任务告诉我们几个定义变量的规则，不能有空格，但可以有下划线，使用变量时注意名称一致。

3-4

变量的运算，小学一年级的知识，不多讲啦。

3-5

也是变量的运算。

3-6

这个任务讲的是对于字符串的连接，使用+号连接字符串和变量即可，这里和java里是类似的。

3-7

这个任务要求我们让加20的按钮生效，只需要仿照加5的按钮即可。

dollars = dollars + 20;
  setProperty("dollarsLabel","text","$"+dollars);
  playSound("sound://category_digital/ring_1.mp3");

效果如下：
在这里插入图片描述

3-8

这个任务的APP是用于记录提醒的，但是由于代码的问题，提醒无法换行，所以我对代码进行一定的修改，加上转义字符\n进行每条提醒的换行，实现如下：

allReminders = allReminders + '\n' + newReminder;

观察代码我们可以发现代码的思路就是将新输入的提醒装入allReminders的字符串中，我们只需要在装入前的allReminders和新输入的newReminder之间加入一个转义字符\n来换行即可实现每个提醒换行的提醒列表，如下：
在这里插入图片描述

3-10

这里我们对代码进行分析，发现在实现累加时又错误地重新定义了一次变量，将var删除即可。

clicks = clicks + 1;

在这里插入图片描述

3-11

这个任务我们模仿给出的成人票的代码，补全另外的代码，效果如下：

onEvent("childButton","click",function(){
tickets = tickets + 1;
  // Increase dollars collected
  dollars = dollars +  childPrice;
  setProperty("dollarsLabel", "text", "$" + dollars);
  setProperty("ticketsLabel", "text", tickets + " tickets");
  playSound("sound://category_digital/coin_2.mp3");
});

// Add code to make this button work
onEvent("seniorButton","click",function(){
tickets = tickets + 1;
  // Increase dollars collected
  dollars = dollars + seniorPrice;
  setProperty("dollarsLabel", "text", "$" + dollars);
  setProperty("ticketsLabel", "text", tickets + " tickets");
  playSound("sound://category_digital/coin_2.mp3");
});

在这里插入图片描述

3-12

这里是一个问题，我们发现虽然一开始给变量赋值为2，但是被后续的5给覆盖了，所以最终的结果为5+1=6。

3-13

这里是随机数，注意上下限都能取，还要注意审题，是不可能出现的答案，所以应该选D，因为随机数只赋值了一次，所以a和b的大小应该始终不变。

问题5：条件探索

5-1

Overview

Develop a mental model for how computers make decisions.

5-3

Updating Variables

Can a computer evaluate an expression to something between true and false? Can you write an expression to deal with a “maybe” answer?

bool便可判断真假，但是也许无法判断。

问题6：条件调查

6-1

Overview

Investigate and modify sample apps that use conditionals and learn common programming patterns with conditionals.

6-3

Right now the game keeps going when the player has 0 lives. Fix this problem.

if(lives <= 0)

这里的程序错误就是生命为0时还能继续游戏，所以我们将这个条件判定改为<=0，这样生命为0时游戏就技术了，运行如下：
在这里插入图片描述

6-6

if(score > 15){
    setProperty("lemon","width",30);
    setProperty("lemon","height",30);
  }
  else if (score > 10)

题目要求我们设置条件判定，在分数大于15时，柠檬会更小，我们只需增加判定，并且将大于10的的判定改为else if即可，运行如下：
在这里插入图片描述

6-8

这个任务我们只需要在else if中加一段账号密码即可，代码如下：

else if ((userName == "csdn") && (password == "csdncsdn")){
    setScreen("gameScreen");
    playSound("sound://category_alerts/vibrant_game_carton_start_game_2_long.mp3", false);
  }

问题7：条件练习

7-1

Overview
Practice programming with conditionals through a set of programming puzzles.

7-2

Do This

Read the code and predict what will appear in the console
Run the code and watch how each question is answered.
Add code to answer the last two questions. You’ll need to create a boolean expression for each one.

这里就是根据题目写出布尔表达式就行，代码如下：

console.log("Q5: Is ten less than or equal to ten?");
console.log(10 <= 10);
console.log("Q6: Is ten minus three greater than three times three?");
console.log((10 - 3) > (3 * 3));

7-3

Do This

Read the code and predict how questions 1 or 2 will be answered.
Run the code and watch the console to check your prediction
Add code to answer questions 3 and 4. You will need to write boolean expressions with variables.

这里要求的是写出布尔值、表达式，代码完善如下：

var score = 10;
var lives = 3;

// Predict how questions 1 and 2 will be answered, then run the code to
// check your prediction.
console.log("Q1: Is score plus lives less than thirteen?");
console.log((score + lives) < 13);
console.log("false");

console.log("Q2: Is lives times three equal to score?");
console.log((lives * 3) == score);
console.log("false");

// Add code to answer the following two questions
console.log("Q3: Is score minus lives greater than five?");
console.log((score - lives) > 5);
console.log("true");

// 
console.log("Q4: Is score times two greater than or equal to lives times ten?");
console.log((score * 2) >= (live * 10));
console.log("false");

7-4

这个任务就是与或非的判定，代码完善如下：

var fruitServings = 3;
var vegServings = 5;
var grainServings = 4;

// Predict how the first three questions will be answered. Then run the code
// to check your predictions.
console.log("Q1: Am I eating more than 3 fruitservings AND more than 5 vegetable servings?");
console.log((fruitServings > 3 )&&(vegServings > 5));
console.log("false");

console.log("Q2: Am I eating 4 or fewer grain servings AND 4 or fewer fruit servings?");
console.log((grainServings <= 4) && (fruitServings <= 4));
console.log("true");

console.log("Q3: Am I eating exactly 5 grainServings OR any amount besides 2 fruitServings");
console.log((grainServings == 5) || (fruitServings != 2));
console.log("true");

// Add code to answer questions 4 and 5.
console.log("Q4: Am I eating exactly 3 grain servings OR exactly 3 fruit servings?");
console.log((grainServings == 3) || (fruitServings == 3));
console.log("true");

console.log("Q5: Am I eating 5 or fewer vegetable servings AND any amount besides 5 grain servings?");
console.log((vegServings <= 5) && (grainServings != 5));
console.log("true");

7-5

这里只需要将if条件中加入判定语句即可：

if(clicks >= 5)

在这里插入图片描述

7-6

这一题和上一题类似，代码完善如下：

if(clicks >= 5){
    setProperty("star", "icon-color", "orange");
  }

在这里插入图片描述

7-7

话不多说，上代码：

if(clicks < 5){
    setProperty("star", "icon-color", "red");
  } else if (clicks < 10) {
    setProperty("star", "icon-color", "orange");
  }
    // add more else-if statements here
     else if (clicks < 15) {
    setProperty("star", "icon-color", "yellow");
     }
     else if (clicks < 20) {
    setProperty("star", "icon-color", "green");
     }
     else if (clicks < 25) {
    setProperty("star", "icon-color", "blue");
     }
      else if (clicks < 30) {
    setProperty("star", "icon-color", "violet");
  } else {
 	setProperty("star", "icon-color", "pink");
  }

在这里插入图片描述

7-8

这里不会变橙色的原因就是橙色的判定条件问题，前置的条件已经覆盖了橙色的区间，导致只能实现前面的颜色，我们只需要改变一下条件即可，代码如下：

else if (clicks < 18) {
    setProperty("star", "icon-color", "orange");
  }

在这里插入图片描述

7-9

这个题目就是让我们了解变量也能直接定义为布尔表达式，我们添加下面这段代码即可。

if(a > 2){
  b = true;
}else {
  b = false;
}
console.log(b);

7-10

这个题目是获取输入的值，再进行逻辑判断，代码如下：

age = getNumber("ageNumber");
  money = getNumber("moneyNumber");
if (age >= 14 && money == 40 )

7-11

相比上个问题，这个就是增加>=40金钱也能判断为true，修改如下即可：

if (age >= 14 && money >= 40 )

7-12

AP Reference Sheet

The AP Reference Sheet shows how Conditional-type questions will be represented on the exam. Read through these sections of the Reference Sheet and answer the question below.

Practice Question

What will be displayed after this code segment is run?

明显选B。

7-13

Practice Question

The program below asks a user to type in a number and then will output a message. What number will a user need to input for the message “COLD” to be displayed?
number <- INPUT()
IF (number >= 10)
{
IF (number <= 20)
{
 DISPLAY("MEDIUM")
}
ELSE
{
DISPLAY("HOT")
}
}
ELSE
{
DISPLAY("COLD")
}

观察代码可知当number<10时返回“COLD”，所以选A。
CODE剩余部分待续

列表、循环和遍历相关任务

问题1：

计算机程序算法相关的任务

问题1：

参数、返回值和库

问题1：

CODE剩余部分待续

拓展：实现多级联动菜单

用HTML＋ CSS＋ JavaScript实现网页上常见的「省市区多级联动下拉菜单」（理解树型数据结构）

在这里插入图片描述
拓展部分待续

自测

问题1：实现对数组:[0，9，12，1，6，3，7，11]的冒泡排序

var arr = [0, 9, 12, 1, 6, 3, 7, 11];
	for (let i = 0; i < arr.length; i++) {
		for (let j = 0; j < arr.length - 1 - i; j++) {
			if (arr[j] > arr[j + 1]) {
				let temp = arr[j];
				arr[j] = arr[j + 1];
				arr[j + 1] = temp;
			}
		}
	}
	for (let i = 0; i < arr.length; i++) {
		console.log(arr[i])
	}

问题2：解释JavaScript中的堆和栈数据结构的区别

栈内存是自动分配相对固定大小的内存空间，并由系统自动释放:，方便操作和管理；
堆内存是动态分配内存，内存大小不一，也不会自动释放，方便开辟新的内存空间。

问题3：a=1，b=2，使用至少三种方法交换变量a和b的值

方法一：定义中间变量temp

    var temp;
	temp = a;
	a = b;
	b = temp;

方法二：通过和运算存储和值，再通过减运算实现互换

    a = a + b;
	b = a - b; 
	a = a - b;

方法三：异或运算

    a ^=b;
	b ^=a;
	a ^=b;

方法四：对象赋值

var temp = {
		a: b,
		b: a
	};
	a = temp.a;
	b = temp.b;

问题4：使用for循环求出0～300之间的奇数之和

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

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

方法一：indexof()去重

var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
	var array = [];
	for (var i = 0; i < arr.length; i++) {
		if (array.indexOf(arr[i]) === -1) {
			array.push(arr[i])
		}
	}
	// 打印
	for (let i = 0; i < array.length; i++) {
		console.log(array[i])
	}

方法二：双层for循环遍历，插入新数组

var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
  var newArr = [];
  for(var i = 0, len = arr.length; i < len; i++){
    for(var j = i + 1; j < len; j++){
      if(arr[i] === arr[j]){
        j = ++i;
      }
    }
    newArr.push(arr[i]);
  }
  return newArr;

问题6：使用非递归方式对数组[8，7，12，1，5，0，6，9，2]执行折半查找

function search(arr,num) {
            var l=arr.length;
            var left=0;
            var right=l-1;
            var center=Math.floor((left+right)/2);
            while(left<=l-1&&right>=0){
                if (arr[center]==num) return center;
                if (left==right) return "不存在";
                if (arr[center]>num) {
                    right=center-1;
                    center=Math.floor((left+right)/2);
                }else if (arr[center]<num) {
                    left=center+1;
                    center=Math.floor((left+right)/2);
                }
            }
        }
        var a=[8，7，12，1，5，0，6，9，2];
        console.log(search(a,5));