JS-基礎入門

斜方寄生大脑發表於2024-10-24
JS

JavaScript入門

JavaScript是解釋性的弱型別程式語言

  • 解釋性: 逐行解釋, 逐行執行
  • 弱型別: 不區分變數的資料型別

JS的組成

一般認為瀏覽器中JavaScript由三部分組成

  • ECMAScript: 基礎語法
    由ECMA（原歐洲計算機制造商協會）進行標準化的一門程式語言, 主要規定了像變數, 資料型別, 流程控制, 函式等基礎語法
  • DOM: 文件物件模型
    由W3C組織制定的標準, 透過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色、事件等）
  • BOM: 瀏覽器物件模型
    由各個瀏覽器廠商根據DOM在各自瀏覽器上的實現, 不同的瀏覽器會略有差異, 透過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等

JS的書寫位置

跟CSS一樣, JS也有3種書寫方式

  • 外部: 將JS檔案單獨儲存, 再透過<script src="xxx.js">引入
    <script src="my.js"></script>

  • 內嵌: 在HTML檔案中, 將JS程式碼寫在<script>標籤中

  • 行內: 現在幾乎不用

變數

var a = 10

規則:

  • 識別符號: 由字母(A-Z, a-z)、數字(0-9)、下劃線()、美元符號( $ )組成，如：usrAge, num01, name
  • 變數名嚴格區分大小寫, 如 app和App是兩個不同的變數
  • 不能以數字開頭
  • 不能是 關鍵字 或者 保留字

推薦使用 駝峰法 (首字母小寫，後面單詞的首字母需要大寫)

如: myFirstName

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 宣告變數, 同時賦值
      var age = 18
      console.log(age)
      age = 81
      console.log(age)

      // 使用let宣告變數
      // 1. 不能重複宣告
      // 2. 宣告前不能引用
      // 3. 可以修改變數值
      // 4. 全域性宣告不會成為全域性物件的屬性
      let uname = 'xiaoming'
      uname = 'xiaomei'

      // 使用const宣告常量
      // 1. 不能重複宣告
      // 2. 不能直接修改常量值
      const str = 'hello'
      str = 'world'
    </script>
  </body>
</html>

資料型別

簡單資料型別(值型別)

簡單資料型別 說明 預設值
Number 數字型, 包含整型和小數型, 如21, 0.2333 0
String 字元型, 如'張三', 字串帶引號 ''(空字元)
Boolean 布林型, 如true, false; 等價於1和0 false
Undefined 未定義, 透過var宣告但是未賦值就是undefined undefined
Null 空 null

數字型

var num = 10 // num 數字型
var PI = 3.14 // PI 數字型
var num3 = 0xFF // 16進位制數

console.log(Number.MAX_VALUE) // 數字型的最大值
console.log(Number.MIN_VALUE) // 數字型的最小值
console.log(Number.MAX_VALUE * 2) // Infinity 無窮大
console.log(-Number.MAX_VALUE * 2) // -Infinity 無窮大

console.log('小小胖' - 100) // NaN 非數

字元型

單引號, 雙引號都可以, 推薦使用單引號, HTML中一般使用雙引號

var str = '我是一個"程式設計師"'
console.log(str)
var str1 = "我是一個'程式設計師'"
console.log(str1)
var str = '10' + '20'
console.log(str) // 1020
console.log(typeof str) // string
// 這裡的typeof是一個關鍵字. 當作運算子使用, 整體表示式有返回值
// typeof()是當作函式使用

// 模板字串
let abc = 'Hello'
str = `${abc} world` // Hello world
轉義符 解釋說明
\n 換行符，n 是 newline 的意思
\\ 斜槓 \
\' ' 單引號
\" ” 雙引號
\t tab 縮排
\b 空格 ，b 是 blank 的意思

布林型

  • true 表示真
  • false 表示假

引用資料型別

Object: 物件

資料型別轉換

顯式轉換

最常見的是字元型轉數值型

var num1 = prompt('請您輸入第一個值：')
var num2 = prompt('請您輸入第二個值：')
var result = parseInt(num1) + parseInt(num2)
alert('您的結果是:' + result)

隱式轉換

+的隱式轉換

// 只要+號的一邊是字元, 最終的結果就是字元
console.log('123' + '456') // '123456'
console.log('123' + 456) // '123456'
console.log('123' + true) // '123true'

// 特殊
undefined + 1 // NaN

==的隱式轉換

  • 字元型 轉換成 數字型
  • 布林型 轉換成 數字型
'1' == 1 // true
true == 1 // true
'0' == false // true

// 特殊的
NaN != NaN // true
undefined == null // true

關於Boolean型別的轉換

空字串(''), NaN, 0, null, undefined => false

其餘的全部 => true

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. +: 只要有一個資料是字元型, 那麼其他的運算元據都會被隱式轉換為字元
      console.log('123' + true) // 123true
      // 2. *1 -0: 將數字型別的字串, 轉換為純數字
      console.log('100' * 1, '200' - 0)
      // 3. 比較 ==
      //  字元型 => 數字
      //  布林型 => 數字
      console.log('1' == true) // true
      // 4. 轉布林型
      console.log(!!111) // 111 => true
      console.log(!!0) // 0 => false
    </script>
  </body>
</html>

相關文章