任务目的

  • JavaScript初体验
  • 初步明白JavaScript的简单基本语法，如变量、函数
  • 初步了解JavaScript的事件是什么
  • 初步了解JavaScript中的DOM是什么

任务描述

  • 参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写
  • 本任务完成的功能为：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IFE JavaScript Task 01</title>

</head>

<body>

<label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>

<button id="button">确认填写</button>

<div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {

/*   

  在注释下方写下代码

  给按钮button绑定一个点击事件

  在事件处理函数中

  获取aqi-input输入的值，并显示在aqi-display中

  */

})();

</script>

</body>

</html>

任务注意事项

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

在线学习参考资料

零基础JavaScript编码（一）总结

1、 onclick事件

当用户点击一个对象时发生onclick事件。

语法：

在HTML中：

< element onclick="myFunction()" >

在JavaScript中

  • object.onclick = function(){myScript};
  • object.onclick = myFunction;
  • object.addEventListener("click", myScript);

2、 Input Text value Property

value属性设置或返回文本输入框中的值，它包括默认值、用户输入值或script中设置的值。

语法：

返回value属性：textObject.value

设置value属性：textObject.value = text

属性值：text：表示文本域的值。

返回值：一个字符串，代表文本域的值。

3、 DOM innerHTML属性

innerHTML属性用于获取、修改指定元素内的所有标签和内容，它是既包含元素（以及子元素）内容的字符串，元素内容以原始HTML代码显示出来，例如“<p>Some text</p>”

语法：

返回innerHTML属性：HTMLElementObject.innerHTML

设置innerHTML属性：HTMLElementObject.innerHTML = text

属性值：text：表示一个元素的HTML内容。

返回值：字符串，代表HTML文本。

4、 Node.innerText

代表节点内容和它后代的内容，与innerHTML区别是不包含HTML标签。

5、 DOM textContent属性

textcontent属性用于设置或返回一个节点及其内部节点的文本内容。在节点上设置textcontent属性，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

语法：

返回节点的文本内容：node.textContent

设置节点的文本内容：node.textContent = text

属性值：text：String类型：表示指定节点的文本内容。

返回值：字符串，代表节点和子节点文本。

6、 textContent与innerText区别

（1）     textContent会获取所有元素的content，包括<script>和<style>元素。innerText不会。

（2）     innerText不会获取hidden元素的content，而textContent会。

（3）     innerText会触发reflow，而textContent不会。

（4）     innerText返回值会被格式化，而textContent不会。

7、 textContent与innerHTML区别

innerHTML 返回 HTML 文本，当修改一个元素中的文本时，使用textContent更好。

8、 已提交作业

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

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

零基础JavaScript编码（一）的更多相关文章

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

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

  2. 零基础JavaScript编码（二）

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

  3. 任务十七：零基础JavaScript编码（五）

    任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...

  4. 任务十六：零基础JavaScript编码（四）

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  5. 任务十五：零基础JavaScript编码（三）

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

  6. 任务十四：零基础JavaScript编码（二）

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

  7. 任务十三：零基础JavaScript编码（一）

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

  8. 任务一：零基础HTML编码

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  9. 零基础HTML编码学习笔记

    任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代 ...

随机推荐

  1. PAT甲级——1036 Boys vs Girls

    1036 Boys vs Girls This time you are asked to tell the difference between the lowest grade of all th ...

  2. 向通用自动驾驶部门Cruise投资22.5亿美元，软银打得什么主意？

    5月29日,加利福尼亚州的一辆特斯拉Model S撞上停在路边的警车.据透露,当时这辆特斯拉正处于自动辅助驾驶即Autopilot模式.而在今年,这已经不是第一次特斯拉自动驾驶模式出问题了.此外,Ub ...

  3. java 的ConcurrentHashMap底层数据结构

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  4. JwtUser JwtAuthenticationEntryPoint JwtAuthorizationTokenFilter JwtUserDetailsService AuthenticationController

    package me.zhengjie.core.security; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok ...

  5. [LC] 246. Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  6. MOOC（5）- mock模拟返回响应数据

    1.安装mock 1)pip install mock 2)或者下载离线安装包 2.mock散装使用 import unittest from mock import mock from day_20 ...

  7. 关于php自学

    自己本人现在正在自学php有一段时间了,不知道现在的学习状态咋样,在我看来应该属于不算很糟糕,但有点糟糕的状态. 如果算学习自学php的话,现在断断续续应该是有5个月了,按理说是差不多可以做出独立项目 ...

  8. Jenkins 2 如何使用 PowerShell 以及自定 build fail (指定 exit code)

    Jenkins 除了用來做為 CI(持續性整合) 工具外,也可以與其他 plugin 配合達成其他目的(e.g.IIS restart.檔案壓縮備份-),今天就來看看可以怎麼與 PowerShell ...

  9. [洛谷P3403] 跳楼机

    题目传送门 套路题,同余最短路. 先只考虑y.z进行连边,再在mod x的意义下进行计算. 这里的“距离”dis[i]指的是,在所有满足a mod x=i的a里,能到达的最小的a是多少. 显然只要能到 ...

  10. spring boot 创建定时任务

    @Scheduled默认创建的线程是单线程,任务的执行会受到上一个任务的影响,创建定时任务也比较简单 123456789101112 @Component@Configuration //1.主要用于 ...