零基础JavaScript编码
Posted 程序媛家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础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编码的主要内容，如果未能解决你的问题，请参考以下文章