1 · The words 2 · The machines 3 · Build something

🟨 JavaScript Lab

Every web page you open is made of three things. HTML is the words and the pictures. CSS is the colours. JavaScript is the part that moves. When you click a button and something happens, that is JavaScript. 你打开的每一个网页都由三样东西组成。HTML 是文字和图片。CSS 是颜色。 JavaScript 是会动的那一部分。你点一个按钮，然后有事情发生——那就是 JavaScript。 ทุกหน้าเว็บที่คุณเปิดทำจากสามอย่าง HTML คือคำและรูปภาพ CSS คือสี JavaScript คือส่วนที่ขยับได้ เมื่อคุณคลิกปุ่มแล้วมีอะไรเกิดขึ้น นั่นคือ JavaScript

You need nothing to start. No money. No new computer. Your browser can already run JavaScript. Work in this order: learn the words, drive the machines, then build a game and a map. 开始不需要任何东西。不用花钱，不用换电脑。你的浏览器已经能运行 JavaScript 了。按这个顺序学：先学词，再驾驶机器，然后做一个游戏和一张地图。 เริ่มต้นไม่ต้องใช้อะไรเลย ไม่ต้องใช้เงิน ไม่ต้องซื้อคอมใหม่ เบราว์เซอร์ของคุณรัน JavaScript ได้อยู่แล้ว เรียนตามลำดับนี้: เรียนคำศัพท์ ขับเครื่องมือ แล้วสร้างเกมกับแผนที่

👾 Tutorial 1 — make a space game. Nine steps. You start with an empty file and finish with a game you can play with the arrow keys.
教程一 —— 做一个太空游戏。九步。从一个空文件开始，最后做出可以用方向键玩的游戏。
บทเรียนที่ 1 — สร้างเกมอวกาศ เก้าขั้นตอน เริ่มจากไฟล์เปล่า จบด้วยเกมที่เล่นได้ด้วยปุ่มลูกศร Open ▸ 🗺️ Tutorial 2 — make a map of Chiang Mai. Real places, real numbers. Zoom in and out, and draw squares, circles and lines on top.
教程二 —— 做一张清迈地图。真实地点，真实数字。可以放大缩小，还能在上面画方形、圆形和线。
บทเรียนที่ 2 — สร้างแผนที่เชียงใหม่ สถานที่จริง ตัวเลขจริง ซูมเข้าออกได้ และวาดสี่เหลี่ยม วงกลม เส้น ทับลงไปได้ Open ▸

🔤 The words you need

Summary

Twenty-two words. Every word here is a real word from real code. Programmers all over the world say these words in English, so learning them is learning the job. Tap say it to hear one. Tap tell me more for the long answer.

摘要

二十二个词。这里每个词都来自真实代码。全世界的程序员都用英语说这些词，所以学会它们就是学会这份工作。点“say it”听发音，点“tell me more”看详细解释。

สรุป

ยี่สิบสองคำ ทุกคำมาจากโค้ดจริง โปรแกรมเมอร์ทั่วโลกพูดคำเหล่านี้เป็นภาษาอังกฤษ เรียนคำพวกนี้คือเรียนงานจริง แตะ say it เพื่อฟัง แตะ tell me more เพื่ออ่านคำอธิบายยาว

🔧 Nine little machines

Each machine shows real JavaScript on the left and the real result on the right. Move the slider, type a word, press a button. The code you see is the code that runs. 每台机器左边是真正的 JavaScript，右边是真正的运行结果。拖滑块、打字、按按钮。你看到的代码就是正在运行的代码。 แต่ละเครื่องแสดงโค้ด JavaScript จริงทางซ้าย และผลลัพธ์จริงทางขวา เลื่อนแถบ พิมพ์คำ กดปุ่ม โค้ดที่คุณเห็นคือโค้ดที่กำลังทำงานอยู่

📦 1 · A variable is a box with a name

Summary

A variable is a box with a name. You put a value inside. Later you use the name, and the computer gets the value. The word let makes a new box. The equals sign puts something in it. Move the slider to change what is in the box.

摘要

变量就是一个有名字的盒子。你把一个值放进去。之后你用名字，电脑就取出那个值。let 造一个新盒子，等号把东西放进去。拖动滑块看盒子里的东西改变。

สรุป

ตัวแปรคือกล่องที่มีชื่อ คุณใส่ค่าไว้ข้างใน ทีหลังคุณเรียกชื่อ คอมพิวเตอร์ก็หยิบค่านั้นมาให้ คำว่า let สร้างกล่องใหม่ เครื่องหมายเท่ากับใส่ของลงไป เลื่อนแถบเพื่อเปลี่ยนของในกล่อง

let score = 3; score = score + 10; console.log(score); // 13

score

Why let? let means "make a new box". You only write it the first time. After that you just use the name. 为什么用 let？let 的意思是“造一个新盒子”。只在第一次写它，之后直接用名字。 ทำไมต้อง let? let แปลว่า "สร้างกล่องใหม่" เขียนแค่ครั้งแรก หลังจากนั้นใช้แค่ชื่อ

score is 3

📚 5 · An array is a list

Summary

An array holds many values in one box, in order. Square brackets make one. Push adds to the end. Pop takes the last one away. The first item is number zero. Games keep every bullet and every alien in an array like this.

摘要

数组把很多值按顺序放进一个盒子里。方括号创建它，push 在末尾加一个，pop 拿走最后一个。第一个元素编号是零。游戏就是用这样的数组装下每一颗子弹和每一个外星人。

สรุป

อาร์เรย์เก็บหลายค่าไว้ในกล่องเดียวอย่างมีลำดับ วงเล็บเหลี่ยมสร้างมันขึ้นมา push เพิ่มท้ายลิสต์ pop เอาตัวสุดท้ายออก ตัวแรกคือหมายเลขศูนย์ เกมเก็บกระสุนและเอเลี่ยนทุกตัวไว้ในอาร์เรย์แบบนี้

let places = ["Tha Phae Gate", "Warorot Market"]; places.push("Wat Don Chan"); // add at the end places.pop(); // remove the last places[0]; // "Tha Phae Gate" places.length; // 2

Zero first. places[0] is the first place. The last one is always length - 1. This surprises everybody once. 从零开始：places[0] 是第一个地点，最后一个永远是 length - 1。每个人都会被这一点吓一次。 เริ่มที่ศูนย์ places[0] คือที่แรก ตัวสุดท้ายคือ length - 1 เสมอ ทุกคนต้องงงเรื่องนี้ครั้งหนึ่ง

2 places in the list

🧩 6 · An object keeps facts together

Summary

One place has a name, a latitude and a longitude. An object keeps all of those facts in one box with labels. Each label is a key. Each fact is a value. You get one out with a dot. Click a key on the right to read its value.

摘要

一个地点有名字、纬度和经度。对象把这些事实带标签地放在一个盒子里。每个标签是一个键，每个事实是一个值。用点号取出其中一个。点右边的键，读它的值。

สรุป

สถานที่หนึ่งมีชื่อ ละติจูด และลองจิจูด อ็อบเจกต์เก็บข้อมูลเหล่านี้ไว้ในกล่องเดียวพร้อมป้ายชื่อ ป้ายคือคีย์ ข้อมูลคือค่า ดึงออกมาด้วยจุด คลิกคีย์ทางขวาเพื่ออ่านค่า

let place = { name: "Wat Phra Singh", thai: "วัดพระสิงห์", lat: 18.78878, lon: 98.98156, kind: "temple" }; place.name; // "Wat Phra Singh"

Array or object? An array is many things in order. An object is one thing with parts. A map needs both: an array of places, and every place is an object. 用数组还是对象？数组是按顺序排的很多东西；对象是一个东西的很多部分。地图两个都要：一个地点数组，其中每个地点都是一个对象。 อาร์เรย์หรืออ็อบเจกต์? อาร์เรย์คือหลายสิ่งเรียงกัน อ็อบเจกต์คือสิ่งเดียวที่มีหลายส่วน แผนที่ต้องใช้ทั้งคู่: อาร์เรย์ของสถานที่ และแต่ละสถานที่คืออ็อบเจกต์

"Wat Phra Singh"

⚙️ 7 · A function is a machine you name

Summary

A function takes something in, does a job, and gives something back. You write the job once and use the name for ever. The word return is the answer coming out. A game calls small functions like this hundreds of times every second.

摘要

函数接收东西，做一件事，然后把结果交回来。这件事只写一次，之后永远用名字调用。return 就是结果出来的那一步。游戏每秒钟会调用这样的小函数几百次。

สรุป

ฟังก์ชันรับของเข้าไป ทำงานหนึ่งอย่าง แล้วส่งของกลับมา เขียนงานนั้นครั้งเดียว แล้วเรียกด้วยชื่อตลอดไป คำว่า return คือคำตอบที่ออกมา เกมเรียกฟังก์ชันเล็ก ๆ แบบนี้หลายร้อยครั้งต่อวินาที

function points(hits) { return hits * 50; } points(3); // 150

hits

The name is the point. Once the machine has a name, you stop thinking about the inside. You just say points(3). This is how big programs stay small in your head. 名字才是重点。机器一旦有了名字，你就不用再想里面怎么做，只要说 points(3)。大程序就是这样在脑子里保持简单的。 ชื่อคือหัวใจ พอเครื่องมีชื่อแล้ว คุณเลิกคิดเรื่องข้างใน แค่พูดว่า points(3) โปรแกรมใหญ่ ๆ อยู่ในหัวได้ก็เพราะแบบนี้

150 points

👆 8 · An event is the page waiting for you

Summary

Your code does not run all the time. It sleeps and waits. An event listener says: when this happens, run this function. A click is an event. A key press is an event. Press the button, then press an arrow key, and watch the page answer you.

摘要

你的代码不是一直在跑，它在睡觉、在等。事件监听器说：当这件事发生时，就运行这个函数。点击是事件，按键也是事件。按一下按钮，再按方向键，看页面怎么回答你。

สรุป

โค้ดของคุณไม่ได้ทำงานตลอดเวลา มันนอนรออยู่ ตัวดักฟังอีเวนต์บอกว่า เมื่อสิ่งนี้เกิดขึ้น ให้รันฟังก์ชันนี้ คลิกคืออีเวนต์ กดปุ่มก็คืออีเวนต์ กดปุ่มแล้วกดลูกศร ดูหน้าเว็บตอบคุณ

button.addEventListener("click", () => { clicks = clicks + 1; }); document.addEventListener("keydown", (e) => { lastKey = e.key; // "–" });

One line, two jobs. "click" is what to wait for. The arrow function is what to do. Change the first part and the same code answers a different thing. 一行，两件事："click" 是等什么，箭头函数是做什么。换掉第一部分，同一段代码就回应另一件事。 หนึ่งบรรทัด สองหน้าที่ "click" คือรออะไร ฟังก์ชันลูกศรคือทำอะไร เปลี่ยนส่วนแรก โค้ดเดิมก็ตอบสิ่งอื่นได้

0 clicks · no key yet

🎞️ 9 · Animation is a loop of pictures

Summary

Nothing on a screen really moves. The computer draws a picture, changes one number, and draws again. It does this sixty times every second, so your eye sees movement. This loop is the heart of every game. Press start and change the speed.

摘要

屏幕上没有东西真的在动。电脑画一张图，改一个数字，再画一张。每秒钟这样做六十次，你的眼睛就看见了运动。这个循环是所有游戏的心脏。按开始，再改速度。

สรุป

ไม่มีอะไรบนจอที่ขยับจริง ๆ คอมพิวเตอร์วาดภาพ เปลี่ยนตัวเลขหนึ่งตัว แล้ววาดใหม่ ทำแบบนี้หกสิบครั้งต่อวินาที ตาคุณจึงเห็นการเคลื่อนไหว ลูปนี้คือหัวใจของทุกเกม กดเริ่มแล้วเปลี่ยนความเร็ว

let x = 0; function frame() { ctx.clearRect(0, 0, 520, 280); // wipe x = x + 3; // move ctx.drawImage(alien, x, 100); // draw requestAnimationFrame(frame); // again } frame();

speed

Wipe, move, draw, again. Forget the wipe and you get a long smear across the screen. That smear is a famous first bug — and it looks quite nice, so try it once on purpose. 擦掉、移动、画、再来。忘了擦掉，屏幕上就会拖出一道长长的痕。这是很出名的第一个 bug——而且挺好看的，可以故意试一次。 ลบ ขยับ วาด ทำใหม่ ถ้าลืมลบ จะได้รอยยาวลากทั้งจอ นั่นคือบั๊กแรกที่โด่งดัง — แล้วก็สวยดี ลองจงใจทำสักครั้ง

stopped

🚀 Now build something real

Summary

You now know nine ideas. That is enough to build real things. The space game uses all nine. The map uses seven of them, and adds real numbers from real places in Chiang Mai. Open one and follow the steps.

摘要

你已经学会九个概念，这足够做真东西了。太空游戏九个全用上；地图用了其中七个，还加上清迈真实地点的真实数字。打开一个，按步骤做。

สรุป

ตอนนี้คุณรู้เก้าแนวคิดแล้ว พอสำหรับสร้างของจริง เกมอวกาศใช้ครบทั้งเก้า แผนที่ใช้เจ็ดอย่าง แล้วเพิ่มตัวเลขจริงจากสถานที่จริงในเชียงใหม่ เปิดอันไหนก็ได้แล้วทำตามขั้นตอน

👾 Make a space game. Empty file → HTML page → canvas → a ship you drive → bullets → aliens → score. Nine steps with copy buttons.
做一个太空游戏：空文件 → HTML 页面 → 画布 → 你能开的飞船 → 子弹 → 外星人 → 分数。九步，每步都能复制代码。
สร้างเกมอวกาศ: ไฟล์เปล่า → หน้า HTML → แคนวาส → ยานที่คุณบังคับ → กระสุน → เอเลี่ยน → คะแนน เก้าขั้นตอน คัดลอกโค้ดได้ Start ▸ 🗺️ Make a map with drawing tools. Real Chiang Mai coordinates, zoom in and out, and tools to draw squares, circles and lines on top.
做一张带绘图工具的地图：真实的清迈坐标，可放大缩小，还有画方形、圆形和线的工具。
สร้างแผนที่พร้อมเครื่องมือวาด: พิกัดเชียงใหม่จริง ซูมเข้าออก และเครื่องมือวาดสี่เหลี่ยม วงกลม เส้น Start ▸

Want the same two projects in Python? They are here: the Python space game and the Python map. Same ideas, different language — a very good way to see what is really a programming idea and what is only a word. 想用 Python 做同样两个项目？在这里：Python 太空游戏和 Python 地图。同样的思路，不同的语言——这是看清什么才是真正的编程概念、什么只是写法的好办法。 อยากทำสองโปรเจกต์เดียวกันด้วย Python ไหม อยู่ที่นี่: เกมอวกาศ Python และ แผนที่ Python แนวคิดเดียวกัน คนละภาษา เป็นวิธีที่ดีมากในการเห็นว่าอะไรคือแนวคิดการเขียนโปรแกรมจริง ๆ และอะไรเป็นแค่คำ

📌 Points to remember

A variable is a box with a name. let makes it. = puts something in. 变量是有名字的盒子：let 造盒子，= 放东西进去。 ตัวแปรคือกล่องที่มีชื่อ let สร้าง = ใส่ของ
Quotes make words. 5 is a number. "5" is a string. 引号造出文字：5 是数字，"5" 是字符串。 เครื่องหมายคำพูดทำให้เป็นคำ 5 คือตัวเลข "5" คือสตริง
Count from zero. The first item in a list is item zero. 从零开始数：列表里第一个是第 0 个。 นับจากศูนย์ ตัวแรกในลิสต์คือตัวที่ศูนย์
A function is a machine with a name. Write the job once, use the name for ever. 函数是有名字的机器：活儿写一次，名字用一辈子。 ฟังก์ชันคือเครื่องที่มีชื่อ เขียนงานครั้งเดียว ใช้ชื่อไปตลอด
Events wake your code up. Nothing runs until something happens. 事件唤醒你的代码：什么都不发生，代码就不跑。 อีเวนต์ปลุกโค้ดของคุณ ไม่มีอะไรทำงานจนกว่าจะมีอะไรเกิดขึ้น
Animation is wipe, move, draw, again. Sixty times a second. 动画就是：擦、移、画、再来——每秒六十次。 แอนิเมชันคือ ลบ ขยับ วาด ทำใหม่ หกสิบครั้งต่อวินาที
Every browser has the tools already. Press F12 to open the console and see your own console.log messages. 浏览器里已经有全部工具：按 F12 打开控制台，看自己的 console.log。 เบราว์เซอร์มีเครื่องมือครบอยู่แล้ว กด F12 เปิดคอนโซลเพื่อดูข้อความ console.log ของคุณเอง

Thank you for learning with us today. Go and break something, then fix it. See you in the next lab. 感谢今天和我们一起学习。去弄坏点东西，然后把它修好。下个实验室见。 ขอบคุณที่เรียนกับเราวันนี้ ไปทำอะไรพังแล้วซ่อมมันซะ แล้วเจอกันในแล็บหน้า

🟨 JavaScript Lab

🔤 The words you need

🎤 Speaking drill

🔧 Nine little machines

📦 1 · A variable is a box with a name

🔤 2 · A string is words in quotes

❓ 3 · if asks a question

🔁 4 · A loop does it again and again

📚 5 · An array is a list

🧩 6 · An object keeps facts together

⚙️ 7 · A function is a machine you name

👆 8 · An event is the page waiting for you

🎞️ 9 · Animation is a loop of pictures

🚀 Now build something real

📌 Points to remember