JQuery vs JavaScript: Nên học jQuery hay học JavaScript

Khi mới bắt đầu học phát triển web, bạn nhận thấy rằng ngày càng có nhiều cánh cửa để lựa chọn và bắt đầu khám phá. Khi con đường học tập trở ổn định hơn thì các yếu tố tương tác khác nhau, sự tối ưu hóa và mọi thứ dường như sẽ đến một cách tự nhiên. Cho dù bạn chọn học phát triển web là gì – học với giáo viên, trực tuyến hay tự học thì có lẽ sự lựa chọn trong các tình huống này sẽ nên là JavaScript. Nó là loại ngôn ngữ của internet! Nhưng nếu vẫn có một lựa chọn khác thì sao? Trong hướng dẫn này, chúng ta sẽ khám phá về jQuery vs JavaScript và mọi thông tin cần thiết được cung cấp.

Tôi sẽ bàn về cả hai ngôn ngữ này – JavaScript là gì, JQuery là gì, chúng được sử dụng với mục đích gì, ưu và nhược điểm, v.v. Sau đó, khi đã hiểu được cả hai, chúng ta sẽ so sánh và đối chiếu chúng theo các tiêu chí khác nhau – khả năng tiếp cận mã code, cơ hội nghề nghiệp, v.v. Vì vậy, hãy cùng khám phá ngay bây giờ!

jQuery hay JavaScript

Khi tìm kiếm một số câu trả lời cho các vấn đề JavaScript trực tuyến, bạn chỉ tìm thấy câu trả lời đơn giản như ‘jQuery có vai trò gì’.

Có thể bạn sẽ thắc mắc rằng ‘jQuery là gì?’. Bạn nghĩ rằng mình phải biết JavaScript, nhưng bây giờ có một ngôn ngữ khác có thể thay thế? Những lại chưa xem xét đến việc lựa chọn jQuery vs JavaScript.

Hoặc có lẽ bạn đã tiếp cận tình huống này theo cách ngược lại. jQuery là phương pháp được đề xuất cho trang web, nhưng giờ bạn lại đọc được rằng JavaScript có thể làm mọi thứ như jQuery làm và hơn thế nữa. Ngoài ra, coding bằng vanilla JavaScript cũng giúp bạn trở thành một nhà phát triển tốt hơn.

Vậy ‘JavaScript là gì? Tôi không thể chỉ sử dụng jQuery được hay sao?

Nhưng hãy giữ những thắc mắc đó – nó có thể khiến bạn hoang mang nếu biết thêm rằng jQuery vs Javascript không hoàn toàn khác nhau?

jQuery là JavaScript

Chúng tôi có thể đã đưa ra tình huống giữa jQuery vs JavaScript như đó là trận chiến giữa hai công nghệ cạnh tranh, nhưng thực tế, điểm khác biệt giữa jQuery vs JavaScript là jQuery chỉ là một cách sử dụng JavaScript khác.

jQuery thường được gọi là khung framework hoặc thư viện. Tuy nhiên, trước khi giải thích những thuật ngữ đó có nghĩa gì, hãy cùng nhắc lại để đảm bảo bạn sẽ hiểu rõ ‘JavaScript là gì?’

JavaScript

JavaScript là ngôn ngữ lập trình của trình duyệt – phạm vi tiếp cận của nó đã lan rộng ra ngoài giới hạn lập trình của trình duyệt với các mục đích sử dụng khác như mã code phía máy chủ.

Với mục đích chính là ngôn ngữ lập trình phía máy khách được viết vào mọi trình duyệt internet, chịu trách nhiệm cho các yếu tố tương tác và động trên một trang web, chẳng hạn như tuân theo và phản ứng với thông tin đầu vào của người dùng.

Vậy jQuery thì sao?

JQuery là gì?

Như đã nói, jQuery là một thư viện JavaScript. Có nghĩa đó là một tập hợp các mã code JavaScript được tập hợp cùng nhau có thể được truy cập bằng một dòng mã code đơn giản hơn nhiều, do đó giúp các nhà phát triển triển khai JavaScript dễ dàng hơn mà không phải viết mã code JavaScript phức tạp, nhờ mã code được viết sẵn trong jQuery.

Nếu đã quen thuộc với Bootstrap thì mối quan hệ giữa CSS và Bootstrap cũng tương tự vậy. Bootstrap đơn giản là một tập hợp các lệnh CSS giúp tạo kiểu trang web dễ dàng và nhanh chóng hơn. jQuery là JavaScript, Bootstrap là CSS.

Nếu không quen thuộc với Bootstrap, hãy tưởng tượng tương tự với câu hỏi jQuery vs Javascript.

Giả sử bạn đang ở trong một quán bar với Dave. Dave đã uống quá nhiều bia và anh ấy nói quá to. Bạn muốn Dave không làm bạn xấu hổ và ngừng nói to như vậy.

Bạn sẽ phải giải thích cho Dave rằng những người phụ nữ ngồi phía sau đã tỏ ra khó chịu vì anh ta.

Bạn phải giải thích rằng người đàn ông ngồi ở bàn bên cạnh bạn đã sang chỗ khác yên tĩnh hơn. Bạn nói với Dave rằng vợ anh ta sẽ không hài lòng khi một số điều về mối quan hệ của họ bị nói to cho toàn bộ quán bar.

Dave ngừng nói. Đây là cách mà JavaScript sẽ khiến Dave ngừng nói.

Còn cách của jQuery sẽ chỉ đơn giản là:

“Đừng nói nữa, Dave”.

Dave ngừng nói. Bạn đã đạt được mục đích tương tự mà chỉ cần ít từ hơn và dễ dàng hơn nhiều.

jQuery vs JavaScript trong Code

Bài học thứ nhất trong ‘Hướng dẫn jQuery tương tác của BitDegree: Tìm hiểu cách sử dụng các hiệu ứng & sự kiện của jQuery’ tạo ra sự khác biệt giữa JavaScript và jQuery rất rõ ràng trong mã code.

Ví dụ là một nút HTML mở và đóng biểu mẫu đăng nhập.

Đây là mã code JavaScript:

const login = document.getElementById(“login”); const loginMenu = document.getElementById(“loginMenu”); login.addEventListener(“click”, () => { if(loginMenu.style.display === “none”){ loginMenu.style.display = “inline”; } else { loginMenu.style.display = “none”; } });

Trong khi đây là mã code jQuery:

$(“#login”).click(() => { $(“#loginMenu”).toggle() });

Với JavaScript thì cần mất đến 9 dòng mã code trong khi với jQuery chỉ mất ba dòng.

Kết luận sớm thứ nhất

Như vậy, hiển nhiên là ta nên sử dụng jQuery phải không nào?

Nó có thể đơn giản như vậy vào một thập kỷ trước, nhưng ở năm 2018 thì jQuery không còn quá liên quan nhiều trong phát triển web và các ví dụ như mã code ở trên đang trở nên hiếm.

Vẫn có những lý do khác để tìm hiểu và sử dụng jQuery, nhưng nếu là câu hỏi về jQuery vs JavaScript thì nhu cầu học JavaScript, tìm hiểu và sử dụng đang tăng nhanh chóng, với khả năng lớn tạo ra rất nhiều chức năng jQuery thừa.

Quay lại ví dụ về quán Bar

Để thể hiện một quan điểm khác trong cuộc tranh luận về jQuery vs Javascript, hãy quay lại ví dụ để xét thêm về sự tương tự giữa chúng. Với cách đơn giản – bảo Dave im lặng là một cách hiệu quả để đạt được mục đích của bạn, Dave buồn bã và ở trong tâm trạng tồi tệ trên chiếc taxi về nhà.

Nếu sử dụng theo cách JavaScript để giải thích với Dave là anh ấy nên nói nhỏ lại thì sẽ có thể bảo vệ được cảm xúc và giữ cho anh ấy một tâm trạng tốt. Sự thuyết phục của bạn sẽ trở nên tốt hơn với chiến lược JavaScript, ngay cả khi phải mất nhiều công sức hơn.

Tương tự, nếu học JavaScript thì khả năng phát triển web của bạn sẽ lớn hơn nhiều so với việc chỉ học jQuery. Có lẽ bảo Dave im lặng sẽ không làm anh ta buồn, nhưng cũng không đoán trước được.

Để so sánh thì lệnh jQuery có thể chính xác là những gì bạn cần nhưng khó chắc chắn nếu không hiểu mã code hoạt động của jQuery. Và tất nhiên, vì jQuery được tạo thành từ mã code JavaScript nên sẽ cần hiểu JavaScript để hiểu đầy đủ cách mỗi lệnh jQuery hoạt động.

Về mặt logic, JavaScript có thể làm mọi thứ mà jQuery có thể và hơn thế nữa, bởi vì jQuery là JavaScript.

Kết luận sớm thứ hai

Sự khác biệt giữa jQuery và JavaScript là jQuery đơn giản và dễ dàng hơn nhưng JavaScript mạnh hơn và không làm Dave khó chịu. Vậy câu trả lời cho câu hỏi jQuery vs JavaScript sẽ là học JavaScript?

Điều đó là không hẳn. Sẽ không có một câu trả lời chính xác nào với tất cả các câu hỏi jQuery vs JavaScript. Học jQuery hay học JavaScript sẽ tùy thuộc vào mục tiêu nghề nghiệp và chức năng cần có trong dự án của bạn.

Mục tiêu công việc

Nếu mục tiêu là nhà phát triển front-end thì câu trả lời đơn giản là: học JavaScript. Trong mô tả việc làm có thể yêu cầu jQuery, nhưng jQuery vs JavaScript lại là một câu hỏi đơn giản cho những nhà tuyển dụng nào: họ gần như chắc chắn sẽ thích các ứng viên biết JavaScript hơn là biết jQuery.

Ngay cả khi một công ty sử dụng jQuery nhiều thì nó chỉ được cho là yếu tố đủ vì nếu có thể hiểu JavaScript thì có thể học jQuery nhanh chóng và dễ dàng. Học JavaScript khó hơn nhiều ngay cả khi bạn là bậc thầy về jQuery.

Tuy nhiên, nếu mục tiêu là trở thành một nhà thiết kế web tự do thì JavaScript có thể là không quá cần thiết. Nếu xây dựng trang web cho khách hàng trên một hệ thống quản lý nội dung như WordPress thì jQuery hoặc các plugin có sẵn miễn phí có thêm chức năng cho trang web có thể giải quyết thay thế cho JavaScript được.

Phần lớn các trang web trực tuyến có thể được xây dựng mà không cần mã code JavaScript tùy chỉnh. Có những loại chức năng trang web sẽ yêu cầu viết mã code JavaScript tùy chỉnh nhưng có những trang sẽ không. Vì vậy mà có rất nhiều công việc dành cho nhà thiết kế web có kỹ năng HTML, CSS và jQuery.

Như vậy, tôi đã trả lời các câu hỏi về JavaScript là gì và jQuery là gì. Cần phải biết rõ sự khác biệt giữa JavaScript và jQuery là gì, tuy nhiên câu trả lời về jQuery vs JavaScript này vẫn sẽ chưa thực sự rõ ràng với nhiều người.

Nếu đã quyết định muốn bắt đầu học, từ các liên kết trong hướng dẫn này, bạn có thể vào một trong hai khóa học như trong hình để bắt đầu học luôn. Nếu chỉ quan tâm đến việc so sánh chi tiết giữa 2 ngôn ngữ này thì hãy đọc tiếp bài viết.

Chức năng cụ thể

Chắc hẳn bạn đã phần nào hiểu về JavaScript là gì, jQuery là gì và giá trị của chúng trong con đường sự nghiệp đã chọn của mình, hãy cùng tìm hiểu sâu hơn về các trường hợp sử dụng cụ thể.

JavaScript có thể làm bất cứ điều gì mà jQuery làm, vậy các trường hợp sử dụng cụ thể với mã code jQuery là gì?

Tương thích trình duyệt chéo

Nhắc đến Internet Explorer với một nhà phát triển có kinh nghiệm thì bạn có thể sẽ chứng kiến ​​khuôn mặt đỏ bừng phẫn nộ như thấy một thời kỳ đen tối trong sự nghiệp của họ khi nhiều người sử dụng trình duyệt khét tiếng của Microsoft. IE8 là lỗi kinh hoàng với nhà phát triển.

Sự phát triển của jQuery có thể được cho là do nó đã bít các khoảng trống giữa các trình duyệt. Hầu hết các trình duyệt ngày nay phiên dịch JavaScript theo cùng một cách, nhưng mười năm trước đây có sự khác biệt lớn giữa các trình duyệt. Phải viết mã code theo nhiều cách khác nhau để mọi trình duyệt có thể hiểu được.

Hoặc có thể sử dụng jQuery có thể khá khó khăn với bạn. Một dòng mã code jQuery sẽ được thư viện jQuery thông dịch thành các dòng mã code JavaScript khác nhau để làm mỗi trình duyệt đọc được. Đối với các nhà phát triển, sử dụng jQuery trong những trường hợp này là điều rất hiển nhiên.

Ngày nay những khác biệt trong các trình duyệt là nhỏ. Và nếu tìm thấy sự khác biệt, ví dụ như khi sử dụng một số tính năng của bản cập nhật mới nhất cho ngôn ngữ JavaScript ES6, thì nên sử dụng một polyfill thay thế. Polyfill đơn giản là các thư viện xử lý các khác biệt giữa các trình duyệt và có thể được triển khai chỉ bằng một URL tham chiếu polyfill CDN trong thẻ script.

Các polyfill hiện đại sẽ phát hiện trình duyệt mà người dùng cuối đang sử dụng và chỉ cung cấp mã code cần thiết để điều chỉnh lại. Điều đó giúp tiết kiệm thời gian tải, vì nếu người dùng chỉ tải mã code họ cần thì trang web sẽ được tải nhanh hơn so với việc phải tải toàn bộ thư viện jQuery.

Khả năng tương thích giữa nhiều trình duyệt có lẽ là lý do chính để sử dụng jQuery, nhưng giờ đây nó không phải là giải pháp tốt nhất để giải quyết vấn đề không còn là mối lo ngại lớn như trước đây nữa.

Thao tác DOM

DOM (Document Object Model) hay Mô hình đối tượng tài liệu, là sự thông dịch của trình duyệt về trang web mà bạn dùng. Nếu nhấp chuột phải vào bất kỳ trang web nào và nhấp vào kiểm tra, trong ô Element bạn sẽ thấy DOM. Nó có thể trông giống như mã code index.html, nhưng nhiều nội dung HTML thường được kết xuất động từ máy chủ sử dụng mã code phía máy chủ như PHP.

Các phần tử DOM cũng có thể được hiển thị và thao tác bằng JavaScript, đây cũng là một lĩnh vực cực kỳ hữu ích khác của jQuery.

Với jQuery, bạn có thể nhắm mục tiêu tới các nút DOM, bản chất là các phần tử HTML như tiêu đề cấp hai với mã code.

$(“h2”)

Sau đó, có thể xâu chuỗi vào một chức năng theo mã đó để làm bất cứ điều gì bạn thích như tuân theo các sự kiện hoặc chỉnh DOM để thay đổi mọi thứ trên trang web trong khi người dùng đang sử dụng nó.

Với JavaScript, bạn có thể làm điều tương tự bằng cách sử dụng mã code

document.querySelector(“h2”)

Đó không phải là một sự khác biệt quá lớn. Trước đây, các phương thức thao tác DOM với JavaScript không dễ dàng hoặc nhất quán trên các trình duyệt. Ngoài ra, sử dụng vanilla JavaScript (vanilla JavaScript là JavaScript thuần túy, không bị thay đổi mà không có bất kỳ thư viện nào) được coi là hiệu quả hơn – nó nhanh hơn và/hoặc sử dụng ít tài nguyên bộ nhớ hơn.

Đây như một chiến thắng khác cho JavaScript trong cuộc tranh luận về jQuery vs JavaScript. Sự phổ biến của jQuery là do nhiều mã code jQuery được sử dụng trong các ứng dụng cũ và cũng có thể là các ứng dụng mới hơn vì nhiều nhà phát triển cảm thấy thoải mái hơn khi sử dụng jQuery.

Các thư viện mới như Bling.js thậm chí cho phép sử dụng cú pháp jQuery mà không cần tải toàn bộ thư viện jQuery, đó là sự ưu ái mà nhiều nhà phát triển dành cho việc viết jQuery.

Mặc dù có thể nên sử dụng JavaScript, nhưng nếu việc giảm hiệu suất sẽ không tạo ra nhiều khác biệt cho người dùng thì hãy sử dụng jQuery vì bạn có thể phát triển nhanh hơn và dễ dàng hơn so với sử dụng vanilla JavaScript để tạo logic hợp lý.

Vì vậy, trong khi định tìm hiểu cách sử dụng JavaScript vanilla cho thao tác DOM, nhưng nếu làm việc với các trường hợp khác thì hiểu các phương thức thao tác jQuery DOM gần như sẽ hữu ích tại một số điểm.

Hiệu ứng và hoạt hình

jQuery bao gồm một thư viện các hiệu ứng, phương thức chuyển đổi đã được nêu ra trong so sánh mã code jQuery và JavaScript ban đầu trong bài viết này. Phương thức chuyển đổi là một ví dụ điển hình về chức năng đơn giản mà sử dụng jQuery có thể làm được so với sử dụng JavaScript.

Ngày nay, các nhà phát triển có quyền truy cập vào Web Animations API cùng với CSS Transition. Hai công nghệ này có nguồn gốc từ trình duyệt, trình duyệt web sẽ hiểu chúng mà không cần tải bất kỳ thư viện nào và sẽ hoạt động nhanh hơn so với việc phải tải hình ảnh động từ thư viện jQuery.

jQuery sẽ là một phương thức đơn giản hơn để triển khai hoạt hình trong một số trường hợp, nhưng ngày nay nó khá hạn chế so với phạm vi các tùy chọn có nguồn gốc từ trình duyệt mà các nhà phát triển có.

APIs

Một trường hợp sử dụng tuyệt vời khác cho jQuery trong quá khứ là khả năng thực hiện các lệnh gọi API. Ví dụ, gọi một API đó là lấy dữ liệu đến trang web từ nguồn bên ngoài, bạn muốn làm nổi bật bản đồ tùy chỉnh trên trang web của mình nên đã sử dụng API để lấy dữ liệu Google Map từ Google.

Phương thức gọi API của jQuery được ưa thích rộng rãi so với phương thức XML gốc, nhưng giống như các trường hợp sử dụng khác, giờ đây có một phương thức ưu việt hơn là Fetch có nguồn gốc từ trình duyệt và cũng thân thiện với người dùng như jQuery.

Kết luận

Đôi khi công nghệ hữu ích nhất không phải là thứ để bắt đầu học. Lĩnh vực phát triển rất khó và học một ngôn ngữ quá khó khi bắt đầu sẽ có thể khiến bạn muốn từ bỏ.

JavaScript là một công cụ mạnh và sẽ không thể nắm bắt trong vài ngày hoặc thậm chí vài tuần. Ngay cả các nhà phát triển JavaScript có kinh nghiệm vẫn thường bị bối rối bởi sự hoạt động của nó.

Là người mới lập trình và phát triển web sẽ không thể làm được gì nhiều với các kỹ năng JavaScript vừa mới có được trong một vài tuần. Nhưng nếu đã biết HTML và CSS thì jQuery có thể giúp bạn tạo ra các dự án ở một trình độ khác chỉ trong vài ngày.

Có rất nhiều nhà phát triển web lần đầu tiên phát triển web bằng cách học jQuery. Mặc dù học các nguyên tắc cơ bản của JavaScript là phần quan trọng nhất để trở thành nhà phát triển Front-End giỏi, nhưng để có được một số thành tựu nhanh chóng trong lúc học thì jQuery là cách nhanh hơn để đạt được điều đó.

Khi thấy các dự án trở nên tốt hơn với jQuery, bạn sẽ có động lực để tìm hiểu thêm; với JavaScript thì sẽ nhiều tuần học hỏi và nhiều sai lầm hơn trước khi có đưowjc thành tựu tương tự.

Học jQuery cũng sẽ giúp bạn hiểu được sức mạnh của JavaScript. Bạn sẽ có thể làm được nhiều việc phổ biến của một nhà phát triển JavaScript nhưng bằng cách sử dụng với jQuery bạn cũng sẽ biết được mình có thể làm được bao nhiêu với JavaScript.