home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

ความแตกต่างระหว่าง HTML, CSS, และ JavaScript

เรียนรู้ความแตกต่างระหว่าง HTML, CSS, และ JavaScript

เริ่มเรียน Web Development โดยเฉพาะ Front-end HTML, CSS, และ JavaScript ถือเป็น 3 องค์ประกอบพื้นฐานที่สำคัญที่สุดของ Skill Stack

HTML, CSS, และ JavaScript เป็นส่วนของ Ecosystem Web Development เดียวกัน และต้องทำงานร่วมกันเพื่อเพิ่มศักยภาพเว็บสมัยใหม่ให้สูงสุด

แต่... อะไรทำให้ HTML, CSS, และ JavaScript ต่างกัน?

  • HTML ย่อมาจาก Hypertext Markup Language
  • CSS ย่อมาจาก Cascading Stylesheets
  • JavaScript ย่อมาจาก... JavaScript (Shortcut JS)

HTML

HTML เป็น Markup Language ใช้บรรยายเนื้อหาและจัดโครงสร้างพื้นฐานของเว็บไซต์

Analogy: HTML คือ โครงสร้างและเนื้อหาของบ้าน เหมือน โซฟา โต๊ะ ประตู บันได สิ่งจำเป็นขั้นพื้นฐานของบ้าน ไม่มากกว่านั้น

หน้าที่ HTML Developer คือ จัดเตรียมข้อกำหนดขั้นต่ำของเว็บไซต์ โดยบรรยายเนื้อหาอย่างถูกต้อง เพื่อให้ Designer รู้ว่าอะไรคือ Button อะไรคือ Paragraph

ตัวอย่าง:

<!-- Describe content --> <p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p> <button>I'm a button</button>

CSS

CSS เป็น Styling Language ใช้ปรับรูปและจัดสไตล์เนื้อหาเว็บไซต์ ด้านสี ตัวอักษร Spacing Border และอื่นๆ

Analogy: CSS คือ สีทาและขอบโค้งของบ้าน ที่ทำให้สวยงามและสบาย ตามนิยาม เก้าอี้คือสิ่งที่นั่ง แต่ รูปทรง ขนาด และ Padding (Design) คือสิ่งที่ทำให้สบาย (หรือไม่สบาย)

หน้าที่ CSS Developer คือ ให้เว็บไซต์มี Visual Style ที่เจ้าของต้องการ ด้านสี ตัวอักษร Spacing รูปทรง และ Layout รวม เมื่อดูบนอุปกรณ์ต่างๆ

ตัวอย่าง:

/* Style text element */ p { font-family: "Helvetica"; font-size: 20px; line-height: 1.5; } /* Style button */ button { font-size: 16px; font-weight: bold; padding: 16px 32px; border-radius: 8px; color: white; background-color: green; }

JavaScript

JavaScript เป็น Dynamic Programming Language ให้ทำเว็บไซต์ Interactive และ Reactive

Analogy: JavaScript คือ ไฟฟ้าและประปา ที่ทำให้บ้านสมัยใหม่เป็นบ้านสมัยใหม่ ทำให้อาบน้ำ ทำอาหาร และไม่แข็งตัวตอนหนาวได้ JS Developer ทำให้กด Switch ไฟติด และเปิดก๊อกน้ำ น้ำอุ่น/เย็นออกมา

หน้าที่ JS Developer คือ ให้พร้อมเมื่อคลิกปุ่ม "Menu" Off-canvas Menu จะ Slide ขึ้นมาใช้ JS คือสิ่งที่ทำให้ Element ตอบสนอง User Input

ตัวอย่าง:

// Make button interactive const button = document.querySelector("button") button.addEventListener("click", showModal) function showModal() { alert("You clicked on the button!") }