แกะcodeถอดรหัสjavascript

หวัดดีก๊าบ เพื่อนๆทุกคน ในที่สุดป๋มก็กลับมาอย่างเต็มตัวเสียที ได้จอคอมพ์ที่เอาไปแคลมกลับมาแล้ว เย้...ไชโยโห่ฮิ้ว หลังจากที่ไม่มีจอเล่นมาหลายวัน

มาอธิบายสคริปต์ตามที่ได้สัญญาไว้ ก่อนอื่นต้องบอกก่อนว่าไม่ได้เก่งอะไรนัก แค่รู้บางนิดโหน่ย แค่อยากแบ่งปันความรู้ที่มีอยู่เพียงเล็กน้อยให้เพื่อนๆ เอาเป็นว่าเรามาร่วมแชร์ความรู้กัน ใครอธิบายอะไรได้ตรงไหนก็มาช่วยๆกันละกันน้า ส่วนไหนที่ป๋มอธิบายแย้วผิดพลาดประการใดหรือต้องการเสริมตรงไหน เพื่อนๆแจมได้เลยน้า

 

แกะjavaภาพสะท้อน

ตอนแรกกะไว้ว่าจะอธิบายสคริปต์ภาพตก แต่รู้สึกว่ามันจะยาวและเยอะ(ยากนิดๆด้วย) เลยขออธิบาย สคริปต์ภาพสะท้อนผิวน้ำก่อนละกัน เรียกน้ำย่อยกันก่อน

การเขียนjavascriptจะเหมือนกับการเขียนโปรมแกรมภาษาต่างๆ ถ้าใครมีพื้นฐานการเขียนโปรแกรมมาบ้างก็จะเข้าใจได้ง่าย มาเริ่มกันเลยน้า

codeภาพสะท้อนผิวน้ำเต็มๆมีดังนี้

PHP:

 var pic = "http://palungjit.org/attachments/a.7767/"; //picture url
document.write('<img id="reflect" src="'+pic+'"><br>')
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all){
document.write('<img id=mdiv src="'+document.all.reflect.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')
window.onload=f1
} 

1.คำสั่งแรก var เป็นกำหนดตัวแปร เช่น x=2 หรือ y=3 เป็นต้น ในสคริปต์นี้ กำหนดให้ตัวแปร ที่ชื่อว่า pic มีค่าเท่ากับ [url="http://palungjit.org/attachments/a.7767/"http://palungjit.org/attachments/a.7767/url]

การกำหนดตัวแปรจะมีตัวแปรที่มีค่าเป็นตัวเลขบอกจำนวน 1,2,3,...และตัวแปรที่เป็นตัวอักษร การกำหนดจะต่างกัน หากกำหนดตัวแปรที่เป็นตัวเลขมีค่าทางจำนวน จะกำหนดเช่น var x=2; หากกำหนดตัวแปรเป็นตัวอักษรจะกำหนดเช่น x="hello"; จะสังเกตว่าการกำหนดตัวแปรเป็นตัวอักษรต้องอยู่ภายใต้เครื่องหมาย"_"เสมอ และต้องระวังหากกำหนดตัวเลขภายใต้เครื่องหมาย"_"เช่น x="2"; ตัวเลขนั้นจะไม่มีค่าทางจำนวนจะมองว่าเป็นอักษรตัวหนึ่งคืออักษรที่เป็นเลขสองนั่นเอง การกำหนดตัวแปรต้องจบด้วยเครื่องหมาย;เสมอเพื่อบอกให้รู้ว่าการกำหนดตัวแปรของเราเสร็จสิ้นแล้ว

สรุปรูปแบบการใช้คำสั่ง var

ตัวแปรที่มีค่าเป็นจำนวนตัวเลข

var x=n; เมื่อ n คือตัวเลขใดๆ

ตัวแปรที่มีค่าเป็นตัวอักษร

var x="s"; เมื่อ s คือตัวอักษรใดๆ

2.เครื่องหมาย // เป็นการบอกว่าข้อความใดๆในบรรทัดนั้นบรรทัดเดียวหลังเครื่องหมายนี้เป็นคอมเมนต์หรือส่วนอธิบาย ไม่มีผลต่อการทำงานของสคริปต์ ในสคริปต์นี้ //picture url เป็นการอธิบายว่าให้ใส่ที่อยู่ของรูป

เอาไว้แค่นี้ก่อนละกันเดี๋ยวมาต่อ

 

แกะjavaภาพสะท้อน2

3.คำสั่ง document.write เป็นคำสั่งให้สคริปต์แสดงผลข้อความที่อยู่ในเครื่องหมาย(_)ออกทางหน้าจอ เหมือนกับเราพิมพ์ข้อความออกทางหน้าจอนั่นเอง

รูปแบบการใช้งาน

document.write('p') เมื่อ p คือข้อความใดๆ

จากสคริปต์ภาพสะท้อนกำหนดให้มีการแสดงผลหรือพิมพ์

PHP:

<img id="reflect" src="http://www.palungjit.org/board/atta...ntid=7767&stc=1">

ออกทางหน้าจอ ซึ่งเมื่อพิมพ์ออกไปแล้ว มันคือ html code ที่ให้แสดงรูปนั่นเอง

มีข้อสังเกตอยู่นิดคือในสคริปต์ภาพสะท้อนข้อความในวงเล็บจะแบ่งเป็นสามช่วง ช่วงแรก

PHP:

'<img id="reflect" src=" '

ช่วงสอง+pic+ ช่วงสาม ' ">' สังเกตดีๆนะ ที่ต้องแบ่งอย่างนี้เพราะมีการเรียกค่าตัวแปรที่กำหนดไว้มาใช้ หากไม่แยกออกมาจะถูกมองว่าpicเป็นข้อความไม่ใช่ตัวแปร ซึ่งการพิมพ์ข้อความร่วมกับเรียกค่าตัวแปรมาใช้จะเป็นรูปแบบนี้เสมอ คือตัวแปรจะต้องไม่อยู่ในเครื่องหมาย'_'และต้องเชื่อมระหว่างข้อความกับตัวแปรด้วยเครื่องหมาย+

 

แกะjavaภาพสะท้อน3

4.html code img คำสั่งแสดงผลรูปภาพ ปกติพิมพ์แค่

PHP:

<img src="url">

ก็พอ(urlคือที่อยู่ของรูป)แต่ในสคริปต์ภาพสะท้อนมีการกำหนด id ด้วย การกำหนด id เป็นเหมือนการระบุชื่อรูป เพื่อเรียกใช้งานรูปประกอบคำสั่งอื่นอีกในภายหลังจาก id

5.คำสั่ง function เป็นการกำหนดชุดคำสั่งขึ้นมา เพื่อเรียกใช้ในภายหลัง ชุดคำสั่งภายในฟังก์ชั่นจะยังไม่มีการทำงานจนกว่าจะมีการเรียกใช้ การกำหนดชุดคำสั่งโดยฟังก์ชั่นจะมีประโยชน์มากในชุดคำสั่งที่มีการใช้งานบ่อยๆ หรือมีการใช้งานร่วมกับคำสั่งอื่นๆ ซึ่งการเรียกใช้ทำโดยอ้างถึงชื่อของฟังก์ชั่นเท่านั้น

รูปแบบการใช้งานคำสั่งfunction

function name(){
........................
}

เมื่อ name คือชื่อของฟังก์ชั่นที่เราตั้งขึ้นและภายในปีกกา{_}คือชุดคำสั่งที่เราต้องการกำหนดให้กับฟังก์ชั่น

6.คำสั่ง setInterval เป็นการกำหนดเวลาในการทำซ้ำคำสั่งว่าให้ห่างกันเท่าไหร่(สังเกตคำสั่งอักษรตัวใหญ่เล็กจะมีผลคือ setinterval จะไม่ใช่ setInterval คำสั่งนี้ต้องพิมพ์ว่า setInterval เท่านั้น)

รูปแบบการใช้งาน

setInterval("s",t)

เมื่อ s คือคำสั่งที่ต้องการให้ทำซ้ำ และ t คือระยะห่างของเวลาในการทำซ้ำเป็นมิลลิวินาที(1/1000วินาที)

 

สวัสดค่ะคุณ Tom ไรดิน่ามาจัดการ save and print วิธีการเพื่อเก็บไปศึกษาเรียบร้อยแล้วค่ะ เห็นฝีมือการสอนของคุณหรือยังคะ อิอิอิ เดี๋ยวไรดิน่าเอามาใชว์หน่อยดีกว่า

 

แกะjavaภาพสะท้อน4

7.การกำหนดเงื่อนไข if เป็นการกำหนดว่าหากเงื่อนไขตรงกับที่กำหนด ให้มีการทำงานของชุดคำสั่งที่ได้กำหนดไว้

รูปแบบการใช้งานif

if(c){
....................
}

เมื่อ c คือเงื่อนไขที่เรากำหนดและภายในปีกกา{_}คือชุดคำสั่งที่หากตรงตามเงื่อนไขจะมีการทำงาน

จากสคริปต์ภาพสะท้อน จะเห็นว่าเงื่อนไขคือ document.all ซึ่งเป็นการตรวจสอบว่าใช่ Internet Exploror หรือไม่ ถ้าใช่ให้ทำชุดคำสั่งภายใน{_} ถ้าเป็น Netscape จะไม่มีการทำงาน(เป็นการตรวจสอบเบราเซอร์นั่นเอง)

8.ส่วนของภาพสะท้อนพริ้วไหว คำสั่ง document.write, img และ id ได้กล่าวไปแล้วข้างต้นว่าเป็นการแสดงภาพ ซึ่งคำสั่งภายใต้ if นี้เป็นการทำภาพสะท้อน มีการกำหนดsource(ที่อยู่ของรูป) เป็นการเรียกใช้งานรูปที่ได้กำหนดให้แสดงจากคำสั่งimgก่อนหน้า คือ document.all.reflect.src จะเห็นว่า reflect คือ id ของรูปที่ได้กำหนดไว้ล่วงหน้า

คำสั่ง style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"

เป็นการกำหนดรูปแบบ(style)ให้กับรูป
filter เป็นการใส่ฟิวเตอร์ต่างๆให้กับรูปในสคริปต์ภาพสะท้อนนี้คือ wave()
wave() เป็นการใส่คลื่นให้กับรูป ภายในวงเล็บจะเป็นการกำหนดรูปแบบของคลื่น
strength เป็นการกำหนดความสูงของลูกคลื่น
freq เป็นการกำหนดความถี่ของลูกคลื่น
phase เป็นการกำหนดตำแหน่งของลูกคลื่น
lightstrength เป็นการกำหนดความมากน้อยของเส้นแสงเงา

blur() เป็นการกำหนดให้ภาพมีการมัวไม่ชัดของภาพ

flipv() เป็นการกำหนดให้มีการพลิกภาพตามแนวตั้ง

9.คำสั่ง window.onload=f1 เป็นการกำหนดให้มีการโหลดภาพให้เรียบร้อยก่อน จากนั้นจะไปเรียกฟังก์ชั่น f1 มาทำงาน

10.คำสั่ง mdiv.filters.wave.phase+=10 เป็นการกำหนดให้ตำแหน่งของลูกคลื่นมีการเปลี่ยนแปลง(เป็นส่วนที่ทำให้ลูกคลื่นมีการเคลื่อนที่)
mdiv เรียกใช้งานภาพสะท้อนโดย id ที่กำหนดไว้(ลองย้อนไปดูเราได้กำหนด id ภาพสะท้อนเป็น mdiv)
filters.wave.phase+=10 เป็นการเพิ่มค่าให้กับตำแหน่งของลูกคลื่นทีละ 10% คือมีการเปลี่ยนเฟส(ตำแหน่ง)ของลูกคลื่น10%จาก360องศา เท่ากับ36องศานั่นเอง คำสั่งนี้อยู่ภายใต้คำสั่งsetInterval เมื่อครบกำหนดระยะเวลาที่ได้ตั้งไว้ก็จะทำงานซ้ำคำสั่งนี้เป็นอย่างนี้เรื่อยไป จึงเห็นคลื่นมีการเคลื่อนที่


จบการอธิบายการทำงานสคริปต์ภาพสะท้อน

 

โอ้...กว่าจะอธิบายจบ ไม่ง่ายเลยนะเนี่ย แล้วสคริปต์ภาพตกจะเป็นไงเนี่ย ยาวกว่า ยากกว่าอีก จ๊าก

ใครมีปัญหาสงสัยสคริปต์ภาพสะท้อนตรงไหน pm มาถามได้นะ

 

สคริปต์ภาพตก4ภาพ

พักยกเอาสคริปต์ภาพตก4ภาพไปดูเล่น

 

เอาไปเล่นบ้างนะคะขอบคุณ ฮับ

 

thank you so.