一、JavaScript的三種基本使用方法:body|head|外部
網頁效果:
運行代碼:
.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title><script>
function n1(){document.getElementById("ama01").innerHTML="NO.3這是head中的 JavaScript 函數";
}
</script>
</head><body><script>document.write("NO.1 HELLO WORLD")//Document要小寫</script><p>NO.2 這是body中的JavaScript函數</p><button onclick="myFunction()">NO.2 Click me</button><p id="ama"></p>
<script>
function myFunction(){var x="";var time=new Date().getHours();if (time<20){x="Good day";}document.getElementById("ama").innerHTML=x;
}</script><p id="ama01"></p><button type="button" onclick="n1()">NO.3 Click me</button><p>NO.4 n4保存在名為"n4.js"的外部文件中</p><p id="ama04"></p><button type="button" onclick="n4()"> NO.4 Click me</button><script src="n4Script.js"></script>
</body>
</html>
.n4Script.js
// JavaScript Document
function n4()
{document.getElementById("ama04").innerHTML="NO.4 this is my 外部JavaScript";
}
二、 JavaScript的基本語法
1、寫法
1)代碼
document.getElementById("ama01").innerHTML=" The first one"; document.getElementById("ama02").innerHTML=" The second one";
2)代碼塊
function myFunction()
{
document.getElementById("ama01").innerHTML=" The first one";
document.getElementById("ama02").innerHTML=" The second one";
}
3)多余的空格會忽略
4)反斜杠對代碼行進行換行
5)//單行注釋,/*多行注釋*/
6)賦值:文本類型用雙引號,數字類型不加雙引號
2、輸出顯示語句
1)window.alert() 彈出警告框。
<body><h1>window.alert() 彈出警告框</h1>
<script>
window.alert("window.alert()");
</script>
</body>
2)document.write() 將內容寫到 HTML 文檔中。
3)innerHTML 寫入到 HTML 元素。
上文代碼已展示,此處略過……
4)console.log() 寫入到瀏覽器的控制臺。
</script>
<script>
a = 1;
b = 1;
c = a + b;
console.log(c);
</script>
1、數據類型(用typeof,可以判斷數據類型)
1)值類型(基本類型):
a.字符串(String):用在單引號或者雙引號
b.數字(Number):數字number:整數,小數,科學計數(123e5)
c.布爾(Boolean):兩種狀態true or false
d.空(Null)
e.未定義(Undefined)
f.Symbol:是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。
2)引用數據類型(對象類型):
對象(Object):定義一個對象{a:"a1",b:"b1",c:300}
數組(Array):定義一個數組[1,2,3,9]
函數(Function):定義一個函數,前面已舉例,略過
正則(RegExp):正則表達式通常用于檢查和替代 : search() 和 replace();
日期(Date):當前日期時間
<script>var a="hellow world";//字符串var b=1;//數字var c=true;//布爾型let d=null;//空值var e;//未定義var f=Symbol('unique');var alph=new Array("a","b","c");//創建數組;var g={a:"a1",b:"b1", c:5566};//創建對象;var h=Date();var str="OH,happy new year";var j=str.search(/happy/i);//正則表達式搜索a1=typeof a;b1=typeof b;c1=typeof c;d1=Object.is(d,null);e1=typeof e;f1=typeof f;document.write(a1+"</br>",b1+"<br>",c1+"<br>",d1+"<br>",e1+"<br>",f1+"<br>",alph+"<br>",g.c+"<br>",h+"<br>",j+"<br>");</script>
2、常量
-
)整型常量:可以使用16進制八進制和十進制表示其值
-
)實型常量:由整數部分加小數部分表示
-
)布爾值:
-
)字符型常量:用單引號或者雙引號或起來的一個或幾個字符
-
)空值:null
3、變量:它主要作為數據的存儲容器,最好對其進行聲明
命名所注意的點:
-
)只能由字母數字和下劃線組成, Besides不能有空格或其他符號
-
)不能使用JavaScript中的關鍵字
NUM. grammer DESCRIPTION 1 boolean 布爾值 2 break 退出當前循環或標簽語句 3 byte 字節 4 case 在switch語句中定義一個分支。 5 catch 定義在try語句塊執行時,一旦發生錯誤,就執行的代碼塊。 6 char 字符類型 7 class 類 8 const 聲明一個只讀的常量。 9 continue 跳過當前循環的剩余部分,立即進行下一次循環。 10 debugger 設置斷點,方便調試代碼 11 default 在switch語句中定義默認分支。當條件不存在時使用該項 12 delete 刪除了一個屬性 13 do 與while一起使用,創建一個至少執行一次的循環。 14 double 雙精度浮點型 15 else 與if語句一起使用,定義一個條件為假時執行的代碼塊。 16 enum 枚舉 17 export 可以輸出一個模塊可以是變量或者方法 18 extends 用來創建一個普通類或者內建對象的子類 19 final 修飾用的關鍵詞 20 finally try-catch-finally 語句是一種用于處理異常的結構,finally 關鍵字可以用于 finally 塊中,用于定義一些必須執行的代碼 21 float 解析一個字符串并返回一個浮點值 22 for 創建一個循環,包含初始化表達式、條件表達式和增量表達式。 23 function 函數 24 goto 無條件轉移語句 25 if 根據指定的條件執行代碼塊 26 implements 實現相應接口的方法 27 import 導入另一個模塊 28 in 判斷某個屬性是否屬于某個對象。 29 instanceof 判斷一個對象是否是某個類的實例。 30 int 整型 31 interface 將一個數值向下取整 32 let 聲明一個塊作用域的局部變量。 33 long 長整形數據 34 native Native關鍵字用于聲明一個方法是由本地代碼(通常是C或C++)實現的 35 new 創建一個新對象 36 null 空值 37 package 屬性是Java解釋器所知道的所有包的根 38 private @ Private標簽標記標識符為私有 39 protected 創建使用程序函數 40 public 全局變量 41 ract React 是一個用于構建用戶界面的 JAVASCRIPT 庫。 React 主要用于構建 UI,很多人認為 React 是 MVC 中的 V(視圖) 42 return 從函數返回一個值。 43 short 短整型 44 static 靜態變量和類變量 45 super 終于調用父類 46 switch 根據不同的條件執行不同的代碼塊。 47 synchronized 實例對象鎖 48 this 指向調用該方法的對象。 49 throw 拋出一個異常。 50 throws 將異常拋給調用者可以使程序能夠繼續執行下去 51 transient 一種持久化對象實例的機制 52 try 定義一個測試塊,以測試代碼塊的錯誤 53 typeof 檢測變量的數據類型。 54 var 賦值一個變量 55 void 執行一個表達式并返回undefined。空 / 聲明沒有返回值 56 volatile 作為指令關鍵字確保本條指令不會因編譯器的優化而,且要求每次直接讀值 57 while 當循環 58 with 設置代碼在特定對象中的作用域 59 FALSE 不符合 60 TRUE 符合 -
)最好把變量意義與其代表意思對應