零基础JavaScript编码

Posted 程序媛家

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零基础JavaScript编码相关的知识,希望对你有一定的参考价值。

任务目的

  • 在上一任务基础上继续javascript的体验
  • 学习JavaScript中的if判断语法,for循环语法
  • 学习JavaScript中的数组对象
  • 学习如何读取、处理数据,并动态创建、修改DOM中的内容

任务描述

  • 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

  </head>

<body>

 

  <h3>污染城市列表</h3>

  <ul id="aqi-list">

<!--  

    <li>第一名:福州(样例),10</li>

      <li>第二名:福州(样例),10</li> -->

  </ul>

 

<script type="text/javascript">

 

var aqiData = [

  ["北京", 90],

  ["上海", 50],

  ["福州", 10],

  ["广州", 50],

  ["成都", 90],

  ["西安", 100]

];

 

(function () {

 

  /*

  在注释下方编写代码

  遍历读取aqiData中各个城市的数据

  将空气质量指数大于60的城市显示到aqi-list的列表中

  */

 

})();

 

</script>

</body>

</html>

任务注意事项

  • 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 其中的数据以及60的判断逻辑可以自行设定
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例,可以直接使用,也可以完全自己重写

在线学习参考资料

任务二:零基础JavaScript编码(二)总结-数组

数组是一个特殊的变量,可以同时使用一个名字储存一个以上的值,并可以通过下标获取指定值。

1、 创建一个数组

语法:

(1)var array-name = [“item1”, “item2”, ...];  

(2)var array-name = [

“item1”,

“item2”,

“item3”,

...

]

(3)var array-name = new Array(“item1”, “item2”, ...);

(4)ar array-name = new Array(); 

(5) var points = []; 

注意:从简洁、可读性、执行速度方面考虑,使用第一种方式更好。

2、 得到数组中指定元素

使用下标得到数组中值。

得到数组中某个元素:例如:var name = cars[0];

修改数组中某个元素:cars[0] = "Opel";

数组元素小标从0开始。

3、 得到全部数组元素

JavaScript中,使用数组名可得到数组中所有元素。

例如:var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

4、 数组是特殊的对象,与对象不完全相同

数组一个特殊的对象,数组typeof的返回值为“object”。

但JavaScript中数组更像数组而不像对象。

数组使用下标得到它的元素,对象通过成员名得到成员值。

5、 同一个数组可以有不同类型的元素,可以有对象、函数、数组。

6、 数组的属性和方法。

(1)length属性

Length属性,返回数组长度,即数组元素个数。

(2)isArray()函数

Array.isArray(cars); 

若cars为数组返回true,不是返回false。

(3)toString()函数

将数组的值转为string,元素之间以逗号分隔。

eg: cars.toString();

4join()函数

将数组的值转为string,与toString()不同的是,可指定元素之间分隔符的类型。

eg: cars.join(" * ");

5pop()函数

移除数组中最后一个元素,返回值为被移除的元素,返回值类型为string。

6push() 函数

在数组元素末尾增加元素,返回值为新数组的长度。

7shift()函数

移除数组中第一个元素,并将其他元素“shifts”到更小的下标,返回值为被移除的元素,返回值类型为string。

8unshift() 函数

将元素添加到数组的第一个元素,并将其他元素“unshifts”。返回值为新数组的长度。

9splice()函数

向数组添加多个元素或从数组移除元素

eg: fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数(2)定义新元素插入的位置。

第二个参数(0)说明有几个元素被移除。

剩下的参数("Lemon", "Kiwi")定义要插入的新元素。

eg: fruits.splice(0, 1); 

没有新插入元素时,表示有一个元素被移除。

10concat()函数

将多个数组链接起来组成新的数组。

Array = arr1.concat(arr2, arr3……);  

11slice() 函数

取出数组中的一部分形成新的数组

eg:fruits.slice(1);

截取一个新数组,从第一个元素开始到最后一个元素。

eg:fruits.slice(1, 3);

 截取一个新数组,从第1个元素,到(3-1)个元素。

循环数组元素

7、 For循环是循环数组元素最好方式

8、 添加数组元素

1)使用push方法

eg:car.push("Saab");

2)使用length属性和下标

eg:car[car.length] = "Saab";

9、 对数组进行排序

·            1sort()方法

按字母顺序对数组元素进行排序。

            2reverse()方法

  反转数组中元素。

           3)对数字进行排序

                 升序:points.sort(function(a, b){return a - b});

           降序:points.sort(function(a, b){return b - a});

          4)对对象进行排序

           cars.sort(function(a, b){return a.year - b.year});

 

10、已提交作业

代码地址:https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2

Demo地址:http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2/index.html


以上是关于零基础JavaScript编码的主要内容,如果未能解决你的问题,请参考以下文章

零基础JavaScript编码

任务十三:零基础JavaScript编码

任务十六:零基础JavaScript编码

任务十七:零基础JavaScript编码

javascript入门经典零基础学习

JavaScript零基础入门 7:JavaScript基础函数