FLOW
ลากความคิดเป็นบล็อก
เริ่มจากคำสั่งพื้นฐาน ตัวแปร รับค่า แสดงผล เงื่อนไข และลูป โดยไม่ต้องจำ syntax ทั้งหมดก่อน
BUILD LOGIC, SEE IT RUN
เปลี่ยนขั้นตอนคิด
ให้เห็นเป็นภาพ
สร้างผังงานด้วยบล็อกที่เข้าใจง่าย ทดลองรันทีละขั้น และดู JavaScript ที่เกิดขึ้นจริงในพื้นที่เดียว
ไม่ต้องติดตั้งโปรแกรม บันทึกงานอัตโนมัติในเครื่อง และส่งออกเป็น `.json` หรือ `.js` ได้
เริ่ม
ประกาศตัวแปรscore: Integer = 0
รับข้อมูลscore ← รับค่ากรอกคะแนน 0-100 · Integer
เงื่อนไขscore >= 50จริง / เท็จ
เท็จ
จริง
แสดงผล"ไม่ผ่าน"แสดงในผลลัพธ์
แสดงผล"ผ่าน"แสดงในผลลัพธ์
จบ
JavaScript
function main() {
let score;
score = input();
if (score >= 50) { console.log("ผ่าน"); }
}✓ รันและทดสอบได้ทันที
JS เห็นโค้ดจากผังงาน
ONE FLOW, CLEARER THINKING
จากแนวคิดสู่โปรแกรม
โดยไม่ต้องเดาสุ่ม
วางลำดับการทำงานให้ชัด แล้วเรียนรู้ว่าแต่ละบล็อกเปลี่ยนเป็นโค้ดอย่างไร
RUN
ทดลองรันทีละขั้น
ดูค่าตัวแปรและ Input / Output ระหว่างทำงาน ช่วยมองเห็นจุดที่ logic ยังไม่เป็นไปตามที่คิด
CODE
เชื่อมผังงานกับ JavaScript
เปิดดูโค้ดที่สร้างจากผังงาน ดาวน์โหลดไปทดลองต่อ และเข้าใจความสัมพันธ์ระหว่างภาพกับโปรแกรม
HOW IT WORKS
เริ่มจากสิ่งที่อยากให้โปรแกรมทำ
ไม่ว่าจะกำลังเรียนรู้พื้นฐานการเขียนโปรแกรมหรือกำลังอธิบายวิธีแก้ปัญหา flowchart ช่วยจัดความคิดให้ทุกขั้นตอนคุยกันรู้เรื่อง
1วางบล็อกเลือกคำสั่งแล้วแทรกลงในเส้นทาง
2ตั้งค่าเขียนเงื่อนไข ตัวแปร และค่าที่ต้องการ
3รันและทบทวนดูผลลัพธ์ ปรับแก้ แล้วลองใหม่
LEARNING LOOPพร้อมเริ่ม
คิดปัญหา
วางผังงาน
รันและดูผล
ปรับ logic
เห็นภาพแล้วเข้าใจ
START WITH A TEMPLATE
ลองจากโจทย์ที่คุ้นเคย
เลือกตัวอย่าง แล้วแก้ไขต่อใน editor ได้ทันที
READY TO DRAW?
ให้ logic ของคุณ
มีพื้นที่ที่มองเห็นได้
เปิด editor แล้วเริ่มวางบล็อกแรกได้เลย