C1认证考试-训练任务04

最新推荐文章于 2022-10-19 08:38:18 发布

hnu_five5well

最新推荐文章于 2022-10-19 08:38:18 发布

阅读量260

点赞数 2

分类专栏： CSDN学习小组文章标签：数据结构指针 java js javascript

本文链接：https://blog.csdn.net/weixin_44237378/article/details/116795651

版权

CSDN学习小组专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括输出方式如alert、console.log等，数据类型如数字、字符串、数组、对象，以及流程控制结构。还展示了如何使用JavaScript进行冒泡排序、堆栈和数组操作。此外，通过实例演示了HTML和CSS实现居中布局的广告图。最后，文章涵盖了数组的折半查找算法。

摘要由CSDN通过智能技术生成

在这个任务中，我们主要是使用JavaScript进行动态页面的生成，先来复习一下javascript的基础知识：

JS基础知识

JS输出

JS的输出方式有很多，比较常用的是这以下四种

window.alert()，警告框提示
document.write()，把内容写入文档内部
innetHTML，直接写入标签中的文本内容
console.log()，控制台输出，这个比较常用

JS的数据类型

JS的数据类型主要包括：数字，字符串，数组，对象等；

// 1.声明变量
var age;
// 2.赋值
age=10;
//3.输出打印
console.log(age);
// 4.变量的初始化
var myname="Five";
console.log(myname)

var age;console.log(age);
console.log(age1);
age1=10,console.log(age1);

// 1.八进制 0~7 数字前面+0,表示八进制
var num1=012;
console.log(num1);//10
// 2.十六进制 0~9 a~f 数字前面+0x,表示16进制
var num2=0xa;
console.log(num2);//10
// 3.数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
// 4.数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
//5.三个特殊值
console.log(Infinity);//Infinity,无穷大
console.log(-Infinity);//-Infinity,无穷小
console.log('pink'-100);//NaN，Not a number,表示一个非数值
//6.isNaN()方法用来判断是否非数字
console.log(isNaN('pink'));

// 1.获取字符串长度 length
var str="Hello,lala";
console.log(str.length);
// 2.字符串的拼接
console.log('s'+'t'+18);

//布尔型
var flag=true;//flag 布尔型
var flag1=false; //flag1 布尔型
console.log(flag);//true
console.log(flag1);//false
console.log(flag+1);//2
console.log(flag1+1);//1

//undefined类型
var vr=undefined;
console.log(undefined);//undefined
console.log(vr+'pink');//undefinedpink
console.log(vr+1);//NaN

//null 空值
var space=null;
console.log(space);//null
console.log(space+'pink');//nullpink
console.log(space+1);//1

//typeof 检测数据类型
console.log(typeof(vr));//undefined
console.log(typeof(flag));//boolean
console.log(typeof(num1));//number
console.log(typeof(space));//object

//全等
console.log(18==18);//true
console.log(18=='18');//true
console.log(18==='18');//false
console.log(18!=='18');//true

JS流程控制

JS的流程控制包括if/for/while/do while等

if(3>5){
    alert("shamo");
}

var num=10;
num>5 ? '是的':'不是的';
console.log(num);

var s=3;

switch (s) {
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
        case 4:
            console.log(4);
            

    default:
        break;
}

for(var i=1;i<=10;i++){
    console.info(i+'sui');
}

JS数组使用

在JS中，数组是经常使用的一种类型

// 创建数组

//使用new创建数组
var arr1=new Array();//创建一个新的空数组
arr1.push(1);
console.log(arr1);
// 使用数组字面量创建数组
var arr=[1,2,3,4];
console.log(arr);
//遍历数组
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

// 新增数组元素
// 1.修改length长度
var t1=[1,2,3];
console.log(t1.length);//3
console.log(t1);//Array(3) [ 1, 2, 3 ]

t1.length=5;//修改长度为5
console.log(t1.length);//5
console.log(t1);//Array(5) [ 1, 2, 3, <2 empty slots> ]
console.log(t1[3]);//undefined

JS函数

// 函数的方法
function getSum(num1,num2) {
    console.log(num1+num2);
}

getSum(1,100);
getSum(10,50);

// 1.如果实参与形参个数一致，正常输出
getSum(1,2);//3
// 2.如果实参多于形参，会取到形参个数
getSum(1,3,3);//4
// 3.如果实参小于形参，多余的num2形参定义为undefined(默认)
getSum(1);//NaN

// 函数的返回值
function getResult(){
    return 666,777;//返回结果
    // console.log("HI");    
}
var tes=getResult();
console.log(tes);

// arguments
function fn(num1){
    console.log(arguments);//里面存储了所有传递过来的实参
    //Arguments { 0: 1, 1: 2, 2: 3, 3: 4, … }
    console.log(arguments.length);//4
    return num1;
}
fn(1,2,3,4);//4

任务一：生成图片广告

在这里我先用HTML和CSS绘制一幅模拟广告居中的Demo，在这里，我主要是用到了relative相对定位，效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            margin: 0px;
        }
        .fir{
            /* background-color: #eb3b3b; */
            transform: scale(0.5);
            position: relative;
            top: 50%;
            /* transform: translateY(-50%) ; */
        }
    </style>

    <title>一张广告图</title>
    
</head>
<body>
    <div class="fir">
        <img  src="01.jpg" alt="第一张广告图" >
    </div>
</body>
</html>

自测题

实现对数组[0,9,12,1,6,3,7,11]的冒泡排序
答：代码如下：

var arr1=[0,9,12,1,6,3,7,11];
console.log(arr1);

for(var i=0;i<arr1.length;i++){
    for(var j=0;j<i;j++){
        if(arr1[i]<arr1[j]){
            var temp=arr1[i];
            arr1[i]=arr1[j];
            arr1[j]=temp;
        }
    }
}
console.log(arr1);

理解JavaScript中的堆和栈数据结构的区别
答：
栈(stack)：栈会自动分配内存空间，会自动释放，JS中的栈会存放基本类型，简单的数据段，占据固定大小的空间。（基本类型：String，Number，Boolean，Null，Undefined）
堆(heap)：动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的object对象，实际上堆保存的不是变量本身，而是指向该对象的指针。（引用类型：Function，Array，Object）
a=1,b=2,使用至少三种方法交换变量a,b的值
答：

// 第一种：使用temp变量
var a=1;
var b=2;
var temp=a;
a=b;
b=temp;
console.log("a=%d,b=%d",a,b);

// 第二种：使用加减符号
a=1;b=2;
a=a+b;
b=a-b;
a=a-b;
console.log("a=%d,b=%d",a,b);

// 第三种：使用位运算方法
a=1;b=2;
a=a^b;
b=a^b;
a=a^b;
console.log("a=%d,b=%d",a,b);

// 第四种：使用数组和下标
a=1;b=2;
a=[b,b=a][0];
console.log("a=%d,b=%d",a,b);

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

var sum=0;
for(var i=0;i<=300;i++){
    if(1==i%2){ //判断是否是奇数
        sum+=i;
    }
}
console.log("0~300之间的奇数之和位:%d",sum);

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

var arr=[8,7,2,1,5,0,1,9,2];
var temp=[];
// 第一种：使用临时数组存放
for(var i=0;i<arr.length;i++){
    if(temp.indexOf(arr[i])==-1){
        temp.push(arr[i]);
    }
}
console.log(temp);
// 第二种：使用JS中的Set类型
// 不过需要使用Array.from进行转换
temp=Array.from(new Set(arr));
console.log(temp);

使用非递归方式对数组[8,7,2,1,5,0,1,9,2]进行折半查找
答：

   // 二分查找：非递归算法
   function binary_search(arr, key) {
    var low = 0,high = arr.length - 1;  //先设置低、高位标签
    while(low <= high){ 
        var mid = parseInt((high + low) / 2);   //寻找mid标签位置
        if(key == arr[mid]){
            return  mid;
        }else if(key > arr[mid]){
            low = mid + 1;
        }else if(key < arr[mid]){
            high = mid -1;
        }else{
            return -1;
        }
    }
};
var arr = [8,7,2,1,5,0,1,9,2];
//由于二分查找需要元素先排序，所以我们先使用JS自带的排序方法
arr.sort();
console.log(arr);
var result = binary_search(arr,7);
console.log(result); // 返回目标元素的索引值，从0开始