JavaScript入門(mén)

JavaScript簡(jiǎn)史

JavaScript誕生于1995年嘁酿,JavaScript的誕生浙巫,使頁(yè)面不再是一成不變的靜態(tài)頁(yè)面潭流,而且增加了用戶(hù)交互毙死、控制瀏覽器及動(dòng)態(tài)創(chuàng)建頁(yè)面內(nèi)容等功能侵续。最重要的是倔丈,JacaScript使合法性驗(yàn)證的工作在客戶(hù)端得以實(shí)現(xiàn)。
JavaScript嵌入到HTML語(yǔ)言中状蜗,直接通過(guò)瀏覽器就得以運(yùn)行需五,我們通常將JavaScript稱(chēng)為Web腳本語(yǔ)言。JavaScript是一種輕型的轧坎、解釋性的腳本語(yǔ)言宏邮,是一種由瀏覽器內(nèi)的解釋器解釋執(zhí)行的程序語(yǔ)言。

在HTML代碼中添加JavaScript腳本代碼的3個(gè)方式如下:

  • 1.HTML文件混合方式:

JavaScript是嵌入到HTML文檔中才得以實(shí)現(xiàn)的,這時(shí)我們就需要通過(guò)<script></script>這對(duì)標(biāo)簽將JavaScript腳本嵌入到HTML頁(yè)面中使其產(chǎn)生作用蜜氨,代碼塊如下:

...

<body>
          <script type="text/javascript">
                document.write("歡迎進(jìn)入JavaScript的神奇世界");
         </script>
</body>

...
下面讓我們來(lái)看看運(yùn)行之后的結(jié)果吧:

捕獲.PNG

可以看到械筛,我們并沒(méi)有在<body>標(biāo)簽中添加任何其他的HTML標(biāo)簽,但是運(yùn)行的結(jié)果卻輸出了“歡迎進(jìn)入JavaScript的神奇世界”這句話飒炎。這是因?yàn)镴avaScript中的document.write()這個(gè)方法輸出了上面的這條語(yǔ)句埋哟。

  • 2.JS文件引用方式:

當(dāng)JavaScript的代碼較少是,我們完全可以使用<script>標(biāo)簽將代碼嵌入到頁(yè)面中郎汪,但是赤赊,當(dāng)頁(yè)面需要嵌入的JavaScript代碼很多時(shí),如果直接嵌入到頁(yè)面怒竿,會(huì)使頁(yè)面的可讀性變得較為復(fù)雜砍鸠。因此,可以將行數(shù)多的JacaScript代碼創(chuàng)建為一個(gè)單獨(dú)的文件耕驰,該文件以js為擴(kuò)展名爷辱,然后在HTML文檔中指定文件路徑進(jìn)行引用。引用單獨(dú)的JavsScript文件不僅能使HTML頁(yè)面更為清晰朦肘,而且使JavaScript代碼能夠重復(fù)使用饭弓。下面讓我們來(lái)看看具體的使用方法:
我們先創(chuàng)建一個(gè)擴(kuò)展名為js的script腳本,然后在腳本中寫(xiě)入我們的輸出語(yǔ)句媒抠。


捕獲2.PNG

接著我們回到HTML頁(yè)面在<script>標(biāo)簽中引用我們直接編寫(xiě)的js腳本:

...

 <body>
     <script type="text/javascript" src="./test.js"></script>
 </body>

...
我們?cè)龠\(yùn)行一遍弟断,結(jié)果和上面是一樣的,是不是很簡(jiǎn)單趴生?

  • 3.HTML代碼嵌入式:

腳本代碼可以作為標(biāo)簽的屬性只阀趴。如:

...

<body>
       <a href="javaScript:document.write('歡迎進(jìn)入JavaScript的神奇世界')">hello</a>
</body>

...
我們點(diǎn)擊hello的超鏈接,瀏覽器就會(huì)執(zhí)行JavaScript后面的腳本代程序碼苍匆。效果與上面無(wú)二刘急,這里我們需要注意一下,因?yàn)橥饷嬗昧穗p引號(hào)浸踩,如雙引號(hào)內(nèi)需要使用則變?yōu)閱我?hào)叔汁。以上就是在HTML代碼中添加JavaScript腳本代碼的3個(gè)方法啦。

JavaScript核心語(yǔ)法

JavaScript是一門(mén)語(yǔ)言检碗,與其他程序設(shè)計(jì)語(yǔ)言相同据块,有著獨(dú)特的語(yǔ)法結(jié)構(gòu),主要包含變量折剃、數(shù)據(jù)類(lèi)型另假、運(yùn)算符號(hào)、控制語(yǔ)句與注釋等怕犁。

  • 1.變量

變量是存儲(chǔ)數(shù)據(jù)的基本單位边篮,JavaScript通常利用變量來(lái)參與各種運(yùn)算开睡,實(shí)現(xiàn)動(dòng)態(tài)的效果 。定義變量的方法如下:

...

 <script>
        var message;//聲明變量
        message = "hi";//不聲明變量而直接賦值
        var width = 34, height = 31;//連續(xù)聲明變量我們用逗號(hào)隔開(kāi)并分別賦值
</script>

...
var是聲明變量的關(guān)鍵字苟耻,message、width扶檐、height是變量名凶杖。為變量命名時(shí),我們要遵循以下規(guī)則:

(1)第一個(gè)字符必須是一個(gè)字母款筑、下劃線(_)或一個(gè)美元符號(hào)($)智蝠。
(2)其他字符可以是字母、下劃線奈梳、美元符號(hào)或數(shù)字杈湾。
(3)區(qū)分大小寫(xiě)。
(4)不能與關(guān)鍵字同名攘须,如:while漆撞、for 和 if 等。

變量可以不經(jīng)聲明而直接使用于宙,但是這種方法很容易出錯(cuò)浮驳,因此不推薦使用。
JavaScript 的變量采用弱類(lèi)型的形式捞魁,即聲明變量時(shí)不必確定類(lèi)型至会,而是在使用或賦值時(shí)自動(dòng)確定其數(shù)據(jù)類(lèi)型,案例的話我們先了解玩數(shù)據(jù)類(lèi)型在給大家展示谱俭。

  • 2.數(shù)據(jù)類(lèi)型

JavaScript中有5種簡(jiǎn)單的數(shù)據(jù)類(lèi)型奉件,也稱(chēng)為基本數(shù)據(jù)類(lèi)型,分別是undefined昆著、null县貌、boolean、number和string宣吱。另外還有一種復(fù)雜數(shù)據(jù)類(lèi)型——object對(duì)象類(lèi)型窃这。下面重點(diǎn)講解typeof操作符和JavaScript中的5種簡(jiǎn)單數(shù)據(jù)類(lèi)型:
typefo操作符——因?yàn)閖s是弱類(lèi)型的,因此需要一種手段來(lái)檢測(cè)給定變量的數(shù)據(jù)類(lèi)型征候,typefo就是負(fù)責(zé)提供這方面信息的操作符杭攻。

  • 案例1.00
    ...

     <script>
              var message = "hi";
              document.write(typeof message);//string
              var name;
              document.write(typeof name);//undefined
              var age = 16;
              document.write(typeof age);//number
              var obj = new Date();
              document.write(typeof obj);//object
              var flag = 1<2;
              document.write(typeof flag);//Boolean
      </script>
    

...
其中,undefined表示變量沒(méi)有定義疤坝。boolean是布爾類(lèi)型兆解,也稱(chēng)為真假類(lèi)型。此類(lèi)型有兩個(gè)標(biāo)準(zhǔn)值:true(真)和false(假)跑揉。布爾值用于表示一個(gè)邏輯表達(dá)式的結(jié)果锅睛,通常用作判斷處理埠巨。number類(lèi)型表示整數(shù),小數(shù)现拒。string式字符串類(lèi)型辣垒,是程序中使用最廣泛的一種類(lèi)型。字符串式位于單引號(hào)或雙引號(hào)中的若干字符印蔬。
null是空類(lèi)型勋桶,表示一個(gè)變量已經(jīng)有值,但值為空對(duì)象侥猬,使用typeof檢測(cè)時(shí)會(huì)返回object例驹,如:
...

<script>
    var obj = null;
    document.write(typeof obj);
</script>

...
執(zhí)行以上腳本,輸出“object”退唠。注意:JavaScript不區(qū)分單引號(hào)或雙引號(hào)鹃锈,但應(yīng)避免出現(xiàn)引號(hào)不匹配的情況,如:
...

    var str = 'hello";
    var str = "hello';

...

  • 3.運(yùn)算符

運(yùn)算符是一種特殊的符號(hào)瞧预,一般由1~3個(gè)字符組成屎债,用于實(shí)現(xiàn)數(shù)據(jù)之間的運(yùn)算、賦值和比較松蒜。
JavaScript中的運(yùn)算符號(hào):

類(lèi)型 運(yùn)算符
算術(shù)運(yùn)算符 +, - , *, /, % , ++ ,--
賦值運(yùn)算符 =
比較運(yùn)算符 >, < ,>=, <= ,==, !=
邏輯運(yùn)算符 &&, !
!邏輯運(yùn)算符還有 “ || ”扔茅,但因?yàn)閙arkdown語(yǔ)法問(wèn)題無(wú)法在表格中顯示出來(lái)還請(qǐng)注意。
  • 4.JavaScript的流程控制語(yǔ)句

JavaScript常用的程序流程有3種結(jié)構(gòu):順序結(jié)構(gòu)秸苗、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)召娜。

  • 1.順序結(jié)構(gòu)
    顧名思義,順序結(jié)構(gòu)就是程序按照語(yǔ)句出現(xiàn)的先后春旭依次執(zhí)行惊楼,這是所有程序的最基本結(jié)構(gòu)玖瘸,程序中的大部分代碼通常采用的都是順序結(jié)構(gòu)。

  • 2.選擇結(jié)構(gòu)
    在編寫(xiě)一個(gè)程序時(shí)檀咙,通常需要根據(jù)特定的條件執(zhí)行不同的語(yǔ)句雅倒,JavaScript中用選擇結(jié)構(gòu)來(lái)達(dá)到這種需求。JavaScript中選擇結(jié)構(gòu)有 if 語(yǔ)句和 switch 語(yǔ)句 弧可。
    (1)if 單分支語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例:
    ...

     <script>
           if(條件表達(dá)式){
                語(yǔ)句或語(yǔ)句塊
             }
     </script>
    

...
(2)if 多分支語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例:
...

  <script>
       if(條件表達(dá)式1){
           語(yǔ)句或語(yǔ)句塊1
       }else if(條件表達(dá)式2){
           語(yǔ)句或語(yǔ)句塊2
       }else if(條件表達(dá)式n){
           語(yǔ)句或語(yǔ)句塊n
       }else{
           語(yǔ)句或語(yǔ)句塊n
       }
</script>

...
(3)switch 語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例:
...

<script>
       switch(表達(dá)式){
       case 取值1:語(yǔ)句或語(yǔ)句塊1蔑匣;break;
       case 取值2:語(yǔ)句或語(yǔ)句塊2;break;
       ......
       case 取值n: 語(yǔ)句或語(yǔ)句塊n棕诵;break;
       default: 語(yǔ)句或語(yǔ)句塊n+1裁良;break;
   }
</script>

...

  • 循環(huán)結(jié)構(gòu)
    (1) while語(yǔ)句的語(yǔ)法循環(huán)結(jié)構(gòu)和示例:

...

 <script>
  while(條件表達(dá)式){
      語(yǔ)句或語(yǔ)句塊
  }
</script>

...
(2) do-while語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例:
...

<script>
  do{
    語(yǔ)句或語(yǔ)句塊
  }while(條件表達(dá)式);
</script>

...
(3)for 語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例:

...

  <script>
  for(初始化表達(dá)式;循環(huán)表達(dá)式;循環(huán)后的操作表達(dá)式){
            語(yǔ)句或語(yǔ)句塊
  }
</script>              

...


結(jié)語(yǔ):

總的來(lái)說(shuō),如果你有一定的語(yǔ)言基礎(chǔ),如Java,那么js你的入門(mén)將會(huì)比較簡(jiǎn)單校套,希望這篇文章對(duì)你有所幫助价脾。
長(zhǎng)路漫漫,唯鍵作伴笛匙,感謝您的觀看侨把。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末犀变,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秋柄,更是在濱河造成了極大的恐慌获枝,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骇笔,死亡現(xiàn)場(chǎng)離奇詭異映琳,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)蜘拉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)有鹿,“玉大人旭旭,你說(shuō)我怎么就攤上這事〈邪希” “怎么了持寄?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)娱俺。 經(jīng)常有香客問(wèn)我稍味,道長(zhǎng),這世上最難降的妖魔是什么荠卷? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任模庐,我火速辦了婚禮,結(jié)果婚禮上油宜,老公的妹妹穿的比我還像新娘掂碱。我一直安慰自己,他們只是感情好慎冤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布疼燥。 她就那樣靜靜地躺著,像睡著了一般蚁堤。 火紅的嫁衣襯著肌膚如雪醉者。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,775評(píng)論 1 307
  • 那天披诗,我揣著相機(jī)與錄音撬即,去河邊找鬼。 笑死藤巢,一個(gè)胖子當(dāng)著我的面吹牛搞莺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播掂咒,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼才沧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼迈喉!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起温圆,我...
    開(kāi)封第一講書(shū)人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤挨摸,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后岁歉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體得运,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年锅移,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了熔掺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡非剃,死狀恐怖置逻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情备绽,我是刑警寧澤券坞,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站肺素,受9級(jí)特大地震影響恨锚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜倍靡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一猴伶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧塌西,春花似錦蜗顽、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至栖忠,卻和暖如春崔挖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背庵寞。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工狸相, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捐川。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓脓鹃,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親古沥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瘸右,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

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