พูดคุยเกี่ยวกับการใช้ Java Script ใน blogger

java1

Java Script คืออะไร ?

เป็นภาษา ที่พัฒนาขึ้นมาสำหรับเว็บไซต์(เท่านั้น) ทำให้ภาษา HTML ที่มีข้อจำกัด กลายเป็น Dynamic HTML ซึ่ง ถ้ากล่าวตามสไตล์ของผมก็คือ Java Script จะทำให้ HTML แบบเดิมๆ ดูดีมีสไตล์ มีชีวิตชีวา น่าสนใจ และใช้งานได้กว้างขวางขึ้น

ลักษณะไฟล์ของ Java Script เป็นอย่างไร ?


ไฟล์ของ Java Script จะมีนามสกุล .js

2010-01-02_122356

สามารถเปิดดู/แก้ไข ได้ด้วยโปรแกรม text editor พื้นฐานได้ เช่น ใช้โปรแกรม Notepad,Notepad2 หรือ wordpad เป็นต้น

notepad

Java Script สามารถใช้งานกับ blogger ได้หรือไม่ ?


ได้แน่นอนครับ เพราะพื้นฐานในการแสดงผลของ blogger ก็มาจากภาษา HTML

เราควรใช้ Java Script ใน blogger เมื่อใด ?


เราควรเลือกใช้ Java Script ใน blogger เมื่อ สิ่งที่เราต้องการแสดงผลไม่สามารถทำได้ด้วย HTML ตามปกติ เช่น ภาพเคลื่อนไหว สไลด์ หรือใช้เมื่อการแสดงผลที่ต้องการมีความสัมพันธ์ระหว่างองค์ประกอบต่างๆ ใน blogger (recent comment ,recent post เป็นต้น)


จะเรียกใช้จาวาสคริปต์ในบล็อกเกอร์ได้อย่างไร ?


ข้อเสียของบล็อก ก็คือ ไม่มี server เป็นของตนเอง ดังนั้นเราจึงไม่สามารถเก็บไฟล์ Java Script ไว้ที่ blogger ได้ แต่… ไม่มีอะไรที่ชาว blogger อย่างเราแก้ปัญหาไม่ได้  ในเมื่อเราไม่มี server เราก็สามารถทำให้มีได้ ด้วยเทคนิคต่างๆ ดังนี้


วิธีต่อไปนี้เป็นการแก้ปัญหาในการเรียกใช้ Java Script ใน blogger


วิธีที่ 1 ฝังลงใน template

เราสามารถฝัง Java Script ลงใน template ในบล็อกของเราได้ แต่ไม่ควรจะฝังลงไปมากเพราะจะทำให้หน้าบล็อกของเรามีขนาดใหญ่ขึ้น และจะส่งผลต่อความเร็วในการเปิด และส่งผลต่อ SEO ด้วย



ขั้นตอนการทำ

ให้เปิดไฟล์ Java Script ที่ต้องการใช้งานด้วย Notepad หรือ wordpad แล้วคัดลอกโค้ดทั้งหมด วางลงระหว่างโค้ดต่อไปนี้ แล้วนำไปใส่ในบล็อกของเรา

<script type='text/javascript'>
//<![CDATA[

ใส่ Java Script ตรงนี้แล้วนำโค้ดทั้งหมดเอาไปวางก่อนหน้า tag </head> ของบล็อก

//]]>
</script>



รูปตัวอย่าง

java0java


วิธีที่ 2  ฝาก Java Script  ไว้ที่ free file hosting ที่ยอมให้เรียกใช้ไฟล์แบบ hotlink

Host ที่แนะนำ

1. http://www.sigmirror.com (ต้องสมัครสมาชิก)
2. http://www.yourjavascript.com
3. ฝากไว้ที่ Googlecode

เมื่อฝากไฟล์เรียบร้อยแล้วให้คัดลอก URL แล้วนำมาเติมลงในโค้ด

<script src='ใส่ URL ของ java script ตรงนี้'type='text/javascript'/>

หรือใช้โค้ดด้านล่างนี้ก็ได้เช่นกัน

<script src='ใส่ URL ของ java script ตรงนี้'type='text/javascript' ></script>

จากนั้นให้นำไปวางในบล็อกในตำแหน่งที่ต้องการครับ (โดยปกติควรจะวางไว้ก่อนโค้ด </head>)

รูปตัวอย่าง

2010-01-02_122840


วิธีที่ 3 ฝากไว้ที่ google site ซึ่งผมขอยกยอดไปเขียนในบทความถัดไป


มี Java Script ให้เราใช้แบบฟรี ๆ หรือไม่ ?


มีแน่นอนครับ เพราะว่า มีจาวาสคริปต์บางอย่างเป็นที่นิยมอย่างมากในการทำเว็บไซต์ เช่น JQuery เป็นต้น

Java Script ต่อไปนี้จึงสามารถเรียกใช้ได้ทันทีโดยไม่ต้อง ฝากไฟล์ให้ยุ่งยากเหมือนที่กล่าวมาข้างต้น


นี่เป็น Script ของ JQuery ที่คนนิยมนำมาประยุกต์ใช้กันครับสามารถนำโค้ดใช้ได้เลยไม่ต้อง upload file เอง

jquery-latest.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

jquery-latest.pack.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

jquery-latest.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

jquery.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

jquery-1.3.2.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

jquery-1.3.2.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

jquery-1.3.1.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

jquery-1.3.1.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js' type='text/javascript'/>

jquery-1.3.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

jquery-1.3.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js' type='text/javascript'/>

jquery-1.2.6.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'type='text/javascript'/>

jquery-1.2.6.pack.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

jquery-1.2.6.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

jquery-1.2.3.min.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

jquery-1.2.3.pack.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

jquery-1.2.3.js
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/>


สำหรับบทความนี้ผมก็หวังว่าจะเป็นประโยชน์และเป็นแนวทางแก้ปัญหาเกี่ยวกับการใช้ Java Script ใน blogger นะครับ หากมีข้อสงสัยเรื่องใด ก็สอบถามกันได้เลยครับ ไม่เกิน 1 วัน ได้คำตอบแน่นอนครับผม

อ่านต่อวิธี Upload ไฟล์จาวาสคริปต์ฝากไว้กับ google :


วิธี Hack Googlecode เพื่อฝาก Java Script แบบไม่จำกัด Bandwidth
วิธี ใช้ Google site เก็บข้อมูลของ blogger

ตอนนี้มีความคิดเห็น : 7 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ช่วยแนะนำหน่อยได้ไหมครับ ว่า สริปแต่ละอัน ทำไรได้มั่ง คับ

  1. @ คุณ win : แนะนำให้อ่านที่ jQuery ครับ >> http://docs.jquery.com/How_jQuery_Works
    ผมไม่สามารถอธิบายได้ทั้งหมดครับ ส่วนที่ผมทำคือการ Apply ใช้บางอย่างเท่านั้นครับ

  1. ขอสคริปห้ามคริ็กขวาหน่อยครับ
    ...ห้ามก็อปนะครับ

  1. ครับคือว่าผมอยากทราบเกี่ยวกับสคริปเวลาเอาเม้าส์ไปวางแล้วรูปภาพเปลี่ยนสัก 4-5 ภาพ เพื่อที่จะเอาไปใส่ในบล็อกครับ
    รบกวนช่วยชี้แนะด้วยครับ

  1. @ khet : มีแต่ 2 ภาพครับพอได้ไหมครับ

    http://www.hackublog.com/2010/01/rollover.html

    อีกทางเลือกก็ทำเป็น gif จาก Photoshop ครับ

  1. ถ้าจะเปลี่ยนเม้าส์ให้เป็นการ์ตูนจะเปลี่ยนได้ไหมคะ แล้วก็พวกของร่วงอ่ะค่ะ ที่เค้าแจกโค้ดhi5 ไรงี้อ่ะค่ะ
    จะเอามาใช้ใน blog ได้ไหมคะ ขอบคุณค่ะ

  1. เจริญพร...อาตมาอยากฝังฟอนต์ลงบล๊อกเกอร์ แต่ไม่มีความรู้เรื่องโค้ดเลย..ทำตามที่ขั้นตอนแล้วก็ไม่ออก คิดว่าอาตมาคงทำไม่เป็น..คืออยากให้บล๊อกทั้งบล๊อกให้ฟอนต์แค่ตัวเดียว ... จะทำไงดี..เจริญพร

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel