JavaScript基礎介紹

時間  2019-11-08
標籤 javascript 基礎 介紹 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript簡單介紹javascript

 

一、JavaScript的簡介
是基於對象和事件驅動的語言，應用與客戶端。
- 基於對象:提供的對象可直接拿過來使用
- 事件驅動:html作網站靜態效果，JavaScript動態效果
- 客戶端: 專門指的是瀏覽器
JavaScrip的特色
(1)交互性:信息的動態交互
(2)安全性:js不能訪問本地磁盤
(3)跨平臺性：支持JavaScript的瀏覽器均可運行
JavaScrip和Java的區別
(1)Java是sun公司，被oracle收購；js是網景公司
(2)JavaScript是基於對象，Java是面向對象
(3)Java是強類型的語言，JavaScript是弱類型的語言
　- java int i = 10;
　- js var i = 10; var m = "10";
(4)JavaScript只須要解析就能夠執行，而Java須要先編譯成字節碼文件在執行
JavaScrip組成(三部分)
(1)ECMAScript
　- ECMA:歐洲計算機協會
　- 有ECMA組織制定的js的語法，語句...
(2)BOM
　- broswer object model:瀏覽器對象模型
(3)DOM
　- document object model:文檔對象模型
script標籤放在的位置
建議把script標籤放到 </body>後面,這是一種默認的規範。
若是如今有這樣一個需求：
　在js裏面須要獲取到input裏面的值，若是把script標籤放到head裏面會出現問題。
html解析是從上到下解析的，script標籤放到的是head裏面，直接在裏面取input裏面的值，由於頁面尚未解析到input那一行，確定取不到。
html

二、js和html結合方式(兩種)
第一種：使用一個<script >標籤【一般放在body標籤後】
<script type="text/javascript">
　　JavaScript代碼;
</script>
java

第二種：使用script標籤，引入一個外部的js文件
<script type="text/javascript" src="JavaScript文件路徑" ></script>【使用第二種就不須要再script標籤裏寫代碼，不會被執行】
數組

三、js的原始類型和聲明變量
java：byte short int long float double char boolean
js原始類型(五個)
- string:字符串
　var str = "abc";
- number:數字類型
　var m = 132;
- boolean:true or false
　var flag = true;
- null
　var date = new Date();
　獲取對象的引用,null表示對象引用爲空，全部對象的引用也是object
- undifined
定義一個變量沒有被賦值
var aa;
　typeof(變量名稱);查看變量數據類型瀏覽器

<script type="text/javascript">
    // 定義一個字符串
    var str="132";
    alert(str);

    // 定義數字
    var mm=123;
    alert(mm);

    // 定義boolean
    var flag=true;

    alert(typeof(flag));
</script>

四、js語句
if判斷語句
switch語句
循環語句 for while do-while安全

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     </body>
 9     <script type="text/javascript">
10         // if語句
11         /*var a = 7;
12         if (a == 5) {
13             alert(a);
14         } else{
15             alert("6");
16         }*/
17         
18         // switch語句
19         /*var b=8;
20         switch (b){
21             case 5:
22                 alert(b);
23                 break;
24             case 8:
25                 alert(b);
26                 break;
27             default:
28                 alert("other");
29         }*/
30         
31         // while循環
32         /*var i = 5;
33         while (i>1){
34             alert(i);
35             i--;
36         }*/
37         
38         //for循環
39         for (var i=0;i<=3;i++) {
40             alert(i);
41         }
42         
43     </script>
44 </html>
View Code

練習 實現99乘法表輸出到頁面上oracle

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     </body>
 9     <script type="text/javascript">
10         document.write("<table border='1' bordercolor='blue'>");
11         // 循環行
12         for (var i=1;i<=9;i++) {
13             document.write("<tr>");
14             // 循環列
15             for (var j=1;j<=i;j++) {
16                 document.write("<td>");
17                 // 運算
18                 document.write(j+"*"+i+"="+i*j);
19                 document.write("</td>");                
20             }
21             document.write("</tr>");
22         }
23         document.write("</table>")
24     </script>
25 </html>
View Code

五、js的運算符
不區分整數和小數ide

1 var j = 123;
2 alert(j/1000*1000);//123
3 // j/1000*1000   在Java裏獲得結果0
4 // 在js裏不區分整數和小數，123/1000=0.123*1000=123

字符串相加減操做函數

1 // 字符串的操做
2 var str="abc";
3 alert(str+1); //abc1 相加時作字符串鏈接操做
4 alert(str-1);   //NaN(表示不是一個數字) 相減時作減法運算

boolean操做
設置成true，至關於這個值是1
設置成false，至關於這個值是0工具

// boolean操做[true=1,false=0]
var flag = true; 
alert(flag+1);//1+1=2
var flag = false; 
alert(flag+1);// 0+1=1

== 和 === 區別
===：先比較數據的類型再比較數據的值，若數據類型不一致，則爲false
==：先比較數據的類型再比較數據的值，若數據類型不一致，若是發現類型不一致都會向number轉型再比較
測試數據：

1 var a = 1;
2 var b = true; 
3 var c = 'true';
4 var d = "true";
5 var e = "1";

測試結果：

 1 alert(a===b); //false
 2 alert(a===c); //false
 3 alert(b===c); //false
 4 alert(c===d); //true
 5 alert(a===e); //false
 6 
 7 alert(a==b); // true
 8 alert(a==c); // false
 9 alert(b==c); // false
10 alert(c==d); // true
11 alert(a==e); // true

字符串和數字布爾相加
1：字符串和其餘類型相加都會同化成字符串
2：數字和boolean類型相加都會同化成數字

1 var varstr = "abc";
2 var varnum = 123;
3 var varbool = true;
4 alert(varstr+varnum+varbool); //abc123true
5 alert(varnum+varbool+varstr); //124abc
6 alert(varbool+varnum+varstr); //124abc

++ --

1 var a = 100;
2 alert(a++); //100
3 alert(a--); //101
4 alert(++a); //101
5 alert(--a); //100
6 alert(a);//100

** 引入知識
直接向頁面輸出的語句(可把內容顯示在頁面上)
document.write("aaaa");
document.write("<br/>");
document.write("bbbb");
document.write("<hr/>");
*能夠向頁面輸出固定值和html代碼

六、js數組 [數組可存放不一樣數據類型的數據]
1：定義數組方式(三種)
第一種:var arr=[1,2,3]; var arr=[1,"2",true];

1 var arr=[1,2,"3",new Date];
2 alert(arr);

第二種:使用內置對象 Array對象

1 var arr = new Array(3);//定義長度爲3的數組
2 arr[0]="a";
3 arr[1]="b";
4 arr[2]="c";
5 alert(arr);

第三種:使用內置對象 Array

1 var arr = new Array(2,4,5);//定義數組並直接賦元素
2 alert(arr);

2：數組的屬性 length 長度

1 var array01 = new Array(10);
2 var array02 = [123,"abc",new Date(),true];
3 var varlength1 = array01.length;
4 var varlength2 = array02.length;
5 alert(varlength1);//10
6 alert(varlength2);//4

3：能夠經過修改數組的長度來達到刪除數組的目的

1 var array = [123,"abc",new Date(),true];
2 array.length = 2;
3 alert(array);//123,abc /*new Date(),true被刪除*/
4 array.length = 4;//當長度指定爲4時候，不夠以,,補齊
5 alert(array);//123,abc,,

4：數組的方法 
 數組名.push("新添加的元素");//數組末尾添加一個新元素 

1 var array = [123,"abc",true];
2 array.push("hello");
3 alert(array);//123,abc,true,hello

 數組名.pop(); //刪除數組最後一個項  

1 var array = [123,"abc",true];
2 array.pop();
3 alert(array);//123,abc

 數組名.unshift("添加的元素");//在數組第一個元素位置添加元素 

1 var array = [123,"abc",true];
2 array.unshift("aa");
3 alert(array);//aa,123,abc,true

 數組名.shift();//刪除數組第一個元素 

1 var array = [123,"abc",true];
2 array.shift();
3 alert(array);//abc,true
4 //數組名.join();//鏈接全部   
5 alert(array.join("-"));//abc-true

5：遍歷數組的兩種方式

1 //for
2 var array = [123,"abc",true];
3 for(var i=0;i<array.length;i++){
4 alert(array[i]);
5 }    
6 //for in
7 for(var i in array){
8 alert(array[i]);
9 }

可參照W3school：Array對象方法進行詳細參照學習

七、js函數(三種方式)
函數的參數列表裏不須要寫var，直接寫參數名稱
第一種：使用關鍵字function
function 方法名(參數列表){
　//方法體;
　返回值;//無關緊要(根據實際需求)
}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="test01" onclick="test01()"/>
 9         <input type="button" value="test02" onclick="add(2,3)"/>
10     </body>
11     <script type="text/javascript">
12         // 定義一個無參的方法
13         function test01(){
14             alert("function")
15         }
16         // 定義一個有參的方法,實現兩個數相加
17         function add (a,b) {
18             var sum = a + b;
19             alert(sum);//5
20         }
21         //定義一個有參的方法：有返回值得效果
22         function add3 (a,b,c) {
23             var sum = a + b + c;
24             return sum;
25         }
26         alert(add3(1,2,3));//6
27     </script>
28 </html>
View Code

第二種：匿名函數【函數至關於匿名函數，add指向對象】
var add = function(參數列表){
　　方法體和返回值;
}

1 <body>
2     <input type="button" value="test" onclick="add(1,5)" />
3 </body>
4 <script type="text/javascript">
5     var add = function(m,n){
6     alert(m+n);
7     return add;
8     }
9 </script>

第三種:(幾乎不用，瞭解。爲了說明函數也是對象 (形參，形參，代碼塊)
*** 使用到js裏面的一個內置對象 Function
var add = new function("參數列表","方法體和返回值");
// 第三種方式建立
var add = new Function("x,y","var sum;sum=x+y;return sum;");

八、js全局變量和局部變量
全局變量：在script標籤裏定義一個變量，這個變量在頁面中js部分均可以使用
　- 在方法外部使用，在方法內部使用，在另外一個script標籤使用

局部變量:在方法內部定義一個變量，只能在方法內部使用
　- 若是在方法外部調用這個變量，提示出錯
　- SCRIPT5009:"n"未定義
　- 調試工具，F12

九、函數的重載（什麼是重載？方法名相同，參數不一樣）

 1 function add (a,b) {
 2     return a+b;
 3 }
 4 function add (a,b,c) {
 5     return a+b+c;
 6 }
 7 function add (a,b,c,d) {
 8     return a+b+c+d;
 9 }
10         
11 alert(add(2,2));// NaN
12 alert(add(3,2,2));// NaN
13 alert(add(2,3,2,2));// 9

注：調用的是就近原則，因此第一個兩數相加調用的最後的方法。所以出現了前兩個方法時NaN 
js的重載是否存在？（不存在）
(1)js裏面不存在重載。
(2)可是能夠經過其餘方式模擬重載的效果 （經過aruguments數組來實現，把傳遞的參數保存到 arguments數組裏面）
模擬多個參數重載效果相加：

十、全局函數
不屬於任何一個對象，直接寫名稱使用
- eval(string)：計算 JavaScript 字符串，並把它做爲腳本代碼來執行
 document.write(eval("2+2")) 

- encodeURI(URIstring)：字符串做爲 URI 進行編碼
- decodeURI(URIstring)：對 encodeURI() 函數編碼過的 URI 進行解碼
注：encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z 

1 //encodeURI:進行編碼
2 document.write("<hr />");
3 var str1 = "測試中文編碼:fdjale3234";
4 var encode = encodeURI(str1);
5 document.write(encode);
6 //decodeURI:進行解碼
7 document.write("<hr />");
8 var decode = decodeURI(encode);
9 document.write(decode);

- isNaN()：判斷當前字符串是不是數字
若是是數字，返回false，若是不是數字，返回true

1 var str = "aaaa";
2 alert(isNaN(str));

- parseInt()：類型轉換(解析一個字符串並返回一個整數,返回後的整數至關於算術運算)

1 var str3 = "123";
2 document.write(parseInt(str3)+1);//124
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程