JavaScript入門篇

  • 目錄
  • 第一章喂很、基礎(chǔ)語法
  • 第二章同衣、常用互動方法
  • 第三章蚜枢、DOM操作

第一章缸逃、請做好準(zhǔn)備

如何插入JS

使用<script>標(biāo)簽在HTML網(wǎng)頁中插入JavaScript代碼。注意厂抽， <script>標(biāo)簽要成對出現(xiàn)需频，并把JavaScript代碼寫在 <script></script>之間。

<script type="text/javascript">

表示在<script></script>之間的是文本類型(text),javascript是為了告訴瀏覽器里面的文本是屬于JavaScript語言修肠。

引用JS外部文件

我們可以把HTML文件和JS代碼分開,并單獨創(chuàng)建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js贺辰，然后將JS代碼直接寫在JS文件中。
注意:在JS文件中，不需要<script>標(biāo)簽,直接編寫JavaScript代碼就可以了饲化。
JS文件不能直接運行莽鸭，需嵌入到HTML文件中執(zhí)行，我們需在HTML中添加如下代碼吃靠，就可將JS文件嵌入HTML文件中

<script src="script.js"></script>


src 是指向物件的來源
href是指向需要連結(jié)的地方

JS在頁面中的位置

我們一般放在網(wǎng)頁的head或者body部分硫眨。
放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執(zhí)行這個代碼巢块，然后才解析頁面的其余部分礁阁。
放在<body>部分
JavaScript代碼在網(wǎng)頁讀取到該語句的時候就會執(zhí)行。


注意: javascript作為一種腳本語言可以放在html頁面中任何位置族奢，但是瀏覽器解釋html時是按先后順序的姥闭，所以前面的script就先被執(zhí)行。比如進(jìn)行頁面顯示初始化的js必須放在head里面越走，因為初始化都要求提前進(jìn)行（如給頁面body設(shè)置css等）棚品；而如果是通過事件調(diào)用執(zhí)行的function那么對位置沒什么要求的。

JavaScript-認(rèn)識語句和符號

JavaScript語句是發(fā)給瀏覽器的命令廊敌。這些命令的作用是告訴瀏覽器要做的事情铜跑。
每一句JavaScript代碼格式:

語句;

<script type="text/javascript">
   alert("hello!");
</script>

一行的結(jié)束就被認(rèn)定為語句的結(jié)束，通常在結(jié)尾加上一個分號";"來表示語句的結(jié)束骡澈。

JavaScript-注釋很重要

單行注釋锅纺，在注釋內(nèi)容前加符號 “//”。

<script type="text/javascript">
  document.write("單行注釋使用'//'");  // 我是注釋肋殴，該語句功能在網(wǎng)頁中輸出內(nèi)容
</script>

多行注釋以"/"開始囤锉，以"/"結(jié)束。

<script type="text/javascript">
   document.write("多行注釋使用/*注釋內(nèi)容*/");
   /*
    多行注釋
    養(yǎng)成書寫注釋的良好習(xí)慣
   */
</script>

JavaScript-什么是變量

定義變量使用關(guān)鍵字var,語法如下:

var 變量名

變量名可以任意取名疼电，但要遵循命名規(guī)則:

  • 1.變量必須使用字母嚼锄、下劃線(_)或者美元符($)開始。

  • 2.然后可以使用任意多個英文字母蔽豺、數(shù)字区丑、下劃線(_)或者美元符($)組成。

  • 3.不能使用JavaScript關(guān)鍵詞與JavaScript保留字修陡。
    變量要先聲明再賦值沧侥，如下：

var mychar;
mychar="javascript";
var mynum = 6;

變量可以重復(fù)賦值，如下：

var mychar;
mychar="javascript";
mychar="hello";

注意:

  • 1. 在JS中區(qū)分大小寫魄鸦，如變量mychar與myChar是不一樣的宴杀，表示是兩個變量。
  • 2. 變量雖然也可以不聲明拾因，直接使用旺罢，但不規(guī)范旷余，需要先聲明，后使用扁达。

JavaScript-判斷語句（if...else）

語法:

if(條件)
{ 條件成立時執(zhí)行的代碼 }
else
{ 條件不成立時執(zhí)行的代碼 }

假設(shè)我們通過年齡來判斷是否為成年人正卧，如年齡大于等于18歲，是成年人跪解，否則不是成年人炉旷。代碼表示如下:

<script type="text/javascript">
   var myage = 18;
   if(myage>=18)  //myage>=18是判斷條件
   { document.write("你是成年人。");}
   else  //否則年齡小于18
   { document.write("未滿18歲叉讥，你不是成年人窘行。");}
</script>

JavaScript-什么是函數(shù)

如何定義一個函數(shù)呢？基本語法如下:

function 函數(shù)名()
{
     函數(shù)代碼;
}

一個實現(xiàn)兩數(shù)相加的簡單函數(shù),并給函數(shù)起個有意義的名字：“add2”图仓，代碼如下：

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

第2章罐盔、常用互動方式

輸出內(nèi)容（document.write）

document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。簡單的說就是直接在網(wǎng)頁中輸出內(nèi)容救崔。
第一種:輸出內(nèi)容用""括起翘骂，直接輸出""號內(nèi)的內(nèi)容。

<script type="text/javascript">
  document.write("I love JavaScript帚豪！"); //內(nèi)容用""括起來，""里的內(nèi)容直接輸出草丧。
</script>

第二種:通過變量狸臣，輸出內(nèi)容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接寫變量名，輸出變量存儲的內(nèi)容昌执。
</script>

第三種:輸出多項內(nèi)容烛亦，內(nèi)容之間用+號連接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多項內(nèi)容之間用+號連接
</script>

第四種:輸出HTML標(biāo)簽懂拾，并起作用煤禽，標(biāo)簽使用""括起來。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//輸出hello后岖赋，輸出一個換行符
  document.write("JavaScript");
</script>

JS如何輸出空格

  1. 使用輸出html標(biāo)簽?來解決
document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
結(jié)果:  1    23
  1. 使用CSS樣式來解決
 document.write("<span style='white-space:pre;'>"+"  1        2    
3    "+"</span>");
 結(jié)果:  1       2     3

在輸出時添加“white-space:pre;”樣式屬性檬果。這個樣式表示"空白會被瀏覽器保留"

JavaScript-警告（alert 消息對話框）

語法:

alert(字符串或變量);

看下面的代碼:

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注:alert彈出消息對話框(包含一個確定按鈕)。
結(jié)果:按順序彈出消息框

image.png

注意:

1. 在點擊對話框"確定"按鈕前唐断，不能進(jìn)行任何其它操作选脊。

2. 消息對話框通常可以用于調(diào)試程序脸甘。

3. alert輸出內(nèi)容恳啥，可以是字符串或變量，與document.write 相似丹诀。

JavaScript-確認(rèn)（confirm 消息對話框）

confirm 消息對話框通常用于允許用戶做選擇的動作钝的，如：“你對嗎翁垂？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)硝桩。
語法:

confirm(str);

參數(shù)說明:

str：在消息對話框中要顯示的文本
返回值: Boolean值

返回值:

當(dāng)用戶點擊"確定"按鈕時沿猜，返回true
當(dāng)用戶點擊"取消"按鈕時，返回false

注: 通過返回值可以判斷用戶點擊了什么按鈕
看下面的代碼:

<script type="text/javascript">
    var mymessage=confirm("你喜歡JavaScript嗎?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能強(qiáng)大亿柑，要學(xué)習(xí)噢!");   }
</script>

image.png

注: 消息對話框是排它的邢疙，即用戶在點擊對話框按鈕前，不能進(jìn)行任何其它操作望薄。

JavaScript-提問（prompt 消息對話框）

prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息疟游。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）痕支。
語法:

prompt(str1, str2);

參數(shù)說明

str1: 要顯示在消息對話框中的文本颁虐，不可修改
str2：文本框中的內(nèi)容，可以修改

返回值:

1. 點擊確定按鈕卧须，文本框中的內(nèi)容將作為函數(shù)返回值
2. 點擊取消按鈕另绩，將返回null

看看下面代碼:

var myname=prompt("請輸入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }
1552613681(1).jpg

輸入姓名點擊確定效果：


1552613639(1).jpg

點擊取消效果：


1552613712(1).jpg

JavaScript-打開新窗口（window.open）

open() 方法可以查找一個已經(jīng)存在或者新建的瀏覽器窗口。
語法：

window.open([URL], [窗口名稱], [參數(shù)字符串])

參數(shù)說明:

URL：可選參數(shù)花嘶，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑笋籽。如果省略這個參數(shù)，或者它的值
是空字符串椭员，那么窗口就不顯示任何文檔车海。
窗口名稱：可選參數(shù)，被打開窗口的名稱隘击。
    1.該名稱由字母侍芝、數(shù)字和下劃線字符組成。
    2."_top"埋同、"_blank"州叠、"_self"具有特殊意義的名稱。
       _blank：在新窗口顯示目標(biāo)網(wǎng)頁
       _self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁
       _top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁
    3.相同 name 的窗口只能創(chuàng)建一個凶赁，要想創(chuàng)建多個窗口則 name 不能相同咧栗。
   4.name 不能包含有空格。
參數(shù)字符串：可選參數(shù)哟冬，設(shè)置窗口參數(shù)楼熄，各參數(shù)用逗號隔開。

image.png

例如:打開http://www.imooc.com網(wǎng)站浩峡，大小為300px * 200px可岂，無菜單，無工具欄翰灾，無狀態(tài)欄缕粹，有滾動條窗口：

<script type="text/javascript"> 
window.open('http://www.imooc.com',
'_blank','width=300,height=200,menubar=no,toolbar=no, status=no,
scrollbars=yes')
</script>

注意：運行結(jié)果考慮瀏覽器兼容問題稚茅。

JavaScript-關(guān)閉窗口（window.close）

close()關(guān)閉窗口
用法：

window.close();   //關(guān)閉本窗口

或

<窗口對象>.close();   //關(guān)閉指定的窗口

例如:關(guān)閉新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象平斩，存儲在變量mywin中
   mywin.close();
</script>

注意:上面代碼在打開新窗口的同時亚享，關(guān)閉該窗口，看不到被打開的窗口绘面。

第3章欺税、DOM操作

認(rèn)識DOM

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素揭璃、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）晚凿。


image.png

將HTML代碼分解為DOM節(jié)點層次圖:


節(jié)點樹

HTML文檔可以說由節(jié)點構(gòu)成的集合，三種常見的DOM節(jié)點:

  1. 元素節(jié)點：上圖中<html>瘦馍、<body>歼秽、<p>等都是元素節(jié)點，即標(biāo)簽情组。

  2. 文本節(jié)點:向用戶展示的內(nèi)容燥筷，如<li>...</li>中的JavaScript、DOM院崇、CSS等文本肆氓。

  3. 屬性節(jié)點:元素屬性，如<a>標(biāo)簽的鏈接屬性底瓣。

看下面代碼:

<a >JavaScript DOM</a>
image.png

通過ID獲取元素

學(xué)過HTML/CSS樣式做院，都知道，網(wǎng)頁由標(biāo)簽將信息組織起來濒持，而標(biāo)簽的id屬性值是唯一的，就像是每人有一個身份證號一樣寺滚，只要通過身份證號就可以找到相對應(yīng)的人柑营。那么在網(wǎng)頁中，我們通過id先找到標(biāo)簽村视，然后進(jìn)行操作官套。
語法:

document.getElementById(“id”)

看看下面代碼:


image.png

結(jié)果:null或[object HTMLParagraphElement]


image.png

注:獲取的元素是一個對象，如想對元素進(jìn)行操作蚁孔，我們要通過它的屬性或方法奶赔。

innerHTML 屬性

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容。
語法:

Object.innerHTML

注意:
1.Object是獲取的元素對象杠氢，如通過document.getElementById("ID")獲取的元素站刑。

2.注意書寫，innerHTML區(qū)分大小寫鼻百。

我們通過id="con"獲取<p> 元素绞旅，并將元素的內(nèi)容輸出和改變元素內(nèi)容摆尝，代碼如下:


image.png

結(jié)果:


image.png

改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢因悲？
語法:

Object.style.property=new style;

注意:Object是獲取的元素對象堕汞，如通過document.getElementById("id")獲取的元素。
基本屬性表（property）:

image.png

注意:該表只是一小部分CSS樣式屬性晃琳，其它樣式也可以通過該方法設(shè)置和修改讯检。

看看下面的代碼:

改變 <p> 元素的樣式，將顏色改為紅色卫旱，字號改為20,背景顏色改為藍(lán)：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

結(jié)果:


image.png

顯示和隱藏（display屬性）

網(wǎng)頁中經(jīng)常會看到顯示和隱藏的效果人灼，可通過display屬性來設(shè)置。
語法：

Object.style.display = value

注意:Object是獲取的元素對象誊涯，如通過document.getElementById("id")獲取的元素挡毅。
value取值:

image.png

看看下面代碼:
image.png

控制類名（className 屬性）

className 屬性設(shè)置或返回元素的class 屬性。
語法：

object.className = classname

作用:
1.獲取元素的class 屬性

2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀
看看下面代碼暴构，獲得 <p> 元素的 class 屬性和改變className：

image.png

結(jié)果:
image.png

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末跪呈，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子取逾，更是在濱河造成了極大的恐慌耗绿，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,539評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件砾隅，死亡現(xiàn)場離奇詭異误阻，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)晴埂，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門究反，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人儒洛，你說我怎么就攤上這事精耐。” “怎么了琅锻？”我有些...
    開封第一講書人閱讀 165,871評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵卦停，是天一觀的道長。 經(jīng)常有香客問我恼蓬，道長惊完，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,963評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任处硬，我火速辦了婚禮小槐，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘荷辕。我一直安慰自己本股，他們只是感情好攀痊，可當(dāng)我...
    茶點故事閱讀 67,984評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拄显，像睡著了一般苟径。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上躬审，一...
    開封第一講書人閱讀 51,763評論 1贊 307
  • 城市分裂傳說
    那天棘街，我揣著相機(jī)與錄音，去河邊找鬼承边。 笑死遭殉，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的博助。 我是一名探鬼主播险污，決...
    沈念sama閱讀 40,468評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼富岳！你這毒婦竟也來了蛔糯？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,357評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤窖式，失蹤者是張志新（化名）和其女友劉穎蚁飒，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萝喘，經(jīng)...
    沈念sama閱讀 45,850評論 1贊 317
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡淮逻，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了阁簸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爬早。...
    茶點故事閱讀 40,144評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖启妹，靈堂內(nèi)的尸體忽然破棺而出凸椿，到底是詐尸還是另有隱情，我是刑警寧澤翅溺，帶...
    沈念sama閱讀 35,823評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站髓抑，受9級特大地震影響咙崎，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吨拍，卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一褪猛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧羹饰，春花似錦伊滋、人聲如沸碳却。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0贊 22
  • 一樁弒父案笑旺，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽昼浦。三九已至，卻和暖如春筒主，著一層夾襖步出監(jiān)牢的瞬間关噪，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工乌妙， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留使兔，地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3贊 373
  • 代替公主和親
    正文 我出身青樓藤韵，卻偏偏與公主長得像虐沥，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子泽艘，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,092評論 2贊 355