头歌-JavaScript基础

目录

JavaScript 学习手册二：JS数据类型

第1关：JavaScript 数据类型介绍

 第2关：JavaScript 数据类型转换

JavaScript 学习手册五：JS数组

第1关：数组的创建、读写和长度

 第2关：数组元素的增减

 第3关：数组的遍历和多维数组

 第4关：数组的常用方法

 第5关：数组的应用——内排序

JavaScript 学习手册八：JS函数

第1关：用函数语句定义函数

 第2关：用表达式定义函数

第3关：函数的调用

 第4关：未定义的实参

 第5关：实参对象

 第6关：对象作为参数

 第7关：函数对象

JavaScript 学习手册十一：JSON

第1关：JSON对象

 第2关：JSON数组

 第3关：JSON字符串

---

JavaScript 学习手册二：JS数据类型

第1关：JavaScript 数据类型介绍

function objectTest() {var a = {name:"myName",id:2};var b = [1,true,2];var c = 1;var d = "1";var e = true;var f;var aType,bType,cType,dType,eType,fType;//请在此处编写代码/********** Begin **********/    aType = "object";    bType = "array";    cType = "number";    dType = "string";    eType = "bool";    fType = "undefined";/********** End **********/return aType+","+bType+","+cType+","+dType+","+eType+","+fType;}

 第2关：JavaScript 数据类型转换

function mainJs(args1,args2,args3) {//请在此处编写代码/********** Begin **********/    var a = parseInt(args1);    var b = parseInt(args2,16);    var c = parseFloat(args3);/********** End **********/    return a+b+c;}

JavaScript 学习手册五：JS数组

第1关：数组的创建、读写和长度

var array1 = [1,2,3,"js",4,true,"hello"];var array2 = [true,true,"java",2.1];function mainJs(a) {//请在此处编写代码    /*********begin*********/    if (array1.length == a) {        return array1[array1.length-1];    }    else return array2[array2.length-1];    /*********end*********/}

 第2关：数组元素的增减

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];function mainJs(a,b) {    a = parseInt(a);    b = parseInt(b);    //请在此处编写代码    /*********begin*********/    for (var i = 0; i < a; i++) {        testArray.unshift(testArray.pop());    }    return testArray[b];    /*********end*********/}

 第3关：数组的遍历和多维数组

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];function mainJs(a,b) {    a = parseInt(a);    b = parseInt(b);    //请在此处编写代码    /*********begin*********/    var newarr = new Array(a);    for (var i = 0; i < a; i++) {        newarr[i] = new Array(b);    }    var count = 0;    for (var i = 0; i < a; i++) {        for (var j = 0; j < b; j++) {            newarr[i][j] = arr[count++];        }    }    return newarr;    /*********end*********/}

 第4关：数组的常用方法

function mainJs(myArray) {    myArray = myArray.split(",");    //请在此处编写代码    /*********begin*********/    var my = new Array();    var i = 0, j = 0;    while (myArray.indexOf("a", i) != -1) {        my[j] = myArray.indexOf("a", i);        i = my[j] + 1;        j++;    }    var mym = new Array();    i = 0, j = 0;    while (myArray.indexOf("b", i) != -1) {        mym[j] = myArray.indexOf("b", i);        i = mym[j] + 1;        j++;    }    var res = new Array();    res = my.concat(mym);    return res;    /*********end*********/}

 第5关：数组的应用——内排序

function mainJs(a) {    var arr = a.split(",");    for(var i = 0;i < arr.length;i++) {        arr[i] = parseInt(arr[i]);    }    //请在此处编写代码    /*********begin*********/    var mi=new Array(); var aLength = arr.length;var temp;var max = arr[0];var maxIndex = 0;for(var i = 0;i < aLength-1;i++) {//共进行n-1次选择for(var j = 1;j < aLength-i;j++) {//一次选择if(arr[j] > max) {max = arr[j];maxIndex = j;}}mi[i]=maxIndex;//将本次选出的最大元素移动到最终的位置上temp = arr[aLength-i-1];arr[aLength-i-1] = arr[maxIndex];arr[maxIndex] = temp;var max = arr[0];var maxIndex = 0;}return mi;    /*********end*********/}

JavaScript 学习手册八：JS函数

第1关：用函数语句定义函数

//请在此处编写代码/********** Begin **********/function mainJs(a, b) {    return a + b;}/********** End **********/

 第2关：用表达式定义函数

function mainJs(a) {    a = parseInt(a);//请在此处编写代码/********** Begin **********/    var myFunc = function (a) {        var x = (a-a%100)/100;        var y = (a%100-a%100%10)/10;        var z = a%10;        return x + y + z;    };    /********** End **********/    return myFunc(a);}

第3关：函数的调用

//求最大值的函数function getMax(b,c) {    return b>c?b:c;}//求最小值的函数var getMin = function(b,c) {    return b>c?c:b;}//对象中的求和函数var myObject = {    id:1,    name:"function",    myFunc:function(b,c) {        return b+c;    }}function mainJs(a,b,c) {    a = parseInt(a);    b = parseInt(b);    c = parseInt(c);//请在此处编写代码/********** Begin **********/    if (a == 1) {        return getMax(b, c);    }    else if (a == 2) {        return getMin(b, c);    }    else return myObject.myFunc(b, c);/********** End **********/}

 第4关：未定义的实参

function mainJs(a,b,c,d) {//请在此处编写代码/********** Begin **********/    if (a === undefined) {        a = "green";    }    if (b === undefined) {        b = "green";    }    if (c === undefined) {        c = "red";    }    if (d === undefined) {        d = "yellow";    }    return a + '-' + b + '-' + c + '-' + d;/********** End **********/}

 第5关：实参对象

//请在此处编写代码/********** Begin **********/function getMax() {    var alength = arguments.length;    if (alength == 0) return 0;    var max = arguments[0];    for (var i = 1; i < alength; i++) {        if (max < arguments[i]) max = arguments[i];    }    return max;}/********** End **********/function mainJs(a) {    a = parseInt(a);    switch(a) {        case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);        case 2:return getMax(23,21,56,34,89,34,32);        case 3:return getMax(23,21,56,34);        case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);        case 5:return getMax();        default:break;    }}

 第6关：对象作为参数

var park = {    name:"Leaf Prak",    location:"Fifth Avenue",    todayTourists:4000};var computer = {    name:"Levenon",    price:"$800",    memory:"8G"};var city = {    name:"HangZhou",    country:"Chine",    population:9400000}function objectFunction(object) {//请在此处编写代码/********** Begin **********/    var res = "";    for (var i in object) {        res += i + ":" + object[i] + ",";    }    return res;/********** End **********/}function mainJs(a) {    a = parseInt(a);    switch(a) {        case 1:return objectFunction(park);        case 2:return objectFunction(computer);        case 3:return objectFunction(city);        default:break;    }}

 第7关：函数对象

//求数组中奇数元素的个数function getOddNumber(a) {    var result = 0;    for(var i = 0;i < a.length;i++) {        if(a[i]%2 != 0)            result++;    }    return result;}//求数组中偶数元素的个数function getEvenNumber(a) {    var result = 0;    for(var i = 0;i < a.length;i++) {        if(a[i]%2 == 0)            result++;    }    return result;}function getNumber(func,a) {//请在此处编写代码/********** Begin **********/    return func(a);/********** End **********/}//测试接口function mainJs(b,a) {    a = a.split(",");    var aLength = a.length;    for(var i = 0;i < aLength;i++) {        a[i] = parseInt(a[i]);    }    if(b == "getEvenNumber") {        return getNumber(getEvenNumber,a);    } else {        return getNumber(getOddNumber,a);    }}

JavaScript 学习手册十一：JSON

第1关：JSON对象

function mainJs(a,b,c) {//请在此处编写代码/********** Begin **********/    var JSONObject = { "key1": a, "key2": b, "key3": c };    delete JSONObject.key3;    return a+","+b;/********** End **********/}

 第2关：JSON数组

var myJson = {    "category":"computer",    "detail":"programming",    "language":[    "js","java","php","python","c"    ]}function mainJs(a) {    a = parseInt(a);//请在此处编写代码/********** Begin **********/    var res = "";    for (var i = 0; i < a; i++) {        res += myJson.language[i] + ",";    }    return res.slice(0, -1);/********** End **********/}

 第3关：JSON字符串

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {//请在此处编写代码/********** Begin **********/    var JSONObject = JSON.parse(JSONString);    JSONObject["key1"] = a;    JSONObject.key1 = a;    return JSON.stringify(JSONObject);/********** End **********/}

JavaScript学习手册十三：HTML DOM——文档元素的操作（一）

第1关：通过id获取文档元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>get element by id</title></head><body>    <a id="a1" src="https://www.google.com">Google</a>    <p id="p1">this is a text</p>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var myElement = document.getElementById("a1");         <!---------End--------->        myElement.href="https://www.educoder.net";    </script></body></html>

 第2关：通过类名获取文档元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>get element by name</title></head><body>    <img src="" class="myName"/>    <form class="myName" id="myForm"></form>    <div class="myName">This is quote</div>    <p class="myName">This is what you should get</p>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var myElement = document.getElementsByClassName("myName")[3];        <!---------End--------->        myElement.innerText="I changed the text";    </script></body></html>

 第3关：通过标签名获取文档元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>get element by id</title></head><body>    <div class="diva">        <a href="https://www.educoder.net">EduCoder</a>        <a href="https://www.facebook.com">FaceBook</a>    </div>    <div class="divb">        <a href="https://www.twitter.com">Twitter</a>        <form name="myForm"></form>        <a href="https://www.nudt.edu.cn">NUDT</a>    </div>    <p id="pp">this is a text</p><script><!-- 请在此处编写代码 -->    <!---------Begin--------->     var allDiv = document.getElementsByTagName("div");     var myElement = allDiv[1].getElementsByTagName("a")[1];    <!---------End--------->    myElement.innerText="nudt";</script></body></html>

第4关：html5中获取元素的方法一

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body>    <p>你需要获得的元素是我</p>    <p>是楼上</p>    <p>是楼上的楼上</p>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var pElement = document.querySelector("p");        <!---------End--------->        console.log(pElement);    </script></body></html>

第5关：html5中获取元素的方法二

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body>    <p>你需要获得的元素是我</p>    <p>包括我</p>    <p>还有我</p>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var pElement = document.querySelectorAll("p");        <!---------End--------->        console.log(pElement);    </script></body></html>

第6关：节点树上的操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body><div id="div1"><div class="cl1"><p>文本</p><a>超链接</a></div><div class="cl2"><select><option>红</option><option>黄</option><option>蓝</option></select></div></div>  <script>      var cl2 = document.getElementById("div1").lastElementChild;      <!-- 请在此处编写代码 -->      <!---------Begin--------->      var myElement = cl2.firstElementChild.children[1];      <!---------End--------->      myElement.innerText = "绿";    </script></body></html>

 第7关：属性值的获取

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body>    <p id="p"></p>    <img class="imgClass"/>    <a id="a"></a>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var srcValue = document.getElementsByTagName("img")[0].getAttribute("class");        <!---------End--------->        console.log(srcValue);    </script></body></html>

第8关：属性值的设置

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body>    <p id="p"></p>    <form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form>    <a id="a"></a>    <script>    <!-- 请在此处编写代码 -->        <!---------Begin--------->        var myElement = document.getElementById('form1').setAttribute('method','post');        <!---------End--------->        console.log(document.getElementById("form1").method);    </script></body></html>

 

未完待续。。。

本文链接：https://www.kjpai.cn/news/2024-04-26/162629.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！