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

属性值: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

以上是关于零基础JavaScript编码的主要内容,如果未能解决你的问题,请参考以下文章

零基础JavaScript编码

任务十三:零基础JavaScript编码

任务十六:零基础JavaScript编码

任务十七:零基础JavaScript编码

javascript入门经典零基础学习

JavaScript零基础入门 7:JavaScript基础函数