or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
JavaScript 教學/
操作網頁元素
前情提要:
*.html
基礎框架你可能注意到了…
<head>
內的元素都不需要用</*>
關起來HTML稍微詳細的介紹: 從HTML到MarkDown(建議閱讀)
樹狀結構 DOM
JavaScript 又在哪呢?
HTML 的
<script>
元素🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 F12 或 Ctrl + Shift + I 可以在
Elements
頁面檢視所有 HTML 元素。▲ Ctrl+F 搜索
<script>
動動手: 主控台
入侵試對瀏覽器開發者工具的主控台發送以下指令:
🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 F12 或 Ctrl+Shift+I 可以打開瀏覽器的開發者工具,請在
console
(主控台
) 頁面輸入並發送指令。元素生成
生成按鈕
<button style="background-color: red;">我是按鈕</button>
表格
學會生成表格可以幫助我們快速學會HTML架構
練習1: 利用
createElement
和appendChild
生成前面的表格提示
document
用createElement
appendChild
應用既有函式和流程控制
表單
學會生成表單可以幫助我們快速學會HTML元素屬性
哪來的?
練習2: 選一個前面的表單來生成
防疫表單
興大入口
提示:
setAttribute("屬性","屬性值")
例如
就生成HTML
事件監聽器
點擊 click
HTML嵌入式監聽器
不建議像上面這樣寫,這是在汙染標記語言
onclick
屬性就是監聽器的一種先生成再監聽
讓你可以在JS繼續操作元素,雖然冗長
監聽器可以像上面直接用
.
接在元素後面,也可以ev?
就是監聽器捕捉到的事件你可以
console.log(ev)
看看它是什麼東西練習: 點擊生成按鈕
按鍵 keydown
重載頁面 beforeunload
前面的課程已經看膩了吧(?)
更多
onabort
,onautocomplete
,onautocompleteerror
,onblur
,oncancel
,oncanplay
,oncanplaythrough
,onchange
,onclick
,onclose
,oncontextmenu
,oncuechange
,ondblclick
,ondrag
,ondragend
,ondragenter
,ondragexit
,ondragleave
,ondragover
,ondragstart
,ondrop
,ondurationchange
,onemptied
,onended
,onerror
,onfocus
,oninput
,oninvalid
,onkeydown
,onkeypress
,onkeyup
,onload
,onloadeddata
,onloadedmetadata
,onloadstart
,onmousedown
,onmouseenter
,onmouseleave
,onmousemove
,onmouseout
,onmouseover
,onmouseup
,onmousewheel
,onpause
,onplay
,onplaying
,onprogress
,onratechange
,onreset
,onresize
,onscroll
,onseeked
,onseeking
,onselect
,onshow
,onsort
,onstalled
,onsubmit
,onsuspend
,ontimeupdate
,ontoggle
,onvolumechange
,onwaiting
練習: 只使用純 JavaScript,建立5×5的表格,利用按鍵監聽器「移動」紅色欄位
示例
→
作品展示