07--Web前端之JavaScript

JavaScript

JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块： 
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

 

 

 

JavaScript嵌入页面的方式

1、内联JS

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="submit" value="点击收祝福" onclick="alert('老师你真好！');">
 9 </body>
10 </html>
内联JS

 

2、页面script标签嵌入

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7          var a="老师你真好";
 8          alert(a);
 9 
10 
11 
12     </script>
13 </head>
14 <body>
15     
16 </body>
17 </html>
页面script标签嵌入

 

3、外部引入

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="js.js"></script>
 7 
 8 </head>
 9 <body>
10     
11 </body>
12 </html>
外部引用js

 

 

javascript语句与注释

1.一条javascript语句应该以“;”结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       var a = "老师你真好！";
       var b = "今天天气还不错啊！";
       function fn(){

           alert(a)
       };

      
       fn();
     

    </script>

</head>
<body>
JS展示

 

2.js的特点与优势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       var a = "老师你真好！";
       var b = "今天天气还不错啊！";
       function fn(a){

           alert(a)
       };

        function fn(b){

           alert(b)
       };
       fn(b);
       fn(a);

    </script>

</head>
<body>
    
</body>
</html>
JS代码的优势

 

3.javascript注释

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7        var a = "老师你真好！";
 8        // var b = "今天天气还不错啊！";  单行注释
 9       /* function fn(){
10 
11            alert(a)
12        };多行注释*/
13 
14       
15        fn();
16      
17 
18     </script>
19 
20 </head>
21 <body>
22     
23 </body>
24 </html>
JS的注释

 

 

 

变量

JavaScript 是一种弱类型语言（变量类型由值决定），javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'

 var a = 123;
 var b = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var c = 45,d='qwe',f='68';
变量格式

 

变量类型

5种基本数据类型：
number、string、boolean、undefined、null

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4       <meta charset="UTF-8">
 5       <title>Document</title>
 6       <script>
 7 var a= 123;
 8 var b= "你好";
 9 var c= true;
10 var d;
11 
12 alert(d);
13     
14       </script>
15 </head>
16 <body>
17       
18 </body>
19 </html>
变量的各种类型

 

1种复合类型：
object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

 

 

 

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7 
 8    document.getElementById("box").title="哈哈，我把标题给改了。"
 9 
10 
11   </script>
12 </head>
13 <body>
14   <div id="box" title="我是标题">我是一个div标签</div>
15 </body>
16 </html>
用JS修改标题出错
因为浏览器执行代码渲染的时候是从上往下依次执行的，因为JS放在了头部里，所以浏览器执行到JS这里的时候，找不到ID为box的那个标签了，所以会报错。
上面代码出错的原因

解决方法有两种：

  第一种方法：将javascript放到页面最下边

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  
 7 </head>
 8 <body>
 9   <div id="box" title="我是标题">我是一个div标签</div>
10 
11 
12 
13 
14    <script>
15 
16    document.getElementById("box").title="哈哈，我把标题给改了。"
17 
18 
19   </script>
20 </body>
21 </html>
放到页面底部

 

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  <script>
 7 
 8    window.onload = function(){
 9 
10 
11 document.getElementById("box").title="哈哈，我把标题给改了。"
12 
13 
14 
15 
16 
17    }
18 
19 
20  </script>
21 </head>
22 <body>
23   <div id="box" title="我是标题">我是一个div标签</div>
24 
25 
26 
27 
28   
29 </body>
30 </html>
放在顶部window.onload里面

 

 

 

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法 
1、“.” 操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  <script>
 7 
 8    window.onload = function(){
 9 
10 
11 
12 document.getElementById("link").href="http://www.baidu.com"
13 
14 
15 
16 
17 
18    }
19 
20 
21  </script>
22 </head>
23 <body>
24   
25 
26   <a href="#" id="link">百度</a>
27 
28 
29 
30 
31   
32 </body>
33 </html>
增加a标签的网址
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  <script>
 7 
 8    window.onload = function(){
 9 
10 
11 
12 document.getElementById("link").href="http://www.baidu.com"
13 document.getElementById("link").title="这是一个百度的网址跳转"
14 
15 
16 
17 
18 
19    }
20 
21 
22  </script>
23 </head>
24 <body>
25   
26 
27   <a href="#" id="link">百度</a>
28 
29 
30 
31 
32   
33 </body>
34 </html>
给a标签新增一个title属性
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  <script>
 7 
 8    window.onload = function(){
 9 
10    var oA = document.getElementById("link");
11 
12       oA.href="http://www.baidu.com"
13       oA.title="这是一个百度的网址跳转"
14 
15 
16    }
17 
18 
19  </script>
20 </head>
21 <body>
22   
23   <a href="#" id="link">百度</a>
24   
25 </body>
26 </html>
将以上两条内容进行简写
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  <script>
 7 
 8    window.onload = function(){
 9 
10    var oA = document.getElementById("link");
11 
12       oA.href="http://www.baidu.com"
13       oA.title="这是一个百度的网址跳转"
14 
15       alert(oA.id);
16       alert(oA.href);
17       
18 
19 
20    }
21 
22 
23  </script>
24 </head>
25 <body>
26   
27 
28   <a href="#" id="link">百度</a>
29 
30 
31 
32 
33   
34 </body>
35 </html>
JS属性内容读取

 

注意：

       等于号右边一定要写上引号，如果不写引号的话JS会认为这个东西是一个变量，但是这个变量又没有赋值，会导致出错；如果加上引号之后JS才会知道我写的这个东西是一个值。

2、“[ ]”操作（由于输入变量）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7 
 8        
 9 
10 
11   </style>
12 
13   <script>
14 
15     window.onload = function(){
16 
17 
18         var oA = document.getElementById("div1");
19 
20         var haha = "background";
21             
22 
23             oA.style[haha] = "red";
24 
25 
26 
27 
28     }
29 
30 
31 
32   </script>
33 </head>
34 <body>
35   <div id="div1">春天啊你在哪里</div>
36 </body>
37 </html>
[]操作元素案例

 

属性写法

1、html的属性和js里面属性写法一样

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <link rel="stylesheet" href="1.css" id="beijing">
 7   <script>
 8 
 9     var oA = document.getElementById("beijing");
10     oA.href = "2.css"
11 
12 
13 
14 
15   </script>
16 </head>
17 <body>
18   
19 </body>
20 </html>
改变使用的CSS文件


2、“class” 属性写成 “className”

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7 
 8         .box1{
 9           width: 200px;
10           height: 200px;
11           background-color: red;
12         }
13         
14 
15         .box2{
16           width: 300px;
17           height: 300px;
18           background-color: green;
19         }
20 
21 
22   </style>
23 
24   <script>
25 
26     window.onload = function(){
27 
28 
29         var oA = document.getElementById("div1");
30             oA.className = "box2";
31 
32 
33 
34 
35     }
36 
37 
38 
39   </script>
40 </head>
41 <body>
42   <div id="div1" class="box1"></div>
43 </body>
44 </html>
className的用法


3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7 window.onload = function(){
 8 
 9 var oDiv = document.getElementById("div1");
10        oDiv.style.color = "red";
11        oDiv.style.backgroundColor = "gold";
12        oDiv.style.fontSize = "30px";   //有-的标签一定要删除首字母改成大写
13 
14 }
15    
16 
17   </script>
18 </head>
19 <body>
20   <div id="div1">我是一个div</div>
21 </body>
22 </html>
js操作颜色，背景，字体大小

 

 

innerHTML

 innerHTML可以读取或者写入标签包裹的内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7   window.onload = function(){
 8     var oDiv1 = document.getElementById("div1");
 9         oDiv1.innerHTML = "我是凭空变出来的";
10 
11 
12      }
13   </script>
14 </head>
15 <body>
16   <div id="div1"></div>
17 </body>
18 </html>
往HTML标签中写入内容

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7   window.onload = function(){
 8     var oDiv1 = document.getElementById("div1");
 9         oDiv1.innerHTML = "我是凭空变出来的";
10 
11     var oDiv2 = document.getElementById("div2");
12         oDiv1.innerHTML = "<a href='http://www.baidu.com'>我是百度呀</a>";
13 
14      }
15   </script>
16 </head>
17 <body>
18   <div id="div1"></div>
19   <div id="div2"></div>
20 
21 </body>
22 </html>
还可以写入标签

 

 

函数

函数就是重复执行的代码片。

函数定义与执行

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7      
 8      // 定义函数
 9     function aa(){
10 
11     
12          alert("今天天气真不错")
13 
14     }
15 
16    // 执行函数
17     aa();
18 
19 
20 
21   </script>
22 </head>
23 <body>
24   
25 </body>
26 </html>
函数的定义与执行

 

小案例： 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <link rel="stylesheet" href="1.css" id="pifu">
 7   <script>
 8      
 9      
10     function aa(){
11 
12     var pifu = document.getElementById("pifu");
13         pifu.href = "1.css"
14         
15 
16     }
17 
18      function bb(){
19 
20     var pifu = document.getElementById("pifu");
21         pifu.href = "2.css"
22         
23 
24     }
25 
26    
27 
28 
29 
30   </script>
31 </head>
32 <body>
33   <input type="button" value="换肤1" onclick="aa()">
34   <input type="button" value="换肤2" onclick="bb()">
35 </body>
36 </html>
背景换肤

 

小案例：

     将背景换肤中的代码从HTML中提取出来

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <link rel="stylesheet" href="1.css" id="pifu">
 7   <script>
 8      
 9 
10 
11       window.onload = function(){
12 
13         var oBtn1 = document.getElementById("anniu1");
14         var oBtn2 = document.getElementById("anniu2");
15 
16             oBtn1.onclick = aa;  //此处这个aa不用写(),()代表立即执行
17             oBtn2.onclick = bb;
18 
19       }
20 
21 
22      
23     function aa(){
24 
25     var pifu = document.getElementById("pifu");
26         pifu.href = "1.css"
27         
28 
29     }
30 
31      function bb(){
32 
33     var pifu = document.getElementById("pifu");
34         pifu.href = "2.css"
35         
36 
37     }
38 
39    
40 
41 
42 
43   </script>
44 </head>
45 <body>
46   <input type="button" value="换肤1" id="anniu1">
47   <input type="button" value="换肤2" id="anniu2">
48 </body>
49 </html>
将JS代码从HTML中提取出来

 

变量与函数预解析 

 JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

     <meta charset="UTF-8">
     <title>Document</title>
     <script>
     
       var a = 123345;
       alert(a);
       
     </script>
</head>
<body>
     
</body>
</html>
原来的函数
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7 
 8        // 会报错，undefind
 9        alert(a);
10        var a = 123345;
11       
12        
13      </script>
14 </head>
15 <body>
16      
17 </body>
18 </html>
将alert(a)放到最上面
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7 
 8         var a; 
 9       
10        a = 123345;
11        alert(a);
12       
13        
14      </script>
15 </head>
16 <body>
17      
18 </body>
19 </html>
浏览器真正执行的时候是这样的
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7         
 8      aa();
 9      function aa(){
10           alert("我是一个函数");
11      }
12 
13    
14 
15      </script>
16 </head>
17 <body>
18      
19 </body>
20 </html>
function定义的函数提前

 

 

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7        window.onload = function(){
 8 
 9            var oDiv = document.getElementById("tianqi");
10 
11            oDiv.onclick = aa;
12 
13 
14           function aa(){
15 
16 
17 
18 
19                alert("小心打雷闪电啊")
20           }
21 
22        }
23 
24 
25 
26 
27 
28      </script>
29 </head>
30 <body>
31      <div id="tianqi">今天天气真不错</div>
32 </body>
33 </html>
这个是有名字的函数
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7        window.onload = function(){
 8 
 9            var oDiv = document.getElementById("tianqi");
10 
11            oDiv.onclick =   function(){
12 
13 
14 
15 
16                alert("小心打雷闪电啊");
17           }
18 
19 
20         
21 
22        }
23 
24 
25 
26 
27 
28      </script>
29 </head>
30 <body>
31      <div id="tianqi">今天天气真不错</div>
32 </body>
33 </html>
这是一个匿名函数

 

 

函数传参

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7        window.onload = function(){
 8 
 9            var oDiv = document.getElementById("tianqi");
10 
11            function yangshi(aa){
12                oDiv.style.color = aa;
13            }
14 
15            
16          yangshi("green");
17 
18        }
19 
20 
21 
22 
23 
24      </script>
25 </head>
26 <body>
27      <div id="tianqi">今天天气真不错</div>
28 </body>
29 </html>
函数传一个参数
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <script>
 7        window.onload = function(){
 8 
 9            var oDiv = document.getElementById("tianqi");
10 
11            function yangshi(styl,aa){
12                oDiv.style[styl] = aa;
13            }
14 
15            
16          yangshi("background","green");
17          yangshi("width","100px");
18          yangshi("height","100px");
19 
20 
21        }
22 
23 
24 
25 
26 
27      </script>
28 </head>
29 <body>
30      <div id="tianqi">今天天气真不错</div>
31 </body>
32 </html>
函数传两个参数

 

小案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7 
 8     window.onload = function(){
 9 
10           var oInput01 = document.getElementById("input01");
11           var oInput02 = document.getElementById("input02");
12           var oBtn = document.getElementById("btn");
13 
14 
15 
16            // 写入值：
17            // oInput01.value = 10;
18            // oInput02.value = 20;
19 
20             oBtn.onclick =function(){
21               var a = oInput01.value;
22               var b = oInput02.value;
23               var c = parseInt(a)+parseInt(b);
24               alert(c); 
25             }
26 
27            
28 
29 
30 
31 
32     }
33 
34 
35   </script>
36 </head>
37 <body>
38   <input type="text" id="input01">+
39   <input type="text" id="input02">
40   <input type="button" value="等于" id="btn">
41 
42 </body>
43 </html>
两数相加的一个小程序

 

 

 

条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符 
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

求余（求模）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script>
 7 
 8       var a = 30;
 9       var b = 7;
10       var c = a % b;
11       alert(c);
12 
13 
14 
15   </script>
16 </head>
17 <body>
18   
19 </body>
20 </html>
求模

if else （如果....否则.....）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

     div{

      width: 200px;
      height: 200px;
      background-color: red;
     }
 


  </style>


  <script>
    window.onload = function(){


      var oBtn = document.getElementById("input01");
      var oDiv = document.getElementById("box");
      oBtn.onclick = function(){

             oDiv.style.display = "none";

      }
    }


  </script>
</head>
<body>
  <input type="button" value="切换" id="input01">
  <div id="box"></div>
</body>
</html>
半成品：点击按钮盒子消失
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7 
 8      div{
 9 
10       width: 200px;
11       height: 200px;
12       background-color: red;
13      }
14  
15 
16 
17   </style>
18 
19 
20   <script>
21     window.onload = function(){
22 
23 
24       var oBtn = document.getElementById("input01");
25       var oDiv = document.getElementById("box");
26       oBtn.onclick = function(){
27 
28              if(oDiv.style.display == "none"){
29               oDiv.style.display = "block";
30 
31              }
32 
33              else{
34               oDiv.style.display = "none";
35              }
36 
37       }
38     }
39 
40 
41   </script>
42 </head>
43 <body>
44   <input type="button" value="切换" id="input01">
45   <div id="box"></div>
46 </body>
47 </html>
使用if else语句实现点击按钮盒子消失，再点击按钮盒子出现的效果

 if else的多重嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script> 
       
       var today = 9;
       if(today == 1 ){
        alert("你要补习语文");
       }
       else if(today == 2){
        alert("你要补习数学");
       }
        else if(today == 3){
        alert("你要补习英语");
       }
        else if(today == 4){
        alert("你要补习计算机");
       }
       else if(today == 5){
        alert("你要补习项目综合");
       }
       else{
        alert("今天我就不补习了");
       }
     

    </script>
     
</head>
<body>
     
</body>
</html>
if else的多重嵌套

 

switch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>

     var today = 9;
     switch(today){
      case 1:
      alert("补习语文");
      break;

      case 2:
      alert("补习数学");
      break;

      case 3:
      alert("补习英语");
      break;

      case 4:
      alert("补习网站综合");
      break;

      case 5:
      alert("补习计算机");
      break;
      default:
      alert("算了，今天我还是不补习了");
     }



  </script>
</head>
<body>
  
</body>
</html>
switch语句

 

 

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

创建数组的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 第一种创建数组的方式
    var aRr = new Array (1,2,3,'你好');

    // 第二种创建数组的方式，开发中建议使用第二种创建数组
    var aRr01 = [1,2,3,'你好'];

  </script>
</head>
<body>
  
</body>
</html>
创建数组的方式

 

操作数组中数据的方法 
1、获取数组的长度：aList.length;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 第一种创建数组的方式
    var aRr = new Array (1,2,3,'你好');

    // 第二种创建数组的方式，开发中建议使用第二种创建数组
    var aRr01 = [1,2,3,'你好',5];
    alert(aRr.length);

    
    alert(aRr01.length);


  </script>
</head>
<body>
  
</body>
</html>
获取数组的长度

 2、获取数组某个位置上的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
      <script>
    

    // 第二种创建数组的方式，开发中建议使用第二种创建数组
    var aRr01 = [1,2,3,'你好'];
    alert(aRr01[3]);

  </script>
</head>
<body>
    
</body>
</html>
看看数组3的位置是什么值

 

 

posted @ 2018-05-15 17:29  陈永腾  阅读(288)  评论(0)    收藏  举报