[ JavaScript 筆記] JavaScript 定義

更新於 2024/04/23閱讀時間約 4 分鐘
前言:
一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。
結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。

從定義開始,

首先來看 MDN 的定義:

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

我完全看不懂,來拆解一下:

Interpreted or just-in-time compiled 即時編譯語言

即時編譯語言結合了直譯式 & 編譯式的特點,讓 JS 在程式執行期間進行編譯,提升了執行速度。

編譯的步驟大致上長這樣:

  • 解析/讀取程式碼
  • 編譯成 machine code(第一次編譯成未優化版本)
  • 執行 machine code(在 Call Stack 中執行)
  • 執行期間 在後台優化並重新編譯 優化後取代原版本繼續執行

而 JS 擁有直譯式語言的特性,所以它無法獨立執行,只能在執行環境 Runtime 中使用。

Runtime
也可以稱為執行環境(有人比擬成工作室,我覺得很適合)
工作室(runtime)中放了 JS engine,以及這間工作室需要的工具。

最常見的 runtime 就是瀏覽器,包含了 JS engine、web APIs、cb queue;
另一種 runtime 是 Node.js,包含了 JS engine、C++ binding with thread pool、cb queue。

所以在 Node.js 中無法使用瀏覽器提供一些函式。


First-class functions 一級函式

在 JS 中,函式可以作為別的函式的參數、函式的返回值,賦值給變數或存儲在資料結構中,也就是說:

  • Functions 類型上是一種 object
  • Functions 有屬性
  • 可以被視為值、被儲存成變數
  • 可以傳遞給其他 functions 使用
  • 可以從其他 functions 返回 functions(好饒舌)
  • 可以在 functions 上呼叫方法


Prototype-based 基於原型的編程

  • 從原型(藍圖)建立物件,並從中繼承方法,因此可以使用該方法。


Multi-paradigm 多範型程式語言

可以使用想要的編程風格來寫程式,這讓 JavaScript 非常靈活。

  • Procedural programming - 線性式編程
  • Object-oriented programming - OOP 物件導向編程
  • Functional programming - FP 函式編程


Single-threaded 單線程語言

  • JS 是單線程語言,所有的程式碼片段都會在堆疊中(stack)被執行,一次只會執行一個程式碼。


Dynamically-typed language 動態語言

  • 不用手動宣告資料型態
  • 重新賦值時,變數的資料型態可以更改。
  • 類型檢查發生在運行時或執行時




先簡短解釋一下,因為字數有點太多了,
之後再一一擊破。(絕對不是懶惰!)
avatar-img
5會員
14內容數
本來是理科生,在被物理放棄之後成為了文科生,有時理性思考,偶爾卻會脫口出感性的字句;喜歡打字的聲音,以生活為靈感寫下過去、現在與未來。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
碎碎念 的其他內容
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
這次的 Frontend Mentor challenge 是新手村最後一個挑戰 ▶ Intro component with sign up form 網頁,使用 jQuery validation plugin。
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
理解問題,然後拆解,最後解決它。 通常網頁開發的課程流是 HTML - CSS - JavaScript , 但在 AC 一開始就先淺談 JavaScript , 就是要先建立運算思維:
孔子說三十而立,我卻三十而迷失了自己, 這個世界給得價值觀太過沈重, 原本不在意的,在褪去青春之後,都成為了後悔的來源; 後悔沒有選OO系、沒有攻讀研究所、沒有超前部署自己的人生, 最後遺失了勇氣,想要往前邁進得步伐依舊跨不出舒適圈, 於是季節繼續更迭、身邊的夥伴來來去去, 好像只有我被自己困住了。
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
這次的 Frontend Mentor challenge 是新手村最後一個挑戰 ▶ Intro component with sign up form 網頁,使用 jQuery validation plugin。
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
理解問題,然後拆解,最後解決它。 通常網頁開發的課程流是 HTML - CSS - JavaScript , 但在 AC 一開始就先淺談 JavaScript , 就是要先建立運算思維:
孔子說三十而立,我卻三十而迷失了自己, 這個世界給得價值觀太過沈重, 原本不在意的,在褪去青春之後,都成為了後悔的來源; 後悔沒有選OO系、沒有攻讀研究所、沒有超前部署自己的人生, 最後遺失了勇氣,想要往前邁進得步伐依舊跨不出舒適圈, 於是季節繼續更迭、身邊的夥伴來來去去, 好像只有我被自己困住了。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
利用JavaScript的Math.random( )函數創造一個隨機值,並透過隨機值的結果印出相對應的文字,就可以讓程式幫你選午餐要吃什麼了
Thumbnail
JavaScript 提供了兩個非常有用的定時器:setTimeout 和 setInterval,這兩個定時器可以幫助我們輕鬆地控制時間和程式的執行。
Thumbnail
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
邏輯運算 || = or 或 ; true || false ⇒ true p.s 只要左右兩邊有一個true , 那就是true && = and 和 ; true && false ⇒ false p.s 兩邊都要一樣 ! = not ; !true ⇒ false ; 相反 邏輯運算的短路性
事件是什麼: 發生了一件事情 執行相對應的程式 常見事件的種類: onclick 「點擊」 onmouseover 「滑鼠移入」 onmouseout 「滑鼠移出」 onmousedown 「滑鼠按住」 onmouseup 「滑鼠放開」 事件處理的三大關鍵: 在哪個事件上發生 事件的種類是什麼 執行
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法:
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
利用JavaScript的Math.random( )函數創造一個隨機值,並透過隨機值的結果印出相對應的文字,就可以讓程式幫你選午餐要吃什麼了
Thumbnail
JavaScript 提供了兩個非常有用的定時器:setTimeout 和 setInterval,這兩個定時器可以幫助我們輕鬆地控制時間和程式的執行。
Thumbnail
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
邏輯運算 || = or 或 ; true || false ⇒ true p.s 只要左右兩邊有一個true , 那就是true && = and 和 ; true && false ⇒ false p.s 兩邊都要一樣 ! = not ; !true ⇒ false ; 相反 邏輯運算的短路性
事件是什麼: 發生了一件事情 執行相對應的程式 常見事件的種類: onclick 「點擊」 onmouseover 「滑鼠移入」 onmouseout 「滑鼠移出」 onmousedown 「滑鼠按住」 onmouseup 「滑鼠放開」 事件處理的三大關鍵: 在哪個事件上發生 事件的種類是什麼 執行
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法: