ผลต่างระหว่างรุ่นของ "204111:lab1"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
 
(ไม่แสดง 103 รุ่นระหว่างกลางโดยผู้ใช้ 2 คน)
แถว 2: แถว 2:
  
 
* หัดใช้ WingIDE และรู้จักความผิดพลาดและปัญหาในโปรแกรมภาษาไพธอนที่เกิดจากการพิมพ์ผิด  
 
* หัดใช้ WingIDE และรู้จักความผิดพลาดและปัญหาในโปรแกรมภาษาไพธอนที่เกิดจากการพิมพ์ผิด  
−
* หัดใช้ Console
+
* หัดใช้ Python แบบโต้ตอบ ผ่านทาง Python Shell
 
* ทดลอง Turtle Graphics
 
* ทดลอง Turtle Graphics
 
* หัดพิมพ์และทดลองโปรแกรมภาษา Python
 
* หัดพิมพ์และทดลองโปรแกรมภาษา Python
แถว 9: แถว 9:
  
 
เมื่อเราเข้าสู้โปรแกรม [http://www.wingware.com/wingide-101 Wing IDE 101] เราจะพบหน้าจอดังรูปด้านล่าง
 
เมื่อเราเข้าสู้โปรแกรม [http://www.wingware.com/wingide-101 Wing IDE 101] เราจะพบหน้าจอดังรูปด้านล่าง
 +
 
[[Image:Wingide1.png]]
 
[[Image:Wingide1.png]]
 +
 +
หน้าจอดังกล่าวโดยปกติจะถูกแบ่งออกเป็น 3 ส่วน ดังนี้
 +
 +
* ส่วนที่ 1 คือส่วนสำหรับพิมพ์และแก้ไขโปรแกรม ถ้าส่วนนี้ว่างอยู่ สามารถกดปุ่ม '''New''' ที่บนทูลบาร์เพื่อเปิดไฟล์โปรแกรมว่างมาเพื่อแก้ไขได้
 +
* ส่วนที่ 2 และ 3 คือส่วนพื้นที่เครื่องมือ  โดยปกติในส่วนที่ 3 จะมีแท็บ '''Python Shell''' อยู่ ซึ่งเราจะใช้เพื่อพิมพ์คำสั่งโต้ตอบกับ Python
 +
 +
ส่วน Python Shell แสดงดังรูปด้านล่าง  สังเกตว่าเราเลือกแท็บ Python Shell อยู่ไม่ใช่แท็บ Debug I/O (แสดงเป็นแถบสีส้ม)
 +
 +
[[Image:Wingide-python-shell.png]]
 +
 +
เราจะทดลอง Python โดยพิมพ์คำสั่งลงในส่วนดังกล่าวของ Wing IDE 101  เพื่อสร้างความคุ้นเคยกับแนวคิดพื้นฐานต่าง ๆ สิ่งที่เราทดลองนี้จะได้ไปเรียนอย่างละเอียดอีกครั้งในการบรรยายครั้งที่ 2
  
 
=== หัดพิมพ์โปรแกรมและทดลองแบบโต้ตอบ ===
 
=== หัดพิมพ์โปรแกรมและทดลองแบบโต้ตอบ ===
  
−
== Turtle Graphics ==
+
ทดลองพิมพ์คำสั่งต่อไปนี้  (พิมพ์ต่อเครื่องหมาย >>> )
 +
 
 +
2 + 3
 +
 
 +
เมื่อพิมพ์แล้วให้กด Enter จะได้ผลลัพธ์ดังต่อไปนี้  (ในรูปเน้นส่วนที่พิมพ์เป็นสีเขียว ส่วนผลลัพธ์เป็นสีแดง)
 +
 
 +
[[Image:Wingide-expr1.png]]
 +
 
 +
ในส่วนต่อ ๆ ไป เราอาจจะแสดงผลลัพธ์จากการโต้ตอบกับ Python Shell ในลักษณะคล้ายกับรูปข้างต้นนี้ กล่าวคือ บรรทัดที่เราป้อนเข้าไปจะขึ้นต้นด้วยเครื่องหมาย >>> พร้อมทั้งเน้นด้วยตัวหนา ส่วนบรรทัดที่ Python ตอบมาจะแสดงเป็นบรรทัดที่ไม่มีเครื่องหมายดังกล่าวขึ้นต้นแต่จะแสดงด้วยตัวอักษรเอียงแทน  เช่นจากตัวอย่างข้างต้น แทนที่จะใช้รูปเราอาจจะเขียนได้ดังนี้
 +
 
 +
'''>>> 2 + 3'''    <span style="color:green"># นี่คือบรรทัดที่เราพิมพ์</span>
 +
''5''                    <span style="color:green"># นี่คือผลลัพธ์</span>
 +
 
 +
ในการใช้งาน 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
 +
 
 +
การกำหนดค่าให้กับตัวแปรเป็นการสั่งให้ตัวแปร '''อ้างถึง''' ค่านั้น  เขียนอธิบายเป็นรูปได้ดังนี้
 +
 
 +
[[Image:Var-assignment.png]]
 +
 
 +
'''หมายเหตุ''': ระหว่างตัวแปรและเครื่องหมายเท่ากับไม่จำเป็นต้องเว้นช่องว่างก็ได้ อย่างไรก็ตามเราแนะนำให้เว้นเพื่อให้อ่านได้ง่าย
 +
 
 +
เราสามารถนำตัวแปรมาใช้งานได้ดังนี้
 +
 
 +
'''>>> 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 ทำอะไร
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
== เต่ายนต์ ==
 +
<div style="float:right">[[Image:Turtle.png]]</div>
 +
ในส่วนนี้เราจะทดลองการสั่งงานคอมพิวเตอร์ให้สร้างสรรค์งานศิลปะแบบง่าย ๆ เพื่อฝึกการคิดแบบเป็นขั้นตอน  เราจะได้ทดลองวาดภาพโดยการควบคุม '''เต่ายนต์''' ให้นึกถึงว่าเต่ำนี้เป็นเต่าที่ถือปากกา และเราจะสามารถสั่งเต่าให้เดินไปมาพร้อม ๆ กับลากปากกาดังกล่าวสร้างสรรค์รูปออกมาได้
 +
 
 +
'''สิ่งสำคัญที่สุดของการทำแบบฝึกหัดนี้ก็คือ อย่ากลัวที่จะผิดพลาด!!!'''
 +
 
 +
=== เปิดหน้าต่างเต่า ===
 +
เราจะทำงานที่ส่วน Python Shell เป็นหลัก อย่างไรก็ตามส่วนนี้มีขนาดเล็กเมื่อเทียบกับหน้าจอทั้งหมดของ Wing IDE 101 ดังนั้นให้ขยายขนาดของส่วนดังกล่าว โดยกดลากที่บริเวณขอบของส่วนดังกล่าว (อาจจะมองไม่เห็นขอบ แต่ให้บริเวณลูกศรเปลี่ยนเป็นสัญลักษณ์ลูกศรสองหัวสำหรับลาก)  เมื่อขยายแล้วให้ได้หน้าจอลักษณะดังรูปด้านล่าง
 +
 
 +
[[Image:Wingide-big-python-shell.png]]
 +
 
 +
เมื่อปรับดังกล่าวได้แล้วให้ย่อหน้าต่าง Wing IDE ให้มีขนาดประมาณ 1/2 ของหน้าจอ (ถ้าหน้าต่างขยายเต็มที่อย่าลืมกดปุ่มมุมบนขวาให้หน้าต่างเลิกขยายเต็มจอก่อน)  ดูขนาดโดยประมาณได้จากรูปหลังจากการเปิดหน้าต่างเต่าแล้ว
 +
 
 +
เราจะเริ่มใช้งานระบบ Turtle graphics โดยการประกาศเรียกโมดูล turtle ก่อน โดยพิมพ์คำสั่งด้านล่างลงใน Python shell
 +
 
 +
from turtle import *
 +
 
 +
จากนั้นให้สั่ง '''สร้าง''' เต่า แล้วกำหนดค่าให้ตัวแปร <tt>t</tt> อ้างถึงเต่าตัวนั้น โดยพิมพ์คำสั่ง
 +
 
 +
t = Turtle()
 +
 
 +
จะมีหน้่าต่างชื่อ '''Python Turtle Graphics''' ปรากฏขึ้น หน้าต่างนี้อาจจะใช้เวลาเล็กน้อยก่อนจะปรากฏขึ้น และอาจจะอยู่ด้านหลังหน้าต่าง Wing IDE ให้กดเลือกเพื่อเลื่อนขึ้นมาด้านหน้า
 +
 
 +
จากนั้นปรับขนาดของหน้าต่างทั้งสองหน้าต่างให้เห็นได้ทั้งคู่พร้อม ๆ กัน เพราะว่าเราจะสั่งงานที่ Wing IDE แต่ภาพวาดของเต่าจะแสดงที่หน้าจอใหม่นี้  ตัวอย่างแสดงดังรูปด้านล่าง
 +
 
 +
[[Image:Wingide-and-turtle-windows.png]]
 +
 
 +
เมื่อได้ดังนี้แล้ว ลองพิมพ์
 +
 
 +
t.forward(100)
 +
 
 +
จะเห็นเส้นลากไปทางขวา (ผลจากการลากปากกา) พร้อมเครื่องหมายลูกศร (แสดงถึงตำแหน่งและทิศทางการหันของเต่า) นั่นคือเราพร้อมจะทดลองกับเต่ายนต์แล้ว
 +
 
 +
'''หมายเหตุ:''' ระหว่างการทดลอง ถ้าจำเป็นต้องปิดโปรแกรม Wing IDE หรือปิดเครื่อง ให้สั่งคำสั่งสองคำสั่งนี้ Python Shell เพื่อเปิดหน้าต่างเต่าก่อนจะทำงานได้
 +
 
 +
from turtle import *
 +
t = Turtle()
 +
 
 +
=== ทดลองคำสั่ง ===
 +
จากเส้นดังกล่าว ทดลองสั่งคำสั่งต่อไปนี้ทีละคำสั่ง และสังเกตพฤติกรรมของเต่ายนต์
 +
 
 +
t.right(90)
 +
 
 +
t.forward(200)
 +
 
 +
การสั่ง <tt>forward</tt> และ <tt>right</tt> ทำให้เต่ายนต์ทำอะไร?
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
คำสั่ง '''forward''' และ คำสั่ง '''right''' เป็นคำสั่งที่สั่งที่สั่งให้กับเต่ายนต์ เวลาเราพูดถึงคำสั่งเราจะละส่วน <tt>t.</tt> เอาไว้ แต่เมื่อจะสั่งเราต้องอ้างถึงเต่ายนต์ที่เราจะสั่งด้วย
 +
 
 +
ทดลองสั่งให้เต่ายนต์เคลื่อนที่จนกระทั่งได้รูปสี่เหลี่ยมผืนผ้าขนาด 100 x 200 ดังตัวอย่างด้านล่าง
 +
 
 +
[[Image:Turtle-rectangle.png]]
 +
 
 +
บันทึกคำสั่งที่สั่งลงด้านล่างนี้
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
<div style="background: #e0ffe0; padding: 5px;">
 +
'''ถ้าสั่งผิดพลาด:''' อย่าเพิ่งกลัวว่าเต่ายนต์จะวาดผิด ทำให้ได้เส้นเกินมา  สำหรับแบบฝึกหัดนี้ให้ถือว่า '''เส้นเกินดีกว่าเส้นขาด'''
 +
 
 +
ถ้าเราสั่ง <tt>forward</tt> ไกลไป สามารถสั่ง '''<tt>backward(ระยะทาง)</tt>''' ให้เต่ายนต์เดินถอยหลังย้อนกลับได้ ในทำนองเดียวกัน เราสามารถสั่ง '''<tt>left(มุม)</tt>''' เพื่อให้เต่าหันซ้ายได้
 +
 
 +
หรือถ้่าต้องการยกเลิกทุกอย่าง สามารถสั่ง '''<tt>clear()</tt>''' ให้ลบทุกอย่างทิ้งได้ (แต่เต่ายนต์ยังอยู่ที่เดิม) ถ้าต้องการให้เต่ายนต์กลับมาที่จุดเริ่มต้นสั่ง '''<tt>home()</tt>'''
 +
 
 +
อย่าลืมว่าจะสั่งคำสั่งเหล่านี้้ต้องสั่งผ่านทางเต่ายนต์ เช่น สั่ง '''t.backward(100)''' เป็นต้น
 +
</div>
 +
 
 +
ทดลองสั่งให้เต่ายนต์เคลื่อนที่ต่อจนกระทั่งได้รูปบ้านดังตัวอย่างด้านล่าง  (หมายเหตุ:กว่าจะทำรูปดังกล่าวเป็นตัวอย่างได้ ผู้ทำต้องลบไปหลา่ยรอบเหมือนกัน แต่อย่าลืม! จะมีเส้นเกินมาบ้างก็ไม่เป็นไร)
 +
 
 +
[[Image:Turtle-house.png]]
 +
 
 +
'''คำใบ้''' สามเหลี่ยมด้านเท่ามีมุมภายใน 60 องศา  (แต่ไม่จำเป็นต้องสร้างสามเหลี่ยมด้านเท่าก็ได้)
 +
 
 +
บันทึกคำสั่งที่สั่งลงด้านล่างนี้
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
==== สรุปคำสั่ง ====
 +
 
 +
* '''forward(ระยะทาง)''' และ '''backward(ระยะทาง)'''  ---- ให้เต่ายนต์เคลื่อนที่ไปด้านหน้า / ด้านหลัง
 +
* '''left(มุม)''' และ '''right(มุม)''' ---- ให้เต่ายนต์หันซ้าย / หันขวา
 +
* '''home()''' ---- ให้เต่ายนต์กลับบ้าน (กลับไปที่จุดเริ่มต้น และหันหัวไปทางขนานกับแกน x)
 +
* '''clear()''' ---- ลบภาพทั้งหมด
 +
 
 +
=== การป้อนคำสั่งที่สะดวก (และปลอดภัย) ขึ้น ===
 +
การป้อนคำสั่งทีละคำสั่งทำให้เมื่อเราทำขั้นตอนยาว ๆ แล้วผิดพลาด การแก้ไขทำได้ยากมาก 
 +
 
 +
เราจะเปลี่ยนเป็นเขียนคำสั่งหลาย ๆ คำสั่งแล้วค่อยนำไปสั่งใน Python Shell  การเขียนในลักษณะนี้ทำให้ถ้าเราสั่งผิดพลาดเราสามารถแก้ไขได้ง่าย โดยไม่ต้องนั่งพิมพ์ทุกอย่างใหม่
 +
 
 +
ให้กดปุ่ม New ที่มุมซ้ายของทูลบาร์ (เน้นด้วยวงกลมสีแดง)  จากนั้นย่อขนาดส่วน Python Shell ให้เตี้ยลง (หรือจะขยายหน้าจอ Wing IDE ให้สูงขึ้นก็ได้)
 +
 
 +
ในส่วนด้านบนเรียกว่าส่วน '''Editor''' (เอดิเตอร์) จะเป็นส่วนที่เราป้อนคำสั่งได้หลาย ๆ คำสั่งโดยยังไม่ถูกนำไปทำงาน (ลูกศรสีเขียวชี้อยู่)  เมื่อเราเขียนจนพอใจแล้ว ให้ใช้เมาส์ลากเลือกส่วนดังกล่าว (จะเห็นเป็นสีเหลือง ๆ) จากนั้น Copy (โดยกด Ctrl-C) แล้วไปที่ส่วน Python Shell แล้วกด Paste (กด Ctrl-V) เพื่อสั่งชุดคำสั่งดังกล่าว
 +
 
 +
รูปประกอบแสดงด้านล่างนี้
 +
 
 +
[[Image:Wingide-copy-and-paste.png]]
 +
 
 +
=== มาวาดรูปกัน! ===
 +
ก่อนที่เราจะสามารถวาดรูปที่ซับซ้อนได้ เราจะต้องรู้จักคำสั่งในการควบคุมเต่ายนต์อีกสองคำสั่งคือ
 +
 
 +
* penup() ให้เต่ายกปากกา
 +
* pendown() ให้เต่าวางปากกา
 +
 
 +
ให้ลบทุกอย่างทิ้ง โดยสั่ง
 +
 
 +
t.home()
 +
t.clear()
 +
 
 +
จากนั้นลองใช้คำสั่งยกและวางปากกาสั่งให้เต่ายนต์วาดรูปดังต่อไปนี้
 +
 
 +
[[Image:Turtle-pu-pd.png]]
 +
 
 +
คำสั่งที่ใช้คือ
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
=== สร้างคำสั่งใหม่ ===
 +
 
 +
 
 +
: ''อยากวาดสี่เหลี่ยมจัตุรัส! ถ้ามีคำสั่งที่สั่งได้ง่าย ๆ ก็คงดีน่ะสิ''
 +
 
 +
เราสามารถสอน Python ให้รู้จักคำสั่งใหม่ได้  หลักการคร่าว ๆ ก็คือ เราสามารถรวมชุดของคำสั่งที่ใช้บ่อย ๆ มานิยามเป็นคำสั่งใหม่เพื่อให้ใช้งานได้
 +
 
 +
พิมพ์ส่วนของโปรแกรมนี้ในหน้า Editor ก่อนจะคัดลอกมาที่ Python Shell
 +
 
 +
<syntaxhighlight 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)
 +
</syntaxhighlight>
 +
 
 +
<span style="color:red">'''ในการพิมพ์ให้ระวังเครื่องหมาย : ที่ท้ายบรรทัดแรก และระวังย่อหน้าให้ตรงกันด้วย'''</span>  สังเกตว่าเมื่อเราะขึ้นบรรทัดใหม่ถัดจากบรรทัดแรก Wing IDE จะพยายามจัดย่อหน้าให้โดยอัตโนมัติ
 +
 
 +
จากนั้นให้คัดลอกส่วนดังกล่าวมาใส่ใน Python Shell ถ้าไม่มีข้อผิดพลาดแสดงว่าเรานิยามคำสั่ง '''square()''' แล้ว ลองสั่งโดยพิมพ์
 +
 
 +
square()
 +
 
 +
เต่าจะวาดรูปสี่เหลี่ยมจัตุรัสขนาด 100 x 100
 +
 
 +
ลองสั่งให้เต่าวาดรูปดังรูปด้านล่าง โดยใช้คำสั่ง <tt>square()</tt>
 +
 
 +
[[Image:Turtle-2-rectangles.png]]
 +
 
 +
คำสั่งที่ใช้คือ
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
 
 +
 
 +
คำสั่ง '''square''' ที่เราสร้างขึ้นมานั้น ทำงานเดิมซ้ำกัน 4 ครั้ง ในภาษา Python สามารถเขียนให้สั้นลงได้ เป็นดังด้านล่าง
 +
 
 +
<syntaxhighlight lang="python">
 +
def square():
 +
    for x in range(4):
 +
        t.forward(100)
 +
        t.right(90)
 +
</syntaxhighlight>
 +
 
 +
<span style="color:red">'''ระวังย่อหน้าให้ตรงกัน และอย่าลืมเครื่องหมาย : หลังบรรทัด def และ for'''</span>
 +
 
 +
ให้เขียนส่วนของโปรแกรมดังกล่าวในส่วน Editor จากนั้นคัดลอกมาที่ส่วน Python Shell และทดลองสั่ง square()
 +
 
 +
คำสั่ง for ที่ใช้ในรูปแบบข้างต้น จะทำให้คำสั่งที่เขียนในส่วนที่ย่อหน้าเข้าไปทำซ้ำเป็นจำนวนรอบเท่ากับค่าที่ใส่ในฟังก์ชัน '''range''' ในตัวอย่างข้างต้นคือ 4  เราจะเรียนรายละเอียดมากกว่านี้ในการบรรยายครั้งที่ 5
 +
 
 +
=== คำสั่ง square ที่วาดสี่เหลี่ยมจัตุรัสได้หลายขนาด ===
 +
ก่อนจะทำต่อ ให้ลองตอบคำถามต่อไปนี้
 +
 
 +
* คำสั่ง square ที่สร้างขึ้นตอนต้น วาดสี่เหลี่ยมจัตุรัสขนาดเท่าใด?
 +
* ส่วนใดของคำสั่งเป็นจุดที่กำหนดขนาดของสี่เหลี่ยมจัตุรัสที่วาดขึ้น
 +
 
 +
สังเกตว่าเมื่อเราสั่งคำสั่ง forward เราต้องระบุระยะทางให้กับคำสั่งดังกล่าว  ค่าระยะทางที่กำหนดให้ดังกล่าวทำให้เราสามารถเปลี่ยนแปลงพฤติกรรมของคำสั่งนั้นได้ ไม่ใช่ว่าสั่ง forward แล้วเต่ายนต์จะขยับไป 100 หน่วยเสมอ
 +
 
 +
เราสามารถนิยามคำสั่ง square ใหม่ที่ปรับเปลี่ยนพฤติกรรมได้ตามค่าที่ส่งให้กับคำสั่งเช่นเดียวกับคำสั่ง forward ได้ดังนี้
 +
 
 +
<syntaxhighlight lang="python">
 +
def square(s):
 +
    for x in range(4):
 +
        t.forward(s)
 +
        t.right(90)
 +
</syntaxhighlight>
 +
 
 +
คัดลอกมาที่ Python Shell แล้วทดลองสั่ง
 +
 
 +
square(10)
 +
square(50)
 +
square(100)
 +
 
 +
'''หมายเหตุ (นอกเรื่อง):''' สังเกตว่าถ้่าเราไม่ใช้คำสั่ง for ในการลดความซ้ำซ้อนของโปรแกรม ในการแก้โปรแกรม square ให้รับค่าจากภายนอกเราต้องเปลี่ยน 100 เป็น s ถึง 4 ที่  '''โปรแกรมที่มีส่วนซ้ำ ๆ กันมาก ๆ ย่อมทำให้การแก้ไขเป็นนรกแท้ ๆ'''
 +
 
 +
ทดลองสั่งให้เต่ายนต์วาดรูปดังรูปด้านล่าง
 +
 
 +
[[Image:Turtle-4-squares.png]]
 +
 
 +
=== วงกลม ===
 +
: ''อยากให้เต่ายนต์เดินเป็นเส้นโค้งจังเลย!''
 +
 
 +
แม้ว่าเราจะไม่มีคำสั่งให้เต่ายนต์เดินเป็นเส้นโค้ง แต่เราก็สามารถวาดเส้นโค้งแบบประมาณได้
 +
 
 +
ลองสั่งคำสั่งด้านล่างนี้ซ้ำ ๆ กัน
 +
 
 +
t.forward(20); t.right(10)
 +
 
 +
'''หมายเหตุ 1:''' ในภาษา Python เราสามารถเขียนคำสั่งหลายคำสั่งในบรรทัดเดียวได้ โดยคั่นด้วยเครื่องหมาย ''';'''
 +
 
 +
'''หมายเหตุ 2:''' ใน Python Shell เราสามารถเรียกคำสั่งเก่า ๆ ขึ้นมาได้โดยกดปุ่มเครื่องหมายขึ้น
 +
 
 +
ผลลัพธ์ที่ได้เป็นอย่างไร?
 +
 
 +
จากแนวคิดดังกล่าว เราสามารถสร้างคำสั่งวาดวงกลมได้ดังนี้
 +
 
 +
<syntaxhighlight lang="python">
 +
def circle():
 +
    for x in range(36):
 +
        t.forward(20)
 +
        t.right(10)
 +
</syntaxhighlight>
 +
 
 +
== ทดลองเขียนโปรแกรมเกมทายเลข ==
 +
ในส่วนนี้เราจะทดลองพัฒนาโปรแกรมเกมทายตัวเลข โดยเราจะเขียนโปรแกรมในส่วน Editor จากนั้นจะเรียกให้โปรแกรมทำงานโดยตรง (โดยไม่ต้องคัดลอกไปวางใน Python Shell เมื่อในส่วนก่อน)  การทดลองในส่วนนี้มีเป้าหมายเพื่อฝึกให้นิสิตคุ้นเคยกับ Wing IDE 101 และภาษา Python เพื่อลดความผิดพลาดที่จะเกิดขึ้นในการเขียนเมื่อเรียนต่อ ๆ ไป
 +
 
 +
เกมทายตัวเลขมีการทำงานดังนี้
 +
 
 +
* เกมจะสุ่มตัวเลขจาก 1 - 100
 +
* ให้ผู้ใช้ทาย เกมจะใบ้โดยการบอกว่ามากไป หรือน้อยไป
 +
* เมื่อผู้ใช้ทายถูกจะจบเกม
 +
 
 +
เราจะเริ่มเขียนโปรแกรมโดยเขียนไปทีละส่วน และค่อย ๆ เพิ่มความสามารถให้กับโปรแกรมทีละขั้น
 +
 
 +
=== เริ่มต้น: บอกว่ามากไปหรือน้อยไป ===
 +
 
 +
เริ่มเขียนโดยกดปุ่ม New บนทูลบาร์ จากนั้นพิมพ์โปรแกรมด้านล่างนี้
 +
 
 +
<syntaxhighlight lang="python">
 +
answer = 53
 +
guess = int(input("Guess the number between 1-100: "))
 +
if guess > answer:
 +
    print("Too high")
 +
if guess < answer:
 +
    print("Too low")
 +
if guess == answer:
 +
    print("Correct answer!")
 +
</syntaxhighlight>
 +
   
 +
 
 +
สั่งให้โปรแกรมทำงานโดยกดปุ่ม Run บนทูลบาร์ (เป็นรูปสามเหลี่ยมสีเขียว)  โปรแกรมจะทำงานในส่วน Python Shell เมื่อโปรแกรมทำงานเสร็จเราจะกลับมาที่เครื่องหมาย >>> ที่พร้อมจะรับคำสั่งต่อไป  ถ้าต้องการสั่งให้โปรแกรมทำงานอีกครั้ง ให้กดปุ่ม Run เช่นเดิม
 +
 
 +
'''ข้อควรระวัง:''' ดูเครื่องหมาย : ให้ครบ ดูวงเล็บและเครื่องหมายคำพูด (") ให้เข้าคู่
 +
 
 +
ลองพิจารณาโปรแกรมข้างต้น แล้วตอบคำถามต่อไปนี้
 +
 
 +
* ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Correct answer!
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
}}
 +
* ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Too high
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
}}
 +
* ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Too low
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
}}
 +
* คำสั่ง if ทำอะไร?
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
สังเกตว่าในโปรแกรมข้างต้น เรายังไม่ทราบวิธีการสุ่มเลข เราเลยกำหนดให้คำตอบมีค่าเป็น 53 ไว้ก่อน
 +
 
 +
=== ทายหลายครั้ง ===
 +
 
 +
โปรแกรมที่เขียนแล้วนั้นทำงานแค่รอบเดียว เราจะแก้โปรแกรมให้ทำงานหลายรอบ ซ้ำ ๆ กัน โดยใช้โครงสร้าง '''while'''
 +
 
 +
แก้โปรแกรมให้เป็นตามด้านล่าง ระวังเรื่องย่อหน้า, เครื่องหมาย และตัว T ใหญ่ ในคำว่า True
 +
<syntaxhighlight lang="python">
 +
answer = 53
 +
while True:
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
</syntaxhighlight>
 +
 
 +
สังเกตว่าลักษณะของโปรแกรมที่เราเขียนจะมีการย่อหน้าเป็นชั้น ๆ  ระดับของการย่อหน้ามีความหมายบอกถึงขอบเขตของโครงสร้างที่ครอบคลุมย่อหน้านั้น  ในตัวอย่างข้างต้นคือโครงสร้าง '''while'''
 +
 
 +
เราจะได้เรียนเกี่ยวกับลักษณะการควบคุมของโครงสร้าง '''while''' ต่อไป ในที่นี้ให้เข้าใจว่า ถ้าเงื่อนไขที่ตามหลังคำว่า while เป็นจริง คำสั่งที่อยู่ภายในการควบคุมของโครงสร้าง while ก็จะถูกทำซ้ำไปเรื่อย ๆ  ในที่นี้คำว่า '''True''' (จริง) แทนเงื่อนไขที่เป็นจริงเสมอ
 +
 
 +
ลองสั่งให้โปรแกรมทำงาน และทดลองป้อนค่าต่าง ๆ
 +
 
 +
เมื่อสั่งให้โปรแกรมทำงาน เราจะพบว่าคำสั่งภายในโครงสร้าง while ถูกทำงานซ้ำไปเรื่อย ๆ ไม่มีวันสิ้นสุด แม้ว่าเราจะพิมพ์คำตอบที่ถูกต้องแล้วก็ตาม
 +
 
 +
เราสามารถใช้คำสั่ง '''break''' ควบคู่กับโครงสร้าง '''while''' เพื่อทำให้การทำงานซ้ำจบลง  เราจะแก้โปรแกรมให้เป็นดังด้านล่าง 
 +
 
 +
ทดลองเรียกให้โปรแกรมทำงานและทดลองทายค่าต่าง ๆ
 +
 
 +
<syntaxhighlight lang="python">
 +
answer = 53
 +
while True:
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
        break
 +
</syntaxhighlight>
 +
 
 +
'''ข้อควรระวัง:''' ระวังการเว้นย่อหน้าของคำสั่ง '''break''' ให้ถูกต้อง
 +
 
 +
ในภาษา Python การเว้นย่อหน้ามีความสำคัญมาก  ทดลองแก้โปรแกรมโดยเลื่อนย่อหน้าของคำสั่ง break ให้เป็นดังโปรแกรมด้านล่าง
 +
 
 +
<syntaxhighlight lang="python">
 +
answer = 53
 +
while True:
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
    break
 +
</syntaxhighlight>
 +
 
 +
จากนั้นทดลองสั่งให้โปรแกรมทำงาน และป้อนการทายค่าด้วยค่าต่าง ๆ เช่น 10, 53 หรือ 80
 +
 
 +
การทำงานของโปรแกรมเป็นอย่างไร อธิบายได้หรือไม่ว่าเหตุใดจึงเป็นเช่นนั้น
 +
{{กล่องคำตอบแล็บ|
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
}}
 +
 
 +
=== สุ่มค่าตัวเลข ===
 +
ในการสุ่มค่าตัวเลข เราจะใช้ฟังก์ชัน '''<tt>randint</tt>''' จาก โมดูล '''<tt>random</tt>'''  ดังนั้นที่ต้นโปรแกรมของเรา เราจะต้องประกาศขอใช้โมดูลดังกล่าวเสียก่อน โดยสั่ง
 +
 
 +
import random
 +
 
 +
หลังจากบรรทัดดังกล่าว เราจะสามารถเรียกใช้ทุก ๆ ฟังก์ชันที่อยู่ในโมดูล <tt>random</tt> ได้ โดยเขียนในลักษณะ '''random.ชื่อฟังก์ชัน'''
 +
 
 +
ฟังก์ชัน '''<tt>randint</tt>''' รับค่าสองค่า คือค่าต่ำสุดและค่าสูงสุดของตัวเลขที่ต้องการสุ่ม  เราแก้โปรแกรมของเราเพื่อเรียกใช้ฟังก์ชันดังกล่าวได้ดังนี้
 +
 
 +
<syntaxhighlight lang="python">
 +
import random
 +
 
 +
answer = random.randint(1,100)
 +
while True:
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
        break
 +
</syntaxhighlight>
 +
 
 +
=== นับจำนวนครั้งการทายเลข ===
 +
เราจะเก็บจำนวนรอบของการทายไว้ในตัวแปรชื่อ <tt>count</tt> โดยตัวแปรนี้จะมีค่าเริ่มต้นเป็น 0 และจะค่อย ๆ เพิ่มค่าขึ้นเมื่อเราทำงาน
 +
 
 +
<syntaxhighlight lang="python">
 +
import random
 +
 
 +
answer = random.randint(1,100)
 +
count = 0
 +
while True:
 +
    count = count + 1
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
        break
 +
print("You guessed",count,"times.")
 +
</syntaxhighlight>
 +
 
 +
บรรทัด <tt>count = count + 1</tt> สามารถเขียนย่อให้เข้าใจได้ง่ายขึ้นเป็น
 +
 
 +
count += 1
 +
 
 +
โปรแกรมด้านล่าง เพิ่มส่วนแสดงความยินดีถ้าผู้เล่นทายได้ถูกต้องภายใน 5 ตา
 +
 
 +
<syntaxhighlight lang="python">
 +
import random
  
−
== เกมทายเลข ==
+
answer = random.randint(1,100)
 +
count = 0
 +
while True:
 +
    count = count + 1
 +
    guess = int(input("Guess the number between 1-100: "))
 +
    if guess > answer:
 +
        print("Too high")
 +
    if guess < answer:
 +
        print("Too low")
 +
    if guess == answer:
 +
        print("Correct answer!")
 +
        break
 +
print("You guessed",count,"times.")
 +
if count <= 5:
 +
    print("You did very well.")
 +
</syntaxhighlight>

รุ่นแก้ไขปัจจุบันเมื่อ 03:26, 29 เมษายน 2559

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

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

รู้จักกับ WingIDE

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

Wingide1.png

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

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

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

Wingide-python-shell.png

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

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

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

2 + 3

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

Wingide-expr1.png

ในส่วนต่อ ๆ ไป เราอาจจะแสดงผลลัพธ์จากการโต้ตอบกับ 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

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

Var-assignment.png

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

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

>>> 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 ทำอะไร



เต่ายนต์

Turtle.png

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

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

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

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

Wingide-big-python-shell.png

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

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

from turtle import *

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

t = Turtle()

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

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

Wingide-and-turtle-windows.png

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

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 ดังตัวอย่างด้านล่าง

Turtle-rectangle.png

บันทึกคำสั่งที่สั่งลงด้านล่างนี้






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

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

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

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

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

Turtle-house.png

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

บันทึกคำสั่งที่สั่งลงด้านล่างนี้








สรุปคำสั่ง

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

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

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

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

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

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

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

Wingide-copy-and-paste.png

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

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

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

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

t.home()
t.clear()

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

Turtle-pu-pd.png

คำสั่งที่ใช้คือ





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

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

เราสามารถสอน 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)

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

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

square()

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

ลองสั่งให้เต่าวาดรูปดังรูปด้านล่าง โดยใช้คำสั่ง square()

Turtle-2-rectangles.png

คำสั่งที่ใช้คือ





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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Turtle-4-squares.png

วงกลม

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

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

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

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

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

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

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

จากแนวคิดดังกล่าว เราสามารถสร้างคำสั่งวาดวงกลมได้ดังนี้ 

def circle():
    for x in range(36):
        t.forward(20)
        t.right(10)

ทดลองเขียนโปรแกรมเกมทายเลข

ในส่วนนี้เราจะทดลองพัฒนาโปรแกรมเกมทายตัวเลข โดยเราจะเขียนโปรแกรมในส่วน Editor จากนั้นจะเรียกให้โปรแกรมทำงานโดยตรง (โดยไม่ต้องคัดลอกไปวางใน Python Shell เมื่อในส่วนก่อน) การทดลองในส่วนนี้มีเป้าหมายเพื่อฝึกให้นิสิตคุ้นเคยกับ Wing IDE 101 และภาษา Python เพื่อลดความผิดพลาดที่จะเกิดขึ้นในการเขียนเมื่อเรียนต่อ ๆ ไป

เกมทายตัวเลขมีการทำงานดังนี้

  • เกมจะสุ่มตัวเลขจาก 1 - 100
  • ให้ผู้ใช้ทาย เกมจะใบ้โดยการบอกว่ามากไป หรือน้อยไป
  • เมื่อผู้ใช้ทายถูกจะจบเกม

เราจะเริ่มเขียนโปรแกรมโดยเขียนไปทีละส่วน และค่อย ๆ เพิ่มความสามารถให้กับโปรแกรมทีละขั้น

เริ่มต้น: บอกว่ามากไปหรือน้อยไป

เริ่มเขียนโดยกดปุ่ม New บนทูลบาร์ จากนั้นพิมพ์โปรแกรมด้านล่างนี้ 

answer = 53
guess = int(input("Guess the number between 1-100: "))
if guess > answer:
    print("Too high")
if guess < answer:
    print("Too low")
if guess == answer:
    print("Correct answer!")


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

ข้อควรระวัง: ดูเครื่องหมาย : ให้ครบ ดูวงเล็บและเครื่องหมายคำพูด (") ให้เข้าคู่

ลองพิจารณาโปรแกรมข้างต้น แล้วตอบคำถามต่อไปนี้

  • ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Correct answer!


  • ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Too high


  • ต้องทายเท่าใดโปรแกรมถึงจะตอบว่า Too low


  • คำสั่ง if ทำอะไร?



สังเกตว่าในโปรแกรมข้างต้น เรายังไม่ทราบวิธีการสุ่มเลข เราเลยกำหนดให้คำตอบมีค่าเป็น 53 ไว้ก่อน

ทายหลายครั้ง

โปรแกรมที่เขียนแล้วนั้นทำงานแค่รอบเดียว เราจะแก้โปรแกรมให้ทำงานหลายรอบ ซ้ำ ๆ กัน โดยใช้โครงสร้าง while

แก้โปรแกรมให้เป็นตามด้านล่าง ระวังเรื่องย่อหน้า, เครื่องหมาย และตัว T ใหญ่ ในคำว่า True 

answer = 53
while True:
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")

สังเกตว่าลักษณะของโปรแกรมที่เราเขียนจะมีการย่อหน้าเป็นชั้น ๆ ระดับของการย่อหน้ามีความหมายบอกถึงขอบเขตของโครงสร้างที่ครอบคลุมย่อหน้านั้น ในตัวอย่างข้างต้นคือโครงสร้าง while

เราจะได้เรียนเกี่ยวกับลักษณะการควบคุมของโครงสร้าง while ต่อไป ในที่นี้ให้เข้าใจว่า ถ้าเงื่อนไขที่ตามหลังคำว่า while เป็นจริง คำสั่งที่อยู่ภายในการควบคุมของโครงสร้าง while ก็จะถูกทำซ้ำไปเรื่อย ๆ ในที่นี้คำว่า True (จริง) แทนเงื่อนไขที่เป็นจริงเสมอ

ลองสั่งให้โปรแกรมทำงาน และทดลองป้อนค่าต่าง ๆ

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

เราสามารถใช้คำสั่ง break ควบคู่กับโครงสร้าง while เพื่อทำให้การทำงานซ้ำจบลง เราจะแก้โปรแกรมให้เป็นดังด้านล่าง

ทดลองเรียกให้โปรแกรมทำงานและทดลองทายค่าต่าง ๆ 

answer = 53
while True:
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")
        break

ข้อควรระวัง: ระวังการเว้นย่อหน้าของคำสั่ง break ให้ถูกต้อง

ในภาษา Python การเว้นย่อหน้ามีความสำคัญมาก ทดลองแก้โปรแกรมโดยเลื่อนย่อหน้าของคำสั่ง break ให้เป็นดังโปรแกรมด้านล่าง 

answer = 53
while True:
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")
    break

จากนั้นทดลองสั่งให้โปรแกรมทำงาน และป้อนการทายค่าด้วยค่าต่าง ๆ เช่น 10, 53 หรือ 80

การทำงานของโปรแกรมเป็นอย่างไร อธิบายได้หรือไม่ว่าเหตุใดจึงเป็นเช่นนั้น





สุ่มค่าตัวเลข

ในการสุ่มค่าตัวเลข เราจะใช้ฟังก์ชัน randint จาก โมดูล random ดังนั้นที่ต้นโปรแกรมของเรา เราจะต้องประกาศขอใช้โมดูลดังกล่าวเสียก่อน โดยสั่ง 

import random

หลังจากบรรทัดดังกล่าว เราจะสามารถเรียกใช้ทุก ๆ ฟังก์ชันที่อยู่ในโมดูล random ได้ โดยเขียนในลักษณะ random.ชื่อฟังก์ชัน

ฟังก์ชัน randint รับค่าสองค่า คือค่าต่ำสุดและค่าสูงสุดของตัวเลขที่ต้องการสุ่ม เราแก้โปรแกรมของเราเพื่อเรียกใช้ฟังก์ชันดังกล่าวได้ดังนี้ 

import random

answer = random.randint(1,100)
while True:
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")
        break

นับจำนวนครั้งการทายเลข

เราจะเก็บจำนวนรอบของการทายไว้ในตัวแปรชื่อ count โดยตัวแปรนี้จะมีค่าเริ่มต้นเป็น 0 และจะค่อย ๆ เพิ่มค่าขึ้นเมื่อเราทำงาน 

import random

answer = random.randint(1,100)
count = 0
while True:
    count = count + 1
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")
        break
print("You guessed",count,"times.")

บรรทัด count = count + 1 สามารถเขียนย่อให้เข้าใจได้ง่ายขึ้นเป็น 

count += 1

โปรแกรมด้านล่าง เพิ่มส่วนแสดงความยินดีถ้าผู้เล่นทายได้ถูกต้องภายใน 5 ตา 

import random

answer = random.randint(1,100)
count = 0
while True:
    count = count + 1
    guess = int(input("Guess the number between 1-100: "))
    if guess > answer:
        print("Too high")
    if guess < answer:
        print("Too low")
    if guess == answer:
        print("Correct answer!")
        break
print("You guessed",count,"times.")
if count <= 5:
    print("You did very well.")
ดึงข้อมูลจาก "http://158.108.32.49/wiki/index.php?title=204111:lab1&oldid=56684"