Javascript.

งานนำเสนอเรื่อง: "Javascript."— ใบสำเนางานนำเสนอ:

1 Javascript

2 Regular Expressions รูปแบบ (Pattern) ของกลุ่มตัวอักษร (Characters) ที่ใช้สำหรับค้นหาหรือเปรียบเทียบกับข้อความ (String) เช่น ตรวจสอบค่าที่ผู้ใช้กรอกลงในแบบฟอร์มอีเมล์ ว่าอยู่ในรูปแบบอีเมล์ หรือไม่ ส่วนใหญ่ใช้ในการตรวจสอบความถูกต้องของข้อมูลที่กรอกลงในฟอร์มที่เว็บบราวเซอร์ของผู้ใช้เลย เรียกเทคนิคนี้ว่า Client-Side Validation

3 วิธีการสร้าง Object RegExp
การสร้างด้วย Literal Syntax การสร้างด้วย Constructor Syntax

4 การสร้างด้วย Literal Syntax
การกำหนดรูปแบบ (Pattern) ให้กับตัวแปร ค่ารูปแบบจะอยู่ภายในเครื่องหมาย “//” var regExp = /pattern/options; pattern รูปแบบที่ใช้ในการค้นหา options ออฟชันเพิ่มเติมสำหรับการค้นหา จะใส่หรือไม่ก็ได้ และ มากกว่าหนึ่งก็ได้ i สำหรับค้นหากลุ่มอักษรทั้งตัวเล็กและตัวใหญ่ g สำหรับค้นหากลุ่มตัวอักษรทั้งหมดในข้อความ m สำหรับค้นหากลุ่มตัวอักษรในข้อความที่มากกว่าหนึ่งบรรทัด

5 ตัวอย่าง การสร้างด้วย Literal Syntax
var regExp = var regExp = /^\d{5}$/; var regExp = /chiangmai/i;

6 การสร้างด้วย Constructor Syntax
var regExp = new RegExp(“pattern”,options); pattern รูปแบบที่ใช้ในการค้นหาหรือเปรียบเทียบ options ออฟชันเพิ่มเติมในการค้นหา i สำหรับค้นหากลุ่มอักษรทั้งตัวเล็กและตัวใหญ่ g สำหรับค้นหากลุ่มตัวอักษรทั้งหมดในข้อความ m สำหรับค้นหากลุ่มตัวอักษรในข้อความที่มากกว่าหนึ่งบรรทัด

7 ตัวอย่าง การสร้างด้วย Constructor Syntax
var regExp = new var regExp = new RegExp(“^\\d{5}$”); var regExp = new RegExp(“chiangmai”, “i”);

8 การกำหนดรูปแบบ (Pattern)
ประกอบไปด้วย 2 ส่วนหลัก ดังนี้ กลุ่มตัวอักษรที่ต้องการค้นหา เช่น /javascript/ เครื่องหมายพิเศษ (Metacharacters) เช่น /s$/

9 กลุ่มของการกำหนดรูปแบบ
Positioning matching Character classes Repetition matching Alternation and grouping matching Special literal character matching Back reference matching

10 Positioning matching กลุ่มของเครื่องหมายพิเศษที่เกี่ยวข้องกับตำแหน่งในการค้นหา - ^ (Caret) ใช้สำหรับกำหนดว่า ต้องอยู่หน้าสุดของข้อความ เช่น /^One/i “One day” true “Only one” false $ (Dollar) ใช้สำหรับกำหนดว่า ต้องอยู่ท้ายสุดของข้อความ เช่น /man$/i “Woman” true “Many” false

11 เช่น /ly\b/ “really cool” true
\b (Boundary) ใช้สำหรับกำหนดว่า ต้องอยู่หน้าสุดของคำ หรือ ท้ายสุดของคำ ภายในข้อความ เช่น /ly\b/ “really cool” true “lyric” false /\bja/i “Java”, “japan is nice” true - \B (Not Boundary) ใช้สำหรับกำหนดว่า ต้องไม่อยู่หน้าสุดของคำ หรือ ท้ายสุดของคำ ภายในข้อความ

12 Character classes เครื่องหมายพิเศษที่ใช้สำหรับสร้างเซ็ทของตัวอักษรสำหรับรูปแบบค้นหา ใช้เครื่องหมาย “[ ]” เช่น [ab] คือ เซ็ทของตัวอักษร “a” หรือ “b” มีรูปแบบการใช้งานดังนี้ [pattern] pattern เซ็ทของตัวอักษร เช่น /^[ab]/ “apple”, “banana” true /[ab]/ “bill”, “way” true /^s[au]/ “sand”, “sun” true “sea” false

13 เช่น /[^AN]BC/ “BBC” true
- [^pattern] (Negate) ใช้สำหรับกำหนดว่า ต้องไม่อยู่ในเซ็ท เช่น /[^AN]BC/ “BBC” true “ABC”, “NBC” false [pattern - pattern] ใช้สำหรับกำหนดช่วงของตัวอักษร เช่น /[a-z]/ true หากมีตัวอักษร a ถึง z อย่างน้อยหนึ่งตัว /[0-9]/ true หากมีตัวเลข 0 ถึง 9 อย่างน้อยหนึ่งตัว

14 นอกจากการใช้ “[ ]” ยังมีเครื่องหมายลัด ดังนี้ - \w [a-zA-Z0-9_]
- \d [0-9] - \D [^0-9] - \s ช่องว่าง (space) - \S ไม่ใช่ช่องว่าง - . (Dot) แทนตัวเลข, ตัวอักษร, เครื่องหมายใดๆ (ยกเว้น \n)

15 Repetition matching เครื่องหมายพิเศษที่ช่วยระบุจำนวนครั้งของรูปแบบที่ต้องการค้นหา {n} กำหนดจำนวน n ครั้งของรูปแบบที่อยู่ด้านหน้า {n} เช่น /\d{5}/ “123456”, “12345a” true /^\d{5}$/ “11010” true “20000x”, “123456” false

16 เช่น /\d{5,}/ “12345”, “123456”, “12345ab” true
{n, } กำหนดจำนวน n ครั้งหรือมากกว่าของรูปแบบที่อยู่ด้านหน้า {n} เช่น /\d{5,}/ “12345”, “123456”, “12345ab” true /^\d{5,}$/ “123456”, “ ” true “123456ab” false

17 เช่น /\d{2,5}/ “10”, “100”, “100000” true
- {n,m} ใช้สำหรับกำหนด n ครั้ง แต่ไม่เกิน m ครั้งของรูปแบบที่อยู่ข้างหน้า {n,m} เช่น /\d{2,5}/ “10”, “100”, “100000” true /^\d{2,5}$/ “100” true “100000” false

18 เช่น /colou?r/ “colour”, “color” true
- ? ใช้กำหนดจำนวน 0 หรือ 1 ครั้งของรูปแบบที่อยู่ข้างหน้า ? เช่น /colou?r/ “colour”, “color” true - * ใช้กำหนดจำนวน 0 หรือ 1 ครั้งขึ้นไปของรูปแบบที่อยู่ข้างหน้า * เช่น /tha*/ “th”, “thai”, “the”, “thaas” true - + ใช้กำหนดจำนวน 1 ครั้งหรือมากกว่าของรูปแบบที่อยู่ข้างหน้า + เช่น /fe+d/ “fed”, “feed” true “food” false

19 Alternation and grouping matching
Alternation matching เครื่องหมายพิเศษที่ช่วยในการสร้างทางเลือกให้กับรูปแบบได้ Grouping matching เครื่องหมายพิเศษที่ช่วยจับกลุ่มหรือสร้างกลุ่มย่อยให้กับรูปแบบ

20 เช่น /bangkok|bkk/ เช่น /java(script)?/
- | (Alternation) ใช้สำหรับสร้างเงื่อนไข “หรือ” เช่น /bangkok|bkk/ “I live in bangkok”, “I live in bkk” true - ( ) (Grouping) ใช้สำหรับจับกลุ่มรูปแบบ หรือ สร้างกลุ่มย่อย ใช้ร่วมกับเครื่องหมายพิเศษอื่นๆ เช่น *, +, ?, | เป็นต้น เช่น /java(script)?/ “java”, “javascript” true

21 Special literal character matching
ค้นหาเครื่องหมายพิเศษ หรือ ตัวอักษรที่ไม่มีบนคีย์บอร์ด - \t ค้นหาเครื่องหมาย Tab - \n ค้นหาเครื่องหมาย ขึ้นบรรทัดใหม่ - \uxxxx ค้นหาตัวอักษรตามรหัส Unicode เช่น \u00A9 คือ © - \punctuation ค้นหาเครื่องหมาย Metacharacters ต่างๆ เช่น \$ “$” ไม่ใช่เครื่องหมายตัวปิดท้าย

22 Back reference matching
เครื่องหมายพิเศษที่ใช้สำหรับอ้างอิงกลับไปยังรูปแบบและผลการค้นหาก่อนหน้านี้ - ( )( )…( )\n ใช้สำหรับคัดลอกรูปแบบและผลการค้นหาของวงเล็บที่อ้างอิง โดยที่ “n” หมายถึงเลขตำแหน่งของวงเล็บที่ใช้ในการกำหนดรูปแบบ และ “( )” จะมีกี่วงเล็บก็ได้

23 - /(A)(B)\1/ “ABA” true “ABC” false - /(A)(B)(A)\2/ “ABAB” true - /(\d+)=\1/ “45=45”, “9=9” true “1=2” false

24 Method ของ String สำหรับทำ Pattern matching
search() replace() match() split()

25 search(regExp:RegExp) : int
หากส่งค่า string เข้าไป จะถูกเปลี่ยนเป็น object RegExp โดยอัตโนมัติ var str = “JavaScript is Fun”; str.search(/script/i); 4 str.search(“java”, “i”); 0

26 replace(regExp:RegExp,replace:string) : string
ใช้สำหรับค้นหาด้วยรูปแบบ (regExp) และแทนที่ด้วยค่า string (replace) จะส่งค่า string ใหม่ที่ถูกแทนที่ออกมา (ไม่ไปเปลี่ยนค่าที่ string เดิม) var str = “Hello World, Java”; var newStr = str.replace(/java/i, “Javascript”); document.write(newStr); Hello World, Javascript

27 match(regExp:RegExp) : string[]
ใช้สำหรับค้นหาและส่งค่าผลลัพธ์กลับมาเป็น Array หากไม่มีผลลัพธ์ จะคืนค่า null var str = “I love glove”; var result = str.match(/love/g); document.write(result.length); 2

28 split(delimiter:string,limit:int) : string[]
ใช้สำหรับแบ่งข้อความเป็นคำย่อยๆ โดยแบ่งด้วยรูปแบบ (delimiter) ที่กำหนด และ สามารถกำหนดจำนวนคำ (limit) สูงสุดที่ถูกตัดได้ และจะกำหนดหรือไม่ก็ได้ var str = “Rajamangala University of Technology Lanna”; var result = str.split(“ ”); document.write(result); Rajamangala,University,of,Technology,Lanna