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

時間 2020-01-04

標籤 javascript 學習指南第一章 hello 基礎入門欄目 JavaScript 简体版

原文原文鏈接

JavaScript學習指南筆記

第一章 Hello JavaScript！javascript

JavaScript簡介html

JavaScript屬於網絡端的腳本語言。java
JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、建立cookies，以及更多的應用。編程
可以與網頁進行完美的集成。、瀏覽器
目前在因特網領域，也是比較流行的一種腳本語言。cookie
JavaScript是一種輕量級的編程語言。網絡
JavaScript是可插入HTML頁面的編程代碼。編程語言
JavaScript插入HTML頁面後，可有全部的瀏覽器所執行。ide
其中，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> 標籤中編寫腳本徹底一致。