[JavaScript知识库] c1能力认证任务04-计算机程序逻辑

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> c1能力认证任务04-计算机程序逻辑 -> 正文阅读

[JavaScript知识库]c1能力认证任务04-计算机程序逻辑

任务一：生成图片广告
首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。
其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。
最后，用JavaScript代码实现多张广告图片轮播效果：在页面正中间每隔3秒切换不同的广告图片，多张图片轮流显示。

任务二：程序逻辑训练
在code.org上完成系列任务如下，加深对代码逻辑和程序语法的理解。
变量，条件和函数相关任务（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）

拓展：实现多级联动菜单
用HTML+CSS+JavaScript实现网页上常见的“省市区多级联动下拉菜单”（理解树型数据结构）
选择直辖市的过程。
选择省份的过程。
任务提示
不必完全参照上图中的下拉列表，数据可以自己造
淡黄色表示鼠标悬浮状态的背景，可自行设定颜色
熟练掌握2~3种常见的计算机算法（例如冒跑排序：https://algorithm-visualizer.org/brute-force/bubble-sort）
使用算法可视化网站运行一种你不熟悉的排序或者查找算法
尝试把它用JavaScript代码再写一遍并能成功执行
将代码运行后的效果和网站上运行的效果进行对照，看看结果是否一致
重复以上步骤，直到能够熟练掌握2~3种算法为止。

自测

实现对数组[0,912,1,6,3,7,11]的冒泡排序。
解释JavaScript中的堆和栈数据结构的区别。
a=1，b=2，使用至少三种方法交换变量a和b的值。
使用for循环求出0~300之间的奇数之和。
去除数组[8,7,2,1,5,0,1,9,2]中重复的值，相同的值只保留一个。
使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找。

分割线任务开始
任务一：生成图片广告
首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。
代码如下：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
			/*sticky粘性定位*/
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <img id="ggs" src="D:\C站能力认证\任务04\轮播图-宠物\VCG21gic19991576.webp">
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
			/*sticky粘性定位*/
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <img id="ggs" src="D:\C站能力认证\任务04\轮播图-宠物\VCG21gic19991576.webp">
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            position: static;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function(){
            let ggs = document.getElementById("ggs");
            var imgs = ["file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG41157532246.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG41157684448.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG211273959837.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG211330587343.webp"];
                        
            var imgsLen = imgs.length;
            let flag = 0;
            function gg(imgs,imgsLen){
                if(flag > imgsLen - 1){
                    flag = 0;
                }
                ggs.src = imgs[flag++];
            }
            var timer = setInterval(function(){
                gg(imgs,imgsLen);
            },1500);
        }
    </script>
    <div class="mydiv">
        <img id="ggs" >
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

任务二：程序逻辑训练
在code.org上完成系列任务如下，加深对代码逻辑和程序语法的理解。
该网站网速不好，暂时略过。

拓展：实现多级联动菜单
用HTML+CSS+JavaScript实现网页上常见的“省市区多级联动下拉菜单”（理解树型数据结构）
选择直辖市的过程。
选择省份的过程。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .mydiv select{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function() {
            let sheng_s = document.getElementById("sheng");
            let shi_s = document.getElementById("shi");
            let xian_s = document.getElementById("xian");
            let info = document.getElementById("info");

            let sheng = ["陕西省","甘肃省"];
            let shi = [
                ["西安市","咸阳市"],
                ["白银市","天水市"]
            ];
            let xian = [
                [
                    ["莲湖区","长安区"],
                    ["礼泉县","兴平县"]
                ],
                [
                    ["靖远县","景泰县"],
                    ["武山县","清水县"]
                ]
            ];

            //显示选择的省份信息
            let sheng_info_str = "";
			//显示选择的市信息
            let shi_info_str = "";
			//显示选择的县信息
            let xian_info_str = "";

            sheng_s.innerHTML = "<option value=''>---未选择---</option>";
            for (let sheng_i = 0; sheng_i < sheng.length; sheng_i++) {
                sheng_s.innerHTML += "<option value='"+sheng_i+"'>"+sheng[sheng_i]+"</option>";  
            }
            sheng_s.onchange = function(){
                //每次改变省选项，都将清空省市县信息
                sheng_info_str = "";
                shi_info_str = "";
                xian_info_str = "";

                sheng_info_str += sheng[sheng_s.value];
                shi_s.innerHTML = "";
                xian_s.innerHTML = "";
                shi_s.innerHTML = "<option value=''>---未选择---</option>";
                for (let shi_i = 0; shi_i < shi.length; shi_i++) {
                    shi_s.innerHTML += "<option value='"+shi_i+"'>"+shi[sheng_s.value][shi_i]+"</option>";
                }
                shi_s.onchange = function(){
                    //每次改变市选项，都将清空市县信息
                    shi_info_str = "";
                    xian_info_str = "";

                    shi_info_str += shi[sheng_s.value][shi_s.value];
                    xian_s.innerHTML = "";
                    xian_s.innerHTML = "<option value=''>---未选择---</option>";
                    for (let xian_i = 0; xian_i < xian.length; xian_i++) {
                        xian_s.innerHTML += "<option value='"+xian_i+"'>"+xian[sheng_s.value][shi_s.value][xian_i]+"</option>";
                    }
                    xian_s.onchange = function(){
                        //每次改变县选项，都将清空县信息
                        xian_info_str = "";
                        xian_info_str += xian[sheng_s.value][shi_s.value][xian_s.value];
                        info.innerText = "您的选择：" + sheng_info_str + " " + shi_info_str + " " + xian_info_str;
                    }
                }
            }
        }
    </script>
    <div class="mydiv">
        <span>省：</span>
        <select id="sheng">
        </select>

        <span>市：</span>
        <select id="shi">
        </select>

        <span>县：</span>
        <select id="xian">
        </select>

        <div id="info">您的选择：</div>
    </div>
</body>
</html>

**自测

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>排序</title>
</head>
<body>
    <script>
        let arr = [0,9,12,1,6,3,7,11];
        /**
         * 冒泡排序 
         * 最容易理解的排序算法
         * */
        //由小到大排序
        function small2big(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }

        //由大到小排序
        function big2small(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j] < arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }
        console.log("由小到大排序："+small2big(arr));
        console.log("由大到小排序："+big2small(arr));

        /*
        * 快速排序
        *
        * 参数说明：
        *     arr -- 待排序的数组
        *     L -- 数组的左边界(例如，从起始位置开始排序，则l=0)
        *     R -- 数组的右边界(例如，排序截至到数组末尾，则r=a.length-1)
        */
        function quick_sort(arr, L, R){
            if (L < R){
                let i = L;
                let j = R;
                let x = arr[i];
                while (i < j){
                    while(i < j && arr[j] > x)
                        j--; // 从右向左找第一个小于x的数
                    if(i < j)
                        arr[i++] = arr[j];
                    while(i < j && arr[i] < x)
                        i++; // 从左向右找第一个大于x的数
                    if(i < j)
                        arr[j--] = arr[i];
                }
                arr[i] = x;
                quick_sort(arr, L, i-1); /* 递归调用 */
                quick_sort(arr, i+1, R); /* 递归调用 */
            }
            return arr;
        }
        
        console.log("快速排序："+quick_sort(arr,0,arr.length-1));

        /**
         * 插入排序
         * */
        function insertSort(arr) {
            let preIndex, current;
            for (let i = 1; i < arr.length; i++) {
                preIndex = i - 1;
                current = arr[i];
                while (preIndex >= 0 && current < arr[preIndex]) {
                    arr[preIndex + 1] = arr[preIndex];
                    preIndex--;
                }
                arr[preIndex + 1] = current;
            }
            return arr;
        }
        console.log("插入排序：" + insertSort(arr));
    </script>
</body>
</html>

解释JavaScript中的堆和栈数据结构的区别。
JS变量都存放在内存中，而内存给变量开辟了两块区域，分别为栈区域和堆区域
栈像个容器，容量小速度快，栈内存的地址分配是连续的，所以在后续也不能对其进行进一步的扩充或者删除。
堆像个房间，容量较大，堆内存存储变量时没有什么规律可言。
a=1，b=2，使用至少三种方法交换变量a和b的值。

<script type="text/javascript">
	var a = 1, b = 2;
	// 第一种方法 借助一个新的变量
	var c;
	c = a;
	a = b;
	b = c;
	// 第二种方法 算数运算
	a = b - a; // a = 1, b = 2
	b = b - a; // a = 1, b = 1 
	a = a + b; // a = 2, b = 1
	// 第三种方法 位运算
	a = a^b;
	b = a^b;
	a = a^b;		
</script>

使用for循环求出0~300之间的奇数之和。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>奇数之和</title>
</head>
<body>
    <script>
        let info = 0;
        let num = 0;
        for(let i = 0;i <= 300;i++){
            if(i % 2 === 1){
                info++;
                num += i;
            }
        }
        console.log("奇数个数为：" + info);
        console.log("奇数总和为：" + num);
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>去除重复</title>
</head>
<body>
    <script>
        let oldarr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
        //原理就是拿新数组和旧数组进行比较，若新数组中没有当前就数组中的值，就将该值加入新数组
        function unique(oldarr) {
            let newarrs = [];
            for(var i = 0; i < oldarr.length; i++){
                //indexOf返回-1时，说明newarrs中没有与oldarr中相同的值
                if(newarrs.indexOf(oldarr[i]) == -1){
                    //为newarrs中加入元素
                    newarrs.push(oldarr[i]);
                }
            }
            return newarrs;
        }
        console.log("数组去重：" + unique(oldarr));
    </script>
</body>
</html>

使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找。**

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>二分查找</title>
</head>
<body>
    <script>
        let arr = [8, 7, 12, 1, 5, 0, 6, 9, 2];

        function small2big(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }

        function erfen(arr,num) {
            let len = arr.length;
            let tou = 0;
            let wei = len - 1;
            while(tou <= wei){
                let mid = Math.floor((tou + wei)/2);
                if(arr[mid] === num){
                    return mid;
                }
                else if(arr[mid] < num){
                    tou = mid + 1;
                }
                else if(arr[mid] > num){
                    wei = mid - 1;
                }
                else{
                    return;
                }
            }
        }
        console.log("排好序的数组：" + arr);
        //二分查找一定要先排序，查找数字7的索引
        console.log("数字7所在索引位置：" + erfen(small2big(arr),7));
    </script>
</body>
</html>