CHƯƠNG 2: ĐỐI TƯỢNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU
2.5. Phần mềm và ngôn ngữ lập trình
2.5.8. Ngôn ngữ lập trình
Ngôn ngữ lập trình của Arduino chính là C/C++, nhưng so với lập trình lập trình trực tiếp với vi điều khiển, lập trình với Arduino đơn giản hơn nhiều vì bạn chỉ phải giao tiếp với phần cứng thông qua các thư viện, có thể xem như các lớp C++
wrapper lên các giao tiếp với phần cứng. Trên website, có khá nhiều các library viết sẵn để điều khiển ngoại vi: LCD, sensor, motor... nên việc bạn cần làm chỉ là kết hợp chúng với nhau để tạo ứng dụng cho riêng bạn.
Hình 2.52: Đoạn code arduino đơn giản về điều khiển led
SVTH: NGUYỄN XUÂN VINH 65 Board arduino có các ngoại vi trên bo mạch đều đã được chuẩn hóa, nên chúng ta cũng có thể lập trình được những ứng dụng thú vị. Thêm nữa, vì Arduino là một platform đã được chuẩn hóa, nên đã có rất nhiều các bo mạch mở rộng (gọi là shield) để cắm chồng lên bo mạch Arduino, có thể hình dung nôm na là "library"
của các ngôn ngữ lập trình. Ví dụ, muốn kết nối Internet thì có Ethernet shield, muốn điều khiển động cơ thì có Motor shield, muốn kết nối nhận tin nhắn thì có GSM shield,... Rất đơn giản, và ta chỉ phải tập trung vào việc "lắp ghép" các thành phần này và sáng tạo ra các ứng dụng cần thiết.
2.5.8.2. JavaScript
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:
HTML: Giúp bạn thêm nội dung cho trang web.
CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
JavaScript: Cải thiện cách hoạt động của trang web.
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web. Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github.
Hình 2.53: Logo JavaScript
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape, vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript.
ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm
SVTH: NGUYỄN XUÂN VINH 66 1999. Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web.
Với một thông tin bất kỳ bạn đang truy cập bằng trình duyệt web, thì chỉ cần ấn F12 thì code Javascript sẽ xuất hiện.
Hình 2.54: Code JavaScript khi ấn F12 Ưu điểm:
Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML;
Nó dễ học hơn các ngôn ngữ lập trình khác;
Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;
Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;
JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng;
Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;
Nó giúp website tương tác tốt hơn với khách truy cập;
Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.
Khuyết điểm:
Dễ bị khai thác;
SVTH: NGUYỄN XUÂN VINH 67
Có thể được dùng để thực thi mã độc trên máy tính của người dùng;
Không được hỗ trợ trên mọi trình duyệt;
JS code snippets lớn;
Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất.
2.5.8.3. HTML
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng.
HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.
Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p>
Hình 2. 55: Một đoạn code đơn giản HTML
Hình 2.56: Giao diện thể hiện của code khi mở bằng trình duyệt Chrome
SVTH: NGUYỄN XUÂN VINH 68 Tổng quan, HTML là ngôn ngữ Markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website.
Cấu trúc cơ bản của trang HTML có dạng như sau, thường gồm 3 phần:
<!Doctype>: Phần khai báo chuẩn của html hay xhtml.
<head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…
<body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung.
Hình 2.57: Cấu trúc cơ bản của trang HTML
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
SVTH: NGUYỄN XUÂN VINH 69
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...
Hình 2.58: Cấu trúc mở rộng của một trang web 2.5.8.4. CSS
CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản. HTML không được thiết kế để gắn tag để giúp định dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site.
Những tag như <font>được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều rắc rối cho lập trình viên. Vì website có nhiều font khác nhau, màu nền và
SVTH: NGUYỄN XUÂN VINH 70 phong cách khác nhau. Để viết lại code cho trang web là cả một quá trình dài, cực nhọc. Vì vậy, CSS được tạo bởi W3C là để giải quyết vấn đề này.
Hình 2.59: Biểu trưng CSS
Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.
CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác.
2.5.8.5. Visual Studio Code
Visual Studio Code là một trình biên tập mã được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và cá tùy chọn khác. Nó miễn phí và là phần mềm mã nguồn mở, mặc dù gói tải xuống chính thì là có giấy phép.
Visual Studio Code được dựa trên Electron, một nền tảng được sử dụng để triển khai các ứng dụng Node.js máy tính cá nhân chạy trên động cơ bố trí Blink.
Mặc dù nó sử dụng nền tảng Electron nhưng phần mềm này không phải là một bản khác của Atom, nó thực ra được dựa trên trình biên tập của Visual Studio Online (tên mã là "Monaco").
Trong cuộc khảo sát vào năm 2018 trên Stack Overflow, Visual Studio Code được xếp hạng là trình biên tập mã phổ biến nhất, với 34.9% của 75398 người trả lời tuyên bố sử dụng nó.
SVTH: NGUYỄN XUÂN VINH 71 Hình 2.60: Logo Visual Studio Code
Visual Studio Code là một trình biên tập mã. Nó hỗ trợ nhiều ngôn ngữ và chức năng tùy vào ngôn ngữ sử dụng. Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện người dùng. Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tập tin .json (ví dụ như tập tin tùy chỉnh của người dùng). Khung nhập lệnh là một giao diện theo dòng lệnh. Tuy nhiên, nó biến mất khi người dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó. Tương tự như vậy với những dòng lệnh tốn nhiều thời gian để xử lý. Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy.