零基础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

属性值:textString类型:表示指定节点的文本内容。

返回值:字符串,代表节点和子节点文本。

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

时间: 2024-10-26 15:37:08

零基础JavaScript编码(一)的相关文章

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

任务十六:零基础JavaScript编码(四)

面向人群: 零基础或初学者 难度: 中等 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知

任务十七:零基础JavaScript编码(五)

任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指数数据 用户可以选择查看不同的时间粒度,以选择要查看的空气质量指数是以天为粒度还是以周或月为粒度 天:显示每天的空气质量指数 周:以自然周(周一到周日)为粒度,统计一周7天的平均数为这一周的空气质量数值,如果数据中缺少一个自然周的几天,则按剩余天进行计算 月:以自然月为粒度,统一一个月所有天的平均数

任务十三:零基础JavaScript编码(一)

任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以下示例代码,补充其中的JavaScript功能,完成一个JavaScript代码的编写 本任务完成的功能为:用户可以在输入框中输入任何内容,点击"确认填写"按钮后,用户输入的内容会显示在"您输入的值是"文字的右边 <!DOCTYPE html> <ht

任务一:零基础HTML编码练习

任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构),详情看下图(可右键复制图片到本地自行练习): 任务注意事项 只需要完成HTML代码编写,不需要写CSS 示例图仅为参考,不需要完全实现一致,其中的图片.文案均可自行设定 尽可能多地尝试更多的HTML标签 任务完成及总结: 问题1:标题元素无法正确

零基础HTML编码学习笔记

任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构) 任务注意事项 只需要完成HTML代码编写,不需要写CSS 示例图仅为参考,不需要完全实现一致,其中的图片.文案均可自行设定 尽可能多地尝试更多的HTML标签 总结 一.涉及HTML标签 1.<header>标签(Header Element):

任务一:零基础HTML编码

开始系统学习 前端 通过好友 #HRL 的介绍 百度前端技术学院: http://ife.baidu.com/ 网站上都是以任务的形式 来进行学习 网站会提供 在线学习参考资料 以及各种建议 还有其他团队的学习成果 都是很好的资源 趁自己 考研初期还有点时间 就抓紧学学吧 今天开始第一课 ----------学习中 晚点上传代码及成果-----------

任务二:零基础HTML及CSS编码(一)

任务二: 基于第一个任务“零基础HTML编码”代码,参考下图,在步骤一代码基础上增加CSS样式代码的编写. 在线参考学习资料: HTML简介(任务一内容):https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction CSS简介:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started -----------学习中 稍后更新学习成果---

javascript入门经典、零基础学习

本书目录 第一章:  JavaScript语言基础 第二章:  JavaScript内置对象第三章:  窗口window对象第四章:  文档document对象第五章:  表单form对象第六章:  History与Navigator对象第七章:  JavaScript框架编程第八章:  JavaScript异常处理 第九章:  自定义JavaScript对象     第一章 JavaScript语言基础 [javascript] view plain copy print? 什么是JavaSc