1.<script>標簽
HTML 中的腳本必須位于與標簽之間炫隶。
<script>和</script>會告訴 JavaScript 在何處開始和結(jié)束,之間的代碼行包含了 JavaScript
老舊的實例可能會在標簽中使用 type="text/javascript"÷熳樱現(xiàn)在已經(jīng)不必了。JavaScript 是所有現(xiàn)代瀏覽器以及 HTML5 中的默認腳本語言删铃。
head 或 body 中的 JavaScript
可以在 HTML 文檔中放入不限數(shù)量的腳本螺戳。腳本可位于 HTML 的<head>或<body>部分中,或者同時存在于兩個部分中碌燕。通常的做法是把函數(shù)放入<head>部分中误证,或者放在頁面底部。這樣就可以把它們安置到同一處位置修壕,不會干擾頁面的內(nèi)容愈捅。
1.head中的javascript
<html>
<head>
? <script>
? ? document.write("<h1>JS</h1>");
? ? document.write("<p>javascript</p>");
? </script>
</head>
<body></body>
</html>
2.body中的javascript
<html>
<head></head>
<body>
<script>
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
</script>
</body>
</html>
運行效果
JavaScript函數(shù)和事件
需要在某個事件發(fā)生時執(zhí)行代碼,比如當用戶點擊按鈕時慈鸠。把 JavaScript 代碼放入函數(shù)中蓝谨,就可以在事件發(fā)生時調(diào)用該函數(shù)。
head 或 body 中的 JavaScript函數(shù)
1.body 中的 JavaScript函數(shù)
<body>
? <p id="p">JS</p>
? <button type="button" onclick="myf()">請點擊</button>
? <script>
? ? function myf() {
? ? ? document.getElementById("p").innerHTML="javascript";
? ? }
? </script>
</body>
head 中的 JavaScript函數(shù)
<head>
? <script>
? ? function myf() {
? ? ? document.getElementById("p").innerHTML="javascript";
? ? }
? </script>
</head>?
<body>
? <p id="p">JS</p>
? <button type="button" onclick="myf()">請點擊</button>
</body>
運行效果
外部JavaScript
可以把腳本保存到外部文件中林束。外部文件通常包含被多個網(wǎng)頁使用的代碼像棘。外部 JavaScript 文件的文件擴展名是 .js稽亏。如需使用外部文件壶冒,請在標簽的 "src" 屬性中設(shè)置該 .js 文件
<script src="../script.js"></script>
在<head>或<body>中引用腳本文件都是可以的。實際運行效果與<script>標簽中編寫腳本完全一致
2.JS輸出
操作 HTML 元素
從 JavaScript 訪問某個 HTML 元素截歉,您可以使用 document.getElementById(id) 方法胖腾,通過指定的 id 來訪問 HTML 元素,并改變其內(nèi)容
<p id="p">js</p>
<script>
? bocument.getElementById("p").innerHTML="javascript";
</script>
JavaScript 由 web 瀏覽器來執(zhí)行瘪松。在這種情況下咸作,瀏覽器將訪問 id="p" 的 HTML 元素,并把它的內(nèi)容(innerHTML)替換為 "javascript"宵睦。
寫到文檔輸出
直接把元素寫到HTML文檔輸出中
<script>
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
</script>
運行效果
警告
在文檔已完成加載后執(zhí)行 document.write记罚,整個 HTML 頁面將被覆蓋
<h1>JS</h1>
<p>javascript</p>
<button type="button" onclick="myf()">請點擊</button>
<script>
function myf() {
document.write("<p>文件覆蓋</p>");
}
</script>
運行效果
3.JS語法
JS代碼和代碼塊
代碼:
javascript 語句向瀏覽器發(fā)出的命令。語句的作用是告訴瀏覽器該做什么壳嚎。javascript代碼(或者只有javascript)是javascript語句的序列
document.grtElementById("demo").innerHTML="JS";
代碼塊:
javascript 語句通過代碼塊的形成進行組合桐智。塊由左花括號開始末早,由右花括號結(jié)束。塊的作用是使語句序列一起執(zhí)行说庭。javascript 函數(shù)是將語句組合在塊中的典型例子
function myf() {
document.getElementById("demo").innerHTML="javascript";
}
分號然磷; ? 空格 ? ? ? 對大小寫敏感
分號;
分號用于分隔javascript 語句刊驴。在每條可執(zhí)行的語句結(jié)尾添加分號姿搜。使用分號的另一用處是在一行中編寫多條語句
空格?
javascript會忽略多余的空格±υ鳎可以向腳本添加空格舅柜,來提高可讀性。
var x=5;與 var x = 5; 效果相同
對大小寫敏感
javascript 對大小寫是敏感的躲惰。編寫javascript語句時业踢,要留意是否關(guān)閉大小寫切換鍵。
函數(shù) getElementById 與 getElementByID ?是不同的礁扮。
同樣知举,變量myVariable 與 MYVariable 是不同的。
對代碼進行折行
在文本字符串中使用反斜杠對代碼進行換行太伊。
document.write("Hello \
World!");
4.JS注釋
javascript 不會執(zhí)行注解雇锡,添加注解來對 javascript 進行解釋或提高代碼的可讀性。
單行注釋以 ?// ?開頭
//輸出段落
document.write("<p>hello javascript</p>");
或: ? var ? x = 5; ?//聲明 x 并把 5 賦值給它
多行注釋: 以 /* 開始,以 */ 結(jié)束马绝。
/*下面代碼
第一行輸出標題
第二行輸出段落*/
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
5.JS變量
js變量
變量是存儲信息的容器鸡典。
<script>
var x = 2;
var y = 3;
var z = x*y;
document.write("<p>x="+x+"</p>");
document.write("<p>y="+y+"</p>");
document.write("<p>z="+z+"</p>");
</script>
運行效果
像代數(shù)那樣: 在代數(shù)中,我們使用字母(如 x)來保存值(如 2)立肘。在javascript 中,這些字母被稱為變量名扛。
與代數(shù)一樣谅年,javascript 變量可用于存放值(如 x = 2)和表達式(如 z = x*y)。
變量可以使用短名稱(如 x , y)肮韧,也可以使用描述性更好的名稱(如 age, sum, totalvolume)融蹂。
? 變量必須以字母開頭
? 變量也能以 $ 和 _ 符號開頭(不推薦這么做)
? 變量名稱對大小寫敏感(y 和 Y 是不同的變量)
數(shù)據(jù)類型
javascript 變量還能保存其他數(shù)據(jù)類型,比如文本值(name="Bill Gates")弄企。如這樣的一條文本在javascript 中被稱為字符串超燃。 javascript變量有很多種類型,但現(xiàn)在拘领,我們只關(guān)注數(shù)字和字符串意乓,
向變量分配文本值時,要用單引號或雙引號包圍這個值约素。
var name = "Bill Gates";
var age = "25歲";
運行效果:
向變量賦的值是數(shù)值時届良,不能使用引號本涕。若用了引號,便會被當作文本處理伙窃!
var x = 2菩颖;
var y = 3;
var z = "x*y"为障;
運行效果
聲明js變量晦闰,重新聲明js變量
在javascript 中創(chuàng)建變量通常稱為"聲明"變量。使用關(guān)鍵詞 var 來聲明變量鳍怨。
var name呻右;
變量聲明后,該變量是空的(沒有值)鞋喇。 向變量賦值声滥,用等號(=)。
name = "jesk";
在聲明變量時對其賦值:
var name = "jesk";
<p id="p"><p>
<script>
var name = "張三";
document.getElementById("p").innerHTML=name;
</script>
運行效果
可以在一條語句中聲明多個變量侦香,該語句以 var 開頭落塑,并使用逗號分隔變量:
var name = "Gates", age = 20, sum = "100$";
也可以橫跨多行:
var name = "Gates",
age = 20,
sum = "100$";
經(jīng)常聲明無值的變量。未使用值來聲明的變量罐韩,其值實際是 undefined(未定義)憾赁。
js算數(shù)
通過javascript 變量做算數(shù),使用的是 = 和 +散吵,-龙考,*,/ ?這類運算符
<script>
? var x = 5-1,
? y = x*6,
? z = y/x+1;
? document.write("<p>x=" + x + "</p>");
? document.write("<p>y=" + y + "</p>");
? document.write("<p>z=" + z + "</p>");
? document.write("<p>(x+y)/z" + ((x+y)/z) + "</p>");
</script>
運行效果:
練習(xí):
<p>
? <input type="text" id="x"> * <input type="text" id="y"> = <span id="z"></span>
</p>
<button type="text" onclick="myf()">計算</button>
<script>
? function myf() {
? ? var x = parseInt(document.getElementById("x").value),
? ? y = parselnt(document getElementById("y").value),
? ? z = x * y;
? ? if (x==""||isNaN(x)) {
? ? ? alert(x+" 請輸入數(shù)字");
? ? }
? ? if (y==""||isNaN(y)) {
? ? ? alert(y+" 請輸入數(shù)字");
? ? }
? ? else {
? ? ? document.getElementById("z").innerHTML=z;
? ? }
? }
</script>
運行效果
改變z = x * y 中的運算符矾睦,可進行*(乘法)晦款,/(除法),-(減法)枚冗,+(加法)四則運算