任务目的
- 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