CHƯƠNG 1: CƠ SỞ LÍ THUYẾT 1. Tổng quan về HTML 1. Giới thiệu về HTML HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website. HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản.
Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,… 1. Cấu trúc và hoạt động HTML Một Website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng. Lưu ý, HTML không phải là ngôn ngữ lập trình. Điều này có nghĩa là nó không thể thực hiện các chức năng “động”.
Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web. HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng. HTML document có đuôi file dạng .html hoặc htm. Bạn có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari,… Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.
Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trang blog,…) và mỗi trang con như vậy sẽ có một tệp HTML riêng. Mỗi tài liệu HTML bao gồm 1 bộ tag (hay còn gọi là element). Nó tạo ra một cấu trúc tương tự như cây thư mục với các heading, section, paragraph,… và một số khối nội dung khác. Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấu trúc <tag></tag>.
3 Downloaded by SAU DO (saudinh3@gmail.com) lOMoARcPSD|39270902 Hình 1. Cấu trúc trang HTML 1. Tổng quan về CSS 1. Khái niệm về CSS Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng anh là Cascading Style Sheets (CSS) – được dung để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML.
Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Cosortium. Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTML ngay trong nội dung của nó, bạn nên sử dụng CSS. Tác dụng của CSS Hạn chế tối thiểu việc làm rối mã HTML của trang web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang web được gọn gàng hơn, tách nội dung của trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau.
Tổng quan về JavaScript 1. Khái niệm về JavaScript JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động. 4 Downloaded by SAU DO (saudinh3@gmail.
Ứng dụng của JavaScript Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế tảng web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện mốt số tác vụ không thể thực hiện được chỉ với HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh, … Ở Việt Nam, JavaScript còn được ứng dụng để làm bộ gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy nhiên mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Hình đoạn mã JavaScript cơ bản Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong lập trình PDF của Adobe Acrobat và Adobe Reader.
JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript. Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh vực khác nhau. Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có thêm nhiều 5 Downloaded by SAU DO (saudinh3@gmail.com) lOMoARcPSD|39270902 thông tin rõ ràng hơn. Hiện nay, có rất nhiều JavaScript Framework thông dụng như: - Reactjs: Thư viện dùng cho ứng dụng mobile.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.
- Angular: Dùng để xây dựng ứng dụng Single Page…. - Client-side JavaScript là form phổ biến được sử dụng phổ biến hiện nay. Một trang web không cần một HTML tĩnh, nhưng có thể bao gồm các chương trình có thể tương tác với người dùng hay điều khiển trình duyệt và tạo nội dung HTML động. Tổng quan về SCSS 1.
Khái niệm SCSS SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn. Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus.
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết. Sass là chữ viết tắt của Syntactically Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm thành file CSS. SASS sử dụng indent (cách thụt đầu dòng) để phân tách các khối code , sử dụng xuống dòng để phân biệt rules , có phần mở rộng là.
SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby). Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS. Trong hình phía dưới: 6 Downloaded by SAU DO (saudinh3@gmail.com) lOMoARcPSD|39270902 – Bên trái: Được viết bằng SCSS – Bên phải: là code CSS được biên dịch từ SCSS Hình 1.
SCSS và CSS 1. Một số ưu điểm vượt trội của SCSS so với CSS - Cho phép viết cú pháp lồng nhau. - Có thể đặt biến và sử dụng biến. - Hỗ trợ cú pháp mixin.
Tổng quan về ReactJS 1. Khái niệm ReactJS ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa. ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI.
Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng. UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình một website 7 Downloaded by SAU DO (saudinh3@gmail.com) lOMoARcPSD|39270902 thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem và xử lý tương tác. Ưu điểm của ReactJS Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance website thì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn sử dụng ReactJS và bắt đầu tìm hiểu nó từ bây giờ: Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại để bạn có thể dùng cho nhiều trường hợp. Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể thoả các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau.
Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn. Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dung lại các Business Logic trong ứng dụng. Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google.
Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé! 8 Downloaded by SAU DO (saudinh3@gmail.com) lOMoARcPSD|39270902 Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc quá trình release sản phẩm cũng như quá trình coding của bạn. Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào. Tổng quan về API 1.
Khái niệm về API API là các phương thức, giao thức kết nối với các thư viện và ứng dụng khác. Nó là viết tắt của Application Programming Interface – giao diện lập trình ứng dụng. API cung cấp khả năng cung cấp khả năng truy xuất đến một tập các hàm hay dùng. Và từ đó có thể trao đổi dữ liệu giữa các ứng dụng.
Ứng dụng API - Web API: là hệ thống API được sử dụng trong các hệ thống website.