ผลต่างระหว่างรุ่นของ "204111:lab1"
Jittat (คุย | มีส่วนร่วม) |
Jittat (คุย | มีส่วนร่วม) |
||
แถว 195: | แถว 195: | ||
[[Image:Turtle-rectangle.png]] | [[Image:Turtle-rectangle.png]] | ||
− | ทดลองสั่งให้เต่ายนต์เคลื่อนที่ต่อจนกระทั่งได้รูปบ้านดังตัวอย่างด้านล่าง | + | <div style="background: #e0ffe0; padding: 5px;"> |
+ | '''ถ้าสั่งผิดพลาด:''' อย่าเพิ่งกลัวว่าเต่ายนต์จะวาดผิด ทำให้ได้เส้นเกินมา สำหรับแบบฝึกหัดนี้ให้ถือว่า '''เส้นเกินดีกว่าเส้นขาด''' | ||
+ | |||
+ | ถ้าเราสั่ง <tt>forward</tt> ไกลไป สามารถสั่ง <tt>t.backward(ระยะทาง)</tt> ให้เต่ายนต์เดินถอยหลังย้อนกลับได้ ในทำนองเดียวกัน เราสามารถสั่ง <tt>t.left(มุม)</tt> เพื่อให้เต่าหันซ้ายได้ | ||
+ | |||
+ | หรือถ้่าต้องการยกเลิกทุกอย่าง สามารถสั่ง <tt>t.clear()</tt> ให้ลบทุกอย่างทิ้งได้ (แต่เต่ายนต์ยังอยู่ที่เดิม) ถ้าต้องการให้เต่ายนต์กลับมาที่จุดเริ่มต้นสั่ง <tt>t.home()</tt> | ||
+ | </div> | ||
+ | |||
+ | ทดลองสั่งให้เต่ายนต์เคลื่อนที่ต่อจนกระทั่งได้รูปบ้านดังตัวอย่างด้านล่าง (หมายเหตุ:กว่าจะทำรูปดังกล่าวเป็นตัวอย่างได้ ผู้ทำต้องลบไปหลา่ยรอบเหมือนกัน แต่อย่าลืม! จะมีเส้นเกินมาบ้างก็ไม่เป็นไร) | ||
=== มาวาดรูปกัน! === | === มาวาดรูปกัน! === |
รุ่นแก้ไขเมื่อ 07:17, 30 พฤษภาคม 2553
ปฏิบัติการแรกของวิชา 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 ทำให้เต่ายนต์ทำอะไร?
ทดลองสั่งให้เต่ายนต์เคลื่อนที่จนกระทั่งได้รูปสี่เหลี่ยมผืนผ้าขนาด 100 x 200 ดังตัวอย่างด้านล่าง
ถ้าสั่งผิดพลาด: อย่าเพิ่งกลัวว่าเต่ายนต์จะวาดผิด ทำให้ได้เส้นเกินมา สำหรับแบบฝึกหัดนี้ให้ถือว่า เส้นเกินดีกว่าเส้นขาด
ถ้าเราสั่ง forward ไกลไป สามารถสั่ง t.backward(ระยะทาง) ให้เต่ายนต์เดินถอยหลังย้อนกลับได้ ในทำนองเดียวกัน เราสามารถสั่ง t.left(มุม) เพื่อให้เต่าหันซ้ายได้
หรือถ้่าต้องการยกเลิกทุกอย่าง สามารถสั่ง t.clear() ให้ลบทุกอย่างทิ้งได้ (แต่เต่ายนต์ยังอยู่ที่เดิม) ถ้าต้องการให้เต่ายนต์กลับมาที่จุดเริ่มต้นสั่ง t.home()
ทดลองสั่งให้เต่ายนต์เคลื่อนที่ต่อจนกระทั่งได้รูปบ้านดังตัวอย่างด้านล่าง (หมายเหตุ:กว่าจะทำรูปดังกล่าวเป็นตัวอย่างได้ ผู้ทำต้องลบไปหลา่ยรอบเหมือนกัน แต่อย่าลืม! จะมีเส้นเกินมาบ้างก็ไม่เป็นไร)