4 ก.ย. 2554 0 ความคิดเห็น

บทเรียนพิเศษ 39 Regular Expressions (3)

บทเรียนพิเศษ 39 Regular Expressions (3)

การจัดกลุ่ม
การจัดกลุ่มจะใช้วงเล็บเปิดและปิดคลุม ซึ่งให้ประโยชน์อยู่ 3 อย่างดังนี้
o    คุณสามารถใช้สัญลักษณ์ทำซ้ำกับกลุ่มที่จัดไว้
o    คุณสามารถใช้เงื่อนไข OR

                    ยกตัวอย่างของประโยชน์อันแรก เช่น หากคุณต้องการค้นหาคำว่า "Ha " ที่ซ้ำกัน 10 ครั้ง ก็ให้ใช้ว่า /(Ha ){10}/   เท่านี้ ก็ไม่ต้องพิมพ์ยืดยาวล่ะครับ


เงื่อนไข OR

                    ใน Reg จะใช้สัญลักษณ์ที่แทนเงื่อนไข หรือ(or) ด้วย | (ขีดตรงขีดเดียว) ซึ่งขอให้อย่าสับสนกับภาษาสคริปหลายๆภาษาที่ใช้ || (สองขีด) กับเงื่อนไขหรือ     ถ้าคุณต้องการค้นหาคำว่า "นาย " หรือ "นาง " หรือ "ด.ช. " ...จะเขียนได้ว่า /(นาย|นาง|ด.ช.)/g

                    ลองมาดูตัวอย่างที่ซับซ้อนขึ้นอีกระดับดีกว่าครับ กับ เลขหมายโทรศัพท์บ้านของกรุงเทพฯ ซึ่งอาจมีข้อมูลรูปแบบต่างๆ เช่น...
02-1234567
02 123-4567
02 1234567
123 4567
(02)123-4567

                    โอ้.. จะเขียน Reg อย่างไร ให้ครอบคลุมได้หมดเอ่ยๆ? เราสามารถใช้การจัดกลุ่มมาช่วยได้ครับ   เริ่มแรกนั้นเป็นรหัส 02 ซึ่งอาจจะอยู่ในวงเล็บหรือไม่ก็ได้ หรืออาจไม่มีรหัสนี้เลยก็ได้ ดังนั้นเราจะรวมส่วนนี้เป็นกลุ่มเดียว และใช้เครื่องหมาย ? กับทั้งวงเล็บเปิดและปิด ซึ่งหมายความว่าวงเล็บจะมีหรือไม่ก็ได้ ส่วนข้างหน้าวงเล็บนั้นจะมีเครื่องหมาย \   ใส่ไว้เพื่อบอกว่า วงเล็บนี้ไม่ใช่สัญลักษณ์จัดกลุ่มของ Reg (เหมือนที่ใช้ในจาวาสคริปที่การใส่เครื่องหมายคำพูดเข้าไปในเครื่องหมายคำพูดต้องมี \ นำหน้า)
/(\(?02\)?)?

                    และหลังรหัสอาจตามด้วยขีดหรือที่ว่างหรือไม่มีอะไร(ติดกัน) ซึ่งไม่จำเป็นต้องจัดกลุ่ม แต่เราก็จะทำ เพื่อให้โค้ดอ่านง่ายขึ้น
/(\(?02\)?)?(-| )?

                    หมายเลขอีก 7 หลัก ก็ไม่ยากแล้วล่ะครับ ก็มีสามหลักแรก และสี่หลักสุดท้ายที่อาจคั่นด้วยขีด ที่ว่าง หรือไม่มีอะไร
/(\(?02\)?)?(-| )?\d{3}(-| )?\d{4}/

                    นี่อาจดูเป็นสัตว์ประหลาดเต็มขั้น แต่มันเป็นอะไรที่ง่ายกว่ามากๆ เมื่อเทียบกับการเขียนโค้ดทดสอบเบอร์โทรศัพท์ที่เป็นไปได้ทั้งหมด   ถ้าคุณห่วงว่าเครื่องหมายขีด( - )อาจถูกคิดว่าเป็นสัญลักษณ์พิเศษของ Reg เนื่องจากอาจมีการส่งค่ากลับไปยังเซิร์ฟเวอร์ที่คุณไม่ทราบว่าใช้ภาษาอะไรในการแปรผล ซึ่งจะได้โค้ดทั้งหมดเป็น...
/(\(?02\)?)?(\-| )?\d{3}(\-| )?\d{4}/


คำสั่งต่างๆที่ใช้กับ Reg

                    มีสี่คำสั่งใช้กับ Reg ได้ ซึ่งสองคำสั่งแรกได้อธิบายไปแล้วในบทที่ 37 จึงไม่ขออธิบายสองคำสั่งแรกมากนักนะครับ
search()
          ใช้ค้นหาบางส่วนของข้อความหรือ Reg ว่ามีอยู่ในข้อความหนึ่งๆหรือเปล่า ถ้ามี ก็จะให้ค่าตำแหน่งเริ่มต้นที่พบ   หากไม่มี ก็จะให้ค่า -1

replace(... , ...)
          ใช้ค้นหาและแทนที่บางส่วนของข้อความ แต่จะไม่ได้เป็นการเปลี่ยนแปลงข้อความนั้น แต่จะเป็นเพียงการเก็บค่าไว้(ในรูปของตัวแปร) ก่อนที่คุณจะนำมาเรียกใช้ได้ 

split()
          มีการใช้คำสั่งนี้อยู่แล้วใน บทที่ 36 ซึ่งเป็นการใช้กับข้อความ(string) แต่ก็สามารถนำมาใช้กับ Reg ได้เช่นกันครับ มีประโยชน์มากหากนำมาใช้แยกส่วนข้อมูลที่มีรูปแบบซ้ำๆ เช่น ถ้ามีข้อมูลเป็นตัวเลขเป็นชุดๆที่มีช่องว่างหรือตัวหนังสือคั่นระหว่างชุดตัวเลข แล้วคุณต้องการแยกแต่ตัวเลขออกมาทั้งหมด(ซึ่งจะอยู่ในรูป Array) คุณอาจใช้คำสั่ง split(/[^\d]+/g)   ซึ่งใน Reg นี้ก็หมายถึงส่วนที่ไม่ใช่ตัวเลขครับ ซึ่งจะเป็นจุดที่แยกส่วนข้อมูลออกจากกัน

match()
          วิธีนี้จะค้นหาข้อมูลที่คุณต้องการ(ที่คุณใส่ไว้ในวงเล็บ) เมื่อค้นหาเจอ ก็จะเก็บค่าไว้เป็น Array ไว้ให้คุณเรียกใช้ได้ คล้ายๆคำสั่ง split() อย่างการเขียน Reg แทนเลขหมายโทรศัพท์ข้างบนนู้น คุณสามารถค้นหาและเก็บค่าเบอร์โทรศัพท์ทั้งหมด(ในรูป Array) ด้วยคำสั่ง match() ดังนี้...

a = /(\(?02\)?)?(\-| )?\d{3}(\-| )?\d{4}/
phoneArray = addrList.match(a)


                    การเปลี่ยนคำของทั้งบท ในหัวข้อพิเศษ 37 นั่นเป็นการใช้คำสั่ง replace กับทั้งหน้าครับ ซึ่งโค้ดจะเป็นแบบนี้...
<html><head>. . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .</head><body>
. . . . . . . . . . . . . . . . . . . . . . .
<button style="font-family:angsana new;font-size:20pt" onclick="alert('ขออภัยอย่างสูงครับ')
v=document.body.innerHTML.replace(/ครับ/gi,'โว้ย') document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ครับ" ทั้งหมดในหน้านี้เป็น "โว้ย"</button>

<button style="font-family:angsana new;font-size:20pt"
onclick="alert('ขออภัยอีกครั้งนะท่านผู้อ่าน ผมเพียงต้องการแสดงให้เห็นชัดเจน')
v=document.body.innerHTML.replace(/ผม/gi,'กู');document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ผม" ทั้งหมดในหน้านี้เป็น "กู"</button>

<button style="font-family:angsana new;font-size:20pt"
onclick="document.body.innerHTML=b">
ได้โปรดกดที่นี่ให้ทุกสิ่งทุกอย่างกลับเป็นดังเดิม</button>
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .</body>
<script>b=document.body.innerHTML</script></html>


                    
เขียนโดย suwit ที่ 12:56
0 ความคิดเห็น

บทเรียนพิเศษ 38 Regular Expressions (2)

บทเรียนพิเศษ 38 Regular Expressions (2)

สัญลักษณ์พิเศษต่างๆ
                    สัญลักษณ์พิเศษต่างๆ ของ Reg ช่วยให้คุณขยายขอบเขตของข้อความที่ต้องการค้นหาหรือแทนที่ได้ง่ายขึ้น โปรดอย่าคิดว่ามันเป็นตัวประหลาดหรือทำให้คุณยุ่งยากแต่อย่างใด เพราะมิเช่นนั้น มันจะเป็นอย่างนั้นจริงๆ(เอ๊ะ...ยังไง) สัญลักษณ์พิเศษต่างแบ่งออกได้เป็น 3 ประเภท
1.     สัญลักษณ์พิเศษที่ใช้แทนที่อักษรหรือสัญลักษณ์ตัวหนึ่งในข้อความ(string)
2.     สัญลักษณ์ที่ทำหน้าที่ทำซ้ำตัวอักษรหรือสัญลักษณ์
3.     สัญลักษณ์พิเศษที่ใช้ระบุตำแหน่งอักษรหรือสัญลักษณ์


1. สัญลักษณ์พิเศษที่ใช้แทนที่อักษรหรือสัญลักษณ์ตัวหนึ่งในข้อความ(string)
\d     หมายถึง เลขตัวใดตัวหนึ่งจาก 0 ถึง 9 สมมติว่าคุณต้องการค้นหาตัวเลข 100 ถึง 199 คุณสามารถเขียนเป็น Reg ว่า /1\d\d/

\D     หมายถึง ตัวอักษรหรือสิ่งที่ไม่ใช่ตัวเลข

\w     หมายถึง ตัวอักษรภาษาอังกฤษหรือตัวเลข และรวมถึงเครื่องหมายขีดล่าง( _ )

\W     หมายถึง ตัวอักษรไทยหรือที่ว่างหรือสัญลักษณ์ต่างๆซึ่งไม่ได้อยู่ใน \w

\s     หมายถึง ที่ว่าง(space) ซึ่งรวมถึง tabs และ carriage returns

\S     หมายถึง ตัวอักษร ตัวเลขหรือสัญลักษณ์ต่างๆ ซึ่งไม่ใช่ที่ว่าง

.     (จุด) หมายถึง ตัวอักษรหรือสัญลักษณ์ต่างๆหรือที่ว่าง (ครอบคลุมทุกสิ่งทุกอย่าง)

[...]     เป็น รูปแบบที่ใช้บอกค่าต่างๆที่อาจเป็นไปได้ในตำแหน่งนั้นๆ เช่น หากคุณใช้ /[กจสห]ด/g   นั่นจะหมายถึงคำว่า "กด" "จด" "สด" และ "หด"

[.-.]     เป็น รูปแบบที่ใช้บอกค่าต่างๆที่อาจเป็นไปได้ในตำแหน่งนั้นๆ โดยใช้ตัวอักษรหรือตัวเลขที่ครอบคลุมเป็นช่วงๆ เช่น หากคุณใช้ /[ก-ส]ด/g   นั่นจะหมายถึงคำว่า "กด" "จด" และ "สด"   (ทดสอบแล้วครับ เชื่อผมได้ ใช้ได้ทั้งกับตัวอักษรภาษาอังกฤษและตัวเลข)

[^...]     เป็น รูปแบบที่ใช้บอกการยกเว้นคำหรือสัญลักษณ์ต่างๆ เช่น หากคุณใช้ /[^ก-ส]ด/g   นั่นจะหมายถึงอะไรก็ได้ที่มี ด เด็ก ติดอยู่ แต่ ไม่ใช่ "กด" "จด" และ "สด"

                    ฝรั่งบอกว่าพวกนี้เป็นเพียงสัญลักษณ์พื้นฐานพิเศษพื้นฐาน แสดงว่า ต้องมีตัวประหลาดมากกว่านี้อีก ซึ่งถ้าคุณอยากรู้ก็ขอให้ไปหาเอาเองนะครับ ผมจะเป็นกำลังใจให้ ลองมาดูตัวอย่างการใช้กันครับ... สมมติว่าคุณต้องการค้นหารหัสประจำตัวนักศึกษา(เป็นเลข 8 หลัก)จากข้อมูลกลุ่มใหญ่กลุ่มหนึ่ง คุณก็อาจจะเขียน Reg ว่า... /\d\d\d\d\d\d\d\d/gi   ซึ่งมันยาวมากเลยใช่มั้ยครับ แล้วถ้าในข้อมูลดันมีเลข 10 หลักโผล่ออกมา ก็จะถูกรวมอยู่ในเลข 8 หลักที่ค้นเจอด้วย ซึ่งมันไม่ถูกน่ะครับ ...แต่เรามีวิธีช่วยให้การเขียนสั้นลงและมีความถูกต้องมากขึ้น ด้วยสัญลักษณ์พิเศษอีก 2 ประเภทที่เหลือ


2. สัญลักษณ์ที่ทำหน้าที่ทำซ้ำตัวอักษรหรือสัญลักษณ์
{n}     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นต้องซ้ำ n ครั้ง เช่น คุณสามารถเขียน Reg แทนเลข 8 หลัก ว่า /\d{8}/

{n,}     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นต้องซ้ำ n ครั้งหรือมากกว่า

{n,m}     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นต้องซ้ำ n ครั้งหรือมากกว่า แต่ไม่เกิน m ครั้ง เช่น หากคุณต้องการทดสอบว่า password ที่ผู้ใช้พิมพ์เข้ามาในรูปภาษาอังกฤษและตัวเลข มีความยาวอยู่ระหว่าง 6 ถึง 12 ตัว   คุณสามารถเขียนได้ว่า \w{6,12}/

?     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นอาจมีอยู่ครั้งเดียวหรือไม่มีเลยก็ได้ เช่น หากคุณต้องการค้นหา รหัสที่มีเลข 6 หลักและหน้าเลขอาจมีสัญลักษณ์หรือตัวอักษรนำหน้าตัวเดียว คุณอาจเขียนว่า /\D?\d{6}/

+     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นต้องมีอยู่อย่างน้อยหนึ่งครั้ง

*     หมายถึง สิ่งที่อยู่ในตำแหน่งนั้นอาจไม่มีอยู่หรือมีอยู่กี่ครั้งก็ได้ ซึ่งคุณควรใช้สัญลักษณ์นี้ด้วยความระมัดระวัง ยกตัวอย่างเช่น /a*/ อาจหมายถึง คำภาษาอังกฤษจำนวนมากที่มีอักษร a อยู่ซึ่งอาจครอบคลุมคำที่คุณไม่ต้องการค้นหา
                    ผมขอยกตัวอย่าง การใช้สัญลักษณ์ทำซ้ำที่ซับซ้อนขึ้นมา ในการค้นหาหรือกรอกหมายเลขบัตรประชาชน ซึ่งมี 13 หลัก และมีรูปแบบที่ควรเป็นไปได้ดังนี้...
0 1234 56789 12 3
หรืออาจมีคนใช้   0123456789123
หรืออาจมีคนใช้   0 1234 56789123
หรืออาจมีคนใช้   0 1234 56789 123 . . . . . .
                    ในข้อมูลหมายเลขบัตรจำนวนมาก อาจมีการเว้นวรรคหรือไม่เว้นดังที่แสดง ในการเขียน Reg ให้ครอบคลุมทุกๆกรณี คุณอาจเริ่มต้นด้วย
/\d \d\d\d\d \d\d\d\d\d \d\d \d/g
                    ส่วนการเว้นวรรค อาจมีหรือไม่มีก็ได้ เราก็เพิ่มเครื่องหมาย ? เข้าไป :
/\d ?\d\d\d\d ?\d\d\d\d\d ?\d\d ?\d/g
                    เราอาจใช้สัญลักษณ์ทำซ้ำเพื่อให้เขียนและอ่านได้ง่ายขึ้น :
/\d ?\d{4} ?\d\{5} ?\d{2} ?\d/g


3. สัญลักษณ์พิเศษที่ใช้ระบุตำแหน่งอักษรหรือสัญลักษณ์
\b     (ใช้ได้แต่กับภาษาอังกฤษ) ใช้ระบุขอบเขตของคำว่ามีการจำกัด เช่น หากคุณต้องการค้นหาแต่ on ที่อยู่เดี่ยวๆ ไม่ได้อยู่ภายในคำอื่น ให้คุณใช้ /\bon\b/gi

\B     (ใช้ได้แต่กับภาษาอังกฤษ) ใช้ระบุขอบเขตของคำว่าไม่ได้จำกัด เช่น หากคุณต้องการค้นหาคำว่า "Paula" และ "Pauline" แต่ไม่เอา "Paul" ให้คุณใช้ /\bpaul\B/gi

^     ใช้ระบุเป็นสิ่งที่อยู่อันดับแรกในข้อความ(string) เช่น หากคุณต้องการตรวจว่า เลข 1 เป็นสิ่งที่อยู่หน้าสุดของข้อความหรือเปล่า ให้ใช้ /^1\b/

$     ใช้ระบุเป็นสิ่งที่อยู่อันดับสุดท้ายในข้อความ(string) เช่น หากคุณต้องการตรวจว่า "จบ" เป็นสิ่งที่อยู่ท้ายสุดของข้อความหรือเปล่า ให้ใช้ /จบ$/


                    เป็นไงบ้างครับ กับ ตัวประหลาดเหล่านี้ ที่ผมเห็นเป็นตัวประหลาด เพราะผมไม่เคยนำมาใช้อะไรเลย มันอาจมีประโยชน์มากๆสำหรับคุณ และกลายเป็นตัวน่ารักสุดๆก็เป็นได้...   แต่เรื่อง Reg ยังไม่จบแค่นี้ครับ ในบทถัดไป เราจะพูดถึงการจัดกลุ่มภายใน Reg และคำสั่งต่างๆที่ใช้กับ Reg ซึ่งทำให้ช่วยเพิ่มขีดจำกัดและประโยชน์ของ Reg ให้มากขึ้นไปอีกครับ
เขียนโดย suwit ที่ 12:54
0 ความคิดเห็น

บทเรียนพิเศษ 37 Regular Expressions (1)

บทเรียนพิเศษ 37 Regular Expressions (1)

                    อ้า... นี่มัน..ผมไม่น่าทำเรื่องนี้เท่าไรเลยครับ เพราะไม่มีความรู้เอาซะเลย เพิ่งจะมาศึกษาเอาตอนที่ทำหน้านี้ แต่อยากให้หัวข้อจาวาสคริปในเว็บนี้สมบูรณ์ๆน่ะครับ และดูเหมือนว่ามันจะมีประโยชน์เอามากๆด้วยครับ แม้ว่าที่ผมแสดงในตัวอย่างจะดูไร้สาระก็ตาม ความหมายของ Regular Expressions นั้นผมก็อธิบายไม่ถูกครับ ประมาณว่าเป็นการค้นหาและจัดการเปลี่ยนแปลงข้อมูล อะไรทำนองนั้นครับ ลองมาดูตัวอย่างที่ผมใช้ Regular Expressions กับหน้านี้กันดีกว่า...
กดที่นี่เพื่อเปลี่ยนคำว่า "ครับ" ทั้งหมดในหน้านี้เป็น "โว้ย"

กดที่นี่เพื่อเปลี่ยนคำว่า "ผม" ทั้งหมดในหน้านี้เป็น "กู"

ได้โปรดกดที่นี่ให้ทุกสิ่งทุกอย่างกลับเป็นดังเดิม

                    ผมหวังว่าท่านผู้อ่านคงกดปุ่ม "...กลับเป็นดังเดิม" เรียบร้อยแล้วนะครับ ก่อนที่คุณจะทนอ่านไม่ได้และพังหน้าจอเอา คุณอาจเคยเห็นผลของการใช้ Regular Expressions ในหลายเว็บมาบ้างแล้ว แต่ไม่รู้ว่านั่นคือ Regular Expressions   ผมเคยเข้าไปในเว็บบอร์ด แล้วพิมพ์ความคิดเห็นส่งไปในกระทู้นั้นโดยมีคำว่า "กูเกิ้ล" อยู่ด้วย แล้วพอส่งเสร็จ หน้านั้นก็โหลดจากเซิร์ฟเวอร์ให้ใหม่ คำ "กูเกิ้ล" ที่ผมพิมพ์เข้าไปกลับปรากฎในเว็บเป็น "เราเกิ้ล" แสดงว่าเขาได้มีการใช้ Regular Expressions เปลี่ยนคำว่า "กู" เป็น "เรา" เรียบร้อยแล้ว เป็น Regular Expressions ที่ทำงานในฝั่งเซิร์ฟเวอร์หรือไม่ก็จาวาสคริปที่ทำงานในฝั่งของผู้ใช้ที่เขาเขียนดักคำไม่เหมาะสมไว้ แต่ในที่นี้เราจะพูดถึงแต่ที่ใช้ในจาวาสคริป แต่ก็มีการทำงานไม่ต่างกับฝั่งเซิร์ฟเวอร์นัก

                    ผมว่าเรื่องนี้ยุ่งยากและมีรายละเอียดมากกว่าบทที่ผ่านๆมา ผมจึงไม่ขอแสดงโค้ดที่ทำให้เกิดผลเมื่อคุณกดปุ่มข้างบนนะครับ เพราะกลัวคุณจะมึนตึ๊บและไม่อาจเข้าใจในส่วนต่อไป เราเริ่มจากพื้นฐานง่ายๆก่อนดีกว่า เรื่องยากๆมันก็มาจากเรื่องง่ายๆหลายๆเรื่องมารวมกันมั้งครับ..ผมว่า   สมมติผมมีข้อความมั่วๆว่า...(เป็นวันที่ผมเริ่มเขียนเรื่องนี้)
1 ตุลาคม พ.ศ. 2547 ต   ต
โค้ดของข้อความ... <font color="red" id="d">1 ตุลาคม พ.ศ. 2547 ต   ต</font>

ผมสามารถหาตำแหน่งของ "ตุลา" โดยการใช้ d.innerText.search(/ตุลา/)
กดที่นี่เพื่อดูค่าของ d.innerText.search(/ตุลา/)

ผมสามารถหาตำแหน่งของ "ตุลา" โดยการใช้ d.innerText.search('ตุลา')
กดที่นี่เพื่อดูค่าของ d.innerText.search('ตุลา')

                    คำสั่งใหม่ล่าสุดคือ search() ที่เอาไว้ค้นหาตำแหน่งในข้อความ(string) และจะให้ค่าตำแหน่งเริ่มต้นของสิ่งที่ค้นหาเจอครั้งเดียวในข้อความนั้นๆ แต่ถ้าหาไม่เจอ จะให้ค่า -1   /ตุลา/ เรียกได้ว่าเป็น Regular Expressions ซึ่งแตกต่างจากข้อความธรรมดาตรงที่ไม่มีเครื่องหมายคำพูดหุ้ม แต่จะมีเครื่องหมายทับ( / )หุ้มแทน แต่นั่นเป็น Regular Expressions แบบง่ายที่สุดแล้ว ซึ่งให้ค่าไม่ต่างจากข้อความธรรมดา

                    หากผมต้องการตำแหน่งของ "ต" ที่อยู่ท้ายสุด ผมจะใช้ /  ต/ หรือ "  ต" (สังเกตการเว้นวรรคสองครั้งด้านหน้า "ต") หากใช้ /ต/ ก็จะได้ตำแหน่งเดียวกับตัวอย่างข้างต้น ซึ่งไม่ใช่ตัวที่ผมต้องการ... เหอ..นี่มันอะไรกัน อย่างนี้ไม่ต้องใช้ Reg(ต่อไปผมจะเรียกสั้นๆแค่นี้นะครับ) ก็ทำงานนี้ได้แล้วนี่? เอ่อ.. ในกรณีนี้ก็จริงครับ แต่ว่าลองมาดูตัวอย่างต่อไปที่จำเป็นต้องใช้ Reg อย่างเดียวจึงจะทำได้... เพราะหากคุณใช้ข้อความ(string)... จะเปลี่ยนได้แค่ตัวเดียว แต่นี่...
ไอ้นี้ ไอ้นั้น ไอ้นู้น ไมเกรน
กดที่นี่เพื่อเปลี่ยนคำไม่สุภาพข้างบนทั้งหมด

กดที่นี่เพื่อเปลี่ยนเป็นคำไม่สุภาพเหมือนเดิม

โค้ด(ของข้อความและปุ่มบน)...
<font color="red" id="j">ไอ้นี้ ไอ้นั้น ไอ้นู้น ไมเกรน</font><br>
<button style="zoom:1.5" onclick="n=j.innerText.replace(/ไ\W\W/gi,'อัน')
j.innerText=n">กดที่นี่เพื่อเปลี่ยนคำไม่สุภาพข้างบนทั้งหมด</button>

                    คำสั่ง replace(... , ...) ใช้สำหรับเปลี่ยนตัวอักษรหรือคำหรือที่ว่างหรืออะไรก็แล้วแต่ ในที่นี้คำที่จะเปลี่ยนเป็น /ไ\W\W/gi ซึ่งเป็น Reg และคำที่จะแทนที่ลงไปคือ 'อัน' ผมขอแยกส่วนของ Reg นี้เพื่อให้เข้าใจง่าย...
·         /   ขีดแรกสำหรับเริ่มต้น Reg
·         ไ   สระไอ... แสดงว่าในคำที่จะเปลี่ยนต้องมีสระไอนำหน้า
·         \W   นี่เป็นสัญลักษณ์เฉพาะที่ใช้ใน Reg (ซึ่งยังมีตัวประหลาดเช่นนี้อีกหลายตัว) \W หมายความว่าเป็นอะไรก็ได้ที่ไม่ใช่ตัวอักษรภาษาอังกฤษหรือตัวเลข ในที่นี้ผมมีเป้าหมายให้ใช้แทน "อ"
·         \W   ผมตั้งใจเอาไว้ใช้แทนไม้โท
·         /   ใส่เครื่องหมายทับอีกครั้งเพื่อปิดเนื้อหาใน Reg
·         gi   ทั้งสองตัวนี้ฝรั่งเขาเรียก Parameters ซึ่งก็มีอยู่ทั้งหมดแค่ 2 ตัวนี้ล่ะครับ ตัว g หมายความว่าใช้ Reg นี้กับข้อความทั้งหมด(j.innerText)
i หมายความว่า อักษรภาษาอังกฤษทั้งใหญ่และเล็กมีค่าเท่ากัน เช่น /Dog/ มีค่าเท่ากับ /dog/ ซึ่งจริงๆแล้วผมไม่ต้องใช้ในตัวอย่างนี้ก็ได้ครับ เพราะยุ่งแต่คำไทยทั้งหมด
                    คุณจะเห็นได้ว่า ไมเกรน ก็ถูกเปลี่ยนเป็น อันกรน เพราะ ไมเ ไปตรงกับ /ไ\W\W/gi นี่จึงถือว่า หากคุณจะระบุให้เปลี่ยนแต่ ไอ้ ก็ควรจะใช้ /ไอ้/gi ไปเลย   แต่ผมใช้แบบนั้น เพื่อให้คุณรู้จักสัญลักษณ์พิเศษที่ใช้ใน Reg เท่านั้นเองครับ

ใช้ Reg กับแบบฟอร์ม(เพื่อบังคับให้ผู้ใช้ใส่แต่ตัวเลข)


โปรดพิมพ์ลงไป แล้วกดที่นี่เพื่อทดสอบ

<center><button style="zoom:1.5" onclick="m()">
โปรดพิมพ์ลงไป แล้วกดที่นี่เพื่อทดสอบ</button></center>
<script>function m(){
e1=k.value
e2=k.value.replace(/\D/gi,'')
if(e1!=e2)
{alert("โปรดใส่แต่ตัวเลขครับ")
k.value=e2;k.focus()}
}</script>

                   
เขียนโดย suwit ที่ 12:53
0 ความคิดเห็น

บทเรียนพิเศษ 35 เกี่ยวกับเวลา อดีต ปัจจุบัน อนาคต

 

บทเรียนพิเศษ 35 เกี่ยวกับเวลา อดีต ปัจจุบัน อนาคต

Sat Aug 20 10:29:22 UTC+0700 2011

                    ด้านบนนี้เป็นค่าเวลาปัจจุบันในตอนที่คุณเปิดเข้ามา ตรงที่ UTC+0700 นั้นหมายความว่า เวลาบ้านเรา(ประเทศไทย) ห่างจากเวลามาตรฐานสากล 7 ชั่วโมง บรรทัดข้างบนนั้นได้จากโค้ดง่ายๆดังนี้...
<center><script language="javascript">
document.write(new Date())</script></center>

                    โอ้หลายคนคงคิดไม่ถึงรึเปล่าครับว่า ทำไมโค้ดถึงง่ายเพียงนี้ และทำไมผมไม่เอาไปลงในบทเรียนที่ 3 เพราะตอนนั้นเป็นตอนที่ทำเว็บใหม่(ตอนแรกเว็บนี้มีแต่หัวข้อจาวาสคริป) และผมยังไม่รู้ครับ ว่า new Date() เดี่ยวๆจะใช้ได้ผล แต่ไม่ได้ใช้อยู่ได้แค่นี้นะครับ คุณสามารถกำหนดเวลาเข้าไปในวงเล็บของ new Date() ได้
ยกตัวอย่างเช่น คุณใช้ new Date(2004,11,20) ก็จะได้ผลตามนี้ครับ...
Mon Dec 20 00:00:00 UTC+0700 2004
                    ในวงเล็บ เลขแรก(2004)คือเลขปี ค.ศ.   เลขที่สอง(11)คือเลขเดือน   เลขที่สาม(20)คือเลขวัน จะเห็นว่าที่แสดงออกมา Dec จะหมายถึง December ที่แปลว่าเดือนธันวาคม ซึ่งตรงกับเลขเดือนที่เรากำหนดไป(11 ...คอมนับเดือนมกราคมเป็นเลข 0) ลองเปิดปฏิทินดูก็ได้ครับ ว่าเป็นวันจันทร์(Mon)รึเปล่า ตรงเลข 00:00:00 เป็นเลขชั่วโมง:นาที:วินาที ซึ่งสามารถกำหนดได้ แต่ผมไม่ได้กำหนดไว้ครับ รูปแบบเต็มๆของการกำหนดเวลาจะเป็นดังนี้ครับ...(ผมไม่ขอแสดงตัวอย่างครับ ลองทำดูเอาเองได้)
new Date(ปี,เดือน,วัน,ชั่วโมง,นาที,วินาที,มิลลิวินาที)
                    แต่รูปที่แสดงผลออกมานั้นยากแก่การนำไปใช้จึงมีการเรียกค่าเวลาต่างๆ เหมือนกับที่ทำในบทที่ 3 แต่ยังมีการเรียกค่าอีกอย่างที่ยังไม่กล่าวถึงครับนั่นคือ new Date().getTime() ซึ่งจะแสดงค่าเวลาในหน่วยมิลลิวินาที โดยนับเวลาจากเจ็ดโมงเช้าของวันที่ 1 เดือนมกราคม ค.ศ. 1970 เลขด้านล่างที่อยู่ในหลักล้านล้าน จึงเป็นผลของการเรียกค่านี้ในตอนที่คุณเปิดเข้ามาครับ...
1313810963218
                    หากคุณไม่เชื่อว่า เลขข้างบนนี้คิดมาจากเวลาที่ว่านั้นจริงๆ ลองใช้ new Date(1970,0,1,7).getTime() แล้วคุณก็จะพบว่าเลขนั้นคือ...(ไม่เฉลยครับท่าน!) หากคุณใช้ new Date( 1313810963218) หรือเลขอื่นๆก็จะได้ค่าเวลาในตอนนั้นเช่นกันครับ ...... เอ่อ ดูไร้สาระอยู่มั้ยครับ ผมคิดอย่างนั้นตอนแรกที่ผม รู้วิธีพวกนี้ แต่ผมก็ได้พยายามเอามาใช้ จนได้นาฬิกาจับเวลาพร้อมโค้ดแบบนี้ครับ...

<a style="cursor:hand;color:blue" onmousedown=
"t1=new Date().getTime()
p=setInterval('t2=new Date().getTime();t3=(t2-t1)/1000;'+
'u.innerHTML=t3;if(t3>=5){clearTimeout(p)}',10)">
กดที่นี่เพื่อนับ 0 ถึง 5 วินาที</a><br>
<a id="u"></a>
                    หากคุณได้ค่าเวลาเกิน 5 วินาทีมาหน่อย แสดงว่าเครื่องของคุณกำลังเปิดหลายๆโปรแกรมอยู่โปรแกรม หรือไม่ก็ใช้เครื่องคอมฯอายุมาก(มั้ง)ครับ เพราะประมวลคำสั่งช้า จนหลุดเกินมา เมื่อคุณกดที่ข้อความ t1 จะแทนค่าเวลา ณ ตอนที่กดนั้น ซึ่งจะถูกเก็บไว้ในความจำของคอม   ค่าเวลา t2 จะถูกดึงออกมาใหม่เสมอทุกๆ 10 มิลลิวินาที(หากใช้คอมเก่า การประมวลผลจริงๆจะอยู่ที่ประมาณ 50 มิลลิวินาที) และนำมาหักเวลาจากที่ได้ตอนแรก(t1)ซึ่งไม่มีค่าเปลี่ยนแปลง นำมาหารด้วยพัน เพื่อเปลี่ยนเป็นหน่วยวินาที และถูกแสดงผล(t3)อย่างที่คุณเห็น เมื่อจับเวลาครบ(หรือมากกว่า) 5 วินาที การวนคำสั่งจะหยุดลงทันที .....ตัวอย่างนี้ดูไม่เหมือนนาฬิกาจับเวลาเท่าไรครับ ลองดูนี่จะเหมือนกว่า..ผมว่า...
กดที่นี่เพื่อนับถอยหลังจาก 5 ถึง 0 วินาที
0
แบบฝึกหัดพิเศษ
                    เอ่อ... ผมนึกว่าจะไม่มีแบบฝึกหัด ในบทพิเศษเหล่านี้แล้วนะครับ แต่เอาเถอะครับ สักข้อ... คิดวันละนิด จิตแจ่มใส (เกี่ยวกันรึเปล่า?)   ผมขอให้คุณเขียนสคริปที่ทำให้เกิดนาฬิกาจับเวลาแบบนับถอยหลัง เหมือนข้างบนนี้ แต่คุณจะเห็นว่านาฬิกาข้างบนนี้มีจุดอ่อนอยู่.. ตรงที่มีการแสดงค่าทศนิยมยาวๆออกมาด้วยในบางครั้ง ถ้าเป็นไปได้ ผมอยากให้คุณจัดการเอาทศนิยมเหล่านั้นออกด้วยครับ และจุดอ่อนใหญ่คือ เมื่อคุณกดข้อความซ้ำๆขณะเลขวิ่งอยู่ นาฬิกาจะทำงานไม่หยุด เพราะคำสั่งทำงานซ้ำ ขณะที่ clearTimeout ครั้งก่อนยังไม่ทำงาน(เลยไม่หยุดไงครับ) ผมอยากให้คุณแก้ไขตรงนี้ด้วยครับ ไม่มีเฉลยนะครับ ผมอยากให้คุณทำเป็น ซึ่งจะเป็นพื้นฐาน ให้คุณนำค่าเวลาที่จับไปประยุกต์ใช้ในหลายๆทาง และไม่จำเป็นต้องแสดงผลตลอดเวลาให้ผู้ใช้เห็นแบบนี้ก็ได้ครับ

เขียนโดย suwit ที่ 12:50
0 ความคิดเห็น

พิเศษ 34 การใช้ปุ่มต่างๆบนแป้นพิมพ์

พิเศษ 34 การใช้ปุ่มต่างๆบนแป้นพิมพ์


                    ทดลองกดปุ่มต่างๆบนแป้นพิมพ์ของคุณสิครับ ลองกดปุ่ม Shift หรือ Ctrl ค้างแล้วกดปุ่มอื่นๆ และลองเปลี่ยนภาษาพิมพ์ตัวอักษรไทยดูสิครับ แล้วจะมีอะไรดีๆ เล่นได้เพลินๆ(แต่ไม่ไร้สาระนะครับ) ขึ้นมาในตารางด้านล่างนี้...

shiftKey

ctrlKey

altKey

keyCode

อักษรหรือสัญลักษณ์

onkeypress

onkeydown

false

true

false

67

C

onkeyup

กดปุ่มค้างอยู่

 

และนี่เป็นโค้ดที่สร้างและเปลี่ยนเนื้อหาในตารางเมื่อกดปุ่ม (ดูผ่านๆไปก่อน ยังไม่ต้องสนใจครับ)

<script language="javascript">
document.onkeypress=d1
document.onkeydown=d2
document.onkeyup=d3
function d1()
{b1.innerHTML=event.shiftKey
b2.innerHTML=event.ctrlKey
b3.innerHTML=event.altKey
b4.innerHTML=event.keyCode
b5.innerHTML=String.fromCharCode(event.keyCode)}
function d2()
{c1.innerHTML=event.shiftKey
c2.innerHTML=event.ctrlKey
c3.innerHTML=event.altKey
c4.innerHTML=event.keyCode
c5.innerHTML=String.fromCharCode(event.keyCode)
e.innerHTML="กดปุ่มค้างอยู่"}
function d3()
{e.innerHTML="เพิ่งจะปล่อยปุ่ม"}
</script>

<center><table border=1 style="font-size:28px;text-align:center;width:80%">
<tr><td width=20%><td width=15%>shiftKey
<td width=15%>ctrlKey<td width=15%>altKey
<td width=15%>keyCode<td width=15%>อักษรหรือสัญลักษณ์
<tr><td>onkeypress<td><a id="b1"></a>
<td><a id="b2"></a><td><a id="b3"></a>
<td><a id="b4"></a><td><a id="b5"></a>
<tr><td>onkeydown<td><a id="c1"></a>
<td><a id="c2"></a><td><a id="c3"></a>
<td><a id="c4"></a><td><a id="c5"></a>
<tr><td>onkeyup<td colspan=5><a id="e">ยังไม่ได้กดปุ่ม</a>
</table></center>


                    แต่ละปุ่มของแป้นพิมพ์ จะมีเลขโค้ด(keyCode)ที่เขา(คนที่คิดขึ้น)กำหนดไว้แล้ว รู้สึกว่าจะเป็นเลขโค้ดของ ASCII(เป็นรหัสอักษรหรืออะไรสักอย่างที่ผมไม่รู้ครับ ใครรู้ช่วยบอกผมที จะได้ลงคำอธิบายในนี้ให้ถูกต้อง) สังเกตได้ว่าเลขโค้ดของอักษรไทยมีค่าเป็นสามพันกว่า ตัวอักษร a ถึง z เป็นโค้ดเรียงกัน ตั้งแต่ 97 ถึง 122 สำหรับคำสั่ง onkeypress   ซึ่งเลขโค้ดไม่ตรงกับเลขจากคำสั่ง onkeydown นั้นไม่ต้องกังวลครับ(ผมไม่รู้) ก็เขากำหนดมาแบบนี้น่ะครับ


การให้ผลของ onkeypress onkeydown และ onkeyup

·         onkeypress ---> (ฝรั่งบอกว่า)จะให้ผลต่อเนื่องเมื่อกดปุ่มค้างไว้ (ลองทำดูครับ แล้วดูผลที่เกิดด้านล่าง)

·         onkeydown ---> (ฝรั่งบอกว่า)จะให้ผลครั้งแรกและครั้งเดียวเมื่อเริ่มกดปุ่ม (แต่ลองทำดูครับ แล้วดูผลที่เกิดด้านล่าง ผมใช้คนละค่ากับ onkeypress แล้วนะครับ)
22

·         onkeyup ---> จะให้ผลครั้งเดียวเมื่อปล่อยปุ่ม (ลองกดค้างแล้วปล่อยดูครับ แล้วดูผลที่เกิดด้านล่าง)

 

                    ในโค้ดข้างบน ผมใช้ 3 คำสั่งนี้กับ document ซึ่งหมายถึงเนื้อหาในหน้าต่างนี้นั่นเอง แล้วส่งค่าต่างๆด้านล่างนี้เข้าไปในตารางด้วย คำสั่ง innerHTML

event.shiftKey   คือ สถานะของปุ่ม Shift หากมีค่าเป็น true ก็หมายถึงถูกกดปุ่ม Shift ไปแล้ว หากค่าเป็น false ก็คือ ยังไม่ได้กด
event.ctrlKey   คือ สถานะของปุ่ม Ctrl
event.altKey   คือ สถานะของปุ่ม Alt
event.keyCode   คือ เลขโค้ดของปุ่มบนแป้นพิมพ์
String.fromCharCode(event.keyCode)   คือ ตัวหนังสือหรือสัญลักษณ์จากเลขโค้ดนั้นๆ


ตัวอย่างพื้นฐานของการใช้ปุ่มใดปุ่มหนึ่ง

<script language="javascript">
document.onkeydown=x
function x()
{if(event.keyCode==120)
{document.title="คุณกำลังกดปุ่ม F9 อยู่"}}
document.onkeyup=x2
function x2()
{document.title="พิเศษ 34 การใช้ปุ่มต่างๆบนแป้นพิมพ์"}
</script>

                    ลองกดปุ่ม F9 ค้างไว้สิครับ แล้วจะเห็นผลของโค้ดนี้บนหัวข้อหน้าต่าง(title) สิ่งที่ทำให้เจาะจงปุ่มที่จะเลือกใช้ได้คือการกำหนดเงื่อนไข if ในตัวอย่างนี้ใช้ if(event.keyCode==120)   ซึ่งเลข 120 เป็นเลขโค้ดของปุ่ม F9 (รู้ได้จากตารางข้างบนครับ) ซึ่งเมื่อผู้ใช้กดปุ่ม F9 เงื่อนไขจะเป็นจริง แล้วทำให้ title เปลี่ยน   เมื่อผู้ใช้ปล่อยปุ่ม(onkeyup) title ก็จะเปลี่ยนมาเป็นดังเดิม


ตัวอย่างการใช้ในโค้ด HTML

                    ไม่จำเป็นที่จะต้องวางทั้งสามคำสั่งดังกล่าวไว้ในจาวาสคริปเท่านั้น คุณสามารถวางไว้ในคำสั่ง HTML เหมือนกับที่ใช้ onClick หรือ on... ต่างๆที่ใช้กับเมาส์  แต่ต้องเป็นคำสั่งที่สามารถใช้แป้นพิมพ์ได้ คุณลองพิมพ์ตัวหนังสือและตัวเลขลงไปในกล่องข้อความข้างล่างนี้สิครับ...


จะเห็นได้ว่า alert จะขึ้นมาเฉพาะเมื่อคุณพิมพ์ตัวเลขลงไปเท่านั้น เพราะว่าผมใช้
onkeypress="if(event.keyCode>=48&&event.keyCode<=57)
{alert('คุณกดเลข ' +String.fromCharCode(event.keyCode))} ไปวางไว้ในคำสั่ง input ที่ใช้สร้างกล่องข้อความนี้   เลขโค้ดของปุ่ม 0 ก็คือ 48 เลขโค้ดของปุ่ม 1 ก็คือ 49 ไล่เรียงไปเรื่อยๆจนถึงเลขโค้ดของปุ่ม 9 ก็คือ 57 จึงเป็นที่มาของการกำหนดเงื่อนไขนั้นครับ

                    คุณสามารถนำรูปแบบตัวอย่างนี้มาสร้างแบบฟอร์ม ที่คุณไม่ต้องการให้ผู้ใช้พิมพ์ตัวเลขลงไป โดยเพิ่มคำสั่งที่จะทำให้ค่า(value) ในกล่องข้อความหายไปหมด หลังจากพิมพ์ตัวเลขลงไป


                    เท่าที่ผมเล่นอินเตอร์เน็ตมา มีน้อยเว็บที่ให้ผู้ใช้กดแป้นพิมพ์เพื่อวัตถุประสงค์อื่น นอกจากกรอกแบบฟอร์ม กรอก password ซึ่งการที่ไม่นำมาใช้กัน อาจเป็นเพราะความไม่สะดวกไม่เหมือนกับใช้เมาส์ละมั้งครับ อีกอย่างคือแป้นพิมพ์ของแต่ละคนอาจไม่เหมือนกัน มีหลายมาตรฐาน ทำให้ keyCode ต่างกันรึเปล่าไม่ทราบได้ครับ   แต่ตอนนี้คุณก็ได้ทราบแล้ว ว่านอกจากเมาส์แล้ว ยังมีการโต้ตอบกับผู้ใช้ได้อีกทางคือ แป้นพิมพ์ ก็แล้วแต่คุณจะนำไปใช้ครับ (ผมเคยเอามาใช้ควบคุมสิ่งต่างๆในเกมที่สร้างขึ้นครับ)   อ้อ... ยังไม่จบครับ เวลาที่คุณเขียนเว็บ ตัวหนังสือคุณพิมพ์ลงไปในโค้ด เวลาแสดงออกมา ก็จะเป็นตัวอักษรเดียวกับในโค้ดใช่มั้ยครับ แต่ผมขอให้คุณ copy ตัวประหลาดบรรทัดล่างนี้ลงไปในโปรแกรมที่คุณเขียนเว็บ แล้ว save เป็นไฟล์ HTML แล้วเปิดออกมาดูสิครับ

&#3626&#3623&#3633&#3626&#3604&#3637

 

                    เป็นไงบ้างครับ... นี่เป็นการนำเลขโค้ดมาใช้ในการเขียนแทนตัวอักษร โดยต้องใช้สัญลักษณ์ &# นำหน้าเลขโค้ด โดยคุณสามารถดูเลขโค้ดโดยได้จากตารางข้างบนของ onkeyprees   หากคุณใช้เลขโค้ดอักษรที่ไม่มีอยู่ในเครื่องของคุณ เช่น &#4000&#10000 เวลาแสดงผลก็จะได้สัญลักษณ์สี่เหลี่ยมแบบนี้... ྠ✐   แล้วมันจะมีประโยชน์อะไรน่ะหรือครับ พิมพ์ก็ยาวกว่า แถมต้องมากดหาเลขโค้ดอีก ...เอ่อ... ผมก็ยังไม่เคยนำความรู้นี้ไปใช้ประโยชน์อะไร ถือว่าเป็นความรู้ไว้ เผื่อคุณอาจค้นพบประโยชน์ของเลขโค้ดนี้ในอนาคต... คุณลองกดปุ่มบนแป้นพิมพ์ แล้วดูตารางด้านล่างสิครับ




shiftKey

ctrlKey

altKey

keyCode

อักษรหรือสัญลักษณ์

onkeypress

onkeydown

false

true

false

67

C

onkeyup

กดปุ่มค้างอยู่


                    ตารางนี้แทบจะเหมือนกับตารางข้างบนทุกอย่าง ต่างกันแค่เพียงกำหนดให้ใช้ตัวอักษร(Font) แบบ symbol(สัญลักษณ์) เท่านั้น (เพิ่ม font-family:symbol เข้าไปในคำสั่ง style ภายในคำสั่ง table) และผมมีเปลี่ยนชื่อ id ใหม่เพื่อไม่ให้ซ้ำกับตารางข้างบน (หากอ่านย่อหน้านี้ไม่เข้าใจ โปรดเข้าไปดูในเรื่อง CSS) ตารางนี้สามารถช่วยให้คุณหาสัญลักษณ์ที่คุณต้องการได้ว่า อยู่ที่ปุ่มใด และเวลานำไปใช้ก็ให้กำหนด Font เป็น symbol ด้วยครับ

 

เขียนโดย suwit ที่ 12:49
สมัครสมาชิก: บทความ (Atom)
 
;