JSFiddle - เครื่องมือทดสอบ Javascript, CSS, HTML ออนไลน์สำหรับนักพัฒนา

JSFiddle - เครื่องมือทดสอบ Javascript, CSS, HTML ออนไลน์สำหรับนักพัฒนา

ทดสอบและแชร์ Javascript, CSS, HTML ออนไลน์ด้วย JSFiddle บริการที่มีประโยชน์สำหรับนักพัฒนา

Apr 11, 2014

แก้ไขล่าสุด มีผู้อ่าน 3,191  |  CSS JAVASCRIPT HTML DEVELOPER TOOL

 

JSFIDDLE บริการสำหรับทดสอบ Javascript, CSS, HTML บน Web based เพื่อให้นักพัฒนาสามารถทดสอบ แชร์ โค้ดของตัวเองให้กับผู้สนใจ ตัว JSFIDDLE มี Javascript Library ยอดนิยมให้สามารถเลือกเพื่อทดสอบ ตัวอย่างเช่น JQuery, Mootools, YUI, Prototype, Dojo, ExtJS และอื่นๆ 

 

เริ่มต้นทำความรู้จักเมนูต่างๆ บน JSFIDDLE

เมนูด้านซ้าย สำหรับเลือก Frameworks & Extensions, External Resources, Languages ตามต้องการ

พื้นที่ด้านขวา เป็นช่องสำหรับใส่โค้ดที่ต้องการทดสอบ ประกอบด้วย HTML, CSS, Javascript, Result


 

เมนูด้านบน

  • Run - ทำการประมวลผลและแสดงผลลัพธ์ที่ช่อง Result
  • Save - บันทึกโค้ด เมื่อบันทึกเสร็จ จะทำให้สามารถ Share ได้
  • TidyUp - ทำการจัด Format โค้ดภายในช่อง HTML, CSS, Javascript
  • JSHint - ช่วยเหลือเมื่อโค้ดภายในช่อง Javascript ผิดพลาด
  • Collaboration - ใช้สำหรับทำงานร่วมกัน

 

เริ่มต้นลองใช้งาน JSFIDDLE

1. ไปที่ http://jsfiddle.net/

2. เลือก Frameworks & Extensions เป็น jquery เวอร์ชั่นที่ต้องการ


3. ทดสอบนำโค้ดด้านล่างไปใส่ในช่องต่างๆ เมื่อใส่เสร็จกด Run ดูผลที่ช่อง Result 

HTML

<p>
   <span id="green" >share.</span>
   <span id="red" >olanlab</span>
   <span id="blue" >.com</span>
</p>

CSS

#green {
    color: green;
}

Javascript

$('#red').css('color', 'red');
$('#blue').css('color', 'blue');

Result


วิธีการ Share 


    JSFIDDLE สามารถ Share โค้ดที่เราทดสอบผ่าน link, iframe, Facebook, Twitter แต่ต้องทำการ Save เสียก่อน เมื่อ Save เสร็จเรียบร้อย จะมีปุ่ม Share ปรากฏขึ้นมาตามรูปด้านล่าง 

 


วิธีการสมัครสมาชิก JSFIDDLE
1. กดที่ปุ่ม Login/ Sign Up กรอกรายละเอียดเพื่อทำการลงทะเบียน

2. เมื่อลงทะเบียนเสร็จทำการ Login จะปรากฏหน้า Profile ของเรา ประโยชน์ของการเป็นสมาชิก เราสามารถ Save เพื่อเก็บโค้ดทดสอบไว้ใน Profile ได้ โดยจะแสดงที่ All your fiddles ดังรูป

 

จบการแนะนำวิธีการใช้งาน JSFIDDLE แบบง่ายๆ ครับ


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com
Software Engineer, Inventor, Writer, Trainer
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย