Phát triển web đã tiến tới kỷ nguyên khung. Tuy nhiên, phỏng vấn là một kinh nghiệm giới hạn thời gian. Thông thường, một cuộc phỏng vấn công việc giao diện người dùng yêu cầu xây dựng một ứng dụng Web đơn giản hóa, với tài nguyên hạn chế về HTML, CSS và JavaScript và có thể không cần truy cập internet để kiểm tra cú pháp
Trong bài viết này, chúng tôi sử dụng tài nguyên hạn chế để xây dựng một ứng dụng Web
Chuẩn bị VSCode
Chúng tôi sử dụng VSCode để thiết lập môi trường làm việc cho HTML, CSS và JavaScript
- Tạo một thư mục, đặt tên là js
- Tạo hai tệp trống trong thư mục. index.html và 2
Mở index.html trống và gõ !. Chọn lựa chọn đầu tiên trong hình trên và giàn giáo HTML được tạo
Chúng tôi thêm vào mẫu trên
Ở dòng 7, một liên kết đến style.css được thêm vào phần head. Trong trường hợp bạn không nhớ cú pháp link, hãy gõ link và nhập. VSCode sẽ tạo phần tử link. Phương pháp này hoạt động cho tất cả các thẻ HTML
Tại dòng 10, một index.html0 của index.html1 được thêm vào bên trong phần index.html2
Đó là nó. Chúng tôi đã xây dựng ứng dụng Web index.html1 của mình
Sau đó, làm thế nào chúng ta có thể xem ứng dụng Web?
Tiện ích mở rộng VSCode, Live Server, có thể trợ giúp
Tải xuống Live Server, một máy chủ phát triển cục bộ với tính năng tải lại trực tiếp cho các trang tĩnh và động
Nhấp chuột phải vào index.html và chọn tùy chọn, index.html5. Dự kiến, chúng ta sẽ thấy một phiên trình duyệt được khởi chạy với ứng dụng Web
Bố cục CSS
Chúng tôi đã có index.html1 trên trình duyệt. Sử dụng CSS để định kiểu bố cục trang có thể là bước tiếp theo của quy trình phỏng vấn
câu hỏi đầu tiên. làm thế nào để bạn để index.html1 lấp đầy toàn bộ màn hình?
Điều này có thể được thực hiện với style.css
Tại các dòng 3 - 4, chúng tôi đặt index.html9 và style.css0 để làm cho phần tử index.html2 lấp đầy màn hình
Tại dòng 5, style.css2 ghi đè lề mặc định của trình duyệt
Thông thường nên đặt style.css3 (dòng 10) để bao gồm đường viền và phần đệm theo chiều rộng và chiều cao của phần tử
Đối với phần tử index.html0, thông thường sẽ đặt style.css5 và style.css6 để chiếm toàn bộ chế độ xem (dòng 14 và 15). Hãy thử thay đổi nó thành style.css7. Bạn sẽ thấy gì? . Đặt style.css9 (dòng 16) làm cho hiệu ứng trở nên rõ ràng
Ở dòng 17 và 18, đặt index.html0 và index.html1 làm trung tâm văn bản
Chúng tôi đã trả lời câu hỏi đầu tiên. Bây giờ chúng ta làm thêm một chút
Một index.html2 (dòng 5 - 9) được thêm vào phần index.html2 và nó chứa ba mục
Các bộ quy tắc được điều chỉnh tương ứng trong style.css
Id index.html2 sử dụng bố cục index.html6 (dòng 17)
Lớp index.html7 đặt index.html8 (dòng 23)
Các mặt hàng được phân bố đều trên màn hình theo khai báo tại dòng 19
Thay vì mã hóa cứng index.html9, chúng tôi có thể làm cho chiều rộng của mục đáp ứng với chiều rộng của vùng chứa
Tại dòng 2, !0 được đặt thành 1
Cho đến nay, chúng tôi đã sử dụng !1 để căn giữa văn bản. Màn hình index.html6 có thể đạt được hiệu ứng tương tự
Với một dòng thừa, dòng 6 - 8 cũng căn giữa văn bản
Hãy xem thuộc tính !3 ở dòng 2. Cú pháp của nó được định nghĩa như sau
- !4
- !5. Xác định !0 của mục linh hoạt. Các giá trị âm được coi là không hợp lệ. Mặc định là 1 khi bỏ qua
- !7. Xác định !8 của mục linh hoạt. Các giá trị âm được coi là không hợp lệ. Mặc định là 1 khi bỏ qua
- !9. Xác định style.css0 của mục linh hoạt. Kích thước ưu tiên bằng 0 phải có đơn vị để tránh bị hiểu là tính linh hoạt. Mặc định là 0 khi bỏ qua
Chúng tôi đã thấy rằng cài đặt index.html6 đến style.css2 sẽ tăng các mục. Đó là giá trị !0
Sau đây là những câu hỏi phỏng vấn tiềm năng
Điều gì xảy ra nếu index.html6 không được đặt và index.html9 cũng vậy?
Sau đó, chiều rộng được đặt thành chiều rộng nội dung. Do đó, mục style.css6 rộng hơn mục style.css7
Điều gì xảy ra nếu chúng ta loại bỏ style.css8 khỏi index.html2 (dòng 6) trong đoạn mã dưới đây?
Chiều rộng bổ sung không còn được phân phối
Điều gì xảy ra nếu chúng ta đặt head0 (dòng 2) trong đoạn mã dưới đây?
Với cài đặt này, !0 là 0, !8 là 1 và style.css0 là head4. Chiều rộng của mỗi mục được cố định ở mức head4 mà không tăng
Điều gì xảy ra nếu chúng ta đặt head6 (dòng 2) trong đoạn mã dưới đây?
Với cài đặt này, !0 là 1, !8 là 1 và style.css0 là head4. Các mặt hàng có chiều rộng đầy đủ
Điều gì sẽ xảy ra nếu style.css0 là link2 (dòng 2 trong mã bên dưới), trong đó 3 mục rộng hơn khung nhìn?
Với vùng chứa được đặt thành link3, các mục bổ sung sẽ chuyển sang các hàng tiếp theo. Trong trường hợp này, tất cả các mục xếp chồng lên nhau
Nếu chúng ta tắt flex-grow ở dòng 2 thì sao?
Sau đó, các mục xếp chồng lên nhau không phát triển
Chúng tôi đã sử dụng flex để khám phá các bố cục khác nhau. Nó là đủ để xây dựng một ứng dụng Web đơn giản. Chúng ta cũng có thể sử dụng bố cục lưới để hoàn thành nhiệm vụ tương tự. Các vị trí tương đối hoặc tuyệt đối truyền thống cũng có thể hoạt động tốt. Đơn giản chỉ cần chọn một cách mà bạn cảm thấy thoải mái nhất
Là một phần của thực hành, bạn có thể tạo một ứng dụng Web với bố cục sau đây không?
Nó là dễ dàng, phải không?
Đây là index.html
Đây là style.css
Tác vụ JavaScript
JavaScript được sử dụng để lập trình hành vi của các trang web. Một cuộc phỏng vấn ứng dụng web thường bao gồm một số khía cạnh tương tác
Đối với ứng dụng Web trước, chúng tôi sẽ thêm phần tương tác. Khi mỗi mục được nhấp vào, màu nền của nó sẽ được thay đổi thành màu xanh lam. Sau 1 giây, màu sẽ trở lại màu hồng
Có 4 bước để thêm phần tương tác
- Tạo thẻ link6
- Truy cập các phần tử bên trong thẻ script
- Triển khai xử lý sự kiện
- Thêm chỉ dẫn trực quan
Tạo thẻ tập lệnh
Có thể thêm thẻ script vào phần đầu hoặc phần thân. Chúng ta nên đặt nó ở đâu?
Đặt thẻ script vào phần head nếu nó được thực thi khi nó được gọi hoặc khi một sự kiện được kích hoạt. Nếu không, hãy đặt nó vào index.html2. Khi nó nằm trong phần index.html2, hãy đặt nó ở cuối phần index.html2 để không làm chậm quá trình tải nội dung HTML
Nói chung, nên đặt tất cả các tập lệnh trong phần head để quản lý dễ dàng hơn
Truy cập các phần tử bên trong thẻ script
Một phần tử đích có thể được truy xuất từ tham số xử lý sự kiện. Hoặc nó có thể được lấy từ một số API
- link2
- link3
- link4
- link5
Phương thức link2 trả về phần tử có thuộc tính link7 với giá trị được chỉ định. Các API khác trả về một tập hợp tất cả các phần tử trong tài liệu với tính năng được chỉ định. Bộ sưu tập là một mảng giống như đối tượng. Nó cần được chuyển đổi thành một mảng để truy cập API mảng
Phần tử hoặc các phần tử cũng có thể được truy xuất bởi (các) bộ chọn CSS
- link8
- link9
Sau khi JavaScript truy xuất phần tử x, nó có thể được truy cập để thay đổi các thuộc tính, chẳng hạn như link0 , link1, v.v.
Triển khai xử lý sự kiện
Có ba cách để xử lý các sự kiện
- Trong một phần tử HTML, nó có thể được xử lý bởi thuộc tính link2. Ví dụ: link3 và link4
- Trong JavaScript, nó có thể được tạo dưới dạng hàm link2 cho phần tử đã chỉ định. Lấy phần tử x làm ví dụ, trình xử lý sự kiện có thể được viết là link6
- Trong JavaScript, phương thức link7 gắn một trình xử lý sự kiện vào phần tử đã chỉ định. Lấy phần tử x làm ví dụ, trình xử lý sự kiện có thể được viết là link8
Thêm chỉ dẫn trực quan
Luôn luôn là một ý tưởng hay khi cung cấp các chỉ dẫn trực quan cho người dùng. Đối với bài tập này, khi chuột vào một mục, việc thay đổi mục đó thành con trỏ sẽ nhắc nhở người dùng rằng mục đó có thể nhấp được. Trong đoạn mã dưới đây, dòng 11 đạt được hiệu ứng này
Chúng tôi đã giải thích 4 bước để thêm phần tương tác vào ứng dụng Web. Bạn đã sẵn sàng để thử chưa?
Giải pháp 1. Sử dụng thuộc tính link9 của phần tử HTML
Trình xử lý sự kiện, index.html00, được triển khai trong phần đầu (dòng 9 - 14)
Tại các dòng 19, 28 và 33, thuộc tính link9 được thêm vào phần tử index.html0. index.html03 được truyền vào dưới dạng phần tử hiện tại. Ngoài ra, index.html04 hoạt động theo cách tương tự (dòng 20)
Giải pháp 2. Sử dụng phương thức addEventListener() của JavaScript
Trong giải pháp này, thuộc tính link9 của phần tử được thay thế bằng mã ở dòng 43 - 46 trong phần index.html2
Nếu bạn di chuyển JavaScript từ phần index.html2 sang phần head, nó sẽ phàn nàn rằng các mục không được xác định do DOM chưa được tải
Tuy nhiên, thật khó để duy trì khi mã JavaScript được chia thành cả hai phần head và index.html2. Có cách nào để giải quyết vấn đề không?
Giải pháp 3. Sử dụng cửa sổ của JavaScript. phương pháp tải
Tại các dòng 15 - 20, mã khởi tạo JavaScript được bao bọc bên trong index.html11, được kích hoạt khi tải toàn bộ trang
Bây giờ, tất cả mã JavaScript được liệt kê gọn gàng trong phần head
Sự kết luận
Chúng tôi đã thiết lập một ứng dụng Web bằng HTML, CSS và JavaScript. Sẽ có nhiều câu hỏi hơn, chẳng hạn như
- Sự khác biệt giữa index.html11 và index.html14 là gì?
- Làm cách nào để ngăn sự kiện sủi bọt nếu có nhiều trình xử lý sự kiện?
- Làm thế nào để thực hiện ủy quyền sự kiện?
Đây là điểm khởi đầu cho một cuộc phỏng vấn dài 1 giờ thông thường. Tập luyện giúp hoàn hảo hơn. Thưởng thức mã hóa