ดูต้นฉบับสำหรับ 204111:lab1

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

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

== รู้จักกับ WingIDE ==

เมื่อเราเข้าสู้โปรแกรม [http://www.wingware.com/wingide-101 Wing IDE 101] เราจะพบหน้าจอดังรูปด้านล่าง

[[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

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

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

 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>