Chapter 1 ภาษา HTML 1_4p.pdf · 2018-01-08 · ธีระยุทธ...

ธระยทธ ทองเครอ

ภาษา HTMLChapter 1

HTML: Hyper text Markup Language• HTML คอ ภาษาทใชจดโครงสรางของหนาเวบ

• ปจจบนเปน Version 5.2

• ภาษา HTML ใชวธการแทก หรอ กากบ (Markup) สวนตาง ๆ ของหนาเวบ เพอกาหนดโครงสรางเวบ เชน สวนหว สวนเนอหา สวนรายการ

2

แทก (Tag)• Tag ใชในการแบงโครงสรางเอกสารออกจากเนอหา• Tag จะอยภายใตเครองหมาย < > เชน <body>• Tag ทมเนอหาจะประกอบดวย Tag เปด และ Tag ปด• รปแบบของ Tag

<tag> content </tag>

3

แทก (Tag)• เนอหาทถกกากบดวย Tag จะแสดงผลบน Browser ตามมาตรฐานภาษา HTML

<b>Web Programming</b>

• Tag ทไมมเนอหา จะไมม Tag ปด เรยกวา "Empty Tag" Responsive Design<br> by CSS

4

แทก b คอ bold หมายถง กากบใหเนอหาสวนนแสดงผลดวยตวหนา

กาหนดวาใหขนบรรทดใหม

แทก (Tag)• Tag สามารถเขยนซอนกนได

<p>Web <b>Programming</b></p>

หรอ

5

<p>Web <b>Programming</b>

</p>

แอตทรบวต (Attr ibute)• Attribute คอ สวนทใชระบคาอธบายเพมเตมใหกบ Tag ซงประกอบดวย– Attribute Name คอ ชอคณสมบต– Attribute Value คอ คาของคณสมบต อยภายใต "…" หรอ ' … '

<img src="header.jpg">

6

Attribute Name Attribute Value

อลเมนต (Element)• Element คอ การกาหนดคาสงในภาษา HTML ซงประกอบดวย Tag, Attribute และเนอหา ซงอาจจะมทง 3 สวนหรอไมครบกได

<div id="p1" class="red-alert">Web Programming</div>

7

1 Element

tag เปด

attribute เนอหา

tag ปด

HTML เปน case-insensitive• คาสงในภาษา HTML จะใชตวพมพเลก หรอตวพมพใหญ กได

<br> หรอ <BR> หรอ <Br>

• ใชชอ Tag เปนตวพมพเลกทงหมด ชวยใหอานงาย

8

จะเขยนเวบตองมอะไรบาง• Text Editor

– Notepad, Sublime, Atom, Visual Studio Code• Web browser ใชทดสอบเวบ

– Chrome, Edge, Firefox, Safari, IE• คมอภาษา HTML (HTML reference) เชน

– https://developer.mozilla.org/en/docs/Web/HTML/Element• Software ตางๆ เชน PhotoShop, FileZilla

9

โครงสรางของเวบ 1 หนา

10

html

head

title, meta, script

body

Tag และเนอหาตางๆ

กาหนดขอมลทเกยวของกบเวบจะทางานกอนการแสดงผลเสมอ

สวนแสดงผลหนาเวบทงหมด

ตวอยาง

11

ระบชนดของไฟล หรอเอกสาร

<!doctype html><html>

<head><title>Hello</title>

</head><body>

<b>Web Application Development</b></body>

</html>

กจกรรม• เปดโปรแกรม NotePad• พมพคาสง HTML• บนทกไฟลเปน "test.html" • ดบเบลคลกทชอไฟล เบราวเซอรจะถกเปดและแสดงผลลพธของเอกสาร HTML

12

<head> Element• <head> คอ Element ทบรรจ

– สวนของโคดโปรแกรม หรอ Script– คาสงในการให browser ไปหาไฟลรปแบบ (style sheets)– เตรยมขอมลเพมเตมของเอกสาร HTML (Meta Information)

• แทกทอยภายใต <head> ไดแก <title>, <style>, <meta>, <link>, <script>

13

<title> Element• ใชแทก <title> ในการนยามชอ Tab บน browser

• ขอความทอยภายในแทก title จะถกใชเปน– ชอเรยกบน Bookmark– หวขอในผลลพธของ Search Engine

14

<meta> Element• Metadata คอ ขอมลทอธบายขอมล (Information about data)• แทก <meta> จะไมแสดงผลใดๆ ใหคนเหน แตมเปาหมายเพอใหเครองหรอโปรแกรมอานเทานน

• ใชในการเขยนคาอธบาย, กาหนด keyword, กาหนดชอผเขยนเวบ, วนทปรบปรง,

• Metadata จะถกใชโดย browser หรอ Search Engines• แทก <meta> จะอยในสวน <head> เทานน

15

ตวอยางการใช <meta>• กาหนด Keyword

<meta name="keywords" content="เดกภาคคอม, cs kku,ขอนแกน">• กาหนดคาอธบาย

<meta name="description" content="เดกภาคคอมคณะอะไรซกอยาง ม.ขอนแกน">• กาหนดชอผสรางเวบ

<meta name="author" content="บญหลาย">• กาหนดใหมการรโหลดหนาใหมทกๆกวนาท

<meta http-equiv="refresh" content="30">16

ขอมลทถกดงไปแสดงบน Search Engine

17

Character Sets• การแสดงผลขอความบนเวบจะแสดงไดถกตองเมอ Browser รจกชดของอกขระ (Character Sets)

• Character Sets ในปจจบน เชน – UTF-8 รองรบทกภาษาทวโลก– TIS-620 รองรบเฉพาะภาษาไทย

• ตวอยางการกาหนด Character Sets <meta charset="UTF-8">

18

Comment• การใสคาอธบายใหกบสวนตางๆของเอกสาร จะชวยใหงายตอความเขาใจ มรปแบบดงน



• สามารถใสไดในทกสวนของเอกสาร HTML

• Browser จะไมนาสวนนไปแสดงผล19

หวขอ• การกาหนดหวขอจะใช <h1> ถง <h6>

• ใช Heading ในการกาหนดโครงสรางหวขอภายในเวบตามลาดบความสาคญ <h1> สาคญทสด <h6> นอยทสด

• ไมควรใชเพอขยายขนาดตวอกษร เพราะ Search Engine จะใชแทก Heading ในการทาดชน (Indexing)

20

Paragraph• ยอหนานยามดวย <p>

21

Line Break• ใชแทก <br> ในการขนบรรทดใหม

22

รปแบบตวอกษร• ตวหนา ใช <b> หรอ <strong>• ตวเอยง ใช <i> หรอ <em>• ตวหอย ใช <sub>, ยกกาลง ใช <sup>

23

Character Entity• Character Entity คอ คาสงทใชในการแสดงอกขระทไมมใน

แปนพมพ หรออกขระทถกนาไปใชเปนคาสงใน HTML แลว เชน < >

• การแสดงอกขระเหลานบนหนาเวบ จะใช Character Entity ซงมรปแบบ ดงน

&entity_name; หรอ &#entity_number;เชน < หรอ < แทนเครองหมาย <

© หรอ © แทนเครองหมาย ©

http://dev.w3.org/html5/html-author/charref 24

ชองวางในเอกสาร HTML• การใช Space, Tab, Enter ในโคด HTML จะไมทาใหแสดงผลบน Browser เปนไปตามนน เชน

บนเอกสารใช Hello World ผลลพธบน Browser Hello World

• หากตองการใช Enter จะตองใชคาสง <br> เชนบนเอกสารใช Hello<br> Worldผลลพธบน Browser Hello

World• หากตองการใช Space จะตองใชคาสง เชน

บนเอกสารใช Hello Worldผลลพธบน Browser Hello World

25

การบงคบใหแสดงชองวางตามทกาหนด

26

Unordered List• Unordered List คอ List ทไมมการกาหนดลาดบ จะครอบดวยแทก <ul> โดยอธบายแตละรายการดวยแทก <li>

27

Ordered List• Ordered List คอ List ทมการกาหนดลาดบ จะครอบดวยแทก <ol> โดยอธบายแตละรายการดวยแทก <li>

28

Descr iption List• Description List คอ List จากดความ มกถกนามาใชในการจากดความ เชน ในพจนานกรม รปแบบ List แบงออกเปน 2 สวน สวนแรก คอ คาศพท (Term) ใช <dt> สวนทสองคอคาจากดความ ใช <dd> โดยทงหมดจะครอบดวยแทก <dl>

29

List ซอน List

30

กจกรรม• จงสรางรายการทมรปแบบดงน

31

ตาราง• ใช <table> ในการกาหนดตาราง• ตารางจะแบงออกเปน แถว (แทก <tr>) ในแถวจะแบงเปนคอลมน (แทก <td>)

• แทก <td> คอ ขอมล 1 ชอง• ขอมลใน <td> จะเปนตวอกษร, ภาพ, Link, ฟอรมกได

32

ตวอยางตาราง

<table border="1"><tr>

<td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr>


</tr></table>

33

- ถาไมมการกาหนด Attribute border ตารางจะไมมกรอบ- Attribute border ถกยกเลกใชแลว ใน HTML version 5

การกาหนดหวตาราง• ใชแทก <th> ในการกาหนดแถวทเปนหวของตาราง• Browser จะแสดงขอมลในแทก <th> เปนตวหนา และอยกงกลางเซลล

34


<th>Header 1</th><th>Header 2</th>

</tr><tr>


</tr><tr>


</tr></table>

การผสานเซลลในตาราง• การผสานในแนวนอนใช Attribute colspan• การผสานในแนวตงใช Attribute rowspan

35


<th>Name</th><th colspan="2">Telephone</th>

</tr><tr>

<td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>

</tr></table>


<th>First Name:</th><td>Bill Gates</td>

</tr><tr>

<th rowspan="2">Telephone:</th><td>555 77 854</td>

</tr><tr>

<td>555 77 855</td></tr></table>

กจกรรม• จงสรางตารางทมรปแบบดงน

36

รปภาพ• รปแบบ

<img src="url หรอ ชอไฟล" width="ความกวางภาพ" height="ความสงภาพ">

• ตวอยาง<img src="smiley.gif" width="32" height="32">

37

ระบชอไฟลภาพ หรออางองเปน URL

ระบความกวางและความยาวสามารถกาหนดเพยงคาใดคาหนงกได

ชนดของไฟลภาพสาหรบเวบ• .gif สามารถใชสไดสงสด 256 ส ภาพทมจานวนสนอยขนาดไฟลจะยงเลกไปดวย เหมาะกบ การตน โลโกตางๆ ทมสไมมากนก และเหมาะกบการทา Animation

• .png ปรบปรงขอจากดของไฟล .gif ในหลายดาน เชน เพมจานวนส ลดขนาดไฟล

• .jpg หรอชนด Jpeg สามารถแสดงสไดสงสด 16.7 ลานส มการบบอดเพอลดขนาดภาพ เหมาะกบภาพถายทวไป

38

แหลงรวมไฟลภาพ• https://www.pexels.com

• https://stocksnap.io

• https://unsplash.com

• http://www.gratisography.com39

วดโอ• ไฟลวดโอทสามารถทางานบน browser ไดแก MP4, WebMและ OGV

• การแทรกวดโอบนหนาเวบ<video src="podcast.mp4" width="320" height="240" controls></video>

40

Attr ibute ของ <video> ชอ Attribute คา Attribute คาอธบายsrc URL ระบตาแหนงของไฟลวดโอautoplay กาหนดใหวดโอเลนเมอเปดหนาเวบcontrols แสดงปมควบคมการเลนวดโอheight pixels กาหนดความสงของวดโอwidth pixels กาหนดความกวางของวดโอloop กาหนดใหเลนซ าเมอเลนวดโอจบแลวmuted กาหนดใหปดเสยงposter URL ระบตาแหนงของภาพทจะนามาแสดงขณะทกาลงโหลดวดโอ หรอจนกระทง

ผใชคลกปม Playpreload auto, metadata,

noneกาหนดการเรมตนโหลดวดโอauto - ใหดาวนโหลดวดโอทนททมการเขาหนาเวบmetadata – ดาวนโหลดเฉพาะขอมลเกยวกบวดโอ เชน ระยะเวลา เฟรมแรกnone – ไมตองดาวนโหลด จนกวาผใชจะเรมด

41

การกาหนดวดโอทางเลอกสารอง• การรองรบชนดวดโอของแตละ Browser ไมเหมอนกน ดงนนจง

ควรใชแทก <source> เพอกาหนดวดโอชนดตางๆ โดยเมอเปดดวย Browser ใดทไมรองรบจะคนหาวดโอในแทก <source> ตามลาดบ

<video controls><source src="podcast.mp4" type="video/mp4"><source src="podcast.webm" type="video/webm"><source src="podcast.ogv" type="video/ogg">

</video>

42

แหลงรวมไฟลวดโอ• https://videos.pexels.com

• https://pixabay.com

43

เสยง• ไฟลเสยงทสามารถทางานบน browser ไดแก MP3, WAV และ OGG

• การแทรกเสยงบนหนาเวบ<audio src="song.mp3" controls></audio>

44

Attr ibute ของ <audio> ชอ Attribute คา Attribute คาอธบายsrc URL ระบตาแหนงของไฟลเสยงautoplay กาหนดใหเลนเสยงเมอเปดหนาเวบcontrols แสดงปมควบคมการเลนเสยงloop กาหนดใหเลนซ าเมอเลนจบแลวmuted กาหนดใหปดเสยงpreload auto, metadata,

noneกาหนดการเรมตนโหลดเสยงauto - ใหดาวนโหลดทนททมการเขาหนาเวบmetadata – ดาวนโหลดเฉพาะขอมลเกยวกบเสยง เชน ระยะเวลาnone – ไมตองดาวนโหลด จนกวาผใชจะเรมด

45

การกาหนดไฟลเสยงทางเลอกสารอง

<audio controls><source src="song.mp3" type="audio/mp3"><source src="song.ogg" type="audio/ogg">

</audio>

46

<iframe> Element• การนาเวบเพจอนมาแสดงซอนในเวบเพจของตนเองจะใชแทก <iframe>

• กาหนดความกวางและสงดวย Attribute width และ height• ตวอยาง

<iframe src="https://www.kku.ac.th" width="500" height="200" frameborder="0"></iframe>

47

การแทรกคลปจาก YouTube• ตวอยาง

<iframe width="560" height="315" src="https://www.youtube.com/embed/MyWyvUje2Mw" frameborder="0" allowfullscreen></iframe>

48

ใช URL จาก YouTube ทตองการนามาแสดง

อนญาตใหดแบบเตมจอได

Hyper links (Links)• Hyperlinks คอ จดหนงบนเวบทสามารถคลก และเปดเวบในหนาท

ตองการเชอมโยง

• ใชแทก <a> ในการกากบสวนทตองการใหผใชคลกได

• แทก <a>….</a> จะครอบขอความ หรอรปภาพกได

• สวนทครอบดวยแทก <a> ตวชจะเปลยนจากลกศรเปนรปมอแทน49

Hyper links (Links)• รปแบบ

<a href="url หรอ ชอไฟล">Link text</a>

• ตวอยาง<a href="http://www.cs.kku.ac.th">Computer Science KKU</a><a href="detail.html">More…</a><a href="myPhoto.jpg">My Photo</a><a href="gallery.zip">Download</a>

50

ระบปลายทาง ขอความหรอภาพ

Hyper links (Links)• กาหนดวธการเปด Link ดวย Attribute target

<a href="http://www.cs.kku.ac.th" target="_blank">CS KKU</a>

• _blank คอ การเปด Link ทระบบน Tab ใหม• กรณทไมมการกาหนด Attribute target จะเปดทหนาเดม

51

การสราง Link ดวยรปภาพ• ใชแทก <img> ซอนภายใตแทก <a>

<a href="http://www.google.com"><img src="google.jpg"></a>

52

ชนดของ URL• Absolute URL - URL แบบเตม ใชในการอางองหนาเวบภายนอก

• Relative URL - URL แบบยอ ใชในการอางองหนาเวบทอยภายในเวบไซตตวเอง

53

http://www.cs.kku.ac.th/comsc/index.php

/comsc/index.php

การอางองไฟลดวย Relative URL• การอางไฟลภาพดวยแทก <img> และ Link ไปยงไฟล html ดวยแทก <a> จากหนาเวบปจจบนไปยงไฟลทอยในเวบไซตเดยวกน ไมควรอางองโดยใช URL เตม แตควรใช Relative URL แทน

• ประโยชนของ Relative URL– สน เพราะไมตองอางอง path ทงหมด– เมอมการเปลยน domain ไมตองตามไปแกไขทงหมด– ทดสอบการทางานไดแมไมไดอยบนอนเทอรเนต

54

การอางองไฟลดวย Relative URLขนตนดวย ความหมาย คาอธบาย ตวอยาง./ Current Folder* ไปยงตาแหนงโฟลเดอรปจจบน ./image/dog.jpg../ Parent Folder ออกจากโฟลเดอรปจจบนไปยงโฟลเดอรแม ../project/chart.png/ Root Folder เปนตวแทนของโฟลเดอรระดบบนสด หรอ

เปนตวแทนของชอ domain/index.html

55

* การใช ./ มคาเทากบการไมใชอะไรเลย เชน ./image/dog.jpg สามารถเขยนเปน image/dog.jpg กได

ตวอยางRelative URL

ไฟลทหนาเวบ E ลงคไปยง D

<a href="contact.html">

ไฟลทหนาเวบ E ดงภาพ C

<img src="image/logo.jpg">

ไฟลทหนาเวบ A ลงคไปยง B

<a href="../profile.html">

ไฟลทหนาเวบ A ลงคไปยง D

<a href="../../contact.html">

ไฟลทหนาเวบ B ดงภาพ C

<img src="../image/logo.jpg">

56

ตวอยาง

57K

AB

C

DE

GF

HI

J

Relative URLC ลงคไปยง A final_project/page1.htmlG ลงคไปยง A SkyJohn/final_project/page1.htmlC ลงคไปยง G ../index.htmlH ลงคไปยง J ../../index.htmlJ ดงภาพ E ../dayclass/SmithMary/images/picture.jpgC ดงภาพ E ../SmithMary/images/photo.jpeg

กจกรรม

58K

AB

C

DE

GF

HI

J

Relative URLG ลงคไปยงหนา FF แสดงภาพ D บนเวบH ลงคไปยงหนา BK แสดงภาพ E บนเวบH ลงคไปยงหนา K

กจกรรม• download "ไฟลประกอบแลป 1.1" ทเวบวชา

• Extract ไฟลไวท Desktop

• เปดไฟล index.html ภายในจะมโจทยใหทาเกยวกบการอางอง Relative Path

59

กจกรรม• สมคร Server/Host ฟร เชน https://th.000webhost.com• download "ไฟลประกอบแลป 1.2" ทเวบวชา• Extract ไฟลไวท Desktop • Upload ขน Server ฟรทฝากไว

60

กจกรรม• จงเขยน URL ของไฟลท Upload ขน Server โดยเขยนไฟลทจด B

ถง D ซงสามารถทดสอบความถกตองดวยการเปดบนเบราวเซอร

61

http://[โดเมนทสมคร]/about/company/service.html

http://[โดเมนทสมคร]/index.html

โฟลเดอรยอย

ไฟลทเกบในโฟลเดอร

URL สาหรบเขาถงไฟลนบน Web Server

โฟลเดอรระดบบนสดบน Web Server

แบบฟอรมบนเวบ• แบบฟอรม คอ การรบขอมลจากผใชผานหนาเวบ เพอสงไปยง Web Server

62

HTML Form• เวบเพจแตละหนาจะมกฟอรมกได แตในแตละฟอรมจะตองครอบดวย <form> แยกสวนกน

<form>

</form>

63

Text Field• <input type="text"> ใชในการรบ input ขอความแบบบรรทดเดยว

64

Submit Button• Submit Button คอ ปมสาหรบสงใหเรมสงขอมลทผใชกรอกหรอเลอกในแบบฟอรมไปยง Server โดยไฟลทคอยรบขอมลทอยบน Server จะระบไวใน Attribute action

65

Button• Button คอ ปมทวไปทใชในการกาหนดใหทางานเมอมการใชเมาสคลกทปม

66

Password• <input type="password"> ใชในการรบ input ทเปน

password

67

email• <input type="email"> ใชในการรบขอมลทอยในรปแบบอเมลเทานน

68

URL• <input type="url"> ใชในการรบขอมลทอยในรปแบบ URLเทานน

69

Number• <input type="number"> ใชในการรบขอมลทเปนตวเลขเทานน ประกอบดวย Attribute ดงน

max - คาสงสด min - คาตาสดstep - ชวงหางแตละคา

70

Radio Buttons• <input type="radio"> ใชในการรบ input แบบตวเลอกอยางใดอยางหนง ซงเรยกวา radio button

71

Checkbox• <input type="checkbox"> ใชในการรบ input แบบตวเลอกซงมการเลอกตงแต 0 ตวเลอกขนไป

72

File• <input type="file"> ใชในการรบ input ทเปนไฟล

73

Drop-Down List• Drop-Down List คอ การแสดงรายการใหผใชเลอก

74

การจดกลม Drop-Down List• ใช <optgroup> ในการกาหนดชอกลมทอยในรายการของ

Drop-Down List

75

Data List• ใชในการแสดงรายการทอยในรปแบบ Text Field โดยจะแสดงรายการเมอผใชใสตวอกษรทตรงตามรายการทมอย ซงการทางานสวนนจะเปนแบบเดยวกบ autocomplete

76

Textarea• ใชในการรบ input ขอความแบบหลายบรรทด

77

Range• ใชในการรบคาตวเลข โดยวธเลอนเลอกตามชวงทกาหนด• Attribute ทเกยวของ

max - คาสงสด, min - คาตาสดstep - ชวงหางแตละคาvalue – คาเรมตน

78

Color• ใชในการรบคาส โดยใหผใชเลอกสทตองการ

79

Date• ใชในการรบคาวนท โดยใหผใชเลอกวนทตองการจากปฏทน

80

Fieldset• Fieldset คอ การจดกลมของ input ตางๆ ดวยการตกรอบและเขยนคาอธบาย

81

Attr ibute ทใชใน <form> และ <input>• required• placeholder• autocomplete• novalidate• autofocus• multiple

82

required• กาหนดใหตองกรอก หรอตองเลอก input นน

83

placeholder• แสดงคาอธบายใหกบ Text Field ชนดตางๆ

84

autocomplete• ใชในการระบใน <form> หรอ <input> เพอเปดหรอปด

autocomplete

<form autocomplete=" on" >First name:<input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>E-mail: <input type="email" name="email" autocomplete=" off" ><br><input type="submit">

</form>

85

novalidate• ใชในการปดตรวจสอบคาในฟอรมทงหมด

<form novalidate>E-mail: <input type="email" name="user_email"><input type="submit">

</form>

86

autofocus• กาหนดให Focus ไปท Input

First name: <input type="text" name="fname" autofocus>

87

multiple• กาหนดให File หรอ Email สามารถกรอกหรอเลอกไดหลายคา

<form>Select images: <input type="file" name="img" multiple=" multiple" ><input type="email" multiple><input type="submit">

</form>88

89

การกาหนดรปแบบของ input• ใช attribute pattern เพอกาหนดรปแบบของ input ซงจะใช

Regular Expression ในการกาหนด

90

Regular Expression• Regular Expression เรยกยอๆวา Regex คอ ประโยคสญลกษณทใชระบรปแบบ (Pattern) ทตองการ

• ประโยชนของ Regular Expression เชน– ตรวจสอบ input จากผใช วาถกตองตามตองการหรอไม เชน เบอรโทรศพท รหสไปรษณย

– ตรวจสอบวาขอความนนมคาสง HTML ปะปนมาดวยหรอไม

91

Literal Characters• Pattern กาหนดใหเปนตวอกษรตามทตองการเทานน

92

Regex :isInput :thisRegex :isInput :is

Regex :KKInput :kK

Regex :KKInput :KK

- ไมถกตองตามกฎ

- ถกตองตามกฎ

อกขระพเศษ• อกขระทสงวนสาหรบการเขยนกฎ regex จะตองนาหนาดวยเครองหมาย \

93

Regex :1\+1=2Input :1+1=2Regex :1+1=2Input :1+1=2

Per iod• สญลกษณจด . แทนอกขระ 1 ตว

94

Regex :a.boyInput :aboyRegex :a.boyInput :aboy

Character Classes• Character Classes คอ การ Match กบอกขระตวใดตวหนงทอยภายในเครองหมาย [ ]

95

Regex :[Gg]r[ae]yInput :GrayRegex :[Gg]r[ae]yInput :Ggry

Regex :[Gg]r[ae]yInput :greyRegex :[Gg]r[ae]yInput :rey

Character Classes• ใชเครองหมายลบ – ภายในเครองหมาย [ ] เพอกาหนดชวง

96

Regex :[0‐9a‐fA‐F]Input :A

Regex :[0‐9a‐fA‐F]Input :0a

Regex :cus[0‐9]Input :cus1Regex :cus[0‐9]Input :cus

Character Classes• ใช [^ ] เพอ Match กลมคาทไมตองการใหมในขอความ

97

Regex :q[^u]Input :qiRegex :q[^u]Input :qu

Shor thand Character Classes• การกาหนดรปแบบของ Character Classes อาจใชสญลกษณอนได

\d – แทน [0-9]\w – แทน [A-Za-z0-9_]\s – แทน whitespace หรอ [ \t\r\n] (space, tab, CR, LF)

98

Regex :\d\s\wInput :1a Regex :\d\s\w

Input :1a3

Shor thand Character Classes• การกาหนดรปแบบของ Character Classes อาจใชสญลกษณอนได

\D – แทน [^\d]\W – แทน [^\w]\S – แทน non-whitespace หรอ [^\s]

99

Regex :\D\D\dInput :mp3 Regex :\D\D\d

Input :k25

Repetition• ใชสญลกษณ * เพอบอกจานวนอกขระวามไดตงแต 0 ตวขนไป

100

Regex :[A‐Za‐z][A‐Za‐z0‐9]*5Input :Html5Regex :[A‐Za‐z][A‐Za‐z0‐9]*5Input :Html57

Repetition• ใชสญลกษณ + เพอบอกจานวนอกขระวาตองมตงแต 1 ตวขนไป

101

Regex :[A‐Za‐z][A‐Za‐z0‐9]+Input :h1Regex :[A‐Za‐z][A‐Za‐z0‐9]+Input :h

Repetition• ใชสญลกษณ ? เพอบอกจานวนอกขระวามไดเพยง 0 ตว หรอ 1 ตวเทานน

102

Regex :[A‐Za‐z][A‐Za‐z0‐9]?Input :iRegex :[A‐Za‐z][A‐Za‐z0‐9]?Input :Hat

Anchors• ใช ^ เพอ Match โดยเรมจากจดเรมตนของขอความ

103

Regex :^vacInput :vacationRegex :^vacInput :evacuation

Anchors• ใช $ เพอ Match โดยเรมจากจดสนสดของขอความ

104

Regex :$tionInput :evacuation

Regex :$tionInput :national

Alternation• ใช | คนขอความ 2 ขอความขนไป เมอมตวเลอก Matchหลายตว

105

Regex :(cat|dog)+Input :dogRegex :(cat|dog)+Input :catastrophe

Limiting Repetition• กาหนดจานวนการเกดอกขระดวย { }

106

Regex :\d{2,4}Input :111Regex :\d{2,4}Input :1

Regex :\w{2,}Input :youRegex :\w{2,}Input :y

Regex :\w{3}Input :ratRegex :\w{3}Input :bigga

จงเขยน Regex ตามรปแบบทกาหนด

รปแบบทตองการ Regex

เปนสระในภาษาองกฤษเทานน และมได 3 ตว

ขนตนดวยตวพมพใหญตวแรก ทเหลอเปนตวอกษรพมพเลกตงแต 1 ตวขนไป

ขนตนดวย ord หรอ order ลงทายดวยตวเลข 5 ตว

เปนคาวา frog หรอ blog หรอ clog เทานน

107

จงเขยนขอความทถกตองตามกฎ RegexRegex ตวอยางขอความทถกตองตามกฎ

ABC[A-Z][0-9][09][0][9][A-Z][a-z]…[0-9A-Z].555

108

Chapter 1 ภาษา HTML 1_4p.pdf · 2018-01-08 · ธีระยุทธ...

Documents

Transcript of Chapter 1 ภาษา HTML 1_4p.pdf · 2018-01-08 · ธีระยุทธ...