ภาษา Script ที่นิยมใช้กันอย่างแพร่หลาย
วัตถุประสงค์ก็คือ ต้องการให้เป็นภาษาที่ใช้สำหรับพัฒนาโปรแกรมหรือแอปพลิเคชั่นที่ทำงานภายใต้ระบบปฏิบัติการ Windows และ Windows NTการใช้งาน Visual Basic นั้นค่อนข้างง่าย โปรแกรมเมอร์สามารถวาดและวางองค์ประกอบต่างๆ บนหน้าจอเพื่อติดต่อกับผู้ใช้
(User Interface ได้ตามต้องการ เมื่อวาดหน้าจอได้เสร็จก็เขียนโปรแกรมซึ่งเป็นลักษณะแบบมีโครงสร้างทางภาษาคล้ายคลึงกับภาษาอังกฤษ
เพื่อเป็นการเชื่อมโยงความสัมพันธ์ขององค์ประกอบ แต่ละตัวบนหน้าจอเข้าด้วยกัน
ให้ทำงานอย่างสัมพันธ์กัน ตามที่โปรแกรมเมอร์ต้องการ ตามหลักการของ Object-Oriented นั่นเองMicrosoft
Visual Studio ได้พัฒนามาถึง Visual Studio98 แล้ว และ VB ที่บรรจุอยู่จะเป็น Version
6.0 ซึ่งไมโครซอฟท์พูดได้เต็มปากว่า VB6.0 นี้เป็น Object-Oriented ขนานแท้ (เพราะ VB5.0 ยังจัดเป็นกึ่ง Object-Oriented อยู่) แม้ว่าปัจจุบันจะมีข่าวคราวของ VB7.0 แพลมออกมาบ้างก็ตามเว็บไซต์ต่างๆ
แต่ไมโครซอฟท์ก็ยังไม่เปิดตัวอย่างเป็นทางการ
อาจเป็นเหตุผลทางการค้าและการตลาดก็เป็นได้
ถ้าเป็นส่วนของโค้ด
หรือตัวอย่าง source code ของโปรแกรม ผู้เขียนจะใช้ฟอนต์ที่มีลักษณะแตกต่างจากฟอนต์ปกติ
และใช้การเว้นวรรค ตัดคำ ให้ตรงกับไวยากรณ์ที่ VB ยอมรับ
Private
Sub Command1_Click ( )
Text1.Text = "hello world"
End Sub
-โปรแกรมแสดงตัวอย่างการรับข้อมูลเพื่อนํามาแสดงผลออกทางหน้าจอ
Text1.Text = "hello world"
End Sub
*************************************************************
****************************************************************************************************
****************************************************************************************************
- Visual C
****************************************************************************************************
ภาษาซี(C Programming Language)
เป็นภาษาเชิงโครงสร้างที่มีการออกแบบโปรแกรมในลักษณะโมดูลที่มีจุดเด่นในเรื่องของประสิทธิภาพการทํางานที่เร็ว
มีความยืดหยุ่นในการเขียนโปรแกรมสูงภาษาซีได้รับการพัฒนาขึ้นโดยเดนนิส ริทชี (Dennis Ritchie) ขณะที่ทํางานอยู่ที่เบลแล็บบอราทอรี(Bell
Laboratories) โดยพัฒนาขึ้นจากหลักการพื้นฐานของภาษาบี (B) และบีซีพีแอล (BCPL) ในช่วงปีค.ศ.1971ถึง1973
แต่ได้เพิ่มชนิดข้อมูลและความสามารถอื่น ๆให้มากขึ้น
และนําภาษาซีไปใช้พัฒนาระบบปฏิบัติการยูนิกซ์ (UNIX) บนเครื่องคอมพิวเตอร์DEC
PDP-11 ภาษาซีเป็นที่นิยมใช้อย่างแพร่หลายในช่วงต้นทศวรรษที่1980
จนกระทั่งมีความพยายามกําหนดมาตรฐานของภาษาเพื่อให้สามารถใช้ภาษาซีได้บนเครื่องคอมพิวเตอร์ใด
ๆในปีค.ศ. 1983 โดย ANSI (The American National Standards
Institute) ได้ตั้งคณะกรรมการ X3J11เพื่อร่างมาตรฐานดังกล่าว และได้รับการตรวจสอบและยอมรับโดย ANSI และ ISO (The InternationalStandards Organization) โดยมีการตีพิมพ์มาตรฐานของภาษาซีในปีค.ศ. 1990
จากความมีประสิทธิภาพและสามารถทํางานบนเครื่องคอมพิวเตอร์ใด
ๆของภาษาซีจึงได้มีการนําภาษาซีไปใช้ในการพัฒนาระบบปฏิบัติการต่างๆและใช้เป็นต้นแบบของภาษาอื่น
ๆ ที่สําคัญในปัจจุบัน เช่น ซีพลัสพลัส (C++) จาวา (Java) เป็นต้น
ตัวอย่าง
#include <stdio.h>
void main( ) {
char name[100];
printf("What is your name ?\n");
scanf("%s", name);
printf("Very glad to know you, ");
printf("%s.",name);}
*************************************************************
****************************************************************************************************
****************************************************************************************************
- Visual C#
****************************************************************************************************
ภาษา C# เป็นภาษาโครงสร้างแบบเดียวกับภาษา C ที่ทำความเข้าใจได้ง่ายบิดาของภาษา C#
(C# เวอร์ชั่นต่างๆทั้งหลายที่ Microsoft พัฒนา
ก็มีท่านคนนี้แหละครับเป็นต้นแบบที่มั่นคงของภาษาที่ได้รับความนิยมนี้) คือ Anders
Hejlsberg (แอนเดรส ฮาเยสเบิร์ก) มีกฏระเบียบข้อบังคับที่รัดกุม
อีกทั้งคำสั่งส่วนใหญ่เป็นภาษาอังกฤษจึงมีความหมายตรงตัวในบางคำสั่ง
(บางครั้งปัญหาเรื่องภาษาอังกฤษก็ทำให้เกิดปัญหาในการเขียนโปรแกรมได้ครับ
ดังนั้นจึงควรเรียนรู้ควบคู่กันไป)
ดังนั้นจึงไม่ผิดที่จะเริ่มฝึกเขียนโปรแกรมจากภาษา C#
****************************************************************************************************
****************************************************************************************************
- Visual C++
ภาษา C++ เป็นลูกผสมระหว่างภาษา Simula และภาษา C โดยรับเอาแนวคิดของภาษา C มากกว่า95% ประยุกต์เข้ากับแนวคิดเชิงวัตถุของ Simula ทำให้ภาษา C++
เป็นลูกผสมระหว่าง ProceduralLanguage และ Object Oriented Language เราไม่สามารถบอกได้ว่า C++ เป็น OOP100% โดยเราอาจเลือกเขียนแบบภาษา C ได้อีกแบบหนึ่งภาษา C++ เป็นภาษาโปรแกรมภาษาหนึ่งที่ได้รับการพัฒนาขึ้นมาไม่นานนักและเป็นภาษาที่มีความสามารถสูง
ดังนั้น ในบทนี้จะเสนอความเป็นมาของภาษา C++ รูปแบบการเขียโปรแกรมขั้นต้น
เพื่อเรียนรู้ถึงองค์ประกอบต่างๆ ที่จำเป็นในการเขียนโปรแกรมด้วยภาษา C++ เช่น การเขียนคอมเมนต์ การประกาศตัวแปร ชนิดข้อมูลที่ควรรู้
รวมทั้งข้อสังเกตที่น่าสนใจในภาษา C++
เช่น ตัวดำเนินการต่างๆ การจัดการกับการเกิดส่วนล้น (Overflow)C++
มีรากฐานมาจากภาษา C และเป็นภาษาที่คลุมภาษา C
ไว้ C++ ยังคงรักษาความสามารถและความยืดหยุ่นของ
C ในการเขียนโปรแกรมระบบต่ำ รวมทั้งโปรแกรมควบคุมฮาร์ดแวร์ ที่สำคัญกว่านั้นคือ
C++ ให้การสนับสนุนการเขียนโปรแกรมแบบ Object-Oriented
C++จัดเป็นภาษาที่มีความสามารถมากกว่า ADA และ
Modula-2
ขณะที่ยังคงความมีประสิทธิภาพและความกะทัดรัดของภาษา C ไว้
ดังนั้น จึงเป็นภาษาโปรแกรมภาษาหนึ่งที่ยอมให้โปรแกรมเมอร์เขียนโปรแกรมแบบมีโครงสร้าง
และเขียนโปรแกรมเชิงวัตถุได้อย่างมีประสิทธิภาพC++ เป็นภาษาผสม
(Hybrid Language) โดยอาจแก้ปัญหาหนึ่งด้วยวิธี Object-Oriented
ล้วนๆ หรืออาจแก้ปัญหาด้วยการใช้ภาษาแบบเก่า
ซึ่งมีโครงสร้างบางอย่างเพิ่มขึ้นจากภาษา Cในทางปฏิบัติในการแก้ปัญหามักจะสะท้อนให้เห็นวิธีการทั้ง
2 แบบC++ ถูกพัฒนาโดย BjaneStroustrup ที่
Bell Labs ในช่วงทศวรรษ 1980 Dr.Stroustrup พัฒนาภาษานี้ขึ้นเพื่อเขียนซอฟต์แวร์จำลองเหตุการณ์ (Event-Driven
Simulation) ที่มีความซับซ้อน ซึ่งมี Rick Mascitti เป็นผู้ตั้งชื่อของภาษานี้ให้กับเขาC++ ถูกออกแบบให้ส่งเสริมการพัฒนาซอฟต์แวร์ขนาดใหญ่
โดยเพิ่มการตรวจสอบ Type เข้าไป เมื่อเปรียบเทียบกับ C
แล้วจะลดข้อผิดพลาดลงได้มาก เพราะว่าภาษา C ยอมให้โปรแกรมเมอร์ควบคุมระบบในระดับต่ำได้โดยตรง
โปรแกรมเมอร์จำนวนมากจึงทำงานโดยเริ่มจากโครงสร้างระดับต่ำ แล้วนำส่วนต่างๆ
เหล่านี้มาประกอบกันเป็นโครงสร้างใหญ่ แต่ในภาษาC++ จะทำในทางตรงกันข้าม
คือ กำหนดโครงสร้างใหญ่ก่อนนำมาสัมพันธ์กัน แล้วจึงกำหนดโครงสร้างย่อยๆ ต่อไป
ภาษาโปรแกรม C++ เป็นภาษาโปรแกรมที่ไม่มีรูปการเขียนตายตัว กล่าวคือ
ไม่ต้องกำหนดว่าองค์ประกอบของโปรแกรมจะต้องเขียนอยู่ในบรรทัดหรือบนหน้ากระดาษส่วนไหน
ดังนั้น โปรแกรมเมอร์จึงมีอิสระที่จะวางรูปแบบของโปรแกรม
แต่โปรแกรมเมอร์ที่มีประสบการณ์ย่อมทราบดีว่าการเขียนโปรแกรมรูปแบบที่ดีนั้นจะต้องอ่านง่ายสะดวกต่อการแก้ไขข้อผิดพลาดของโปรแกรม
และง่ายต่อการดูแลรักษาโปรแกรม แต่อย่างไรก็ตาม
เราสามารถเขียนตามระเบียบแบบแผนมาตรฐานของภาษา C++ ซึ่งมีข้อปฏิบัติง่ายๆ
ดังต่อไปนี้
1.การเขียนประโยคตัวเตรียมประมวลผล #include ไว้ที่ตำแหน่งเริ่มต้นของโปรแกรม
ในหัวข้อนี้ จะแสดงตัวอย่างโปรแกรมภาษา C++ อย่างง่าย เพื่อให้นักเรียนเห็นโครงร่างของโปรแกรมที่พัฒนาโดยใช้ภาษา C++
ตัวอย่าง โปรแกรมแสดงข้อความ “Hello, World!”
#include <iostream>
int main ( )
{ std :: cout << "Hello, World! \n";
}
ทดสอบโปรแกรม
Hello, World!
บรรทัดแรกในโปรแกรมตัวอย่างเป็นคำสั่งประกาศตัวประมวลผลก่อน (preprocessor directive)
เพื่อแจ้งแก่โปรแกรมแปลโปรแกรมภาษา C++ (C++ compiler) ให้รู้ว่า จะหานิยาม (definition) ของวัตถุ std :: cout
เพื่อนำมาใช้งานในคำสั่งบรรทัดที่ 3 ได้จากที่ใด โดยคำสั่งประกาศในโปรแกรมจะต้องระบุสัญลักษณ์ # ไว้ก่อนหน้า เช่น #include เป็นต้น
นิพจน์ <iostream> เป็นส่วนหัวมาตรฐาน (standard header)ของไฟล์ในคลังโปรแกรมภาษา C++ มาตรฐาน (standard C++ library)
โดย iostream มาจากคำว่า input / output stream หมายถึง สายข้อมูลนำเข้าและส่งออก
เป็นคลังโปรแกรมที่รวมนิยามของวัตถุที่เกี่ยวข้องกับการนำเข้าและส่งออกข้อมูล ไฟล์ส่วนหัวภาษา C++ ต้องเขียนอยู่ภายในเครื่องหมาย < > เสมอ
ในบรรทัดที่ 2 เป็นส่วนเริ่มต้นของโปรแกรม โดยทุกโปรแกรมในภาษา C++ ต้องประกอบด้วยฟังก์ชันอย่างน้อยหนึ่งฟังก์ชันที่ชื่อ main เสมอ
โดยฟังก์ชัน main ( ) จะเป็นฟังก์ชันแรกที่จะถูกนำไปประมวลผล สัญลักษณ์ ( ) เป็นสิ่งที่ระบุว่า main เป็นชื่อของฟังก์ชัน คำว่า int
เป็นคำสงวนมาจากคำว่า integer ซึ่งหมายถึง ข้อมูลชนิดจำนวนเต็มในภาษา C++
เป็นคำที่บ่งบอกว่าชนิดข้อมูลที่ฟังก์ชัน main จะส่งค่ากลับ คือ ข้อมูลชนิดจำนวนเต็ม ภาษา C++ เป็นภาษาที่อ่อนไหวต่อตัวพิมพ์ (case-sensitive)
ดังนั้น การตั้งชื่อในภาษา C++ ถ้าใช้ตัวพิมพ์ที่ต่างกัน จะถือว่าเป็นคนละชื่อ กล่าวคือ ชื่อ main( ) จะถือว่าเป็นคนละชื่อกับ Main( )
สองบรรทัดสุดท้ายเป็นส่วนโครงร่างของโปรแกรม (program body) ที่ประกอบด้วยชุดลำดับของคำสั่งเขียนอยู่ภายในเครื่องหมาย { }
โดยโปรแกรมตัวอย่างประกอบด้วยคำสั่งเพียง 1 คำสั่ง คือ
std :: cout << "Hello, World! \n";
ซึ่งเป็นคำสั่งที่มีผลการทำงานให้นำสายอักขระ (string) “Hello, World! \n” ไปใส่ในวัตถุ std :: cout
ผลที่เกิดขึ้น คือ ข้อความ Hello, World! จะถูกแสดงออกทางจอภาพ แล้วขึ้นบรรทัดใหม่ สายอักขระในภาษา C++
จะเขียนอยู่ภายในเครื่องหมาย “ ” สำหรับ \n จะแทนอักขระขึ้นบรรทัดใหม่ (newline character)
ซึ่งเป็นอักขระที่ไม่แสดงค่าสัญลักษณ์ตัวพิมพ์ แต่แสดงผลการเลื่อนตัวชี้ตำแหน่ง (cursor) ไปที่ตำแหน่งแรกของบรรทัดถัดไป
แล้วทำการล้างข้อมูลในบัฟเฟอร์ (buffer) ของวัตถุ iostream ด้วย สัญลักษณ์ << เป็นตัวดำเนินการส่งออกข้อมูล (output operator)
ที่กระทำกับวัตถุ std :: cout ในการส่งข้อมูลของนิพจน์ที่อยู่ทางขวาของตัวดำเนินการทีละตัวไปยังบัฟเฟอร์ของวัตถุ iostream
และเมื่อประมวลผล ข้อมูลในบัฟเฟอร์จะแสดงออกทางอุปกรณ์ส่งออก (จอภาพ) เครื่องหมาย ; เป็นสัญลักษณ์ที่ใช้เพื่อระบุการจบคำสั่ง
โดยทุกคำสั่งในโปรแกรมจะต้องปิดท้ายด้วยเครื่องหมาย ; เสมอบรรทัดใหม่ในโปรแกรมไม่ได้หมายถึงการเขียนคำสั่งใหม่
เพราะฉะนั้น ในโปรแกรมภาษา C++ ผู้เขียนโปรแกรมอาจเขียนทุกคำสั่งในโปรแกรมไว้ในบรรทัดเดียวกันก็ได้ ยกเว้นส่วนของคำสั่งประกาศ เช่น
#include <iostream>
int main ( ) { std :: cout << "Hello, World! \n";}
ตัวดำเนินการส่งออก
สัญลักษณ์ << ในภาษา C++ หมายถึง ตัวดำเนินการส่งออก (output operator หรือ put operator )
ตัวดำเนินการส่งออก << จะทำการเพิ่มค่าของนิพจน์ที่ระบุอยู่ทางขวาของตัวดำเนินการ ลงในสายข้อมูลส่งออก (output stream)
ซึ่งระบุอยู่ทางซ้ายของตัวดำเนินการ โดยส่วนใหญ่จะเป็นวัตถุ cout อันได้แก่สายข้อมูลส่งออกของจอคอมพิวเตอร์ เช่น คำสั่ง
cout << 66 ;
จะแสดงเลขจำนวน 66 ออกทางจอภาพ สัญลักษณ์ << มีลักษณะคล้ายกับลูกศรที่แสดงทิศทางจากซ้ายไปขวา ซึ่งเปรียบได้กับการไหลส่งของข้อมูลจากนิพจน์ทางซ้าย
ไปยังสายข้อมูลส่งออกทางขวา ทำให้ง่ายแก่การจดจำ
อักขระ และ สัญพจน์
วัตถุ “Hel”, “lo, Wo” และ “rld! “ ในตัวอย่างก่อนหน้านี้ เรียกว่า สัญพจน์สายอักขระ (string literal)
หมายถึง ชุดลำดับของตัวอักขระเรียงต่อเนื่องกัน โดยในภาษา C++ กำหนดให้เขียนลำดับตัวอักขระไว้ในเครื่องหมาย “ ” (quotation marks)
อักขระ (character) หมายถึง อักขระ 1 ตัวเขียนอยู่ในเครื่องหมาย ‘ ’ (single quote) อักขระประกอบด้ว ตัวอักษรภาษาอังกฤษพิมพ์ใหญ่และพิมพ์เล็ก
ตัวเลข ช่องไฟ เครื่องหมายต่างๆ และ อักขระควบคุม ในภาษา C++ ใช้รหัสแอสกีในการแทนค่าอักขระ (ดูภาคผนวก)
ตัวอักขระควบคุมเป็นอักขระที่ไม่มีการแสดงสัญลักษณ์ตัวอักขระออกมา
แต่มีผลต่อการแสดงผล เช่น
\a เสียงร้องเตือน (bell, alert)
\b อักขระถอยหลัง (backspace)
\f อักขระเลื่อนหน้ากระดาษ (form feed, new page)
\n อักขระขึ้นบรรทัดใหม่ (new line)
\r อักขระปัดแคร่ (carriage return)
\t อักขระตั้งระยะ (tab)
ในการเขียนอักขระ \ ให้เป็นส่วนหนึ่งของสัญพจน์สายอักขระ ทำได้โดยเขียน \\ และ การระบุอักขระ * ในสัญพจน์สายอักขระ ทำได้โดยเขียน \*
ตัวแปร และ การประกาศตัวแปร
ตัวแปร (variable) เป็นสัญลักษณ์ที่ใช้แทนค่าตำแหน่งที่มีการสำรองเนื้อที่ในหน่วยความจำ เพื่อใช้เก็บค่า (value)
ไว้ใช้งานในการประมวลผลคำสั่งในโปรแกรม วิธีการที่จะนำค่าไปเก็บไว้ในตัวแปร ใช้คำสั่งกำหนดค่า (assignment statement)
โดยใช้ตัวดำเนินการกำหนดค่า (assignment operator) ซึ่งในภาษา C++ ใช้สัญลักษณ์ = ตามรูปแบบคำสั่ง
variable = expression ;
ผลของนิพจน์ (expression) จะถูกนำไปเก็บในตัวแปรตามการทำงานของตัวดำเนินการกำหนดค่า =
โปรแกรมกำหนดค่า 44 ให้กับตัวแปร m และค่า m + 33 ให้กับตัวแปร n
int main ( )
{ // prints m = 44 and n = 77
int m , n;
m = 44; // assigns value 44 to the variable m
cout << "m = " << m;
n = m + 33; // assigns value 77 to the variable n
cout << "and n = " << n << endl;
}
ทดสอบโปรแกรม
m = 44 and n = 77
****************************************************************************************************
****************************************************************************************************
- HTML
****************************************************************************************************
HTML ย่อมาจาก Hyper
Text Markup Language คือภาษาคอมพิวเตอร์ที่ ใช้ในการแสดงผลของเอกสารบน
website หรือที่เราเรียกกันว่าเว็บเพจ
ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และ จากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้
หรือที่เรียกว่า HTML Application
HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ
โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ
เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า
HTML ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML
จะใช้โปรแกรม web browser เช่น IE
Microsoft Internet Explorer (IE),
Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head)
และส่วนที่เป็นเนื้อหา (Body)
โดยมีรูปแบบคำสั่งดังนี้
คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beignและ Endใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE --> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้
จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar)
ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ
เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว
และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
สี รหัสสี
ขาว #FFFFFF
ดำ #000000
เทา #BBBBBB
แดง #FF0000
เขียว #00FF00
น้ำเงิน #0000FF
การจัดรูปแบบโฮมเพจ
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter
ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก
การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว
ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P>
ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ
การเชื่อมโยงข้อมูล
(Link)
เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการ
เชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง
จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป
และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา)
แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่งมีการ
เชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่ง
ของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
ตัวอย่างการเขียนภาษา HTML ด้วยโปรแกรม Notepad
ตัวอย่างการเปิดดูเอกสาร HTML ด้วยโปรแกรม Internet Explorer
****************************************************************************************************
****************************************************************************************************
- PHP
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
- Visual C#
****************************************************************************************************
ภาษา C# เป็นภาษาโครงสร้างแบบเดียวกับภาษา C ที่ทำความเข้าใจได้ง่ายบิดาของภาษา C#
(C# เวอร์ชั่นต่างๆทั้งหลายที่ Microsoft พัฒนา
ก็มีท่านคนนี้แหละครับเป็นต้นแบบที่มั่นคงของภาษาที่ได้รับความนิยมนี้) คือ Anders
Hejlsberg (แอนเดรส ฮาเยสเบิร์ก) มีกฏระเบียบข้อบังคับที่รัดกุม
อีกทั้งคำสั่งส่วนใหญ่เป็นภาษาอังกฤษจึงมีความหมายตรงตัวในบางคำสั่ง
(บางครั้งปัญหาเรื่องภาษาอังกฤษก็ทำให้เกิดปัญหาในการเขียนโปรแกรมได้ครับ
ดังนั้นจึงควรเรียนรู้ควบคู่กันไป)
ดังนั้นจึงไม่ผิดที่จะเริ่มฝึกเขียนโปรแกรมจากภาษา C#
ภาษา C#
(C# Programming Language) จะเขียนว่า C Sharp (ซี-ชาร์พ) ก็ได้ไม่ผิด เราๆอาจจะเคยได้ยินภาษาอื่นๆที่คล้าย C# เช่น ภาษา C, Java, C++ ซึ่งแน่นอนมันเป็นที่มาของ C# นั่นเอง (ตัว C เป็นตัวบ่งบอกให้รู้ว่า C# มีต้นกำเนิดมาจาก C นั่นเอง) เครื่องหมาย # ดังที่เคยพูดคือ เป็นสิ่งที่แสดงถึงความก้าวหน้ากว่า C++ ไปอีกระดับนึง (มอง # ให้เป็นเครื่องหมาย
+ ซ้อนกันสี่มุมสิครับ อาจมองแบบ C++++ ก็ได้ไม่ผิด)ถ้าจะให้พูดกันเข้าใจง่ายๆอีกก็คือ C# ได้รวบรวมข้อดีของภาษาต่างๆเช่น Java, Delphi, C++ เข้าไว้ด้วยกัน อีกทั้งยังมีความเรียบง่ายกว่า (ใครเคยใช้ Java จะรู้ว่ามีความคล้ายกับ C# มากที่สุด)
อีกทั้งยังมีเครื่องมือดีๆ อย่าง Visual C# 2008 ของทางไมโครซอฟท์อีกด้วย
จึงลดความยุ่งยากในการโปรแกรมได้มาก สามารถพัฒนาโปรแกรมระดับสูงได้ด้วย
โดยมีผังงาน (Flowchart) คือ รูปภาพ (Image) หรือสัญลักษณ์(Symbol) ที่ใช้เขียนแทนขั้นตอนคำอธิบายข้อความหรือคำพูดที่ใช้ในอัลกอริทึม
(Algorithm) เพราะการนำเสนอขั้นตอนของงานให้เข้าใจตรงกัน
ระหว่างผู้เกี่ยวข้อง ด้วยคำพูด หรือข้อความ ทำได้ยากกว่าเมื่อใช้รูปภาพ
หรือสัญลักษณ์
ภาษา C++ เป็นลูกผสมระหว่างภาษา Simula และภาษา C โดยรับเอาแนวคิดของภาษา C มากกว่า95% ประยุกต์เข้ากับแนวคิดเชิงวัตถุของ Simula ทำให้ภาษา C++
เป็นลูกผสมระหว่าง ProceduralLanguage และ Object Oriented Language เราไม่สามารถบอกได้ว่า C++ เป็น OOP100% โดยเราอาจเลือกเขียนแบบภาษา C ได้อีกแบบหนึ่งภาษา C++ เป็นภาษาโปรแกรมภาษาหนึ่งที่ได้รับการพัฒนาขึ้นมาไม่นานนักและเป็นภาษาที่มีความสามารถสูง
ดังนั้น ในบทนี้จะเสนอความเป็นมาของภาษา C++ รูปแบบการเขียโปรแกรมขั้นต้น
เพื่อเรียนรู้ถึงองค์ประกอบต่างๆ ที่จำเป็นในการเขียนโปรแกรมด้วยภาษา C++ เช่น การเขียนคอมเมนต์ การประกาศตัวแปร ชนิดข้อมูลที่ควรรู้
รวมทั้งข้อสังเกตที่น่าสนใจในภาษา C++
เช่น ตัวดำเนินการต่างๆ การจัดการกับการเกิดส่วนล้น (Overflow)C++
มีรากฐานมาจากภาษา C และเป็นภาษาที่คลุมภาษา C
ไว้ C++ ยังคงรักษาความสามารถและความยืดหยุ่นของ
C ในการเขียนโปรแกรมระบบต่ำ รวมทั้งโปรแกรมควบคุมฮาร์ดแวร์ ที่สำคัญกว่านั้นคือ
C++ ให้การสนับสนุนการเขียนโปรแกรมแบบ Object-Oriented
C++จัดเป็นภาษาที่มีความสามารถมากกว่า ADA และ
Modula-2
ขณะที่ยังคงความมีประสิทธิภาพและความกะทัดรัดของภาษา C ไว้
ดังนั้น จึงเป็นภาษาโปรแกรมภาษาหนึ่งที่ยอมให้โปรแกรมเมอร์เขียนโปรแกรมแบบมีโครงสร้าง
และเขียนโปรแกรมเชิงวัตถุได้อย่างมีประสิทธิภาพC++ เป็นภาษาผสม
(Hybrid Language) โดยอาจแก้ปัญหาหนึ่งด้วยวิธี Object-Oriented
ล้วนๆ หรืออาจแก้ปัญหาด้วยการใช้ภาษาแบบเก่า
ซึ่งมีโครงสร้างบางอย่างเพิ่มขึ้นจากภาษา Cในทางปฏิบัติในการแก้ปัญหามักจะสะท้อนให้เห็นวิธีการทั้ง
2 แบบC++ ถูกพัฒนาโดย BjaneStroustrup ที่
Bell Labs ในช่วงทศวรรษ 1980 Dr.Stroustrup พัฒนาภาษานี้ขึ้นเพื่อเขียนซอฟต์แวร์จำลองเหตุการณ์ (Event-Driven
Simulation) ที่มีความซับซ้อน ซึ่งมี Rick Mascitti เป็นผู้ตั้งชื่อของภาษานี้ให้กับเขาC++ ถูกออกแบบให้ส่งเสริมการพัฒนาซอฟต์แวร์ขนาดใหญ่
โดยเพิ่มการตรวจสอบ Type เข้าไป เมื่อเปรียบเทียบกับ C
แล้วจะลดข้อผิดพลาดลงได้มาก เพราะว่าภาษา C ยอมให้โปรแกรมเมอร์ควบคุมระบบในระดับต่ำได้โดยตรง
โปรแกรมเมอร์จำนวนมากจึงทำงานโดยเริ่มจากโครงสร้างระดับต่ำ แล้วนำส่วนต่างๆ
เหล่านี้มาประกอบกันเป็นโครงสร้างใหญ่ แต่ในภาษาC++ จะทำในทางตรงกันข้าม
คือ กำหนดโครงสร้างใหญ่ก่อนนำมาสัมพันธ์กัน แล้วจึงกำหนดโครงสร้างย่อยๆ ต่อไป
รูปแบบการเขียนโปรแกรม C++
ภาษาโปรแกรม C++ เป็นภาษาโปรแกรมที่ไม่มีรูปการเขียนตายตัว กล่าวคือ
ไม่ต้องกำหนดว่าองค์ประกอบของโปรแกรมจะต้องเขียนอยู่ในบรรทัดหรือบนหน้ากระดาษส่วนไหน
ดังนั้น โปรแกรมเมอร์จึงมีอิสระที่จะวางรูปแบบของโปรแกรม
แต่โปรแกรมเมอร์ที่มีประสบการณ์ย่อมทราบดีว่าการเขียนโปรแกรมรูปแบบที่ดีนั้นจะต้องอ่านง่ายสะดวกต่อการแก้ไขข้อผิดพลาดของโปรแกรม
และง่ายต่อการดูแลรักษาโปรแกรม แต่อย่างไรก็ตาม
เราสามารถเขียนตามระเบียบแบบแผนมาตรฐานของภาษา C++ ซึ่งมีข้อปฏิบัติง่ายๆ
ดังต่อไปนี้
1.การเขียนประโยคตัวเตรียมประมวลผล #include ไว้ที่ตำแหน่งเริ่มต้นของโปรแกรม
2.เขียนบรรทัดละหนึ่งคำสั่ง
3.เขียนกลุ่มคำสั่งที่อยู่ภายในบล็อกแบบย่อหน้า
4.ให้มีการเว้นวรรคตรงเครื่องหมายตัวดำเนินการทั้งก่อนและหลังเครื่องหมาย
เช่น n =4
ตัวอย่างโปรแกรมภาษา C++ในหัวข้อนี้ จะแสดงตัวอย่างโปรแกรมภาษา C++ อย่างง่าย เพื่อให้นักเรียนเห็นโครงร่างของโปรแกรมที่พัฒนาโดยใช้ภาษา C++
ตัวอย่าง โปรแกรมแสดงข้อความ “Hello, World!”
#include <iostream>
int main ( )
{ std :: cout << "Hello, World! \n";
}
ทดสอบโปรแกรม
Hello, World!
บรรทัดแรกในโปรแกรมตัวอย่างเป็นคำสั่งประกาศตัวประมวลผลก่อน (preprocessor directive)
เพื่อแจ้งแก่โปรแกรมแปลโปรแกรมภาษา C++ (C++ compiler) ให้รู้ว่า จะหานิยาม (definition) ของวัตถุ std :: cout
เพื่อนำมาใช้งานในคำสั่งบรรทัดที่ 3 ได้จากที่ใด โดยคำสั่งประกาศในโปรแกรมจะต้องระบุสัญลักษณ์ # ไว้ก่อนหน้า เช่น #include เป็นต้น
นิพจน์ <iostream> เป็นส่วนหัวมาตรฐาน (standard header)ของไฟล์ในคลังโปรแกรมภาษา C++ มาตรฐาน (standard C++ library)
โดย iostream มาจากคำว่า input / output stream หมายถึง สายข้อมูลนำเข้าและส่งออก
เป็นคลังโปรแกรมที่รวมนิยามของวัตถุที่เกี่ยวข้องกับการนำเข้าและส่งออกข้อมูล ไฟล์ส่วนหัวภาษา C++ ต้องเขียนอยู่ภายในเครื่องหมาย < > เสมอ
ในบรรทัดที่ 2 เป็นส่วนเริ่มต้นของโปรแกรม โดยทุกโปรแกรมในภาษา C++ ต้องประกอบด้วยฟังก์ชันอย่างน้อยหนึ่งฟังก์ชันที่ชื่อ main เสมอ
โดยฟังก์ชัน main ( ) จะเป็นฟังก์ชันแรกที่จะถูกนำไปประมวลผล สัญลักษณ์ ( ) เป็นสิ่งที่ระบุว่า main เป็นชื่อของฟังก์ชัน คำว่า int
เป็นคำสงวนมาจากคำว่า integer ซึ่งหมายถึง ข้อมูลชนิดจำนวนเต็มในภาษา C++
เป็นคำที่บ่งบอกว่าชนิดข้อมูลที่ฟังก์ชัน main จะส่งค่ากลับ คือ ข้อมูลชนิดจำนวนเต็ม ภาษา C++ เป็นภาษาที่อ่อนไหวต่อตัวพิมพ์ (case-sensitive)
ดังนั้น การตั้งชื่อในภาษา C++ ถ้าใช้ตัวพิมพ์ที่ต่างกัน จะถือว่าเป็นคนละชื่อ กล่าวคือ ชื่อ main( ) จะถือว่าเป็นคนละชื่อกับ Main( )
สองบรรทัดสุดท้ายเป็นส่วนโครงร่างของโปรแกรม (program body) ที่ประกอบด้วยชุดลำดับของคำสั่งเขียนอยู่ภายในเครื่องหมาย { }
โดยโปรแกรมตัวอย่างประกอบด้วยคำสั่งเพียง 1 คำสั่ง คือ
std :: cout << "Hello, World! \n";
ซึ่งเป็นคำสั่งที่มีผลการทำงานให้นำสายอักขระ (string) “Hello, World! \n” ไปใส่ในวัตถุ std :: cout
ผลที่เกิดขึ้น คือ ข้อความ Hello, World! จะถูกแสดงออกทางจอภาพ แล้วขึ้นบรรทัดใหม่ สายอักขระในภาษา C++
จะเขียนอยู่ภายในเครื่องหมาย “ ” สำหรับ \n จะแทนอักขระขึ้นบรรทัดใหม่ (newline character)
ซึ่งเป็นอักขระที่ไม่แสดงค่าสัญลักษณ์ตัวพิมพ์ แต่แสดงผลการเลื่อนตัวชี้ตำแหน่ง (cursor) ไปที่ตำแหน่งแรกของบรรทัดถัดไป
แล้วทำการล้างข้อมูลในบัฟเฟอร์ (buffer) ของวัตถุ iostream ด้วย สัญลักษณ์ << เป็นตัวดำเนินการส่งออกข้อมูล (output operator)
ที่กระทำกับวัตถุ std :: cout ในการส่งข้อมูลของนิพจน์ที่อยู่ทางขวาของตัวดำเนินการทีละตัวไปยังบัฟเฟอร์ของวัตถุ iostream
และเมื่อประมวลผล ข้อมูลในบัฟเฟอร์จะแสดงออกทางอุปกรณ์ส่งออก (จอภาพ) เครื่องหมาย ; เป็นสัญลักษณ์ที่ใช้เพื่อระบุการจบคำสั่ง
โดยทุกคำสั่งในโปรแกรมจะต้องปิดท้ายด้วยเครื่องหมาย ; เสมอบรรทัดใหม่ในโปรแกรมไม่ได้หมายถึงการเขียนคำสั่งใหม่
เพราะฉะนั้น ในโปรแกรมภาษา C++ ผู้เขียนโปรแกรมอาจเขียนทุกคำสั่งในโปรแกรมไว้ในบรรทัดเดียวกันก็ได้ ยกเว้นส่วนของคำสั่งประกาศ เช่น
#include <iostream>
int main ( ) { std :: cout << "Hello, World! \n";}
เพื่อแจ้งแก่โปรแกรมแปลโปรแกรมภาษา C++ (C++ compiler) ให้รู้ว่า จะหานิยาม (definition) ของวัตถุ std :: cout
เพื่อนำมาใช้งานในคำสั่งบรรทัดที่ 3 ได้จากที่ใด โดยคำสั่งประกาศในโปรแกรมจะต้องระบุสัญลักษณ์ # ไว้ก่อนหน้า เช่น #include เป็นต้น
นิพจน์ <iostream> เป็นส่วนหัวมาตรฐาน (standard header)ของไฟล์ในคลังโปรแกรมภาษา C++ มาตรฐาน (standard C++ library)
โดย iostream มาจากคำว่า input / output stream หมายถึง สายข้อมูลนำเข้าและส่งออก
เป็นคลังโปรแกรมที่รวมนิยามของวัตถุที่เกี่ยวข้องกับการนำเข้าและส่งออกข้อมูล ไฟล์ส่วนหัวภาษา C++ ต้องเขียนอยู่ภายในเครื่องหมาย < > เสมอ
ในบรรทัดที่ 2 เป็นส่วนเริ่มต้นของโปรแกรม โดยทุกโปรแกรมในภาษา C++ ต้องประกอบด้วยฟังก์ชันอย่างน้อยหนึ่งฟังก์ชันที่ชื่อ main เสมอ
โดยฟังก์ชัน main ( ) จะเป็นฟังก์ชันแรกที่จะถูกนำไปประมวลผล สัญลักษณ์ ( ) เป็นสิ่งที่ระบุว่า main เป็นชื่อของฟังก์ชัน คำว่า int
เป็นคำสงวนมาจากคำว่า integer ซึ่งหมายถึง ข้อมูลชนิดจำนวนเต็มในภาษา C++
เป็นคำที่บ่งบอกว่าชนิดข้อมูลที่ฟังก์ชัน main จะส่งค่ากลับ คือ ข้อมูลชนิดจำนวนเต็ม ภาษา C++ เป็นภาษาที่อ่อนไหวต่อตัวพิมพ์ (case-sensitive)
ดังนั้น การตั้งชื่อในภาษา C++ ถ้าใช้ตัวพิมพ์ที่ต่างกัน จะถือว่าเป็นคนละชื่อ กล่าวคือ ชื่อ main( ) จะถือว่าเป็นคนละชื่อกับ Main( )
สองบรรทัดสุดท้ายเป็นส่วนโครงร่างของโปรแกรม (program body) ที่ประกอบด้วยชุดลำดับของคำสั่งเขียนอยู่ภายในเครื่องหมาย { }
โดยโปรแกรมตัวอย่างประกอบด้วยคำสั่งเพียง 1 คำสั่ง คือ
std :: cout << "Hello, World! \n";
ซึ่งเป็นคำสั่งที่มีผลการทำงานให้นำสายอักขระ (string) “Hello, World! \n” ไปใส่ในวัตถุ std :: cout
ผลที่เกิดขึ้น คือ ข้อความ Hello, World! จะถูกแสดงออกทางจอภาพ แล้วขึ้นบรรทัดใหม่ สายอักขระในภาษา C++
จะเขียนอยู่ภายในเครื่องหมาย “ ” สำหรับ \n จะแทนอักขระขึ้นบรรทัดใหม่ (newline character)
ซึ่งเป็นอักขระที่ไม่แสดงค่าสัญลักษณ์ตัวพิมพ์ แต่แสดงผลการเลื่อนตัวชี้ตำแหน่ง (cursor) ไปที่ตำแหน่งแรกของบรรทัดถัดไป
แล้วทำการล้างข้อมูลในบัฟเฟอร์ (buffer) ของวัตถุ iostream ด้วย สัญลักษณ์ << เป็นตัวดำเนินการส่งออกข้อมูล (output operator)
ที่กระทำกับวัตถุ std :: cout ในการส่งข้อมูลของนิพจน์ที่อยู่ทางขวาของตัวดำเนินการทีละตัวไปยังบัฟเฟอร์ของวัตถุ iostream
และเมื่อประมวลผล ข้อมูลในบัฟเฟอร์จะแสดงออกทางอุปกรณ์ส่งออก (จอภาพ) เครื่องหมาย ; เป็นสัญลักษณ์ที่ใช้เพื่อระบุการจบคำสั่ง
โดยทุกคำสั่งในโปรแกรมจะต้องปิดท้ายด้วยเครื่องหมาย ; เสมอบรรทัดใหม่ในโปรแกรมไม่ได้หมายถึงการเขียนคำสั่งใหม่
เพราะฉะนั้น ในโปรแกรมภาษา C++ ผู้เขียนโปรแกรมอาจเขียนทุกคำสั่งในโปรแกรมไว้ในบรรทัดเดียวกันก็ได้ ยกเว้นส่วนของคำสั่งประกาศ เช่น
#include <iostream>
int main ( ) { std :: cout << "Hello, World! \n";}
****************************************************************************************************
****************************************************************************************************
- HTML
****************************************************************************************************
HTML ย่อมาจาก Hyper
Text Markup Language คือภาษาคอมพิวเตอร์ที่ ใช้ในการแสดงผลของเอกสารบน
website หรือที่เราเรียกกันว่าเว็บเพจ
ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และ จากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้
หรือที่เรียกว่า HTML Application
HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ
โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ
เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า
HTML ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML
จะใช้โปรแกรม web browser เช่น IE
Microsoft Internet Explorer (IE),
Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head)
และส่วนที่เป็นเนื้อหา (Body)
โดยมีรูปแบบคำสั่งดังนี้
และส่วนที่เป็นเนื้อหา (Body)
โดยมีรูปแบบคำสั่งดังนี้
คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beignและ Endใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE --> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้
จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar)
ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
การเติมสีสันให้เอกสาร
เชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง
จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป
และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา)
แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่งมีการ
เชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่ง
ของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beignและ Endใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE --> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้
จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar)
ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ
เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว
และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
สี รหัสสี
ขาว #FFFFFF
ดำ #000000
เทา #BBBBBB
แดง #FF0000
เขียว #00FF00
น้ำเงิน #0000FF
การจัดรูปแบบโฮมเพจ
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter
ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก
การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว
ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P>
ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ
การเชื่อมโยงข้อมูล
(Link)
เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง
จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป
และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา)
แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่งมีการ
เชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่ง
ของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
ตัวอย่างการเขียนภาษา HTML ด้วยโปรแกรม Notepad
****************************************************************************************************
****************************************************************************************************
- PHP
****************************************************************************************************
ภาษา PHP เป็นโปรแกรมภาษาที่สามารถใช้งานในระบบเครือข่ายอินเทอร์เน็ตได้ ตัวหนึ่งที่มีความสามารถสูง
มีผู้นิยมใช้จำนวนมาก เราสามารถบรรจุลง( Download) มาใช้ได้ฟรีโดยไม่ผิดกฎหมาย
นอกจากนี้ภาษา PHP ยังสามารถทำงานร่วมกับโปรแกรม ฐานข้อมูล MySQL
ซึ่งเป็นโปรแกรมดาวน์โหลดมาใช้ได้ฟรีเช่นเดียวกัน
PHP เป็นภาษาสคริปต์ ( Scripting Language ) คำสั่งต่างๆ จะเก็บในรูปของข้อความ (Text)
อาจเขียนแทรกอยู่ภายในภาษา HTML หรือใช้งานอิสระก็ได้ แต่ในการใช้งานจริงมักใช้งานร่วมกับภาษา HTML
ดังนั้นการเขียนโปรแกรมนี้ต้องมีความรู้ด้านภาษา HTML เป็นอย่างดี
อย่างไรก็ตามเราสามารถใช้โปรแกรมประยุกต์มาช่วยอำนวยความสะดวกในการสร้างงานได้ เช่น Macromedia Dreamweaver
หรือโปรแกรมประเภท Editor (โปรแกรมที่อำนวยความสะดวกในการเขียนโปรแกรมภาษาต่างๆ )
เช่น EditPlus Macromedia Homesite ฯลฯ โปรแกรมเหล่านี้จะช่วยจำแนกคำ เช่น คำสั่ง คำทั่วไป ตัวแปร ฯลฯ
ให้มีสีต่างกันเพื่อสะดวกในการสังเกต และมีตัวเลขบอกบรรทัดทำให้สะดวกในการแก้ไข
PHP เป็นภาษาที่มีการประมวลผลทางเครื่องผู้ให้บริการ (Server)
โดยเป็นเครื่องมือที่ทำให้เราสามารถสร้างไฟล์เอกสารประเภท HTML ที่มีการเคลื่อนไหวเปลี่ยนแปลงได้หรือที่เรียกว่าพลวัต ( Dynamic HTML)
การที่เครื่องบริการมีการประมวลผลก่อนส่งข้อมูลมายังเครื่องผู้ใช้เราเรียกว่า Server Side Include (SSI)
การทำงานในลักษณะนี้ทำให้ความเร็วในการทำงานสูงขึ้นอีกด้วย
โปรแกรมภาษา PHP มีข้อดีและข้อจำกัดที่พอสรุปได้ดังนี้
1. เป็นโปรแกรมฟรี ( Download จากอินเทอร์เน็ตมาใช้ได้โดยไม่ผิดกฏหมาย)
2. ใช้งานร่วมกับฐานข้อมูลได้หลายชนิดเช่นMySQLซึ่งเป็นของฟรีเช่นเดียวกัน
3.ประมวลผลโปรแกรมทำได้รวดเร็วกว่าการใช้โปรแกรมอื่น
มีผู้นิยมใช้จำนวนมาก เราสามารถบรรจุลง( Download) มาใช้ได้ฟรีโดยไม่ผิดกฎหมาย
นอกจากนี้ภาษา PHP ยังสามารถทำงานร่วมกับโปรแกรม ฐานข้อมูล MySQL
ซึ่งเป็นโปรแกรมดาวน์โหลดมาใช้ได้ฟรีเช่นเดียวกัน
PHP เป็นภาษาสคริปต์ ( Scripting Language ) คำสั่งต่างๆ จะเก็บในรูปของข้อความ (Text)
อาจเขียนแทรกอยู่ภายในภาษา HTML หรือใช้งานอิสระก็ได้ แต่ในการใช้งานจริงมักใช้งานร่วมกับภาษา HTML
ดังนั้นการเขียนโปรแกรมนี้ต้องมีความรู้ด้านภาษา HTML เป็นอย่างดี
อย่างไรก็ตามเราสามารถใช้โปรแกรมประยุกต์มาช่วยอำนวยความสะดวกในการสร้างงานได้ เช่น Macromedia Dreamweaver
หรือโปรแกรมประเภท Editor (โปรแกรมที่อำนวยความสะดวกในการเขียนโปรแกรมภาษาต่างๆ )
เช่น EditPlus Macromedia Homesite ฯลฯ โปรแกรมเหล่านี้จะช่วยจำแนกคำ เช่น คำสั่ง คำทั่วไป ตัวแปร ฯลฯ
ให้มีสีต่างกันเพื่อสะดวกในการสังเกต และมีตัวเลขบอกบรรทัดทำให้สะดวกในการแก้ไข
PHP เป็นภาษาที่มีการประมวลผลทางเครื่องผู้ให้บริการ (Server)
โดยเป็นเครื่องมือที่ทำให้เราสามารถสร้างไฟล์เอกสารประเภท HTML ที่มีการเคลื่อนไหวเปลี่ยนแปลงได้หรือที่เรียกว่าพลวัต ( Dynamic HTML)
การที่เครื่องบริการมีการประมวลผลก่อนส่งข้อมูลมายังเครื่องผู้ใช้เราเรียกว่า Server Side Include (SSI)
การทำงานในลักษณะนี้ทำให้ความเร็วในการทำงานสูงขึ้นอีกด้วย
โปรแกรมภาษา PHP มีข้อดีและข้อจำกัดที่พอสรุปได้ดังนี้
1. เป็นโปรแกรมฟรี ( Download จากอินเทอร์เน็ตมาใช้ได้โดยไม่ผิดกฏหมาย)
2. ใช้งานร่วมกับฐานข้อมูลได้หลายชนิดเช่นMySQLซึ่งเป็นของฟรีเช่นเดียวกัน
3.ประมวลผลโปรแกรมทำได้รวดเร็วกว่าการใช้โปรแกรมอื่น
รูปแบบของการใช้คำสั่งภาษา PHP ในเอกสาร HTML
รูปแบบของภาษา PHP มีหลายแบบดังนี้
1. <? …. คำสั่งภาษา PHP …..?> เรียกว่า SGML style ซึ่งนิยมใช้ที่สุด
2. <?php . ….…. คำสั่งภาษา PHP ….... ?> เรียกว่า XML style
3. <script language="php"> ..…. คำสั่งภาษา PHP …... </script>
เรียก JavaScript style
4. <% ..…. คำสั่งภาษา PHP …... %> เรียก ASP style
รูปแบบของภาษา PHP มีหลายแบบดังนี้
1. <? …. คำสั่งภาษา PHP …..?> เรียกว่า SGML style ซึ่งนิยมใช้ที่สุด
2. <?php . ….…. คำสั่งภาษา PHP ….... ?> เรียกว่า XML style
3. <script language="php"> ..…. คำสั่งภาษา PHP …... </script>
เรียก JavaScript style
4. <% ..…. คำสั่งภาษา PHP …... %> เรียก ASP style
การวางคำสั่ง PHP
การวางคำสั่ง PHP สามารถแทรกไว้ภายในเอกสาร HTML ได้ ตัวอย่างเช่น
<HTML>
<HEAD><TITLE> ฝึกการเขียนภาษา PHP </TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <H1>
<?
echo "นี่คือการแสดงผลข้อความในภาษา PHP <br></n>";
echo ("อีกรูปแบบหนึ่งของการแสดงผลข้อความในภาษา PHP ");
//echo เป็นคำสั่งให้แสดงโปรแกรมแสดงผลทาง Browser
// เครื่องหมาย "//" ทำให้ตัวแปลภาษามองข้ามข้อความหลังเครื่องหมายดังกล่าวเรียกเครื่องหมาย
//นี้ว่า comment
/* นี่ก็คืออีกรูปแบบหนึ่งของ comment ซึ่งสามารถคร่อมข้อความได้หลายบรรทัด โดยไม่ต้องใช้ comment
ทุกบรรทัดดังรูปแบบข้างต้น
เครื่องหมาย </n> ทำให้ภาษา PHP ส่งข้อความภาษา HTML เป็นการขึ้นบรรทัดใหม่
เครื่องหมาย <br> จะเป็นคำสั่งให้การแปลผลของ Browser ขึ้นบรรทัดใหม่
*/
# นำหน้าข้อความที่ต้องการ comment ได้เช่นเดียวกับเครื่องหมาย //
?></H1>
</BODY>
</HTML>
ตัวแปรในภาษา PHP
การเขียนโปรแกรมภาษาคอมพิวเตอร์ระดับสูง องค์ประกอบสำคัญ คือ ตัวแปร (variable) ตัวแปรในภาษา PHP
เริ่มต้นด้วยเครื่องหมาย dollar ($) โดยไม่ต้องกำหนดแบบของข้อมูล (data type)
อย่างเจาะจงเหมือนในภาษาซี เพราะว่า ตัวแปลภาษาจะจำแนกเองโดยอัตโนมัติ
<?
$mystring = "สวัสดีครับ"; // กำหนดค่าตัวแปรเป็นข้อความ
$myinteger = 1031; // คำหนดค่าตัวแปรเป็นเลขจำนวนเต็ม
$myfloat = 3.14; // กำหนดค่าตัวแปรเป็นเลขทศนิยม
print ("$mystring<br></n>"); // ใช้คำสั่ง print แสดงผลตัวแปร
print ("$myinteger<br></n>"); // ใช้คำสั่ง print ส่วนแสดงผลตัวแปร
print ("$myfloat<br></n>"); // ใช้คำสั่ง print ส่วนแสดงผลตัวแปร
?>
ตัวแปรอาจเป็นข้อความ (String) จำนวนเต็ม (Integer) ทศนิยม (float), อะเรย์ ฯลฯ ดังตัวอย่าง
<?
$mystring = "ฝึกอบรมเขียนโปรแกรมด้วยภาษา PHP "; //ตัวแปรข้อความ
$myinteger = 16200087; //ตัวแปรซึ่งเป็นเลขจำนวนเต็ม
$myfloat = 3.14; //ตัวแปรซึ่งเป็นเลขทศนิยม
echo "$mystring<BR>\n"; //แสดงผลตัวแปรซึ่งเป็นข้อความ
echo "$myinteger<BR>\n"; //แสดงผลตัวแปรเลขจำนวนเต็ม
echo "$myfloat<BR>\n"; // แสดงผลตัวแปรเลขทศนิยม
?>
การวางคำสั่ง PHP สามารถแทรกไว้ภายในเอกสาร HTML ได้ ตัวอย่างเช่น
<HTML>
<HEAD><TITLE> ฝึกการเขียนภาษา PHP </TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <H1>
<?
echo "นี่คือการแสดงผลข้อความในภาษา PHP <br></n>";
echo ("อีกรูปแบบหนึ่งของการแสดงผลข้อความในภาษา PHP ");
//echo เป็นคำสั่งให้แสดงโปรแกรมแสดงผลทาง Browser
// เครื่องหมาย "//" ทำให้ตัวแปลภาษามองข้ามข้อความหลังเครื่องหมายดังกล่าวเรียกเครื่องหมาย
//นี้ว่า comment
/* นี่ก็คืออีกรูปแบบหนึ่งของ comment ซึ่งสามารถคร่อมข้อความได้หลายบรรทัด โดยไม่ต้องใช้ comment
ทุกบรรทัดดังรูปแบบข้างต้น
เครื่องหมาย </n> ทำให้ภาษา PHP ส่งข้อความภาษา HTML เป็นการขึ้นบรรทัดใหม่
เครื่องหมาย <br> จะเป็นคำสั่งให้การแปลผลของ Browser ขึ้นบรรทัดใหม่
*/
# นำหน้าข้อความที่ต้องการ comment ได้เช่นเดียวกับเครื่องหมาย //
?></H1>
</BODY>
</HTML>
ตัวแปรในภาษา PHP
การเขียนโปรแกรมภาษาคอมพิวเตอร์ระดับสูง องค์ประกอบสำคัญ คือ ตัวแปร (variable) ตัวแปรในภาษา PHP
เริ่มต้นด้วยเครื่องหมาย dollar ($) โดยไม่ต้องกำหนดแบบของข้อมูล (data type)
อย่างเจาะจงเหมือนในภาษาซี เพราะว่า ตัวแปลภาษาจะจำแนกเองโดยอัตโนมัติ
<?
$mystring = "สวัสดีครับ"; // กำหนดค่าตัวแปรเป็นข้อความ
$myinteger = 1031; // คำหนดค่าตัวแปรเป็นเลขจำนวนเต็ม
$myfloat = 3.14; // กำหนดค่าตัวแปรเป็นเลขทศนิยม
print ("$mystring<br></n>"); // ใช้คำสั่ง print แสดงผลตัวแปร
print ("$myinteger<br></n>"); // ใช้คำสั่ง print ส่วนแสดงผลตัวแปร
print ("$myfloat<br></n>"); // ใช้คำสั่ง print ส่วนแสดงผลตัวแปร
?>
ตัวแปรอาจเป็นข้อความ (String) จำนวนเต็ม (Integer) ทศนิยม (float), อะเรย์ ฯลฯ ดังตัวอย่าง
<?
$mystring = "ฝึกอบรมเขียนโปรแกรมด้วยภาษา PHP "; //ตัวแปรข้อความ
$myinteger = 16200087; //ตัวแปรซึ่งเป็นเลขจำนวนเต็ม
$myfloat = 3.14; //ตัวแปรซึ่งเป็นเลขทศนิยม
echo "$mystring<BR>\n"; //แสดงผลตัวแปรซึ่งเป็นข้อความ
echo "$myinteger<BR>\n"; //แสดงผลตัวแปรเลขจำนวนเต็ม
echo "$myfloat<BR>\n"; // แสดงผลตัวแปรเลขทศนิยม
?>
รหัส Escape
ภาษา PHP ได้นำเอารหัส
Escape แทรกลงไปในคำสั่งเพื่อแสดงผลสัญลักษณ์บางประเภท (สัญลักษณ์เหล่านี้ส่วนใหญ่โปรแกรม PHPได้นำไปใช้ทำหน้าที่พิเศษเป็นอย่างอื่นแล้ว)
เช่น
\’
เครื่องหมาย ’ (Single Quote)
\”
เครื่องหมาย ” (Double Quote)
\
\ เครื่องหมาย \
\
$ เครื่องหมาย $
\
n ขึ้นบรรทัดใหม่
\
t เว้นช่องว่าง 1 tab (ประมาณ 6 ตัวอักษร)
\
r Carriage Return
ตัวอย่างสคริปต์โปรแกรมประยุกต์
1. โปรแกรมวันที่แสดงผลเป็นภาษาไทย
thdate.php
<?
function ThaiDate(){
$ThDay = array ( "อาทิตย์", "จันทร์", "อังคาร", "พุธ", "พฤหัส", "ศุกร์", "เสาร์" );
$ThMonth = array ("มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม",
"มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม" ); );
$a = date( "w" );
$b = date( "n" )-1;
$c = date( "j" );
$d = date( "Y" )+543;
return "วัน$ThDay[$a] ที่ $c เดือน$ThMonth[$b] พ.ศ. $d";
}
echo ThaiDate();
?>
****************************************************************************************************
****************************************************************************************************
- CSS
CSS คือ ชุดคำสั่งที่ใช้สำหรับการกำหนดการแสดงผลข้อมูลหน้าเว็บพจ ซึ่งคำเต็ม ๆ
ของ CSS คือ Cascading Style Sheets เป็นมาตราฐานหนึ่งของ
W3C ที่กำหนดขึ้นมา
เพื่อใช้ในการตบแต่งหน้าเอกสารเว้บเพจโดยเฉพาะ การใช้งาน CSS จะเข้ามาช่วยเพิ่มความสามารถให้กับ HTML เดิมที่เราใช้งานกันอยู่ในปัจจุบัน
ซึ่งในปัจจุบันนี้ CSS ได้มาอยู่บนมาตราฐานที่เวอร์ชั่น 2.0
(CSS2.0)
ความสามารถของ CSS
ความสามารถของ CSS ถ้าจะยกตัวอย่างให้เห็นภาพกันชัด ๆ
ผมก็ขอยกตัวอย่างดังนี้แล้วกันครับ
- CSS สามารถกำหนดการ Fix ขนาดของ Font
อักษรได้ นั้นคือ เมื่อผู้เยี่ยมชมปรับขนาด Font ที่ Browser ที่ขนาดเท่าใด CSS ก็ยังคงแสดงผลขนาด Font ที่ขนาดที่เรากำหนดไว้เสมอ
ส่งผลให้ทำให้เว็บเพจเราไม่เละตามขนาดของ Font ที่ผู้ใช้ปรับเปลี่ยนที่
Browser
- CSS สามารถทำการกำหนดภาพพื้นหลัง (Image
Background) ให้ได้ตำแหน่งและมีรูปแบบตามที่เราต้องการได้
- CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้อย่างรวดเร็วขึ้น
เนื่องจากเราสามารถปรับปรุงคุณสมบัติของการแสดงผลได้จากจุด ๆ
เดียวแล้วส่งผลให้ทั้งหน้าเพจที่มีการใช้งาน CSS นั้นปรับปรุงให้เป็นไปตามที่เราแก้ไข
- CSS ทำให้เว็บเพจเราโหลดเร็วขึ้น
- อื่น ๆ อีกมากมาย...รอคุฯเรียนรู้และใช้งานจาก CSS
จะใช้งาน CSS ได้อย่างไร ?
เนื่องจาก CSS จะทำงานร่วมกับ HTML เป็นหลัก
ดังนั้นเราจึงสามารถพิมพ์โค้ดของ CSS แทรกไปยังโค้ดของ HTML
ได้ (แต่ยังมีรูปแบบอื่นอีก ไว้จะแนะนำกันต่อไปกับบทความอื่น ๆ นะ)
เช่น
รูปแบบไวยากรณ์ของ CSS เบื้องต้น
CSS ไม่ว่าคุณจะเขียนด้วยรูปแบบใดก็ตาม
ต้องยึดหลักไวยากรณ์ของรูปแบบภาษา ตามที่จะได้อธิบายในบทความนี้เหมือน ๆ กัน
นั้นคือ
4. ต้องเขียนคุณสมบัติของ CSS นั้นไว้ภายในเครื่องหมายปีกกา { .... } เท่านั้น
จากรูปตัวอย่างการเขียน CSS โดยการกำหนดชื่อ Class
1. ชื่อ Class ต้องนำหน้าด้วยเครื่องหมาย dot หรือ จุด ( . )
4. ชื่อ Class ห้ามเป็นภาษาไทย (ไม่มีใครเข้าตั้งชื่อแบบนี้กัน)
****************************************************************************************************
****************************************************************************************************
-
Dreamweaver
****************************************************************************************************
Dreamweaver คือโปรแกรมสร้างเว็บเพจแบบเสมือนจริง
ของค่าย Adobe ซึ่งช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา
HTML หรือโค๊ดโปรแกรม เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG
" โปรแกรม Dreamweaver มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ
รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ
ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ
โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน Dreamweaver มีทั้งในระบบปฏิบัติการ แมคอินทอช และไมโครซอฟท์วินโดวส์ Dreamweaver
ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINE
ได้ เวอร์ชั่นล่าสุดของโปรแกรมตัวนีคือ Adobe Dreamweaver CS5.5
- Macromedia Dreamweaver 8
จุดเด่นของโปรแกรม Macromedia
Dreamweaver 8
1.โปรแกรมจะทำการแปลงรหัสให้เป็นภาษา HTML โดยอัตโนมัติดังนั้น ผู้ใช้ที่ไม่มีความรู้
ด้านนี้สามารถทำได้
ความสามารถของ Macromedia Dreamweaver 8
- สร้างเว็บเพจภาษาไทย
การกำหนดค่าเพื่อใช้ในการสร้างเว็บเพจภาษาไทย
โปรแกรม Macromedia Dreamweaver 8 มีการเขียนขึ้นมา
เพื่อความสะดวกสบาย ในการสร้างเว็บเพจ เนื่องจากมีวิธีการใช้ที่เหมือนกับ โปรแกรม Microsoft
Office มีเมนูต่างๆ ให้ผู้ใช้เลือกใช้จากนั้น
โปรแกรมจะทำการแปลงให้เป็น ภาษา HTML ซึ่งเป็นภาษาในการเขียนเว็บเพจ
ให้เองโดยอัตโนมัติ
โปรแกรม Macromedia Dreamweaver 8 นั้นถูกออกแบบมา ให้ใช้ได้กับเว็บเพจทุกภาษา
และสามารถที่จะเลือกใช้ฟอนต์ ได้ตามที่มีในระบบปฏิบัติการ ซึ่ง โปรแกรม Macromedia
Dreamweaver 8
จะมีวิธีในการเข้ารหัสที่เป็นตัวอักษรแบบมาตรฐานเท่านั้น คือ (Unicode) ซึ่งจะทำให้มีความสะดวกสบายยิ่งขึ้น
ที่ไม่ต้องติดตั้งโปรแกรมเพิ่มเติมเหมือนกับเวอร์ชั่นเก่าๆ
แต่ในการที่จะใช้กับภาษาอะไร ต้องมีการกำหนดรหัส (Encoding) ให้กับโปรแกรมด้วยเพื่อที่จะได้ไม่มีปัญหาเกิดขึ้นภายหลัง
เนื่องจากภาษาไทยนั้น มีตัวอักษร
ที่ค่อนข้างจะละเอียดอ่อนมาก จึงทำให้เกิดปัญหาบางครั้ง จะอ่านภาษาไทยไม่ได้
ดังนั้น ก่อนที่จะ ลงมือในการสร้างเว็บเพจ ด้วยโปรแกรม Macromedia Dreamweaver 8 นั้นต้องมีการกำหนดรหัส (Encoding)
เพื่อให้เว็บเพจนั้นสามารถอ่าน ภาษาไทยได้ ซึ่งมีวิธี
ในการที่จะกำหนดเพื่อให้ Macromedia Dreamweaver 8
อ่านภาษาไทยได้ดังนี้
·
เลือกคำสั่งที่เมนูบาโดยเลือก Modify จากนั้นเลือก
Page Properties (หรือสามารถเลือกได้ที่ปุ่ม Page
Properties ที่อยู่บนพาแนล Properties Inspector)
รู้จักฟังก์ชั่นต่าง ๆ ของ Macromedia Dreamweaver
สำหรับโปรแกรม Macromedia Dreamweaver เป็น โปรแกรมเขียนเว็บ
ที่ออกแบบมาเพื่อ ช่วยจัดการกับ เว็บเพจ โดยผู้ใช้ไม่จำเป็นต้องมีความรู้ ในภาษา HTML
ซึ่งเป็นภาษาสำหรับสร้างเว็บเพจ โดยตรง ดังนั้น โปรแกรม Macromedia
Dreamweaver จึงมีฟังก์ชั่นต่างๆ
มากมายซึ่งแต่ละ ฟังก์ชั่นก็จะ แสดงผลในลักษณะของ วินโดวส์ (WINDOWS) หรือแถบคำสั่ง (PALETTE) ตัวอย่างของ ฟังก์ชั่น เช่น
(BEHAVIOR) เป็น ฟังก์ชั่นสำหรับใช้ในการควบคุม
การใช้สคริปต์ต่างๆ เป็นต้น ในการที่จะเลือกใช้ฟังก์ชั่น ผู้ใช้ต้องทำความเข้าใจ
และเรียนรู้วิธีในการควบคุมการทำงาน ของฟังก์ชั่นต่างๆ ให้เข้าใจเสียก่อน
และวิธีเรียกใช้ฟังก์ชั่นต่างๆ ของโปรแกรม Macromedia Dreamweaver ก็สามารถทำได้ดังนี้ เลือกคำสั่งที่เมนูบาโดยคลิกเลือกเมนู Window ก็จะปรากฏ รายการของคำสั่งควบคุม หรือฟังก์ชั่นต่างๆ ให้เลือก
สำหรับฟังก์ชั่น ที่เป็นมาตรฐานในการ
ทำงานกับโปรแกรม Macromedia Dreamweaver ที่มีการใช้ งานบ่อยๆ ก็มีอยู่ 3 ฟังก์ชั่น ได้แก่
วิธีเช็คให้โปรแกรม Macromedia Dreamweaver เปิดขึ้นมาเป็นภาษาไทย
1.เข้าไปที่ Edit->Preferences
ดังรูป (หรือกด crl+u)
<!--[if !supportLineBreakNewLine]-->
****************************************************************************************************
****************************************************************************************************
- CSS
****************************************************************************************************
CSS คือ ชุดคำสั่งที่ใช้สำหรับการกำหนดการแสดงผลข้อมูลหน้าเว็บพจ ซึ่งคำเต็ม ๆ
ของ CSS คือ Cascading Style Sheets เป็นมาตราฐานหนึ่งของ
W3C ที่กำหนดขึ้นมา
เพื่อใช้ในการตบแต่งหน้าเอกสารเว้บเพจโดยเฉพาะ การใช้งาน CSS จะเข้ามาช่วยเพิ่มความสามารถให้กับ HTML เดิมที่เราใช้งานกันอยู่ในปัจจุบัน
ซึ่งในปัจจุบันนี้ CSS ได้มาอยู่บนมาตราฐานที่เวอร์ชั่น 2.0
(CSS2.0)
โดยในปัจจุบันเว็บไซต์ส่วนใหญ่จะนิยมใช้งาน
CSS กันเพิ่มมากขึ้น ทั้งนี้เนื่องจาก CSS มีความสามารถในการตบแต่งการแสดงผลข้อมูลหน้าเว็บเพจที่เหนือกว่า HTML
โดยปรกติอยู่มาก บางเว้บไซต์ที่เราเห็นกันใน Internet แถบจะเรียกได้ว่าใช้ CSS ล้วน ๆ ในการออกแบบ Layout
หน้าเซ้บเพจเลยทีเดียว
ยกตัวอย่างที่เว็บเพจที่ท่านกำลังอ่านบทความกันอยู่นี้ ก็ใช้ความสามารถของ CSS
ในการตบแต่งแสดงผลข้อมูล การเลย์เอาท์จัดวาง Object ต่าง ๆ บนหน้าเว็บเพจ (ให้ท่านลองทำการ View Source Code ดูได้ครับ)
ความสามารถของ CSS
ความสามารถของ CSS ถ้าจะยกตัวอย่างให้เห็นภาพกันชัด ๆ
ผมก็ขอยกตัวอย่างดังนี้แล้วกันครับ
- CSS สามารถทำให้ TEXT ที่เป็นจุด Link ไม่ให้มีการขีดเส้นใต้ได้
- CSS สามารถกำหนดการ Fix ขนาดของ Font อักษรได้ นั้นคือ เมื่อผู้เยี่ยมชมปรับขนาด Font ที่ Browser ที่ขนาดเท่าใด CSS ก็ยังคงแสดงผลขนาด Font ที่ขนาดที่เรากำหนดไว้เสมอ ส่งผลให้ทำให้เว็บเพจเราไม่เละตามขนาดของ Font ที่ผู้ใช้ปรับเปลี่ยนที่ Browser
- CSS สามารถทำการกำหนดภาพพื้นหลัง (Image Background) ให้ได้ตำแหน่งและมีรูปแบบตามที่เราต้องการได้
- CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้อย่างรวดเร็วขึ้น เนื่องจากเราสามารถปรับปรุงคุณสมบัติของการแสดงผลได้จากจุด ๆ เดียวแล้วส่งผลให้ทั้งหน้าเพจที่มีการใช้งาน CSS นั้นปรับปรุงให้เป็นไปตามที่เราแก้ไข
- CSS ทำให้เว็บเพจเราโหลดเร็วขึ้น
- อื่น ๆ อีกมากมาย...รอคุฯเรียนรู้และใช้งานจาก CSS
- CSS สามารถกำหนดการ Fix ขนาดของ Font อักษรได้ นั้นคือ เมื่อผู้เยี่ยมชมปรับขนาด Font ที่ Browser ที่ขนาดเท่าใด CSS ก็ยังคงแสดงผลขนาด Font ที่ขนาดที่เรากำหนดไว้เสมอ ส่งผลให้ทำให้เว็บเพจเราไม่เละตามขนาดของ Font ที่ผู้ใช้ปรับเปลี่ยนที่ Browser
- CSS สามารถทำการกำหนดภาพพื้นหลัง (Image Background) ให้ได้ตำแหน่งและมีรูปแบบตามที่เราต้องการได้
- CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้อย่างรวดเร็วขึ้น เนื่องจากเราสามารถปรับปรุงคุณสมบัติของการแสดงผลได้จากจุด ๆ เดียวแล้วส่งผลให้ทั้งหน้าเพจที่มีการใช้งาน CSS นั้นปรับปรุงให้เป็นไปตามที่เราแก้ไข
- CSS ทำให้เว็บเพจเราโหลดเร็วขึ้น
- อื่น ๆ อีกมากมาย...รอคุฯเรียนรู้และใช้งานจาก CSS
จะใช้งาน CSS ได้อย่างไร ?
เนื่องจาก CSS จะทำงานร่วมกับ HTML เป็นหลัก
ดังนั้นเราจึงสามารถพิมพ์โค้ดของ CSS แทรกไปยังโค้ดของ HTML
ได้ (แต่ยังมีรูปแบบอื่นอีก ไว้จะแนะนำกันต่อไปกับบทความอื่น ๆ นะ)
เช่น
รูปแบบไวยากรณ์ของ CSS เบื้องต้น
CSS ไม่ว่าคุณจะเขียนด้วยรูปแบบใดก็ตาม
ต้องยึดหลักไวยากรณ์ของรูปแบบภาษา ตามที่จะได้อธิบายในบทความนี้เหมือน ๆ กัน
นั้นคือ
1. CSS จะประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ TAG Html ใน CSS จะเรียกว่า
Selector ที่ใช้สำหรับการอ้างถึง
2. มีชื่อ Properties หรือชื่อคุณสมบัติ และตามด้วย Value เพื่อกำหนดค่าให้แก่คุณสมบัตินั้น และระหว่างชื่อ Properties กับ Value
จะถูกคั่นด้วยเครื่องหมาย colon ( properties:value )
3. คุณสมบัติภายใน 1 คลาส
จะมีได้มากกว่า 1 ตามที่เรากำหนด และ properties ในแต่ละ properties จะถูกคั่นด้วยเครื่องหมาย semi-colon
( ; )
4. ต้องเขียนคุณสมบัติของ CSS นั้นไว้ภายในเครื่องหมายปีกกา { .... } เท่านั้น
จากรูปตัวอย่างการเขียน CSS โดยการกำหนดชื่อ Class
จากตัวอย่างเป็นการประกาศ Class ชื่อว่า font18red โดยหลักการของการตั้งชื่อ Class มีหลักการดังนี้
1. ชื่อ Class ต้องนำหน้าด้วยเครื่องหมาย dot หรือ จุด ( . )
2. ชื่อ Class ห้ามขึ้นต้นด้วยตัวเลข เช่น เขียน 18fontred
แบบนี้ไม่ได้
3. ชื่อ Class ห้ามมีการเว้นวรรค เช่น จะเขียนเป็น font 18red แบบนี้ไม่ได้
4. ชื่อ Class ห้ามเป็นภาษาไทย (ไม่มีใครเข้าตั้งชื่อแบบนี้กัน)
****************************************************************************************************
- Dreamweaver
****************************************************************************************************
Dreamweaver คือโปรแกรมสร้างเว็บเพจแบบเสมือนจริง
ของค่าย Adobe ซึ่งช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา
HTML หรือโค๊ดโปรแกรม เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG
" โปรแกรม Dreamweaver มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ
รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ
ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ
โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน Dreamweaver มีทั้งในระบบปฏิบัติการ แมคอินทอช และไมโครซอฟท์วินโดวส์ Dreamweaver
ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINE
ได้ เวอร์ชั่นล่าสุดของโปรแกรมตัวนีคือ Adobe Dreamweaver CS5.5
- Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 เป็นอีกโปรแกรมหนึ่ง
ที่มีการออกแบบ มาเพื่อที่จะใช้ในการจัดการกับเอกสารที่ใช้สำหรับ การสร้างเว็บเพจ ซึ่งในสมัยก่อนหากจะมี การสร้างเว็บเพจ
ขึ้นแต่ละเว็บเพจนั้น ต้องให้ผู้ที่มีความรู้ในภาษา HTML มาเขียนรหัสคำสั่ง
(Code ให้ แต่ในปัจจุบัน โปรแกรม Macromedia
Dreamweaver 8
สามารถที่จะสร้างรหัสคำสั่งให้กับผู้ใช้โดยอัตโนมัติ ซึ่งผู้ใช้ไม่จำเป็นต้องมีความรู้ด้านของภาษา HTML
เนื่องจากโปรแกรม Macromedia Dreamweaver 8
นั้นจะมีลักษณะ การทำงานที่คล้ายๆ
กับโปรแกรมพิมพ์เอกสารที่เราเคยใช้และรู้จักกันดี
ซึ่งจะมีเครื่องมือและแถบคำสั่งให้เราเลือกใช้ได้ เหมือนกับ Word
Processor จึงช่วยให้สามารถเว็บเพจด้วยความสะดวก
และรวดเร็ว
จุดเด่นของโปรแกรม Macromedia
Dreamweaver 8
1.โปรแกรมจะทำการแปลงรหัสให้เป็นภาษา HTML โดยอัตโนมัติดังนั้น ผู้ใช้ที่ไม่มีความรู้
ด้านนี้สามารถทำได้
2. มีแถบเครื่องมือ หรือแถบคำสั่ง
ที่ใช้ในการควบคุมการทำงาน แบ่งออกเป็นหมวดหมู่จึงช่วยในการทำงานที่ดีขึ้น
และรวดเร็วยิ่งขึ้น
3.
สนับสนุนเว็บเพจที่เป็นภาษาไทยได้ดี
4.
มีคุณสมบัติที่สามารถจัดการกับรูปภาพเคลื่อนไหว โดยไม่ต้องอาศัย Plugin
5. สามารถเรียกใช้ตารางจากภายนอก
โดยการอิมพอร์ทจาก Text File
6.
เป็นโปรแกรมที่สามารถสนับสนุนการใช้งาน CSS (Cadcading
Style Sheet)
7. มีความสามารถในการทำ Drop Down Menu รวมไปถึงการทำให้รูปภาพเปลี่ยนเมื่อนำเมาส์ไปชี้ เป็นต้น
ความสามารถของ Macromedia Dreamweaver 8
- สร้างเว็บเพจภาษาไทย
-
รู้จักฟังก์ชั่นต่าง ๆ ของ Macromedia
Dreamweaver
การกำหนดค่าเพื่อใช้ในการสร้างเว็บเพจภาษาไทย
โปรแกรม Macromedia Dreamweaver 8 มีการเขียนขึ้นมา
เพื่อความสะดวกสบาย ในการสร้างเว็บเพจ เนื่องจากมีวิธีการใช้ที่เหมือนกับ โปรแกรม Microsoft
Office มีเมนูต่างๆ ให้ผู้ใช้เลือกใช้จากนั้น
โปรแกรมจะทำการแปลงให้เป็น ภาษา HTML ซึ่งเป็นภาษาในการเขียนเว็บเพจ
ให้เองโดยอัตโนมัติ
โปรแกรม Macromedia Dreamweaver 8 นั้นถูกออกแบบมา ให้ใช้ได้กับเว็บเพจทุกภาษา
และสามารถที่จะเลือกใช้ฟอนต์ ได้ตามที่มีในระบบปฏิบัติการ ซึ่ง โปรแกรม Macromedia
Dreamweaver 8
จะมีวิธีในการเข้ารหัสที่เป็นตัวอักษรแบบมาตรฐานเท่านั้น คือ (Unicode) ซึ่งจะทำให้มีความสะดวกสบายยิ่งขึ้น
ที่ไม่ต้องติดตั้งโปรแกรมเพิ่มเติมเหมือนกับเวอร์ชั่นเก่าๆ
แต่ในการที่จะใช้กับภาษาอะไร ต้องมีการกำหนดรหัส (Encoding) ให้กับโปรแกรมด้วยเพื่อที่จะได้ไม่มีปัญหาเกิดขึ้นภายหลัง
เนื่องจากภาษาไทยนั้น มีตัวอักษร
ที่ค่อนข้างจะละเอียดอ่อนมาก จึงทำให้เกิดปัญหาบางครั้ง จะอ่านภาษาไทยไม่ได้
ดังนั้น ก่อนที่จะ ลงมือในการสร้างเว็บเพจ ด้วยโปรแกรม Macromedia Dreamweaver 8 นั้นต้องมีการกำหนดรหัส (Encoding)
เพื่อให้เว็บเพจนั้นสามารถอ่าน ภาษาไทยได้ ซึ่งมีวิธี
ในการที่จะกำหนดเพื่อให้ Macromedia Dreamweaver 8
อ่านภาษาไทยได้ดังนี้
·
เลือกคำสั่งที่เมนูบาโดยเลือก Modify จากนั้นเลือก
Page Properties (หรือสามารถเลือกได้ที่ปุ่ม Page
Properties ที่อยู่บนพาแนล Properties Inspector)
·
จากนั้นให้เลือกที่หมวดของ Title/Encoding
·
ในช่อง Encoding นั้นให้เลือกที่ Thai (Windows)
·
จากนั้นคลิก OK
รู้จักฟังก์ชั่นต่าง ๆ ของ Macromedia Dreamweaver
สำหรับโปรแกรม Macromedia Dreamweaver เป็น โปรแกรมเขียนเว็บ
ที่ออกแบบมาเพื่อ ช่วยจัดการกับ เว็บเพจ โดยผู้ใช้ไม่จำเป็นต้องมีความรู้ ในภาษา HTML
ซึ่งเป็นภาษาสำหรับสร้างเว็บเพจ โดยตรง ดังนั้น โปรแกรม Macromedia
Dreamweaver จึงมีฟังก์ชั่นต่างๆ
มากมายซึ่งแต่ละ ฟังก์ชั่นก็จะ แสดงผลในลักษณะของ วินโดวส์ (WINDOWS) หรือแถบคำสั่ง (PALETTE) ตัวอย่างของ ฟังก์ชั่น เช่น
(BEHAVIOR) เป็น ฟังก์ชั่นสำหรับใช้ในการควบคุม
การใช้สคริปต์ต่างๆ เป็นต้น ในการที่จะเลือกใช้ฟังก์ชั่น ผู้ใช้ต้องทำความเข้าใจ
และเรียนรู้วิธีในการควบคุมการทำงาน ของฟังก์ชั่นต่างๆ ให้เข้าใจเสียก่อน
และวิธีเรียกใช้ฟังก์ชั่นต่างๆ ของโปรแกรม Macromedia Dreamweaver ก็สามารถทำได้ดังนี้ เลือกคำสั่งที่เมนูบาโดยคลิกเลือกเมนู Window ก็จะปรากฏ รายการของคำสั่งควบคุม หรือฟังก์ชั่นต่างๆ ให้เลือก
สำหรับฟังก์ชั่น ที่เป็นมาตรฐานในการ
ทำงานกับโปรแกรม Macromedia Dreamweaver ที่มีการใช้ งานบ่อยๆ ก็มีอยู่ 3 ฟังก์ชั่น ได้แก่
·
ฟังก์ชั่น Insert จะเป็นฟังก์ชั่นที่ใช้สำหรับควบคุมเกี่ยวกับวัตถุต่างๆ
เช่น เลเยอร์, รูปภาพ ซึ่งแถบเครื่องมือนี้จะประกอบไปด้วย
ชุดเครื่องมือต่างๆ คือ Characters , Common, Form, Frames, head,
Invisible
·
ฟังก์ชั่น Properties เป็นฟังก์ชั่นลักษณะต่างๆ
เช่น ใช้ในการกำหนดค่าของข้อความในเว็บ สีของตัวหนังสือ รูปภาพ ตาราง เป็นต้น
· ฟังก์ชั่น Launcher เป็นฟังก์ชั่นสำหรับใช้ในการจัดการหรือควบคุมในส่วนของ สคริปต์ (Behaviors)
วิธีเช็คให้โปรแกรม Macromedia Dreamweaver เปิดขึ้นมาเป็นภาษาไทย
1.เข้าไปที่ Edit->Preferences
ดังรูป (หรือกด crl+u)
<!--[if !supportLineBreakNewLine]-->
<!--[if !supportLineBreakNewLine]-->
คำสั่งพื้นฐานที่ควรทราบในการเริ่มสร้างเว็บเพจ
การกำหนดตำแหน่งที่เก็บเว็บไซต์
คำสั่งในการสร้าง เปิด บันทึกเว็บไซต์ ฯลฯส่วนบนของฟอร์ม
การเริ่มใช้งานโปรแกรม Dreamweaver 8
เมื่อเข้าสู่โปรแกรม Dreamweaver 8 จะปรากฏกรอบ Workspace Setup ดังรูป ให้คลิกเลือก Designer แล้วคลิก OK เพื่อเข้าสู่หน้าจอการออกแบบของโปรแกรม Macromedia Dreamweaver 8
จากนั้นจะปรากฎหน้าจอ Start Page ซึ่งเป็นเครื่องมือสำหรับเริ่มต้นการทำงาน
โดยตัวเลือกจะแบ่งเป็น 3 กลุ่มดังรูป
สำหรับการสร้างเว็บเพจเปล่าแบบพื้นฐาน ให้เลือกกลุ่ม Create New แล้วคลิกที่ HTML
ส่วนประกอบของโปรแกรม Dreamweaver 8
<!--[if !supportLists]-->· <!--[endif]-->แถบชื่อเรื่อง (Title
Bar) แสดงชื่อแฟ้มข้อมูลที่กำลังใช้งานอยู่
<!--[if !supportLists]-->· <!--[endif]-->แถบคำสั่ง (Menu
Bar) เป็นส่วนที่เก็บคำสั่งต่าง ๆ ที่ใช้งานในโปรแกรม Dreamweaver
8
<!--[if !supportLists]-->· แถบ Document
Tool Bar เป็นส่วนที่ใช้ในการจัดการกับเว็บเพจ ณ ขณะนั้น เช่นการเปลี่ยนมุมมองในการดูหน้าเว็บเพจ
<!--[if !supportLists]-->· <!--[endif]-->แถบ Insert
Bar เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่าง ๆ ในเว็บเพจ ซึ่งประกอบด้วยชุดเครื่องมือ 8 ชุดด้วยกัน
<!--[if !supportLists]-->· <!--[endif]-->พื้นที่ออกแบบ (Document
Window) เป็นส่วนที่ใช้สำหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ โดยประกอบด้วยมุมมองการทำงาน 3 รูปแบบด้วยกันคือ Design,
Code และ Code and Design
<!--[if !supportLists]-->· แถบสถานะ (Status
Bar) เป็นส่วนที่แสดงสถานะของการใช้งานโปรแกรม ณ ขณะนั้น หน้าต่าง Properties
เป็นส่วนของคำสั่งที่ใช้ในการกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ
ที่เราต้องการเปลี่ยนแปลงหรือตกแต่ง
<!--[if !supportLists]-->· <!--[endif]-->Panel Group
เป็นกลุ่มของแผงควบคุม ที่ใช้แทนคำสั่งและติดต่อกับฐานข้อมูล
****************************************************************************************************
****************************************************************************************************
- Java Script
จาวาสคริปต์ เป็นภาษาสำหรับการเขียนโปรแกรมบนเว็บเพจ ที่ช่วยเพิ่มความเป็นกลวัตร
(Dynamic) ให้กับเว็บไซต์ ดังนั้นผู้ที่สนใจด้านการพัฒนาเว็บไซต์ควรมีความรู้ด้านการเขียนโปรแกรมด้วยจาวาสคริปต์ในระดับดี
****************************************************************************************************
จาวาสคริปต์ เป็นภาษาสำหรับการเขียนโปรแกรมบนเว็บเพจ ที่ช่วยเพิ่มความเป็นกลวัตร
(Dynamic) ให้กับเว็บไซต์ ดังนั้นผู้ที่สนใจด้านการพัฒนาเว็บไซต์ควรมีความรู้ด้านการเขียนโปรแกรมด้วยจาวาสคริปต์ในระดับดี
1. จาวาสคริปต์
จาวาสคริปต์ (Java Script) คือภาษาสำหรับการเขียนโปรแกรมบนเว็บที่ช่วยเพิ่มความเป็น
Interactive ให้กับเว็บไซต์ ลักษณะที่สำคัญของจาวาสคริปต์
มีดังนี้
1.1 เป็นภาษาประเภท Scripting Language
1.2 ไม่ต้องอาศัยความรู้ในการเขียนโปรแกรมในระดับสูงนัก
1.3 การใช้งานจาวาสคริปต์จะใช้ในลักษณะการฝัง (embedded)
ชุดคำสั่ง หรือโค้ดไว้ในหน้าเว็บ
1.4 จาวาสคริปต์จะช่วยในส่วนของความเป็น Interactive
ต่อผู้ใช้
1.5 เป็นภาษาที่ทำงานโดยอาศัยการแปลคำสั่ง (Interpret)
ดังนั้นจึงไม่ต้องทำการคอมไพล์ (Compile) ชุดคำสั่งแต่อย่างใด
1.6 ทำงานที่ฝั่งไคลเอนต์ (Client Side)
1.7 นักพัฒนาสามารถใช้ JavaScript ได้ โดยไม่ต้องเสียค่าลิขสิทธิ์ (License)
2. พื้นฐานที่สำคัญสำหรับการเขียนจาวาสคริปต์
ในการศึกษา
และโปรแกรมจาวาสคริปต์เพื่อใช้ในเว็บเพจนั้น ผู้ศึกษาควรมีพื้นฐานในด้านต่อไปนี้
1.พื้นฐานภาษา HTML
2.พื้นฐานภาษา XHTML
3.พื้นฐานภาษา DHTML
3. ความแตกต่างระหว่างจาวาสคริปต์กับจาวา
คำถามที่มักจะพบอยู่เสมอก็คือ
จาวาสคริปต์แตกต่างจากภาษาจาวา (JAVA) อย่างไร ซึ่งสามารถอธิบายความแตกต่างได้ดังนี้
1.ภาษาจาวา (Java) ใช้เพื่อพัฒนาโปรแกรมประเภท
Stand-Alone และ Client-Server
2. ภาษาจาวาสคริปต์ (Java Script) ใช้เพื่อพัฒนาส่วนที่เป็นไดนามิคบนหน้าเว็บ (Web Page) ดังนั้นจึงต้องทำงานผ่านโปรแกรมเว็บบราวเซอร์ (Web Browser) เช่น Microsoft Internet Explorer หรือ Mozilla
FireFox
4. รูปแบบการใช้งานจาวาสคริปต์
ก่อนจะเขียนชุดคำสั่งด้วยจาวาสคริปต์
ผู้เขียนควรมีความรู้และความเข้าใจว่าจาวาสคริปต์นั้น
สามารถนำไปประยุกต์ใช้ในลักษณะใดได้ ตามรายละเอียดต่อไปนี้
1.การใช้งานจาวาสคริปต์ในลักษณะเครื่องมือของนักออกแบบเว็บไซต์
หรืออาจกล่าวได้ว่าจาวาสคริปต์เป็น Design Tools ที่สำคัญตัวหนึ่ง
2.ใช้เพื่อแสดง Dynamic Text บนหน้า HTML Page
3.ใช้ในกรณีที่ต้องการให้มีการโต้ตอบ (React)
กับเหตุการณ์ (Event) ที่เกิดขึ้น
หรือเหตุการณ์ที่ทำกับหน้าเพจดังกล่าว
4. ใช้ในการอ่าน (Read) และเขียน (Write) HTML Elements
5.ใช้เพื่อการตรวจสอบความถูกต้องของข้อมูลที่รับเข้ามา (Validate)
6.ใช้เพื่อการตรวจสอบบราวเซอร์ของผู้ใช้
7.ใช้ในการสร้างคุกกี้ (Cookies)
5. การสร้างจาวาสคริปต์
การสร้างจาวาสคริปต์
สามารถกระทำได้เช่นเดียวกับสคริปต์ภาษาอื่นๆ โดยอาศัยโปรแกรมสำหรับแก้ไขข้อความ (Text Editor) ที่นักพัฒนามีอยู่
6. โครงสร้างของชุดคำสั่งจาวาสคริปต์
ชุดคำสั่งจาวาสคริปต์ที่เขียนขึ้น
สามารถนำไปใช้ได้กับเว็บเพจที่สร้างขึ้นในหลายๆ ภาษาได้ทั้งเว็บเพจภาษา HTML , PHP หรือ ASP โดยเขียนในลักษณะของการฝังชุดคำสั่ง
(eMbedded Code) ลงไป
สำหรับโครงสร้างการแทรกชุดคำสั่งจาวาสคริปต์ลงในแต่ละเพจ
จะมีรูปแบบดังนี้
7. การใช้จาวาสคริปต์เพื่อแสดงข้อความ
1 <html>
7. การใช้จาวาสคริปต์เพื่อแสดงข้อความ
1 <html>
2 <head>
3 <title>if else :: step-juce.blogspot.com </title>
4 <script language="JavaScript">
5 function displayText()
6 {
7 document.getElementById("showText").innerHTML = "HELLO";
8 }
9 </script>
10 </head>
11 <body onload="displayText()">
12 <hr />
13 <div id="showText" ></div>
14 <hr />
15 </body>
16 </html>
17
อธิบายโปรแกรม
- บรรทัดที่ 4-9 มี function ที่ชื่อว่า displayText() ซึ่งเป็น
ฟังก์ชั่นไว้สำหรับแสดงข้อความว่า HELLO ออกมา
ตอนนี้ให้เรามาดูที่บรรทัดที่ 7 document.getElementById("showText").innerHTML = "HELLO";
นี้คือรูปแบบหนึ่งของ DOM(Docment Object Model) เป็นข้อกำหนดซึ่งทำให้เข้าถึง
Element ต่างๆในเอกสาร HTML เราสามารถเข้าถึง Element เพื่ออ่าน หรือแก้ไขข้อความ
ของมันได้ เช่นถ้าต้องการเข้าถึง Element div ซึ่งมี ID คือ showText จะเขียนโค้ดดังนี้
objDiv = document.getElementById("showText");
เมื่อต้องการเขียนข้อความลงไปภายใน Tag div ก็ให้กำหนดค่าให้กำพร็อพเพอร์ตี้ innerHTML แบบนี้
objDiv = document.getElementById("showText");
objDiv.innerHTML = "HELLO";
หรือ จะเขียนสั้นๆ แบบนี้ก็ได้
document.getElementById("showText").innerHTML = "HELLO";
ต่อไปบรรทัดที่ 11
<body onload="displayText()">
ดูที่ Atrribute onload คือ Event ที่จะทำงานก็ต่อเมื่อ
มีการเรียกใช้หน้าเว็บเพจ onload="displayText()" จึงเป็นการเรียกใช้
function displayText() ให้ทำงาน ซึ่งก็คือ ฟังก์ชั่นสำหรับแสดงข้อควาาม
***********************************************************************************************
***********************************************************************************************
- j Query
***********************************************************************************************
jQuery คือ JavaScript
Library ซึ่งถูกออกแบบมาเพื่อให้การเขียน JavaScript นั้นง่ายขึ้น เนื่องจากการใช้ JavaScript เพื่อประยุกต์กับงานเว็บ
(Client-side JavaScript) นั้นสิที่ยุ่งยาก อาทิเช่น
ความไม่เข้ากันของเว็บเบราว์เซอร์แต่ละค่าย, DOM ,API เป็นต้น
jQuery จึงถือกำเนิดมาโดยเตรียมฟังก์ชันและออบเจกต์ต่างๆที่จำเป็นไว้ให้ในรูปของ
Library ดังนั้นโค้ดที่เราเคยต้องเขียนด้วย JavaScript
หลายๆบรรทัดก็อาจเขียนได้สั้นลงเหลือเพียงแค่บรรทัดเดียวเท่านั้น
ก่อนที่จะเริ่มต้นเรียน jQuery นั้นผู้เรียนจำเป็นต้องมีความรู้เรื่อง ,HTML5 , CSS3 , JavaScript เพื่อให้สามารถทำเข้าใจเกี่ยวกับ
jQuery ได้ง่าย
*********************************************************************************************************
คณะผู้จัดทำ กลุ่มที่1
1.นางสาวคริมา จันทร์พุ่ม 56234003
2.นายกชกรณ์ ศรีชื่น 56234015
3.นายณรงค์เดช ทัศเกตุ 56234022
4.นายทวีศักดิ์ เมืองซื่อ 56234024
5.นายธนวันต์ พินิจจันทร์ 56234028
6.นายธิติภัทร แสนเจริญ 56234031
7.นายศุภลักษณ์ โนพี 56234051
8.นายอรรถวุฒิ โตแก้ว 56234060
2 <head>
3 <title>if else :: step-juce.blogspot.com </title>
4 <script language="JavaScript">
5 function displayText()
6 {
7 document.getElementById("showText").innerHTML = "HELLO";
8 }
9 </script>
10 </head>
11 <body onload="displayText()">
12 <hr />
13 <div id="showText" ></div>
14 <hr />
15 </body>
16 </html>
17
3 <title>if else :: step-juce.blogspot.com </title>
4 <script language="JavaScript">
5 function displayText()
6 {
7 document.getElementById("showText").innerHTML = "HELLO";
8 }
9 </script>
10 </head>
11 <body onload="displayText()">
12 <hr />
13 <div id="showText" ></div>
14 <hr />
15 </body>
16 </html>
17
อธิบายโปรแกรม
- บรรทัดที่ 4-9 มี function ที่ชื่อว่า displayText() ซึ่งเป็น
ฟังก์ชั่นไว้สำหรับแสดงข้อความว่า HELLO ออกมา
ตอนนี้ให้เรามาดูที่บรรทัดที่ 7 document.getElementById("showText").innerHTML = "HELLO";
นี้คือรูปแบบหนึ่งของ DOM(Docment Object Model) เป็นข้อกำหนดซึ่งทำให้เข้าถึง
Element ต่างๆในเอกสาร HTML เราสามารถเข้าถึง Element เพื่ออ่าน หรือแก้ไขข้อความ
ของมันได้ เช่นถ้าต้องการเข้าถึง Element div ซึ่งมี ID คือ showText จะเขียนโค้ดดังนี้
objDiv = document.getElementById("showText");
เมื่อต้องการเขียนข้อความลงไปภายใน Tag div ก็ให้กำหนดค่าให้กำพร็อพเพอร์ตี้ innerHTML แบบนี้
objDiv = document.getElementById("showText");
objDiv.innerHTML = "HELLO";
หรือ จะเขียนสั้นๆ แบบนี้ก็ได้
document.getElementById("showText").innerHTML = "HELLO";
ต่อไปบรรทัดที่ 11
<body onload="displayText()">
ดูที่ Atrribute onload คือ Event ที่จะทำงานก็ต่อเมื่อ
มีการเรียกใช้หน้าเว็บเพจ onload="displayText()" จึงเป็นการเรียกใช้
function displayText() ให้ทำงาน ซึ่งก็คือ ฟังก์ชั่นสำหรับแสดงข้อควาาม
- บรรทัดที่ 4-9 มี function ที่ชื่อว่า displayText() ซึ่งเป็น
ฟังก์ชั่นไว้สำหรับแสดงข้อความว่า HELLO ออกมา
ตอนนี้ให้เรามาดูที่บรรทัดที่ 7 document.getElementById("showText").innerHTML = "HELLO";
นี้คือรูปแบบหนึ่งของ DOM(Docment Object Model) เป็นข้อกำหนดซึ่งทำให้เข้าถึง
Element ต่างๆในเอกสาร HTML เราสามารถเข้าถึง Element เพื่ออ่าน หรือแก้ไขข้อความ
ของมันได้ เช่นถ้าต้องการเข้าถึง Element div ซึ่งมี ID คือ showText จะเขียนโค้ดดังนี้
objDiv = document.getElementById("showText");
เมื่อต้องการเขียนข้อความลงไปภายใน Tag div ก็ให้กำหนดค่าให้กำพร็อพเพอร์ตี้ innerHTML แบบนี้
objDiv = document.getElementById("showText");
objDiv.innerHTML = "HELLO";
หรือ จะเขียนสั้นๆ แบบนี้ก็ได้
document.getElementById("showText").innerHTML = "HELLO";
ต่อไปบรรทัดที่ 11
<body onload="displayText()">
ดูที่ Atrribute onload คือ Event ที่จะทำงานก็ต่อเมื่อ
มีการเรียกใช้หน้าเว็บเพจ onload="displayText()" จึงเป็นการเรียกใช้
function displayText() ให้ทำงาน ซึ่งก็คือ ฟังก์ชั่นสำหรับแสดงข้อควาาม
***********************************************************************************************
***********************************************************************************************
- j Query
***********************************************************************************************
jQuery คือ JavaScript
Library ซึ่งถูกออกแบบมาเพื่อให้การเขียน JavaScript นั้นง่ายขึ้น เนื่องจากการใช้ JavaScript เพื่อประยุกต์กับงานเว็บ
(Client-side JavaScript) นั้นสิที่ยุ่งยาก อาทิเช่น
ความไม่เข้ากันของเว็บเบราว์เซอร์แต่ละค่าย, DOM ,API เป็นต้น
jQuery จึงถือกำเนิดมาโดยเตรียมฟังก์ชันและออบเจกต์ต่างๆที่จำเป็นไว้ให้ในรูปของ
Library ดังนั้นโค้ดที่เราเคยต้องเขียนด้วย JavaScript
หลายๆบรรทัดก็อาจเขียนได้สั้นลงเหลือเพียงแค่บรรทัดเดียวเท่านั้น
jQuery ประกอบด้วยฟีเจอร์ต่างๆ ดังนี้
-HTML/DOM manipulation
-CSS manipulation
-HTML event methods
-Effects and animations
-AJAX
-Utilities
ก่อนที่จะเริ่มต้นเรียน jQuery นั้นผู้เรียนจำเป็นต้องมีความรู้เรื่อง ,HTML5 , CSS3 , JavaScript เพื่อให้สามารถทำเข้าใจเกี่ยวกับ
jQuery ได้ง่าย
ในเว็บไซต์จะมีให้ดาวน์โหลดสองรูปแบบย่อยด้วยกันคือ
แบบ Production และแบบ Development ซึ่งแบบ
Development เหมาะสำหรับการเอาซอร์สโค้ดมาดัดแปลงแก้ไขหรือศึกษาทำความเข้าใจ
ในขณะที่แบบ Production เหมาะกับการนำไปใช้งานจริง
เพราะได้ตัดช่องว่างและปรับเปลี่ยนตัวแปรภายในให้สั้นลง เพื่อลดขนาดของไฟล์ลง
ก็ให้เลือกเอาตามความต้องการใช้งาน (หากคลิกดาวน์โหลดแล้วมันเปิดขึ้นมาเป็นข้อความก็อย่าได้ตกใจไป
เพราะมันคือไฟล์ .js เหมือน JavaScript ทั่วไป และเบราว์เซอร์ของคุณอาจมองว่ามันเป็น Text ชนิดหนึ่ง
ก็ให้เซฟเว็บเพจนั้นซะ)
เมื่อเราได้ไฟล์ jquery-x.y.z.js หรือ jquery-x.y.z.min.js แล้ว ลำดับถัดไปก็คือการอ้างอิงใช้มันในไฟล์ HTML ซึ่งก็จะเหมือนกับการอ้างอิงใช้งานไฟล์
JavaScript ทั่วไป
*********************************************************************************************************
คณะผู้จัดทำ กลุ่มที่1
1.นางสาวคริมา จันทร์พุ่ม 56234003
2.นายกชกรณ์ ศรีชื่น 56234015
3.นายณรงค์เดช ทัศเกตุ 56234022
4.นายทวีศักดิ์ เมืองซื่อ 56234024
5.นายธนวันต์ พินิจจันทร์ 56234028
6.นายธิติภัทร แสนเจริญ 56234031
7.นายศุภลักษณ์ โนพี 56234051
8.นายอรรถวุฒิ โตแก้ว 56234060
*********************************************************************************************************
คณะผู้จัดทำ กลุ่มที่1
1.นางสาวคริมา จันทร์พุ่ม 56234003
2.นายกชกรณ์ ศรีชื่น 56234015
3.นายณรงค์เดช ทัศเกตุ 56234022
4.นายทวีศักดิ์ เมืองซื่อ 56234024
5.นายธนวันต์ พินิจจันทร์ 56234028
6.นายธิติภัทร แสนเจริญ 56234031
7.นายศุภลักษณ์ โนพี 56234051
8.นายอรรถวุฒิ โตแก้ว 56234060
เกร็ดความรู้คร๊าฟฟฟฟฟฟ
ตอบลบ^__________________^