1-javascript基础学习

1、JavaScript-简介、实现、输出

　　js--是一种轻量级编程语言，HTML中的脚本；

　　脚本代码必须位于 <script> 标签之间，<script> 可在 <head> 或者 <body> 引入；

　　通用的 js库在 <head> 中引入；某些需要文档加载才开始执行 js 写在 <body> 相应位置

　　js 脚本引入方式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <!-- head 内引入 js -->
12     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
14 </head>
15 <body>
16 <p id="p1">段落段落段落</p>
17
18 <!-- body内引入 js文件 defer属性 定义 脚本 会在整个页面加载到某一布时 再执行，这样就不会造成 网页打开延迟-->
19 <script type="text/javascript" defer="defer">
20     document.write("<h1>这是一个标题</h1>>");
22 </script>
24 </body>
25 </html>

2、JavaScript-语法和注释

　　javascript语句：向浏览器发出命令，告诉浏览器该做什么

　　javascript代码执行顺序：按照编写顺序依次执行

　　javascript标识符：必须以字母、下划线或者$符号开始

　　javascript关键字不能作为变量等名称使用

　　javascript对字母大小写敏感，会忽略多余空格

　　javascript注释：单行注释 //

　　　　　　　　　多行注释 /* */

3、JavaScript-变量和数据类型\

（1）变量

　　变量作为存储信息的容器，其值可通过变量名访问。js是弱数据类型语言，定义变量统一使用关键字var，也可以不使用var；

　　函数中，若使用var声明变量，程序会强制定义一个新变量，有同名的全局变量会覆盖该变量；

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5     <script type="text/javascript">
 6         // 定义全局变量 word
 7         var word = "全局变量";
 8         function demo() {
 9             // 局部变量 覆盖 全局变量
10             document.writeln(word + "<br/>");
11             // 定义局部变量 作用范围在 函数内
12             var word = "局部变量"
13             document.writeln(word);
14         }
15     </script>
16 </head>
17 <body>
18 <p id="result">幸福</p>
19 <button onclick="demo()">点击</button>
20 </body>
21 </html>

　　执行结果

　　函数中若不使用var声明变量，系统会优先在当前上下文中搜索是否存在该变量，不存在时系统才会重新定义一个新变量；若存在，系统会将全局变量赋值函数内变量（也是全局变量）。js没有块级作用域的概念，if和for语句中声明的变量会添加到当前的执行环境中。

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5     <script type="text/javascript">
 6         // 定义全局变量
 7         var word = "全局变量";
 8         function demo() {
 9             // 局部变量 覆盖 全局变量
10             document.writeln(word + "<br/>");
11             // 定义局部变量 作用范围在 函数内
12             word = "局部变量"
13             document.writeln(word);
14         }
15     </script>
16 </head>
17 <body>
18 <p id="result">幸福</p>
19 <button onclick="demo()">点击</button>
20 </body>
21 </html>

（2）数据类型

1）字符串（string）

字符串相关应用如下：

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <body>
 7 <p id="ph">One Flew Over the Cuckoos Nest</p>
 8 <button id="btn">获取字符长度</button>
 9 <br/>
10 <script>
11     var film = "The Shawshank Redemption";  //定义 字符串
12     var character = film[6];        //定义 film 的 第六个字符
13     var  n = film.indexOf("w");     //定义 film 字符串中 w 字符串的位置
14     document.write(film);
15     document.getElementById("btn").onclick = function(){aboutString()};
16
17     function aboutString(){
18         //获取字符长度
19         document.getElementById("p1").innerHTML = film.length;
20         //访问第六个字符
21         document.getElementById("p2").innerHTML = character;
22         //获取 w 字符出现的位置
23         document.getElementById("p3").innerHTML = n+1;
24         //匹配字符串中某些字符内容 有即返回字符
25         document.getElementById("p4").innerHTML = film.match("HaHa");
26         //替换字符串 内容
27         var str = document.getElementById("ph").innerHTML;
28         var str_new = str.replace("The Godfather Part II");
29         document.getElementById("p5").innerHTML = str_new;
30         //字符串转 大写
31         document.getElementById("p6").innerHTML = film.toUpperCase();
32         //字符串转 小写
33         document.getElementById("p7").innerHTML = film.toLowerCase();
34         //字符串转 数组
35         var str = "a,b,c,d,e";
36         var n = str.split(",");
37         document.getElementById("p8").innerHTML = n[1];
38     }
39 </script>
40 <p id="p1"></p>
41 <p id="p2"></p>
42 <p id="p3"></p>
43 <p id="p4"></p>
44 <p id="p5"></p>
45 <p id="p6"></p>
46 <p id="p7"></p>
47 <p id="p8"></p>
48 </body>
49 </html>

2）数字

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <body>
 7 <button id="btn">数字运算</button>
 8 <script>
 9     document.getElementById("btn").onclick = function(){aboutMath()};
10     var a = 123.456,
11     b = 456.789
12     function aboutMath() {
13         //取整 最接近的
14         document.getElementById("p1").innerHTML = Math.round(a);
15         //取随机数 0-1
16         document.getElementById("p2").innerHTML = Math.random();
17         // 取较大数
18         document.getElementById("p3").innerHTML = Math.max(a,b);
19         // 取较小数
20         document.getElementById("p3").innerHTML = Math.min(a,b);
21     }
22 </script>
23 <p id="p1"></p>
24 <p id="p2"></p>
25 <p id="p3"></p>
26 <p id="p4"></p>
27 </body>
28 </html>

3）布尔

1 <script type="text/javascript">
2     var flag = true;
3     var tree = false;
4 </script>

4）数组

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <body>
 7 <!-- 数组：使用单独的变量名来存储一系列的值 -->
 8 <button id="btn">点击</button>
 9 <script>
10     document.getElementById("btn").onclick = function(){aboutArray()};
11
12     function aboutArray() {
13         // 创建数组
14         var grandparents = ["Amy","John"];
15         var parents = ["Sophia","Brown","Jim","Mona"];
16         var children = new Array();
17         children[0] = "Kat";
18         children[1] = "Fang";
19         children[2] = "Ana";
20         //数组元素输出
21         document.getElementById("p1").innerHTML = children.join();
22         //合并二个数组
23         var older = parents.concat(grandparents);
24         document.getElementById("p2").innerHTML = older;
25         //合并三个数组
26         var family = parents.concat(brothers,children);
27         document.getElementById("p3").innerHTML = family;
28         //删除数组最后元素
29         document.getElementById("p4").innerHTML = parents.pop();
30         //数组末尾添加元素
31         document.getElementById("p5").innerHTML = grandparents.push("Smith");
32         //数组元素倒序
33         document.getElementById("p6").innerHTML = parents.reverse();
34         //删除数组第一个元素
35         document.getElementById("p7").innerHTML = parents.shift();
36         //显示第二至第三元素
37         document.getElementById("p8").innerHTML = parents.slice(1,2);
38         //升序
39         // 排序会有字母升序、数组升序、数字倒序等情况
40         var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
41         document.getElementById("p9").innerHTML = fruits.sort();
42         //
43         document.getElementById("p10").innerHTML = grandparents.splice(2,0,"Kiwi","Cheer");
44         var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
45         document.getElementById("p11").innerHTML = fruits.toString();
46         document.getElementById("p12").innerHTML = fruits.unshift("Cheer");
47     }
48 </script>
49 <p id="p1"></p>
50 <p id="p2"></p>
51 <p id="p3"></p>
52 <p id="p4"></p>
53 <p id="p5"></p>
54 <p id="p6"></p>
55 <p id="p7"></p>
56 <p id="p8"></p>
57 <p id="p9"></p>
58 <p id="p10"></p>
59 <p id="p11"></p>
60 <p id="p12"></p>
61 </body>
62 </html>

5）对象

6）空

　　可以通过赋值为空的方式清除变量值

7）未定义

转载于:https://www.cnblogs.com/mxyweb/p/9294811.html