สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ : Create frame for try it yourself editor ( HTML, CSS, JS ) online

เล่าเรื่องโดย iEasyCom_Admin

สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ 

Create frame for try it yourself editor ( HTML, CSS, JS ) online

สำหรับการสร้างเฟรม try it yourself นี้ จะแบ่งเป็น 4 ส่วนที่จะเขียนโค้ด

1. ส่วนแรกคือ ส่วนแถบบาร์นำทางด้านบน


ตัวอย่างโค้ดแถบบาร์นำทางบนเฟรมรันโค้ด


2. ส่วนที่เป็นคำสั่งของกล่องปุ่มรันโค้ด

จะมี 2 ส่วนย่อยคือ

2.1 กล่องปุ่มรันโค้ด จะมีโค้ดอยู่ในส่วนที่ 1 แถบบาร์นำทาง หรือหากแยกเฉพาะส่วนปุ่มออกมา จะแบ่งเป็นโค้ด css

 


2.2 โค้ดของปุ่มรันโค้ด



2.3 สคริปต์โค้ดของปุ่มรันโค้ด



ข้อมูลโค้ดข้างต้นเป็นโค้ดจากเว็บ W3schools.com


ยังมีตัวอย่างจากอีกเว็บคือเว็บ https://fellowtuts.com/html-css/make-a-html-css-js-try-it-yourself-editor/

ได้แนะนำแนวทางทำหน้าต่างเฟรม try it yourself editor ไว้ด้วย

สำหรับในส่วนโค้ดของปุ่มรันโค้ด คือ


สำหรับในส่วน script ของปุ่มรันโค้ด คือ


โค้ดทั้งหมดของ Create frame for try it yourself editor คือ


ตัวอย่างเมื่อทำเสร็จ