JavaScript入門篇

為什么學習JavaScript

一缸榄、你知道忱反，為什么JavaScript非常值得我們學習嗎泛释？

所有主流瀏覽器都支持JavaScript。
目前温算，全世界大部分網(wǎng)頁都使用JavaScript怜校。
它可以讓網(wǎng)頁呈現(xiàn)各種動態(tài)效果。
做為一個Web開發(fā)師米者，如果你想提供漂亮的網(wǎng)頁韭畸、令用戶滿意的上網(wǎng)體驗，JavaScript是必不可少的工具蔓搞。

二胰丁、易學性

1.學習環(huán)境無外不在，只要有文本編輯器喂分，就能編寫JavaScript程序锦庸。

2.我們可以用簡單命令，完成一些基本操作蒲祈。

三甘萧、從哪開始學習呢萝嘁？

學習JavaScript的起點就是處理網(wǎng)頁，所以我們先學習基礎語法和如何使用DOM進行簡單操作扬卷。

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熱身</title>
</head>
<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>
  
  <script type="text/javascript">
    document.write("hello");
    document.getElementById("p1").style.color="blue";   
  </script>
</body>
</html>

如何插入JS

我們來看看如何寫入JS代碼牙言？你只需一步操作,使用<script>標簽在HTML網(wǎng)頁中插入JavaScript代碼。注意怪得， <script>標簽要成對出現(xiàn)咱枉，并把JavaScript代碼寫在<script></script>之間。

image

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

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
        <title>插入js代碼</title>
        <script type="text/javascript">
        document.write("開啟JS之旅!");
        </script>
    </head>
    <body>
    </body>
</html>

引用JS外部文件

通過前面知識學習蚕断，我們知道使用<script>標簽在HTML文件中添加JavaScript代碼，如圖:

image

JavaScript代碼只能寫在HTML文件中嗎?當然不是入挣，我們可以把HTML文件和JS代碼分開,并單獨創(chuàng)建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js亿乳，然后將JS代碼直接寫在JS文件中。

image

注意:在JS文件中径筏，不需要<script>標簽,直接編寫JavaScript代碼就可以了葛假。

JS文件不能直接運行，需嵌入到HTML文件中執(zhí)行匠璧，我們需在HTML中添加如下代碼桐款，就可將JS文件嵌入HTML文件中。

image

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

JS在頁面中的位置

我們可以將JavaScript代碼放在html文件中任何位置夷恍，但是我們一般放在網(wǎng)頁的head或者body部分。放在<head>部分

最常用的方式是在頁面中head部分放置<script>元素媳维，瀏覽器解析head部分就會執(zhí)行這個代碼酿雪，然后才解析頁面的其余部分。放在<body>部分

JavaScript代碼在網(wǎng)頁讀取到該語句的時候就會執(zhí)行侄刽。

image

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS代碼的位置</title>
<script type="text/javascript">
  document.write("I love");
</script>
</head>
<body>
<script type="text/javascript">
 document.write("javascript");
</script>
</body>
</html>

JavaScript-認識語句和符號

JavaScript語句是發(fā)給瀏覽器的命令吓揪。這些命令的作用是告訴瀏覽器要做的事情。

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

例子中的alert("hello!");就是一個JavaScript語句所计。

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

看看下面這段代碼,有三條語句主胧，每句結(jié)束后都有";"叭首，按順序執(zhí)行語句习勤。

<script type="text/javascript">
   document.write("I");
   document.write("love");
   document.write("JavaScript");
</script>

注意:

“;”分號要在英文狀態(tài)下輸入，同樣焙格，JS中的代碼和符號都要在英文狀態(tài)下輸入图毕。
雖然分號“;”也可以不寫，但我們要養(yǎng)成編程的好習慣眷唉，記得在語句末尾寫上分號予颤。

JavaScript-注釋很重要

注釋的作用是提高代碼的可讀性，幫助自己和別人閱讀和理解你所編寫的JavaScript代碼厢破，注釋的內(nèi)容不會在網(wǎng)頁中顯示荣瑟。注釋可分為單行注釋與多行注釋兩種。

我們?yōu)榱朔奖汩喿x摩泪，注釋內(nèi)容一般放到需要解釋語句的結(jié)尾處或周圍笆焰。

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

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

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

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

JavaScript-什么是變量

什么是變量? 從字面上看不皆，變量是可變的量；從編程角度講熊楼，變量是用于存儲某種/某些數(shù)值的存儲器霹娄。我們可以把變量看做一個盒子，為了區(qū)分盒子鲫骗，可以用BOX1,BOX2等名稱代表不同盒子犬耻，BOX1就是盒子的名字（也就是變量的名字）。

image

定義變量使用關鍵字var,語法如下：

var 變量名

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

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

2.然后可以使用任意多個英文字母术吝、數(shù)字计济、下劃線(_)或者美元符($)組成。

3.不能使用JavaScript關鍵詞與JavaScript保留字排苍。

變量要先聲明再賦值沦寂，如下：

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

變量可以重復賦值，如下：

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

注意:

1. 在JS中區(qū)分大小寫纪岁，如變量mychar與myChar是不一樣的凑队，表示是兩個變量。

2. 變量雖然也可以不聲明，直接使用漩氨，但不規(guī)范西壮，需要先聲明，后使用叫惊。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>變量</title>
<script type="text/javascript">
    var mychar;
    mychar="javascript";
    mychar=8;
</script>
</head>
<body>
</body>
</html>

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

if...else語句是在指定的條件成立時執(zhí)行代碼款青，在條件不成立時執(zhí)行else后的代碼。

語法:

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

假設我們通過年齡來判斷是否為成年人霍狰，如年齡大于等于18歲抡草，是成年人，否則不是成年人蔗坯。代碼表示如下:

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

JavaScript-什么是函數(shù)(類似java中方法)

函數(shù)是完成某個特定功能的一組語句腿短。如沒有函數(shù)，完成任務可能需要五行绘梦、十行橘忱、甚至更多的代碼。這時我們就可以把完成特定功能的代碼塊放到一個函數(shù)里卸奉，直接調(diào)用這個函數(shù)钝诚，就省重復輸入大量代碼的麻煩。

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

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

說明:

1. function定義函數(shù)的關鍵字凝颇。

2. "函數(shù)名"你為函數(shù)取的名字。

3. "函數(shù)代碼"替換為完成特定功能的代碼疹鳄。

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

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

函數(shù)調(diào)用:

函數(shù)定義好后，是不能自動執(zhí)行的尚辑，所以需調(diào)用它,只需直接在需要的位置寫函數(shù)就ok了,代碼如下:

image

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函數(shù)調(diào)用</title>
   <script type="text/javascript">
      function contxt() //定義函數(shù)
      {
         alert("哈哈，調(diào)用函數(shù)了!");
      }
      
   </script>
</head>
<body>
   <form>
      <input type="button"  value="點擊我" onclick="contxt()" />  
   </form>
</body>
</html>

JavaScript-輸出內(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標簽，并起作用坠狡，標簽使用""括起來继找。

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

JS中如何輸出空格

在寫JS代碼的時候逃沿，大家可以會發(fā)現(xiàn)這樣現(xiàn)象:

document.write("   1      2                3  ");
結(jié)果: 1 2 3

無論在輸出的內(nèi)容中什么位置有多少個空格婴渡，顯示的結(jié)果好像只有一個空格。

這是因為瀏覽器顯示機制凯亮，對手動敲入的空格边臼，將連續(xù)多個空格顯示成1個空格。

解決方法:

1. 使用輸出html標簽?來解決

 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
 結(jié)果:  1    23

2. 使用CSS樣式來解決

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
 結(jié)果:  1       2     3

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

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

我們在訪問網(wǎng)站的時候柠并，有時會突然彈出一個小窗口，上面寫著一段提示信息文字置谦。如果你不點擊“確定”堂鲤，就不能對網(wǎng)頁做任何操作，這個小窗口就是使用alert實現(xiàn)的媒峡。

語法:

alert(字符串或變量);

看下面的代碼:

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

注:alert彈出消息對話框(包含一個確定按鈕)瘟栖。

結(jié)果:按順序彈出消息框

image

image

注意:

1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作谅阿。

2. 消息對話框通嘲胗矗可以用于調(diào)試程序。

3. alert輸出內(nèi)容签餐，可以是字符串或變量寓涨，與document.write 相似。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
  <script type="text/javascript">
  function rec(){
    var mychar="I love JavaScript";
    alert(mychar);
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value="點擊我氯檐，彈出對話框" />
</body>
</html>

JavaScript-確認（confirm 消息對話框）

confirm 消息對話框通常用于允許用戶做選擇的動作戒良，如：“你對嗎？”等冠摄。彈出對話框(包括一個確定按鈕和一個取消按鈕)糯崎。

語法:

confirm(str);

參數(shù)說明:

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

返回值:

當用戶點擊"確定"按鈕時，返回true
當用戶點擊"取消"按鈕時河泳，返回false

注: 通過返回值可以判斷用戶點擊了什么按鈕

看下面的代碼:

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

結(jié)果:

image

注: 消息對話框是排它的，即用戶在點擊對話框按鈕前拆挥，不能進行任何其它操作薄霜。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
  <script type="text/javascript">
  function rec(){
    var mymessage=confirm("你喜歡js嗎？");
    if(mymessage==true)
    {
        document.write("你是女士!");
    }
    else
    {
        document.write("你是男士!");
    }
  }    
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value="點擊我，彈出確認對話框" />
</body>
</html>

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.");  }

結(jié)果:

image

注:在用戶點擊對話框的按鈕前痹届，不能進行任何其它操作。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
  <script type="text/javascript">
  function rec(){
    var score; //score變量打月，用來存儲用戶輸入的成績值队腐。
    score =   prompt("請輸入你的成績")              ;
    if(score>=90)
    {
       document.write("你很棒!");
    }
    else if(score>=75)
    {
       document.write("不錯吆!");
    }
    else if(score>=60)
    {
       document.write("要加油!");
    }
    else
    {
       document.write("要努力了!");
    }
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value="點擊我，對成績做評價!" />
</body>
</html>

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：在新窗口顯示目標網(wǎng)頁
_self：在當前窗口顯示目標網(wǎng)頁
_top：框架網(wǎng)頁中在上部窗口中顯示目標網(wǎng)頁

3.相同 name 的窗口只能創(chuàng)建一個涉馅，要想創(chuàng)建多個窗口則 name 不能相同。

4.name 不能包含有空格黄虱。

參數(shù)字符串：可選參數(shù)稚矿，設置窗口參數(shù)，各參數(shù)用逗號隔開捻浦。

參數(shù)表:

image

例如:打開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-關閉窗口（window.close）

close()關閉窗口

用法：

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

或

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

例如:關閉新建的窗口。

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

注意:上面代碼在打開新窗口的同時环疼，關閉該窗口习霹，看不到被打開的窗口。

編程練習

制作新按鈕炫隶，“新窗口打開網(wǎng)站” 淋叶，點擊打開新窗口。

任務

1伪阶、新窗口打開時彈出確認框煞檩，是否打開

提示: 使用 if 判斷確認框是否點擊了確定，如點擊彈出輸入對話框栅贴，否則沒有任何操作斟湃。

2、通過輸入對話框檐薯，確定打開的網(wǎng)址凝赛，默認為 http：//www.imooc.com/

3、打開的窗口要求坛缕，寬400像素墓猎，高500像素，無菜單欄赚楚、無工具欄毙沾。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>瀏覽器對象</title>
 <script type="text/javascript">  
    function openWindon(){ 
        if(confirm("確定打開新窗口嗎？")){
            var url = prompt("請輸入一個網(wǎng)址","http://www.imooc.com/");  
            window.open( url,"_blank","toolbar=no, menubar=no, scrollbars=yes,  width=400, height=400");
        }
    }  
 </script> 

</head>

<body>
  <input type="button" value="新窗口打開網(wǎng)站" onclick="openWindon()" /> 
</body>
</html>

編程練習

制作新按鈕直晨，“新窗口打開網(wǎng)站” 搀军，點擊打開新窗口。

任務

1勇皇、新窗口打開時彈出確認框罩句，是否打開

提示: 使用 if 判斷確認框是否點擊了確定，如點擊彈出輸入對話框敛摘，否則沒有任何操作门烂。

2、通過輸入對話框兄淫，確定打開的網(wǎng)址屯远，默認為 http：//www.imooc.com/

3、打開的窗口要求捕虽，寬400像素慨丐，高500像素，無菜單欄泄私、無工具欄房揭。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
function openWindow()
{var open=confirm("確認新建窗口打開網(wǎng)站嗎备闲？");
if(open==true)
    // 新窗口打開時彈出確認框，是否打開
{var url=prompt("通過輸入對話框捅暴，確定打開的網(wǎng)址","http://www.imooc.com");
if(url!=null)
    // 通過輸入對話框恬砂，確定打開的網(wǎng)址，默認為 http：//www.imooc.com/
{window.open(url,"_blank",'width=400px,height=500px,menubar=no,toolbar=no');    
}
    //打開的窗口要求蓬痒，寬400像素泻骤，高500像素，無菜單欄梧奢、無工具欄狱掂。
else
{alert("再見！");}
}   
else
{alert("再見粹断！");}
    }

  </script> 
 </head> 
 <body> 
      <input type="button" value="新窗口打開網(wǎng)站" onclick="openWindow()" /> 
 </body>
</html>

認識DOM

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

先來看看下面代碼:

image

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

image

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

1. 元素節(jié)點：上圖中<html>、<body>养筒、<p>等都是元素節(jié)點曾撤，即標簽。

2. 文本節(jié)點:向用戶展示的內(nèi)容晕粪，如<li>...</li>中的JavaScript挤悉、DOM、CSS等文本巫湘。

3. 屬性節(jié)點:元素屬性装悲，如<a>標簽的鏈接屬性。

看下面代碼:

<a >JavaScript DOM</a>

image

通過ID獲取元素

學過HTML/CSS樣式尚氛，都知道诀诊，網(wǎng)頁由標簽將信息組織起來，而標簽的id屬性值是唯一的阅嘶，就像是每人有一個身份證號一樣属瓣，只要通過身份證號就可以找到相對應的人。那么在網(wǎng)頁中讯柔，我們通過id先找到標簽抡蛙，然后進行操作。

語法:

document.getElementById(“id”)

看看下面代碼:

image

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

image

注:獲取的元素是一個對象魂迄，如想對元素進行操作粗截，我們要通過它的屬性或方法。

innerHTML 屬性

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

語法:

Object.innerHTML

注意:

1.Object是獲取的元素對象慈格，如通過document.getElementById("ID")獲取的元素怠晴。

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

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

image

結(jié)果:

image

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基于對象谐鼎、事件驅(qū)動的簡單腳本語言搞疗，嵌入在HTML文檔中楣富，由瀏覽器負責解釋和執(zhí)行桐愉，在網(wǎng)頁上產(chǎn)生動態(tài)的顯示效果并實現(xiàn)與用戶交互功能瓣窄。</p>
<script type="text/javascript">
  var mychar=document.getElementById("con")          ;
  document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標簽內(nèi)容
  mychar.innerHTML="Hello,word"
  document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內(nèi)容
</script>
</body>
</html>

改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式匙瘪。如何改變 HTML 元素的樣式呢厢呵？

語法:

Object.style.property=new style;

注意:Object是獲取的元素對象窝撵，如通過document.getElementById("id")獲取的元素。

基本屬性表（property）:

image

注意:該表只是一小部分CSS樣式屬性襟铭，其它樣式也可以通過該方法設置和修改碌奉。

看看下面的代碼:

改變 <p> 元素的樣式，將顏色改為紅色寒砖，字號改為20,背景顏色改為藍：

<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

顯示和隱藏（display屬性）

網(wǎng)頁中經(jīng)常會看到顯示和隱藏的效果赐劣，可通過display屬性來設置。

語法：

Object.style.display = value

注意:Object是獲取的元素對象哩都，如通過document.getElementById("id")獲取的元素魁兼。

value取值:

image

看看下面代碼:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        document.getElementById("con").style.display = "none";
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        document.getElementById("con").style.display = "block";
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做為一個Web開發(fā)師來說，如果你想提供漂亮的網(wǎng)頁漠嵌、令用戶滿意的上網(wǎng)體驗咐汞，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隱藏內(nèi)容" /> 
       <input type="button" onclick="showtext()" value="顯示內(nèi)容" /> 
    </form>
</body> 
</html>

控制類名（className 屬性）

className 屬性設置或返回元素的class 屬性儒鹿。

語法：

object.className = classname

作用:

1.獲取元素的class 屬性

2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀

看看下面代碼化撕，獲得 <p> 元素的 class 屬性和改變className：

image

結(jié)果:

image

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
    <input type="button" value="添加樣式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能挺身。</p>
    <input type="button" value="更改外觀" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className="one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
       }
    </script>
</body>
</html>

編程挑戰(zhàn)

小伙伴們侯谁，請編寫"改變顏色"、"改變寬高"章钾、"隱藏內(nèi)容"墙贱、"顯示內(nèi)容"、"取消設置"的函數(shù)贱傀，點擊相應按鈕執(zhí)行相應操作惨撇，點擊"取消設置"按鈕后，提示是否取消設置府寒，如是執(zhí)行操作魁衙，否則不做操作报腔。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;}
p{
    line-height:18px;
    text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript課程</H2>
  <div id="txt"> 
     <h5>JavaScript為網(wǎng)頁添加動態(tài)效果并實現(xiàn)與用戶交互的功能。</h5>
        <p>1. JavaScript入門篇剖淀，讓不懂JS的你纯蛾，快速了解JS。</p>
        <p>2. JavaScript進階篇纵隔，讓你掌握JS的基礎語法翻诉、函數(shù)、數(shù)組捌刮、事件碰煌、內(nèi)置對象、BOM瀏覽器绅作、DOM操作芦圾。</p>
        <p>3. 學完以上兩門基礎課后，在深入學習JavaScript的變量作用域俄认、事件个少、對象、運動梭依、cookie稍算、正則表達式、ajax等課程役拴。</p>
  </div>
  <form>
  <!--當點擊相應按鈕糊探，執(zhí)行相應操作，為按鈕添加相應事件-->
    <input type="button" value="改變顏色" onclick="changeColor()">  
    <input type="button" value="改變寬高" onclick="changeWh()">
    <input type="button" value="隱藏內(nèi)容" onclick="changeDisNContent()">
    <input type="button" value="顯示內(nèi)容" onclick="changeDisBContent()">
    <input type="button" value="取消設置" onclick="changeCancal()">
  </form>
  <script type="text/javascript">
    var text = document.getElementById("txt");
    //定義"改變顏色"的函數(shù)
    function changeColor(){
        text.style.color = 'red';
        text.style.backgroundColor = 'orange';
    }

    //定義"改變寬高"的函數(shù)
    function changeWh(){
        text.style.width = '400px';
        text.style.height = '400px';
    }

    //定義"隱藏內(nèi)容"的函數(shù)
    function changeDisNContent(){
        text.style.display="none";
        
    }

    //定義"顯示內(nèi)容"的函數(shù)
    function changeDisBContent(){
        text.style.display = "block";
    }

    //定義"取消設置"的函數(shù)
    function changeCancal(){
        var message=confirm("你確定要重置所有設置么河闰？");
        if(message==true){
            text.removeAttribute('style');
        }
    }

  </script>
</body>
</html>

上一篇：HTML+CSS入門篇（下）
下一篇：JavaScript入門篇

最后編輯于：2019.02.25 11:06:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末科平，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子姜性，更是在濱河造成了極大的恐慌瞪慧，老刑警劉巖，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件部念，死亡現(xiàn)場離奇詭異弃酌，居然都是意外死亡，警方通過查閱死者的電腦和手機儡炼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門妓湘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人乌询，你說我怎么就攤上這事榜贴。” “怎么了妹田？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵唬党，是天一觀的道長鹃共。經(jīng)常有香客問我，道長驶拱，這世上最難降的妖魔是什么霜浴？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮蓝纲，結(jié)果婚禮上坷随，老公的妹妹穿的比我還像新娘。我一直安慰自己驻龟，他們只是感情好，可當我...
茶點故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布缸匪。她就那樣靜靜地躺著翁狐，像睡著了一般。火紅的嫁衣襯著肌膚如雪凌蔬。梳的紋絲不亂的頭發(fā)上露懒，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音砂心，去河邊找鬼懈词。笑死，一個胖子當著我的面吹牛辩诞，可吹牛的內(nèi)容都是我干的坎弯。我是一名探鬼主播，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼译暂，長吁一口氣：“原來是場噩夢啊……” “哼抠忘！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起外永，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤崎脉，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后伯顶，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體囚灼，經(jīng)...
沈念sama閱讀 45,802評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年祭衩，在試婚紗的時候發(fā)現(xiàn)自己被綠了灶体。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡汪厨，死狀恐怖赃春，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情劫乱，我是刑警寧澤织中，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布锥涕，位于F島的核電站，受9級特大地震影響狭吼，放射性物質(zhì)發(fā)生泄漏层坠。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一刁笙、第九天我趴在偏房一處隱蔽的房頂上張望破花。院中可真熱鬧，春花似錦疲吸、人聲如沸座每。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案摘悴，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽峭梳。三九已至，卻和暖如春蹂喻，著一層夾襖步出監(jiān)牢的瞬間葱椭，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工口四，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孵运，地道東北人。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓蔓彩，卻偏偏與公主長得像治笨，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子粪小，可洞房花燭夜當晚...
茶點故事閱讀 45,060評論 2贊 355

JavaScript入門篇

為什么學習JavaScript

一缸榄、你知道忱反，為什么JavaScript非常值得我們學習嗎泛释？

二胰丁、易學性

三甘萧、從哪開始學習呢萝嘁？

如何插入JS

引用JS外部文件

JS在頁面中的位置

JavaScript-認識語句和符號

JavaScript-注釋很重要

JavaScript-什么是變量

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

JavaScript-什么是函數(shù)(類似java中方法)

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

第一種:輸出內(nèi)容用""括起，直接輸出""號內(nèi)的內(nèi)容弛随。

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

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

第四種:輸出HTML標簽，并起作用坠狡，標簽使用""括起來继找。

JS中如何輸出空格

1. 使用輸出html標簽?來解決

2. 使用CSS樣式來解決

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

JavaScript-確認（confirm 消息對話框）

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

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

JavaScript-關閉窗口（window.close）

編程練習

編程練習

任務

認識DOM

通過ID獲取元素

innerHTML 屬性

改變 HTML 樣式

顯示和隱藏（display屬性）

控制類名（className 屬性）

編程挑戰(zhàn)

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