全部章節 >>>>

本章目錄

1.1 JavaScript 概述

1.1.1 JavaScript 簡介

1.1.2 JavaScript 的概念和執行原理

1.1.3 JavaScript 腳本代碼的位置

1.1.4 實踐練習

1.2 JavaScript 核心語法

1.2.1 變數

1.2.2 資料型別

1.2.3 JavaScript 注釋

1.2.5 實踐練習

1.3 順序結構和選擇結構

1.3.1 順序結構

1.3.2 選擇結構

1、if單分支陳述句：

2、if 雙分支陳述句

3、if 多分支陳述句

4、switch 陳述句

1.3.3 實踐練習

1.4 回圈結構

1.4.1 while 回圈陳述句

1、while 回圈陳述句

2、do-while回圈陳述句

3、for回圈陳述句

1.4.4 break 陳述句和 continue 陳述句

1.4.5 實踐練習

總結：

1.1 JavaScript 概述

1.1.1 JavaScript 簡介

JavaScript 誕生于 1995 年，主要是進行用戶輸入的合法性驗證

在 1995 年之前，Web 頁面的一些驗證作業都是由服務器端的語言來實作，這就要求用戶輸入的資料必須先通過網路傳輸到服務器端，服務器端進行相應的處理后，再將結果反饋給客戶端

1.1.2 JavaScript 的概念和執行原理

JavaScript 是一種輕型的、解釋性的腳本語言，是一種由瀏覽器內的解釋器執行的程式語言

當客戶端向服務器端請求頁面時，服務器端將整個頁面包含 JavaScript 的腳本代碼發送到客戶端，瀏覽器從上往下逐行讀取并決議其中的 HTML 或腳本代碼

1.1.3 JavaScript 腳本代碼的位置

通常可以在 3 個地方撰寫 JavaScript 的腳本代碼

<script></script> 標簽中直接撰寫腳本程式代碼
腳本程式代碼放置在一個單獨的檔案中，然后在網頁檔案中參考這個腳本程式檔案
將腳本程式代碼作為某個 HTML 頁面元素的事件屬性值或超鏈接的 href 屬性值

HTML 檔案混合方式

示例：

<body>
? <script?type="text/javascript">
? ? document.write("<h2> 歡迎來到 JavaScript 課堂 </h2>");
? </script>
</body>

JS 檔案參考方式：

創建 JavaScript 檔案，命名為demo1.js html
頁面，在 <script> 標簽中參考 JavaScript 檔案

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

注意：帶有 src 屬性的 <script> 標簽不應該在 <script></script> 標簽之間包含任何額外的 JavaScript 代碼，否則嵌入的代碼會被忽略

HTML 代碼嵌入方式

將腳本程式代碼作為某個 HTML 頁面元素的事件屬性值或超鏈接的 href 屬性值

<body>
? <a?href="javascript:document.write('<h2> 歡迎來到 JavaScript 課堂 </h2>');">hello</a>
</body>

1.1.4 實踐練習

1.2 JavaScript 核心語法

1.2.1 變數

變數有三種使用方式:

先宣告再賦值如：var message; message="hi";
同時宣告和賦值變數如：var message="hi";
不宣告直接賦值如：message="hi";

變數可以不經宣告而直接使用，但是這種方法很容易出錯，因此不推薦使用，對變數的輸出測驗可以采用 alert() 彈出對話框的方式

變數命名規則:

第一個字符必須是一個字母、下劃線（_）或一個美元符號（$）
其他字符可以是字母、下劃線、美元符號或數字
區分大小寫
不能與關鍵字同名，如 while、for 和 if 等

示例：

<body>
? <script?type="text/javascript">
? ? var?x=2;
? ? var?y=3;
? ? var?z=x+y;
? ? alert("x="+x+",y="+y+",z="+z);
? </script>
</body>

1.2.2 資料型別

JavaScript 中有 5 種簡單資料型別，也稱為基本資料型別

undefined
null
boolean
number
string

另外還有一種復雜資料型別——object物件型別

由于JavaScript中的變數是弱型別，可通過typeof運算子獲取變數的資料型別

資料型別	資料值	typeof
number型別	浮點數、整數	number
boolean型別	true、false	boolean
string型別	單引號或雙引號引起來的若干字符	string
null型別	只存在一個值null，表示物件不存在	object
undefined型別	只存在一個值undefined，表示未賦值或未宣告的變數	undefined

示例：

<body>
? <script?type="text/javascript">
? ? var  str="message";
? ? document.write(typeof  str+"<br/>");
? ? var  other;
? ? document.write(typeof  other+"<br/>");
? ? var  numb=10.0;
? ? document.write(typeof  numb+"<br/>");
? ? var  date=new  Date();
? ? document.write(typeof  date+"<br/>");
? ? var  bool=1<2;
? ? document.write(typeof  bool);
? </script>
</body>

1.2.3 JavaScript 注釋

JavaScript 與很多語言一樣，如 Java、C# 都支持同樣的注釋形式

單行注釋：//
多行注釋： /* 注釋內容 */

示例：

// 宣告并初始化一個變數
var?v?=?5;
/* 使用 for 回圈輸出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
這些注釋不會顯示在頁面上，
但是可以通過頁面的源代碼查看到
*/

1.2.5 實踐練習

1.3 順序結構和選擇結構

1.3.1 順序結構

順序結構，顧名思義就是程式按照陳述句出現的先后順序依次執行

示例：

<body>
? <script?type="text/javascript">
? ? document.write(" 程式開始執行……<br/>");
? ? document.write(" 程式正在執行中……<br/>");
? ? document.write(" 程式執行完畢……<br/>");
? </script>
</body>

1.3.2 選擇結構

選擇結構：需要根據特定的條件執行不同的陳述句
JavaScript中選擇結構使用if陳述句和switch陳述句
if 陳述句有 3 種形式：單分支、雙分支和多分支

1、if單分支陳述句：

if( 條件運算式 )?{
? 陳述句或陳述句塊
}

示例：

<body>
? <script?type="text/javascript">
? ? var?undf;
? ? if(typeof?undf=="undefined")?{
? ? ? undf="Hello?World ！ ";
? ? }
? ? document.write(" 名稱是："+undf);
? </script>
</body>

2、if 雙分支陳述句

if( 條件運算式 ) {
? 陳述句或陳述句塊 1
}?else{
? 陳述句或陳述句塊 2
}

示例：

? <script?type="text/javascript">
? ? var?x=-4,y;
? ? if(x>0){
? ? ? y=x;
? ? }else{
? ? ? y=-x;
? ? }
? ? document.write(x+' 的絕對值是：'+y);
? </script>

如何用“變數 = 布爾運算式？陳述句 1: 陳述句 2”的條件運算式來簡化上述示例中的代碼？

3、if 多分支陳述句

if( 條件運算式 1){
? 陳述句或陳述句塊 1
}
else  if( 條件運算式 2){
? 陳述句或陳述句塊 2
}......
else  if( 條件運算式 n){
? 陳述句或陳述句塊 n
}
else{
? 陳述句或陳述句塊 n+1
}

示例：

Date 是 JavaScript 的內置物件，通過它可以獲取時間

<body>
? <script?type="text/javascript">
? ? var  time=new  Date();  // 創建 Date 物件
? ? var  hour=time.getHours();  // 當前小時
? ? if(hour<=11){
? ? ? document.write(" 早上好 ");
? ? }else  if(hour<=18){
? ? ? document.write(" 下午好 ");
? ? }else{
? ? ? document.write(" 晚上好 ");
? ? }
? </script>
</body>

4、switch 陳述句

switch（運算式）{
? case?取值 1：陳述句或陳述句塊 1;??break;
? case?取值 2：陳述句或陳述句塊 2;??break;
? ......
? case?取值 n：陳述句或陳述句塊 n;??break;
? default:?陳述句或陳述句塊 n+1;??break;
}

示例：

? ? var?time=new  Date();
? ? var?week=time.getDay();
? ? var?weekstr;
? ? switch(week){
? ? ? case?1: weekstr=" 一 ";
? ? ? case?2: weekstr=" 二 ";
? ? ? case?3: weekstr=" 三 ";
? ? ? case?4: weekstr=" 四 ";
? ? ? case?5:
? ? ? ? weekstr=" 五 ";
? ? ? ? document.write(" 今天是星期 "+weekstr+",?努力作業吧！ ");
? ? ? ? break;
? ? ? default:
? ? ? ? document.write(" 今天是周末，放松一下吧！ ");
? ? ? ? break;? ? }

1.3.3 實踐練習

1.4 回圈結構

1.4.1 while 回圈陳述句

JavaScript中，回圈結構有 while 回圈、do-while 回圈和 for 回圈

1、while 回圈陳述句

while（條件運算式）{
? 陳述句或陳述句塊
}

示例：

<table?border="1"?width="100%">
? ? <tr?align="center">
? ? ? <td> 攝氏溫度 </td>
? ? ? <td> 華氏溫度 </td>
? ? </tr>
? ? <script?type="text/javascript">
? ? ? var?f;? ? ? ? ? // 華氏溫度
? ? ? var?c=0;? ? ? ? // 攝氏溫度
? ? ? var?count=1;? ? ? // 條目
? ? ? while(count?<=?10?&&?c?<=?250){
? ? ? ? f=c*9/5.0+32;?// 轉換關系
? ? ? ? document.write("<tr?align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
? ? ? ? c=c+20;
? ? ? ? count++;
? ? ? }
? ? </script>
? </table>

2、do-while回圈陳述句

do{
? 陳述句或陳述句塊
}while( 條件運算式 );

示例：

? <script?type="text/javascript">
? ? var?i=1;
? ? var?num=1;
? ? do{
? ? ? i++;
? ? ? num=num*i;
? ? }while(i<5);
? ? document.write("i="+i+",num="+num);
? </script>

3、for回圈陳述句

for( 初始化運算式 ; 回圈條件運算式 ; 回圈后的操作運算式 ){
? 陳述句或陳述句塊
}

示例：

? <table?border="1"?width="100%">
? ? <tr?align="center">
? ? ? <td> 攝氏溫度 </td>
? ? ? <td> 華氏溫度 </td>
? ? </tr>
? ? <script?type="text/javascript">
? ? ? var?f;// 華氏溫度
? ? ? for(var  c=0,count=1;count<=10&&c<=250;c=c+20,count++){
? ? ? ? f=c*9/5.0+32;?  // 轉換關系
? ? ? ? document.write("<tr?align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
? ? ? }
? ? </script>
? </table>

1.4.4 break 陳述句和 continue 陳述句

JavaScript跳轉陳述句：break陳述句和continue陳述句

break陳述句用于中斷回圈

continue陳述句用于跳過本次回圈要執行的剩余陳述句，然后開始下一次回圈

示例：

? var?i=1;
? ? var?sum=0;
? ? while(i<=20){
? ? ? if(i%2!=0){
? ? ? ? i++;
? ? ? ? continue;? // 是奇數就結束本次回圈，開始下一次回圈
? ? ? }
? ? ? sum=sum+i;
? ? ? if(sum>30){
? ? ? ? document.write(" 當加到："+i+" 時，累加和已經超過 30");
? ? ? ? break;? ? // 累加和超過 30，跳出回圈
? ? ? }
? ? ? i++;
? ? }

1.4.5 實踐練習

總結：

JavaScript是由瀏覽器的解釋器解釋執行的程式語言
JavaScript腳本在客戶端執行，從而間接地提升了Web服務器的性能
JavaScript的變數是采用弱型別的形式 JavaScript中有五種簡單資料型別
JavaScript用typeof運算子來檢測給定變數的資料型別
JavaScript的運算子有算術運算子、賦值運算子、比較運算子和邏輯運算子
JavaScript的流程控制陳述句有順序結構、選擇結構和回圈結構，
JavaScript中選擇結構有if和switch，回圈結構有while、do…while和for

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/197241.html

標籤：其他

上一篇：利用原生js撰寫簡單計算器-Sander的博客-CSDN博客

下一篇：vue公眾號h5掉微信掃一掃三步搞定

JavaScript互動式網頁設計 • 【第1章 JavaScript 基本語法】

全部章節 >>>>

1.1 JavaScript 概述

1.1.1 JavaScript 簡介

1.1.2 JavaScript 的概念和執行原理

1.1.3 JavaScript 腳本代碼的位置

1.1.4 實踐練習

1.2 JavaScript 核心語法

1.2.1 變數

1.2.2 資料型別

1.2.3 JavaScript 注釋

1.2.5 實踐練習

1.3 順序結構和選擇結構

1.3.1 順序結構

1.3.2 選擇結構

1、if單分支陳述句：

2、if 雙分支陳述句

3、if 多分支陳述句

4、switch 陳述句

1.3.3 實踐練習

1.4 回圈結構

1.4.1 while 回圈陳述句

1、while 回圈陳述句

2、do-while回圈陳述句

3、for回圈陳述句

1.4.4 break 陳述句和 continue 陳述句

1.4.5 實踐練習

總結：