任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 接触一下JavaScript中的高级选择器
  • 学习JavaScript中的数组对象遍历、读写、排序等操作
  • 学习简单的字符串处理操作

任务描述

  • 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
  • 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

<title>IFE JavaScript Task 01</title>

</head>

<body>

<ul id="source">

<li>北京空气质量：<b>90</b></li>

<li>上海空气质量：<b>70</b></li>

<li>天津空气质量：<b>80</b></li>

<li>广州空气质量：<b>50</b></li>

<li>深圳空气质量：<b>40</b></li>

<li>福州空气质量：<b>32</b></li>

<li>成都空气质量：<b>90</b></li>

</ul>

<ul id="resort">

<!--

    <li>第一名：北京空气质量：<b>90</b></li>

    <li>第二名：北京空气质量：<b>90</b></li>

    <li>第三名：北京空气质量：<b>90</b></li>

     -->

</ul>

<button id="sort-btn">排序</button>

<script type="text/javascript">

/**

 * getData方法

 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量

 * 返回一个数组，格式见函数中示例

 */

function getData() {

/*

  coding here

  */

/*

  data = [

    ["北京", 90],

    ["北京", 90]

    ……

  ]

  */

return data;

}

/**

 * sortAqiData

 * 按空气质量对data进行从小到大的排序

 * 返回一个排序后的数组

 */

function sortAqiData(data) {

}

/**

 * render

 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中

 * 格式见ul中的注释的部分

 */

function render(data) {

}

function btnHandle() {

var aqiData = getData();

aqiData = sortAqiData(aqiData);

render(aqiData);

}

function init() {

// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

}

init();

</script>

</body>

</html>

任务注意事项

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

在线学习参考资料

基础JavaScript练习（一）总结

 

1、 JavaScript Objects

在JavaScript中，对象也是变量，用于存储数值，但是一个对象可以存储很多值，并且每个值以键值对的方式（name:value）存储。JavaScript中的name:value键值对被称为属性。

方法也可以存储在对象中，name：value，name为函数名，value为函数定义。

（1）  定义对象

eg: var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

       (2)获取对象属性：

objectName.propertyName

或者

objectName["propertyName"]

(3)调用对象方法

  • objectName.methodName()

如果未加(),objectName.methodName将返回这个名字方法的定义。

2、 HTML DOM createElement() Method

createelement()方法创建一个指定名字的元素节点。

注意：createTextNode()方法创建一个文本节点。节点创建完成之后，使用element.appendChild()或者element.insertBefore()方法将它插入document中。

语法：

document.createElement(nodename)

参数：nodename，类型：字符串，想创建的元素姓名。

返回值：一个元素对象，代表创建的元素节点。

3、 HTML DOM createTextNode() Method

HTML元素通常由元素节点和文本节点组成，createTextNode()方法用于创建一个文本节点

语法：

document.createTextNode(text)

text:类型：字符串，表示文本节点中的文本。

返回值：文本节点对象。

4、 HTML DOM setAttribute() Method

setAttribute()方法，向一个元素添加一个属性，并给它一个特定的值。如果添加前该元素有这个属性，则此方法仅改变或设置属性值。

注意：虽然可以使用setAttribute()方法向一个元素添加样式，但是最好使用Style对象（Style对象代表一个单独的样式语句）的属性，这个方法可能覆盖其他css样式。

Bad：element.setAttribute("style", "background-color: red;");

Good：element.style.backgroundColor = "red";

5、 HTML DOM appendChild() Method

appendChild()方法将一个节点作为最后一个子节点悬挂到另一个节点上。

语法：

node.appendChild(node)

node:类型：节点对象。想附加的节点。

返回值：一个节点对象，代表已附加的节点。

6、 HTML DOM insertBefore() Method

insertBefore()方法，将一个节点作为子节点插入到一个已经存在的节点之前。

语法：

node.insertBefore(newnode, existingnode)

newnode：类型：节点对象，想插入的新节点。

Existingnode：类型：节点对象，可选，已在document中的，想插入新节点之后的节点，如果没有指定时，将把新节点插入到最后。

返回值：一个节点对象，代表已插入的节点。

7、 HTML DOM removeChild() Method

removeChild()方法，从指定元素移除一个指定子节点。返回值为被移除的节点，如果要移除节点不存在，则返回null。

语法：

node.removeChild(node)

node：类型为：节点对象，要移除的节点

8、 已提交作业

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

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

基础JavaScript练习（一）总结的更多相关文章

  1. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  2. js基础--javaScript数据类型你都弄明白了吗？绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

  3. 基础JavaScript练习（三）总结

    任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用 ...

  4. 基础JavaScript练习（二）总结

    任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过 ...

  5. 零基础JavaScript编码（三）总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  6. 零基础JavaScript编码（二）

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

  7. 零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  9. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

随机推荐

  1. 如何将jar包打包到本地maven仓库

    --例如下载jar到本地(例如经常用到的oracle数据库驱动) --前提本地已将安装maven并配置好环境,cmd并切换到jar包的文件夹下,执行以下命令,注意DgroupId.DartifactI ...

  2. django-crontab使用

    用 django-crontab 为 Django 添加定时任务 需求 做后台开发的时候,有时候会遇到这样的需求,在某个固定时间或者一定时间间隔自动触发某一事件.比如说我有一个需求要求是,周一到周五早 ...

  3. kettle的基本使用

    一.下载下载kettlehttp://sourceforge.net/projects/pentaho/files/Data%20Integration/7.0/pdi-ce-7.0.0.0-25.z ...

  4. COMET探索系列三【异步通知服务器关闭数据连接实现思路】

    在小编络络 COMET实践笔记一文中注意事项中有这么一段话 使用长连接时, 存在一个很常见的场景:客户端需要关闭页 面,而服务器端还处在读取数据的阻塞状态,客户端需要及时通知服务器端关闭数据连接.服务 ...

  5. android完整智能家居、备忘录、蓝牙配对、3D动画库、购物车页面、版本更新自动安装等源码

    Android精选源码 app 版本更新.下载完毕自动自动安装 android指针式分数仪表盘 ANdroid蓝牙设备搜索.配对 Android 图片水印框架,支持隐形数字水印 android3D旋转 ...

  6. yii执行流程简单介绍

    1. 用户访问 http://www.example.com/index.php?r=post/show&id=1,Web 服务器执行入口脚本 index.php 来处理该请求.  2. 入口 ...

  7. 03 - CDH 6.3.x 安装

    CDH 6.3.x 离线安装 环境 CDH 6.3.1 CentOS 7 官方文档 修改主机名,配置host文件 # 根据个人需要修改主机名称 hostnamectl set-hostname nod ...

  8. Euler characteristic

    Euler characteristic Euler定理 顶点(v),棱数(edge)(e),面(J) 尽管我们有四个不同的四面体,但是如果我们将顶点数\((v)\)减去棱数\((e)\)再加上四面体 ...

  9. 谷歌眼镜、亚马逊音箱，5G时代隐私或将面临更大颠覆

    别看现在的智能手机.平板电脑.可穿戴设备.智能家居等那么火爆,但离开网络它们其实什么也不是.当然,智能终端设备的迭进也是与网络制式不断向前演变相辅相成的,二者算是互相成就.不过也由此衍生出很多问题,尤 ...

  10. MS15-020 文件共享漏洞利用

    Metasploit MS15-020漏洞利用 环境: 共享机/受害者:windows xp IP:192.168.222.1 攻击机:kali linux IP:192.168.10.1 msfco ...