任务目的

  • 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. LeetCode No.103,104,105

    No.103 ZigzagLevelOrder 二叉树的锯齿形层次遍历 题目 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). ...

  2. day45-多线程(server和多个client通信)

    #server: import socket from threading import Thread def func(conn): conn.send(b'hello client') ret = ...

  3. thinking in java学习笔记：14章 类型信息

    14.2 Class 对象 https://github.com/zhaojiatao/javase 1.什么是Class对象,Class对象是用来做什么的? Class对象是java程序用来创建类的 ...

  4. [Windows] Access SMBIOS

    SMBIOS architecture System Management BIOS (SMBIOS) is the premier standard for delivering managemen ...

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

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

  6. perf4j+spring+aop 配置 注解方式

    今天将perf4j基于spring aop方式进入了接入,接入方法还是比较简单.具体配置如下: logback.xml <!--perf4j配置--> <appender name= ...

  7. Weave实现跨主机容器互联

    安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...

  8. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  9. 为什么前两年大热的VR创业突然冷了？

    不得不说,如果不是<头号玩家>在国内的热映,人们似乎都要忘记VR这个行业了.<头号玩家>中那些带有极强真实色彩的游戏,其实就是VR进化的目标,甚至是巅峰!而里面的角色佩戴的设备 ...

  10. 吴裕雄--天生自然python编程：turtle模块绘图（3）

    turtle(海龟)是Python重要的标准库之一,它能够进行基本的图形绘制.turtle图形绘制的概念诞生于1969年,成功应用于LOGO编程语言. turtle库绘制图形有一个基本框架:一个小海龟 ...