JavaScript 完整入門課程 適合初學者

1. JavaScript 用來做什麼

JS 是瀏覽器內建腳本語言：操控網頁互動、動態更新畫面、處理事件、與伺服器交換資料，也能在 Node.js 當後端。

2. JavaScript 基本功能

宣告變數、條件、迴圈、函式、事件監聽、非同步（Promise/async/await）、與 DOM 操作。

function sum(n){ let s=0; for(let i=1;i<=n;i++) s+=i; return s; }

3. 深入理解 JavaScript 資料型態 (Data Types)

原始型別：Number、String、Boolean、Null、Undefined、Symbol、BigInt；物件型別：Object、Array、Function、Date、RegExp…

// typeof / Array.isArray 等快速觀察型別
console.log(typeof 123, typeof 'hi', typeof true, typeof undefined);
console.log(typeof null, typeof Symbol(), typeof 1n);
console.log(Array.isArray([]), typeof {});

4. javascript的資料型態有哪些

快速表列與 typeof 範例。

// typeof / Array.isArray 等快速觀察型別
console.log(typeof 123, typeof 'hi', typeof true, typeof undefined);
console.log(typeof null, typeof Symbol(), typeof 1n);
console.log(Array.isArray([]), typeof {});

5. javascript字串處理

字串不可變；索引、長度、取子字串與搜尋。

const s=' Hello JavaScript ';
console.log(s.length, s.trim().toUpperCase(), s.includes('Java'), s.slice(1,6));

6. Javascript 字串處理函式

常用：slice/substring/substr、indexOf/includes、startsWith/endsWith、toUpperCase/toLowerCase、trim、split/join、replace/replaceAll。

const s=' Hello JavaScript ';
console.log(s.length, s.trim().toUpperCase(), s.includes('Java'), s.slice(1,6));

7. JavaScript 數值函數介紹。

Math：abs/floor/ceil/round/max/min/random/pow/sqrt/trig…

console.log(Math.abs(-7), Math.ceil(3.2), Math.floor(3.8), Math.max(3,9,5), Math.random().toFixed(3));

8. javascript數值函式

補充：Number() 轉型、parseInt/parseFloat、isNaN、Number.isInteger、toFixed/toPrecision。

console.log(Number('3.14'), parseInt('08',10), isNaN('x'/3));

9. javascript 有關陣列宣告處理和應用

陣列：push/pop/shift/unshift、forEach/map/filter/reduce/some/every、find/findIndex、includes、slice/splice。

const arr=[3,6,5,2]; const squared=arr.map(x=>x*x); const evens=arr.filter(x=>x%2===0); const sum=arr.reduce((a,b)=>a+b,0);

10. Java script的陣列(Array)

多維陣列、展開運算子（...）、解構賦值、深拷貝 vs 淺拷貝。

const arr=[3,6,5,2]; const squared=arr.map(x=>x*x); const evens=arr.filter(x=>x%2===0); const sum=arr.reduce((a,b)=>a+b,0);

11. JavaScript 迴圈的用法說明及使用

for、while、do...while、for...of、for...in，與 break/continue。

for (let i=0;i<3;i++) console.log('i=',i);
for (const v of ['a','b']) console.log(v);

12. JavaScript 迴圈應用

迴圈應用：巢狀、提前結束條件。

for (let i=0;i<3;i++) console.log('i=',i);
for (const v of ['a','b']) console.log(v);

13. JavaScript if用法

if/else if/else、三元運算子、guard clauses。

const score=78; const level=score>=60 ? '及格' : '不及格';

14. switch用法有哪些及說明

switch/case/default、break、合併多 case、改寫成查表。

const day=5; let type='';
switch(day){ case 1: case 2: case 3: type='平日'; break; case 6: case 7: type='週末'; break; default: type='其他'; }

15. Java script的sort排序及演算法

Array.sort 比較函式、數字/字串排序、穩定性、常見排序演算法。

const nums=[13,2,7,19,8]; nums.sort((a,b)=>a-b);

16. JavaScript 函式互動學習中心

函式、箭頭函式、閉包、回呼與高階函式。

function makeAdder(x){ return y=>x+y; } const add5=makeAdder(5); console.log(add5(3));

17. JavaScript Canvas 入門示範教學

Canvas 2D：context、線條與圓形、填色、requestAnimationFrame。

const c=document.getElementById('cv'); const ctx=c.getContext('2d'); ctx.fillStyle='#4f46e5'; ctx.fillRect(10,10,80,40); ctx.beginPath(); ctx.arc(120,30,20,0,Math.PI*2); ctx.fillStyle='#06b6d4'; ctx.fill();

18. Javascript的正則表示式如何用擧例

RegExp：test()/match()/replace()，常見模式（Email/手機/數字）。

const re=/^[^\s@]+@[^\s@]+\.[^\s@]+$/; console.log(re.test('user@example.com'));

19. Javascript Json物件的使用介紹

JSON 格式與用途、與 JS 物件差異。

const obj={name:'梅枝',score:95}; const json=JSON.stringify(obj); const obj2=JSON.parse(json);

20. JavaScript json物件使用方法

JSON.stringify / JSON.parse，取代函式與縮排。

const obj={name:'梅枝',score:95}; const json=JSON.stringify(obj); const obj2=JSON.parse(json);

21. 什麼是jQuery?

jQuery 的角色與現況（舊專案仍常見）。

/* 傳統：$('#id').text('...') / $.ajax(...)
   現代：document.querySelector('#id').textContent='...'
   或用框架（React/Vue/Svelte） */

22. jQuery如何使用?及說明

CDN 引入與常見操作：選取、事件、文字/屬性、AJAX。

/*


*/

23. avaScript 如何開啟其他網頁

window.open、location.href、 的 target；注意阻擋策略。

// location.href='https://example.com';
// window.open('https://example.com','_blank');

24. 使用Java script 寫一個爬蟲程式

同源限制下的同網域 BFS；伺服端可用 cheerio/puppeteer。

async function fetchHTML(url){ const res=await fetch(url); const html=await res.text(); const doc=new DOMParser().parseFromString(html,'text/html'); return { title: doc.querySelector('title')?.textContent || '(無標題)', links: [...doc.querySelectorAll('a[href]')].map(a=>a.href) }; }

25. JavaScript 爬蟲示範

同網域爬蟲最小範例。

async function fetchHTML(url){ const res=await fetch(url); const html=await res.text(); const doc=new DOMParser().parseFromString(html,'text/html'); return { title: doc.querySelector('title')?.textContent || '(無標題)', links: [...doc.querySelectorAll('a[href]')].map(a=>a.href) }; }

26. 做出一個React計數器

以 CDN 實作 React 計數器元件。

/* React CDN 計數器（示意）




*/

27. Node.js 平行運用的核心做法

Node 事件迴圈與非阻塞 I/O、worker_threads / cluster。

setTimeout(()=>console.log('timer'),0);
Promise.resolve(1).then(()=>console.log('microtask'));
console.log('sync');

28. Node.js的平行運用

使用 worker_threads 進行計算密集平行化（概念）。

/* Node worker_threads（概念）
const { Worker, isMainThread, parentPort, workerData } = require('node:worker_threads');
*/

29. JavaScript 的資料輸入與資料取得

從 取值、alert 與頁面輸出；對應 js-input-output.html。

const s=document.getElementById('john')?.value || '(尚未輸入)';
const p=document.getElementById('pw')?.value || '(尚未輸入)';
// document.getElementById('out').textContent='帳號：'+s+'\n密碼：'+p;