วันพุธที่ 20 กุมภาพันธ์ พ.ศ. 2562

บทที่5 พื้นฐานภาษา htmt5, CSSและJavaScript

เนื้อหาสาระ
            การออกแบบและพัฒนาเว็บไซต์หลังจากออกแบบเริ่มต้นด้วยการออกแบบโครงสร้างเว็บไซต์การตกแต่งตัวอักษร รูปภาพ ตลอดจนเนื้อหาสาระที่ต้องที่ต้องการนำมาออกแบบในเว็บไซต์แล้ว สิ่งหนึ่งที่เป็นส่วนสำคัญยิ่งเพื่อให้เว็บเพจที่พัฒนาเกิดความสมบูรณ์คือการเขียนคำสั่งควบคุมเพื่อทำให้เว็บไซต์ทำงานรวดเร็วขึ้น

5.1 ความรู้พื้นฐาน ภาษาHTML5

ภาษาHTMLคือภาษาพื้นฐานที่ใช้ในการสร้างและพัฒนาเว็บไซต์ เป็นต้นกำเนิดของเว็บไซต์ .ซึ่งปัจจุบันเทคโนโลยีได้พัฒนาไปอย่างรวดเร็ว และมีการพัฒนาภาษา HTML4  ให้กลายเป็น HTML5 เพื่อตอบสนองความต้องการของผู้ใช้งานมากขึ้น เช่น การตรวจสอบ        Text Field ประต่างๆ ได้แก่ตรวจสอบอีเมล จรวจสอบตัวเลข ตัวเลือกสี ตัวเลือกวันเดือนปี เป็นต้น
            ภาษา HTML5หรือเรียกว่า HTMLเวอชั่น5เป็นภาษาที่ถูกพัฒนาขึ้นเพื่ออำนวยความสะดวกให้กับผู้พัฒนาเว็บไซต์ในด้านเวลาและด้านอื่นๆเช่นผุ้พัฒนาเว็บไซต์ไม่จำเป็นต้องเขียนคำสั่งตรวจสอบความถูกต้องของการกรอกนั้นเป็นอีเมล

โครงสร้างพื้นของของ HTML5

รูปภาพโครงสร้างพื้นฐาน HTML5

แท็ก <!doctype>

แท็ก <!doctype> ใช้ในการประกาศชนิดของเว็บเพจ เพื่อให้เว็บเบราเซอร์ได้รู้ และวิธีการประมวลผลสำหรับหน้าเว็บเพจนั้น ได้อย่างถูกต้อง ทั้งนี้ข้อกำหนดในประกาศ doctype ในการ HTML5 นั้นจะแตกต่างไปจาก HTML ก่อนหน้านั้น โดย doctype เป็นรูปแบบสัั้นและง่าย 
<!doctype html>
ข้อควรรู้เพิ่มเติม 
  • วางแท็ก <!doctype> บนสุดของหน้าเว็บเพจนั้นๆ ก่อนส่วนอื่นๆ เสมอๆ เพื่อให้เว็บเบราเซอร์ได้รู้ก่อนการประมวล เพื่อการแสดงผลที่ดีตรงตามประเภทนั้น ได้อย่างเหมาะสมและมีประสิทธิภาพ
  • แท็ก <!doctype> ไม่ได้เป็นส่วนหนึ่งของแท็ก HTML แต่อย่างใด
  • แท็ก <!doctype> เป็นแท็กประเภท แท็กเดี่ยว (Single Tag) สามารถเขียนด้วยอักษรตัวพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้

 แท็ก <html>

แท็ก <html> ใช้ในการกำหนดจุดเริ่มต้นของเว็บเพจ HTML ในขณะที่แท็กปิดคือ </html> เป็นการกำหนดจุดสิ้นสุด แท็ก <html> โดยองค์ประกอบต่างๆ จะอยู่ในภายใน <html> .... </html> 

แท็ก <head>

แท็ก <head> ใช้ในการกำหนดข้อมูลส่วนหัวของเอกสาร หรือก่อนที่จะเริ่มเนื้อหาของเว็บเพจ เป็นส่วนที่ประกอบไปด้วย แท็ก <title></title>, <meta> , <link> หรือแม้แต่ css style javascript ต่าง ๆ ไว้ในส่วนนี้ด้วย
  • ตามข้อกำหนดของ W3C ภายในอิลิเมนต์ head จะต้องมี อิลิเมนต์ title เป็นองค์ประกอบเสมอ เนื่องจากเป็นการกำหนดชื่อเพจ และเป็นองค์ประกอบที่เราจะต้องกำหนดอยู่เสมอ
  • ข้อมูลทั้งหมดในส่วนของ <head> นั้นจะไม่แสดงผลทางเบราเซอร์ นอกจาก title เท่านั้นที่จะแสดง

แท็ก <body> 

แท็ก <body> เป็นส่วนที่ใช้กำหนดเนื้อหาทั้งหมดของหน้าเว็บเพจ ดังนั้น ต้องมีส่วนนี้อยู่เสมอโดยต้องกำหนดต่อจาก <head> โดยเริ่มวางที่ตำแหน่งหลัง </head> เสมอ เช่น
การวางตำแหน่งแท็ก body
ใน HTML ก่อนหน้านี้ แท็ก <body> จะมีแอตทริบิวต์หลายอัน ซึ่งส่วนใหญ่จะใช้ในการกำหนดรูปบบเนื้อหาของเว็บเพจ เช่น text, vlink, alink, bgcolor เป็นต้น แต่ใน HTML5 ได้ยกเลิกแอตทริบิวต์ทั้งหมดแล้ว  โดยให้กำหนดในรูปแบบผ่าน css แทน แต่เว็บเบราเซอร์ก็ยังคงรองรับแอตทริบิวต์เหล่านี้อยู่

5.2ความรู้พื้นฐานภาษา CSS

CSS คือเทคโนโลยีที่ถูกนำมาใช้ในการจัดรูปแบบและควบคุมการแสดงผลในหน้าเว็บเพจเพื่อให้มีประสิทธิภาพมากขึ้น
5.2.1 รูปแบบของcss
5.3ความรู้พื้นฐานภาษาjavascript
Javascript เป็นภาษา scritt ที่นิยมนำมาเขียน กับภาษาHTML และภาษอื่นๆซึ่งการเขียนjavascriptเพื่อเติมเต็มส่วนที่ขาดหายไปให้กับเว็บไซต์เช่นการแสดง popup หลังจากที่คลิกปุ่มการแสดงและซ่อนเมนูหลังจากที่คลิกปุ่มการตรวจสอบชนิดของข้อมูลการตรวจสอบเว็บเบาร์เซอร์เป็นต้น
5.3.1 การใช้งาน javascript
วิธี Embedding คือ การเรียกใช้งาน javascript ภายในหน้าเพจเดียวกัน
2 วิธี including คือ การใช้งาน javascript ที่ถูกเขียนแยกไว้เป็นไฟล์เพื่อให้เว็บเพจสามารถใช้งานjavascript ร่วมกันได้ โดยมีรูปแบบการincluding
5.3.2 การประกาศตัวแปร
ตัวแปร (variable) คือ ซึ่งเรียกแทนหน่วยความจำโดยมีหน้าที่เก็บข้อมูลต่างๆ ไว้ในชื่อที่ตั่งมีข้อมูลต่างๆ เก็บไว้ภายในตัวแปร เช่น ชนิดของข้อมูล ค่าคงที่ เป็นต้น ซึ่งการประกาศตัวแปรในjavascriptต้องมีคำสั่งvarนำหน้าเสมอ และ สามารถกำหนดค่าที่ต้องการพร้อมกับการประกาศตัวแปรได้
5.3.3 การแสดงข้อความ
การแสดงข้อความ คือ การแสดงข้อความหรือแสดงคำต่างๆที่ต้องการให้แสดงผลโดยใช้คำสั่ง  document.write();
การแสดงข้อความต้องมีเครื่องหมาย single Quote ข้อความ หากต้องการแสดงข้อความ ทั้งตัวแปรสามารถใช้เครื่องหมาย + เพื่อเชื่อมระหว่างข้อความและตัวแปร หรือเชื่อมระหว่างข้อความตั่งแต่ 2 ข้อความขึ้นไป
5.3.4 การสร้าง Alert Dialog
Alert Dialog คือ หน้าต่างหรือกล่องข้อความที่ปรากฏเพื่อแจ้งเตือนข้อมูลต่างๆ ให้ผู้ใช้งานเว็บไซต์ได้รับรู้

5.3ความรู้พื้นฐานJavaScript

ความรู้พื้นฐานเกี่ยวกับ JavaScript

JavaScript เป็นภาษาที่เป็น Script ที่อยู่ในเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ยกตัวอย่าง Hellomyweb.com ตรงเมนูด้านซ้ายมือจะเห็นว่าสามารถคลิกเพื่อดูหัวข้อภายในได้ และสามารถคลิกที่ลูกศรสีเขียวเพื่อปิดดูทั้งหมด และลูกศรสีแดงเพื่อเปิดทั้งหมด ข้อดีของ Javascript คือสามารถทำให้ผู้ใช้งานใช้เว็บไซต์ของเราได้ง่ายขึ้น รวมถึงดึงดูดความสนใจของผู้ใช้งานได้อีกด้วย ปัจจุบันนี้ Javascript นั้นเป็นมาตราฐานที่อยู่ใน W3C จึงมั่นใจได้ว่าทุกๆ Web browser รองรับการทำงานของ Javascript แน่นอน 
เนื้อหาเบื้องต้นที่ผู้ใช้ต้องเข้าใจมาก่อนล่วงหน้าคือ HTML เพื่อให้สามารถทำความเข้าใช้ในเนื้อหาเรื่องนี้ได้ง่ายขึ้น 

ก่อนจะเข้าเรื่องขอแนะนำตัว Javascipt กันก่อนดังนี้ 
  • JavaScript นั้นออกแบบให้ใช้งานร่วมกับ HTML นั่นคือต้องอยู่รวมไปกับ HTML Code
  • JavaScript เป็น script language ทำให้ผู้ใช้งานใช้งานได้ง่าย ไม่จำเป็นต้องมีพื้นฐานโปรแกรมมากนัก
  • JavaScript เป็นภาษาที่ใช้ทรัพยากรณ์เครื่องน้อยมาก (Javascript นั้นจะประมวลผลที่ฝั่งของเครื่องผู้ใช้ทำให้ไม่เป็นภาระกับเครื่องมากนักเมื่อเทียบกับ Flash
  • JavaScript ฟรีใครๆก็สามารถใช้งานได้

Java กับ Javascript แต่ต่างกันนะครับ หลายๆคนมักคิดว่าเป็นตัวเดียวกัน แต่จริงๆแล้วแตกต่างกันโดยสิ้นเชิงทั้งความซับซ้อนของภาษา การใช้งาน ประสิทธิภาพ รวมถึงผู้พัฒนา โดย Java นั้นพัฒนาโดย Sun ซึ่งตอนนี้โดย Oracle ซื้อไปเรียบร้อยแล้ว ส่วน JavaScript นั้นพัฒนาโดยทีมงาน Netscape (Mozilla Foundation) ผู้พัฒนา Firefox Web browser ให้เราได้ใช้กันฟรีๆ แถมคุณภาพคับแก้ว 

JavaScript ทำอะไรได้บ้าง
  • JavaScript ทำให้สามารถใช้เขียนโปรแกรมแบบง่ายๆได้ โดยไม่ต้องพึ่งภาษาอื่น เช่น PHP เน้นว่าแบบง่ายๆ โดยส่วนใหญ่จะเป็นรูปแบบของการแสดงผลมากกว่า
  • JavaScript มีคำสั่งที่ตอบสนองกับผู้ใช้งาน เช่นเมื่อผู้ใช้คลิกที่ปุ่ม หรือ Checkbox ก็สามารถสั่งให้เปิดหน้าใหม่ได้ ทำให้เว็บไซต์ของเรามีปฏิสัมพันธ์กับผู้ใช้งานมากขึ้น นี่คือข้อดีของ JavaScript เลยก็ว่าได้ที่ทำให้เว็บไซต์ดังๆทั้งหลายเช่น Google Map ต่างหันมาใช้
  • JavaScript สามารถเขียนหรือเปลี่ยนแปลง HTML Element ได้นั่นคือสามารถเปลี่ยนแปลงรูปแบบการแสดงผลของเว็บไซต์ได้นั่นเอง สั่งเกตจากเมนูต่างๆใน Hellomyweb.com สาารถเลื่อนขึ้นลงได้ หรือหน้าแสดงเนื้อหาสามารถซ่อนหรือแสดงเนื้อหาได้แบบง่ายๆนั่นเอง
  • JavaScript สามารถใช้ตรวจสอบข้อมูลได้ สังเกตว่าเมื่อเรากรอกข้อมูลบางเว็บไซต์ เช่น Email เมื่อเรากรอกข้อมูลผิดจะมีหน้าต่างฟ้องขึ้นมาว่าเรากรอกผิด หรือลิมกรอกอะไรบางอย่าง ส่วนใหญ่เกือบทั้งหมดใช้ JavaScript ตรวจสอบ
  • JavaScript สามารถใช้ในการตรวจสอบผู้ใช้ได้เช่น ตรวจสอบว่าผู้ใช้ใช้ Web browser อะไร
  • JavaScript สร้าง Cookies (เก็บข้อมูลของผู้ใช้ในคอมพิวเตอร์ของผู้ใช้เอง) ได้

บทที่5 พื้นฐานภาษา htmt5, CSSและJavaScript

เนื้อหาสาระ              การออกแบบและพัฒนาเว็บไซต์หลังจากออกแบบเริ่มต้นด้วยการออกแบบโครงสร้างเว็บไซต์การตกแต่งตัวอักษร รูปภาพ ตลอดจนเนื้อ...