Please enable JavaScript.
Coggle requires JavaScript to display documents.
2023_Javascript - Coggle Diagram
2023_Javascript
陣列處理
新增元素
push()
unshift()
splice()
刪除元素
pop()
shift()
delete()
splice()
排序 sort
字串
數字
反轉 reverse()
自訂
物件
亂數
篩選 filter()
遍歷每個元素 forEach()
元素的索引位置 indexOf()
合併成字串 join()
遍歷每個元素並回傳新陣列 map()
累加 reduce()
取出指定範圍的元素 slice()
DOM 的選取與操作
各種選取方式
getElementById()
getElemetsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
元素的宣告與 this 的使用
CSS 的控制
style()
className
classList()
cssText()
基本觀念
document
element
text
attribute
HTML
innerText
innerHTML
textContent
Node
createElement()
createTextNode()
appendChild()
removeChild()
cloneNode()
屬性控制、切字處理
BOM
Timer
持續的執行
clearInterval()
setInterval()
執行一次
setTimeout()
clearTimeout()
history
使用者在當前視窗，總共瀏覽過幾個網頁 length
回上一頁 back()
回到下一頁 forward()
指定頁 go()
location
當前網頁的網址 href
當前網頁的網域名稱 hostname
當前網頁的網址路徑 path
當前網頁的網址參數 search
當前網頁的 hash 值 hash
網頁轉址 href、assign()、replace()
重新整理網頁 reload()
navigator
cookie 開啟狀態 cookieEnabled
連線狀態 onLine
瀏覽器版本資訊
名稱 appName
代碼名稱 appCodeName
引擎名稱 product
版號 appVersion
完整版本資訊 userAgent
廠商名稱 vendor
作業系統資訊 platform
語系 language
是否允許 Java 程式執行 javaEnabled()
window
開啟新視窗 open()
關閉視窗 close()
視窗的可見寬、高innerWidth、innerHeight
整個視窗的寬、高 outerWidth、outerHeight
screen
使用者螢幕的寬、高 width、height
使用者螢幕的色彩深度 colorDepth
使用者螢幕的像素深度 pixelDepth
Popup
提式對話視窗 alert()
需確認的對話視窗 confirm()
文字輸入的對話視窗 prompt()
變數
資料型態
基本資料型態
字串
布林
數字
null
undefined
Symbol
複合資料型態
物件
存取物件
讀取
修改
陣列
存取陣列
讀取
修改
取得長度
宣告方式
var
let
const
作用域
區域變數
全域變數
規則
命名規則
駝峰式(Camel case)
大駝峰(Upper camel case)
小駝峰(Lower camel case)
烤肉串(Kebab case)
蛇型(Snake case)
勿用保留關鍵字
識別資料型態 typeof
函數
參數與引數
函數宣告
呼叫函數
變數的作用域
函數表達式
非同步操作
XMLHttpRequest
HTTP 狀態碼
fetch
async await
DOM 事件處理
常用事件處理
mouseover
mouseout
mouseenter
mouseleave
click
scroll
事件傳遞
冒泡
捕獲
Event 物件
target
sotpPropagation()
preventDefault()
事件級別
DOM0
DOM2
瀏覽器資料儲存
LocalStorage
setItem
getItem
Cookie
JSON
stringify
parse
dataset 自訂屬性
數學計算函數
四捨五入 round
無條件進位 ceil
無條件捨去 floor
隨機數 random
ESModule
在瀏覽器中使用 module
export
default
named
import
載入全部的模組，並放到 namespace 中
執行載入的內容
載入 default 並重新命名
只載入特定模組
載入特定模組並重新命名
同時載入 default 與特定模組
IDE
延伸模組
Live Server
Javascript(ES6) code snippeats
Chinese (Traditional) Language
開啟設定(JSON)
editor.tabsize
files.eol
files.autoSave
選擇
Visual Studio Code
Sublime Text
Dreamweaver
Notepad++
Javascript 初體驗
我要把 Javascript 寫在哪裡
外部
script
script defer
script async
內部
輸出內容
alert
console.log
語法
分號
變數
運算子
註解
空白
區分大小寫
日期與時間的操作
建立 Date 物件
取得
取得年 getFullYear()
取得月 getMonth()
取得日 getDate()
取得時 getHours()
取得分 getMinutes()
取得秒 getSeconds()
取得毫秒 getMilliseconds()
取得星期 getDay()
取得累計毫秒數 getTime()
設定
設定年 setFullYear()
設定月 setMonth()
設定日 setDate()
設定時 setHours()
設定分 setMinutes()
設定秒 setSeconds()
設定毫秒 setMilliseconds()
邏輯訓練
流程控制
迴圈
for
for / in
while
do / while
if
if...else
if...else if
switch
try catch finally
運算子
指定運算子
比較運算
算術運算子
位元運算子
邏輯運算子
字串運算子
三元運算子
有些是你不知道的事
提升
參數傳遞
Call by vallue
Call by referance
物件的方法