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

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

1. document.write()

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

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

2. console.log()

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

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

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

3.prompt()

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

prompt(請輸入姓名：');

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

么是 HTML？

HTML （Hypertext Markup Language）是標(biāo)準(zhǔn)標(biāo)記語言，是 Web 瀏覽器顯示的基礎(chǔ)。 此外，CSS（Cascading Style Sheets）等技術(shù)以及JavaScript等腳本語言也支持這種技術(shù)。

創(chuàng)建主頁時，首先使用 HTML 確定句子的結(jié)構(gòu)并標(biāo)記它，然后設(shè)計要顯示的信息。 這是網(wǎng)頁的基礎(chǔ)。

現(xiàn)在，讓我們仔細(xì)看看可以使用少量 CSS 代碼實現(xiàn)的技術(shù)。

一種技術(shù)摘要，可以使用鮮為人知的短 HTML 代碼實現(xiàn)

loading="lazy"屬性

Web 性能改進(jìn)技術(shù)之一是屬性，允許用戶延遲加載，直到滾動。 它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"

XHTML

發(fā)送電子郵件、電話或短信短信

打開電子郵件創(chuàng)建頁面、直接撥打電話或發(fā)送短消息的技術(shù)。

XHTML

確定列表順序的屬性strat

start屬性允許您自由確定列表格式的數(shù)字。

meter在元素中顯示數(shù)字

meter元素允許您使用彩色滑塊顯示數(shù)字和數(shù)量。 不需要 JavaScript 或 CSS。

HTML 本機(jī)搜索

通過預(yù)先在表單輸入元素中指定一些數(shù)據(jù)列表，可以將其作為候選關(guān)鍵字顯示在輸入字段中的下拉列表中。

Fieldset按元素對標(biāo)簽進(jìn)行分組

fieldset元素允許您將 Web 窗體中的多個控件和標(biāo)簽 （） 組合在一起。label

使用 window.opener 防止檢索原始窗口中的信息

target="_blank在 中打開的頁面將允許您訪問原始頁面的 window.opener。 這可能會對安全性和性能產(chǎn)生負(fù)面影響，例如"原始窗口在知道之前已轉(zhuǎn)換到填充站點"。 為了防止這種情況，請包括 或 。rel="noopener"rel="noreferrer"

base元素

如果要在新選項卡中打開 HTML 文檔中的所有鏈接，可以使用元素。 在下面的示例中，兩個鏈接都在新的選項卡中打開。base

防止傳真機(jī)緩存

若要更新網(wǎng)站的傳真，您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2

一種有效的技術(shù)，尤其是在生產(chǎn)環(huán)境中，以確保用戶輸入新版本。

XHTML

spellcheck按屬性檢查拼寫

可以決定是否檢查元素的拼寫錯誤的屬性。spellcheck

顯示 HTML 滑塊

input type="range"允許您使用滑塊調(diào)整數(shù)字。 所選數(shù)字可以顯示在 中。input type="number"

僅通過 HTML 顯示手風(fēng)琴

details元素允許您創(chuàng)建僅 HTML 本機(jī)手風(fēng)琴。

mark標(biāo)記中的文本突出顯示突出顯示

mark標(biāo)記允許您使用黃色標(biāo)記突出顯示文本的一部分。

下載文件具有屬性download

URL 鏈接的屬性允許您直接下載文件，而不是將其移動到文件中。download

XHTML

webp使用文件格式

使用".webp"作為圖像格式可以減小圖像大小并提高網(wǎng)站性能。

XHTML

視頻視頻縮略圖視圖

poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。

XHTML

type="search"在 中顯示取消標(biāo)記

在搜索框中使用時，將自動顯示"X"清除標(biāo)記以取消。type="search"

只有 HTML 可以實現(xiàn)的功能，我有很多。 我們計劃在未來添加和更新小技巧技術(shù)。

、流程控制

1. 作用：控制代碼的執(zhí)行順序

2. 分類

2.1順序結(jié)構(gòu)：從上到下依次執(zhí)行代碼語句

2.2選擇結(jié)構(gòu)：

1. if語句

簡單if結(jié)構(gòu)

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

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

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

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

2. if - else結(jié)構(gòu)：

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

3.多重分支結(jié)構(gòu)：

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

2. switch語句：

語法 :

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

使用時要注意的：

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

3.循環(huán)結(jié)構(gòu)：

作用 根據(jù)條件，重復(fù)執(zhí)行某段代碼

1. while循環(huán)：

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

2. do-while循環(huán)：

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

while 與do-while循環(huán)的區(qū)別 :

while 循環(huán)先判斷循環(huán)條件，條件成立才執(zhí)行循環(huán)體

do-while 循環(huán)不管條件是否成立，先執(zhí)行一次循環(huán)體

3. for 循環(huán)

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

循環(huán)控制 :

break 強(qiáng)制結(jié)束循環(huán)

continue 結(jié)束當(dāng)次循環(huán)，開始下一次循環(huán) 循環(huán)嵌套 : 在循環(huán)中嵌套添加其他循環(huán)

二、函數(shù)

函數(shù)的作用：封裝一段待執(zhí)行的代碼

語法：

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

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

三，匿名函數(shù)

匿名函數(shù)：省略函數(shù)名的函數(shù)。

語法為：

匿名函數(shù)自執(zhí)行

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

定義變量接收匿名函數(shù)：

var fn = function (){};
fn(); //函數(shù)調(diào)用

四，作用域

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

1，全局變量和全局函數(shù)

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

所有省略 var 關(guān)鍵字定義的變量，一律是全局變量

2，局部變量/局部函數(shù)

在函數(shù)內(nèi)部使用 var 關(guān)鍵字定義的變量為局部變量，函數(shù)內(nèi)部定義的函數(shù)也為局部函數(shù)，只能在當(dāng)前作用域中使用，外界無法訪問

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

作者：YJ-TX

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