Noob Game Gang: พฤษภาคม 2017

การเขียน Interface HTML สำหรับทดสอบการเขียนโปรแกรม

บางทีการจะเขียนโปรแกรมมันก็จำเป็นจะต้องมีการแสดงผล เพื่อให้เราสามารถเห็นผลลัพธ์ของโปรแกรม

จากที่ใช้ nodejs มันก็ค่อนข้างจะยุ่งยาก ทำไงดีฟระ จะอธิบายให้มันง่ายๆ

สรุปว่า HTML นี่ละกันเบเบสุด แล้วก็ยังใช้ javascript เหมือนเดิม อีกทั้งจะแปลงไปใช้กับ nodejs ก้ทำได้เลย

มาจากตอนที่แล้วที่เราจะหัดเขียนโปรแกรม บวกลบคูณหาร แล้วมันจะมี Input , output

<script language="javascript">
var num1=0, num2=0, operador=0;
function resultado() {
if(document.form1.operation.value == "+")
{ operador =1; }
else {}
switch(operador)
{
case 1:
num1 = parseInt(document.form1.screenA.value);
num2 = parseInt(document.form1.screenB.value);
document.form1.screen.value=num1+num2;
break;
}
}
</script>
<html>
<head><meta charset="utf-8"><title></title></head>
<style>
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
border-radius:7px;
font-weight:bold;
color: #333;
padding: 4px 7px;
border: 1px solid #D6D6D6;
background: url(fb.png) top repeat-x;
min-height:20px;
cursor:pointer;
width:100%;
}
input:hover {
font-weight:bold;
color: #000;
border: 1px solid #000000;
background: url(fbx.png) bottom repeat-x;
min-height:20px
}
</style>
<body>
<form name="form1" action="" method="">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td><input type="text" name="screenA" id="screenA" style="width:100%"></td>
<td align=center ><input type="text" name="operation" id="operation" style="width:50%"></td>
<td><input type="text" name="screenB" id="screenB" style="width:100%"></td>
<td><input type="button" name="igual" id="igual" value="=" onclick="resultado()"></td>
<td><input type="text" name="screen" id="screen" style="width:100%"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>

ทีนี้วิธีการรัน ใช้ web นี้ช่วยในการรัน script และสามารถ input output ได้ด้วย
https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

โดยให้ copy code ด้านไปไปใส่ใน link ง่ายๆ เลยดังรูป

การเขียนโปรแกรม เบื้องต้น ฉบับรวบรัด จะสอนยังไงดีฟระ

เอาเป็นว่าหลักๆ แล้วการเขียนโปรแกรมจะแบ่งโครงสร้าง (Structure) ออกเป็น 3 แบบ

1. การทำงานตามลำดับ (Sequence)
2. การทำตามเงี่ยนไข (Decision)
3. การทำซ้ำ (Loop)

ตัวอย่างการเขียนโปรแกรม มักมีส่วนประกอบ ดังนี้

1. การกำหนดค่าเริ่มต้น
2. การเรียกใช้ Function

Function มักใช้เมื่อเราต้องเขียนอะไรซ้ำๆ หากเราเขียนเป็น Function อาจทำให้เราสามารถเขียนแค่ครั้งเดียวได้
Function จะสามารถ ส่งค่าออกมาจาก function ได้ (output) โดยใช้คำสั่ง return
Function จะสามารถ รับ input กี่ตัวก็ได้
เช่น
var c = 0;
Function AplusB(a , b)
{
c = a+b;

return c;
}

การเรียกใช้เช่น

var a = 10;
var b = 20;
var c = 30;
var d = 40;

console.log(AplusB(a,b));
console.log(AplusB(b,c)); console.log(AplusB(c,d));

//จะเห็นว่าเราสามารถ เรียกใช้ฟังก์ชั่น ได้โดยไม่ต้องเขียนโปรแกรมซ้ำๆเดิม

// การกำหนดค่าเริ่มต้น ภาษา nodejs ละกัน (javascript)

var x = 0; // หมายความว่า เราจะยัดค่า(0) หลังเครื่องหมาย = ไปใส่ไว้ตัวหน้า(x) คือยัด0ใส่x
var y = 1; // ยัด 1 ใส่ y
x = y; // ยัด y ใส่ x (ตอนนี้ x ค่าคือ 1) (y ค่าคือ 1)

//การใช้ Loop ยกตัวอย่าง for รูปแบบคือ
// for(i=1; i<10; i++) ความหมาย กำหนดค่า i ใช้วนลูป , i<10 คือ ถ้าจริงจะวนลูป และจะวนจนกว่าจะเป็นเท็จ i++ คือเมื่อวน 1 รอบลูป เราจะกำหนดค่าให้ i เพิ่มค่า 1 แล้วจึงวนรอบใหม่

// i++; เป็นรูปแบบย่อ จะเหมือนกับ i = i+1; คือ i = i+1 จะกลายเป็น i = 1+1; i จะถูกยัดด้วย 2
// รอบถัดไป i = 2+1; i จะถูกยัดด้วย 3 และเมื่อครบ 10 รอบ i จะ เท่ากับ 10 ซึ่ง i < 10 จะกลายเป็นเท็จ
// จึงเป็นอันจบ for ลูป for(i=1; i<10; i++) นี้

ตัวอย่าง

for(var i=0;i<4;i++)
{
console.log(i); //ผลลัพคือ 012
}
--------
ตัวอย่าง ใช้กับ array // ถ้าสงสัย array ถาม อากู๋เอานะ
var arrayTest = [5,6,7,8];
for(var i=0;i<4;i++)
{
console.log(arrayTest[i]); //ผลลัพคือ 567
}

--------------------------

ต่อมา การเรียกใช้ฟังก์ชัน

เช่น

var a=1;

var b=2;

var c=0;

function AplusB(x,y)

{

return x+y;

}

c = AplusB(a,b);

console.log(c); // ผลลัพธ์ c จะเท่ากับ 3

--------------------------------

2. การทำตามเงี่ยนไข (Decision)

การเขียนโปรแกรมตาม if else เป็นต้น

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

function CheckTypeOfNumber(input)
{
var result = "";
if(input >= 0)
{
result = "ค่าบวก";
}
else if(input < 0)
{
result = "ค่าลบ";
}
else
{
result = "error";
}

return result;
}

--------------------------------

การบ้าน ข้อ 1

จงเขียน ฟังก์ชัน สลับค่า

เช่น ถ้าส่งค่า a, b เข้าฟังก์ชั่น SwapAB() ค่า a จะต้องกลายเป็น b และ b ต้องเป็น a

var a=1;

var b=2;

var c=0;

function SwapAB()

{

//จงเขียนการสลับค่าภายในฟังก์ชั่นนี้

}

console.log("value a = "+ a );

console.log(", value b = "+b);

----------------------------

การบ้าน ข้อ 2

จงเขียนฟังก์ชันคำนวณ คะแนน โดยให้ผลลัพธ์เป็นเกรด
โดยมีเงี่ยนไข ดังนี้

ถ้าคะแนนตั้งแต่ 80 ขึ้นไปได้เกรด A
ถ้าคะแนนตั้งแต่ 70 - 79 ได้เกรด B
ถ้าคะแนนตั้งแต่ 60 - 69 ได้เกรด C
ถ้าคะแนนตั้งแต่ 50 - 59 ได้เกรด D
ถ้าคะแนนตั้งแต่ 0 - 49 ได้เกรด F

การแสดงผลลัพธ์ ให้ใช้ console.log( GradeCal(point) ); // โดย point จะเป็นการป้อนตัวเลขเข้าไป

---------------------------------

Noob Game Gang

วันพุธที่ 3 พฤษภาคม พ.ศ. 2560

การเขียน Interface HTML สำหรับทดสอบการเขียนโปรแกรม

วันอังคารที่ 2 พฤษภาคม พ.ศ. 2560

การเขียนโปรแกรม เบื้องต้น ฉบับรวบรัด จะสอนยังไงดีฟระ