XHTML DOM JavaScript 2 2008 7 1
1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML......................... 2 2.2 web.......................... 3 2.2.1 web.......................... 3 2.2.2.......................... 3 2.2.3 web.................... 3 2.2.4 web....................... 4 2.3.............................. 4 2.3.1................... 4 2.3.2.......................... 4 2.3.3....................... 5 2.3.4.......................... 5 2.3.5............................ 5 2.3.6............................. 6 2.4................................ 7 2.4.1.................... 7 2.4.2.................... 7 2.4.3.................... 7 2.5................................... 9 2.5.1............................ 9 2.5.2.................... 9 2.5.3.................... 10 2.6.................................. 11 2.6.1.............. 11 2.6.2.......... 11 2.7............................ 12 2.7.1............. 12 2.8.................... 13 2.8.1 input........................... 13 2.8.2 textarea......................... 13 2.8.3 select........................... 14 3 DOM 14 3.1 DOM............................... 14 3.2 DOM+JavaScript........................... 15 3.2.1 ID DOM.................... 15 2
1 1.1 intelligence mirror 1 web HTML Hyper Text Markup Language W3C DOM Document Object Model DHTML DynamicHTML DHTML JavaScript 1.2 Alice H: 1 A H: A WindowsXP 1 H: signature.txt A4 40 3 1
2 HTML 2.1 web HTML 2.1.1 HTML web HTML HTML HTML HyperText Markup Language HTML HTML html htm HTML HTML 2.1.2 HTML HTML < > </ > < > </ > HTML <html></html><head></head><body></body> HTML <html> HTML <head> <title> </title> </head> <body> web </body> </html> HTML 2.1.2 HTML scheme.html H: A 2
2.2 web 2.2.1 web web WindowsXP WindowsVista Windows MacOS Linux BSD Soralis web IETF Internet Engineering Task Force RFC Request Comment 2616 HTTP HyperText Transfer Protocol web web URL Uniform Resource Locator http:// 2.2.2 web HTTP Internet Explorer Fire Fox web HTML HTML web rendering 2.2.3 web HTML web alice P: web_public web P: web_public web 3
P: web_public L: web_local L: web_local web web 2.2.4 web L: web_local HTML URL Uniform Resource Locator web 2.2.3 L: web_local web alice web URL http://alice/~ / 2.2.4 2.1.2 H: A L: web_local URL web 2.3 2.3.1 HTML web Windows MacOS Linux BSD UNIX i-mode 3,4 2.3.2 HTML < > & 1 1 4
HTML < < > > & & 2.3.3 web <!-- --> HTML <!-- 2 A --> 2.3.4 <br/> BReak p Paragraph <p> </p> HTML <br/> HTML <p> </p> <p> </p> 2.3.5 <hr/> HoRizon HTML <hr/> 5
2.3.6 HTML 6 h h Heading HTML 1 <h1> 1 </h1> 1 <h2> 1 </h2> 1 <h3> 1 </h3> 1 <h4> 1 </h4> 1 <h5> 1 </h5> 1 <h6> 1 </h6> 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 web HTML fundament.html L:\web_local URL HTML 1 2 HTML 1 3 HTML 1 HTML HyperText Markup Language 2 2 3 HTML <html> </html> HTML 1 Copyright(c) scorpion Copyright 6
2.4 2.4.1 <ul> </ul> Unordered List <li> </li> li List Item HTML <ul> <li> </li> <li> </li> <li> </li> </ul> <ul> <ul type= xxx > type xxx circle square disc 2.4.2 <ol> </ol> Ordered List HTML <ol> 1. <li> </li> 2. <li> </li> 3. <li> </li> </ol> <ol> <ol type= xxx > type xxx 1 A a I i 2.4.3 <dl> </dl> definition List <dt> </dt> definition Term <dd> </dd> definition Description 7
HTML <dl> <dt> </dt> <dd> </dd> <dd> </dd> <dd> </dd> <dt> </dt> <dd> </dd> <dd> </dd> </dl> 2.4.1 2.4.2 2.4.3 list.html L:\web_local URL 1 2 1 3 <ul> </ul> ul Unordered List 1 <li> </li> li List Item 2 3 2 3 <ol> </ol> Ordered List 1 1. 2. 3. 2 8
2.5 2.5.1 <table>... </table> table border <table border= x > x... Table Row <td>... </td><td>... </td> 1 td Table Data 1 2 1-1 1-2 1-3 2-1 2-2 2-3 HTML <table border= 1 > <td>1-1</td><td>1-2</td><td>1-3</td> <td>2-1</td><td>2-2</td><td>2-3</td> </table> 2.5.2 td th th Table Header <caption> </caption> <table> align <caption align= xxx > xxx align alignment [top, bottom, left, right] 4 top HTML <table border= 1 > ( ) <caption align= bottom > </caption> 150 1,200 <th> </th><th> ( )</th> <td> </td><td>150</td> <td> </td><td>1,200</td> </table> 9
2.5.3 td colspan <td colspan= x > x align <td align= xxx > xxx [left,center,right] 3 center valign <td valign= xxx > xxx [top,middle,bottom] 3 middle HTML <table border= 1 > <caption align= top > </caption> 200 <th colspan= 2 align= center > </th> 1,200 <td> </td><td>200</td> <td> </td><td>1,200</td> </table> td rowspan <td rowspan= x > x align valign HTML <table border= 1 > <caption align= top > </caption> <th rowspan= 3 valign= middle > </th><td> </td> <td> </td> <td> </td> </table> 10
2.5.1 2.5.2 2.5.3 ( ) 150 1,200 1,500 80 70 200 1 2.6 HTML jpg gif png jpg Joint 2.6.1 Photographic Experts Group( ) gif Graphic Interchange Format body background <body background= > png Portable Network Graphics image_sample.html bgimage.jpg body./../ <body background=./bgimage.jpg > body bgcolor RGB(Red Green Blue) 3 2 16 16 0 9,a f 16 RGB ff0000 00ff00 0000ff ff00ff ffff00 ffffff 000000 2.6.2 img img 11
src border alt sample1.jpg <img src=./sample1.jpg alt= 1 > sample2.jpg image <img src=./image/sample2.jpg alt= 2 > 2.7 web a a anchor a href target web 2.7.1 web <a href= web URL target= xxx > </a> URL Uniform Resource Locator xxx blank self top parent <a href= http://www.hs.cuc.ac.jp/ target= _blank > </a> web web target= blank 12
2.8 form web form web method action web get post 2.8.1 input input type type text button radio checkbox password hidden reset submit form action 2.8.1 1. form.html 2. title 3. form 4. input type 2.8.2 textarea textarea syntax( ) <textarea rows= cols= > </textarea> 13
2.8.3 select select option syntax( ) <select> <option> </option> <option> </option> <option> </option> </select> form,input,textarea,select name id name web id DOM Document Object Model 2 3 DOM 3.1 DOM DOM W3C What is the Document Object Model? The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. DOM? DOM DOM W3C web DOM DOM web DOM 14
3.2 DOM+JavaScript JavaScript HTML HTML syntax( ) DOM 3.2.1 ID DOM DOM ID JavaScript getelementbyid( ID ) web 3.2.1 <html> <head> <script> function chtext() { // var result_area = document.getelementbyid( uname ); 3.2.1 // var inputdata = document.getelementbyid( input_name ).value; // result_area.innerhtml = inputdata; } </script> <title>id DOM </title> </head> <body> <span id= uname > </span> <hr/> <form> <input type= text value= id= input_name name= input_name /> <input type= button value= onclick= chtext(); /> </form> </body> </html> 15