Lesson3: Hello World 2

      จากความเดิมตอนที่แล้ว เราว่าด้วยเรื่องของNamespace ตอนนี้ให้เปิดโค๊ดของคราวที่แล้ว ใครที่ใช้VB จะพบว่า ตัวโปรแกรมนั้นไม่ได้ทำการสร้างNamespace ขึ้นมาให้เหมือนกับของVc# Vc++

สำหรับ 2อันหลังนั้น โปรแกรมจะทำการสร้างNamespace ขึ้นมาตามชื่อของโปรเจคที่เราสร้างขึ้นมาตอนแรก

การสร้างNamespace ของVb นั้นทำได้ดังนี้

Namespace MyNamespace

        Class X

        End Class

End Namespace

 

หลักภาษาของVb นั้น จะต่างกับC มากพอสมควร กล่าวคือ ภาษาตระกูลC ทั้งหลายจะไม่สนใจบรรทัด การจะจบคำสั่งใดๆนั้น จะต้องลงท้ายด้วยเครื่องหมาย ";" เสมอ เช่น

Test(Input1

     ,Input2

      ,Input3);

จะมีค่าเหมือนกับ Test(Input1,Input2,Input3);

ในขณะที่ VB นั้นจะ นับการเว้นบรรทัด เป็นการจบคำสั่ง  เช่น

DIM Test as Integer =5            ประการศัวแปรชื่อTest เป็นInteger มีค่าเท่ากับ5

DIM TestB as String ="Test"       ประกาศตัวแปรชื่อTestB เป็น String มีค่าเท่ากับ"Test"

หรืออย่างการประกาศฟังชั่นต่างๆ เงื่อนไข นั้น ถ้าเป้นภาษา C จะใช้เครื่อหมาย {......} เพื่อครอบคลุมและระบุว่า คำสั่งหรือตัวแปรใดๆที่อยู่ระหว่างเครื่องหมาย { }นี้ จะเป็นของฟังชั่น หรือ เงื่อนไขด้านบน ยกตัวอย่างเช่น

int TestFunction()

{

int a=5;

}

จากตัวอย่างนี้ a จะเป็นตัวแปรที่อยู่ภายในฟังชั่นที่ชื่อTestFunction จะเห็นว่าภาษาตระกูลC จะใช้{ } เพื่อบอกจุดเริ่มต้น และจุดจบของฟังชั่น

ในขณะที่Vb จะใช้คำว่าEND แทน เช่น

Function TestFunction() as integer

      Dim a as integer =5

End function

ฟังชั่นนี้จะเหมือนกับตัวอย่างด้านบนทุกประการ แต่จะเห็นว่า ในVb จะไม่มีการใช้เครื่องหมาย{ }อีกต่อไปแล้ว

 ข้อควรระวังที่สำคัญอีกอย่างก็คือ ในภาษาC นั้น จะเป้นCase Sensitive หมายความว่าตัวหนังสือตัวใหญ่และตัวเล็กถือว่าเป็นคนละตัวกัน เช่น

int Test=1;

int test =2;

ตัวแปรTest และ test นั้นจะถือว่าเป็นตัวแปรคนละตัวกัน แต่ในภาษาVb นั้น ตัวใหญ่และตัวเล็กไม่มีผล ถือว่าเป็นตัวเดียวกัน

 

ให้กลับมาที่หน้าDesign โดยการคลิ๊กขวาที่Form1 ในหน้าต่างSolution เลือกView Designer

      ไปที่ToolBoxด้านซ้ายมือ เปิดTabที่ชื่อ "All Windos Forms" เลื่อนมาข้างล่างเลือกTextBox

 

         จากนั้น วาดมันลงไปบนฟอร์มเลยครับ จะตรงไหนก็ได้ เสร็จแล้วจะได้ตามรูปนี้

 

          จากนั้นให้ดูหน้าต่างProperty ด้านขวาล่าง หรือถ้าไม่มี ให้เลือกTextboxที่เราวาดไว้คลิ๊กขวาเลือก Property ช่องProperty จะหน้าตาประมาณนี้

         ลองดูสัญลักษณ์ด้านบนกันก่อนว่ามันหมายถึงอะไรกันบ้าง

 

                          1    2     3     4

 

          รูปที่ 1. เป็นการสั่งให้Property Window นี้แสดงผลPropertyของ Object ที่เราเลือกอยู่ โดยแยกออกตามหมวดหมู่

             2. เป็นการสั่งให้Property Window แสดงผลProperty Propertyของ Object ที่เราเลือกอยู่ โดยให้เรียงกันตามตัวอักษร

             3. สั่งให้Property Windowนี้ แสดงผลของProperty

             4. สั่งให้Property Window นี้แสดงEvent ทั้งหมดที่มีอยู่ของObjectที่เราเลือก

 

 

     ในตอนนี้นั้นให้เราเลือกหมายเลข2 กับ3 ก่อน(คือให้แสดงค่าProperty ของObject โดยเรียงตามตัวอักษร) ดูที่ช่องที่เขียนว่า Name (อันที่3จากอันบนสุด) จะเห็นว่า Object ที่เราเลือกนี้ ใช้ชื่อว่า

TextBox1 ชื่อนี้นั้นจะเป็นชื่อที่เราใช้อ้างอิงถึงTextBoxตัวนี้สำหรับการตั้งชื่อนั้น ผมแนะนำให้ตั้งชื่อตามลักษณะของObjectที่เราสร้างขึ้นมาครับ อย่างเช่นTextBoxตัวนี้ ให้ตั้งชื่อไปก่อนว่า

tx_Show

  tx ย่อมาจากTextBox, ทำไมต้องตั้งแบบนี้ คำตอบก็คือ เพื่อให้ง่ายต่อการเขียนโปรแกรมต่อๆไปครับ

จริงๆจะตั้งแบบไหนก็ได้แล้วแต่เราอยาก แต่ควรจะแบ่งหมวดหมู่หรือใช้ชื่อที่สื่อถึงนิดนึง อีกอย่าง ในVisual Studio นั้น มีระบบที่เรียกว่าInteligent ก็คือระบบที่จะตรวจว่าตัวแปรหรือสิ่งที่เรากำลังพิมไปเนี่ย มันคืออะไร แล้วมันจะแสดงค่าต่างๆที่น่าจะเป็ฯไปได้ว่าเราจะมาออกมา เช่นรูปนี้ครับ

   หรือบางที เราลืมชื่อตัวแปร แต่พอจำได้ว่ามันขึ้นต้นด้วยคำว่าTmp เราก็แค่พิมคำว่าTmp ลงไปและกดCtrl+Spacebar เพื่อเรียกหน้าจอนี้ มันก็จะขึ้นรายชื่อตัวแปร หรือฟังช่นทั้งหมดที่ขึ้นต้นด้วยTmp มาให้เราดู ซึ่งด้วยวิธีนี้ มันทำให้ง่ายเวลาเราจะเรียกใช้ตัวแปรหรือฟังช่นต่างๆ เพราะถ้าเราตั้งชื่อเป็นหมวดหมู่ที่ชัดเจน เวลาเราเรียกintel ขึ้นมา มันก็จะแสดงเฉพาะในส่วนที่เราต้องการจะใช้ และอีกอย่าง มันช่วยเวลาเราdebugโปรแกรมด้วย เพราะเวลาจะเห็ฯจะรู้ทันทีว่า มันมาจากส่วนไหน หรือเป็นตัวแปรประเภทอะไร เป็นต้น

 

เอาละ เมื่อเราเปลี่ยนชื่อ เป็น tx_Showเรียบร้อยแล้ว คราวนี้ ให้เราวาด ปุ่มลงไปในFormของเราบ้าง

ไปที่Toolbarเหมือนเดิมครับ เลือกที่Button จากนั้นวาดมันลงไปในForm เมื่อวาดเสร็จแล้ว ให้เราDouble click ที่ปุ่มที่เราวาดครับ มันจะเข้าหน้าจอแสดง Code โดยมีCodeใหม่เพิ่มมาดังนี้

Vc#

private void button1_Click(object sender, EventArgs e)

{

}

 

Vc++

private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e)

{

}

 

VB

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

End Sub

 

ฟังชั่นพวกนี้นั้น เป็นฟังชั่นที่ถูกสร้างขึ้นมาอัตโนมัติโดยโปรแกรม ซึ่งฟังชั่นเหล่านี้ถูกเรียกขึ้นมาอัตโนมัติเมื่อเกิดเหตุการณ์ต่างๆ หรือที่เรียกันว่าเกิดEvent นั่นแหละครับ เมื่อดูจากชื่อฟังชั่นแล้ว จะเห็นว่า มีคำว่า

"Click" ปนอยู่ด้วย นั่นหมายความว่า นี่เป็นฟังชั่นที่จะถูกเรียกเมื่อเกิดEvent Click พูดง่ายๆ เราคลิ๊กมันเมื่อไร ฟังชั่นนี้จะทำงานทันที

ใหเราเพิ่มCode ต่อไปนี้ไว้ในFunction พวกนี้นะครับ

VB

tx_Show.Text = "Hello World"

 

VC# &Vc++

tx_Show.Text = "Hello World";

 

จากนั้นให้เราลองrunดูครับ (ปุ่มPlay ด้านบน หรือไม่ก็ไปที่ Debug->StartDebuging)

เมื่อโปรแกรมมันรันขึ้นมาแล้ว ให้เราลองกดปุ่มดูครับ มันจะได้หน้าจอแบบนี้

 

 

 

 

edit @ 19 Oct 2007 22:43:20 by GusZ

โปรแกรมอมตะนิรันกาลของผู้เริ่มต้นเขียนโปรแกรม และคงเป็นโปรแกรมเดียวในโลกที่ไม่มีBUG คราวนี้เรามาลองเขียนโปรแกรมHello World ด้วย.NETกันบ้าง ใครที่ใช้ภาษาไหน ก็เปิดกันขึ้นมาเลย ใช้ตัวอย่างจากบทที่แล้วนะแหละ

เมื่อเปิดมาแล้ว ดูที่หน้าต่างSolutionกันก่อนเลยดีกว่า ตามรูปนี้เลยครับ

 

 

 

จากคราวที่แล้ว โปรเจคที่เราได้สร้างไว้นั้น โปรแกรมจะทำการสร้างFormขึ้นมา1ตัว ชื่อว่าForm1 ตอนนี้ ให้เราคลิ๊กขวาที่ Form1 แล้วเลือก "View Code" ขึ้นมา

 

Update ต่อ

ถ้าไม่มีอะไรผิดพลาด เราจะได้โค๊ดมาราวๆนี้

 

VB

Public Class Form1

End Class

 

Vc#

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace TestWinApp
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
}
}

 

สำหรับVc++ ให้คลิ๊กชวาที่Form1.h เลือกViewCode

จะได้ราวๆนี้

#pragma once

 

namespace TestWinApp {

using namespace System;

using namespace System::ComponentModel;

using namespace System::Collections;

using namespace System::Windows::Forms;

using namespace System::Data;

using namespace System::Drawing;

/// <summary>

/// Summary for Form1

///

/// WARNING: If you change the name of this class, you will need to change the

/// 'Resource File Name' property for the managed resource compiler tool

/// associated with all .resx files this class depends on. Otherwise,

/// the designers will not be able to interact properly with localized

/// resources associated with this form.

/// </summary>

public ref class Form1 : public System::Windows::Forms::Form

{

public:Form1(void)

{

InitializeComponent();

//

//TODO: Add the constructor code here

//

}

protected:

/// <summary>

/// Clean up any resources being used.

/// </summary>

~Form1()

{

if (components)

{

delete components;

}

}

private:

/// <summary>

/// Required designer variable.

/// </summary>

System::ComponentModel::Container ^components;

#pragma region Windows Form Designer generated code

/// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

void InitializeComponent(void)

{

this->components = gcnew System::ComponentModel::Container();

this->Size = System::Drawing::Size(300,300);

this->Text = L"Form1";

this->Padding = System::Windows::Forms::Padding(0);

this->AutoScaleMode = System::Windows::Forms::AutoScaleMode::Font;

}

#pragma endregion

};

}

จะเห็นได้ว่า ความยาวของCode ในVc++จะยาวกว่าชาวบ้านมากมายรวมถึงยังมีสัญลักษณ์แปลกๆมาให้งงเล่นๆด้วย ที่เห็นชัดก็คือ

#pragma once 

คำสั่งพวกนี้ เป็นคำสั่งที่เรียกว่า PreProcessor Pre=ก่อน Processor=โปรเซส แปลรวมกันความหมายตรงตัวเด๊ะๆ คือ เป็นคำสั่งที่จะทำก่อนเริ่มกระบวนการProcess ในส่วนรายละเอียดของตรงนี้ ผมจะขอยกยอดไปพูดในหมวดของ Vc++ เพราะคำสั่งพวกนี้โดยมากแล้วถ้าเขียน.NET มันไม่ค่อยได้ใช่หรอก อย่างที่ผมเคยบอกไว้ว่าVc++ สามารถเขียนโปรแกรมที่เป็นManaged Code(พวกที่เขียนด้วย.NET) และUnmanageCode(C++ดั้งเดิม พวกที่เขียนด้วยWin32API และMFC ต่างๆ) เราก็ต้องใช้คำสั่งพวกนี้แหละมากำหนดค่าให้Compiler

 

กลับมาที่เองของ.NET ต่อจากตัวอย่างCodeที่เห็นนั้น เราจะเห็นว่า VB นั้นมีข้อแตกต่างกับVc# Vc++ ในเรื่องของโครงสร้างมากพอสมควร เมื่อดูจากตัวอย่างแล้วจะเห็นว่า โปรแกรมนั้นจะทำการสร้างClass ขึ้นมาตามชื่อของForm นั้นๆเช่น ถ้าFormนี้มีเชื่อว่าHello สร้างที่ถูกสร้างขึ้นมาก็จะชื่อว่า Hello ด้วยเช่นกัน

เมื่อเปรียบเทียบตัวอย่างด้านบนแล้ว จะเห็นว่าสิ่งที่Vb ต่างกับ ภาษาVc#และVc++ ก็คือสิ่งที่เรียกกันว่าNameSpace

 

NameSpace คืออะไร

    NameSpaceนั้น ถ้าจะเปรียบเทียบให้ง่ายก็เหมือนเป็นFolder ที่ทำหน้าที่จัดเก็บClassต่างๆไว้ให้เป็นหมวดหมู่ ยกตัวอย่างเช่น เรมีClass อยู๋10Class  ในนี้มีClassที่เกี่ยวข้องกับการแสดงผลอยู่5 มีClass จัดการด้านเสียงอีก3Class และจัดการด้านการรับInput อีก2 Class ถ้าไม่มีNameSpace เราก็จะเอาClassเหล่านี้ มากองๆรวมกันไว้ที่เดียวกัน ราวๆนี้

Class 1

Class 2

Class 3

Class 4

Class5

... Class10

 

หรือ ถ้าเรานำNameSpace มาช่วยก็ได้ เช่น

NameSpace Me

{

   NameSpace Display

   {

   Class1

   Class2....class5

   }

   Namespace Sound

   {

Class6 .... Class8

   }

 

   NameSpace Input

   {

       Class9

       Class10

   }

}

 เวลาเราจะใช้งาน เราก็จัดการเลือกมันมาแค่ส่วนที่เราจะใช้

เช่น ถ้าเราจะใช้Class ที่อยู่ในNameSpace ที่ชื่อ Display  เราทำได้ดังนี้

VB

Import Me.Display

 

VC# และVc++

 Using Me.Display;

 

เดี๋ยวมาต่อกันบทหน้า กับHello World2 เพราะว่าอันนี้มันยาวมากแล้ว เดี๋ยวจะงง ขึ้นบทใหม่เลยดีกว่า ที่ยาวไม่ใช่เพราะอะไร เรานอกเรื่องกันซะเยอะ เยอะถึงขนาดว่าHello World ยังไม่ได้เริ่มเป็นรูปเป็นร่างเลย

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

edit @ 12 Oct 2007 01:04:54 by GusZ

สำหรับในตัวอย่างนี้ ผมจะขอให้Vs2005 Professional เป็นตัวอย่างนะครับ(ในเครื่องไม่มีExpress)

อย่างแรกเลย เมื่อเราได้ทำการติดตั้งVs และ MSDNเสร็จเรียบร้อยแล้วนั้น ให้ผู้ใช้เปิดโปรแกรมVs ขึ้นมา ก็จะได้หน้าจอดังต่อไปนี้

ไปที่File->New->Project จะได้หน้าต่างดังรูป

ให้เลือกตามความถนัดของตนเองเลยครับว่าจะใช้ภาษาไหนในการเขียน เมื่อเลือกภาษาที่จะใช้ได้แล้วมองด้านขวามือ เลือกWindows Application
ตรงช่องLocationด้านล่าง ให้เลือกว่าเราจะเก็บProjectนี้ไว้ที่Folderไหน
Name: ใส่ชื่อโปรเจคที่ต้องการ
ในที่นี้ ให้ลองเลือกLocationไปที่c:\ และใช้ชื่อโปรเจคว่า TestWinApp


เมื่อกำหนดค่าเสร็จแล้ว กดOK จะได้หน้าจอดังนี้ (หน้าจอนี้เป็นของVc# นะครับ)

มาดูกันตามหมายเลขนะครับ 3 อันนี้จะเป็นหน้าต่างที่สำคัญและใช้บ่อยๆของเรา

1. Solution Explorer เป็นหน้าจอที่จะแสดงผลของโปรเจคเราว่า มีไฟล์อะไรบ้างที่อยู่ในโปรเจคนี้
2. Property Window จะแสดงผลค่าต่างๆของวัตถุที่เราได้ทำการเลือกไว้เพื่อให้เราสามารถปรับเปลี่ยนค่าคุณสมบัติของวัตถุนั้นๆได้
3. Toolbox เก็บรวบรวมเครื่องมือและอุปกรณ์ต่างๆที่เราจะใช้ในการเขียนโปรแกรมของเรา

เอาละ เราลองมาดูหน้าต่างSolution ของทั้ง3 อันกันดีกว่าครับ

อันแรกนั้น เป็นของVB.NET