初識JavaScript

敬故 2022-01-08 05:10:22 阅读数:524

javascript

JS簡介

JavaScript(簡稱“JS”) 是一種具有函數優先的輕量級,解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的脚本語言而出名,但是它也被用到了很多非瀏覽器環境中,JavaScript 基於原型編程、多範式的動態脚本語言,並且支持面向對象、命令式、聲明式、函數式編程範式。
那我們為什麼要學習JS呢
JavaScript 是 web 開發者必學的三種語言之一:

  • HTML 定義網頁的內容
  • CSS 規定網頁的布局
  • JavaScript 對網頁行為進行編程

JavaScript的使用

<script> 標簽,在 HTML 中,JS代碼必須比特於 <script></script> 標簽之間。
實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = "第一段JS"; </script>
</body>
</html>

注釋:舊的 JavaScript 例子會使用 type 屬性:<script type="text/javascript">。type 屬性不是必需的。JavaScript 是 HTML 中的默認脚本語言。

JavaScript 函數和事件

JavaScript 函數是一種 JavaScript 代碼塊,它可以在調用時被執行。

head中的 JavaScript

JavaScript 函數被放置於 HTML 頁面的 <head> 部分。
實例:

<!DOCTYPE html>
<html>
<head>
<script> function myFunction() {
 document.getElementById("demo").innerHTML = "段落已被更改。"; } </script>
</head>
<body>
<p id="demo">旅行是對平淡生活的一次越獄。</p>
<button type="button" onclick="myFunction()">試一試</button>
</body>
</html>

在這裏插入圖片描述
在這裏插入圖片描述

body中的 JavaScript

JavaScript 函數被放置於 HTML 頁面的 <body> 部分。
實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo">旅行是對平淡生活的一次越獄。
</p>
<button type="button" onclick="myFunction()">試一試</button>
<script> function myFunction() {
 document.getElementById("demo").innerHTML = "段落已被更改。"; } </script>
</body>
</html>

在這裏插入圖片描述
在這裏插入圖片描述
提示:把脚本置於 <body> 元素的底部,可改善顯示速度,因為脚本編譯會拖慢顯示。

外部脚本

脚本可放置與外部文件中。
實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo">旅行是對平淡生活的一次越獄。</p>
<button type="button" onclick="myFunction()">試一試</button>
<p>(myFunction 存儲在名為 "jg.js" 的外部文件中。)</p>
<script src="./jg.js"></script>
</body>
</html>

在這裏插入圖片描述
在這裏插入圖片描述
注釋:還可通過完整的 URL 或相對於當前網頁的路徑引用外部脚本.

JavaScript 輸出

JavaScript 能够以不同方式“顯示”數據:

  • 使用 window.alert() 寫入警告框
  • 使用 document.write() 寫入 HTML 輸出
  • 使用 innerHTML 寫入 HTML 元素
  • 使用 console.log() 寫入瀏覽器控制臺

使用 innerHTML

如需訪問 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。
實例:

<!DOCTYPE html>
<html>
<body>
<p>旅行是對平淡生活的一次越獄。</p>
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = 5555 + 6; </script>
</body>
</html>

在這裏插入圖片描述

使用 document.write()

使用 document.write() 比較方便。
實例:

<!DOCTYPE html>
<html>
<body>
<p>旅行是對平淡生活的一次越獄。</p>
<script> document.write(5 + 42); </script>
</body>
</html>

在這裏插入圖片描述
注意:在 HTML 文檔完全加載後使用 document.write() 將删除所有已有的 HTML 。

使用 window.alert()

使用 window.alert()警告框來顯示數據。
實例:

<!DOCTYPE html>
<html>
<body>
<script> window.alert(4 + 7); </script>
</body>
</html>

在這裏插入圖片描述

使用 console.log()

在瀏覽器中,可以使用 console.log() 方法來顯示數據。
實例:

<!DOCTYPE html>
<html>
<body>
<p>按f12在控制臺中查看</p>
<script> console.log(5 + 6); </script>
</body>
</html>

在這裏插入圖片描述

JavaScript 語句

實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script> var a, b, c; a = 8; b = 17; c = a + b; document.getElementById("demo").innerHTML = "c 的值是" + c + "。"; </script>
</body>
</html>

在這裏插入圖片描述

🥤分號

分號用來分隔 JavaScript 語句。
實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<script> var a, b, c; a = 2; b = 8; c = a + b; document.getElementById("demo1").innerHTML = c; </script>
</body>
</html>

在這裏插入圖片描述

JavaScript 空白字符

JS會忽略多個空格。我們可以向脚本添加空格,以增强代碼可讀性。在運算符旁邊( = + - * / )添加空格是個好習慣。

JavaScript 行長度和折行

如果 JavaScript 語句太長,對其進行折行的最佳比特置是某個運算符:
實例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = "Alger."; </script>
</body>
</html>

在這裏插入圖片描述

JavaScript 代碼塊

JavaScript 語句可以用花括號({ })組合在代碼塊中。
實例:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">點我!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script> function myFunction() {
 document.getElementById("demo1").innerHTML = "Alger."; document.getElementById("demo2").innerHTML = "敬故"; } </script>
</body>
</html>

在這裏插入圖片描述
在這裏插入圖片描述

JavaScript 關鍵詞

在這裏插入圖片描述

第一節到這裏就結束了

幸福就是一覺醒來,窗外的陽光依然燦爛。

版权声明:本文为[敬故]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080510215299.html