任务目的

  • 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. Hibernate/JPA中@Where使用时注意

    在使用Hibernate或者JPA时,我们经常会使用@Where注解实现查询过滤,在实体类上.实体属性上.查询语句上都有应用. 例如: @Where(clause = "status != ...

  2. 吴裕雄--天生自然python学习笔记：python 用 Tesseract 识别验证码

    用 Selenium 包实现网页自动化操作的案例中,发现很多网页都因 需输入图形验证码而导致实验无法进行 . 解决的办法就是对验证码进行识别 . 识 别的方法之 一 是通过图形处理包将验证码的大部分背 ...

  3. F. Rhyme scheme

    题: https://nanti.jisuanke.com/t/41414 #include<bits/stdc++.h> using namespace std; typedef __i ...

  4. GSON转换成Long型变为科学计数法及时间格式转换异常的解决方案

    直接上工具类了,简单实用 public class GsonUtils { private static Gson gson = null; static { if (gson == null) { ...

  5. Apsara Clouder云计算专项技能认证：网站建设-简单动态网站搭建

    一.课程介绍 1.课程目标 了解静态网站和动态网站的区别 掌握动态网站的不同实现方式 在阿里云上如何搭建 wordPress网站以及 wordPress 网站的管理和优化 二.网站搭建的类型 1.网站 ...

  6. QLIKVIEW添加数据库连接

    1.点击文件 2.点击编辑脚本 3.点击 工具-ODBC管理员 4.添加DSN 5.里面的常规操作不再赘述 6.完成

  7. spring cache问题记录

    1.是否可以设置过期时间 timeout ttl 对于单个key设置过期时间 需要自定义CacheManager, 见3中的问题 spring boot 1版本可以重写RedisCacheManage ...

  8. Oralce获取32位随机数

    SELECT SYS_GUID() from dual;

  9. LeetCode No.73,74,75

    No.73 SetZeroes 矩阵置零 题目 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 输入: [   [1,1,1],   [ ...

  10. python-django-redis拒绝连接问题解决_20191121

    今天安装fastdfs的时候,发现最好固定虚拟机的ip, 固定了ip之后,发现使用Windows中的pycharm连接redis的时候,总是拒绝连接,找了很多的办法都不行,有点慌, 但是不能慌,现在要 ...