JavaScript學習指南之第一章Hello JavaScript!最基礎的JavaScript入門

JavaScript學習指南筆記

第一章 Hello JavaScript!

JavaScript簡介

  1. JavaScript屬於網絡端的腳本語言

  2. JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies,以及更多的應用。

  3. 能夠與網頁進行完美的集成。、

  4. 目前在因特網領域,也是比較流行的一種腳本語言。

  5. JavaScript是一種輕量級的編程語言

  6. JavaScript是可插入HTML頁面的編程代碼。

  7. JavaScript插入HTML頁面後,可有所有的瀏覽器所執行。

  8. 其中,JavaScript是不需要安裝任何額外的軟件,也沒有配置組件的路徑等等這些繁瑣的過程!與Java的開發和Android的開發的區別很大,因爲這些的開發過程中,你需要搭建開發環境和開發平臺,以便用戶體驗開發問題等等!


HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。

腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。


<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能夠直接寫入 HTML 輸出流中:
</p>

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

<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果您在文檔已加載後使用它(比如在函數中),會覆蓋整個文檔。
</p>

</body>
</html>



對於以上的代碼,我們並不需要理解,瀏覽器會解釋並執行位於 <script> 和 </script> 之間的 JavaScript。


把 JavaScript 放到了頁面代碼的底部,這樣就可以確保在 <p> 元素創建之後再執行腳本。



JavaScript的函數和事件

我們需要在某個事件發生時執行代碼,比如當用戶點擊按鈕時。

如果我們把 JavaScript 代碼放入函數中,就可以在事件發生時調用該函數。


<head> 或 <body> 中的 JavaScript

您可以在 HTML 文檔中放入不限數量的腳本。

腳本可位於 HTML 的 <body> 或 <head> 部分中,或者同時存在於兩個部分中。

通常的做法是把函數放入 <head> 部分中,或者放在頁面底部。這樣就可以把它們安置到同一處位置,不會干擾頁面的內容。


<head> 中的 JavaScript 函數


<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>


外部的JavaScript


也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。

如需使用外部文件,請在 <script> 標籤的 "src" 屬性中設置該 .js 文件



<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">點擊這裏</button>

<p><b>註釋:</b>myFunction 保存在名爲 "myScript.js" 的外部文件中。</p>

<script type="text/javascript" src="/js/myScript.js"></script>

</body>
</html>



在 <head> 或 <body> 中引用腳本文件都是可以的。實際運行效果與您在 <script> 標籤中編寫腳本完全一致。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章