204111:lab1

ปฏิบัติการแรกของวิชา 20411 ตามแผนร่างหัวข้อวิชา 204111 มีเป้าหมายดังนี้

• หัดใช้ WingIDE และรู้จักความผิดพลาดและปัญหาในโปรแกรมภาษาไพธอนที่เกิดจากการพิมพ์ผิด
• หัดใช้ Python แบบโต้ตอบ ผ่านทาง Python Shell
• ทดลอง Turtle Graphics
• หัดพิมพ์และทดลองโปรแกรมภาษา Python

รู้จักกับ WingIDE

เมื่อเราเข้าสู้โปรแกรม Wing IDE 101 เราจะพบหน้าจอดังรูปด้านล่าง

หน้าจอดังกล่าวโดยปกติจะถูกแบ่งออกเป็น 3 ส่วน ดังนี้

• ส่วนที่ 1 คือส่วนสำหรับพิมพ์และแก้ไขโปรแกรม ถ้าส่วนนี้ว่างอยู่ สามารถกดปุ่ม New ที่บนทูลบาร์เพื่อเปิดไฟล์โปรแกรมว่างมาเพื่อแก้ไขได้
• ส่วนที่ 2 และ 3 คือส่วนพื้นที่เครื่องมือ โดยปกติในส่วนที่ 3 จะมีแท็บ Python Shell อยู่ ซึ่งเราจะใช้เพื่อพิมพ์คำสั่งโต้ตอบกับ Python

ส่วน Python Shell แสดงดังรูปด้านล่าง สังเกตว่าเราเลือกแท็บ Python Shell อยู่ไม่ใช่แท็บ Debug I/O (แสดงเป็นแถบสีส้ม)

เราจะทดลอง Python โดยพิมพ์คำสั่งลงในส่วนดังกล่าวของ Wing IDE 101 เพื่อสร้างความคุ้นเคยกับแนวคิดพื้นฐานต่าง ๆ สิ่งที่เราทดลองนี้จะได้ไปเรียนอย่างละเอียดอีกครั้งในการบรรยายครั้งที่ 2

หัดพิมพ์โปรแกรมและทดลองแบบโต้ตอบ

ทดลองพิมพ์คำสั่งต่อไปนี้ (พิมพ์ต่อเครื่องหมาย >>> )

2 + 3

เมื่อพิมพ์แล้วให้กด Enter จะได้ผลลัพธ์ดังต่อไปนี้ (ในรูปเน้นส่วนที่พิมพ์เป็นสีเขียว ส่วนผลลัพธ์เป็นสีแดง)

ในส่วนต่อ ๆ ไป เราอาจจะแสดงผลลัพธ์จากการโต้ตอบกับ Python Shell ในลักษณะคล้ายกับรูปข้างต้นนี้ กล่าวคือ บรรทัดที่เราป้อนเข้าไปจะขึ้นต้นด้วยเครื่องหมาย >>> พร้อมทั้งเน้นด้วยตัวหนา ส่วนบรรทัดที่ Python ตอบมาจะแสดงเป็นบรรทัดที่ไม่มีเครื่องหมายดังกล่าวขึ้นต้นแต่จะแสดงด้วยตัวอักษรเอียงแทน เช่นจากตัวอย่างข้างต้น แทนที่จะใช้รูปเราอาจจะเขียนได้ดังนี้

>>> 2 + 3     # นี่คือบรรทัดที่เราพิมพ์
5                     # นี่คือผลลัพธ์

ในการใช้งาน Python Shell ระบบจะรับสิ่งที่เราพิมพ์เข้าไปแล้วนำไปประมวลผล ถ้าเป็นนิพจน์ (เช่น 2 + 3) ระบบจะคำนวณค่าแล้วแสดงผลลัพธ์ออกมา

นิพจน์นั้นอาจจะเป็นแค่ค่าคงที่ธรรมดา เช่น

>>> 100
100

หรืออาจมีความซับซ้อนก็ได้ เช่น

>>> 1+2+3+4+5+6+7*100-30
691

หรือ

>>> 1/2 + 1/4 + 1/8 + 1/16
0.9375

เป็นต้น

ในส่วนต่อ ๆ ไป ให้นิสิตทดลองกับ Python Shell โดยพิมพ์คำสั่งที่ระบุให้ตามลำดับ

วงเล็บ

เราสามารถใช้ Python เป็นเหมือนเครื่องคิดเลขได้ ทดลองพิมพ์นิพจน์สองนิพจน์นี้

2 + 3 * 5

(2 + 3) * 5

ผลลัพธ์ของทั้งสองคำสั่งต่างกันเพราะอะไร?

พิจารณาคำสั่งด้านล่าง และให้คาดการณ์ผลลัพธ์ก่อนที่จะทดลองพิมพ์ใน Python Shell

2 + (3 * 5)

ตัวแปร

สำหรับนิพจน์ที่ได้คำนวณค่าแล้ว เราสามารถนำค่าที่ได้นั้นมาใช้ได้อีก โดยไม่ต้องคำนวณซ้ำ ๆ ผ่านทาง ตัวแปร

เราสามารถกำหนดค่าให้กับ ตัวแปร ได้โดยใช้เครื่องหมาย = เช่น (ทดลองพิมพ์ตามไปด้วย)

g = 9.81

การกำหนดค่าให้กับตัวแปรเป็นการสั่งให้ตัวแปร อ้างถึง ค่านั้น เขียนอธิบายเป็นรูปได้ดังนี้

หมายเหตุ: ระหว่างตัวแปรและเครื่องหมายเท่ากับไม่จำเป็นต้องเว้นช่องว่างก็ได้ อย่างไรก็ตามเราแนะนำให้เว้นเพื่อให้อ่านได้ง่าย

เราสามารถนำตัวแปรมาใช้งานได้ดังนี้

>>> g
9.81

>>> 10 * g
98.10000000000001

หมายเหตุ: เครื่องหมาย * คือเครื่องหมายแทนการคูณ สังเกตว่าความละเอียดของการคำนวณบนคอมพิวเตอร์มีจำกัด แทนที่เราจะได้ค่า 98.1 พอดี กลับมีเศษเล็กน้อยรวมมาด้วย

เราเรียกตัวแปรว่าตัวแปร เพราะว่าเราสามารถกำหนดค่าใหม่ให้กับมันได้ ดังเช่นการทดลองต่อไปนี้

>>> g
9.81
>>> g + 5
14.81
>>> g = 100
>>> g + 5
105

พิจารณาการทำงานต่อไปนี้ (ทดลองพิมพ์ไปด้วย)

>>> a = 100
>>> b = a + 10
>>> b
110
>>> a = 200
>>> a + 10
210
>>> b
110

เราสังเกตอะไรได้จากการทดลองนี้?

ทดลองพิมพ์คำสั่งทั้ง 3 นี้

x

x = 10

x

เปรียบเทียบคำตอบที่ได้จากคำสั่งทั้ง 3

ทดลองคำสั่งต่อไปนี้ (พิมพ์ไปตามลำดับ)

x * 5

y = 20

y * x

y = x

y * x

y = y + 1

y * x

อธิบายได้หรือไม่ว่าคำสั่ง y = y + 1 ทำอะไร

เต่ายนต์

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

สิ่งสำคัญที่สุดของการทำแบบฝึกหัดนี้ก็คือ อย่ากลัวที่จะผิดพลาด!!!

เปิดหน้าต่างเต่า

เราจะทำงานที่ส่วน Python Shell เป็นหลัก อย่างไรก็ตามส่วนนี้มีขนาดเล็กเมื่อเทียบกับหน้าจอทั้งหมดของ Wing IDE 101 ดังนั้นให้ขยายขนาดของส่วนดังกล่าว โดยกดลากที่บริเวณขอบของส่วนดังกล่าว (อาจจะมองไม่เห็นขอบ แต่ให้บริเวณลูกศรเปลี่ยนเป็นสัญลักษณ์ลูกศรสองหัวสำหรับลาก) เมื่อขยายแล้วให้ได้หน้าจอลักษณะดังรูปด้านล่าง

เมื่อปรับดังกล่าวได้แล้วให้ย่อหน้าต่าง Wing IDE ให้มีขนาดประมาณ 1/2 ของหน้าจอ (ถ้าหน้าต่างขยายเต็มที่อย่าลืมกดปุ่มมุมบนขวาให้หน้าต่างเลิกขยายเต็มจอก่อน) ดูขนาดโดยประมาณได้จากรูปหลังจากการเปิดหน้าต่างเต่าแล้ว

เราจะเริ่มใช้งานระบบ Turtle graphics โดยการประกาศเรียกโมดูล turtle ก่อน โดยพิมพ์คำสั่งด้านล่างลงใน Python shell

from turtle import *

จากนั้นให้สั่ง สร้าง เต่า แล้วกำหนดค่าให้ตัวแปร t อ้างถึงเต่าตัวนั้น โดยพิมพ์คำสั่ง

t = Turtle()

จะมีหน้่าต่างชื่อ Python Turtle Graphics ปรากฏขึ้น หน้าต่างนี้อาจจะใช้เวลาเล็กน้อยก่อนจะปรากฏขึ้น และอาจจะอยู่ด้านหลังหน้าต่าง Wing IDE ให้กดเลือกเพื่อเลื่อนขึ้นมาด้านหน้า

จากนั้นปรับขนาดของหน้าต่างทั้งสองหน้าต่างให้เห็นได้ทั้งคู่พร้อม ๆ กัน เพราะว่าเราจะสั่งงานที่ Wing IDE แต่ภาพวาดของเต่าจะแสดงที่หน้าจอใหม่นี้ ตัวอย่างแสดงดังรูปด้านล่าง

เมื่อได้ดังนี้แล้ว ลองพิมพ์

t.forward(100)

จะเห็นเส้นลากไปทางขวา (ผลจากการลากปากกา) พร้อมเครื่องหมายลูกศร (แสดงถึงตำแหน่งและทิศทางการหันของเต่า) นั่นคือเราพร้อมจะทดลองกับเต่ายนต์แล้ว

ทดลองคำสั่ง

จากเส้นดังกล่าว ทดลองสั่งคำสั่งต่อไปนี้ทีละคำสั่ง และสังเกตพฤติกรรมของเต่ายนต์

t.right(90)

t.forward(200)

การสั่ง forward และ right ทำให้เต่ายนต์ทำอะไร?

คำสั่ง forward และ คำสั่ง right เป็นคำสั่งที่สั่งที่สั่งให้กับเต่ายนต์ เวลาเราพูดถึงคำสั่งเราจะละส่วน t. เอาไว้ แต่เมื่อจะสั่งเราต้องอ้างถึงเต่ายนต์ที่เราจะสั่งด้วย

ทดลองสั่งให้เต่ายนต์เคลื่อนที่จนกระทั่งได้รูปสี่เหลี่ยมผืนผ้าขนาด 100 x 200 ดังตัวอย่างด้านล่าง

ถ้าสั่งผิดพลาด: อย่าเพิ่งกลัวว่าเต่ายนต์จะวาดผิด ทำให้ได้เส้นเกินมา สำหรับแบบฝึกหัดนี้ให้ถือว่า เส้นเกินดีกว่าเส้นขาด

ถ้าเราสั่ง forward ไกลไป สามารถสั่ง backward(ระยะทาง) ให้เต่ายนต์เดินถอยหลังย้อนกลับได้ ในทำนองเดียวกัน เราสามารถสั่ง left(มุม) เพื่อให้เต่าหันซ้ายได้

หรือถ้่าต้องการยกเลิกทุกอย่าง สามารถสั่ง clear() ให้ลบทุกอย่างทิ้งได้ (แต่เต่ายนต์ยังอยู่ที่เดิม) ถ้าต้องการให้เต่ายนต์กลับมาที่จุดเริ่มต้นสั่ง home()

อย่าลืมว่าจะสั่งคำสั่งเหล่านี้้ต้องสั่งผ่านทางเต่ายนต์ เช่น สั่ง t.backward(100) เป็นต้น

ทดลองสั่งให้เต่ายนต์เคลื่อนที่ต่อจนกระทั่งได้รูปบ้านดังตัวอย่างด้านล่าง (หมายเหตุ:กว่าจะทำรูปดังกล่าวเป็นตัวอย่างได้ ผู้ทำต้องลบไปหลา่ยรอบเหมือนกัน แต่อย่าลืม! จะมีเส้นเกินมาบ้างก็ไม่เป็นไร)

คำใบ้ สามเหลี่ยมด้านเท่ามีมุมภายใน 60 องศา (แต่ไม่จำเป็นต้องสร้างสามเหลี่ยมด้านเท่าก็ได้)

สรุปคำสั่ง

• forward(ระยะทาง) และ backward(ระยะทาง) ---- ให้เต่ายนต์เคลื่อนที่ไปด้านหน้า / ด้านหลัง
• left(มุม) และ right(มุม) ---- ให้เต่ายนต์หันซ้าย / หันขวา
• home() ---- ให้เต่ายนต์กลับบ้าน (กลับไปที่จุดเริ่มต้น และหันหัวไปทางขนานกับแกน x)
• clear() ---- ลบภาพทั้งหมด

การป้อนคำสั่งที่สะดวก (และปลอดภัย) ขึ้น

การป้อนคำสั่งทีละคำสั่งทำให้เมื่อเราทำขั้นตอนยาว ๆ แล้วผิดพลาด การแก้ไขทำได้ยากมาก

เราจะเปลี่ยนเป็นเขียนคำสั่งหลาย ๆ คำสั่งแล้วค่อยนำไปสั่งใน Python Shell การเขียนในลักษณะนี้ทำให้ถ้าเราสั่งผิดพลาดเราสามารถแก้ไขได้ง่าย โดยไม่ต้องนั่งพิมพ์ทุกอย่างใหม่

ให้กดปุ่ม New ที่มุมซ้ายของทูลบาร์ (เน้นด้วยวงกลมสีแดง) จากนั้นย่อขนาดส่วน Python Shell ให้เตี้ยลง (หรือจะขยายหน้าจอ Wing IDE ให้สูงขึ้นก็ได้)

ในส่วนด้านบนเรียกว่าส่วน Editor (เอดิเตอร์) จะเป็นส่วนที่เราป้อนคำสั่งได้หลาย ๆ คำสั่งโดยยังไม่ถูกนำไปทำงาน (ลูกศรสีเขียวชี้อยู่) เมื่อเราเขียนจนพอใจแล้ว ให้ลากเลือกส่วนดังกล่าวจากนั้น Copy (โดยกด Ctrl-C) แล้วไปที่ส่วน Python Shell แล้วกด Paste (กด Ctrl-V) เพื่อสั่งชุดคำสั่งดังกล่าว

รูปประกอบแสดงด้านล่างนี้

มาวาดรูปกัน!

ก่อนที่เราจะสามารถวาดรูปที่ซับซ้อนได้ เราจะต้องรู้จักคำสั่งในการควบคุมเต่ายนต์อีกสองคำสั่งคือ

• penup() ให้เต่ายกปากกา
• pendown() ให้เต่าวางปากกา

ให้ลบทุกอย่างทิ้ง โดยสั่ง

t.home()
t.clear()

จากนั้นลองใช้คำสั่งยกและวางปา่กการสั่งให้เต่ายนต์วาดรูปดังต่อไปนี้

สร้างคำสั่งใหม่

อยากวาดสี่เหลี่ยมจัสตุรัส! ถ้ามีคำสั่งที่สั่งได้ง่าย ๆ ก็คงดีน่ะสิ

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

พิมพ์ส่วนของโปรแกรมนี้ในหน้า Editor ก่อนจะคัดลอกมาที่ Python Shell

def square():
    t.forward(100)
    t.right(90)
    t.forward(100)
    t.right(90)
    t.forward(100)
    t.right(90)
    t.forward(100)
    t.right(90)

ในการพิมพ์ ให้ระวังย่อหน้าให้ตรงกันด้วย