JS

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>

運行效果

head 或 body 中的 JavaScript的運行效果相同

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>

運行效果

初始效果


事件觸發(fā)效果

外部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>

運行效果

初始效果
點擊后HTML頁面被覆蓋

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>

運行效果

輸入為數(shù)值 結(jié)算出結(jié)果


NaN 非數(shù)值


改變z = x * y 中的運算符矾睦,可進行*(乘法)晦款,/(除法),-(減法)枚冗,+(加法)四則運算

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末缓溅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子官紫,更是在濱河造成了極大的恐慌肛宋,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件束世,死亡現(xiàn)場離奇詭異,居然都是意外死亡床玻,警方通過查閱死者的電腦和手機毁涉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锈死,“玉大人贫堰,你說我怎么就攤上這事穆壕。” “怎么了其屏?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵喇勋,是天一觀的道長。 經(jīng)常有香客問我偎行,道長川背,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任蛤袒,我火速辦了婚禮熄云,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘妙真。我一直安慰自己缴允,他們只是感情好,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布珍德。 她就那樣靜靜地躺著练般,像睡著了一般。 火紅的嫁衣襯著肌膚如雪锈候。 梳的紋絲不亂的頭發(fā)上踢俄,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機與錄音晴及,去河邊找鬼都办。 笑死,一個胖子當著我的面吹牛虑稼,可吹牛的內(nèi)容都是我干的琳钉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼蛛倦,長吁一口氣:“原來是場噩夢啊……” “哼歌懒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起溯壶,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤及皂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后且改,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體验烧,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年又跛,在試婚紗的時候發(fā)現(xiàn)自己被綠了碍拆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖感混,靈堂內(nèi)的尸體忽然破棺而出端幼,到底是詐尸還是另有隱情,我是刑警寧澤弧满,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布婆跑,位于F島的核電站,受9級特大地震影響庭呜,放射性物質(zhì)發(fā)生泄漏滑进。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一疟赊、第九天 我趴在偏房一處隱蔽的房頂上張望郊供。 院中可真熱鬧,春花似錦近哟、人聲如沸驮审。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疯淫。三九已至,卻和暖如春戳玫,著一層夾襖步出監(jiān)牢的瞬間熙掺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工咕宿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留币绩,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓府阀,卻偏偏與公主長得像缆镣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子试浙,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 變量 JavaScript的變量為弱類型變量董瞻,可以用來保存任何類型的數(shù)據(jù)。 var 可以聲明各種類型的數(shù)據(jù) 在Ja...
    閆子揚閱讀 538評論 0 1
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品田巴,去做同樣的事情钠糊,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,777評論 2 17
  • 三角形 for (var i = 0; i < 10; i++) { for (var j = 0; j < 1...
    隨意人生_1b90閱讀 1,593評論 1 0
  • **1.document.write(""); 輸出語句 ****2.JS中的注釋為// ****3.傳統(tǒng)的HTM...
    reallychao閱讀 1,717評論 1 40
  • //1 小溪是個可人的南方菇?jīng)鲆疾福司壓芎贸椋蟾攀且驗樗裁炊纪俗專聜兌伎渌夂枚孵铮稍谖铱磥?這是有點可怕的...
    故事說給孤獨聽閱讀 474評論 0 2