任务目的

  • 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. Gson、jackson 序列化，反序列化(单个、集合)

    实体类: package com.nf.redisDemo1.entity; public class News { private long id; private String title; pr ...

  2. Python练习四-浅拷贝&深拷贝

    一.数字.字符串不论是浅拷贝.深拷贝都是指向一个地址. a = 1 b = "abc" print (id(a)) print (id(b)) a1 = a b1 = b prin ...

  3. 快手为什么要全资收购Acfun？

    近日据媒体报道,快手已完成对「Acfun」以下简称A站的全资收购.未来A站仍将保持独立品牌和独立运营以及原有团队的独立发展.近年来,A站可谓命途多舛.相比隔壁B站风风光光顺利上市且成为真正的二次元大本 ...

  4. 一、安装Docker CE

    卸载旧版本 较旧版本的Docker被称为docker或docker-engine.如果已安装这些,需要卸载以及相关的依赖项. $ sudo yum remove docker \ docker-cli ...

  5. linux下使用过的命令总结（未整理完）

    1.常用命令不需解释 ls\cd\cp\mv\pwd\file\vi\vim\cat 2.getconf LONG_BIT 终端返回32表示操作系统32位,返回64表示操作系统64位. 3.ifcon ...

  6. python与正则不得不说的故事

    今日所得 正则表达式 re模块 正则表达式:字符 元字符 匹配内容 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线 \s 匹配任意的空白符 \d 匹配数字 \n 匹配一个换行符 \t 匹 ...

  7. HLS图像处理总结（一）

    HLS工具 以个人的理解,xilinx将HLS(高层次综合)定位于更方便的将复杂算法转化为硬件语言,通过添加某些配置条件HLS工具可以把可并行化的C/C++的代码转化为vhdl或verilog,相比于 ...

  8. WebFilter 在springBoot工程中不起作用

    [1]@ServletComponentScan 必须有一个注解将带有@WebFilter的类包含进去. [2]自定义 FiltersConfig extends WebMvcConfigurerAd ...

  9. django自带数据库sqlite

    python manage.py makemigrations # 记录关于models.py的所有改动,但是还没有作用的数据库文件中 python manage.py migrate # 把mode ...

  10. Python之configparser配置文件的读取

    配置文件名 config.ini 文件内容: [linux] ip:10.0.13.26 port:22 username:root password:W2ynE6b58wheeFho [mysql] ...