JavaScript中常用的輸入輸出語句介紹

日常開發中，為了方便數據的輸入和輸出，JavaScript提供了一些常用的輸入輸出語句，具體如表1-3所示。
表1常用的輸入輸出語句

類型	語句	說明
輸入	prompt()	用于在瀏覽器中彈出輸入框，用戶可以輸入內容
輸出	alert()	用于在瀏覽器中彈出警告框
	document.write()	用于在網頁中輸出內容
	console.log()	用于在控制臺中輸出信息

接下來將分別演示document.write0、console.log0和promptO的使用。

1. document.write()

document.write0的輸出內容中如果含有HTML標簽，會被瀏覽器解析。下面利用documenL.write0在頁面中輸出“我是document.write0語句!”，示例代碼如下。

document.write('我是document.write()語句！');

2. console.log()

利用console.log0語句在控制臺輸出“我是console.log0語句!”，示例代碼如下。

console.log('我是console.log()語句!');

console:.log0的輸出結果需要在瀏覽器的控制臺中查看。在Chrome 瀏覽器中按“F12”鍵(或在網頁空白區域右擊，在彈出的菜單中選擇“檢查”)啟動開發者工具，然后切換到“Console”(控制臺)面板，即可看到console.log0的輸出結果。

3.prompt()

利用prompt0語句實現在頁面中彈出一個帶有提示信息的輸入框，示例代碼如下。

prompt(請輸入姓名：');

上述示例代碼運行后，將在頁面中彈出一個輸人框并提示用戶“請輸人姓名：”提示框。

、流程控制

1. 作用：控制代碼的執行順序

2. 分類

2.1順序結構：從上到下依次執行代碼語句

2.2選擇結構：

1. if語句

簡單if結構

if(條件表達式){
    表達式成立時執行的代碼段
}

注意 : 除零值以外，其他值都為真，以下條件為假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

特殊寫法 : { }可以省略,一旦省略，if語句只控制其后的第一行代碼

2. if - else結構：

if(條件表達式){
//條件成立時執行
}else{
//條件不成立時選擇執行
}

3.多重分支結構：

if(條件1){
      //條件1成立時執行
  }else if(條件2){
      //條件2成立時執行
  }else if(條件3){
      //條件3成立時執行
  }...else{
      //條件不成立時執行
  }

2. switch語句：

語法 :

switch(value){
case 值1 :
//value與值1匹配全等時,執行的代碼段
break; //結束匹配
case 值2 :
//value與值2匹配全等時,執行的代碼段
break;
case 值3 :
    //value與值3匹配全等時,執行的代碼段
break;
default:
//所有case匹配失敗后默認執行的語句
break;
}

使用時要注意的：

1. switch語句用于值的匹配，case用于列出所有可能的值；只有switch()表達式的值與case的值匹配全等時，才會執行case對應的代碼段
2. break用于結束匹配，不再向后執行；可以省略，break一旦省略，會從當前匹配到的case開始，向后執行所有的代碼語句，直至結束或碰到break跳出
3. default用來表示所有case都匹配失敗的情況，一般寫在末尾，做默認操作
4. 多個case共用代碼段
          case 值1:
          case 值2:
          case 值3:
          //以上任意一個值匹配全等都會執行的代碼段

3.循環結構：

作用根據條件，重復執行某段代碼

1. while循環：

定義循環變量;
  while(循環條件){
  條件滿足時執行的代碼段
  更新循環變量;
}

2. do-while循環：

do{
循環體;
更新循環變量
}while(循環條件);

while 與do-while循環的區別 :

while 循環先判斷循環條件，條件成立才執行循環體

do-while 循環不管條件是否成立，先執行一次循環體

3. for 循環

for(定義循環變量;循環條件;更新循環變量){
    循環體;
}

循環控制 :

break 強制結束循環

continue 結束當次循環，開始下一次循環循環嵌套 : 在循環中嵌套添加其他循環

二、函數

函數的作用：封裝一段待執行的代碼

語法：

 //函數聲明
  function 函數名(參數列表){
      函數體
      return 返回值;
  }
  //函數調用
  函數名(參數列表);

使用： 函數名自定義，見名知意，命名規范參照變量的命名規范。普通函數以小寫字母開頭，用于區分構造函數(構造函數使用大寫字母開頭，定義類)

三，匿名函數

匿名函數：省略函數名的函數。

語法為：

匿名函數自執行

(function (形參){
 
})(實參);

定義變量接收匿名函數：

var fn = function (){};
fn(); //函數調用

四，作用域

JavaScript 中作用域分為全局作用域和函數作用域，以函數的{ }作為劃分作用域的依據

1，全局變量和全局函數

只要在函數外部使用 var 關鍵字定義的變量，或函數都是全局變量和全局函數，在任何地方都可以訪問

所有省略 var 關鍵字定義的變量，一律是全局變量

2，局部變量/局部函數

在函數內部使用 var 關鍵字定義的變量為局部變量，函數內部定義的函數也為局部函數，只能在當前作用域中使用，外界無法訪問

3，作用域鏈局部作用域中訪問變量或函數，首先從當前作用域中查找，當前作用域中沒有的話，向上級作用域中查找，直至全局作用域

作者：YJ-TX

原文：https://www.cnblogs.com/yjtxin/p/12969576.html

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：軟件測試 - 查看網頁的HTML源代碼
下一篇：為什么選擇HTML5Plus這《土土》的技術

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript中常用的輸入輸出語句介紹

您的項目需求