Techniki WWW. (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 7. Środa 15:30-17:00 sala: A-1-04
|
|
|
- Nadzieja Żurawska
- 8 lat temu
- Przeglądów:
Transkrypt
1 Techniki WWW (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 7 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2016/ semestr zimowy Środa 15:30-17:00 sala: A-1-04
2 Przypomnienie z poprzedniego wykładu Obiekty w JavaScript Projektowanie metod w JavaScript Dziedziczenie prototypowe Zdarzenia w JavaScript
3 Obiekty i zdarzenia na stronie Obiektem jest cały dokument hipertekstowy html. Obiektem który go reprezentuje jest document. Obiekt ten posiada własności oraz kilka wbudowanych metod które pozwalają na modyfikację zawartości strony lub uzyskanie informacji. Przykładowo gdy chcemy dodać // właściwość obiektu document document.lastmodified; // metoda dla obiektu document document.write("modyfikujemy zawartość dokumentu"); Zdarzeniem jest np. naciśnięcia klawisza myszy. Funkcja obsługi zdarzenia odpowiedzialna dla takiego przypadku to onclick(), która spowoduje wykonanie określonej czynności jaką jej przypisano w sytuacji zajścia danego zdarzenia: document.getelementbyid( button ).onclick = function() { alert( Nacisnąłeś przycisk ); }
4 Obiekty i zdarzenia na stronie Pozostałe typy zdarzeń które mogą zostać obsłużone: onabort Zaniechano ładowania strony onblur Obiekt przestał być aktywny (wybrany) onchange Obiekt zmienił swój stan onclick Kliknięto obiekt onerror Błąd w skrypcie onfocus Obiekt został uaktywniony (wybrany) onload Obiekt (strona) został załadowany (zakonczono jego ładowanie) onmouseover Obiekt został wskazany myszką
5 Obiekty i zdarzenia na stronie Przykład: <script> var name="nn" function hello() { name=prompt("podaj swoje imię:",name); alert("witaj "+name+" na naszej stronie!"); } function goodbye() { alert("do widzenia "+name+"!"); } </script> <body onload="hello();" onunload="goodbye();">
6 Dziedziczenie Dziedziczenie w językach klasycznych ma przede wszystkim za zadanie umożliwiać wielokrotne wykorzystanie tego samego kodu: np.jeśli dwie klasy są podobne, należy określić tylko dzielące je różnice. Po drugie dziedziczenie ma w sobie specyfikację typów co pozwala na zmniejszenie konieczności rzutowania JS nie posiada typów! Co wtedy z dziedziczeniem??
7 Dziedziczenie prototypowe w JS KLASA OBIEKT object.prototype W języku JavaScript (a tym samym we wszystkich środowiskach programistycznych opartych o ten język) dziedziczenie odbywa się w sposób prototypowy. Każdy obiekt w JavaScript można traktować jako prototyp który w dowolnym momencie można rozszerzać, a jego własności przekazywać (cedować) na inne dziedziczące obiekty. Obiekty dziedziczą po obiektach!
8 Dziedziczenie prototypowe w JS var Obiekt = function() {}; var o = new Obiekt(); console.log(o.czesc); Obiekt.prototype.czesc = 'czesc'; console.log(o.czesc); var p = new Obiekt(); console.log(p.czesc); > undefined czesc czesc czesc czesc Obiekt.prototype.PowedzCzesc = function(){ console.log(this.czesc); } o.powedzczesc(); p.powedzczesc();
9 Dziedziczenie prototypowe w JS var Wspolrzedne = function(x,y){ this.x = x; this.y = y; this.dodaj = function(){ return this.x + this.y; }; }; var f = new Wspolrzedne(4,7);
10 Dziedziczenie prototypowe w JS var Wspolrzedne = function(x,y){ this.x = x; this.y = y; this.dodaj = function(){ return this.x + this.y; }; }; var f = new Wspolrzedne(4,7); Wspolrzedne.prototype.pokazX = function(){ console.log(this.x); }; Wspolrzedne.prototype.pokazY = function(){ console.log(this.y); }; Wspolrzedne.prototype.pomnoz = function(){ return this.x * this.y; };
11 Dziedziczenie prototypowe w JS var Wspolrzedne = function(x,y){ this.x = x; this.y = y; this.dodaj = function(){ return this.x + this.y; }; }; var f = new Wspolrzedne(4,7); Wspolrzedne.prototype.pokazX = function(){ console.log(this.x); }; Wspolrzedne.prototype.pokazY = function(){ console.log(this.y); }; Wspolrzedne.prototype.pomnoz = function(){ return this.x * this.y; }; Wspolrzedne.prototype.pokazWynikDodaj = function(){ console.log(this.dodaj())}; Wspolrzedne.prototype.pokazWynikPomnoz = function(){ console.log(this.pomnoz())}; f.pokazx(); f.pokazy(); f.pokazwynikdodaj(); f.pokazwynikpomnoz(); >
12 Dziedziczenie prototypowe w JS function Mother() { this.methoda = function() { console.log('mother::methoda()'); } this.methodb = function() { console.log('mother::methodb()'); } } function Child() { this.methodc = function () { console.log('child::methodc()'); } }
13 Dziedziczenie prototypowe w JS function Mother() { this.methoda = function() { console.log('mother::methoda()'); } this.methodb = function() { console.log('mother::methodb()'); } } function Child() { this.methodc = function () { console.log('child::methodc()'); } } Child.prototype = new Mother(); m = new Mother(); c = new Child();
14 Dziedziczenie prototypowe w JS function Mother() { this.methoda = function() { console.log('mother::methoda()'); } this.methodb = function() { console.log('mother::methodb()'); } } function Child() { this.methodc = function () { console.log('child::methodc()'); } } Child.prototype = new Mother(); m = new Mother(); c = new Child(); m.methoda(); m.methodb(); c.methoda(); c.methodb(); c.methodc(); > Mother::methodA() Mother::methodB() Mother::methodA() Mother::methodB() Child::methodC()
15 Dziedziczenie prototypowe w JS Możemy też bez żadnych problemów przeciążyć metodę B zdefiniowaną w funkcji Child, oddziedziczoną po funkcji Mother : Child.prototype.methodB = function () { console.log('child::methodb()'); } m.methoda(); m.methodb(); c.methoda(); c.methodb(); c.methodc();
16 Dziedziczenie prototypowe w JS Możemy też bez żadnych problemów przeciążyć metodę B zdefiniowaną w funkcji Child, oddziedziczoną po funkcji Mother : Child.prototype.methodB = function () { console.log('child::methodb()'); } m.methoda(); m.methodb(); c.methoda(); c.methodb(); c.methodc(); > Mother::methodA() Mother::methodB() Mother::methodA() Child::methodB() Child::methodC()
17 JSON JSON (JavaScript Object Notation) [Notacja Obiektowa JavaScriptu] - jest to lekki format do przenoszenia danych oparty o literały obiektowe JavaScriptu. Jest podzbiorem JS, ale kompletnie niezależnym i może być używany do wymiany danych w zasadzie w każdym współczesnym języku programowania.
18 JSON JSON (JavaScript Object Notation) [Notacja Obiektowa JavaScriptu] - jest to lekki format do przenoszenia danych oparty o literały obiektowe JavaScriptu. Jest podzbiorem JS, ale kompletnie niezależnym i może być używany do wymiany danych w zasadzie w każdym współczesnym języku programowania.
19 JSON JSON (JavaScript Object Notation) [Notacja Obiektowa JavaScriptu] - jest to lekki format do przenoszenia danych oparty o literały obiektowe JavaScriptu. Jest podzbiorem JS, ale kompletnie niezależnym i może być używany do wymiany danych w zasadzie w każdym współczesnym języku programowania. { firstname : Jan, lastname : Kowalski, age : 20 } Obiekt w formacie JSON jest nieuporządkowanym zbiorem klucz-wartość, gdzie klucz może być dowolnym łańcuchem, natomiast wartość jednym z dowolonych typów (integer, string etc) włączając w to tablice i inne obiekty.
20 JSON JSON posiada sześć rodzajów wartości (value): 1. obiekty, 2. tablice, 3. łańcuchy, 4. liczby, 5. wartości logiczne (TRUE FALSE), 6. wartość NULL. Obiekty JSON można zagnieżdzać w dowolnym stopniu jednak z reguły dla zachowania przejrzystości stosowana jest zasada im bardziej płaska struktura tym lepiej. Jednak nie w każdym przypadku i dla wszystkich zastosowań jest to możliwe do utrzymania.
21 JSON W formacie JSON możemy także posługiwać się tablicami, które tworzą uporządkowane ciągi wartości o dowolnych typach dozwolonych przez JSONa (w tym tablice i obiekty).
22 JSON W formacie JSON możemy także posługiwać się tablicami, które tworzą uporządkowane ciągi wartości o dowolnych typach dozwolonych przez JSONa (w tym tablice i obiekty). [ { firstname : Jan, lastname : Kowalski, age : 20 }, { { liczba : 023 } firstname : Anna, lastname : Nowak, age : 25 } ] Uwaga: Podobnie jak w JavaScript niedopuszczalne jest rozpoczynanie liczb całkowitych od zera np.: W niektórych przypadkach zapis taki może zostać zinterpretowany jako liczba w formacie ósemkowym.
23 JSON W formacie JSON możemy także posługiwać się tablicami, które tworzą uporządkowane ciągi wartości o dowolnych typach dozwolonych przez JSONa (w tym tablice i obiekty). [ { firstname : Jan, lastname : Kowalski, age : 20 }, { firstname : Anna, lastname : Nowak, age : 25 } ] Uwaga: Format tekstowy (podobnie zresztą jak XML-a) zapewnia czytelność nie tylko dla parserów, ale również dla ludzi.
24 JSON Przykład tablicy obiektów: { samochod : [ { Marka : VW, Model : Golf, Rocznik : 1999 }, { Marka : BMW, Model : S6, Rocznik : 2007 }, { Marka : Audi, Model : A4, Rocznik : 2009 } ]}
25 XML XML (extensible Markup Language) [Rozszerzalny Język Znaczników] jest to format do przenoszenia danych oparty o znaczniki. W zasadzie jest przeznaczony do opisu struktury danych oraz powiązań między nimi. Jest rekomendowany przez W3C jako standard wymiany danych. Jego niezwykłą zaleta (zreszta podobną do JSONa) jest to że jest jest zapisywany w postaci zwykłych plików ASCII.
26 XML XML (extensible Markup Language) [Rozszerzalny Język Znaczników] jest to format do przenoszenia danych oparty o znaczniki. W zasadzie jest przeznaczony do opisu struktury danych oraz powiązań między nimi. Jest rekomendowany przez W3C jako standard wymiany danych. Jego niezwykłą zaleta (zreszta podobną do JSONa) jest to że jest jest zapisywany w postaci zwykłych plików ASCII. <?xml version= 1.0 encoding= UTF-8?> <osoba> <imie>jan</imie> <nazwisko>kowalski</nazwisko> <pesel> </pesel> </osoba>
27 XML XML (extensible Markup Language) [Rozszerzalny Język Znaczników] jest to format do przenoszenia danych oparty o znaczniki. W zasadzie jest przeznaczony do opisu struktury danych oraz powiązań między nimi. Jest rekomendowany przez W3C jako standard wymiany danych. Jego niezwykłą zaleta (zreszta podobną do JSONa) jest to że jest jest zapisywany w postaci zwykłych plików ASCII. <?xml version= 1.0 encoding= UTF-8?> <osoba> <imie>jan</imie> <nazwisko>kowalski</nazwisko> <pesel> </pesel> </osoba> Prolog Znaczniki i dane
28 XML XML (extensible Markup Language) [Rozszerzalny Język Znaczników] jest to format do przenoszenia danych oparty o znaczniki. W zasadzie jest przeznaczony do opisu struktury danych oraz powiązań między nimi. Jest rekomendowany przez W3C jako standard wymiany danych. Jego niezwykłą zaleta (zreszta podobną do JSONa) jest to że jest jest zapisywany w postaci zwykłych plików ASCII. <?xml version= 1.0 encoding= UTF-8?> <osoba> <imie>jan</imie> <nazwisko>kowalski</nazwisko> <pesel> </pesel> </osoba> Prolog - powinien być ale nie zawsze jest konieczny!!! Prolog Znaczniki i dane
29 XML <?xml version= 1.0 encoding= UTF-8?> słowo kluczowe wersja xml kodowanie
30 XML <?xml version= 1.0 encoding= UTF-8?> słowo kluczowe wersja xml kodowanie W prologu moga znaleźć się też inne elementy np. informacja o stylach lub DTD.
31 XML <?xml version= 1.0 encoding= UTF-8?> słowo kluczowe wersja xml kodowanie W prologu moga znaleźć się też inne elementy np. informacja o stylach lub DTD. <osoba> <imie>jan</imie> <nazwisko>kowalski</nazwisko> <pesel> </pesel> </osoba> Nazwy kolejnych elementów mogą być dowolnym siągiem znaków rozpoczynającym się do litery lub podkreślenia.
32 XML <?xml version= 1.0 encoding= UTF-8?> słowo kluczowe wersja xml kodowanie W prologu moga znaleźć się też inne elementy np. informacja o stylach lub DTD. <osoba> <imie>jan</imie> <nazwisko>kowalski</nazwisko> <pesel> </pesel> </osoba> Nazwy kolejnych elementów mogą być dowolnym siągiem znaków rozpoczynającym się do litery lub podkreślenia. Znacznik z tekstem (lub innymi znacznikami wewnątrz) jest bardzo często nazywany węzłem (node). Natomiast pierwszy element wezłem głownym (root-node).
33 XML W plikach XML możemy również podobnie jak w HTML stosować kaskadowe arkusze stylu, które pozwalają odpowiednio sformatować wygląd przenoszonych danych. Dołączenie CSS odbywa się przez dyrektywę xml-stylesheet. KOMIS { display: block; background-colr: #AAAAA; color: #FFFFFF; } <?xml version= 1.0 encoding= utf-8?> <?xml-stylesheet type= text/css href= styl.css?> <KOMIS> <Samochod> <marka>bmw</marka> </Samochod> </KOMIS>
34 XML W plikach XML możemy również podobnie jak w HTML stosować kaskadowe arkusze stylu, które pozwalają odpowiednio sformatować wygląd przenoszonych danych. Dołączenie CSS odbywa się przez dyrektywę xml-stylesheet. KOMIS { display: block; background-colr: #AAAAA; color: #FFFFFF; } <?xml version= 1.0 encoding= utf-8?> <?xml-stylesheet type= text/css href= styl.css?> <KOMIS> <Samochod> <marka>bmw</marka> </Samochod> </KOMIS> Sposób przygotowanie CSS jest dokładnie taki sam jak dla HTML.
35 Porównanie JSON vs. XML { samochod : [ { Marka : VW, Model : Golf, Rocznik : 1999 }, { Marka : BMW, Model : S6, Rocznik : 2007 }, { Marka : Audi, Model : A4, Rocznik : 2009 } ]} <?xml version="1.0" encoding="utf-8"?> <KOMIS> <Samochod> <Marka>VW</Marka> <Model>Golf</Model> <Rok>1999</Rok> </Samochod> <Samochod> <Marka>BMW</Marka> <Model>S6</Model> <Rok>2007</Rok> </Samochod> <Samochod> <Marka>Audi</Marka> <Model>A3</Model> <Rok>2009</Rok> </Samochod> </KOMIS>
36 Porównanie JSON vs. XML Obecnie wiele usług sieciowych wykorzystuje do przekazywania danych pliki XML oraz JSON. Standard XML jest tzw. ścisły formatem, który pozwala na łatwą, szybką i wydajną interpretację, niezależnie od platformy sprzętowej czy systemowej. Natomiast JSON cechuje się lekkością oraz bardzo przerzystą strukturą. Dla obu formatów w większości języków programowania (kompilowalnych oraz interpretowalnych) istnieją parsery pozwalające na łatwe odczytywanie, zapisywanie i modyfikowanie danych. Który format wybrać?
37 Porównanie JSON vs. XML Obecnie wiele usług sieciowych wykorzystuje do przekazywania danych pliki XML oraz JSON. Standard XML jest tzw. ścisły formatem, który pozwala na łatwą, szybką i wydajną interpretację, niezależnie od platformy sprzętowej czy systemowej. Natomiast JSON cechuje się lekkością oraz bardzo przerzystą strukturą. Dla obu formatów w większości języków programowania (kompilowalnych oraz interpretowalnych) istnieją parsery pozwalające na łatwe odczytywanie, zapisywanie i modyfikowanie danych. Który format wybrać? - każdy z nich ma wady i zalety, dlatego wóbór zależy od tego do czego dany format ma służyć oraz od preferencji programisty. w przypadku JavaScriptu, lepiej wybrać JSONa, ponieważ łatwiej jest operować na obiektach JSONowych niż paroswać i XML.
38 Synchroniczne żądanie http Jest to model synchronicznej komunikacji HTTP, gdzie klient wysyła żądanie, serwer je odbiera następnie przetwarza i na końcu generuje odpowiedź. W sytuacji takiej klient musi czekać z kolejnym żądaniem do momentu kiedy nie dostanie odpowiedzi od serwera.
39 Synchroniczne żądanie http Jest to model synchronicznej komunikacji HTTP, gdzie klient wysyła żądanie, serwer je odbiera następnie przetwarza i na końcu generuje odpowiedź. W sytuacji takiej klient musi czekać z kolejnym żądaniem do momentu kiedy nie dostanie odpowiedzi od serwera. W modelu synchronicznym mamy bardzo mały poziom aktywności oraz interaktywności strony, strona musi być przeładowana (pobrana) po każdym żądaniu klienta, jeśli strony są złożone to proces ten jest długi.
40 Synchroniczne żądanie http przetwarzanie zdarzenie przesyła nie danych zdarzenie anie przesył danych SERWER anie przesył danych CZAS zdarzenie przesyła nie danych KLIENT (PRZEGLĄDARKA) przetwarzanie Jest to model synchronicznej komunikacji HTTP, gdzie klient wysyła żądanie, serwer je odbiera następnie przetwarza i na końcu generuje odpowiedź. W sytuacji takiej klient musi czekać z kolejnym żądaniem do momentu kiedy nie dostanie odpowiedzi od serwera. W modelu synchronicznym mamy bardzo mały poziom aktywności oraz interaktywności strony, strona musi być przeładowana (pobrana) po każdym żądaniu klienta, jeśli strony są złożone to proces ten jest długi.
41 AJAX ( asynchroniczność ) W klasycznych stronach (takich jak omawialiśmy do tej chwili) wszystkie żadania jakie były przekazywane przez protokół http (lub https) były synchroniczne. Oznaczało to, że strona po wykonaniu działania przez użytkownika musiał zostać przeładowana. Było to wygodne jednak nosło ze sobą konieczności oczekiwania na zakończenie poprzedniej operacji aby można było wysłać kolejne żądanie oraz niepotrzebnie generowała ruch sieciowy przez ciągłe przesyłanie tych samych plików.
42 AJAX ( asynchroniczność ) W klasycznych stronach (takich jak omawialiśmy do tej chwili) wszystkie żadania jakie były przekazywane przez protokół http (lub https) były synchroniczne. Oznaczało to, że strona po wykonaniu działania przez użytkownika musiał zostać przeładowana. Było to wygodne jednak nosło ze sobą konieczności oczekiwania na zakończenie poprzedniej operacji aby można było wysłać kolejne żądanie oraz niepotrzebnie generowała ruch sieciowy przez ciągłe przesyłanie tych samych plików. Jak rozwiązać ten problem??
43 AJAX ( asynchroniczność ) W klasycznych stronach (takich jak omawialiśmy do tej chwili) wszystkie żadania jakie były przekazywane przez protokół http (lub https) były synchroniczne. Oznaczało to, że strona po wykonaniu działania przez użytkownika musiał zostać przeładowana. Było to wygodne jednak nosło ze sobą konieczności oczekiwania na zakończenie poprzedniej operacji aby można było wysłać kolejne żądanie oraz niepotrzebnie generowała ruch sieciowy przez ciągłe przesyłanie tych samych plików. Jak rozwiązać ten problem?? AJAX (asynchroniczne przesyłanie danych przez protokół HTTP (HTTPS)
44 Asynchroniczne żądanie http lan prz esy dan łanie ych prze sył dan anie ych wie t wie wyś ście wy ś tlan ie ie aktywność użytkownika wej przetwarzanie ie łan esy prz anych d SERWER nie syła prze ych dan CZAS ście wej SILNIK AJAX ście wej KLIENT (PRZEGLĄDARKA) przetwarzanie Jest to model asynchronicznej komunikacji HTTP, gdzie klient (przeglądarka) nie czeka na przyjście odpowiedzi na żądanie serwera, a wykonuje dalsze żądania. W takim modelu nie ma konieczności przeładowania strony przy każdej operacji klineta, wystarczy, że zostaną doczytane brakujące dane, a dzięki odpowiednim narzędziom zmodyfikowana zostanie zawartość strony.
45 AJAX (asynchroniczność) AJAX (Asynchronous JavaScript and XML) [Asynchroniczny JavaScript i XML] - model komunikacji sieciowej w której komunikacja pomiędzy klientem a serwerem odbywa się bez przeładowania dokumentu. Techniki służące do obsługi tej usługi są następujące: 1. XMLHttpRequest - klasa która umożliwiająca asynchroniczne przesyłanie danych pomiędzy klientem a serwerem. 2. JavaScript - język skryptowy pośredniczący w komunikacji. 3. XML - język znaczników który opisuje dane (w ogólności może to być dowolny format np. JSON). Głównym zadaniem modelu AJAX jest otwarcie połączenia z pomiędzy klientem a serwerem.
46 AJAX (asynchroniczność) Aby rozpocząć korzystanie z AJAX należy utworzyć obiekt klasy XMLHttpRequest(): var request = new XMLHttpRequest(); Od tego miejsca mamy dostęp do zestawu metod i własności przynależących do klasy XMLHttpRequest, które pozwalają na obsługę połączenia. Zestaw metod: open("metoda", "url", isasynchronic, "user", "password") - metoda otwiera połączenie do serwera. Przyjmuje połączenie parametry: metoda - definijemy GET czy POST, url - adres pliku na zdalnym serwerze, isasynchronic - paramter true/false określa czy żądanie ma być asynchroniczne. send("content") - przesyłą żądanie do serwera. abort() - przerywa żądanie do serwera. setrequestheader() - wysyła nagłówek do serwera. getresponseheader("nazwa_nagłówka") - pobiera nagłówek z serwera getallresponseheaders() - pobiera wszystkie wysłane nagłówki http jako string.
47 AJAX (asynchroniczność) Aby rozpocząć korzystanie z AJAX należy utworzyć obiekt klasy XMLHttpRequest(): var request = new XMLHttpRequest(); Od tego miejsca mamy dostęp do zestawu metod i własności przynależących do klasy XMLHttpRequest, które pozwalają na obsługę połączenia. Zestaw własności: onreadystatechange - zdarzenie odpalane w chwili zmiany stanu danego połączenia readystate - zawiera aktualny status połączenia responsetext - zawiera zwrócone dane w formie tekstu responsexml - zawiera zwrócone dane w formie drzewa XML (jeżeli zwrócone dane są prawidłowym dokumentem XML) status - zwraca status połączenia np gdy strona nie istnieje, itp) statustext - zwraca status połączenia w formie tekstowej - np 404 zwróci Not Found
48 AJAX (asynchroniczność) Przykład utworzenia żadania asynchronicznego metodą GET: var request = new XMLHttpRequest(); request.open("get", "/test/test.php", true); request.send(); Parametr włączający żądanie asynchroniczne var request = new XMLHttpRequest(); request.open("post", "/test/test.php", true); request.setrequestheader("content-type","text/xml"); request.send("<osoba>jan Kowalski</osoba>");
49 AJAX (asynchroniczność) Możemy również sprawdzać stan połączenia z serwerem za pomoca własności readystate: 0: połączenie nie nawiązane, 1: połączenie nawiązane, 2: żądanie odebrane, 3: przetwarzanie, 4: dane zwrócone i gotowe do użycia var request = new XMLHttpRequest(); request.open("get", "/test/test.php", true); request.onreadystatechange = function(){ if ( request.readystate == 4 ) { request = null; } }; request.send();
50 Wprowadzenie do jquery
51 Wprowadzenie do jquery
52 Wprowadzenie do jquery Biblioteka napisana w języku JavaScript o lekkim charakterze, obsługująca przestrzenie nazw z mechanizmem łatwej rozszerzalności umożliwiająca manipulowanie elementami struktury DOM (Document Object Model). Biblioteka jest dotępna na licencji: GPL i MIT. Pierwsze wydanie biblioteki w wersji miało miejsce 26 sierpnia 2006 roku John Resig
53 Wprowadzenie do jquery Biblioteka napisana w języku JavaScript o lekkim charakterze, obsługująca przestrzenie nazw z mechanizmem łatwej rozszerzalności umożliwiająca manipulowanie elementami struktury DOM (Document Object Model). Biblioteka jest dotępna na licencji: GPL i MIT. Pierwsze wydanie biblioteki w wersji miało miejsce 26 sierpnia 2006 roku Najnowsze wydanie stabilne: jquery ( z 22 września 2016 r.) jquery ( z 20 maja 2016 r.) jquery ( z 20 maja 2016 r.) John Resig
54 Wprowadzenie do jquery Biblioteka napisana w języku JavaScript o lekkim charakterze, obsługująca przestrzenie nazw z mechanizmem łatwej rozszerzalności umożliwiająca manipulowanie elementami struktury DOM (Document Object Model). Biblioteka jest dotępna na licencji: GPL i MIT. Pierwsze wydanie biblioteki w wersji miało miejsce 26 sierpnia 2006 roku Najnowsze wydanie stabilne: jquery ( z 22 września 2016 r.) jquery ( z 20 maja 2016 r.) Uwaga wersji 3/2.X.X wsparcia dla jqueryod ( z 20brak maja 2015 r.) IE 6-8 (redukcja rozmiaru pliku biblioteki) John Resig
55 Wprowadzenie do jquery Najnowsze wydanie stabilne: jquery ( z 20 maja 2016 r.) Biblioteka jquery występuje w dwóch wersjach:
56 Wprowadzenie do jquery Najnowsze wydanie stabilne: jquery ( z 20 maja 2016 r.) Biblioteka jquery występuje w dwóch wersjach: Zwykłej: jquery js Spakowanej: jquery min.js rozmiar: 82.4 KB rozmiar: 27.7 KB Czytelny kod, struktura hierarchiczna, komentarze Brak czytelności, wszystko w jednej linii, brak komentarzy
57 Wprowadzenie do jquery Najnowsze wydanie stabilne: jquery ( z 20 maja 2016 r.) Biblioteka jquery występuje w dwóch wersjach: jquery js jquery min.js
58 Wprowadzenie do jquery Najnowsze wydanie stabilne: jquery ( z 20 maja 2016 r.) Biblioteka jquery występuje w dwóch wersjach: jquery js jquery min.js Dla optymalizacji działania aplikacji zaleca się używanie wersji min.
59 Pobranie i instalacja jquery Pobieramy plik w najnowszej wersji ze strony:
60 Pobranie i instalacja jquery Pobieramy plik w najnowszej wersji ze strony: jquery js jquery min.js <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html>
61 Pobranie i instalacja jquery Pobieramy plik w najnowszej wersji ze strony: jquery js jquery min.js <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Od tego momentu mamy dostęp do wszystkich funkcjonalności biblioteki jquery
62 Pobranie i instalacja jquery Pobieramy plik w najnowszej wersji ze strony: W ten sposób odwołujemy się do zewnętrznego źródła biblioteki jquery. jquery js jquery min.js <!DOCTYPE html> <html> <head> Jakie to ma zalety?? <title>pierwsza strona z jquery</title> <script type= text/javascript src= ></script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Od tego momentu mamy dostęp do wszystkich funkcjonalności biblioteki jquery
63 Jak używać jquery Kiedy mamy już dołączoną bibliotekę jquery do naszej aplikacji możemy wykorzystywać wbudowane funkcjonalności. <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html>
64 Jak używać jquery Kiedy mamy już dołączoną bibliotekę jquery do naszej aplikacji możemy wykorzystywać wbudowane funkcjonalności. <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); jquery(document).ready(function(){ }); alert( Pierwsza operacja jquery ); </script> }); </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html>
65 Jak używać jquery Kiedy mamy już dołączoną bibliotekę jquery do naszej aplikacji możemy wykorzystywać wbudowane funkcjonalności. <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); jquery(document).ready(function(){ }); alert( Pierwsza operacja jquery ); </script> }); </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Konstrukcja ta oznacza dostęp do zdefiniowanej przestrzeni nazw biblioteki: $( ) (wersja skrócona)
66 Jak używać jquery Kiedy mamy już dołączoną bibliotekę jquery do naszej aplikacji możemy wykorzystywać wbudowane funkcjonalności. <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); jquery(document).ready(function(){ }); alert( Pierwsza operacja jquery ); </script> }); </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Konstrukcja ta oznacza dostęp do zdefiniowanej przestrzeni nazw biblioteki: $( ) (wersja skrócona) jquery( ) (wersja pełna)
67 Jak używać jquery $( ) <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> jquery( )
68 Jak używać jquery $( ) jquery( ) <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Co robi ta funkcja?
69 Jak używać jquery $( ) jquery( ) <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Co robi ta funkcja? W wyniku zadziałania funkcji $() tworzony jest obiekt, który posiada metodę ready(), a argumentem tej metody jest wywołanie zwrotne (funkcja nienazwana), która wykonuje określone działenie.
70 Jak używać jquery $( ) jquery( ) <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Co robi ta funkcja? W wyniku zadziałania funkcji $() tworzony jest obiekt, który posiada metodę ready(), a argumentem tej metody jest wywołanie zwrotne (funkcja nienazwana), która wykonuje określone działenie. Co robi metoda ready() oraz czym jest argument document?
71 Jak używać jquery Co robi metoda ready() oraz czym jest argument document? Metoda ready(), zachodzi wtedy kiedy zajdzie zdarzenie ready, czyli cały (kompletny) dokument hipertekstowy zostanie załadowany, natomiast argument document symbolizuje ten dokument. <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script>
72 Jak używać jquery Co robi metoda ready() oraz czym jest argument document? Metoda ready(), zachodzi wtedy kiedy zajdzie zdarzenie ready, czyli cały (kompletny) dokument hipertekstowy zostanie załadowany, natomiast argument document symbolizuje ten dokument. <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Czy da się w zawiązku z tym jeszcze bardziej uprościć ten zapis?
73 Jak używać jquery Co robi metoda ready() oraz czym jest argument document? Metoda ready(), zachodzi wtedy kiedy zajdzie zdarzenie ready, czyli cały (kompletny) dokument hipertekstowy zostanie załadowany, natomiast argument document symbolizuje ten dokument. <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Czy da się w zawiązku z tym jeszcze bardziej uprościć ten zapis? TAK <script type= text/javascript > $(function(){ alert( Pierwsza operacja jquery ); }); </script>
74 Jak używać jquery Co robi metoda ready() oraz czym jest argument document? Metoda ready(), zachodzi wtedy kiedy zajdzie zdarzenie ready, czyli cały (kompletny) dokument hipertekstowy zostanie załadowany, natomiast argument document symbolizuje ten dokument. <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> Czy da się w zawiązku z tym jeszcze bardziej uprościć ten zapis? TAK <script type= text/javascript > $(function(){ alert( Pierwsza operacja jquery ); }); </script> Dlaczego?
75 KONIEC WYKŁADU 7
Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)
Zaawansowane Techniki WWW (HTML, CSS i NODE.JS) Dr inż. Marcin Zieliński Środa 15:30-17:00 sala: A-1-04 WYKŁAD 8 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2014/2015 - semestr zimowy
Techniki WWW. (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 6. Środa 15:30-17:00 sala: A-1-04
Techniki WWW (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 6 Środa 15:30-17:00 sala: A-1-04 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2016/2017 - semestr zimowy Przypomnienie
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:
Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: oraz systemy CMS (Content Menager System): Dlaczego
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Obiektowy język JavaScript oraz format JSON (Zajęcia r.)
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Obiektowy język JavaScript oraz format JSON (Zajęcia 07 18.04.2016 r.) 1) Wprowadzenie do formatu JSON JSON czyli z ang. JavaScript Object Notation
Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych
Czym jest AJAX AJAX wprowadzenie Beata Pańczyk na podstawie: 1. Lis Marcin, Ajax, Helion, 2007 2. Hadlock Kris, Ajax dla twórców aplikacji internetowych, Helion, 2007 AJAX (Asynchronous JavaScript and
W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:
Projektowanie aplikacji internetowych (zajęcia 6.03.2017 r.) Zajęcia: grupa 3: środa 16:00-17:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Co to jest NODE.JS? Nowoczesne środowisko programistyczne
Node.js Co to jest NODE.JS? Nowoczesne środowisko programistyczne Środowisko programistyczne w sensie zestawu gotowych klas i metod których można używać do przygotowania własnych skalowalnych i wydajnych
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część piąta AJAX Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych
Paweł Rajba, pawel.rajba@continet.pl
Paweł Rajba, pawel.rajba@continet.pl Wprowadzenie Zalety Wady XMLHttpRequest AJAX w praktyce AJAX + jquery Literatura Z czego się składa? JavaScript + DOM Obiekt XMLHttpRequest Jakakolwiek technologia
Krótki kurs JavaScript
Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia 08 25.04.2016 r.) 1) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych
Pogadanka o czymś, co niektórzy nazywają AJAX
Pogadanka o czymś, co niektórzy nazywają AJAX Bartłomiej Świercz Katedra Mikroelektroniki i Technik Informatycznych Łódź, 25 listopada 2005 roku Nowy świat aplikacji internetowych... System/przeglądarka
AJAX. Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5.
AJAX Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5. Czym jest AJAX? AJAX (Asynchronous JavaScript And XML) nie jest nową technologią, ale nowym sposobem wykorzystania kombinacji istniejących technologii
XML extensible Markup Language. część 5
XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx
Programowanie Komponentowe WebAPI
Programowanie Komponentowe WebAPI dr inż. Ireneusz Szcześniak jesień 2016 roku WebAPI - interfejs webowy WebAPI to interfejs aplikacji (usługi, komponentu, serwisu) dostępnej najczęściej przez Internet,
CZYM JEST JAVASCRIPT?
JAVASCRIPT JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia
29. Poprawność składniowa i strukturalna dokumentu XML
29. i strukturalna dokumentu XML 13 października 2015 1 2 Poprawny składniowo dokument XML powinien być tworzony zgodnie z poniżej przedstawionymi zasadami. Deklaracja XML Powinien zawierać deklarację
Wykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
PHP: bloki kodu, tablice, obiekty i formularze
1 PHP: bloki kodu, tablice, obiekty i formularze SYSTEMY SIECIOWE Michał Simiński 2 Bloki kodu Blok if-else Switch Pętle Funkcje Blok if-else 3 W PHP blok if i blok if-else wyglądają tak samo i funkcjonują
JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...
JQuery jquery (jquery.com) to jedna z najbardziej popularnych bibliotek/frameworków do javascript. Jej popularność oczywiście znikąd się nie bierze. Dzięki tej bibliotece jesteśmy w stanie o wiele szybciej
Języki programowania wysokiego poziomu WWW
Języki programowania wysokiego poziomu WWW Zawartość Protokół HTTP Języki HTML i XHTML Struktura dokumentu html: DTD i rodzaje html; xhtml Nagłówek html - kodowanie znaków, język Ciało html Sposób formatowania
WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1
WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a.
O stronach www, html itp..
O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)
WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1
WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1 XML DOM (ang. XML Document Object Model Obiektowy Model Dokumentu XML) Inaczej drzewo DOM to hierarchiczny, obiektowy model dokumentu XML. DOM to platforma
Spis wzorców. Działania użytkownika Strona 147 Obsługa większości Działań użytkownika za pomocą kodu JavaScript przy użyciu metod obsługi zdarzeń.
Spis wzorców Aplikacja Ajax Strona 73 Tworzenie Aplikacji Ajax złożonych aplikacji, które można uruchomić w dowolnej współczesnej przeglądarce internetowej. Bezpośrednie logowanie Strona 509 Uwierzytelnianie
Zaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika
Tworzenie Stron Internetowych. odcinek 10
Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,
Zdarzenia Zdarzenia onload i onunload
Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać
Komunikacja i wymiana danych
Budowa i oprogramowanie komputerowych systemów sterowania Wykład 10 Komunikacja i wymiana danych Metody wymiany danych Lokalne Pliki txt, csv, xls, xml Biblioteki LIB / DLL DDE, FastDDE OLE, COM, ActiveX
Rys.2.1. Drzewo modelu DOM [1]
![Rys.2.1. Drzewo modelu DOM [1]](/thumbs/39/18108975.jpg "Rys.2.1. Drzewo modelu DOM [1]")
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Bazy Danych i Usługi Sieciowe
Bazy Danych i Usługi Sieciowe Język PHP Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. VIII Jesień 2011 1 /
Server setup. #include <SPI.h> #include <Ethernet.h> boolean incoming = 0;
Server setup #include #include boolean incoming = 0; byte mac[] = 0x00, 0xAA, 0xBB, 0xCC, 0xDA, 0x02 ; IPAddress ip(192,168, 0, 230); EthernetServer server(80); void setup() pinmode(2,
XML extensible Markup Language. część 5
XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle
WYKŁAD 1 METAJĘZYK SGML CZĘŚĆ 1
WYKŁAD 1 METAJĘZYK SGML CZĘŚĆ 1 SGML (Standard Generalized Markup Language) Standardowy uogólniony język znaczników służący do ujednolicania struktury i formatu różnego typu informacji (danych). Twórcy
Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]
![Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]](/thumbs/39/19385278.jpg "Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]")
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA JavaScript tak
Zajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją
Bazy danych i strony WWW
Bazy danych i strony WWW Obsługa baz danych poprzez strony WWW Niezbędne narzędzia: serwer baz danych np. MySQL serwer stron WWW np. Apache przeglądarka stron WWW interpretująca język HTML język skryptowy
Dokumentacja końcowa projektu z ZPR
Dokumentacja końcowa projektu z ZPR Temat projektu: Prowadzący projekt: Zespół projektowy: Losowe przeszukiwanie stanów dr inż. Robert Nowak Piotr Krysik Kamil Zabielski 1. Opis projektu Projekt ma za
JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk
Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk zdarzenia - wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML przeglądarka moŝe wywołać funkcję
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki 2017 Globalna sieć Internet Koncepcja sieci globalnej Usługi w sieci Internet
LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT
LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT 1. Wstęp XML (Extensible Markup Language Rozszerzalny Język Znaczników) to język formalny przeznaczony do reprezentowania danych
Ogólny schemat prostego formularza: A może lepiej zamiast przycisku opartego o input tak:
Ogólny schemat prostego formularza: A może lepiej zamiast przycisku opartego o input tak: accept - typy zawartości MIME akceptowane przez serwer (opcjonalny) accept-charset - zestaw znaków akceptowanych
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej Aplikacje WWW. Statyczne oraz dynamiczne strony WWW. Skrypty po stronie klienta. Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki
Systemy internetowe. Wykład 3 PHP. West Pomeranian University of Technology, Szczecin; Faculty of Computer Science
Systemy internetowe Wykład 3 PHP PHP - cechy PHP (Hypertext Preprocessor) bardzo łatwy do opanowania, prosta składnia, obsługuje wymianę danych z różnymi systemami baz danych pozwala na dynamiczne generowanie
Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008
Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator
Kurs HTML 4.01 TI 312[01]
![Kurs HTML 4.01 TI 312[01]](/thumbs/24/2176096.jpg "Kurs HTML 4.01 TI 312[01]")
TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów
XML extensible Markup Language. Paweł Chodkiewicz
XML extensible Markup Language Paweł Chodkiewicz XML - extensible Markup Language Uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób. Historia GML Projekt
Gatesms.eu Mobilne Rozwiązania dla biznesu
Mobilne Rozwiązania dla biznesu SPECYFIKACJA TECHNICZNA WEB API-USSD GATESMS.EU wersja 0.9 Opracował: Gatesms.eu Spis Historia wersji dokumentu...3 Bezpieczeństwo...3 Wymagania ogólne...3 Mechanizm zabezpieczenia
I Podstawy... 13. 1 Wprowadzenie do technologii Ajax... 15. 2 Żądanie... 19. 3 Odpowiedź... 31 XML 31 JSON 39
Spis treści O autorze... 9 Przedmowa... 11 I Podstawy... 13 1 Wprowadzenie do technologii Ajax... 15 Obiektowy model dokumentu XML 16 Zestawienie korzyści 16 2 Żądanie... 19 XMLHttpRequest od podszewki
TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty
1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,
Ministerstwo Finansów
Ministerstwo Finansów Departament Informatyzacji Specyfikacja Wejścia-Wyjścia Wersja 1.0 Warszawa, 16.02.2017 r. Copyright (c) 2017 Ministerstwo Finansów MINISTERSTWO FINANSÓW, DEPARTAMENT INFORMATYZACJI
Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz
SYLLABUS na rok akademicki 01/013 Tryb studiów Studia stacjonarne Kierunek studiów Informatyka Poziom studiów Pierwszego stopnia Rok studiów/ semestr II/4 Specjalność Bez specjalności Kod katedry/zakładu
Model semistrukturalny
Model semistrukturalny standaryzacja danych z różnych źródeł realizacja złożonej struktury zależności, wielokrotne zagnieżdżania zobrazowane przez grafy skierowane model samoopisujący się wielkości i typy
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 1. Wprowadzenie do aplikacji internetowych
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 5 Podstawy JavaScript Agenda Czym jest JavaScript? Podstawowe typy danych Zmienne Tablice Funkcje Zakres
Specyfikacja API 1.0. Specyfikacja kontroli Konta systemu CashBill z wykorzystaniem API opartego na REST
Specyfikacja API 1.0 API REST Specyfikacja kontroli Konta systemu CashBill z wykorzystaniem API opartego na REST CashBill Spółka Akcyjna ul. Rejtana 20, 41-300 Dąbrowa Górnicza Tel.: +48 032 764-18-42
WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1
WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1 CZYM JEST JQUERY? Biblioteka napisana w języku JavaScript, oparta na zasadzie write less, do more. Celem jej powstania było uproszczenie stosowania JavaScript na stronach.
Specyfikacja API bramki SMS/MMS/TTS
Specyfikacja API bramki SMS/MMS/TTS wersja 1.3.1 Piotr Isajew (pki@ex.com.pl) 21 lutego 2011 c 2011 EXPERTUS, http://www.ex.com.pl 1. Wprowadzenie API działa w oparciu o proste komunikaty XML przekazywane
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl
ngular, cz. II 1/24 Angular, cz. II Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 10 kwietnia 2015
Extensible Markup Language (XML) Wrocław, Java - technologie zaawansowane
Extensible Markup Language (XML) Wrocław, 15.03.2019 - Java - technologie zaawansowane Wprowadzenie XML jest językiem znaczników (ang. markup language) używanym do definiowania zbioru zasad rozmieszczenia
JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.
IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript
DOKUMENTACJA INTERFEJSU API - HTTPS
DOKUMENTACJA INTERFEJSU API - HTTPS WERSJA 0.1 DATA PUBLIKACJI : 01.03.2014 SPIS TREŚCI Spis treści Wprowadzenie 1 Dostęp do usługi notowania online 2 Opis struktur danych 3 Kody błędów 5 Historia wersji
Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop Spis treści
Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop. 2017 Spis treści O autorach 11 Podziękowania 12 Wprowadzenie 13 CZĘŚĆ I ZACZNIJ PROGRAMOWAĆ JUŻ DZIŚ Godzina 1. Praktyczne
JavaScript funkcyjność
JavaScript funkcyjność WWW 9 kwietnia 2014 Możliwości tworzenia dynamicznych stron WWW HTML i CSS. Skrypty CGI (Perl, PHP). Serwery (django, java). Plug-iny. Ksiażka Większość przykładów pochodzi z ksiażki:
Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.
Kod szkolenia: Tytuł szkolenia: FRONT-END Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest zarówno dla
Szczegółowy opis zamówienia:
Szczegółowy opis zamówienia: Rok 2016 budowa stron w html5 (8h v + 4h ćw) 8 szt. html5 - zaawans. (7h v + 5h ćw) 8 szt. programowania w java script (9h v + 7h ćw) 8 szt. java script zaawans (8h v + 4h
Informatyka I. Typy danych. Operacje arytmetyczne. Konwersje typów. Zmienne. Wczytywanie danych z klawiatury. dr hab. inż. Andrzej Czerepicki
Informatyka I Typy danych. Operacje arytmetyczne. Konwersje typów. Zmienne. Wczytywanie danych z klawiatury. dr hab. inż. Andrzej Czerepicki Politechnika Warszawska Wydział Transportu 2019 1 Plan wykładu
Podstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 14 AJAX, czyli jak odświeżyć bez odświeżania, część trzecia Na dzisiejszych zajęciach będziemy kontynuować realizację serwisu do wymiany wiadomości z wykorzystaniem technologii
Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.
Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/
Specyfikacja techniczna. mprofi Interfejs API
Warszawa 09.04.2015. Specyfikacja techniczna mprofi Interfejs API wersja 1.0.2 1 Specyfikacja techniczna mprofi Interfejs API wersja 1.0.2 WERSJA DATA STATUTS AUTOR 1.0.0 10.03.2015 UTWORZENIE DOKUMENTU
Funkcje i instrukcje języka JavaScript
Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje
Protokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.
Protokół HTTP 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. 1 Usługi WWW WWW (World Wide Web) jest najpopularniejszym sposobem udostępniania
Programowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
Programowanie w Sieci Internet JSP ciąg dalszy. Kraków, 9 stycznia 2015 r. mgr Piotr Rytko Wydział Matematyki i Informatyki
Programowanie w Sieci Internet JSP ciąg dalszy Kraków, 9 stycznia 2015 r. mgr Piotr Rytko Wydział Matematyki i Informatyki Co dziś będziemy robić JSP tags, Używanie tagów, Custom tags, JSP objests, Obiekty
Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]
![Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]](/thumbs/63/50009339.jpg "Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]")
JAVA wprowadzenie do programowania (3/3) [1] Czym jest aplikacja Java Web Start? Aplikacje JAWS są formą pośrednią pomiędzy apletami a aplikacjami Javy. Nie wymagają do pracy przeglądarki WWW, jednak mogą
Podstawy JavaScript ćwiczenia Kontekst: Mechanizmy pracy równoległej. Jarosław Kuchta
Mechanizmy pracy równoległej Jarosław Kuchta Zagadnienia Algorytmy wzajemnego wykluczania algorytm Dekkera Mechanizmy niskopoziomowe przerwania mechanizmy ochrony pamięci instrukcje specjalne Mechanizmy
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie
Technologie internetowe w programowaniu
Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński Wykorzystanie jquery Jak jquery wspomaga programistę? jquery wieloplatformowa biboteka JavaScript, wspomagająca manipulację elementami
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 2. Przygotowanie środowiska pracy
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek.
Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik
Referat z przedmiotu Technologie Internetowe SPIS TREŚCI
SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 1 mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Kontakt http://wierzba.wzks.uj.edu.pl/~kwrobel/ k.wrobel@epi.uj.edu.pl konsultacje, pokój 3.211 2 Bilans
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej JSP - Java Server Pages dr hab. inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki 2019 Aplikacje i skrypty WWW klasyfikacja
WYKŁAD 1 ANGULARJS CZĘŚĆ 1
WYKŁAD 1 ANGULARJS CZĘŚĆ 1 DEFINICJA ANGULARJS Framework JavaScript na licencji open-source wykorzystywany do tworzenia aplikacji SPA (single page applications) w oparciu o wzorzec projektowy Model-View-Controler.
DOM SAX AJAX. SAX,DOMiAJAX. Bartłomiej Świercz. Katedra Mikroelektroniki i Technik Informatycznych. Łódź, 11 kwietnia 2010
DOM,DOMi Bartłomiej Świercz Katedra Mikroelektroniki i Technik Informatycznych Łódź, 11 kwietnia 2010 Bartłomiej Świercz, DOM i DOM Model DOM org.w3c.dom DOM Document Object Model zapewnia: Zbiór obiektów
REFERAT O PRACY DYPLOMOWEJ
REFERAT O PRACY DYPLOMOWEJ Temat pracy: Projekt i budowa systemu zarządzania treścią opartego na własnej bibliotece MVC Autor: Kamil Kowalski W dzisiejszych czasach posiadanie strony internetowej to norma,
JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź
JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA Ćwiczenie 1 obliczanie daty Wielkanocy Napisz skrypt, który: poprosi użytkownika o podanie roku z przedziału 1900..2099 sprawdzi, czy podana wartość
Plan wykładu. 1. Protokół FTP. 2. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.
Plan wykładu 1. Protokół FTP. 2. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. 1 Protokół FTP Protokół FTP (File Transfer Protocol) [RFC 959] umożliwia
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Aplikacje internetowe
Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki W jaki sposób umieszczany