任务目的

  • 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. HDU 6126 Give out candies（网络流）

    题目给出n,m,k 然后给出n*m的矩阵a[i][j]代表第i个人在获得j 颗糖果能得到的满足值, 然后k是k行每行输入三个整数x,y,z     ,x,y,z表示一组限制表示第x个人分到的糖数减去第 ...

  2. RDD(一)——概述

    什么是RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象(其实是计算抽象).代码中是一个抽象类,它代表一个不可变.可分区. ...

  3. q检验|新复极差法|LSD|二因素方差分析

    生物统计与实验设计 放大程度q检验:精度较高>新复极差法:各种错误比较平均>LSD 其中,LSD不随M的变化而变化,但是SSR和q-test会随M变化而变化. 第一步代表了方差分析的核心思 ...

  4. [LC] 5. Longest Palindromic Substring

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  5. maven项目部署到tomcat中没有classe文件的问题汇总

    1.修改生成的class文件的位置

  6. Angular开发者指南（七）依赖注入

    依赖注入 依赖注入(DI)是一种软件设计模式,处理组件如何获取其依赖关系. AngularJS注入器子系统负责创建组件,解析它们的依赖关系,并根据请求将它们提供给其他组件. 使用依赖注入 DI遍布An ...

  7. 使用JavaScript获取前一周的日期

    在开发当中遇到了一个关于echarts初始展示当前前7天的数据,正好记录一下如何获取前"n"天的日期, 返回时间格式:2020-02-02 // 返回前number天的日期格式为2 ...

  8. Token最主要的作用.个人观点

    Token除了登陆验证以外,我个人觉得最主要的作用就是可反解,通过token可以在服务器端查找出Token相关信息.这样可以省去一些不必要的参数. 关于token是否可以代替session来使用看个人 ...

  9. 从Surface 3发布 看微软快速转向的根由

    3发布 看微软快速转向的根由" title="从Surface 3发布 看微软快速转向的根由"> 平地一声惊雷起,微软突然送惊喜!在毫无征兆的情况下,微软突然发布一 ...

  10. github hexo配置踩过的坑

    大体步骤:配置npm,在github中增加自己的sshkey. 多sshkey的话在用户主目录的.ssh中要配置好. 删除仓库里面 source/_posts/我的文章.md 执行下面命令更新博客 h ...