Wstęp
Co to jest JavaScript?
Java Script jest językiem skryptowym wykonującym się NIE po stronie serwera jak ma to miejsce w przypadku PHP tylko po stronie klienta. Nie należy mylić Java Script z językiem Java Java Script odpowiada za generowanie akcji i całej mechaniki podejmowanych działań na stronie www. Java Script cechuje to że jest dostępny na wszystkich przeglądarkach więc nie wymaga osobnego dołączania w kodzie html-[js]<script src=””>[/js]. Problemem jednak może być sposób interpretacji kodu przez przeglądarki , w szczególności IE.
Co to jest Jquery?
Jquery jest to biblioteka, rozszerzenie JavaScriptu. Jej głównym celem jest uproszczenie stylu i sposobu pisania kodu, poprzez uproszczenie składni oraz implementacje wielu pomocnych wbudowanych funkcji. Ponieważ Jquery jest biblioteką JavaScript wymaga osobnej implementacji w dokumencie html na dwa sposoby : online- podanie linku do serwerów google cdn, lokalny- wskazanie na scieżkę lokalizacji pliku zminimalizowanej wersji biblioteki Jquery.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>Przykład lokalny:
<head>
<script src="jquery-3.4.1.min.js"></script>
</head>Uwaga!!! Zawartość zdefiniowanego kodu w pliku scipt.js musi iść w parze z odpowiednim linkiem załączającym obsługę Jquery , należy się zapoznać z dokumentacją na stronie jquery.com
JQUERY – events -zdarzenia
Posted 3 lata ago / Bez kategorii
Co to są events?
Events oznaczają zdarzenia czyli akcje podejmowane przez usera na stronie www. Do tych akcji-zdarzeń na stronie można przypisać pewną funkcjonalność, mechanizm powodujący odpowiednia reakcję strony www na działanie usera.
Oto spis zdarzeń w JQUERY:
Mouse Events (zdarzenia na myszy) : click, dbclick, mouseenter, mouseleave,-kliknięcie, podwójne kliknięcie, najazd kursorem myszy ma element,opuszczenie przez kursor myszy eleemntu
Keyboard Events(zdarzenia na klawiaturze):keypress,keydown,keyup- naciśnięty i opuszczony klawisz, naciśniety klawisz, opuszczony zwolniony klawisz
Form Events (zdarzenia na formularzu):submit,change,focus,blur
Document/Window Events(zdarzenia na oknie przeglądarki):load, resize, unload, scroll
Wszystkie przykłady pobrałem ze strony w3school.com , przykładowy link znajduje sie przy selekt.
Oto cztery przykłady obsługi zdarzeń w jquery:
1.Zdarzenie naciśnietego klawisza – keydown oraz zdarzenie opuszczonego klawisza – keyup
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Enter your name in the input field above. It will change background color on keydown and keyup.</p>
</body>
</html>Najpierw wczytywany jest cały dokument HTML. Nastepnie zdarzeniu nacisniecia klawisz w polu input formularza zostanie przypisana funkcja css powdująca zmiane koloru tła pola wejsciowego formularza input na żółty.Podobnie na opuszczenie klawisza (keydown) tło pola input zostanie zmoenione na kolor różowy.
2.Zdarzenie mouseover – najechanie kursorem myszki na obiekt, zdarzenie mouseout – opuszczenie obiektu prze kursor myszki.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>Gdy kursor myszy znajdzie sie nad elementami p strony to tło eleementu p stanie się żółte, gdy kursor myszy znajdzie sie poza elementem p kolor tła zmieni się na jasnoszary
3.Zdarzenie select – zdarzenie selekecji, wybrania, zaznaczenia kursorem np tekstu.
link do przykładu – http://www.w3schools.com/jquery/event_select.asp
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
alert("Text marked!");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World">
<p>Select some text inside the input field.</p>
</body>
</html>Gdy tekst zostanie zaznaczony kursorem , wyświetli sę okienko alert , „wybrany tekst został zaznaczony”
4. Zdarzenie trigger – zdarzenie to wiąże z selektorem dane zdarzenie i uruchamia je (odpala)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>Gdy w polu input zostanie zostanie zaznaczony tekst funkcja jquery after() wstawi treść podana w parametrze za eleemntem podanym w poprzedzającym tą funkcje selektorze (input). Następnie do przycisku button zostanie przypisana funkcjonalność odpowiadająca na zdarzenie kliknięcia w przycisk. W momencie przycisniecia przycisku zostanie uruchomiona funkcjonalnośc wcześniej przypisana zdarzeniu selelct na polu input. Funkcja after () będzie się uruchamiać zarówno po zaznaczeniu textu jak i kliknięciu w przycisk button.
JQUERY – struktury drzewiaste DOM HTML- document object model
Posted 3 lata ago / Bez kategorii
Co to jest DOM?
DOM jest skrótem od Document Object Model i oznacza Obiektowy Model Dokumentu HTML, gdzie każdy tag html jest traktowany jako osobny obiekt do którego można się odnieść za pomocą js/jquery. Relacje pomiędzy tagami/obiektami pomagają w określaniu poszczególnych elementów i manipulacje nimi: zmiana atrybutów , kopiowanie , usuwanie itp.
Dokument HTML przyjmuje struktury drzewiaste przykładowy schemat na stronie http://www.w3schools.com/js/js_htmldom.asp. Pomiędzy obiektami zachodzą relacje : przodek, potomek, rodzic, dziecko, rodzeństwo. Odnoszenie się do elementów na podstawie zachodzących relacji pomiędzy nimi nazywa się traversingiem.
Cztery różne przykłady do odnoszenia się do DOM w JQUERY ( w klasycznym js zapisy są zdecydowanie inne i odnoszą się do elementów tablicowych)
1.Funkcja parentsUntil(), określa wszytskich rodziców i przodków aż do danego elementu z wyłączeniem tego elementu jako przodka. Zapis $(„span”).parentsUntil(„div”) – oznacza: określ rodzica oraz ewentualnych przodków elementu span występujących aż do pierwszego napotkanego elementu div z wyłaczeniem tego diva jako przodka elementu span
$(document).ready(function(){
$(„span”).parentsUntil(„div”).css({„color”: „red”, „border”: „2px solid red”});
});
2.Funkcja children() zwraca wszytskie bezpośrednie dzieci podanego elementu w selektorze.
$(document).ready(function(){
$(„div”).children().css({„color”: „red”, „border”: „2px solid red”});
});
3. Funkcja ( metoda) siblings() zwróci całe rodzeństwo danego elementu. W podanym przykładzie zostaną zwrócone te elementy p które są rodzeństwem elementu h2 w strukturze html
$(document).ready(function(){
$(„h2”).siblings(„p”).css({„color”: „red”, „border”: „2px solid red”});
});
4.Funkcja filter() selekcjonuje dane elementy o podanym parametrze. W tym przykładzie filter() zwróci wszystkie elementy będące p z klasą intro
$(document).ready(function(){
$(„p”).filter(„.intro”).css(„background-color”, „yellow”);
});
query – unikanie konfliktów nazw
Posted 3 lata ago / Bez kategorii
Język Java Script posiada wiele bibliotek np.jquery, prototype.js, MooTools, lub YUI. Znak $ jest używany domyślnie jako skrót alias do nazwy jQuery. A zatem $(‚#identyfikator’) jest równoznaczny z jQuery(‚#identyfikator’). Niektóre biblioteki js czy też języki programowania również używają znaku $ , wtedy może dojść do konfliktów nazw; kompilator, parser może zgłosić błąd lub źle zinterpretować kod. Pierwszą naturalną myślą jest zamiana znaku $ na jQuery jednak okazałaby się to zbyt czasochłonne. Należy zastosować tryb bezkonfliktowy – ang.no conflict mode.
Oto kilka sposobów na zastosowanie trybu bezkonfliktowego:
Wszytskie przykłady pobrałem z tego adresu:
Sposób pierwszy:
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>1.Dodatkowo podłączamy bibliotekę prototype.
5. Zmienna $j posiada wartość funkcji noConflict() obiektu jQuery i od tej pory jest aliasem zamiennym znaku $ lub jQuery
8-10. Użycie aliasu w praktyce. Schowanie elementów div na stronie.
13. Zmienna $ może być bezpiecznie używana w prototype, zmienna mainDiv jest eleemntem drzewiastej struktury obiektów DOM a nie obiektem JQUERY
Sposób drugi:
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>1. Biblioteka jest ładowana jako pierwsza, zamiast znaku dolara wstawiamy jQuery
Sposób trzeci:
<!– Using the $ inside an immediately-invoked function expression. –>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// kod z użyciem znaku $
})( jQuery );
</script>1.Wywołujemy funkcje noConflict()
2. Stosowanie wyrażenia natychmiastowego wywołania funkcji:(function( $ ) stosując znak dolara jako parametr wywołania
3. W ciele funkcji możemy stosować znak dolara.
4. Całość zamykamy przez ( jQuery );.
Sposób czwarty:
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(document).ready(function( $ ) {
// Your jQuery code here, using $ to refer to jQuery.
});
</script>1. Podobnie jak w przypadku trzecim. Różnica polega jednak na tym że jquery ładuje się w momencie załadowania się dokumentu ( struktura DOM jest załadowana i gotowa do użycia )
Sposób piąty.
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(function($){
// Your jQuery code here, using the $
});
</script>1. Zapis jest równoznaczny z przykładem czwartym ale dużo bardziej zwięzły. DOM również jest zaŁadowany przed JQUERY.
Jquery- omówienie przykładowego kodu.
Posted 3 lata ago / Bez kategorii
Co robi nasz kod?
Kod umożliwia tworzenie wyskakującego okienka modalnego w momencie kliknięcia w dany element. Kod ten wymaga dodatkowego podłączenia JQUERY UI css odpowiedzialnego za wyglad i działanie okienka modalnego. Można go podłączyć lokalnie jak poniżej lub też pobrać z serwera- wszytskie linki na stronie jquery.com. Kod pobrałem z książki „Jquery od nowicjusza do wojownika ninja” wyd. helion.
<script src="../../lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>//wymaga UI
$(document).ready(function(){
$(‚#eulaOpen’).click(function() {
openDialog(‚#eula’);//po klinieciu w element eula open otwiera si okienko zzawartoscia eleementu //eula,opendialog zdef ponizej
});
$(‚#eula’)//selektor tego eleemntu
.find(‚.ok, .cancel’)//odnajdz eleemnty o podanych klasach
.live(‚click’, function() {//metoda live odtwarza rowniez zdarzenia wczesniej skopiowanych eleelmtow
closeDialog(this);//zamkniecie okna
})
.end()//end JQ Zakończyć ostatnią czynność filtrowania w bieżącym łańcuchu i powrócić zestaw dopasowanych //elementów do poprzedniego stanu .
//obsluga "zgadzam sie"
.find(‚.ok’)
.live( ‚click’, function(){
// Clicked Agree!
console.log(‚clicked agree!’);//zapiasanie info do consoli
})
.end()
//obsluga "nie zgadzam sie"
.find(‚.cancel’)
.live(‚click’, function() {
// Clicked disagree!
console.log(‚clicked disagree!’);
});
});
function openDialog(selector) {
$(selector)
.clone()//klonuje zawartosc selektora
.show()//wyswietla go
.appendTo(‚#overlay’)//dodaje ten kod do overlay
.parent()//odwolanie do lelementu rodzicilskiego w stosunku do elem. eula cyli content
.fadeIn(‚fast’);//pojawianie sie (szybkie) eleemntu content
}
//zamkniecie okna
function closeDialog( selector ) {
$(selector)
.parents(‚#overlay’)//parents JQ zwracawszytskich rodzicow tego elementu
.fadeOut(‚fast’, function() {//zanikanie, drugi param: funkcja obslugujaca zanikanie
$(this)//odnajdz eleemnt z biezacym selektorem (selector)
.find(‚.dialog’)//odnalezc eleemnt o klasie dialog
.remove();//usun go
});
}Jquery – AJAX
Posted 3 lata ago / Bez kategorii
Co to jest ajax?
O Ajax wspominałm przy tworzeniu wtyczek WP. Jest to technologia ładowania elementów w wybranych bez ładowania całej strony od nowa.
Co robi nasz kod?
Nasz kod ładuje spinner ( oczekiwanie na odpowiedź przez serwer) . Kod korzytsa z folderu images z obrazkami oraz pliku z rozszerzeniem getimages. Zawartość pliku getimages:|johnny_200.jpg|kellie_200.jpg|mofat_200.jpg|beau_200.jpg|fader_200.jpg|glenda_200.jpg
Kod pobrałem z książki „JQUERY od nowicjusza do wojownika ninja”
var GALLERY = {
container: ‚#gallery’,
url: ‚getImages’,
delay: 5000,
load: function() {
var _gallery = this;
$.ajax({
type:"get",
url: this.url,
beforeSend: function() {
// fade out and remove the old images
$(_gallery.container)
.find(‚img’)
.fadeOut(‚slow’, function() {
$(this).remove();
});
// add the spinner
$(‚<div></div>’)
.attr(‚class’, ‚spinner’)
.hide()
.appendTo(_gallery.container)
.fadeTo(‚slow’, 0.6);
},
success: function(data){
var images = data.split(‚|’);
$.each(images, function() {
_gallery.display(this);
});
},
complete: function() {
setTimeout(function() {
_gallery.load();
}, _gallery.delay);
// remove the spinner
$(‚.spinner’).fadeOut(‚slow’, function() {
$(this).remove();
});
}
});
},
display: function(image_url) {
$(‚<img></img>’)
.attr(‚src’, ‚../../images/’ + image_url)
.hide()
.load(function() {
$(this).fadeIn();
})
.appendTo(‚#gallery’);
}
}
$(document).ready(function(){
GALLERY.load();
});JQUERY -JSON
Posted 3 lata ago / Bez kategorii
Co to jest JSON?
JSON jest skrótem od Java Script Object Notation – Notyfikacja Obiektowa Java Script. Jest to format danych akceptowalny przez Java Script. Jest ściśle powiązany z literałami obiektów które mają kilka wspólnych cech z hermetyzacja, enkapsulacją obiektów klasowych z jezyków takich jak PHP czy C++. Java Script jak i jego biblioteka JQUERY nie posiadają definicji klas w jego klasycznym znaczeniu natomiast są zdolne do tworzenia obiektów które są zbiorem metod i właściwości gdzie powtarzalność nazw poza tym zbiorem nie będzie powodować konfliktów nazw. Odwołania do tych metod i właściwości odbywa się za pomocą adnotacji kropkowej np nazwa_obiektu_zbioru.nazwa_metody.
Alternatywą dla formatu JSON jest XML (Extra Markup Language). Dane tego formatu mogą być umiejscowione w kodzie pliku js, w kodzie html miedzy tagami oraz można stworzyć specjalny wydzielony do tego plik z rozszerzeniem .json. Format JSON jest często wykorzystywany w technologi AJAX.
Przykład pochodzi ze strony http://www.w3schools.com/js/js_json_intro.asp
Przykładowy format danych JSON.
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}Odpowiednik dla XML:
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>Pierwsza para nawiasów klamrowych otwiera i zamyka definicje zawartość zbioru. „Employees” jest nazwą tablicy przetrzymującą dane w nawiasach klamrowych przy czym każda param nawiasów klamrowych jest traktowana jako osobny literał obiektowy a zatem tablica employees jest zbiorem literałów obiektów. Po nazwie tablicy występuję dwukropek a zanim nawias kwadratowy który musibyć na koniec domknięty. Literały obiektów posiadają pary klucz:wartość, np. first Name to klucz do wartości John. Format JSON można używać bez tablic.
Odwołania do literałów obiektów wyglądają inaczej w klasycznym JavaScript niż w JQUERY. Ponieważ WP w głównej mierze bazuje na JQUERY, przykład dotyczyć będzie właśnie tej biblioteki JS.
UWAGA!!!!
Ponieważ dane są przesyłane przez adres URL , technologie AJAX i JSON wymagają użycia serwera online bądź lokalnego.
Plik będzie działał gdy wpiszesz odpowiedni adres url do tego pliku.
Zawartość pliku json_format.json:
[
{„firstName”:”John”, „lastName”:”Doe”},
{„firstName”:”Anna”, „lastName”:”Smith”},
{„firstName”:”Peter”, „lastName”:”Jones”}
]
Cały kod źródłowy zawarty w pliku html:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!– CSS –>
</head>
<body>
<script type="text/javascript">
$(document).ready(function (){
$("#json").click(function(){
$.getJSON("json_format.json", function(data){
var html = [];
/* loop through array */
$.each(data, function(index, d){
html.push("firstName : ", d.firstName, ", ",
"lastName : ", d.lastName, "<br>");
});
$("#content").html(html.join(”)).css("background-color", "green");
}).error(function(jqXHR, textStatus, errorThrown){
alert("error occurred!");
});
});
});
</script>
<!– HTML –>
<a name="#ajax-getjson-example"></a>
<div id="example-section38">
<div>Przykładowe dziłanie przesyłania danych z formatu JSON</div>
<div id="content"></div>
<button id="json" type="button">Kliknij aby wyświetlić zawartość pliku z formatem JSON json_format.json </button>
</div>
</body>
</html>Istnieje również odmiana JSON – JSONP, używana w momencie gdy pobierane dane JSON znajdują się na innym serwerze