html + javascript + css

วันนี้จะมาเล่าถึงความรู้พื้นฐานเกี่ยวกับเรื่อง web site กันดีกว่า keyword จากหัวข้อวันนี้ก็เป็นภาษาที่ใช้ในการทำเว็บทั้งสิ้น แต่มันใช้อะไรยังไง แตกต่างก้นยังไง เดี๋ยวจะเล่าให้ฟังแล้วล่ะ ^^

ก่อนอื่นถ้าพูดถึงการทำเว็บ คงจะต้องรู้จักภาษา HTML กันก่อน ต้องบอกก่อนว่า HTML ไม่ใช่ภาษาโปรแกรม(Programming Language) เพราะเป็นภาษาที่ไม่สามารถทำการคำนวณใดๆได้ สามารถใช้เป็น input,output บนหน้าเว็บได้เท่านั้น โดย HTML สามารถสร้าง textbox, combobox, radiobox, checkbox,... หรืออื่นๆได้ หรือจะพูดให้ง่ายๆก็คือ เพียงลำพัง HTML ก็สามารถทำหน้าเว็บแห้งๆสักเว็บหนึ่งได้

javascript หลายคนอาจจะสงสัยว่าทำไมถึงชื่อ javascript แล้วมันใช่ภาษา java หรือเปล่า?? คำตอบคือ ไม่ใช่และไม่มีความเกี่ยวข้องในตัวภาษาใดๆทั้งสิ้น สิ่งเดียวที่มีความสัมพันธ์กันระหว่าง javascript กับ java คือ บริษัท SUN เป็นผู้พัฒนาภาษา script ที่ช่วยในการทำเว็บไซต์ขึ้น และที่รู้กันว่า java ก็เป็นของ SUN มา น่าจะเป็นความคิดว่าถ้านึกถึงคำว่า "java" ก็ต้องนึกถึง SUN เลยเกิดเป็น javascript โดยภาษา javascript นี้เป็นภาษาที่ทำงานร่วมกับ html โดยจะสามารถทำให้จากหน้าเว็บแห้งๆที่สร้างมา เป็นหน้าเว็บที่มีส่วนติดต่อผู้ใช้ดียิ่งขึ้น สามารถตอบโต้กับผู้ใช้ได้ตามต้องการ เช่น การตรวจสอบค่าที่พิมพ์ การห้ามไม่ให้คลิก หรือแม้แต่ banner ลอยๆก็เขียนด้วย javascript ทั้งสิ้น เพราะฉะนั้น javascript คือตัวที่ควบคุมพฤติกรรมต่างๆของผู้ใช้ที่ทำบนหน้าเว็บนั่นเอง ซึ่งการทำงานลักษณะนี้เรียกว่า Dynamic HTML (DHTML)

CSS เป็นภาษาที่ช่วยในการตกแต่งหน้าเว็บ เช่น สีตัวอักษร สีพื้นหลัง ขนาดภาพ ฯลฯ หรือก็คือสิ่งที่ช่วยทำให้เว็บสวยงามขึ้นนั่นเอง นึกถึงลิงค์ที่เป็นสีน้ำเงินขีดเส้นใต้ เมื่อเคยคลิกแล้วจะเป็นสีม่วง อันนี้คือการที่ใส่ลิงค์ใน html ปกติ ถ้าต้องการกำหนดสีเองก็สามารถทำได้ด้วย CSS นี่แหละครับ

การทำให้ HTML ของเรารู้จัก file .js และ .css นะครับ

<!-- import javascript -->
<script src="[ชื่อไฟล์].js" type="text/javascript"></script>
<!-- import css -->
<link href="[ชื่อไฟล์].css" rel="stylesheet" type="text/css" />

ลองมาดูตัวอย่างโค้ด Javascript กันนะครับ (โค้ดนี้เปลี่ยน text ที่มี id="demo" เป็น Date ครับ)

function displayDate()
{
     document.getElementById("demo").innerHTML=Date();
}

ตัวอย่าง CSS ครับ (ลองดูคร่าวาๆน่าจะรู้นะครับว่า css ตัวอย่างนี้ทำอะไร ^^)

.orangeText
{
     color:orange;
}