JavaScript ：直譯式語言，宿主語言（需要瀏覽器才可以執行）
p.s. Chrome 可直接執行 JavaScript，一般使用文字編輯器進行撰寫

JavaScript 可用一般文字編輯器編輯使用
嵌入方式：
(1) HTML標籤中
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
</head>
<body>
    <!--
    在 HTML 中直接撰寫程式碼，包裹在 script 標籤中
    -->
  <script>
      <!-- 類似 Python print() 印出內容於終端機畫面上 -->
      console.log('hello world:)');
  </script>
</body>
</html>

(2) 外部引入檔案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
</head>
<body>
  <!-- 外部引入獨立 .js 檔案，./ 代表同一個資料夾下的檔案 -->
  <script src="./main.js"></script>
</body>
</html>

變數
```
let 變數名稱
```
常數
```
const 常數名稱
```
單行註解
```
// 單行註解
```
多行註解
```
/*
多行註解
*/
```
```
// 數值（整數）
console.log(typeof(1));
// 數值（浮點數）
console.log(typeof(1.2));
// 布林
console.log(typeof(true));
// 字串
console.log(typeof('str'));
// 空值，視為物件
console.log(typeof(null));
// 沒有被定義的變數
console.log(typeof(undefined));

/
number
number
boolean
string
object
undefined/

**p.s. JavaScript 比較運算子值和資料型別皆相等為 ===，若使用 == 代表不一定要同資料型別**

// true
console.log('2' == 2);
// false
console.log('2' === 2);

* 陣列 vs 物件
陣列：存放多個資料

let languages = ['Java', 'Python', 'C++', 21, true];

// ['Java', 'Python', 'C++', 21, true]
console.log(languages);

物件：存放更詳細的資

const language = {
name: 'Jack',
age: 20,
languages: ['Chinese', 'English']
};

// Jack
console.log(language.name);
// 20
console.log(language.age);
// Chinese
console.log(language.languages[0]);

* DOM API（Document Object Model）：文件物件模型，是用於使用物件方式操作瀏覽器的方式

My Title

A heading

Link text

`` html 下有 head 和 body 元素 head 下有 title 元素，title 元素有文字內容 body 下有 h1 元素和 a 超連結元素，h1 元素有文字內容，a 有文字內容和屬性 href **p.s. 大部分節點元素有

屬性也有文字內容，元素節點有階層`之分

在 JavaScript 常見的事件有：
滑鼠：click 點擊
鍵盤：keydown 按下鍵盤按鈕
更多事件可以參考文件說明

【隨堂筆記】JavaScript 網頁應用

A heading

fiona90178

你可能感興趣的文章

留言討論

【隨堂筆記】JavaScript 網頁應用

A heading

fiona90178

你可能感興趣的文章

Day 122

Scrapy 和 Redis 分散式crawlers (蘋果日報為例)

binding in fragment

留言討論