javascript
Web前端开发笔记——第四章 JavaScript程序设计 第一节 JavaScript的基础语法
目錄
- 一、JavaScript的定義
- 二、代碼的創(chuàng)建和使用
- （一）內(nèi)嵌JavaScript代碼
- （二）引用JavaScript文件
- 三、代碼的注釋
- 四、輸出數(shù)據(jù)
- （一）alert()彈出警告框
- （二）訪問HTML 元素
- （三）寫至HTML文檔
- （四）寫入瀏覽器控制臺
一、JavaScript的定義
JavaScript是一種基于對象和事件驅(qū)動的腳本語言，它與HTML（超文本標(biāo)記語言）、CSS（層疊樣式表）結(jié)合起來，其中HTML 定義網(wǎng)頁的內(nèi)容，CSS 描述網(wǎng)頁的布局，而JavaScript 控制網(wǎng)頁的行為。
二、代碼的創(chuàng)建和使用
可以通過在HTML里面內(nèi)嵌JavaScript代碼或引用單JavaScript文件。
（一）內(nèi)嵌JavaScript代碼
在<script> </script>標(biāo)簽內(nèi)寫JavaScript代碼，前者代表JavaScript代碼的開始，后者代表代碼的結(jié)束，可以在 <body> <body> 標(biāo)簽或 <head> <head> 標(biāo)簽內(nèi)寫JavaScript代碼，兩種的運(yùn)行結(jié)果是一樣的。
比如下列我們在body標(biāo)簽的script標(biāo)簽內(nèi)添加一個(gè) document.write()方法將內(nèi)容寫入HTML文檔中：
運(yùn)行結(jié)果如下：
同樣，我們將JavaScript代碼寫在body標(biāo)簽內(nèi)也是可以的：
輸出結(jié)果也是一樣的：
（二）引用JavaScript文件
當(dāng)JavaScript代碼過長以免影響編寫或需引用其它已寫好的JavaScript代碼時(shí)，可以通過引用JavaScript文件的方式來引用。
例如下列寫好的一個(gè)名稱為index.html的HTML文件，在該文件中的body標(biāo)簽內(nèi)引用一個(gè)名稱為1-1.js的JavaScript文件，這里的window.alert()是彈出警告框，簡寫為alert()，它可以用作調(diào)試。
如下1-1.js文件：
如下index.html文件中引用1-1.js文件：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>text1</title></head><body><script src="1-1.js"></script></body></html>運(yùn)行結(jié)果如下：
三、代碼的注釋
JavaScript中代碼的注釋通過//單行注釋和/*多行注釋來注釋內(nèi)容，多行注釋中以/*開始，以*/結(jié)尾，和c/c++是一樣的。
四、輸出數(shù)據(jù)
（一）alert()彈出警告框
通過使用alert()或window.alert()彈出警告框。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>text1</title></head><body><script>alert("1");alert("2");</script></body></html>運(yùn)行結(jié)果如下：
（二）訪問HTML 元素
通過document.getElementById() 方法來訪問HTML中的元素，參數(shù)是id，即使用id屬性來標(biāo)識訪問相關(guān)的HTML元素，且通過innerHTML來獲取或插入元素內(nèi)容，即獲取HTML當(dāng)前標(biāo)簽的起始和結(jié)束里面的內(nèi)容且可修改HTML元素的內(nèi)容。
例如下列HTML代碼，其中使用document.getElementById() 方法訪問html中id=”page1“的p標(biāo)簽，并通過innerHTML修改該標(biāo)簽內(nèi)容為”1“：
運(yùn)行結(jié)果如下：
（三）寫至HTML文檔
通過document.write()方法向HTML文檔寫入內(nèi)容，若在HTML文檔加載完成后再執(zhí)行 document.write()方法，則寫入的內(nèi)容會覆蓋整個(gè) HTML 頁面。
例如下列HTML代碼，向html文檔中寫入“這是第三個(gè)段落！”：
運(yùn)行結(jié)果如下：
例如下列HTML代碼，這里定義了一個(gè)函數(shù)F()，通過通過一個(gè)按鈕，經(jīng)點(diǎn)擊后通過Date()顯示目前時(shí)間，時(shí)間會覆蓋整個(gè)HTML頁面：
運(yùn)行結(jié)果如下：
HTML文檔已加載完成，點(diǎn)擊“更新時(shí)間”后，此時(shí)Date()輸出的內(nèi)容會覆蓋整個(gè)html文檔：
（四）寫入瀏覽器控制臺
有的瀏覽器支持調(diào)試，可以通過使用console.log()方法寫入到瀏覽器控制臺中，可以在瀏覽器中通過F12進(jìn)入調(diào)試模式，然后找到控制臺。
比如Google chrome中：
Firefox中：
Microsoft Edge中：
console.log()方法在控制臺中打印相關(guān)信息，它并不會對本身的JavaScript程序代碼造成影響，例如下列HTML代碼：
運(yùn)行結(jié)果如下，可見內(nèi)容沒有顯示：
打開控制臺，可見console.log(i)和console.log(a)的值：
總結(jié)
以上是生活随笔為你收集整理的Web前端开发笔记——第四章 JavaScript程序设计 第一节 JavaScript的基础语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python程序开发——第七章 模块与包
- 下一篇： Web前端开发笔记——第四章 JavaS