ธระยทธ ทองเครอ
ภาษา 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• การใสคาอธบายใหกบสวนตางๆของเอกสาร จะชวยใหงายตอความเขาใจ มรปแบบดงน
<!-- This is a 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>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
33
- ถาไมมการกาหนด Attribute border ตารางจะไมมกรอบ- Attribute border ถกยกเลกใชแลว ใน HTML version 5
การกาหนดหวตาราง• ใชแทก <th> ในการกาหนดแถวทเปนหวของตาราง• Browser จะแสดงขอมลในแทก <th> เปนตวหนา และอยกงกลางเซลล
34
<table border="1"><tr>
<th>Header 1</th><th>Header 2</th>
</tr><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
การผสานเซลลในตาราง• การผสานในแนวนอนใช Attribute colspan• การผสานในแนวตงใช Attribute rowspan
35
<table border="1"><tr>
<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>
<table border="1"><tr>
<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><!-- แทก input ตางๆ -->
</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