JavaScript简介 - 码农教程

初步了解JavaScript

一、JavaScript的重要性

所有主流浏览器都支持JavaScript。目前，全世界大部分网页都使用javaScript。它可以让网页呈现各种动态效果。在web前端开发中，如果想实现漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。

学习JavaScript的起点就是处理网页，所以先学习基础语法和如何使用DOM进行简单操作。

感受一下JavaScript操作，可以有很神奇的操作。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p id="p1">我是第一段文字</p>
 9     <p id="p2">我是第二段文字</p>
10     <script type="text/javascript">
11     document.write("hello")
12     document.getElementById("p1").style.color="blue";
13     </script>
14 </body>
15 </html>

二、如何插入JavaScript

（一）、页面插入

使用JS标签在HTML网页中插入JavaScript代码。

注意：<script>标签要成对出现，并把JavaScript代码写在<script></script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9     document.write("hello")
10     </script>
11 </body>
12 </html>

（二）、引入JS外部文件

JavaScript代码不仅可以使用<script>标签写在HTML文件内部。

还可以选择把HTML文件和JS代码分开，单独创建一个JavaScript文件（简称），其文件后缀通常为 (.js)，然后将JS代码直接写在JS文件中。

注意：在JS文件中，不需要<script>标签，直接编写JavaScript代码就可以。

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

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

在HTML文档中通过<script src="script.js"></script>引入外部的script.js文件

在script.js文件中写入document.write("引用JS文件")；，JS代码就可以直接运行了。

HTML部分

JS文件部分

三、JS在页面中的位置

我们可以将JavaScript代码放置在HTML文件中的任何位置，但是一般习惯于放置在网页的head或者是body部分。

放在<head>部分

最常用的方式是在页面中head部分放置在<script>元素，浏览器解析head部分就会执行这个代码，然后才解析head部分就会执行这个代码，然后才解析页面的其余部分。

放在<body>部分

JavaScript代码在网页读取到该语句的时候·就会执行。

注意：

JavaScript作为一种脚本语言可以放在HTML页面中的任何位置，但是浏览器解释HTML时是按照先后顺序的，所以放在前面的script就被先执行。

比如，进行页面显示初始化的JS必须放在 head 里面，因为初始化都要求提前进行（给页面的body设置css等）；

如果是通过事件调用执行的function，就对位置没有什么特别的要求。

四、认识语句和符号

JavaScript语句：是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式：语句；

分析下面代码

上面代码中的document.write("hello "); 就是一个JavaScript语句。

一行的结束就被认定为语句的结束，通常在结尾加上一个分号"；"来表示语句的结束。

上面的两段代码，每句结束后都有"；" 按照先后顺序执行语句。

所以表现效果：

注意："；"分号要在英文状态下输入，JS中的代码和符号都要在英文状态下输入。

虽然分号"；"也可以可以不写，但是我们要养成良好正确的书写规范，记得在语句末尾写上分号。

五、JS注释

注释很重要，在代码中添加合适的注释可以提高代码的可读性，帮助自己和别人阅读和理解所编写的JavaScript代码，注释里面的内容不会显示在页面中，主食可以分为单行注释和多行注释。有的时候为了方便阅读，注释内容一般放在需要解释的语句的结尾处或是周围。

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

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

注意：对内容设置注释，单行注释使用 [ Ctrl键+/ ] 就可以实现；多行注释使用 [ Ctrl键+Shift键+/ ] 可以实现。

六、变量

什么是变量？变量，顾名思义变量就是可以变化的量；从编程的角度去理解，变量就是用于存储某种或是某些数值的存储器。

可以把变量看做盒子，为了区分不同的盒子，可以采用不同的名称去定义盒子，第一个盒子就是box1，第二个盒子命名为box2。

盒子--内容的存储器（变量）；盒子的名字box1--为盒子命名（变量名）

定义变量使用的是关键字：var，语法如下：

变量名可以取任意名，但是必须要遵循命名规则：

变量名必须使用字母、英文下划线（_）或是美元符（$）开始；
然后可以使用任意多个英文字母、数字、下划线（_）或是美元符（$）组成；
不可以使用JavaScript关键字与JavaScript保留字。

变量要先声明在赋值，例如：

变量也可以重复赋值，例如：

注意：1、在JS中是区分大小写的，如变量good和Good并不相同，这就是定义的两个变量；

2、变量也可以不声明直接使用，但是不规范。还是需要先声明然后再使用。

3、当向变量分配文本值的时候，应该使用双引号（" "）或单引号（' '）包围这个值。（外面是双引号，里面就是单引号；外面单引里面双引号）

4、在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

5、当向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

代码示例：

<!DOCTYPE html>
<html>
   <head>
   <script type="text/javascript">
    var mychar;
    mychar="hello";</script>
   </head>
   <body>
   </body>
</html>

在这个文档中定义了名为 mychar 的变量，并且赋值为hello。

注意：该任务没有输出任何结果，只是定义变量和为变量赋值。

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4    <script type="text/javascript">
 5     var mychar;
 6     mychar="hello world";
 7     document.write(mychar+"<br/>");
 8     mychar="great";
 9     document.write(mychar+"<br/>");
10    </script>
11    </head>
12    <body>
13    </body>
14 </html>

声明了变量名后，给变量赋值，并且使用document.write()属性，分别使变量的值在页面输出。

七、函数

什么是函数？函数是完成某特定功能的一组语句。

也许完成一项特定任务，可能需要很多行代码。这个时候我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就避免了重复输入大段代码带来的麻烦。

定义函数的语法：

说明：

1、function定义函数的关键字。

2、“函数名” 是为这个函数定义的名字。

3、“函数代码” 替换为完成特定功能的代码。

注意：JS对大小写敏感，关键词function 必须是小写的，而且要以和函数名称相同的大小写去调用函数。

代码示例：

1、编写一个可以实现两数相加的函数，并给函数命名为"add1"

函数调用：

函数定义好之后，是不可以自动执行的，至于要在需要的位置写函数就可以。

alter页面弹出

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4    <script type="text/javascript">
 5     function add1()
 6     {
 7         var sum= 3 + 2;
 8         alert(sum);
 9     }
10     add1()
11    </script>
12    </head>
13    <body>
14    </body>
15 </html>

调用函数

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4    <script type="text/javascript">
 5     function add1()
 6     {
 7         var sum= 3 + 2;
 8         alert(sum);
 9     }
10     add1();//调用函数，直接写函数名
11    </script>
12    </head>
13    <body>
14    <form>
15    <input type="button" value="sum" onclick="add1()">
16 <!-- 单击按钮后，调用函数，onclick为单击事件 -->
17    </form>
18    </body>
19 </html>

原文地址：https://www.cnblogs.com/nyw1983/p/11437871.html