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)

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

หมายเหตุ: ระหว่างการทดลอง ถ้าจำเป็นต้องปิดโปรแกรม Wing IDE หรือปิดเครื่อง ให้สั่งคำสั่งสองคำสั่งนี้ Python Shell เพื่อเปิดหน้าต่างเต่าก่อนจะทำงานได้

from turtle import *
t = Turtle()

ทดลองคำสั่ง

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

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

<geshi lang="python"> 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)

</geshi>

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

จากนั้นให้คัดลอกส่วนดังกล่าวมาใส่ใน Python Shell ถ้าไม่มีข้อผิดพลาดแสดงว่าเรานิยามคำสั่ง square() แล้ว ลองสั่งโดยพิมพ์

square()

เต่าจะวาดรูปสี่เหลี่ยมจัตุรัสขนาด 100 x 100

ลองสั่งให้เต่าวาดรูปดังรูปด้านล่าง

คำสั่ง square ที่เราสร้างขึ้นมานั้น ทำงานเดิมซ้ำกัน 4 ครั้ง ในภาษา Python สามารถเขียนให้สั้นลงได้ เป็นดังด้านล่าง

<geshi lang="python"> def square():

   for x in range(4):
       t.forward(100)
       t.right(90)

</geshi>

ระวังย่อหน้าให้ตรงกัน และอย่าลืมเครื่องหมาย : หลังบรรทัด def และ for

ให้เขียนส่วนของโปรแกรมดังกล่าวในส่วน Editor จากนั้นคัดลอกมาที่ส่วน Python Shell และทดลองสั่ง square()

คำสั่ง for ที่ใช้ในรูปแบบข้างต้น จะทำให้คำสั่งที่เขียนในส่วนที่ย่อหน้าเข้าไปทำซ้ำเป็นจำนวนรอบเท่ากับค่าที่ใส่ในฟังก์ชัน range ในตัวอย่างข้างต้นคือ 4 เราจะเรียนรายละเอียดมากกว่านี้ในการบรรยายครั้งที่ 5

คำสั่ง square ที่วาดสี่เหลี่ยมจัตุรัสได้หลายขนาด

ก่อนจะทำต่อ ให้ลองตอบคำถามต่อไปนี้

• คำสั่ง square ที่สร้างขึ้นตอนต้น วาดสี่เหลี่ยมจัตุรัสขนาดเท่าใด?
• ส่วนใดของคำสั่งเป็นจุดที่กำหนดขนาดของสี่เหลี่ยมจัตุรัสที่วาดขึ้น

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

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

<geshi lang="python"> def square(s):

   for x in range(4):
       t.forward(s)
       t.right(90)

</geshi>

คัดลอกมาที่ Python Shell แล้วทดลองสั่ง

square(10)
square(50)
square(100)

หมายเหตุ (นอกเรื่อง): สังเกตว่าถ้่าเราไม่ใช้คำสั่ง for ในการลดความซ้ำซ้อนของโปรแกรม ในการแก้โปรแกรม square ให้รับค่าจากภายนอกเราต้องเปลี่ยน 100 เป็น s ถึง 4 ที่ โปรแกรมที่มีส่วนซ้ำ ๆ กันมาก ๆ ย่อมทำให้การแก้ไขเป็นนรกแท้ ๆ

ทดลองสั่งให้เต่ายนต์วาดรูปดังรูปด้านล่าง

วงกลม

อยากให้เต่ายนต์เดินเป็นเส้นโค้งจังเลย!

แม้ว่าเราจะไม่มีคำสั่งให้เต่ายนต์เดินเป็นเส้นโค้ง แต่เราก็สามารถวาดเส้นโค้งแบบประมาณได้

ลองสั่งคำสั่งด้านล่างนี้ซ้ำ ๆ กัน

t.forward(20); t.right(10)

หมายเหตุ 1: ในภาษา Python เราสามารถเขียนคำสั่งหลายคำสั่งในบรรทัดเดียวได้ โดยคั่นด้วยเครื่องหมาย ;

หมายเหตุ 2: ใน Python Shell เราสามารถเรียกคำสั่งเก่า ๆ ขึ้นมาได้โดยกดปุ่มเครื่องหมายขึ้น

ผลลัพธ์ที่ได้เป็นอย่างไร?