Hướng dẫn why javascript is used in frontend - tại sao javascript được sử dụng ở giao diện người dùng

Vai trò của nhà phát triển web phía trước là tạo mã và đánh dấu được hiển thị bởi trình duyệt web khi bạn truy cập một trang web (đọc: họ kiểm soát những gì bạn thấy khi bạn truy cập trang web).

Có ba thành phần chính khi phát triển mặt trận: HTML, CSS và JavaScript. Mỗi người rất quan trọng để tạo một trang web những gì nó là. HTML là cấu trúc và nội dung của trang web, CSS (bảng kiểu xếp tầng) làm cho nó trông đẹp, và cuối cùng, JavaScript là những gì tăng cường khả năng tương tác của nó. Mỗi công việc tay trong tay khi nói đến việc xây dựng các trang web, nhưng trọng tâm của bài đăng trên blog này & nbsp; là trên JavaScript và cách mà nó sử dụng.

Tương tác

JavaScript là một công cụ rất mạnh mẽ có thể làm nhiều việc cho một trang web. Đối với một, nó cung cấp năng lượng cho trang web tương tác chung. JavaScript cho phép xây dựng các thành phần UI phong phú như thanh trượt hình ảnh, cửa sổ bật lên, các menu lớn điều hướng trang web, xác nhận hình thức, tab, accordions, và nhiều hơn nữa.

Nó cũng có thể thực hiện các hoạt động tinh vi hơn. Chẳng hạn, bạn có thể nhấp vào hộp kiểm trên biểu mẫu và, tùy thuộc vào hộp kiểm được chọn, nó tải một cửa sổ bật lên hỏi bạn một câu hỏi khác. Nó cung cấp cho trang web chức năng bổ sung mà không thể đạt được với HTML và CSS. JavaScript cho phép các trang web phản hồi hoạt động của người dùng và tự động cập nhật và tất cả mà không yêu cầu tải lại trang để thay đổi ngoại hình.

Ajax

Chúng tôi biết những gì bạn có thể nghĩ, nhưng chúng tôi không nói về những thứ bạn làm sạch bồn rửa của bạn! Ajax là viết tắt của JavaScript không đồng bộ và XML. Về cơ bản, nó cho phép một trang web tương tác với máy chủ web trong nền mà không tải lại trang.

Ví dụ, chúng ta hãy lấy một danh sách các sự kiện trên trang web. Theo mặc định, các sự kiện này được sắp xếp theo tháng, gần đây nhất và sau đó được phân loại theo loại. Khi thay đổi bộ lọc ’tất cả các bộ lọc thành’ chung, một thao tác được kích hoạt trong nền và trang được tải lại một phần với các mục mới được truy vấn của chúng tôi. Trang này không nhấp nháy khi tải lại và chúng tôi ở lại chính xác nơi chúng tôi đang ở, điều này tạo nên trải nghiệm web dễ chịu hơn.

Điều này cũng có thể được sử dụng trên các biểu mẫu để gửi dữ liệu đến máy chủ để được lưu trữ; Một lần nữa, để giữ cho trang không tải lại. AJAX cho phép một trang web gửi và nhận dữ liệu từ máy chủ web mà không kích hoạt làm mới trang, cho phép trải nghiệm người dùng liền mạch giữa người dùng và ứng dụng web.

Khả năng tương thích và tuân thủ tiêu chuẩn trình duyệt

Có khá nhiều trình duyệt web ngoài kia: Firefox, Chrome, Safari, Opera, Internet Explorer (10, 11, Edge) và tất cả đều chạy trên các hệ điều hành và thiết bị khác nhau. Thỉnh thoảng, mỗi trình duyệt này có các lỗi và quirk độc đáo riêng. Không có gì là hoàn hảo, thật không may. Mặc dù các tiêu chuẩn tuân thủ W3C tiếp tục được cải thiện trên bảng, nhưng vẫn có thời gian mà một nhà phát triển web phía trước cần giải quyết các vấn đề bằng cách tận dụng JavaScript.

Ví dụ: bạn có thể viết quy tắc kiểu CSS hoạt động hoàn hảo trong tất cả các trình duyệt, ngoại trừ Internet Explorer 10. Vấn đề mà bạn phải đối mặt là viết lại toàn bộ phần - mà bạn đã hoàn hảo - hoặc nhắm mục tiêu một trình duyệt và Viết trong một cách giải quyết cho nó. Tuy nhiên, bằng cách sử dụng thư viện JavaScript như Modernizr, bạn có thể giúp cô lập mã với trình duyệt cụ thể đó. Bằng cách tận dụng kịch bản mà bạn đã viết, một vài quy tắc phong cách mới, bạn đã giải quyết vấn đề.

bổ sung

Có nhiều plugin khác nhau và chạy ra khỏi JavaScript. Nếu bạn đã từng truy cập một trang web có quảng cáo biểu ngữ, có hỗ trợ trò chuyện, gợi ý nội dung, có biểu mẫu hoặc cung cấp chia sẻ xã hội, thì có một cơ hội tốt, nó được cung cấp bởi plugin JavaScript của bên thứ 3. Thông thường, các plugin này có các tùy chọn có thể định cấu hình cần thiết lập bổ sung để hoạt động đúng. Hiểu các tùy chọn cấu hình của các plugin này là rất cần thiết. Các plugin thường được dự định sẽ dễ dàng rơi vào một trang web với rất ít sửa đổi.

Khung

Khung JavaScript có thể là một công cụ mạnh mẽ mà bạn có thể sử dụng để giúp hiển thị trang. Chúng thường chỉ được sử dụng khi có các tương tác động phức tạp cần phải xảy ra.

Một ví dụ về điều này là nếu bạn có một hình thức nhiều bước. Trong trường hợp này, quy trình điền vào biểu mẫu có một số bước nhất định chỉ xảy ra dựa trên thông tin đã nhập trước đó. Ngoài ra, một số dữ liệu nhất định được điền cho một số đầu vào cũng như các đầu vào trước đó. Làm điều này mà không có khuôn khổ có thể là nhiệm vụ rất khó để đạt được. Mọi thứ có thể gặp vấn đề, và điều này có thể xảy ra nhanh chóng.

Sử dụng khung JavaScript giúp giải quyết các vấn đề này để bạn có thể hoàn thành biểu mẫu tuyệt vời của mình và làm cho khách hàng của bạn hài lòng. Mặc dù có hàng tá, những cái phổ biến nhất (kể từ khi viết bài này) là Google, Angular, Facebook, Reactand the Open Source Vue.js.

JavaScript là một công cụ rất quan trọng cho một nhà phát triển web phía trước. Không có nó, các trang web sẽ không trở thành ứng dụng web động mà ngày nay. Sẽ không có băng chuyền hình ảnh. Sẽ không có trang tải lại trang một phần mà giữ vị trí của bạn trên trang. Sẽ có ’không có nhiều thứ mà chúng tôi đã quen với. JavaScript giống như một con dao quân đội Thụy Sĩ theo một nghĩa nào đó, nó có thể làm tất cả những gì bạn cần và có thể chuẩn bị cho những thứ bạn không biết bạn cần.

Tại sao JavaScript là cần thiết cho mặt trước?

JavaScript có được sử dụng trong phát triển mặt trước không?

JavaScript có phải là tốt nhất cho mặt trước không?