chapter 1 ภาษา html 1.pdf · 2018-01-08 · • ปัจจุบันเป็น...
TRANSCRIPT
ธระยทธ ทองเครอ
ภาษา HTMLChapter 1
HTML: Hypertext 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>
แอตทรบวต (Attribute)• 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
Description 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
Attribute ของ <video> ชอ Attribute คา Attribute ค าอธบาย
src URL ระบต าแหนงของไฟลวดโอ
autoplay ก าหนดใหวดโอเลนเมอเปดหนาเวบ
controls แสดงปมควบคมการเลนวดโอ
height pixels ก าหนดความสงของวดโอ
width pixels ก าหนดความกวางของวดโอ
loop ก าหนดใหเลนซ าเมอเลนวดโอจบแลว
muted ก าหนดใหปดเสยง
poster URL ระบต าแหนงของภาพทจะน ามาแสดงขณะทก าลงโหลดวดโอ หรอจนกระทงผใชคลกปม Play
preload 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
Attribute ของ <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 ทตองการน ามาแสดง
อนญาตใหดแบบเตมจอได
Hyperlinks (Links)• Hyperlinks คอ จดหนงบนเวบทสามารถคลก และเปดเวบในหนาท
ตองการเชอมโยง
• ใชแทก <a> ในการก ากบสวนทตองการใหผใชคลกได
• แทก <a>….</a> จะครอบขอความ หรอรปภาพกได
• สวนทครอบดวยแทก <a> ตวชจะเปลยนจากลกศรเปนรปมอแทน49
Hyperlinks (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
ระบปลายทาง ขอความหรอภาพ
Hyperlinks (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
A
B
C
D
E
ตวอยาง
57K
A
B
C
D
E
GF
H
IJ
Relative URL
C ลงคไปยง A final_project/page1.html
G ลงคไปยง A SkyJohn/final_project/page1.html
C ลงคไปยง G ../index.html
H ลงคไปยง J ../../index.html
J ดงภาพ E ../dayclass/SmithMary/images/picture.jpg
C ดงภาพ E ../SmithMary/images/photo.jpeg
กจกรรม
58K
A
B
C
D
E
GF
H
IJ
Relative URL
G ลงคไปยงหนา F
F แสดงภาพ D บนเวบ
H ลงคไปยงหนา B
K แสดงภาพ 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
A
B
C
D
E
กจกรรม• จงเขยน 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
Attribute ทใชใน <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 : is
Input : this
Regex : is
Input : is
Regex : KK
Input : kK
Regex : KK
Input : KK
- ไมถกตองตามกฎ
- ถกตองตามกฎ
อกขระพเศษ• อกขระทสงวนส าหรบการเขยนกฎ regex จะตองน าหนาดวยเครองหมาย \
93
Regex : 1\+1=2
Input : 1+1=2
Regex : 1+1=2
Input : 1+1=2
Period• สญลกษณจด . แทนอกขระ 1 ตว
94
Regex : a.boy
Input : a boy
Regex : a.boy
Input : aboy
Character Classes• Character Classes คอ การ Match กบอกขระตวใดตวหนงทอยภายในเครองหมาย [ ]
95
Regex : [Gg]r[ae]y
Input : Gray
Regex : [Gg]r[ae]y
Input : Ggry
Regex : [Gg]r[ae]y
Input : grey
Regex : [Gg]r[ae]y
Input : rey
Character Classes• ใชเครองหมายลบ – ภายในเครองหมาย [ ] เพอก าหนดชวง
96
Regex : [0-9a-fA-F]
Input : A
Regex : [0-9a-fA-F]
Input : 0a
Regex : cus[0-9]
Input : cus1
Regex : cus[0-9]
Input : cus
Character Classes• ใช [^ ] เพอ Match กลมค าทไมตองการใหมในขอความ
97
Regex : q[^u]
Input : qi
Regex : q[^u]
Input : qu
Shorthand 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\w
Input : 1 a
Regex : \d\s\w
Input : 1 a3
Shorthand Character Classes• การก าหนดรปแบบของ Character Classes อาจใชสญลกษณอนได
\D – แทน [^\d]\W – แทน [^\w]\S – แทน non-whitespace หรอ [^\s]
99
Regex : \D\D\d
Input : mp3
Regex : \D\D\d
Input : k25
Repetition• ใชสญลกษณ * เพอบอกจ านวนอกขระวามไดตงแต 0 ตวขนไป
100
Regex : [A-Za-z][A-Za-z0-9]*5
Input : Html5
Regex : [A-Za-z][A-Za-z0-9]*5
Input : Html57
Repetition• ใชสญลกษณ + เพอบอกจ านวนอกขระวาตองมตงแต 1 ตวขนไป
101
Regex : [A-Za-z][A-Za-z0-9]+
Input : h1
Regex : [A-Za-z][A-Za-z0-9]+
Input : h
Repetition• ใชสญลกษณ ? เพอบอกจ านวนอกขระวามไดเพยง 0 ตว หรอ 1 ตวเทานน
102
Regex : [A-Za-z][A-Za-z0-9]?
Input : i
Regex : [A-Za-z][A-Za-z0-9]?
Input : Hat
Anchors• ใช ^ เพอ Match โดยเรมจากจดเรมตนของขอความ
103
Regex : ^vac
Input : vacation
Regex : ^vac
Input : evacuation
Anchors• ใช $ เพอ Match โดยเรมจากจดสนสดของขอความ
104
Regex : $tion
Input : evacuation
Regex : $tion
Input : national
Alternation• ใช | คนขอความ 2 ขอความขนไป เมอมตวเลอก Matchหลายตว
105
Regex : (cat|dog)+
Input : dog
Regex : (cat|dog)+
Input : catastrophe
Limiting Repetition• ก าหนดจ านวนการเกดอกขระดวย { }
106
Regex : \d{2,4}
Input : 111
Regex : \d{2,4}
Input : 1
Regex : \w{2,}
Input : you
Regex : \w{2,}
Input : y
Regex : \w{3}
Input : rat
Regex : \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