Công dụng chính của javascript là gì?

Trong bài viết này, chúng tôi thảo luận về những gì JavaScript có thể được sử dụng trên web, nhược điểm của nó và cách sử dụng nó một cách có trách nhiệm

Giới thiệu

Giờ đây, Chương trình giảng dạy về Tiêu chuẩn Web đã đưa bạn qua các khái niệm cơ bản cốt lõi của lập trình, đã đến lúc lùi lại một bước từ các chi tiết và xem xét kỹ hơn những gì bạn thực sự có thể làm với JavaScript — tại sao bạn lại muốn học

Đây là một thời điểm thú vị, vì việc sử dụng JavaScript đã chuyển từ một vấn đề kiến ​​thức bên lề sang một kỹ năng phát triển web chính thống trong vài năm qua. Ngay bây giờ, rất khó để có được một công việc như một nhà phát triển web mà không có kỹ năng JavaScript

Làm thế nào mọi người trở nên thích JavaScript

Máy tính từng chậm hơn nhiều và trình duyệt diễn giải JavaScript rất tệ. Hầu hết các nhà phát triển đến từ thế giới phát triển back-end. Trước đó, JavaScript dường như là một ý tưởng tồi

Mặt khác, chi phí lưu trữ tệp rất cao. Đây là nơi JavaScript xuất hiện. JavaScript được thực thi trên máy tính của người dùng khi họ truy cập trang, nghĩa là bất kỳ điều gì bạn có thể làm trong JavaScript sẽ không gây thêm áp lực xử lý lên máy chủ của bạn. Do đó, nó là phía khách hàng. Điều này làm cho các trang web phản hồi nhanh hơn nhiều đối với người dùng cuối và ít tốn kém hơn về lưu lượng truy cập máy chủ

Bỏ qua ngày hôm nay – các trình duyệt hiện đại có JavaScript được triển khai tốt, máy tính nhanh hơn nhiều và băng thông rẻ hơn rất nhiều, vì vậy rất nhiều tiêu cực ít nghiêm trọng hơn. Tuy nhiên, việc cắt giảm các chuyến đi khứ hồi của máy chủ bằng cách thực hiện mọi thứ trong JavaScript vẫn dẫn đến các ứng dụng web phản hồi nhanh hơn và trải nghiệm người dùng tốt hơn

Nhược điểm của JavaScript

Ngay cả với tất cả những cải tiến này, vẫn có một nhược điểm. JavaScript không ổn định. Không phải bản thân ngôn ngữ mà là môi trường nó được triển khai trong. Bạn không biết máy tính nào ở đầu nhận trang web của mình, bạn không biết máy tính bận rộn với những thứ khác như thế nào và bạn không biết liệu một số JavaScript khác trong một tab khác của trình duyệt có đang nghiền nát mọi thứ hay không. . Cho đến khi các trình duyệt bắt đầu có các tài nguyên xử lý khác nhau cho các tab và cửa sổ khác nhau [còn được gọi là luồng], vấn đề này sẽ luôn là một vấn đề. Nhiều luồng được cung cấp ở một mức độ nhất định bằng một tính năng HTML5 mới có tên là Web worker và tính năng này có hỗ trợ trình duyệt hợp lý

Ngoài ra, JavaScript thường bị tắt trong trình duyệt vì lo ngại về bảo mật hoặc vì JavaScript thường được sử dụng để làm phiền mọi người hơn là để cải thiện trải nghiệm của họ. Ví dụ: nhiều trang web vẫn cố gắng bật lên các cửa sổ mới theo ý muốn của bạn hoặc che nội dung bằng quảng cáo cho đến khi bạn nhấp vào liên kết để loại bỏ nó

JavaScript có thể làm gì cho bạn

Hãy lùi lại một bước và đếm giá trị của JavaScript

• JavaScript rất dễ triển khai. Tất cả những gì bạn cần làm là đặt mã của mình vào tài liệu HTML và nói với trình duyệt rằng đó là JavaScript
• JavaScript hoạt động trên máy tính của người dùng web — ngay cả khi họ ngoại tuyến
• JavaScript cho phép bạn tạo các giao diện có độ phản hồi cao giúp cải thiện trải nghiệm người dùng và cung cấp chức năng động mà không phải đợi máy chủ phản ứng và hiển thị một trang khác
• JavaScript có thể tải nội dung vào tài liệu nếu và khi người dùng cần nó mà không cần tải lại toàn bộ trang — điều này thường được gọi là Ajax
• JavaScript có thể kiểm tra những gì có thể xảy ra trong trình duyệt của bạn và phản ứng tương ứng — đây được gọi là Nguyên tắc của JavaScript không phô trương hoặc đôi khi là tập lệnh phòng thủ
• JavaScript có thể giúp khắc phục sự cố trình duyệt hoặc vá các lỗ hổng trong hỗ trợ trình duyệt — ví dụ: khắc phục sự cố bố cục CSS trong một số trình duyệt nhất định

Đó là rất nhiều đối với một ngôn ngữ mà cho đến gần đây vẫn bị các lập trình viên cười nhạo vì ủng hộ “ngôn ngữ lập trình cao hơn”. Một phần trong thời kỳ phục hưng của JavaScript là ngày nay chúng ta đang xây dựng các ứng dụng web ngày càng phức tạp hơn và tính tương tác cao đòi hỏi phải có Flash [hoặc các plugin khác] hoặc tập lệnh. JavaScript được cho là cách tốt nhất để sử dụng, vì nó là một tiêu chuẩn web, nó được hỗ trợ nguyên bản trên các trình duyệt [ít nhiều — một số điểm khác nhau giữa các trình duyệt và những điểm khác biệt này sẽ được thảo luận ở những vị trí thích hợp trong các bài viết tiếp theo bài viết này],

Sử dụng phổ biến của JavaScript

Việc sử dụng JavaScript đã thay đổi qua nhiều năm chúng tôi đã sử dụng nó. Lúc đầu, tương tác JavaScript với trang web hầu như chỉ giới hạn ở việc tương tác với các biểu mẫu, đưa ra phản hồi cho người dùng và phát hiện khi họ thực hiện một số việc nhất định. Chúng tôi đã sử dụng alert[] để thông báo cho người dùng về điều gì đó [xem Hình 1], confirm[] để hỏi xem điều gì đó có thể làm được hay không và prompt[] hoặc trường biểu mẫu để nhận thông tin đầu vào của người dùng

Hình 1. Thông báo cho người dùng cuối về các lỗi bằng cách sử dụng câu lệnh alert[] là tất cả những gì chúng tôi có thể làm trong những ngày đầu của JavaScript. Không đẹp cũng không tinh tế

Điều này chủ yếu dẫn đến các tập lệnh xác thực ngăn người dùng gửi biểu mẫu đến máy chủ khi có lỗi và các trình chuyển đổi và máy tính đơn giản. Ngoài ra, chúng tôi đã quản lý để xây dựng những thứ cực kỳ vô dụng như lời nhắc hỏi tên người dùng chỉ để in nó ra ngay sau đó

Một thứ khác mà chúng tôi đã sử dụng là document.write[] để thêm nội dung vào tài liệu. Chúng tôi cũng đã làm việc với các khung và cửa sổ bật lên và nhiều người đã mất hết can đảm và nhổ tóc để cố gắng bắt chúng nói chuyện với nhau. Nghĩ về hầu hết các công nghệ này sẽ khiến bất kỳ nhà phát triển nào cũng phải lắc lư tới lui và cuộn người lại thành tư thế bào thai lắp bắp “đuổi chúng đi”, vì vậy chúng ta đừng tập trung vào những điều này — có nhiều cách tốt hơn để sử dụng JavaScript

Nhập tập lệnh DOM

Khi các trình duyệt bắt đầu hỗ trợ và triển khai Mô hình Đối tượng Tài liệu [DOM], cho phép chúng ta tương tác phong phú hơn với các trang web, JavaScript bắt đầu trở nên thú vị hơn

DOM là một đại diện đối tượng của tài liệu. Ví dụ: đoạn trước [kiểm tra nguồn của nó bằng cách sử dụng nguồn xem] trong DOM-speak là một nút phần tử có nodeName của p. Nó chứa ba child nodes

• một nút văn bản có chứa "Khi các trình duyệt bắt đầu hỗ trợ và triển khai " dưới dạng nodeValue của nó;
• một nút phần tử có nodeName của confirm[]0;
• một nút văn bản khác có nodeValue là ", cho phép chúng tôi tương tác phong phú hơn nhiều với các trang web, JavaScript bắt đầu trở nên thú vị hơn. "

Nút con confirm[]0 cũng có một nút thuộc tính có tên là confirm[]3 với giá trị là "http. //www. w3. org/DOM/" và nút con là nút văn bản có nodeValue của "Mô hình đối tượng tài liệu [DOM]"

Bạn cũng có thể trình bày đoạn văn này một cách trực quan bằng sơ đồ hình cây, như trong Hình 2

Hình 2. Một đại diện trực quan của cây DOM mẫu của chúng tôi

Nói theo cách của con người, bạn có thể nói rằng DOM giải thích cả các loại, giá trị và thứ bậc của mọi thứ trong tài liệu — hiện tại bạn không cần biết gì thêm. Để biết thêm thông tin về DOM, hãy xem bài viết Di chuyển qua DOM sau trong khóa học

Sử dụng DOM bạn có thể

• Truy cập bất kỳ phần tử nào trong tài liệu và thao tác giao diện, nội dung và thuộc tính của nó
• Tạo các phần tử và nội dung mới và áp dụng chúng vào tài liệu khi cần thiết

Điều này có nghĩa là chúng ta không còn phải dựa vào các cửa sổ, khung, biểu mẫu và các cảnh báo xấu xí nữa và có thể đưa ra phản hồi cho người dùng trong tài liệu theo cách thức độc đáo, như được chỉ ra trong Hình 3

Hình 3. Sử dụng DOM, bạn có thể tạo các thông báo lỗi đẹp hơn và ít xâm phạm hơn

Cùng với xử lý sự kiện, đây là một kho vũ khí rất mạnh để tạo các giao diện tương tác và đẹp mắt

Xử lý sự kiện có nghĩa là mã của chúng tôi phản ứng với những điều xảy ra trong trình duyệt. Đây có thể là những thứ tự động xảy ra — như trang tải xong — nhưng hầu hết thời gian chúng tôi phản ứng với những gì người dùng đã làm với trình duyệt

Người dùng có thể thay đổi kích thước cửa sổ, cuộn trang, nhấn một số phím nhất định hoặc nhấp vào liên kết/nút/thành phần bằng chuột. Với xử lý sự kiện, chúng tôi có thể đợi những điều này xảy ra và yêu cầu trang web phản hồi những hành động này như chúng tôi muốn. Trong khi trước đây, nhấp vào bất kỳ liên kết nào sẽ đưa khách truy cập trang web đến một tài liệu khác, giờ đây chúng tôi có thể chiếm quyền điều khiển chức năng này và thực hiện một số việc khác như hiển thị và ẩn bảng điều khiển hoặc lấy thông tin trong liên kết và sử dụng thông tin đó để kết nối với dịch vụ web

Các sự kiện được trình bày chi tiết hơn trong bài viết Xử lý các sự kiện trong JavaScript ở phần sau của khóa học

Các cách sử dụng JavaScript hiện đại khác

Và về cơ bản đây là những gì chúng tôi đang làm ngày nay với JavaScript. Chúng tôi cải thiện giao diện web cũ, đã được thử nghiệm và chân thực — nhấp vào liên kết, nhập thông tin và gửi biểu mẫu, v.v. - để phản ứng nhanh hơn với người dùng cuối. Ví dụ

• Biểu mẫu đăng ký có thể kiểm tra xem tên người dùng của bạn có khả dụng khi bạn nhập hay không, giúp bạn không phải tải lại trang một cách khó chịu
• Hộp tìm kiếm có thể cung cấp cho bạn các kết quả được đề xuất khi bạn nhập, dựa trên những gì đã được nhập cho đến nay [ví dụ: “bi” có thể đưa ra các đề xuất để chọn từ chứa chuỗi này, chẳng hạn như “bird”, “big” và “ . Mẫu sử dụng này được gọi là tự động hoàn thành
• Thông tin thay đổi liên tục có thể được tải định kỳ mà không cần sự tương tác của người dùng, ví dụ: kết quả trận đấu thể thao hoặc mã thị trường chứng khoán
• Thông tin hữu ích và có nguy cơ dư thừa đối với một số người dùng có thể được tải khi và nếu người dùng chọn truy cập thông tin đó. Ví dụ: menu điều hướng của một trang web có thể là 6 liên kết nhưng hiển thị các liên kết đến các trang sâu hơn theo yêu cầu khi người dùng kích hoạt một mục menu
• JavaScript có thể khắc phục các sự cố về bố cục. Sử dụng JavaScript, bạn có thể tìm thấy vị trí và diện tích của bất kỳ phần tử nào trên trang và kích thước của cửa sổ trình duyệt. Sử dụng thông tin này, bạn có thể ngăn chặn các yếu tố chồng chéo và các vấn đề khác như vậy. Ví dụ, bạn có một menu với nhiều cấp độ;
• JavaScript có thể nâng cao giao diện mà HTML mang lại cho chúng ta. Mặc dù thật tuyệt khi có một hộp nhập văn bản nhưng bạn có thể muốn có một hộp tổ hợp cho phép bạn chọn từ danh sách các giá trị đặt trước hoặc nhập giá trị của riêng bạn. Sử dụng JavaScript, bạn có thể nâng cao hộp nhập thông thường để làm điều đó
• Bạn có thể sử dụng JavaScript để tạo hiệu ứng động cho các thành phần trên một trang — ví dụ: để hiển thị và ẩn thông tin hoặc đánh dấu các phần cụ thể của trang — điều này có thể mang lại trải nghiệm người dùng phong phú hơn, dễ sử dụng hơn. Có thêm thông tin về điều này trong bài viết hoạt hình JavaScript sau này trong khóa học

Sử dụng JavaScript hợp lý và có trách nhiệm

Không có nhiều thứ bạn không thể làm với JavaScript — đặc biệt khi bạn kết hợp nó với các công nghệ khác như Canvas hoặc SVG. Tuy nhiên, sức mạnh lớn đi kèm với trách nhiệm lớn và bạn phải luôn nhớ những điều sau khi sử dụng JavaScript

• JavaScript có thể không khả dụng — điều này rất dễ kiểm tra, vì vậy không thực sự là vấn đề. Tuy nhiên, những thứ phụ thuộc vào JavaScript nên được tạo với lưu ý đến điều này và bạn nên cẩn thận để trang web của mình không bị hỏng [i. e. chức năng thiết yếu không khả dụng] nếu không có JavaScript
• Nếu việc sử dụng JavaScript không hỗ trợ người dùng đạt được mục tiêu nhanh hơn và hiệu quả hơn thì có thể bạn đang sử dụng sai
• Khi sử dụng JavaScript, chúng tôi thường phá vỡ các quy ước mà mọi người đã quen thuộc qua nhiều năm sử dụng web [ví dụ: nhấp vào liên kết để chuyển đến các trang khác hoặc biểu tượng giỏ hàng nhỏ có nghĩa là “giỏ hàng”]. Mặc dù các kiểu sử dụng này có thể đã lỗi thời và không hiệu quả, nhưng việc thay đổi chúng vẫn có nghĩa là khiến người dùng thay đổi cách thức của họ — và điều này khiến con người cảm thấy khó chịu. Chúng tôi thích được kiểm soát và một khi chúng tôi hiểu điều gì đó, chúng tôi rất khó đối phó với sự thay đổi. Các giải pháp JavaScript của bạn sẽ tốt hơn một cách tự nhiên so với tương tác trước đó, nhưng không quá khác biệt đến mức người dùng không thể liên tưởng đến nó thông qua trải nghiệm trước đó của họ. Nếu bạn quản lý để có được một khách truy cập trang web nói rằng “à ha — điều này có nghĩa là tôi không phải đợi” hoặc “Thật tuyệt — bây giờ tôi không phải thực hiện thêm bước khó chịu này nữa” — bạn đã có cho mình một công dụng tuyệt vời cho JavaScript
• JavaScript không bao giờ nên là một biện pháp bảo mật. Nếu bạn cần ngăn người dùng truy cập dữ liệu hoặc bạn có khả năng xử lý dữ liệu nhạy cảm, thì đừng dựa vào JavaScript. Bất kỳ biện pháp bảo vệ JavaScript nào cũng có thể dễ dàng bị thiết kế ngược và vượt qua, vì tất cả mã đều có sẵn để đọc trên máy khách. Ngoài ra, người dùng chỉ cần tắt JavaScript trong trình duyệt của họ

Sự kết luận

JavaScript là một công nghệ tuyệt vời để sử dụng trên web. Nó không khó để học và nó rất linh hoạt. Nó hoạt động độc đáo với các công nghệ web khác — chẳng hạn như HTML và CSS — và thậm chí có thể tương tác với các plugin như Flash. JavaScript cho phép chúng tôi xây dựng giao diện người dùng có độ phản hồi cao, ngăn tải lại trang gây khó chịu và thậm chí khắc phục các sự cố hỗ trợ cho CSS. Sử dụng các tiện ích bổ sung phù hợp của trình duyệt [chẳng hạn như Google Gears hoặc Yahoo Browser Plus], thậm chí bạn có thể sử dụng JavaScript để làm cho các hệ thống trực tuyến khả dụng ngoại tuyến và tự động đồng bộ hóa sau khi máy tính trực tuyến

JavaScript cũng không bị hạn chế đối với các trình duyệt. Tốc độ và dung lượng bộ nhớ nhỏ của JavaScript so với các ngôn ngữ khác mang lại ngày càng nhiều ứng dụng cho nó — từ tự động hóa các tác vụ lặp đi lặp lại trong các chương trình như Illustrator, cho đến sử dụng nó làm ngôn ngữ phía máy chủ với trình phân tích cú pháp độc lập. Tương lai rộng mở

Mục đích chính của JavaScript là gì?

Việc sử dụng phổ biến nhất cho JavaScript là gì?