手把手教你JavaScript編程(4):<head>, <script>和<body>標簽

我在之前的三期教程里簡單介紹了萬維網聯盟W3chool提供的JavaScript教程。從這期開始,我將開始詳細介紹JavaScript的具體規則。本文的內容和W3chool上的JavaScript教程相似,但是會更詳細地講解內容,并重新組織例子和順序,相當于我對該教程進行整理歸納后的總結。

我覺得編程就是按照編程語言的設計規則玩游戲,寫出有用的代碼就像是游戲闖關。而JavaScript語言的功能就是讓我們在玩游戲的過程中創建出一個個“有趣,有料,也可以有種”的網頁。

<head>標簽

<head>標簽定義HTML文檔的標題,這個就是我們經常瀏覽的網頁的最頂端里的內容。

比如:

上圖中紅框里的內容就是放在<head>標簽里的內容產生的效果。

當然,我們也可以在<head>標簽里寫入函數等內容。

<script>標簽

<script>可以讓我們在HTML網頁里寫入JavaScript代碼,英文script的意思是腳本。腳本就是執行一段代碼實現某個功能的文檔。<script>是JavaScript代碼開始的地方,而</script>是JavaScript代碼結束的地方。<script>和</script>之間可以寫入任何JavaScript代碼,比如:

當瀏覽器讀入HTML文件的時候,遇到上面這段代碼會自動執行<script>與</script>之間的JavaScript代碼,也就是在網頁上跳出一個警告框,框里寫著“My First JavaScript”。

<body>標簽

顧名思義,<body>標簽是指HTML網頁的內容,可以是文本,圖像,語音,交互式界面,執行代碼等內容。

舉個例子吧,以下是一個HTML文件的代碼:

在這個文檔里,<body>和</body>之間的內容就是HTML文件的內容。<p>和</p>之間的內容是段落,也就是一段文字。<script>和</script>之間是的代碼的作用是讓HTML文件執行以下兩行代碼:

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

這兩行代碼里,<p>依然是指文檔,<h1>是指一級標題,就是文檔中最高一級的標題。如果我們想在網頁上寫一篇文章的話,那么h1標簽下的標題就是指文章的題目。以上這兩行代碼的作用是在把""內的文字寫入HTML文件的輸出上,也就是在HTML網頁上輸出一個標題和一段文字。效果如下:

<body>中的JavaScript函數

我們當然可以把一個JavaScript函數放再HTML文件的<body>范圍內。

現在有一個實際的問題:怎么實現在網頁上點擊按鈕改變網頁內容的功能?

我們需要一段文字,方便我們修改。為了讓函數指向這段文字,需要給這段文字一個身份,也就是id。

上圖中的這段文字的身份id是demo。要實現點擊按鈕修改文字的功能,我們還需要一個按鈕,可以這樣定義:

這行代碼用botton來告訴HTML文件,這里是一個按鈕,按鈕的圖形界面上會寫上“點擊這里”的文字來讓我們知道這是一個按鈕。一旦按鈕被點擊,這行代碼開始調用myFunction這個函數。所以我們還需要定義一個函數,如下:

在這段函數里,document.getElementById("demo")的作用是得到demo這個ID的內容,然后用innerHTML這個屬性把內容改為"My First JavaScript Function"。

全部的HTML文件內容如下:

點擊按鈕,效果如下:

好了,這次的內容就到這里了,希望大家有所收獲!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,510評論 0 17
  • 作為父母,應該都經歷過或者看到過以下的情景。 ●吃飯的時候,只吃兩口就不吃了。如果家長一定要讓他(她)繼續吃,不是...
    諾善之言閱讀 251評論 0 2
  • GET /favicon.ico HTTP/1.1 今天在做http服務器測試的時候,發現瀏覽器客戶端對服務器發送...
    亼亼閱讀 3,923評論 0 1