JQuery vs JavaScript, Co wybrać?

JQuery vs JavaScript, Co wybrać?

Witam, dzisiaj przedstawię wam zalety jak i wady korzystania z JQuery a także JS. Rozwinę także temat dlaczego stosuję Jquery zamiast Javascriptu.

Czym jest JQuery?

Z Wikipedii „lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie z JavaScriptu (w tym manipulację drzewem DOM). Kosztem niewielkiego spadku wydajności w stosunku do profesjonalnie napisanego kodu w niewspomaganym JavaScripcie pozwala osiągnąć interesujące efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX. Większość wtyczek i skryptów opartych na jQuery działa na stronach nie wymagając zmian w kodzie HTML (np. zamienia klasyczne galerie złożone z miniatur linkujących do obrazków w dynamiczną galerię).”

Czy JQuery jest łatwiejszy niż Javascript?

Według mnie zdecydowanie, pozwala zbudować stronę czy skrypty o wiele łatwiej. Nauka JQuery jest bardzo przyjazna. Gdy się uczyłem JQuery od razu widziałem tego zastosowanie, podstawy tej biblioteki są bardzo proste. Natomiast nauka Javascriptu wydawała mi się beznadziejna i tak za bardzo nie wiedziałem jak to zastosować, być może dlatego przez dłuższy czas nie dotykałem JS. Tutoriale w języku polskim wydają się beznadziejne, uczą złych standardów. Wyjątkiem jest kanał na youtubie kodu.je, który tłumaczy wiedzę z frontendu bardzo dobrze i uczy poprawnych standardów. Przykładem tutaj są onclicki itp, zamiast tego powinno się używać addeventlistener. Ale dużo osób uczących o tym nie mówi.

JS vs JQuery w AJAXie

Podczas gdy ja męczyłem się jak nauczyć się AJAXA i go zastosować w praktyce, to na początku starałem się go zaimplementować w JS, niestety ten kod jest zbyt długi. Dlatego zastosowałem tutaj JQuery, tutaj macie porównanie kodu AJAXa w JS i JQuery w prostym przykładzie:

JS, kod z kursu AJAXa na kanale youtube TheNewBoston:


var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject() {
		var xmlHtpp;
		
		if (window.XMLHttpRequest) {
			xmlHtpp = new XMLHttpRequest();
		} else {
			xmlHtpp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		return xmlHtpp;
}

function process() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
		food = encodeURIComponent(document.getElementById("userInput").value);
		xmlHttp.open("GET", "foodstore.php?food=" + food, true);
		xmlHttp.onreadystatechange = handleServerResponse;
		
		xmlHttp.send(null);
	} else {
		setTimeout("process()", 1000);
	}
}

send = document.getElementsByTagName("body");
send.innerHTML = "HELLO";
send.addEventListener("load",process,false);

function handleServerResponse() {
	if (xmlHttp.readyState==4) {
		if (xmlHttp.status == 200) {
			xmlResponse = xmlHttp.responseXML;
			xmlDocumentElement = xmlResponse.documentElement;
			message = xmlDocumentElement.firstChild.data;
			document.getElementById("underInput").innerHTML = '<span style="color: blue">'+ message +'</span';
                        setTimeout('process()', 1000);
               } else {
                        alert("Something went wrong!");
               }
      }
}

Kod JQuery z jednego kursu na Udemy


$(document).ready(function () {
    $('#sub').click(function () {
        var username = $('#name').val();
        var email = $("#email").val();
        var pass = $("#password").val();

        $.ajax ({
            url:'test.php',
            data: {name:username,email:email,pass:pass},
            type: 'POST',
            success: function (data) {
                $("#result").html(data);
            }

        });
    });
    function showUser() {
        $.ajax ({
            url:'test.php',
            data: {action:"show"},
            type: 'POST',
            success: function (data) {
                $("#show").html(data);
            }
        });
    }
    setInterval(showUser,1000);
});

Jak się uczyć JQuery?

Jak widać w przykładzie kod JQuery według mnie jest łatwiejszy do zastosowania w praktyce. Nie musimy się martwić statusami AJAXA, czy przeglądarka obsługuje AJAXA. Dla wytrwałych polecam kursu na Stronie Sololearn i Code Cademy, w tych tutorialach uczymy się praktycznie zastosować programowanie JQuery w praktyce, czyli oczywiście kodując, na początku polecam ci przerobić kurs na Sololearn, następnie przejść do Code Cademy. Na tej pierwszej stronie kurs jest łatwiejszy.

Podsumowanie

Wpis ten miał bardziej zachęcić do nauki JQuery osób które miały problem z nauką lub zastosowaniem JS na swoich stronach internetowych. Warto jednak pamiętać że JQuery ma ograniczone możliwości w zależności od JQuery, bo to co znajduje się w bibliotece możemy tego użyć. Warto pamiętać że JQuery to także JavaScript, nie mylić z Javą.

 

Comments ( 2 )

  1. ReplyMichał Kuliński
    JQuery jest fajnym frameworkiem, ale jest jeden framework zdecydowanie warty poznania: Vanilla JS: http://vanilla-js.com/ ;)
  2. Replybroiniac
    Od początku pracy przy webaplikacjach zawsze to jQuery się gdzieś przewijało u mnie w kodzie. To na czym mi zawsze zależało to fakt, żeby skupić się na backendowych problemach - nie musiałem tracić czasu na frontendowe zabawy w js-ie. Do tego (choć sam nigdy tego nie uświadczyłem) nie musiałem się babrać z kompatybilnością ze starszymi przeglądarkami. Od pół roku staram się ograniczać jQuery tylko po to by zobaczyć, czy na prawdę go potrzebuję i by podciągnąć się w javascripcie. Okazuje się, że przez te wszystkie lata js zaczął być w miarę na równym poziomie rozumiany tak samo na różnych przeglądarkach. $.cokolwiek mają swoje łatwe odpowiedniki, a wspomniany u Ciebie AJAX jest tak na prawdę najtrudniejszą rzeczą do zrobienia :) jQuery mimo to gorąco polecam każdemu, ale tak samo gorąco polecam **niekorzystanie** z niego wszędzie, gdzie się da z niego nieskorzystać nie tracąc przy tym dużo czasu. Jako punkt odniesienia polecam http://youmightnotneedjquery.com

Dodaj komentarz