HTML, CSS และ JavaScript ต่างกันอย่างไร

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

เมื่อคุณเริ่มเรียนรู้เกี่ยวกับการพัฒนาเว็บ โดยเฉพาะการพัฒนา front-end, HTML, CSS และ JavaScript ถือเป็นองค์ประกอบพื้นฐานที่สำคัญที่สุด 3 อย่างของสแต็คทักษะของคุณ

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

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

• HTML ย่อมาจาก Hypertext Markup Language
• CSS ย่อมาจาก Cascading Stylesheets
• จาวาสคริปต์ ย่อมาจาก... ดี JavaScript (ทางลัด JS )

HTML

HTML เป็นภาษามาร์กอัปที่เราใช้เพื่ออธิบายเนื้อหาและการจัดวางโครงสร้างคร่าวๆ พื้นฐานของเว็บไซต์

การเปรียบเทียบ: HTML คือกรอบและเนื้อหาของบ้าน ดังนั้น สิ่งต่างๆ เช่น เก้าอี้ โต๊ะ ประตู บันได สิ่งจำเป็นที่ไม่จำเป็นสำหรับการสร้างบ้าน ไม่มีอะไรมากไปกว่านี้

งานของนักพัฒนา HTML คือการจัดหาข้อกำหนดขั้นต่ำของเว็บไซต์โดยอธิบายเนื้อหาของเว็บไซต์อย่างถูกต้อง ดังนั้นเมื่อนักออกแบบเข้ามา พวกเขารู้ว่าปุ่มคืออะไรและย่อหน้าคืออะไร

ตัวอย่าง:

<!-- 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 เป็นภาษาสำหรับการจัดรูปแบบที่เราใช้เพื่อกำหนดรูปร่างและจัดรูปแบบเนื้อหาเว็บไซต์ในแง่ของสี การออกแบบตัวอักษร การเว้นวรรค เส้นขอบ และอื่นๆ

การเปรียบเทียบ: CSS เป็นสีและขอบโค้งมนของบ้านที่ดึงดูดสายตาและน่าอยู่อาศัย ในทางเทคนิค คำจำกัดความของเก้าอี้คือสิ่งที่คุณต้องนั่ง แต่สิ่งต่างๆ เช่น รูปร่าง ขนาด และช่องว่างภายใน (การออกแบบ) เป็นสิ่งที่ทำให้ เก้าอี้นั่งสบาย (หรือไม่สบาย)

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

ตัวอย่าง:

/* 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 เป็นภาษาโปรแกรมแบบไดนามิกที่ช่วยให้เว็บไซต์สามารถโต้ตอบและตอบสนองได้

การเปรียบเทียบ: JavaScript คือไฟฟ้าและน้ำประปาที่ทำให้บ้านสมัยใหม่เป็นบ้านสมัยใหม่ และอาบน้ำ ทำอาหาร และไม่แช่แข็งจนตายในฤดูหนาว นักพัฒนา JavaScript ตรวจสอบให้แน่ใจว่าไฟเปิดขึ้นเมื่อคุณพลิกสวิตช์ และน้ำร้อน/เย็นจะออกมาเมื่อคุณเปิดก๊อกน้ำ

งานของนักพัฒนา JavaScript คือต้องแน่ใจว่าเมื่อคุณคลิกที่ปุ่ม "เมนู" เมนูนอกผ้าใบจะเลื่อนขึ้นพร้อมใช้งาน JavaScrip เป็นสิ่งที่ทำให้องค์ประกอบของเว็บไซต์ตอบสนองต่อการป้อนข้อมูลของผู้ใช้

ตัวอย่าง:

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}