Bạn đã bao giờ tự hỏi bản thân rằng lập trình thế nào để có thể khiến cho một cái máy tính hoạt động? Cách thức hoạt động của nó như thế nào? Nhưng thật sự thì bạn vẫn chưa làm gì phức tạp trên web hơn là tải ảnh lên Facebook?
Đối với một người chưa bao giờ lập trình trước đây, khái niệm tạo một trang web từ “con số không” – bố cục, thiết kế, cách thức hoạt động và tất cả – có vẻ thực sự đáng sợ. Bạn có thể hình dung các sinh viên Harvard từ bộ phim, The Social Network, ngồi trước máy tính với tai nghe khổng lồ gõ code, và tự nghĩ, ‘Mình không thể nào làm được’.
Nhưng thực tế thì bạn hoàn toàn có thể.
Bất cứ ai cũng có thể học lập trình, giống như bất cứ ai cũng có thể học một ngôn ngữ mới. Trên thực tế, lập trình giống như nói một ngôn ngữ nước ngoài – đó chính xác là lý do tại sao chúng được gọi là ngôn ngữ lập trình. Mỗi cái có quy tắc và cú pháp riêng cần được học từng bước. Những quy tắc đó là cách thức hoạt động để nói với máy tính phải làm gì. Cụ thể hơn, trong lập trình web, chúng là những cách để nói cho trình duyệt của bạn biết phải làm gì.
Mục tiêu của bài viết này là bài blog frontend dạy cho bạn những điều cơ bản về HTML, CSS và một trong những ngôn ngữ lập trình phổ biến nhất, JavaScript. Nhưng trước khi bắt đầu, chúng ta hãy biết ý tưởng của ngôn ngữ lập trình thực sự là gì và cách thức hoạt động của chúng
Ngôn ngữ lập trình là gì?
Lập trình giống như giải một câu đố. Hãy xem xét một ngôn ngữ của con người, như tiếng Anh hoặc tiếng Pháp. Chúng ta sử dụng các ngôn ngữ này để biến suy nghĩ và ý tưởng thành hành động và hành vi. Trong lập trình, mục tiêu của câu đố hoàn toàn giống nhau – bạn chỉ đang điều khiển các loại hành vi khác nhau và nguồn gốc của hành vi đó không phải là con người. Nó là một cái máy vi tính.
Một ngôn ngữ lập trình là cách chúng ta giao tiếp với phần mềm. Những người sử dụng ngôn ngữ lập trình thường được gọi là lập trình viên hoặc nhà phát triển. Những điều chúng ta nói với phần mềm bằng ngôn ngữ lập trình có thể là làm cho trang web trông y như những gì ta muốn.ngôn ngữ lập trình là cách chúng ta giao tiếp với phần mềm. Những người sử dụng ngôn ngữ lập trình thường được gọi là lập trình viên hoặc nhà phát triển. Những điều chúng ta nói với phần mềm bằng ngôn ngữ lập trình có thể là làm cho trang web trông y như những gì ta muốn.
Lập trình phát triển web
Vì vậy, khi một nhà thiết kế và lập trình web được ra mục tiêu như sau: “tạo một trang web có tiêu đề này, phông chữ này, những màu sắc này, những hình ảnh và một con kỳ lân hoạt hình đi ngang qua màn hình khi người dùng nhấp vào nút này”, công việc của nhà thiết kế và lập trình web là lấy ý tưởng lớn đó và chia nó thành các phần nhỏ, sau đó dịch các phần này thành các hướng dẫn mà máy tính có thể hiểu – bao gồm đặt tất cả các hướng dẫn này theo đúng thứ tự hoặc cú pháp.
Mỗi trang trên web mà bạn truy cập được xây dựng bằng một chuỗi các hướng dẫn riêng biệt, từng trang một. Trình duyệt của bạn [Chrome, Firefox, Safari, v.v.] là một tác nhân lớn trong việc dịch code thành một thứ chúng ta có thể nhìn thấy trên màn hình và thậm chí chúng ta có thể tương tác với nó. Có thể dễ dàng quên rằng code mà không có trình duyệt thì chỉ là một tệp văn bản – và khi bạn đặt tệp văn bản đó vào trình duyệt thì điều kỳ diệu xảy ra. Khi bạn mở một trang web, trình duyệt của bạn sẽ tìm nạp HTML và các ngôn ngữ lập trình khác có liên quan và diễn giải nó.
HTML và CSS thực sự không phải là ngôn ngữ lập trình kỹ thuật; chúng chỉ là cấu trúc trang và thông tin về style. Nhưng trước khi chuyển sang JavaScript và các ngôn ngữ thực sự khác, bạn cần biết những điều cơ bản về HTML và CSS cách thức hoạt động của chúng, vì chúng nằm ở mặt trước của mỗi trang web và ứng dụng.
Vào đầu những năm 1990, HTML là ngôn ngữ duy nhất có sẵn trên web. Các nhà phát triển web đã phải cố gắng lập trình các trang web tĩnh, từng trang. Rất nhiều thay đổi kể từ đó: Bây giờ có nhiều ngôn ngữ lập trình máy tính có sẵn. Trong bài đăng này, tôi sẽ nói về HTML, CSS và một trong những ngôn ngữ lập trình phổ biến nhất: JavaScript.
HTML, CSS và JavaScript: Cách thức hoạt động
Tổng quan:
- HTML cung cấp cấu trúc cơ bản của các trang web, được cải tiến và sửa đổi bởi các công nghệ khác như CSS và JavaScript.cung cấp cấu trúc cơ bản của các trang web, được cải tiến và sửa đổi bởi các công nghệ khác như CSS và JavaScript.
- CSS được sử dụng để kiểm soát trình bày, định dạng và bố cục.được sử dụng để kiểm soát trình bày, định dạng và bố cục.
- JavaScript được sử dụng để kiểm soát hành vi của các yếu tố khác nhau.được sử dụng để kiểm soát hành vi của các yếu tố khác nhau.
Bây giờ, chúng ta hãy đi qua từng mục một để giúp bạn hiểu vai trò của chúng trên một trang web và sau đó chúng tôi sẽ đề cập đến cách chúng khớp với nhau như thế nào. Chúng ta hãy bắt đầu với HTML.
HTML
HTML là cốt lõi của mọi trang web, bất kể sự phức tạp của một trang web hoặc số lượng công nghệ liên quan. Đó là một kỹ năng thiết yếu cho bất kỳ chuyên gia lập trình web nào. Đó là điểm khởi đầu cho bất cứ ai học cách tạo nội dung cho web. Và may mắn thay cho chúng ta, nó thật dễ dàng để học hỏi.
Cách thức hoạt động của HTML?
HTML là viết tắt của HyperText Markup Language- Ngôn ngữ định dạng văn bản. “Markup Language” có nghĩa là, thay vì sử dụng ngôn ngữ lập trình để thực hiện các chức năng, HTML sử dụng các thẻ để xác định các loại nội dung khác nhau và mục đích phục vụ cho trang web.
Hãy xem bài viết dưới đây. Nếu tôi yêu cầu bạn gắn nhãn các loại nội dung trên trang, có lẽ bạn sẽ làm rất tốt: Có tiêu đề ở trên cùng, sau đó một tiêu đề phụ bên dưới nó, body text và một số hình ảnh ở phía dưới theo sau thêm vài phần văn bản nữa.
Các ngôn ngữ đánh dấu với cách thức hoạt động theo cách giống như bạn đã làm khi bạn gắn nhãn các loại nội dung đó, ngoại trừ chúng sử dụng code để làm điều đó – cụ thể, chúng sử dụng các thẻ HTML, còn được gọi là “element”. Các thẻ này có tên khá trực quan: thẻ header, thẻ paragraph, thẻ image, v.v.
Mỗi trang web được tạo thành từ một loạt các thẻ HTML này biểu thị từng loại nội dung trên trang. Mỗi loại nội dung trên trang được “wrapped”, tức là được bao quanh bởi các thẻ HTML.
Ví dụ, những từ bạn đang đọc ngay bây giờ là một phần của paragraph. Nếu tôi đã code trang web này từ đầu [thay vì sử dụng trình soạn thảo WYSIWG trong COS của HubSpot ], tôi sẽ bắt đầu đoạn này bằng thẻ mở đầu : . Phần “thẻ” được biểu thị bằng dấu ngoặc mở và chữ “p” cho máy tính biết chúng tôi đang mở một đoạn văn thay vì một số loại nội dung khác.
Khi một thẻ đã được mở, tất cả nội dung theo sau được coi là một phần của thẻ đó cho đến khi bạn “đóng” thẻ. Khi đoạn kết thúc, tôi sẽ đặt thẻ đoạn kết thúc: . Lưu ý rằng các thẻ đóng trông giống hệt như các thẻ mở, ngoại trừ có một dấu gạch chéo về phía trước sau dấu ngoặc góc bên trái. Đây là một ví dụ:
Đây là một đoạn văn.
Sử dụng HTML, bạn có thể thêm tiêu đề, định dạng đoạn văn, ngắt dòng điều khiển, tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên kết, xây dựng bảng, điều khiển một số kiểu, và nhiều hơn nữa.
Để tìm hiểu thêm về code trong HTML, tôi khuyên bạn nên xem hướng dẫn về HTML cơ bản và sử dụng các lớp và tài nguyên miễn phí trên codecademy – nhưng bây giờ, chúng ta hãy chuyển sang CSS.
CSS
CSS là viết tắt của Cascading Style Sheets. Ngôn ngữ lập trình này quy định cách các thành phần HTML của trang web thực sự sẽ xuất hiện trên frontend như thế nào.
Cách thức hoạt động của HTML & CSS
HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên một trang web. CSS, mặt khác, giúp xác định kiểu nội dung này để nó xuất hiện cho người dùng theo cách nó cần được nhìn thấy. Các ngôn ngữ này được giữ riêng biệt để đảm bảo các trang web được xây dựng chính xác trước khi chúng được định dạng lại.
Nếu HTML là vách thạch cao CSS là sơn.
Trong khi HTML là cấu trúc cơ bản của trang web của bạn, CSS là thứ mang lại cho toàn bộ trang web của bạn phong cách. Những màu sắc bóng bẩy, phông chữ thú vị, và hình ảnh nền? Tất cả là nhờ CSS. Ngôn ngữ này ảnh hưởng đến toàn bộ tâm trạng và giai điệu của một trang web, khiến nó trở thành một công cụ vô cùng mạnh mẽ – và là một kỹ năng quan trọng để các lập trình viên web học hỏi. Đó cũng là những gì cho phép các trang web thích ứng với các kích thước màn hình và loại thiết bị khác nhau.
Để cho bạn thấy CSS làm gì với một trang web, hãy nhìn vào hai ảnh chụp màn hình sau đây. Ảnh chụp màn hình đầu tiên là bài đăng trên blog của đồng nghiệp của tôi , nhưng được hiển thị trong HTML cơ bản và ảnh chụp màn hình thứ hai là cùng một bài đăng blog với HTML và CSS.
Ví dụ về HTML [không có CSS]
Lưu ý tất cả nội dung vẫn còn đó, nhưng kiểu dáng trực quan thì không. Đây là những gì bạn có thể thấy nếu CSS không tải trên trang web, vì bất kỳ lý do gì. Bây giờ, đây là những gì cùng một trang web với CSS được thêm vào.
Ví dụ về cách thức hoạt động HTML + CSS
Không phải là đẹp hơn sao?
Nói một cách đơn giản, CSS là một danh sách các quy tắc có thể gán các thuộc tính khác nhau cho các thẻ HTML, được chỉ định cho các thẻ đơn, nhiều thẻ, toàn bộ tài liệu hoặc nhiều tài liệu. Nó tồn tại bởi vì, khi các yếu tố thiết kế như phông chữ và màu sắc được phát triển, các nhà thiết kế web đã gặp nhiều khó khăn khi thích ứng HTML với các tính năng mới này.
Bạn thấy , HTML, được phát triển trở lại vào năm 1990, không thực sự có ý định hiển thị bất kỳ thông tin định dạng vật lý nào. Ban đầu nó chỉ có nghĩa là để xác định nội dung cấu trúc của tài liệu, như tiêu đề so với đoạn văn. Cách thức hoạt động của HTML đã vượt qua các tính năng thiết kế mới này và CSS được phát minh và phát hành vào năm 1996: Tất cả các định dạng có thể được xóa khỏi các tài liệu HTML và được lưu trữ trong các tệp CSS [.css] riêng biệt.
Vậy, CSS chính xác là gì? Nó là viết tắt của Cascading Style Sheets – và “style sheet” dùng để chỉ chính tài liệu đó. Mỗi trình duyệt web có style sheet kiểu mặc định, vì vậy mọi trang web hiện có đều bị ảnh hưởng bởi ít nhất một style sheet – style sheet kiểu mặc định của bất kỳ trình duyệt nào mà khách truy cập trang web đang sử dụng – bất kể nhà thiết kế web có áp dụng bất kỳ kiểu nào không . Ví dụ: kiểu phông chữ mặc định của trình duyệt của tôi là Times New Roman, cỡ 12, vì vậy nếu tôi truy cập một trang web nơi nhà thiết kế không áp dụng một style sheet của riêng họ, tôi sẽ thấy trang web có font Times New Roman, cỡ 12 .
Rõ ràng, phần lớn các trang web tôi truy cập không sử dụng Times New Roman, cỡ 12 – đó là vì các nhà thiết kế web đằng sau các trang đó bắt đầu với một style sheet kiểu mặc định có kiểu phông chữ mặc định, và sau đó họ áp vào trình duyệt của tôi mặc định với CSS tùy chỉnh. Đó là nơi từ “cascading” phát huy tác dụng. Hãy nghĩ về một thác nước – khi thác nước đổ xuống, nó đập vào tất cả các tảng đá trên đường xuống, nhưng chỉ những tảng đá ở phía dưới ảnh hưởng đến nơi nó sẽ chảy. Theo cách tương tự, style sheet được xác định cuối cùng thông báo cho trình duyệt của tôi những hướng dẫn nào được ưu tiên.
Để tìm hiểu chi tiết cụ thể về mã hóa trong CSS, tôi sẽ chỉ cho bạn một lần nữa các lớp và tài nguyên miễn phí trên codecademy . Nhưng bây giờ, hãy nói một chút về JavaScript.
JavaScript
JavaScript là ngôn ngữ phức tạp hơn HTML hoặc CSS và nó không được phát hành ở dạng beta cho đến năm 1995. Ngày nay, JavaScript được hỗ trợ bởi tất cả các trình duyệt web hiện đại và được sử dụng trên hầu hết mọi trang web để có chức năng mạnh mẽ và phức tạp hơn.
Cách thức hoạt động của JavaScript?
JavaScript là ngôn ngữ lập trình dựa trên logic, có thể được sử dụng để sửa đổi nội dung trang web và khiến nó hoạt động theo nhiều cách khác nhau để đáp ứng với hành động của người dùng. Các cách sử dụng phổ biến cho JavaScript bao gồm confirmation boxes, calls-to-action, và thêm thông tin mới vào thông tin hiện có.
Nói tóm lại, JavaScript là ngôn ngữ lập trình cho phép các nhà phát triển web thiết kế các trang web tương tác. Hầu hết các hoạt động mà bạn sẽ thấy trên một trang web là nhờ JavaScript, giúp tăng cường các kiểm soát và hành vi mặc định của trình duyệt.
Tạo confirmation box box
Một ví dụ về JavaScript đang hoạt động là các hộp thoại bật lên trên màn hình của bạn. Hãy suy nghĩ về lần cuối cùng bạn nhập thông tin của mình vào một biểu mẫu trực tuyến và một hộp xác nhận bật lên, yêu cầu bạn nhấn “OK” hoặc “Hủy” để tiếp tục. Điều đó đã được thực hiện nhờ JavaScript – trong code, bạn sẽ tìm thấy một câu lệnh “if … else …” yêu cầu máy tính làm một việc nếu người dùng nhấp vào “OK” và một điều khác nếu người dùng nhấp vào “Hủy.”
Kích hoạt CTA Slide-In
Một ví dụ khác về JavaScript về cách thức hoạt động là một slide-in call-to-action [CTA], giống như những gì chúng tôi đặt trên các bài đăng trên blog, chúng xuất hiện ở phía dưới bên phải màn hình của bạn khi bạn cuộn qua phần cuối của màn hình thanh bên. Đây là những gì nó trông giống như:
Lưu trữ thông tin mới
JavaScript đặc biệt hữu ích để gán các danh tính mới cho các thành phần trang web hiện có, theo các quyết định mà người dùng đưa ra khi truy cập trang. Ví dụ: giả sử bạn đang xây dựng một trang đích với một hình thức bạn muốn tạo khách hàng tiềm năng bằng cách nắm bắt thông tin về khách truy cập trang web. Bạn có thể có một “chuỗi” JavaScript dành riêng cho tên của người dùng. Chuỗi đó có thể trông giống như thế này:
function updateFirstname[] {
let Firstname = prompt[‘First Name’];
}
Sau đó, sau khi khách truy cập trang web nhập tên của họ – và bất kỳ thông tin nào khác bạn yêu cầu trên trang đích – và gửi biểu mẫu, hành động này sẽ cập nhật danh tính của phần tử “Tên gọi” ban đầu không xác định trong mã của bạn. Đây là cách bạn có thể cảm ơn khách truy cập trang web của mình bằng tên trong JavaScript:
para.textContent = ‘Cảm ơn,’ + Firstname + “! Bây giờ bạn có thể tải xuống ebook của mình.”
Trong chuỗi JavaScript ở trên, phần tử “Firstname” đã được gán first name của khách truy cập trang web và do đó sẽ tạo tên thật của anh ấy hoặc cô ấy trên giao diện của trang web. Đối với người dùng tên Kevin, câu sẽ như thế này:
Cảm ơn, Kevin! Bây giờ bạn có thể tải về ebook của bạn.
Bảo mật, trò chơi và hiệu ứng đặc biệt
Các cách thức hoạt động, sử dụng khác cho JavaScript bao gồm tạo mật khẩu bảo mật, kiểm tra biểu mẫu, trò chơi tương tác, hoạt hình và hiệu ứng đặc biệt. Nó cũng được sử dụng để xây dựng các ứng dụng di động và tạo các ứng dụng dựa trên máy chủ. Bạn có thể thêm JavaScript vào tài liệu HTML bằng cách thêm các “tập lệnh” hoặc đoạn code JavaScript này vào tiêu đề hoặc nội dung của tài liệu.
Mọi thứ khi khởi đầu sẽ luôn khó khăn Nordic Coder sẽ hỗ trợ bạn, giúp cho bạn có thêm kiến thức và kỹ năng về lập trình, cách thức hoạt động của Front End với khoá học Web Front-End cho người mới bắt đầu. Ngoài ra bạn có thể đăng ký thêm các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Đồng thời, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.Nordic Coder sẽ hỗ trợ bạn, giúp cho bạn có thêm kiến thức và kỹ năng về lập trình, cách thức hoạt động của Front End với khoá học Web Front-End cho người mới bắt đầu. Ngoài ra bạn có thể đăng ký thêm các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Đồng thời, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.