เล็กๆ น้อยๆ กับ Javascript และ CSS ใน Bloggang
สำหรับ Javascript และ CSS นั้น มีส่วนสำคัญอย่างมากในการทำให้ HTML มีชีวิตชีวามากกว่าที่หน้าเว็บจะเป็นเพียงแค่หน้าหนังสือที่อยู่บนจอคอมพิวเตอร์ และเหนือสิ่งอื่นใด ผมขอเกริ่นคร่าวๆ เกี่ยวกับเจ้าสองตัวนี้กันก่อนนะครับ เพราะหลายๆ ท่านอาจจะยังไม่รู้ว่ามันคืออะไร
Javascript คือภาษา Script ภาษาหนึ่งที่ทำงานบน Web Browser เพื่อให้มีการทำงานที่ดุ๊กดิ๊กได้ มีลูกเล่น และบางครั้งยังเอื้อประโยชน์ด้านข้อมูลได้มากมาย แล้วแต่ว่าคนเขียนจะเขียนไปในแนวทางไหน
CSS ย่อมาจาก Cascade Style Sheet และลักษณะการทำงานของมัน จะคล้ายๆกับเครื่องสำอาง นั่นคือ เป็นสิ่งที่คอยตกแต่งหน้าตาเว็บ ให้มีหน้าตา สีสัน ที่ HTML ธรรมดาไม่สามารถทำได้
<Script ...>
..
</Script>
คือการสั่งให้ Javascript ทำงาน
|
และ
<Style Type="Text/CSS">
..
</Style>
เป็นการกำหนด CSS ใน HTML
|
แต่สำหรับ Bloggang แล้ว มันมีอะไรมากกว่านั้นครับ!!!
นั่นคือเมื่อเราพิมพ์ลงไปในช่องใดๆ ไม่ว่าจะเป็นช่องแสดงความเห็น หรือช่องปรับ Profile ของเราเอง Bloggang จะแปลง "การขึ้นบรรทัดใหม่" ให้เป็น HTML Code ของการขึ้นบรรทัดใหม่ นั่นคือ <BR> นั่นเอง และนั่นทำให้บางครั้งการใส่ Javascript หรือ CSS ลงไปใน Bloggang จะทำให้เกิด Error ขึ้นได้
เช่น
<script>
document.title = "อิอิอิ เอิ๊ก";
</script>
เมื่อผ่านการทำงานของ Bloggang แล้ว จะกลายเป็น
<script><br>
document.title = "อิอิอิ เอิ๊ก";<br>
</script><br>
ซึ่งผิดกันเห็นๆ เลย และ CSS ก็จะเป็นเหมือนกัน นั่นคือหากมีการขึ้นบรรทัดใหม่ จะผิดทันที
|
วิธีการแก้ไขอย่างง่ายๆ ก็คือ หากจะเอา Javascript มาใส่ในช่อง Slogan หรือ Profile ให้ทำ Javascript หรือ CSS ให้เป็น "บรรทัดเดียว" ครับ แค่นี้ล่ะครับ ก็ไม่ error แล้ว
ทีนี้มี Script และ CSS ที่ยาวๆ เยอะๆ ซึ่งอาจจะเป็น Javascript ที่เป็นตัวทำเมาส์เท่ๆ ตัวทำ emoticon ฯลฯ อะไรก็แล้วแต่ ซึ่งปกติพวกนี้จะมากันเป็นไฟล์ แล้วมีจำนวนบรรทัดหลายบรรทัดมาก เราจะไม่ใส่ Javascript ยาวๆ ลงไปในช่องสองช่องดังกล่าว เพราะ ... มันใส่ได้ไม่หมดครับ มีจำกัดตัวอักษรครับ
วิธีการก็คือ .. เอา Javascript ก่อนละกัน
1. ให้ Save ไฟล์ Javascript นั้น เป็นไฟล์ นามสกุล .js เช่น mousetrail.js เป็นต้น โดยที่ "ตัด" <script..> และ </script> ออก เพราะมันจะทำให้ Error ครับ เพราะมันเป็นการประกาศค่าซ้อนกัน
2. นำไฟล์นี้ไปไว้บน Server ที่ไหนสักที่ ตรงนี้ต้องหากันเอาเองนะครับสำหรับเนื้อที่ สำหรับของผม Jetboat เค้าใจดี ให้ยืมที่ครับ อิอิ
3. เขียน code ลงใน Blog ดังนี้
| <script src="//www.ผู้ใจบุญ.com/js/mousetrail.js"></script> |
อย่างนี้เป็นต้นครับ แค่นี้ก็ได้แล้วครับ
ต่อมาคือการทำ CSS โดยเรียกไฟล์จากที่อื่นครับ วิธีการก็คล้ายๆ กับ Javascript นั่นล่ะครับ
1. Save CSS นั้นเป็นไฟล์ .css (จริงๆ เป็นอะไรก็ได้แหละครับ แต่เพื่อสื่อเข้าใจง่าย ก็เป็น .css นั่นแหละ ดีแล้ว) โดย "ตัด" <style type..> กับ </style> ออกด้วยนะครับ อันนี้จะไม่เหมือนกับ Javascript
2. upload ไปไว้บน server ที่ไหนซักที่
3. เขียน code ลงใน Blog ดังนี้
| <link type="text/css" rel="stylesheet" href="//www.ที่ไหนซักที่.com/folder/style.css"> |
เท่านี้ก็เรียบร้อยครับ สำหรับเอา Javascript หรือ CSS มาแต่งแต้ม Blog ของเราครับ |
วันที่: 29 มีนาคม 2548 เวลา:11:26:18 น.
) วันที่: 24 มกราคม 2556 เวลา:11:30:01 น.
ผู้ติดตามบล็อก : 4 คน [