日常開發(fā)中,為了方便數(shù)據(jù)的輸入和輸出,JavaScript提供了一些常用的輸入輸出語句,具體如表1-3所示。
表1常用的輸入輸出語句
類型 | 語句 | 說明 |
輸入 | prompt() | 用于在瀏覽器中彈出輸入框,用戶可以輸入內(nèi)容 |
輸出 | alert() | 用于在瀏覽器中彈出警告框 |
document.write() | 用于在網(wǎng)頁中輸出內(nèi)容 | |
console.log() | 用于在控制臺中輸出信息 |
接下來將分別演示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 (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ù)。
Web 性能改進(jìn)技術(shù)之一是屬性,允許用戶延遲加載,直到滾動。 它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"
XHTML
1 | <img src='image.jpg' loading='lazy' alt='代替テキスト'> |
打開電子郵件創(chuàng)建頁面、直接撥打電話或發(fā)送短消息的技術(shù)。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <a href="mailto:{email}?subject={subject}&body={content}"> Eメールを送信 </a> <a href="tel:{phone}"> お電話ください </a> <a href="sms:{phone}?body={content}"> SMSショートメッセージを送信 </a> |
start屬性允許您自由確定列表格式的數(shù)字。
meter元素允許您使用彩色滑塊顯示數(shù)字和數(shù)量。 不需要 JavaScript 或 CSS。
通過預(yù)先在表單輸入元素中指定一些數(shù)據(jù)列表,可以將其作為候選關(guān)鍵字顯示在輸入字段中的下拉列表中。
fieldset元素允許您將 Web 窗體中的多個控件和標(biāo)簽 () 組合在一起。label
target="_blank在 中打開的頁面將允許您訪問原始頁面的 window.opener。 這可能會對安全性和性能產(chǎn)生負(fù)面影響,例如"原始窗口在知道之前已轉(zhuǎn)換到填充站點"。 為了防止這種情況,請包括 或 。rel="noopener"rel="noreferrer"
1 2 3 | <a href="https://markodenic.com/" target="_blank" rel="noopener"> 參考ウェブサイト </a> |
如果要在新選項卡中打開 HTML 文檔中的所有鏈接,可以使用元素。 在下面的示例中,兩個鏈接都在新的選項卡中打開。base
若要更新網(wǎng)站的傳真,您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2
一種有效的技術(shù),尤其是在生產(chǎn)環(huán)境中,以確保用戶輸入新版本。
XHTML
1 | <link rel="icon" href="/favicon.ico?v=2" /> |
可以決定是否檢查元素的拼寫錯誤的屬性。spellcheck
input type="range"允許您使用滑塊調(diào)整數(shù)字。 所選數(shù)字可以顯示在 中。input type="number"
details元素允許您創(chuàng)建僅 HTML 本機(jī)手風(fēng)琴。
mark標(biāo)記允許您使用黃色標(biāo)記突出顯示文本的一部分。
URL 鏈接的屬性允許您直接下載文件,而不是將其移動到文件中。download
XHTML
1 2 3 | <a href='path/to/file' download> Download </a> |
使用".webp"作為圖像格式可以減小圖像大小并提高網(wǎng)站性能。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <picture> <!-- サポートされていたら.webp畫像を読み込む --> <source srcset="logo.webp" type="image/webp"> <!-- .webp畫像や<picture>タグが ブラウザにサポートされていないときの フォールバックとして --> <img src="logo.png" alt="logo"> </picture> |
poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。
XHTML
1 | <video poster="path/to/image"> |
在搜索框中使用時,將自動顯示"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
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。