HTML CSS JavaScript là gì Chúng có tách ra được không

HTML CSS JavaScript là gì? Chúng có tách ra được không?

adminBạn nghĩ gì về bài viết này?

Nếu bạn đang học lập trình web, bạn sẽ bắt gặp các thuật ngữ như HTML CSS JavaScript. Chúng thường được gọi là các khối hợp nhất của Web.

Ba công cụ này thống trị sự phát triển web. Mọi thư viện hoặc công cụ dường như đều tập trung vào HTML CSS JavaScript. Vì vậy, nếu bạn muốn trở thành một lập trình viên web, bạn cần phải học chúng thật tốt.

Bạn cũng sẽ phát hiện ra rằng các trang web chủ yếu được xây dựng từ ba ngôn ngữ HTML CSS JavaScript này.

Nhưng có lẽ bạn đang tự hỏi mỗi cái đó là gì và nó thực sự được sử dụng để làm gì. Điều gì làm cho những ngôn ngữ này trở nên đặc biệt và quan trọng? Và điều gì khiến HTML CSS JavaScript phổ biến đến mức bạn không thể không nhìn thấy chúng trong mọi hoạt động và chủ đề trong việc lập trình web?

Nhưng đừng lo, bây giờ bạn không cần thắc mắc nữa.

Trong bài viết này, tôi sẽ giải thích những điều cơ bản về HTML CSS JavaScript là gì, cách chúng làm cho Web hoạt động và những gì chúng tự làm.

Trước khi tìm hiểu về HTML CSS JavaScript thì hãy cùng tôi tìm hiểu về Web và Interet là gì? Mà HTML CSS JavaScript có mối quan hệ gì với Web và Internet?

Internet là gì?

Internet chỉ đơn giản là một mạng lưới các máy tính giao tiếp với nhau để gửi và nhận dữ liệu (thông tin).

Mỗi máy tính này trên internet có thể được phân biệt và định vị bằng một số duy nhất được gọi là Địa chỉ IP. Địa chỉ IP trông giống như sau: 168.212.226.204

Web là gì?

Web là một tập hợp con của Internet.

Giống như mọi mạng máy tính khác, Web được tạo thành từ hai thành phần chính: trình duyệt web ucar người dùng và máy chủ web.

Máy người dùng yêu cầu dữ liệu và máy chủ chia sẻ hoặc cung cấp dữ liệu của nó. Để đạt được điều này, hai bên phải thiết lập một thỏa thuận. Thỏa thuận đó được gọi là Application Programming Interface hay ngắn gọn là API.

Nhưng dữ liệu này phải được sắp xếp và định dạng thành một dạng dễ hiểu đối với người dùng cuối, những người có nhiều kinh nghiệm và khả năng kỹ thuật.

Đây là lúc HTML CSS JavaScript và toàn bộ khái niệm lập trình web phát huy tác dụng.

HTML là gì?

HTML là viết tắt của Hyper Text Markup Language.

Theo Dictionary.com định nghĩa là:

Một tập hợp các hướng dẫn chi tiết, thường được viết trên một bản thảo để được sắp chữ, liên quan đến kiểu loại, cách sắp xếp các trang và những thứ tương tự.

Vì vậy, bạn có thể coi HTML là ngôn ngữ được sử dụng để tạo các hướng dẫn chi tiết liên quan đến kiểu, loại, định dạng, cấu trúc của một trang web trước khi nó được hiển thị cho bạn.

Nhưng trong bối cảnh lập trình web hiện nay, chúng ta có thể thay thế thuật ngữ ‘printed’ bằng ‘rendered’ như một thuật ngữ chính xác hơn.

HTML giúp bạn cấu trúc trang của mình thành các phần tử như đoạn văn, phần, tiêu đề, thanh điều hướng, v.v.  

Để minh họa một trang trông như thế nào, hãy tạo một tài liệu HTML cơ bản:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./styles.css">
  <title>Document</title>
</head>
<body>
  <h1>This is a first level heading in HTML. With CSS, I will turn this into red color</h1>
  <h2>This is a second level heading in HTML. With CSS, I will turn this into blue color</h2>
  <h3>This is a third level heading in HTML. With CSS, I will turn this into green color</h3>
  <p>This is a <em>paragragh</em> As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
    the background color of the word "paragraph" to black, and its text color  to green, all with just CSS.</p>
  <p>The main essence of this tutorial is to:</p>
    <ul>
       <li>Show you how to format a web document with HTML</li>
       <li>Show you how to design a web page with CSS</li>
       <li>Show you how to program a web document with JavaScript</li>
    </ul>

  <p>Next, I am going to add the following two numbers and display the result, all with JavaScript<p/>
    <p>First number:<span id= "firstNum">2</span> <br></p>
    <p>Second number: <span id= "secondNum">7</span> </p>
    <p>Therefore, the sum of the two of those numbers is: <span id= "answer">(placeholder for the answer)</span></p>
    <input type="button" id="sumButton" value="Click to add!">
</body>
</html>Code language: HTML, XML (xml)

Đây là cách bạn có thể định dạng và cấu trúc một tài liệu chỉ với HTML. Như bạn có thể thấy, việc đánh dấu này chứa một số thành phần web như:

  • Level 1 heading h1
  • Level 2 heading h2
  • Level 3 heading h3
  • A paragraph  p
  • An unordered list with bullet points  ul li
  • A button input input
  • And the whole body of the page body

Đây là những gì đánh dấu ở trên hiển thị trên trình duyệt web:

HTML CSS JavaScript là gì Chúng có tách ra được không

Bạn cũng có thể thêm các thuộc tính cho các phần tử này mà bạn có thể sử dụng để xác định các phần tử và truy cập chúng từ những nơi khác trong trang web.

Trong ví dụ của tôi, tôi đặt các thuộc tính id cho cả ba phần tử span. Điều này sẽ giúp tôi truy cập chúng từ JavaScript của tôi như bạn sẽ thấy sau.

Hãy nghĩ về thuộc tính này giống như tên người dùng mạng xã hội của bạn. Với tên này, những người khác có thể tìm thấy bạn trên mạng xã hội. Và ai đó cũng có thể đề cập đến bạn hoặc đề cập đến bạn với tên này (bạn có thể được gắn thẻ trong một bài đăng, v.v.).

Tuy nhiên, trang này rất cơ bản và không hấp dẫn. Nếu bạn đang xây dựng bất kỳ thứ gì khác ngoài bản demo, bạn sẽ cần thêm một số kiểu cơ bản để làm cho nó dễ nhìn hơn. Và chúng ta có thể làm chính xác điều đó với CSS.

CSS là gì?

Trong khi HTML là ngôn ngữ đánh dấu được sử dụng để định dạng/cấu trúc một trang web. CSS là ngôn ngữ thiết kế mà bạn sử dụng để làm cho trang web của mình trông đẹp và dễ nhìn.

CSS là viết tắt của Cascading Style Sheets và bạn sử dụng nó để cải thiện giao diện của một trang web. Bằng cách thêm các kiểu CSS chu đáo, bạn làm cho trang của mình trở nên hấp dẫn và dễ chịu hơn cho người dùng cuối cùng xem và sử dụng.

Hãy tưởng tượng nếu con người chỉ được tạo ra 1 bộ xương trần – điều đó sẽ trông như thế nào? Không tốt nếu bạn hỏi tôi. Vì vậy, CSS giống như da, tóc và ngoại hình chung của chúng ta.

Bạn cũng có thể sử dụng CSS để bố trí các phần tử bằng cách đặt chúng vào các khu vực cụ thể trên trang của bạn.

Để truy cập các phần tử này, bạn phải “chọn” chúng. Bạn có thể chọn một hoặc nhiều phần tử web và chỉ định cách bạn muốn chúng trông như thế nào hoặc được định vị như thế nào.

Các quy tắc chi phối quá trình này được gọi là  CSS selectors.

Với CSS, bạn có thể đặt màu và nền cho các phần tử của mình, cũng như kiểu chữ, lề, khoảng cách, khoảng đệm, v.v.

Nếu bạn còn nhớ trang HTML mẫu của tôi, tôi có các phần tử khá dễ hiểu. Ví dụ, tôi đã nói rằng tôi sẽ thay đổi màu của Level 1 heading h1 thành màu đỏ.

Để minh họa cách hoạt động của CSS, tôi sẽ chia sẻ mã đặt màu nền của ba cấp tiêu đề lần lượt là đỏ, xanh dương và xanh lá cây:

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}Code language: CSS (css)

Kiểu trên, khi được áp dụng, sẽ thay đổi giao diện trang web của bạn thành như sau:

HTML CSS JavaScript là gì Chúng có tách ra được không

Trông thật tuyệt, phải không?

Tôi truy cập từng phần tử mà tôi muốn làm việc bằng cách “chọn” chúng. Chọn tất cả các Level 1 heading h1 trong trang, chọn Level 2 heading h2, v.v. Bạn có thể chọn bất kỳ phần tử HTML đơn lẻ nào bạn muốn và chỉ định cách bạn muốn nó trông như thế nào hoặc được định vị như thế nào.

JavaScript là gì?

Bây giờ, nếu HTML là ngôn ngữ đánh dấu và CSS là ngôn ngữ thiết kế, thì JavaScript là ngôn ngữ lập trình.

Nếu bạn không biết lập trình là gì, hãy nghĩ đến những hành động nhất định bạn thực hiện trong cuộc sống hàng ngày:

Khi bạn cảm thấy nguy hiểm, bạn chạy. Khi bạn đói, bạn ăn. Khi bạn mệt mỏi, bạn ngủ. Khi bạn lạnh, bạn tìm kiếm sự ấm áp. Khi băng qua một con đường đông đúc, bạn tính toán khoảng cách của các xe cách xa bạn.

Bộ não của bạn đã được lập trình để phản ứng theo một cách nhất định hoặc làm những việc nhất định bất cứ khi nào có điều gì đó xảy ra. Cũng theo cách này, bạn có thể lập trình trang web của mình hoặc các phần tử riêng lẻ để phản ứng theo một cách nhất định và làm điều gì đó khi có điều gì đó khác (một sự kiện) xảy ra.

Bạn có thể lập trình các hành động, điều kiện, tính toán, yêu cầu mạng, tác vụ đồng thời và nhiều loại hướng dẫn khác.

Bạn có thể truy cập bất kỳ phần tử nào thông qua Document Object Model API (DOM) và làm cho chúng thay đổi theo cách bạn muốn.

DOM là một biểu diễn dạng cây của trang web được tải vào trình duyệt.

HTML CSS JavaScript là gì Chúng có tách ra được không

Nhờ DOM, tôi có thể sử dụng các phương pháp như getElementById() để truy cập các phần tử từ trang web của tôi.

JavaScript cho phép bạn làm cho trang web của mình “suy nghĩ và hành động”, đó là những gì liên quan đến lập trình.

Nếu bạn nhớ từ trang HTML mẫu của tôi, tôi đã đề cập rằng tôi sẽ tính tổng hai số được hiển thị trên trang và sau đó hiển thị kết quả ở vị trí của văn bản giữ chỗ. Tính toán sẽ chạy khi nút được nhấp.

HTML CSS JavaScript là gì Chúng có tách ra được không

Đoạn code này minh họa cách bạn có thể thực hiện các phép tính với JavaScript:

function displaySum() {
  let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}

document.getElementById('sumButton').addEventListener("click", displaySum);Code language: JavaScript (javascript)

Hãy nhớ những gì tôi đã nói với bạn về các thuộc tính HTML và cách sử dụng của chúng? Code này chỉ hiển thị điều đó.

Hàm displaySum là một hàm lấy cả hai mục từ trang web, chuyển đổi chúng thành số (với phương thức Số), tính tổng và chuyển chúng dưới dạng giá trị bên trong cho một phần tử khác.

Lý do chúng tôi có thể truy cập các phần tử này trong JavaScript của mình là vì chúng tôi đã thiết lập các thuộc tính duy nhất trên chúng, để giúp chúng tôi xác định chúng.

Vì vậy, nhờ điều này:

// id attribute has been set in all three

<span id= "firstNum">2</span> <br> 
    ...<span id= "secondNum">7</span> 
    ...... <span id= "answer">(placeholder for the answer)</span>Code language: HTML, XML (xml)

Tôi đã có thể làm điều này:

//getElementById will get all HTML elements by a specific "id" attribute
...
let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;Code language: JavaScript (javascript)

Cuối cùng, khi nhấp vào nút, bạn sẽ thấy tổng của hai số trên trang mới cập nhật:

HTML CSS JavaScript là gì Chúng có tách ra được không

Cách kết hợp HTML CSS JavaScript với nhau

Cùng nhau, tôi sử dụng ba ngôn ngữ HTML CSS JavaScript để định dạng, thiết kế và lập trình các trang web.

Và khi bạn liên kết một số trang web với nhau bằng siêu liên kết, cùng với tất cả nội dung của chúng như hình ảnh, video, v.v. trên máy chủ, nó sẽ được hiển thị thành một trang web .

Việc hiển thị này thường xảy ra trên giao diện người dùng, nơi người dùng có thể thấy những gì đang được hiển thị và tương tác với nó.

Mặt khác, dữ liệu, đặc biệt là thông tin nhạy cảm như mật khẩu, được lưu trữ và cung cấp từ phần cuối của trang web. Đây là một phần của trang web chỉ tồn tại trên máy chủ và không được hiển thị trên trình duyệt giao diện người dùng. Ở đó, người dùng không thể nhìn thấy hoặc dễ dàng truy cập thông tin đó.

Kết luận

Là một lập trình viên web, ba ngôn ngữ mà bạn không thể bỏ qua khi muốn xây dựng trang web là HTML CSS JavaScript.

JavaScript là ngôn ngữ lập trình, tôi sử dụng HTML để cấu trúc trang web và tôi sử dụng CSS để thiết kế và bố trí trang web.

Ngày nay, CSS đã trở thành không chỉ là một ngôn ngữ thiết kế. Bạn thực sự có thể triển khai các hoạt ảnh và chuyển tiếp mượt mà chỉ với CSS.

Trên thực tế, bạn cũng có thể lập trình cơ bản với CSS. Một ví dụ về điều này là khi bạn sử dụng truy vấn phương tiện, nơi bạn xác định các quy tắc kiểu khác nhau cho các loại màn hình (độ phân giải) khác nhau.

JavaScript cũng đã phát triển ngoài việc chỉ được sử dụng trong trình duyệt. Bây giờ tôi sử dụng nó trên máy chủ nhờ Node.js.

Nhưng thực tế cơ bản vẫn là: HTML CSS JavaScript là các ngôn ngữ chính của Web.

À chính nó đấy. Các ngôn ngữ của Web được giải thích bằng các thuật ngữ cơ bản. Tôi thực sự hy vọng bạn nhận được một cái gì đó hữu ích từ bài viết này.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận