零基础JavaScript编码（一）
任务目的
- 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
零基础JavaScript编码（一）的更多相关文章
- 零基础JavaScript编码（三）总结
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 任务十七：零基础JavaScript编码（五）
任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...
- 任务十六：零基础JavaScript编码（四）
任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...
- 任务十五：零基础JavaScript编码（三）
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 任务十四：零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 任务十三：零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- 任务一：零基础HTML编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
- 零基础HTML编码学习笔记
任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代 ...
随机推荐
- linux_cat命令
cat 命令可以用来显示文本文件的内容(类似于 DOS 下的 type 命令),也可以把几个文件内容附加到另一个文件中,即连接合并文件. 关于此命令,有人认为写 cat 命令的人是因为喜欢猫,因此给此 ...
- 项目中docker swarm实践
docker swarm 集群服务通信 前置要求 服务需要在同一个docker swarm集群中 服务需要处于同一个overlay网络上 服务需要暴露容器端口 有2个以上服务名不同的服务 服务部署流程 ...
- Linux文件属性和权限
Linux文件属性 第一栏:表示文件类型和权限 文件的类型: d:目录 -:文件 l:链接文件 b:可存储设备 c:可输入设备 第一组:表示拥有者权限 第二组:表示该组的权 ...
- 学习python-20191107
一.导入模块的两种方式 方式1:import 包名.模块名 [ as 别名]方式2:from 包名 import 模块名 from 包名.模块名 import 变量|函数|类 # ...
- hadoop集群搭建（docker）
背景 目前在一家快递公司工作,因项目需要,对大数据平台做个深入的了解.工欲利其器必先利其器,在网上找了许多教程,然后自己搭建一个本地的环境并记录下来,增加一些印象. 环境搭建 1)Ubuntu doc ...
- SHELL用法四（for语句）
1.SHELL编程For语句案例实战 1)For语句固定的语法格式: For i in (表达式) do 动作1 done 2)For语句案例操作一: #!/bin/bash do echo “$NU ...
- jstl之核心标签
JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...
- Java程序、JSP以及JavaScript中如何判断某个字符串是否包含某个子串
1.JSP str:原始字符串, subStr:要查找的子字符串 <c:if test="${fn:contains(str,subStr)==true}"> < ...
- 题解：BZOJ 1009 HNOI2008 GT考试 KMP + 矩阵
原题描述: 阿申准备报名参加GT考试,准考证号为N位数 X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0<=Ai&a ...
- GOM通区插件-支持GOM绝对路径-读取配置项-分割字符等功能。不定期更新
A-A+ 2019年07月19日 Gom引擎 阅读 45 views 次 [@Main] #IF #SAY [<读配置项/@读配置项>] [<写配置项/@写配置项>] [& ...