บทเรียนที่ 4 ตัวสร้างการโต้ตอบ : onMouseOver
เราพูดถึงตัวรองรับการกระทำ(object) กับวิธีการกระทำ(method) ไปเรียบร้อยแล้ว แต่ในจาวาสคริปไม่ได้มีอยู่เพียงแค่นั้น ในบทนี้เราจะพูดถึงการโต้ตอบ (ตอนนี้หลายคนคงจะงงๆ ว่ามันโต้ตอบอะไรหว่า คือผมแปลมาจากภาษาอังกฤษคำว่า Event ครับ จริงๆแล้ว มันแปลว่าเหตุการณ์ แต่ผมแปลเป็นการโต้ตอบเพื่อให้เข้าใจง่ายกว่า คือมีการโต้ตอบระหว่างการใช้งาน ระหว่างผู้ใช้กับคอมฯ ผ่านทางการใช้เมาส์และคีย์บอร์ดไงครับ เอาเถอะ เดี๋ยวทำๆไป คุณก็จะเข้าใจเอง)
เราสามารถใส่ตัวสร้างการโต้ตอบ เข้าไปในโค้ด HTML ได้เลยครับ ไม่จำเป็นต้องพิมพ์ไว้ข้างใน <script language="javascript">.............</script> การใช้ตัวสร้างการโต้ตอบนี้มีประโยชน์มากครับ มันจะช่วยสร้างความมีชีวิตชีวาให้กับเว็บของคุณ ไม่ใช่เป็นแค่เนื้อหาอยู่นิ่งๆ อย่างเดียว จะช่วยดึงดูด ความสนใจผู้เข้าชมด้วย โดยที่คุณไม่จำเป็นต้องใช้การสร้างจาวาสคริปยาวๆ แค่พิมพ์ตัวสร้างการโต้ตอบสั้นๆลงไป ก็ช่วยได้แล้วครับ ตัวสร้างการโต้ตอบมีหลายตัวครับ ตัวแรกที่เราจะพูดถึงเป็นตัวหนึ่งที่นิยมใช้กันมาก ตัวนั้นคือ... onMouseOver ลองพิมพ์ใส่ notepad ตามสคริปด้านล่างนี้เลยครับ
เราสามารถใส่ตัวสร้างการโต้ตอบ เข้าไปในโค้ด HTML ได้เลยครับ ไม่จำเป็นต้องพิมพ์ไว้ข้างใน <script language="javascript">.............</script> การใช้ตัวสร้างการโต้ตอบนี้มีประโยชน์มากครับ มันจะช่วยสร้างความมีชีวิตชีวาให้กับเว็บของคุณ ไม่ใช่เป็นแค่เนื้อหาอยู่นิ่งๆ อย่างเดียว จะช่วยดึงดูด ความสนใจผู้เข้าชมด้วย โดยที่คุณไม่จำเป็นต้องใช้การสร้างจาวาสคริปยาวๆ แค่พิมพ์ตัวสร้างการโต้ตอบสั้นๆลงไป ก็ช่วยได้แล้วครับ ตัวสร้างการโต้ตอบมีหลายตัวครับ ตัวแรกที่เราจะพูดถึงเป็นตัวหนึ่งที่นิยมใช้กันมาก ตัวนั้นคือ... onMouseOver ลองพิมพ์ใส่ notepad ตามสคริปด้านล่างนี้เลยครับ
สคริป...
<a href = "c:/" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ'; return true">กดตรงนี้</a>
(สคริปนี้จะพิมพ์ติดกันหมด ไม่ต้องเว้นวรรคเว้นบรรทัดแบบผมก็ได้ แต่คำ onMouseOver ต้องพิมพ์ไปตามนั้นนะครับ คือ M กับ O ใช้ตัวพิมพ์ใหญ่เท่านั้น)
'กดเพื่อไปที่ไดร์ฟซีของคุณ'; return true">กดตรงนี้</a>
(สคริปนี้จะพิมพ์ติดกันหมด ไม่ต้องเว้นวรรคเว้นบรรทัดแบบผมก็ได้ แต่คำ onMouseOver ต้องพิมพ์ไปตามนั้นนะครับ คือ M กับ O ใช้ตัวพิมพ์ใหญ่เท่านั้น)
ผลของสคริปนี้
กดตรงนี้
ลากเมาส์มาวางที่ link ด้านบนนี้แล้วสังเกตแถบยาวๆด้านล่างของหน้าต่าง(window status)
ลากเมาส์มาวางที่ link ด้านบนนี้แล้วสังเกตแถบยาวๆด้านล่างของหน้าต่าง(window status)
มาแยกโครงสร้างของจาวาสคริป(ผสม html ด้วย สำหรับอันนี้)กันครับ
· <a href = "c:/" ใครที่เขียน HTML ได้ ตรงนี้คงไม่ต้องอธิบายมาก ว่ามันเป็นตัวสร้าง link โดยเริ่มพิมพ์สัญลักษณ์ที่ใช้บอกว่าเป็นการเริ่มคำสั่ง HTML สัญลักษณ์นั้นคือ < ตามด้วย a href = "c:/" ซึ่งเป็นคำสั่งที่บอกให้หน้าต่างเปิดไดร์ฟซีของคุณ(ภายในเครื่องหมายคำพูด คุณอาจเปลี่ยนเป็น ชื่อที่อยู่ของเว็บต่างๆเช่น http://www.google.com เป็นต้น เพื่อสร้าง link ของเว็บนั้นๆ) หากไม่มีตัวสร้างการโต้ตอบคุณก็สร้าง link ได้โดยพิมพ์ไปแบบนี้ครับ
<a href = "c:/" >กดตรงนี้</a>
โดยคำว่า "กดตรงนี้" จะเป็นตัวอักษรที่แสดงในหน้าจอ เพื่อนำ(link)ไปสู่ ไดร์ฟซีเมื่อมีการคลิ๊กเมาส์ที่ตัวอักษรนี้ และ </a> จะใช้เป็นตัวจบคำสั่ง link เหมือนๆกับของจาวาสคริปที่จบด้วย </script>
<a href = "c:/" >กดตรงนี้</a>
โดยคำว่า "กดตรงนี้" จะเป็นตัวอักษรที่แสดงในหน้าจอ เพื่อนำ(link)ไปสู่ ไดร์ฟซีเมื่อมีการคลิ๊กเมาส์ที่ตัวอักษรนี้ และ </a> จะใช้เป็นตัวจบคำสั่ง link เหมือนๆกับของจาวาสคริปที่จบด้วย </script>
· onMouseOver on แปลว่า อยู่บน Mouse แปลว่า เมาส์ Over ก็แปลว่าบน (จะรู้เรื่องมั้ยนี่ ?) รวมๆแล้วก็หมายความว่าเมื่อคุณลากเมาส์ให้ปลายลูกศร ไปวางอยู่บนสิ่งหนึ่งก็จะเกิดการโต้ตอบขึ้น สิ่งที่ว่านั้นคือ link นั้นเอง
· <a href = "c:/" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ'; return true">กดตรงนี้</a>
(ผมยกมาหมดเลย เพราะมันสัมพันธ์กันหมด ตอนนี้อย่าเพิ่งสนใจท่อน ; return true) ท่อนข้างบนนี้ทั้งหมดหมายความว่า เมื่อคุณเอาเมาส์ไปวางบน link กดตรงนี้ ตัวสร้างการตอบโต้ (onMouseOver) ก็จะทำให้สั่งให้ แถบยาวๆด้านล่างหน้าต่างที่ตอนแรกว่างๆอยู่ แสดงตัวหนังสือว่า 'กดเพื่อไปที่ไดร์ฟซีของคุณ' คำสั่งที่ทำหน้าที่นี้ก็คือ window.status จะสังเกตได้ว่าลักษณะคำสั่งจะเป็นไปตามกฎการเขียนจาวาสคริป(object.property) window(หน้าต่าง) เป็นตัวถูกกระทำหรือ object ส่วน status นั้นไม่ใช้วิธีกระทำ(method)นะครับ แต่เป็นส่วนประกอบที่มีอยู่แล้วใน window แถบยาวๆด้านล่างหน้าต่าง ก็คือ status ไงครับ สังเกตอีกนะครับว่า คำสั่ง onMouseOver จะตามด้วยเครื่องหมายเท่ากับและเครื่องหมายคำพูดเปิดและปิดคำสั่งทั้งสองด้าน ภายในนั้นจะต้องไปมีเครื่องหมายคำพูดซ้ำอีก (ก็กฎมันเป็นอย่างนี้ ต้องยอมรับครับ ไม่งั้น Error)
'กดเพื่อไปที่ไดร์ฟซีของคุณ'; return true">กดตรงนี้</a>
(ผมยกมาหมดเลย เพราะมันสัมพันธ์กันหมด ตอนนี้อย่าเพิ่งสนใจท่อน ; return true) ท่อนข้างบนนี้ทั้งหมดหมายความว่า เมื่อคุณเอาเมาส์ไปวางบน link กดตรงนี้ ตัวสร้างการตอบโต้ (onMouseOver) ก็จะทำให้สั่งให้ แถบยาวๆด้านล่างหน้าต่างที่ตอนแรกว่างๆอยู่ แสดงตัวหนังสือว่า 'กดเพื่อไปที่ไดร์ฟซีของคุณ' คำสั่งที่ทำหน้าที่นี้ก็คือ window.status จะสังเกตได้ว่าลักษณะคำสั่งจะเป็นไปตามกฎการเขียนจาวาสคริป(object.property) window(หน้าต่าง) เป็นตัวถูกกระทำหรือ object ส่วน status นั้นไม่ใช้วิธีกระทำ(method)นะครับ แต่เป็นส่วนประกอบที่มีอยู่แล้วใน window แถบยาวๆด้านล่างหน้าต่าง ก็คือ status ไงครับ สังเกตอีกนะครับว่า คำสั่ง onMouseOver จะตามด้วยเครื่องหมายเท่ากับและเครื่องหมายคำพูดเปิดและปิดคำสั่งทั้งสองด้าน ภายในนั้นจะต้องไปมีเครื่องหมายคำพูดซ้ำอีก (ก็กฎมันเป็นอย่างนี้ ต้องยอมรับครับ ไม่งั้น Error)
· ; เครื่องหมายลูกน้ำและจุดข้างบน(ผมเรียกเป็นไทยไม่เป็น แต่ภาษาอังกฤษ เขาเรียก เซมิโคลอน semicolon) ; ใส่เพื่อบอกคอมว่าเราจบคำสั่ง window.status แล้ว และให้คอมพร้อมที่จะรับคำสั่งต่อไป (return true) ในบรรทัดเดียวกัน หมายความว่าหากคุณไม่ใส่เครื่องหมายนี้คุณสามารถใช้การเว้นบรรทัดเพื่อที่จะให้สคริปทำงานได้โดยไม่ Error ตามข้างล่างนี้ครับ
<a href = "c:\" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ'
return true">กดตรงนี้</a>
หากทำแบบนี้ข้างล่างนี้(ลอง copy ไปใส่ save ไว้ แล้วเปิดดูครับ)
<a href = "c:\" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ' return true">กดตรงนี้</a>
เมื่อเปิดไฟล์ที่มีสคริปผิดแบบนี้ จะขึ้น Error บอกเลยว่า สัญลักษณ์ ; หายไป
<a href = "c:\" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ'
return true">กดตรงนี้</a>
หากทำแบบนี้ข้างล่างนี้(ลอง copy ไปใส่ save ไว้ แล้วเปิดดูครับ)
<a href = "c:\" onMouseOver = "window.status =
'กดเพื่อไปที่ไดร์ฟซีของคุณ' return true">กดตรงนี้</a>
เมื่อเปิดไฟล์ที่มีสคริปผิดแบบนี้ จะขึ้น Error บอกเลยว่า สัญลักษณ์ ; หายไป
· return true เมื่อคุณเอาเมาส์ไปวางบน link สคริปก็จะตรวจสอบว่า window มีแถบยาวด้านล่าง(status bar)อยู่หรือไม่ หากพบว่ามีอยู่จริง(นั่นก็คือภาษาอังกฤษที่ว่า...return true) ก็จะแสดงตัวหนังสือที่ status bar และถึงแม้ว่าคุณจะลากเมาส์ออกจาก link ตัวหนังสือใน status bar ก็ยัง ปรากฎอยู่เสมอ (ลองทดสอบดูใหม่ได้โดย กด Refresh)
แล้วถ้าเราลบสองคำนี้ทิ้งล่ะ(ลองทำดูครับ save แล้วเปิดทดสอบดู) ลองคิดดูว่า ถ้าไม่มีการตรวจสอบว่า status bar มีอยู่จริงหรือไม่ เมื่อคุณเอาเมาส์ไปวางบน link status bar จะแสดงที่อยู่ของ link ที่คุณกำลังจะเปิด ซึ่งเป็นธรรมชาติพื้นฐานของ status bar ครับ (ภาษาอังกฤษจะใช้คำว่า default ซึ่งหมายถึงค่าหรือวิธีการที่ถูกกำหนดมาแต่แรก) พอเอาเมาส์ออกจาก link ถึงจะเห็นตัวหนังสือโผล่ขึ้นมา พอเอาเมาส์ไปวาง อีกครั้ง ก็จะเห็นที่อยู่ของ link โผล่ขึ้นมาแทน ลองเอาเมาส์มาวางบน link ข้างล่างนี้สิครับ ผมลบ return true ออกแล้ว
แล้วถ้าเราลบสองคำนี้ทิ้งล่ะ(ลองทำดูครับ save แล้วเปิดทดสอบดู) ลองคิดดูว่า ถ้าไม่มีการตรวจสอบว่า status bar มีอยู่จริงหรือไม่ เมื่อคุณเอาเมาส์ไปวางบน link status bar จะแสดงที่อยู่ของ link ที่คุณกำลังจะเปิด ซึ่งเป็นธรรมชาติพื้นฐานของ status bar ครับ (ภาษาอังกฤษจะใช้คำว่า default ซึ่งหมายถึงค่าหรือวิธีการที่ถูกกำหนดมาแต่แรก) พอเอาเมาส์ออกจาก link ถึงจะเห็นตัวหนังสือโผล่ขึ้นมา พอเอาเมาส์ไปวาง อีกครั้ง ก็จะเห็นที่อยู่ของ link โผล่ขึ้นมาแทน ลองเอาเมาส์มาวางบน link ข้างล่างนี้สิครับ ผมลบ return true ออกแล้ว
กดตรงนี้
(เห็นไหมครับว่า หากไม่มี return true เราจะได้เทคนิคใหม่แบบนี้)
(เห็นไหมครับว่า หากไม่มี return true เราจะได้เทคนิคใหม่แบบนี้)
เมื่อเปลี่ยนคำสั่งในเครื่องหมายคำพูดของ onMouseOver ผลที่ได้ก็เปลี่ยนไป
เราเพิ่งพูดไปในเรื่องของส่วนประกอบ(ภาษาอังกฤษใช้ property แปลว่าคุณสมบัติ แต่ผมแปลว่าส่วนประกอบแทน คิดว่าคงจะเข้าใจได้ง่ายขึ้นนะครับ) อันหนึ่งของ window นั่นคือ status bar ซึ่งในตัวอย่างข้างบน เราได้แก้ไข status bar ด้วยคำสั่ง window.status='(ตัวหนังสือที่จะใส่ลงไป)' ตัวถูกกระทำตัวอื่นๆ ก็มีส่วนประกอบต่างๆเช่นเดียวกันครับ ใน HTML คุณสามารถเปลี่ยนสีพื้นหลังได้ด้วยคำสั่ง BGCOLOR(จะพิมพ์ตัวเล็กหรือใหญ่ก็ได้ ไม่ Error นั่นเป็นลักษณะของ HTML) ในจาวาสคริป ก็สามารถเปลี่ยนสีพื้นหลังได้เช่นเดียวกันครับ ด้วยวิธีกระทำ(method)ที่เรียกว่า bgColor (สังเกตว่าต้องพิมพ์ตัว C ใหญ่เท่านั้น) ลองมาคิดวิธีการเขียนจาวาสคริปที่จะทำให้ สีพื้นหลังเปลี่ยน หลังจากลากเมาส์ไปวางบน link ดูสิครับ โดยเขียนให้เป็นไปตามกฏ... ตัวถูกกระทำ.ส่วนประกอบ (อ่านไปทำตามไปได้เลยครับ)
1. แน่นอนว่าเรายังใช้จาวาสคริปอันเดิม แต่คำสั่ง window.status นั้นต้องเปลี่ยนให้เป็นคำสั่ง เปลี่ยนสีพื้นหลัง ว่าแต่ว่า จะพิมพ์ยังไงล่ะ...
2. คุณจะเลือกตัวถูกกระทำ เป็นอะไรดี ระหว่าง window(หน้าต่างที่เปิดอยู่) หรือ document(เนื้อหาในหน้าต่าง) ลองคิดดู...ว่าสีพื้นหลังมันถูกใส่ลงในไหนกันล่ะครับ ลงในกรอบที่มีพื้นขาวๆในหน้าต่าง(window) ใช่ใหม่ครับ ตรงนั้นละครับคือ document เราจึงต้องลบคำว่า window ในสคริปทิ้ง แล้วพิมพ์คำว่า document เข้าไปแทน
3. ส่วน status นั้นไม่ใช่ property ของ document ครับ เราต้องเปลี่ยนให้เป็น bgColor (อย่าลืมพิมพ์ C ตัวใหญ่ ไม่งั้นสีจะไม่เปลี่ยน)
4. ส่วนถัดมาเราไม่ต้องการข้อความอะไรให้ขึ้นบน status bar อีกแล้ว ต้องลบทิ้ง(ลบแต่ข้อความ ไม่ต้องลบเครื่องหมายขีดเดียวที่ปิดซ้ายขวาข้อความนะครับ) แล้วเปลี่ยนเป็นชื่อสีภาษาอังกฤษแทน ในที่นี้ผมใช้ orange ที่แปลว่าสีส้มครับ (ไม่จำเป็นต้องทำตามผมนะครับ หากคุณจะใช้สีอื่น ก็พิมพ์ชื่อสีอื่นลงไปได้)
5. ทำเสร็จแล้วก็ save แล้วเปิดออกมาทดสอบกันครับ...อ้อ! เกือบลืม...ให้ใส่ return true ด้วยนะครับ สีมันจะได้คงอยู่ตลอดหลังจากลากเมาส์ไปวางบน link
คุณเขียนออกมาในลักษณะนี้ใช่มั้ยครับ...
<a href="c:/"onMouseOver="document.bgColor='orange';return true">กดตรงนี้ </a>
link ข้างล่างนี้ก็จะเป็นผลของสคริปนี้ครับ...(ลากเมาส์มาวางบน link)
<a href="c:/"onMouseOver="document.bgColor='orange';return true">กดตรงนี้ </a>
link ข้างล่างนี้ก็จะเป็นผลของสคริปนี้ครับ...(ลากเมาส์มาวางบน link)
กดตรงนี้
(แสบตามั้ยครับ...กลับไปเป็นพื้นขาวเหมือนเดิมโดย กด Refresh หรือปุ่ม F5 ให้เครื่องโหลดใหม่ครับ)
(แสบตามั้ยครับ...กลับไปเป็นพื้นขาวเหมือนเดิมโดย กด Refresh หรือปุ่ม F5 ให้เครื่องโหลดใหม่ครับ)
ถ้าต้องการให้มีทั้งตัวหนังสือขึ้นพร้อมกับเปลี่ยนสีพื้นหลังล่ะ ทำไง...
ฮึ...คุณนี่เรื่องมากจริงๆ โลภมากนะ..จะเอาทั้งสองเหตุการณ์มาเกิดขึ้นพร้อมกันเชียวรึ ได้เลย...ผมจะบอกวิธีทำเดี๋ยวนี้ละครับ(ทำตามที่ผมบอกนะครับ)
· แน่นอนว่าต้อง มีทั้งคำสั่งเขียนข้อความลง status bar และคำสั่งเปลี่ยนสีพื้นหลังรวมกันอยู่หลัง onMouseOver ในเครื่องหมายคำพูดแน่ๆ คุณลองพิมพ์ทั้งสองอันเรียงกันสิครับ ถูกหรือไม่ ตอนนี้ยังไม่สำคัญ
<a href="c:\"onMouseOver="window.status='กดเพื่อไปที่ไดร์ฟซีของคุณ' ;
return true onMouseOver=document.bgColor= 'orange'">กดตรงนี้</a>
<a href="c:\"onMouseOver="window.status='กดเพื่อไปที่ไดร์ฟซีของคุณ' ;
return true onMouseOver=document.bgColor= 'orange'">กดตรงนี้</a>
· หากพิมพ์อย่างนี้ข้างบนนี้ก็จะหมายความว่า คำสั่งทั้งสองไม่แยกออกจากกัน(สังเกตจาก return true ที่ตามด้วย onMouseover ทันที) ผลของสคริปนี้จะทำให้เกิด Error ครับ เป็น Error ที่บอกว่าขาดสัญลัญลักษณ์จุดลูกน้ำ ; (semicolon ต่อไปผมจะเรียกแต่จุดลูกน้ำนะครับ) คุณก็ลองเติมจุดลูกน้ำลงไประหว่าง return true กับ onMouseOver ดูสิครับ แล้วทดสอบผลของมัน...จะพบว่า Error หายไป...แต่เมื่อลากเมาส์ไปวางบน link แล้ว พื้นหลังดันไม่ยอมเปลี่ยนสีซะนี่ ที่เป็นเช่นนี้เพราะว่า เครื่องหมายจุดลูกน้ำ เป็นตัวบอกคอมว่า คำสั่ง onMouseOver มันจบที่จุดนี้นะ(ตรงที่จุดลูกน้ำอยู่) คำสั่งที่เลยไปคอมจึงไม่อ่านอีก ดังนั้น คุณต้องใช้สัญลักษณ์ใหม่เข้ามาช่วย......
· สัญลักษณ์นั้นคือลูกน้ำครับ , (ภาษาอังกฤษเรียก comma) คุณลองลบจุดลูกน้ำทิ้งแล้วใส่ลูกน้ำเข้าไปแทนที่สิครับ save ซะ...เมื่อเปิดออกมาจะพบว่าคราวนี้สคริป ทำงานได้ดังใจ
· กฏอันใหม่ของจาวาสคริป : ใช้ลูกน้ำเพื่อแยกหลายๆเหตุการณ์ออกจากกัน
· ถึงแม้จะมีเหตุการณ์มากกว่า 1 แต่เครื่องหมายคำพูดก็ยังคงใส่ในจุดที่เริ่มต้นเหตุการณ์แรก และจุดที่ท้ายเหตุการณ์สุดท้ายรวมเป็นสองจุดเสมอ อย่าลืมว่าภายในต้องใช้ เครื่องหมายขีดเดียวเท่านั้น
ตามที่ผมบอกมานั้น เขียน(พิมพ์)สคริปได้ดังนี้ครับ...
<a href="c:\" onMouseOver = "window.status = 'กดเพื่อไปที่ไดร์ฟซีของคุณ'
; return true , onMouseOver = document.bgColor = 'orange' ">กดตรงนี้</a>
(ผมไม่แสดงผลของสคริปนี้นะครับ...ให้คุณลองไปทำกันเอาเอง)
สคริปข้างล่างทั้งสองนี้ก็ให้ผลเช่นเดียวกันครับ...จาวาสคริปนี่ มันเขียนได้หลายรูปแบบครับ...
<a href="c:\"onMouseOver = "window.status = 'กดเพื่อไปที่ไดร์ฟซีของคุณ'
; return true ,document.bgColor='orange'">กดตรงนี้</a>
<a href="c:\" onMouseOver ="window.status='กดเพื่อไปที่ไดร์ฟซีของคุณ'
; document.bgColor = 'orange';return true">กดตรงนี้</a>
แต่คุณไม่จำเป็นต้องเขียนได้ทุกแบบหรอกครับ ทำได้แบบเดียว แล้วเอามาใช้ได้จริง...ก็เพียงพอแล้ว
ยังมีตัวสร้างการโต้ตอบอีกมากครับ ไม่ได้มีแค่ onMouseOver ในบทต่อไป ผมจะเน้นหนักแต่เรื่องนี้ และการนำมาผสมผสานใช้ให้เกิดหลายๆเหตุการณ์ คุณรู้สึกไหมครับว่าบทเรียนจะเริ่มสอนให้คุณคิดตามลำดับมากขึ้น โปรดระลึกไว้ว่า ภาษาจาวาสคริปนี้เป็นภาษาคอมฯที่มีเหตุผลสูง หลายบทต่อๆไปจะพูดถึงแต่เพียงลำดับชั้นและความเชื่อมโยงกันของแต่ละ ตัวถูกกระทำ และ ส่วนประกอบ ที่ต้องทำอย่างนี้ก็เพราะว่าภาษานี้มีความเป็นเหตุเป็นผลสูงนั่นเอง.....เอ่อ..อย่าเพิ่งเครียด อย่าเพิ่งท้อนะครับ ผมแค่เกริ่นนำเท่านั้นเอง(555 ตอนนี้ยังง่ายอยู่ เดี๋ยวบทต่อๆไป จะรู้ว่านรกมีจริง)....ในวงเล็บนั่นผมล้อเล่นนะครับ อย่าจริงจังอะไร.....เชื่อผม ทำตามที่ผมบอก ทำการบ้านให้ เรียบร้อยได้ทุกๆบท ไม่มีปัญหาแน่ครับ ตอนนี้ ก่อนที่จะเขียนสคริปลองใช้เวลามาจินตนาการดูสิครับว่า คุณอยากให้ในหน้าต่างเว็บของคุณตอบโต้กับผู้ใช้ หรือเกิดอะไรพิเศษๆขึ้นมาบ้าง คุณสามารถทำให้จินตนาการนั้นเป็นความจริงได้ ด้วยการเขียนจาวาสคริปครับ
<a href="c:\" onMouseOver = "window.status = 'กดเพื่อไปที่ไดร์ฟซีของคุณ'
; return true , onMouseOver = document.bgColor = 'orange' ">กดตรงนี้</a>
(ผมไม่แสดงผลของสคริปนี้นะครับ...ให้คุณลองไปทำกันเอาเอง)
สคริปข้างล่างทั้งสองนี้ก็ให้ผลเช่นเดียวกันครับ...จาวาสคริปนี่ มันเขียนได้หลายรูปแบบครับ...
<a href="c:\"onMouseOver = "window.status = 'กดเพื่อไปที่ไดร์ฟซีของคุณ'
; return true ,document.bgColor='orange'">กดตรงนี้</a>
<a href="c:\" onMouseOver ="window.status='กดเพื่อไปที่ไดร์ฟซีของคุณ'
; document.bgColor = 'orange';return true">กดตรงนี้</a>
แต่คุณไม่จำเป็นต้องเขียนได้ทุกแบบหรอกครับ ทำได้แบบเดียว แล้วเอามาใช้ได้จริง...ก็เพียงพอแล้ว
ยังมีตัวสร้างการโต้ตอบอีกมากครับ ไม่ได้มีแค่ onMouseOver ในบทต่อไป ผมจะเน้นหนักแต่เรื่องนี้ และการนำมาผสมผสานใช้ให้เกิดหลายๆเหตุการณ์ คุณรู้สึกไหมครับว่าบทเรียนจะเริ่มสอนให้คุณคิดตามลำดับมากขึ้น โปรดระลึกไว้ว่า ภาษาจาวาสคริปนี้เป็นภาษาคอมฯที่มีเหตุผลสูง หลายบทต่อๆไปจะพูดถึงแต่เพียงลำดับชั้นและความเชื่อมโยงกันของแต่ละ ตัวถูกกระทำ และ ส่วนประกอบ ที่ต้องทำอย่างนี้ก็เพราะว่าภาษานี้มีความเป็นเหตุเป็นผลสูงนั่นเอง.....เอ่อ..อย่าเพิ่งเครียด อย่าเพิ่งท้อนะครับ ผมแค่เกริ่นนำเท่านั้นเอง(555 ตอนนี้ยังง่ายอยู่ เดี๋ยวบทต่อๆไป จะรู้ว่านรกมีจริง)....ในวงเล็บนั่นผมล้อเล่นนะครับ อย่าจริงจังอะไร.....เชื่อผม ทำตามที่ผมบอก ทำการบ้านให้ เรียบร้อยได้ทุกๆบท ไม่มีปัญหาแน่ครับ ตอนนี้ ก่อนที่จะเขียนสคริปลองใช้เวลามาจินตนาการดูสิครับว่า คุณอยากให้ในหน้าต่างเว็บของคุณตอบโต้กับผู้ใช้ หรือเกิดอะไรพิเศษๆขึ้นมาบ้าง คุณสามารถทำให้จินตนาการนั้นเป็นความจริงได้ ด้วยการเขียนจาวาสคริปครับ
แบบฝึกหัด
เอาล่ะครับ ฟังผมโม้มาตั้งนาน... ได้เวลาของการบ้านแล้วครับ
ลองดูว่า คุณจะทำแบบฝึกหัดนี้ได้รึเปล่า ผมจะให้วิธีใหม่กับคุณ นั่นคือ... alert( ) ซึ่งจะเป็นกล่องข้อความเล็กๆที่โผล่ขึ้นมา พร้อมเสียงเตือน ซึ่งมีตัวอักษรอยู่ภายในกับปุ่ม OK อยู่ด้านล่าง ...ให้คุณสร้างสคริปที่เมื่อลากเมาส์ไปวางบน link จะเกิดกล่องข้อความนี้โผล่ขึ้นมา โดยใช้รูปแบบตามนี้ครับ
ลองดูว่า คุณจะทำแบบฝึกหัดนี้ได้รึเปล่า ผมจะให้วิธีใหม่กับคุณ นั่นคือ... alert( ) ซึ่งจะเป็นกล่องข้อความเล็กๆที่โผล่ขึ้นมา พร้อมเสียงเตือน ซึ่งมีตัวอักษรอยู่ภายในกับปุ่ม OK อยู่ด้านล่าง ...ให้คุณสร้างสคริปที่เมื่อลากเมาส์ไปวางบน link จะเกิดกล่องข้อความนี้โผล่ขึ้นมา โดยใช้รูปแบบตามนี้ครับ
alert( ' จะเอาเมาส์มาวางบนนี้ทำไมกัน! ' )
สังเกตว่า วิธี alert ไม่มีตัวถูกกระทำนำหน้า แล้วตามด้วยจุดนะครับ (จริงๆแล้วตัวถูกกระทำคือ window ซึ่งอันนี้เป็นข้อยกเว้นของวิธีการนี้..Browser(โปรแกรมเปิดเน็ต)รู้ครับว่า alert เป็นวิธีการของ window หรือใครจะพิมพ์ window ลงไปก็ไม่ผิดอะไรครับแต่จะยาวหน่อยเท่านั้นเอง) ลองคิดดูให้รอบคอบ...ดูว่าสิ่งไหนเกิดก่อน แล้วตามมาด้วยสิ่งใดต่อมา.. เรื่อยๆ... หากคิดไม่ออกหรือทำไม่ได้ ก็แสดงว่าข้อมูลในหัวที่ถูกต้องยังไม่พอ...ให้กลับไปอ่านใหม่ในบทเรียนนี้หรือบทเรียนที่ผ่านมาครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น