HTML5 Programming

1
Chapter10??? ? ?? ??? ??

• HTML5 Programming

2
Contents
1. ??? ? ??
2. ??? ??
3. ??? ??
3
??? ? ??

• ??? ? ??
• ???? ???? ??? ???? ??? ?? ?
• ??? ? ?? API? ???? ?? ??

4
??? ?? ??

• draggable ??
• ??? ??? ??
• true?? ???? ? ? ?? ??? false? ???? ??? ?
• a ??? ??? ??? div ??? ??? ??? ???? ??

5
???

• ??? ? ?? ?? ???

6
???

• ??? ? ?? ?? ???

7
??? ??

• ??? ??
• ??? ? ???? ???? ???? ???? DataTransfer ??? ??
• ???? ??? ??? DataTransfer ??? setData() ???? ????
  ???? ???? ???? ??? ???? ??? ? DataTransfer ???
  getData() ??? ???? ???? ???? ?
• DataTransfer ??? ???

8
??? ??

• ??? ??
• ??? ??? ?? ???? ???? ??? ???? setData() ?????
  type? data ? ?? ??? ???? ?
• setData() ???? type ?
• setData() ???? ???? ??? ???? ???? ?? ???? ????
  ??????? getData() ???? ????? ??? ??? type? ?? ???
  setData() ????? ??? type ?? ??? ?

9
??? ??

• ??? ??

10
???? 10-1
01 lt!DOCTYPE HTMLgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ??
lt/titlegt 06 ltstyle type"text/css"gt 07 div
width 200px height 200px border 1px
solid 08 float left margin-right10px 09
lt/stylegt 10 ltscript type"text/javascript"gt 11
function dropset(event) 12 13
event.preventDefault() 14 15 16
function drag(event) 17 18
event.dataTransfer.setData("Text",
event.target.id) 19 20 21 function
drop(event) 22 23 var data
event.dataTransfer.getData("Text") 24
event.target.appendChild(document.getElementById
(data)) 25 event.preventDefault() 26 27
lt/scriptgt 28 lt/headgt
11
???? 10-1
29 ltbodygt 30 ltdiv id"div1" ondrop"drop(event)
" ondragover"dropset(event)"gt 31 ltimg
id"drag1" src"android.jpg" width"150" 32
draggable"true" ondragstart"drag(event)"gt 33
lt/divgt 34 35 ltdiv id"div2"
ondrop"drop(event)" ondragover"dropset(event)"gtlt
/divgt 36 lt/bodygt 37 lt/htmlgt
12
??? ??

• ??? ??
• ??? ?? ?? ??
• ????? effectAllowed ??? ???? ???? dragstart ????
  ???? dropEffect ??? ??? ? ???? dragenter ????
  dragover ????? ??

13
??? ??

• ??? ??

14
??? ??

• ??? ??
• ??? ?? ?? ??? ??? ?? ?? ???
• ??? ?? ??? ?? ?? ???? ???? setDragImage() ????
  ???? ??? ?? ?? ??? ??? ??? ??? ??? x??, y??? ??
• ??? ???? ??? ???? ???? ???? ??? ?? addElement()
  ???? ??? ??? ??? ??

15
??? ??

• ??? ??

16
??? ??

• ??? ??
• ??? ??? ??? ???? ????? ??? ??? ????? ??? ? ??
• ???? ?? ??

17
?? ?? ??

• contenteditable ??
• ?? ??? ??? ??? ? ??? ???? ??
• ?? ?? ???? ?? contenteditable ???? ????? ????
  true? ??? ??
• ??? ?

18
?? ?? ??

• ?? ?? ??

19
?? ?? ??

• designMode ??
• ??? ??? ?? ??? ????? ? ? ??
• designMode ??? ???? on, off ? ??? ??? ? ??? ???
  ???? ???? ???? on? ???? ????? ?? ???? off? ???? ?

20
??? ??

• execCommand() ???
• contenteditable ???? designMode ??? ???? ???
  ????? ??? ???? execCommand() ???? ???? ??? ???
  ??? ? ? ??

21
??? ??

• execCommand() ???
• document ??? ?? ??? ? ?? ??? ??
• ? ?? ??? commandId ?? ??? ??? ??? ?? ??
• ? ?? ??? ? ?? ??? commandId? ?? UI? ???? ??
• ? ?? ??? commandId? ??? ?? ?? ??? ??

22
??? ??

• ??? ?? ?? ???

23
??? ??

• commandId ?

24
??? ??

• commandId ?

25
???? 10-2
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ??
lt/titlegt 06 ltstyle type"text/css"gt 07 div
width 700px height 200px border 1px
solid 08 float left
margin-right10px 09 input width 100px
height 30px 10 lt/stylegt 11 ltscript
type"text/javascript"gt 12 window.onload
function() 13 14 var editor
document.getElementById("editor") 15 if
(editor.isContentEditable) 16 17
editor.focus() 18 19 20 21 functio
n setBold() 22 23 document.execCommand("bol
d") 24 25 26 function setItalic() 27
28 document.execCommand("italic") 29
26
???? 10-2
31 function setSubscript() 32 33
document.execCommand("subscript") 34
35 36 function setSuperscript() 37 38
document.execCommand("superscript") 39
40 41 function setSelectAll() 42 43
document.execCommand("selectAll") 44
45 46 function setUnselect() 47 48
document.execCommand("unselect") 49
50 51 function setUndo() 52 53
document.execCommand("undo") 54 55
lt/scriptgt 56 lt/headgt
27
???? 10-2
57 ltbodygt 58 ltinput type"button" value"??"
onclick"setBold()"gt 59 ltinput type"button"
value"???" onclick"setItalic()"gt 60 ltinput
type"button" value"????" onclick"setSubscript()
"gt 61 ltinput type"button" value"???"
onclick"setSuperscript()"gt 62 ltinput
type"button" value"?? ??" onclick"setSelectAll(
)"gt 63 ltinput type"button" value"?? ??"
onclick"setUnselect()"gt 64 ltinput
type"button" value"????" onclick"setUndo()"gtltb
rgtltbrgt 65 ltdiv id"editor" contenteditablegtlt/div
gt 66 lt/bodygt 67 lt/htmlgt
28
??? ??

• ??? ??
• ??? ???? ?? ??? ?? ? ? ??
• ???? ?? ??

29
??? ?? ?? ??

• ??? ?? ?? ??
• ??? ?? ??? ?? ??? ???? ???? ?? ??? ??? ?? ?
• ?? ??? window ??? document ??? getSelection()
  ???? ??
• ????? ???? ????? window ??? getSelection() ????
  ????? ???
• getSelection() ???

30
??? ?? ?? ??

• ??? ?? ?? ??

31
??? ?? ??

• ?? ?? ?? ?? ??? ? ??

32
??? ?? ??

• ??? ?? ??

33
??? ?? ??

• ??? ?? ??
• ?? ?? ?? ?? ??? ????? ?? ??? ??? ?????? ? ??
  collapse() ???? ??
• ??? ?? ?? ?? ???? ??

34
??? ?? ??

• ??? ?? ??