Ở bài viết này, cùng ICT Hà Nội tìm hiểu về Lập trình Web Front-end, cũng như các kiến thức ban đầu khi mới tiếp cận.
Trong thế giới phát triển về phần mềm, những gì được xây dựng được chia thành hai loại:
-
Một là những gì mà người dùng không nhìn thấy được về các quy trình đang diễn ra trong phần nền của trang web.
-
Hai là những gì chúng ta nhìn thấy và tương tác với tư cách là khách truy cập trang web.
Tất cả các phần việc về cung cấp dữ liệu và tốc độ phân phối dữ liệu, đều thuộc về phần hỗ trợ hoạt động của website hoặc ứng dụng mà người dùng không thể nhìn thấy được, đó là một sự kết hợp của các nguyên lý, thực hành, quy trình và các tool giúp tự động hóa quá trình lập trình và chuyển giao phần mềm.
Trong bài viết này, trước tiên chúng ta sẽ tìm hiểu sâu hơn về Frontend, những khái niệm mà bạn nên hiểu với tư cách là nhà phát triển frontend trong tương lai.
Triển khai “Stack” trong Frontend
Ngăn xếp giao diện người dùng được tạo thành từ nhiều ngôn ngữ và thư viện khác nhau. Mặc dù những ngôn ngữ này khác nhau giữa các ứng dụng, nhưng chỉ có một số ngôn ngữ chung được hiểu bởi tất cả các trình duyệt web. Ba ngôn ngữ mã hóa Frontend chính này là HTML, CSS và JavaScript.
Các trình duyệt web đang được sử dụng và hiển thị, mà chúng ta tương tác hàng ngày đều được cấu tạo nên từ ba thành phần chính này. Tất cả các thư viện và kỹ thuật giao diện người dùng khác đều được xây dựng dựa trên ba ngôn ngữ chính này, khiến chúng trở thành những kỹ năng bắt buộc phải có đối với bất kỳ nhà phát triển giao diện người dùng nào.
Trên thực tế, bạn có thể coi một trang web giống như một ngôi nhà. Thiết kế UX ban đầu là bản thiết kế. HTML là cấu trúc cơ bản của ngôi nhà. CSS là màu sơn, đồ đạc và các quyết định thẩm mỹ khác làm cho ngôi nhà trông hấp dẫn. Và cuối cùng, JavaScript là hoạt động bên trong của ngôi nhà (đèn, hệ thống sưởi, nước), chủ sở hữu hoặc người thuê, sử dụng và tận hưởng.
HTML
HTML là lớp đầu tiên của bất kỳ trang web nào và tạo phiên bản mã của khung dây trên trang web. Một điều cơ bản, đó là tất cả các lập trình viên đều chủ yếu phát triển website với ngôn ngữ HTML5.
Các chữ cái trong HTML là viết tắt của Hypertext Markup Language. Phần đánh dấu của tên là phần quan trọng nhất cần nhớ, vì phần đánh dấu là tên thích hợp cho các phần tử HTML, còn được gọi là thẻ HTML. Toàn bộ HTML là phần đánh dấu tạo ra các yếu tố cơ bản mà chúng ta xem trên một trang web.
Tuy nhiên, điều quan trọng cần nhớ là HTML không được “thông minh”. Nó không tự đưa ra quyết định hoặc nắm bắt thông tin. Nó chỉ đơn giản là tạo giàn giáo của các trang web.
CSS
Cascading Style Sheets, hay CSS, là thứ mang lại sự hấp dẫn trực quan cho HTML của chúng ta và thu hút người dùng. CSS là thứ làm cho từ một nền trắng xuất hiện các văn bản Times New Roman và các siêu liên kết màu xanh lam.
Một xu hướng mới với kiểu dáng là sử dụng cái được gọi là bộ xử lý trước CSS. Chúng bao gồm hỗ trợ bạn viết và quản lý các mã CSS dễ dàng hơn, logic hóa và cấu trúc các đoạn mã CSS sao cho nó gần với ngôn ngữ lập trình nhất có thể và các nhà tạo mẫu. Bộ xử lý trước là ngôn ngữ kịch bản biên dịch thành CSS cho trình duyệt và rất phổ biến vì chúng đẩy nhanh quá trình phát triển.
Khi tiếp cận về CSS, chúng ta sẽ bắt đầu với những kiến thức cơ bản nhất:
-
Định nghĩa bảng kiểu cho trang web với CSS.
-
Các thuộc tính CSS nâng cao.
-
Thiết kế bố cục trang web với CSS.
-
…
JavaScript
JavaScript là ngôn ngữ lập trình được các nhà phát triển sử dụng để tạo các trang web tương tác. Từ việc làm mới nguồn cấp dữ liệu mạng xã hội đến hiển thị hoạt ảnh và bản đồ tương tác, các tính năng của JavaScript có thể cải thiện trải nghiệm người dùng trên trang web của bạn.
JavaScript, với tư cách là ngôn ngữ kịch bản phía máy khách, là một trong những công nghệ cốt lõi của World Wide Web. Ví dụ: khi duyệt internet, bất cứ khi nào bạn nhìn thấy một băng chuyền hình ảnh, hãy nhấn để hiển thị menu thả xuống hoặc tự động thay đổi màu của một phần tử trên trang web, đó là lúc bạn thấy tác dụng của JavaScript.
-
Lập trình kịch bản với JavaScript.
-
Cấu trúc lập trình trong JavaScript.
-
Xử lý sự kiện với JavaScript.
-
…
Kiểm tra dữ liệu form nhập với JavaScript
Chỉ cần kiểm tra xem thông tin trong biểu mẫu đã được điền chính xác chưa. Ví dụ tuổi hoặc số lượng sản phẩm phải là số nguyên, ngày sinh có thể là chữ cái, mã sinh viên phải dài 7 ký tự.... do kiểm tra và báo lỗi, người dùng thông báo và nhập lại cho đúng, sau đó thông tin sẽ được xử lý và lưu trữ có giá trị của.
Tiếp tục việc học của bạn
Sau khi đã hiểu về phần Lập trình Web Front-end, bạn có thể đi sâu vào hơn và tiếp tục tìm hiểu về Lập trình hướng đối tượng với Java, lúc đó bạn sẽ được tiếp cận và dần hiểu các khái niệm khác, như cấu trúc điều kiện hay cấu trúc lặp Java là gì.
📌 Mạng xã hội của NIIT-ICT Hà Nội