JavaScript 学习笔记 01 - 漂移的豆的个人博客

Web前端开发师需要掌握什么技术?

也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HTML+CSS创建一个漂亮的页面，但这还不够，它只是静态页面而已。我们还需使用JavaScript增加行为，为网页添加动态效果。准备好，让JavaScript带你进入新境界吧!

知识点讲解

术语

术语“ECMAScript”和“JavaScript”指的是同一个东西。但如果把JavaScript看成是“Mozilla或其他组织的ECMAScript实现”，那么ECMAScript就是实现JavaScript所依据的标准。术语“ECMAScript”也用来描述语言版本(比如ECMAScript5)。

JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当编写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释JavaScript由三部分组成：

核心（ECMAScript）描述了该语言的语法和基本对象
文档对象模型(DOM，Documnet)描述了处理网页内容的方法和接口
浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口

JavaScript的主要特点

1. 解释型脚本语言

JavaScript是一种解释型脚本语言，在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释，大量节省客户端与服务器端进行数据交互的时间。

2. 基于对象的语言

JavaScript语言是基于对象的（Object-Based），JavaScript提供了大量的内置对象，如：String、Number、Boolean、 Array、Date、Math、RegExp等等。但它还是具有一些面向对象的基本特征，可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，编写功能强大的Web文档。

3. 简单性

JavaScript基本结构类似C语言，采用小程序段的方式编程，并提供了简易的开发平台和便捷的开发流程，就可以嵌入到HTML文档中供浏览器解释执行。同时JavaScript的变量类型是弱类型，不强制检查变量的类型，也就是说可以不定义其变量的类型。

4. 动态性

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用事件驱动的方式进行的。所谓事件就是指在主页（homepage）中执行了某种操作所产生的动作，例如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应，即事件驱动。

5. 跨平台性

JavaScript依赖于浏览器本身，与操作系统环境无关，只要操作系统能运行浏览器并且浏览器支持JavaScript，就可以正确执行。

JavaScript相关应用

选择 JavaScript 脚本编辑器

引入JavaScript脚本代码到HTML文档中方法

Javascript常用的输出语句：

• 使用 window.alert() 弹出警告框。

• 使用 document.write() 方法将内容写到 HTML 文档中。

• 使用 innerHTML 写入到 HTML 元素。

• 使用 console.log() 写入到浏览器的控制台。

JavaScript**能做什么？

1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

本章了解JavaScript的基本使用，制作简单的网页动态效果。

如何安装 HBuilder？

HBuilder下载地址：在HBuilder官网https://www.dcloud.io/点击免费下载，下载最新版的HBuilder。

HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图

注意事项

JavaScript可以让网页呈现各种动态效果。做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。

JavaScript易学性体现：

1.学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。

2.我们可以用简单命令，完成一些基本操作。

注意事项：

JavaScript是区分大小写的，如：document和Document是不一样的。同时注意方法、属性、变量等的大小写。
JavaScript中的字符、符号等一定要在英文状态下输入吆。

JavaScript位置

我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。 放在部分 最常用的方式是在页面中head部分放置

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

任务

我们试一试，在不同位置写入JS代码:

1.在右边编辑器的第7行输入document.write("I love");

2.在右边编辑器的第12行输入

document.write("javascript");

avaScript引用方式

使用

JavaScript代码只能写在HTML文件中吗?当然不是，我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

注意:在JS文件中，不需要标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

JavaScript-输出内容（document.write）

document.write()可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用”“括起，直接输出”“号内的内容。

<script type="text/javascript">document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。</script>

第二种:通过变量，输出内容

<script type="text/javascript">
  var mystr="hello world!";document.write(mystr);  //直接写变量名，输出变量存储的内容。</script>

第三种:输出多项内容，内容之间用+号连接。

<script type="text/javascript">
  var mystr="hello";document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接</script>

第四种:输出HTML标签，并起作用，标签使用”“括起来。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

JavaScript-警告（alert 消息对话框）

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

语法:

alert(字符串或变量);

看下面的代码:

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注:alert弹出消息对话框(包含一个确定按钮)。

结果:按顺序弹出消息框

注意:

在点击对话框”确定”按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert输出内容，可以是字符串或变量，与document.write 相似。

使用 console.log() 写入到浏览器的控制台

<script>

a = 5;
 b = 6;
 c = a + b;
 console.log(c);
</script>

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示JavaScript 值。在调试窗口中点击“console”选项卡。在HBuilder默认控制台里也可以显示结果。直接操作文档

这是最佳的方式，尽量使用这种方式来与网页和用户交互。使用JavaScript可以访获取用户输入的值，修改HTML或样式，更新网页的内容，全面控制页面。这些都是利用浏览器的文档对象模型（后面将更详细地讨论）实现的。这是与用户交流的最佳方式。然而，要使用文档对象模型，你必须知道网页的结构，并熟悉用来读写网页的编程接口。

使用innerHTML写入到HTML元素。

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

 document.getElementById(“id”)

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>Sample Page!</title>
    </head>
    
    <body>
        <p id="demo">我的第一个段落</p>
        <script>
            document.getElementById("demo").innerHTML = "段落已修改。";
        </script>
    </body>

</html>

以上JavaScript语句可以在web浏览器中执行：document.getElementById(“demo”) 是使用id属性来查找HTML元素的JavaScript代码。innerHTML = “段落已修改。” 是用于修改元素的HTML内容(innerHTML)的JavaScript代码。

注释

注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读，注释内容一般放到需要解释语句的结尾处或周围。

单行注释，在注释内容前加符号 “//”。

<script type="text/javascript">
  document.write("单行注释使用'//'");  // 我是注释，该语句功能在网页中输出内容</script>

多行注释以”/*“开始，以”*/”结束。

<script type="text/javascript">
   document.write("多行注释使用/*注释内容*/");   /*
    多行注释
    养成书写注释的良好习惯
   */</script>

样式的注释也是以”/*“开始，以”*/”结束。