เก่งภาษาจาวาสคริปต์: บทเรียนที่ 23 การสุ่มข้อความและรูปภาพ

บทเรียนที่ 23 การสุ่มข้อความและรูปภาพ

บทนี้ยังคงใช้คำสั่ง if อยู่ครับ เราพยายามให้คุณคุ้นเคยกับการใช้ if ให้มากขึ้น เพราะมันจำเป็นต่อการสร้างโปรแกรมที่สร้างสรรค์และโต้ตอบกับผู้ใช้มากขึ้น

สคริป...

(หมอดูมั่วๆ)<br>

a="วันนี้คุณจะพบแต่เรื่องแย่ๆ"

b="ตอนนี้คุณจะพบปัญหาใหญ่"

c="พรุ่งนี้คุณจะมีความสุขที่สุดในชีวิต"

now=new Date()

num=(now.getSeconds() )%3

document.write("เลขที่สุ่มได้ : "+ num + "<br>")

if (num == 0){d=a}

if (num == 1){d=b}

if (num == 2){d=c}

document.write(d)

</SCRIPT>

<p>....ได้เลขอะไรครับ ดวงดีรึเปล่า ? ...ไม่ต้องโหลดใหม่นะครับ

</CENTER></BODY></HTML>

ผลของสคริปนี้

(หมอดูมั่วๆ)
เลขที่สุ่มได้ : 1
ตอนนี้คุณจะพบปัญหาใหญ่

....ได้เลขอะไรครับ ดวงดีรึเปล่า ? ...ไม่ต้องโหลดใหม่นะครับ

มาแยกโครงสร้างของสคริปกันครับ

· มาเริ่มกันที่ชุดคำสั่งครับ...เอ่อ..เฮ้ย!..ไม่ใช่ครับ ..ตัวอย่างนี้ไม่มีชุดคำสั่ง จะทำงานจากบนลงล่างตามปกติ ตอนที่โหลดหน้านี้เข้ามา (ปกติ Browser จะโหลดเอกสาร HTML จากบนลงล่างครับ)

a="วันนี้คุณจะพบแต่เรื่องแย่ๆ"
b="ตอนนี้คุณจะพบปัญหาใหญ่"
c="พรุ่งนี้คุณจะมีความสุขที่สุดในชีวิต"
now=new Date()
num=(now.getSeconds() )%3
document.write("เลขที่สุ่มได้ : "+ num + "<br>")

คุณน่าจะแยกโครงสร้างข้างบนได้เองแล้วนะครับ จะคล้ายๆกับสองบทที่แล้ว ในที่นี้เรากำหนดชื่อตัวแปรสามตัวคือ a , b และ c เป็นตัวแทนของแต่ละข้อความ ซึ่งต้องมี " คลุมข้อความเสมอครับ สังเกตว่าการกำหนดชื่อตัวแปรในตัวอย่างนี้ ไม่มี var นำหน้านะครับ ซึ่งมีหรือไม่มีก็ทำงานได้เหมือนกันครับ (แต่ผมเคยบอกไปในบทแรกๆ ว่าไม่ต้องมีจะดีกว่าครับ เพราะผมเคยเจอ Error เมื่อใช้ var แต่ Error หายไปเมื่อลบ var ออก)

· ต่อมาโปรแกรมทำการสุ่มตัวเลขจากเวลา ด้วยนาฬิกาในคอมฯของคุณ %3 หมายถึงเลข 0 1 และ 2 สังเกตว่าเราไม่จำเป็นต้องกำหนด var num=num+1 ...เพราะว่าเราใช้เริ่มต้นใช้ตัวเลขที่ 0 หากเราเริ่มต้นใช้ตัวเลขที่ 1 เราถึงกำหนด num=num+1

เข้าใจไหมครับ ? คุณไม่จำเป็นต้องเดินอ้อมเพื่อไปให้ถึงจุดหมาย ผมเพียงแค่อยากให้คุณเข้าใจว่า คุณสามารถใช้ศูนย์ได้ เมื่อคุณต้องการ คุณไม่จำเป็นต้องกำหนดที่เลขเดียวเสมอไป

· ต่อมาเราใช้คำสั่งแรกสุดที่คุณเรียน document.write() เพื่อแสดงค่าตัวเลขที่สุ่มได้ขึ้นมาบนหน้าจอ

· เรามาดูส่วนที่สองของจาวาสคริปกันครับ...

if (num == 0){d=a}
if (num == 1){d=b}
if (num == 2){d=c}
document.write(d)

· ยังจำได้ไหมครับว่า เงื่อนไขในคำสั่ง if การเปรียบเทียบว่าเท่ากันไหม ใช้เครื่องหมายเท่ากับสองครั้ง( == ) ไม่ใช่เครื่องหมายเดียวนะครับ (ผมชอบใช้ผิดอยู่บ่อยครับ ไม่เกิด Error แต่ทำให้เงื่อนไขนั้นไม่มีผลเลยครับ คุณต้องระวังการใช้ครับ)

· หากเงื่อนไขใน if เป็นจริง คำสั่งหรือการกำหนดตัวแปรภายในปีกกาก็จะทำงาน ...เราได้กำหนดให้สุ่มจาก 0 ถึง 2 แล้ว ...ก็จะมีเพียงเงื่อนไขเดียวที่เป็นจริงครับ

· โปรดสังเกตว่า เงื่อนไขหลัง if จะถูกหุ้มด้วยวงเล็บ(parentheses)เปิดและปิด ส่วนผลของเงื่อนไขจะถูกหุ้มด้วยปีกกา(brackets)เปิดและปิด

· และส่วนสุดท้าย document.write(d) ก็จะถูกส่งเข้าหน้าจอ ไม่ว่าข้อความนั้นจะเป็นอะไร

แบบฝึกหัด

คุณรู้วิธีการสุ่มข้อความด้วยการสุ่มจากตัวเลข เรียบร้อยแล้ว คราวนี้เราจะให้คุณสุ่มรูปภาพขึ้นมาแสดงบนหน้าจอรูปเดียว จากทั้งหมดสามรูป โดย save รูปภาพจาก link ข้างล่าง มาเข้าเครื่องของคุณ

http://www.htmlgoodies.com/primers/jsp/hgjsp_23.html

link ข้างบนก็คือบทเรียนภาษาอังกฤษที่มีเนื้อหาเหมือนกับอันนี้ไงครับ ดูในด้านล่างของหน้า link จะเห็นรูปภาพหน้าการ์ตูน 3 หน้า ที่มีอารมณ์แตกต่างกัน ให้คุณคลิ๊กขวาที่รูปแล้วเลือก save ลงเครื่องของคุณทั้งสามรูปครับ แล้วจำด้วยว่า save ลงที่ใด เพราะคุณจำเป็นต้องใช้ที่อยู่นั้นมากๆครับ หรือหากคุณมีชั่วโมงเน็ตมาก ให้ใช้ที่อยู่ของรูปนั้นทางเน็ตเลยก็ได้ครับ เวลาทดสอบจำเป็นต้องต่ออินเตอร์เน็ตด้วยครับ อ้อ...แล้วใส่คำบรรยายใต้รูปด้วยนะครับว่า... "นี่คืออารมณ์ของคุณในวันนี้"

คำใบ้ : คุณไม่จำเป็นต้องแก้ไขหรือเพื่อเติมคำสั่งใดๆ ในสคริปตัวอย่างเลย และโค้ด HTML ที่ใช้แสดงภาพอย่างง่ายเขียนได้ดังข้างล่างนี้ครับ แล้วอย่าลืมว่า ภายในคำสั่ง document.write() ให้ใช้เครื่องหมายขีดเดียวเท่านั้นครับ

< img src=" ที่อยู่ของรูป(URL) " >

เฉลย

<HTML><BODY>
<CENTER style="font-family:angsana new;font-size:20pt">
<SCRIPT type="text/javascript">
a="ที่อยู่ของรูปแรก"
b="ที่อยู่ของรูปสอง"
c="ที่อยู่ของรูปสาม"
now=new Date()
num=(now.getSeconds() )%3
document.write("เลขที่สุ่มได้ : "+ num + "<br>")
if (num == 0){d=a}
if (num == 1){d=b}
if (num == 2){d=c}
document.write("<img src=' "+d+" '>")
</SCRIPT>
<p>....อารมณ์ของคุณในวันนี้
</CENTER></BODY></HTML>

เก่งภาษาจาวาสคริปต์

บทเรียนที่ 23 การสุ่มข้อความและรูปภาพ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

ทำอินโทรเอฟเฟค ในมือถือ

ฟรีวีดีโอแบ็คกราว สำหรับทำคลิป

ค้นหาบล็อกนี้

เนื้อหาบล็อก

คลังบทความ

สถิติ