Technologie internetowe w programowaniu
|
|
- Mieczysław Grzelak
- 6 lat temu
- Przeglądów:
Transkrypt
1 Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński Wykorzystanie jquery
2 Jak jquery wspomaga programistę? jquery wieloplatformowa biboteka JavaScript, wspomagająca manipulację elementami drzewa DOM, wykonywać zapytania asynchroniczne, tworzyć animacje itp. znaleźć Elementy w dokumencie HTML zmienić Zawartość strony HTML reagować Na żądania użytkownika animować Zawartość strony internetowej wymieniać Dane poprzez sieć (aktuazując widok) 2
3 Statyczne strony HTML Web 1.0 w większości statyczne strony internetowe wykorzystujące treści dodawane przez administratora. Web 2.0 serwisy internetowe powstałe ok roku, w których główną rolę odgrywa treść tworzona przez samych użytkowników. 3
4 Jak rozpocząć korzystanie z jquery? Ściągnij bibotekę jquery (lub skorzystaj z CDN). Załaduj bibotekę w kodzie danej strony internetowej. Wykorzystaj możwości biboteki w kodzie swojej strony. DOM DOM DOM JavaScript DOM DOM 4
5 Wyszukiwanie elementów Strona HTML <!DOCTYPE <html> <head> html> <title>jquery </head> <body> początek</title> <h1>gdzie planujesz wyjechać?</h1> <p>pokaż </body> </html> Listę</p> Reprezentacja w DOM DOCUMENT html head title jquery p... body h1 Gdzie p... p Pokaż... 5
6 Wyszukiwanie elementów Metoda text() pozwala na dostęp do ciągu znaków zawartego w ramach danego elementu. $jquery("h1").text(); Lub krócej: "Gdzie planujesz wyjechać?" $("h1").text(); Reprezentacja w DOM DOCUMENT html head title jquery p... body "Gdzie planujesz wyjechać?" Jest to też modyfikator: $("h1").text("dokąd? ); "Dokąd?" 6 h1 p Gdzie p... Pokaż...
7 Czy DOM jest już gotowy? Javascript może zostać wykonany zanim DOM zostanie poprawnie załadowany. Należy mieć pewność, że DOM zakończył wczytywanie zawartości HTML zanim zostanie wykorzystana biboteka jquery. jquery(document).ready(function(){ <code> }); Przykładowe wykorzystanie: jquery(document).ready(function(){ $("h1").text("dokąd?"); }); 7
8 Modyfikacja tekstu wielu elementów na raz Kod HTML <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> body h1 h2 ul Gdzie plan... Cele podróży Zmiana tekstu wewnątrz wszystkich elementów sty nieuporządkowanej możwa jest za pomocą polecenia: $("").text(""); 8
9 Selektory <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> CSS p {... } $("#cele"); $(".promo"); $("p"); jquery #kontener {... } $("#kontener");.klasa {... } $(".klasa");
10 Wybór elementów potomnych <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <> <ul id="francja"> <>Paryż</> </ul> </> < class='promo'>rio</> </ul> body... ul Rzym ul Wybór elementu potomnego (dziecka) w hierarchii DOM reazowany jest przez: Rio Paryż $("#destinations "); 10
11 Wybór tylko bezpośrednich potomków <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <> <ul id="francja"> <>Paryż</> </ul> </> < class='promo'>rio</> </ul> Wybór elementu potomnego (dziecka) w hierarchii DOM reazowany jest przez: body... ul Rzym ul Rio Nie wybrano Paryż $("#destinations > "); 11
12 Wykorzystanie pseudoselektorów <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Pierwszy element: body h1 h2 ul Gdzie plan... Cele podróży $("#cele :first"); Ostatni: $("#cele :last"); 12
13 Wykorzystanie pseudoselektorów <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Nieparzysty element: body h1 h2 ul Gdzie plan... Cele podróży $("#cele :odd"); #0 Parzysty: $("#cele :even"); #1 Numeracja rozpoczyna się od zera! #2 13
14 Wybór elementów w bardziej wydajny sposób <h1>gdzie planujesz wyjechać?</h1> <h2>cele podróży</h2> <p>pokaż stę</p> <ul id="cele"> <>Rzym</> <>Paryż</> < class='promo'>rio</> </ul> Zamiast: body h1 h2 ul Gdzie plan... Cele podróży $("#cele "); Stosuj: $("#cele").find(""); 14
15 Wybór elementów w bardziej wydajny sposób Zamiast: $(":first"); Stosuj: $("").first(); body h1 h2 Gdzie plan... Cele podróży Zamiast: $(":last"); Stosuj: $("").last(); ul 15
16 Poruszanie się po DOM Wybór pierwszego elementu sty: $("").first(); Wybór drugiego elementu sty: $("").first().next(); body h1 h2 Gdzie plan... Cele podróży Powrót do pierwszego elementu: $("").first().next().prev(); ul 16
17 Poruszanie się po DOM - rodzice i dzieci Wybór elementu nadrzędnego (rodzica): $("").first().parent(); Wybór dzieci: $("#cele").children(""); Funkcja children() wybiera jednak tylko bezpośrednich potomków w przeciwieństwie do np. funkcji find. body h1 h2 ul Gdzie plan... Cele podróży 17
18 Dodawanie elementów $(document).ready(function() { var cena = $('<p> </p>'); }); D Dokument Dodawanie elementów: class="wakacje".append(<element>) h2 Bieszczady.after(<element>) Akapit nie jest w DOM button Jaka cena? p Price node (not in thedom yet) prepend(<element>).before(<element>) 18
19 Dodawanie elementów $(document).ready(function() { var cena = $('<p> </p>'); $('.wakacje').before(cena); }); Dokument p Dany element zostaje umieszczony przed wskazanym class="wakacje" h2 button Bieszczady Jaka cena? 19
20 Dodawanie elementów D $(document).ready(function() { var cena = $('<p> </p>'); $('.wakacje').after(cena); }); Dokument h2 class="wakacje" Bieszczady Dany element zostaje umieszczony za wskazanym. Tym razem jest to integralna część hierarchii DOM. button Jaka cena? p Price node (not in thedom yet)
21 Dodawanie elementów $(document).ready(function() { var cena = $('<p> </p>'); $('.wakacje').prepend(cena); }); p class="wakacje" Dany element zostaje dołączony jako pierwszy potomek wskazanego h2 button Bieszczady Jaka cena? 21
22 Dodawanie elementów $(document).ready(function() { var cena = $('<p> </p>'); $('.wakacje').append(cena); }); Dokument class="wakacje" h2 Bieszczady button Dany element zostaje dołączony jako ostatni element należący do wskazanego. Jest to nieco szybsza metoda od poprzedniej. p Jaka cena? Natomiast aby usunąć element: $('button').remove(); 22
23 Reakcja na zdarzenia Schemat zdefiniowania reakcji na zdarzenie jest następujący: element.on(<zdarzenie, reakcja>) Przykład (wyświetlenie ceny po kknięciu na przycisk): appcation.js $(document).ready(function() { $('button').on('cck', function() { var cena = $('<p>399.99</p>'); $('.wakacje').append(cena); $('button').remove(); }); }); 23
24 Reakcja na zdarzenia - ulepszona wersja Poprzedni kod wyszukiwał w hierarchii DOM wszystkie przyciski, więc nie działałby poprawnie, gdyby na stronie zawartych było więcej niż jeden przycisk. Należy zbadać co było źródłem zdarzenia i odnieść się tylko do tego elementu. Potrzebny appcation.js jest wskaźnik $(this) $(document).ready(function() { $('button').on('cck', function() { var cena = $('<p>399.99</p>'); $(this).after(cena); $(this).remove(); }); }); 24
25 Filtrowanie wyszukiwanie określonych elementów <div id='filtry'>... //elementy z klasami.promo i.koniec <button class='promocja-f'>tylko teraz </button> <button class='konczy-f'>ostatnie sztuki</button>... </div> Wyróżnij pozycje znajdujące się aktualnie w promocji poprzez dodanie klasy tak : $('#filtry').on('cck', '.promocja-f',function() { $('.wakacje').filter('.promo').addclass('tak'); }); Usuń wyróżnienie dla promocji dobiegających końca: $('#filtry').on('cck', '.konczy-f', function() { $('.wakacje').filter('.koniec').removeclass('tak'); }); 25
26 Zmiana sty appcation.js Funkcja css() może być wykorzystywana do zmiany sty. Działa jak akcesor lub modyfikator. $(document).ready(function() { $('#wakacje').on('cck', function() { $(this).css('background-color', '#252b30'); $(this).css('border-color', '1px sod #967'); }); }); Wspomniana funkcja implementuje wzorzec dekorator: $(this).css('background-color', '#252b30').css('border-color', '1px sod #967'); Najlepiej zmienić w ramach jednej instrukcji wszystkie style dla danego komponentu: $(this).css({'background-color': '#252b30', 'border-color': '1px sod #967'}); 26
27 Ukrywanie i pokazywanie elementów By appcation.js pokazać element blokowy można zmienić wartość atrybutu display: $(document).ready(function() { $('#wakacje').on('cck', function() { $(this).css('display', 'block'); }); }); Jednak efektywniejsza wersja tego przykładu to wykorzystanie funkcji show(): $(this).show() Podobnie ukrywanie elementu można zreazować za pomocą: $(this).hide() Opóźnienie pozwala wprowadzić elementy animacji: $(this).hide("slow") 27
28 Najprostsza animacja 28
29 Wbudowane efekty w jquery fadein(), fadeout(), fadeto() ukrywa/pokazuje element zmieniając jego przeźroczystość hide() ukrywa zadany element show() pokazuje zadany element sdedown(), sdeup() ukryj/pokaż elementy wciągając je do góry/dołu strony internetowej Większość funkcji ma jeszcze wariant z przedrostkiem toggle. 29
30 Proste menu rozwijane 30
31 Proste menu rozwijane Kod HTML Kod skryptu 31
32 Własne animacje funkcja animate() Funkcja animate() pozwala na reazację wielu efektów jednocześnie: By jednocześnie zmienić przeźroczystość, położenie oraz wysokość elementu: 32
33 Obsługa klawiatury 33
34 Obsługa myszy 34
35 Przykładowy sposób sterowania postacią z gry 35
36 Lista zadań do zrobienia 36
37 Lista zadań do zrobienia 37
38 Wykonywanie zapytań asynchronicznie Wyśj dane na serwer i pokaż rezultat użytkownikowi po zakończeniu: Pobierz dane i odśwież stronę (bez przeładowania): 38
39 Wykonywanie zapytań asynchronicznie Wyśj dane na serwer i pokaż rezultat użytkownikowi lub komunikat błędu: Pobierz i wykonaj skrypt JS: 39
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE LOGO CONTACT NAV CONTENT SIDEBAR FOOTER PRACA DOMOWA CONTENER LOGO HOME CONTACT DROPDOWN DROPDOWN CONTENT_WRAP Lista UL Lista UL Lista UL SIDEBAR_LEFT WIDTH:20% NO BACKGROUND WIDTH:65% H4
Bardziej szczegółowoW 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:
Bardziej szczegółowoFront-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
Bardziej szczegółowoPrzekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany)
Wrocławski Instytut Zastosowań Informacji Przestrzennej i Sztucznej Inteligencji Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany) Szkolenia
Bardziej szczegółowoWidż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
Bardziej szczegółowoWYKŁ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.
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia
Bardziej szczegółowoTworzenie 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
Bardziej szczegółowoProgramowanie w Sieci Internet jquery - nowy aromat kawy angular.js. Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki
Programowanie w Sieci Internet jquery - nowy aromat kawy angular.js Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki Co będzie dziś jquery - nowy aromat kawy, czyli biblioteka
Bardziej szczegółowoJQuery. $('#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
Bardziej szczegółowoTechnologie Internetu. JQuery
Technologie Internetu. JQuery Aleksander Denisiuk(denisjuk@pja.edu.pl) Polsko-Japońska Akademia Technik Komputerowych Wydział Informatyki w Gdańsku ul. Brzegi 55, 80-045 Gdańsk 22maja2015 1/23 JQuery Najnowsza
Bardziej szczegółowoplansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
Bardziej szczegółowoRys.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
Bardziej szczegółowoDokumentacja Skryptu Mapy ver.1.1
Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoSieciowe Technologie Mobilne. Laboratorium 4
Sieciowe Technologie Mobilne Laboratorium 4 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 4 Urozmaicone zostaną animacje potworów, aby odpowiadały
Bardziej szczegółowoDOM (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
Bardziej szczegółowoapp/ - folder zawiera pliki konfiguracyjne dla całej aplikacji src/ - folder zawiera cały kod PHP aplikacji
Baza danych i ORM Projekt zestaw usług dostępnych pod daną domeną. Aplikacja niezależnie działające programy/serwisy (w obrębie pojektu). Zwyczajowo projekt posiada dwie aplikacje: Frontend Backend Moduł
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoSpecyfikacja techniczna kreacji HTML5
Specyfikacja techniczna kreacji HTML5 www.gemius.pl Parametry przekazywane do kreacji Kreacje HTML osadzane są na stronie za pomocą znacznika . W adresie do pliku kreacji przekazywane są parametry
Bardziej szczegółowoSTRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
Bardziej szczegółowoLABORATORIUM 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
Bardziej szczegółowoJAVAScript 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
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Bardziej szczegółowoWYKŁ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.
Bardziej szczegółowoTworzenie 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,
Bardziej szczegółowoCo 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
Bardziej szczegółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoResponsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Bardziej szczegółowoZaję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ą
Bardziej szczegółowoE.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
Bardziej szczegółowoPodstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Bardziej szczegółowoZ CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Bardziej szczegółowoPLAN 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
Bardziej szczegółowoInnowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY
Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY 1. Informacje o innowacji Nazwa szkoły: Zespół Szkół w Choroszczy Etap edukacyjny: Szkoła Podstawowa, klasy 4-6 Tytuł innowacji: Pasja
Bardziej szczegółowoTomasz Grześ. Systemy zarządzania treścią, cz. II
Tomasz Grześ Systemy zarządzania treścią, cz. II Panel administracyjny Panel administracyjny pozwala na zarządzanie wszystkimi elementami pakietu, m.in. zarządzanie użytkownikami, edycję stron, instalowanie
Bardziej szczegółowoO sobie. Adam Kowalski. Absolwent informatyki Uniwersytetu Wrocławskiego Full-stack Developer w firmie Synergy Codes.
Wstęp do Angulara O sobie Adam Kowalski Absolwent informatyki Uniwersytetu Wrocławskiego Full-stack Developer w firmie Synergy Codes adam.kowalski@synergycodes.com https://www.synergycodes.com Plan wykładu
Bardziej szczegółowoHTML, 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
Bardziej szczegółowoDokumentacja imapliteapi
Dokumentacja imapliteapi Urząd Marszałkowski Województwa Małopolskiego 30.06.2014 Spis treści: 1. Wprowadzenie... 3 2. Sposób użycia biblioteki imapliteapi... 3 3. Metody API... 5 4. Lista gotowych kompozycji
Bardziej szczegółowoPliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:
Technologia wykonania projektu: HTML5 Javascript: o jquery (1.9.1), o CreateJS (0.6.1): EaselJS, TweenJS, PreloadJS. Części funkcjonalne projektu: Strona internetowa pliki strony internetowej zlokalizowane
Bardziej szczegółowoReferat Pracy Dyplomowej
Referat Pracy Dyplomowej Team Pracy: Projekt i realizacja gry w technologii HTML5 z wykorzystaniem interfejsu programistycznego aplikacji Facebook Autor: Adam Bartkowiak Promotor: dr inż. Roman Simiński
Bardziej szczegółowomedia Blitz wydajne sytemy szablonów
Blitz wydajne sytemy szablonów Dlaczego stosować szablony? MVC Kontroler Model Widok Co to jest Blitz? Rozszerzenie PHP stworzone przez Alexey A. Rybak a. Regularnie rozwijany od 2005 roku. Szybki i lekki
Bardziej szczegółowoFunkcje 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
Bardziej szczegółowoĆwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
Bardziej szczegółowoWYKŁ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.
Bardziej szczegółowoDziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
Bardziej szczegółowoANIMACJE W CSS3. Czyli po co płacić podatek o Javy Script i JQuery
ANIMACJE W CSS3 Czyli po co płacić podatek o Javy Script i JQuery DAWNIEJ: - Flash - Gif - Animacje w Photoshop - Grafika w Photoshop (cienie) OBECNIE -JavaScript - jquery -CSS3!!! PODATEK OD JS I JQ Według
Bardziej szczegółowoPodstawy 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
Bardziej szczegółowoPomoc dla systemu WordPress
Pomoc dla systemu WordPress Ten plik pomocy przeznaczony jest dla pluginu stat24 w wersji 0.2. W tym pluginie porzucono wsparcie dla starszych wersji WordPress (niższych niż 1.5) oraz zrezygnowano z opcji
Bardziej szczegółowoFormat 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
Bardziej szczegółowoKompresja stron internetowych
Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r. O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2 3 Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych
Bardziej szczegółowoIlość cyfr liczby naturalnej
Ilość cyfr liczby naturalnej Użytkownik wprowadza liczbę naturalną n. Podaj algorytm znajdowania ilości cyfr liczby n. (Np.: po wprowadzeniu liczby 2453, jako wynik powinna zostać podana liczba 4). Specyfikacja
Bardziej szczegółowoAplikacje Internetowe
Aplikacje Internetowe ITA-103 Wersja 1 Warszawa, październik 2008 Spis treści Wprowadzenie i-4 Moduł 1 Podstawy HTML 1-1 Moduł 2 Kaskadowe Arkusze Stylów CSS 2-1 Moduł 3 Podstawy JavaScript 3-1 Moduł 4
Bardziej szczegółowoAjax. 1. Wprowadzenie. 2. Aplikacja serwerowa
Ajax 1. Wprowadzenie Do tej pory każda akcja na Waszej stronie kończyła się nowym requestem do serwera i przeładowaniem całej strony w przeglądarce. W tej instrukcji dodamy elementy asynchroniczne na stronie,
Bardziej szczegółowoWyszukiwanie największej spośród czterech liczb. Przykładowe rozwiązanie
Wyszukiwanie największej spośród czterech liczb Użytkownik podaje cztery liczby rzeczywiste. Podaj algorytm znajdowania największej spośród nich. (Np.: po wprowadzeniu liczb: 12 7 18.5 9 program powinien
Bardziej szczegółowoZad. 6: Sterowanie robotem mobilnym
Zad. 6: Sterowanie robotem mobilnym 1 Cel ćwiczenia Utrwalenie umiejętności modelowania kluczowych dla danego problemu pojęć. Tworzenie diagramu klas, czynności oraz przypadków użycia. Wykorzystanie dziedziczenia
Bardziej szczegółowoLaboratorium 6 Tworzenie bloga w Zend Framework
Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy
Bardziej szczegółowo6.4. Efekty specjalne
6.4. Efekty specjalne W programie MS PowerPoint 2010 znajdziemy coś takiego jak efekty specjalne. Służą one po to by prezentacja nie stała się monotonna i zachęcała widzów do uwagi poprzez zastosowane
Bardziej szczegółowoSprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4
03.04.2017r AGH, WIMIR, Inżynieria Mechatroniczna Dawid Furdzik Nr albumu: 279671 Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4 Po wywołaniu polecenia odpowiedź serwera wygląda następująco:
Bardziej szczegółowoEfektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript
Kod szkolenia: Tytuł szkolenia: HTML5/ANG Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript Dni: 5 Opis: Adresaci szkolenia: Kurs przeznaczony jest dla programistów
Bardziej szczegółowoReferat 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
Bardziej szczegółowoPodstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Bardziej szczegółowoPrezentacja i transformacja
Prezentacja i transformacja Bartłomiej Świercz Katedra Mikroelektroniki i Technik Informatycznych Łódź, 21 października 2005 roku 1 Prezentacja Przykładowa aplikacja CSS- Cascading Style Sheets CSS2aXML
Bardziej szczegółowoBackend Administratora
Backend Administratora mgr Tomasz Xięski, Instytut Informatyki, Uniwersytet Śląski Katowice, 2011 W tym celu korzystając z konsoli wydajemy polecenie: symfony generate:app backend Wówczas zostanie stworzona
Bardziej szczegółowo<ul> <ul> </ul> </ul>
Tworzenie list z CSS namiot materac latarka mapa koc namiot materac latarka mapa koc Lista (wykaz) umożliwia tworzenia uszeregowanych grup informacji
Bardziej szczegółowoA Zasady współpracy. Ocena rozwiązań punktów punktów punktów punktów punktów
A Zasady współpracy Ocena rozwiązań 3.0 25 40 punktów 3.5 41 65 punktów 4.0 66 80 punktów 4.5 81 100 punktów 5.0 101 130 punktów Warunki zaliczenia przedmiotu Student uzyska ocenę zaliczającą (3.0) o ile
Bardziej szczegółowoPlatforma e-learningowa
Dotyczy projektu nr WND-RPPD.04.01.00-20-002/11 pn. Wdrażanie elektronicznych usług dla ludności województwa podlaskiego część II, administracja samorządowa realizowanego w ramach Decyzji nr UDA- RPPD.04.01.00-20-002/11-00
Bardziej szczegółowoTell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz.
HTML & CSS 1 Tell a Story Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. Ćwiczenia
Języki programowania wysokiego poziomu Ćwiczenia Języki programowania Ćwiczenia Strukturalny HTML Arkusze CSS Formularze HTML i PHP Baza danych MySQL Forum internetowe Strukturalny HTML Zadania Dokument
Bardziej szczegółowo1 Moduł Inteligentnego Głośnika
1 Moduł Inteligentnego Głośnika Moduł Inteligentnego Głośnika zapewnia obsługę urządzenia fizycznego odtwarzającego komunikaty dźwiękowe. Dzięki niemu możliwa jest konfiguracja tego elementu Systemu oraz
Bardziej szczegółowoEdycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji
Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji uzyskujemy widok: a. Wstawianie tekstów Tekst możemy wpisywać bezpośrednio w panelu lub wklejać do edytora. Jeśli wklejamy tekst
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML
Bardziej szczegółowoObiektowy model dokumentu. Katedra Mikroelektroniki i Technik Informatycznych
Katedra Mikroelektroniki i Technik Informatycznych Łódź, 14 października 2005 roku Wstęp DOM Document Object Model zapewnia: Zbiór obiektów reprezentujących dokumenty XML i HTML. Model łączenia obiektów.
Bardziej szczegółowo1 Moduł Inteligentnego Głośnika 3
Spis treści 1 Moduł Inteligentnego Głośnika 3 1.1 Konfigurowanie Modułu Inteligentnego Głośnika........... 3 1.1.1 Lista elementów Modułu Inteligentnego Głośnika....... 3 1.1.2 Konfigurowanie elementu
Bardziej szczegółowoAplikacje w środowisku VBA. Visual Basic for Aplications
Aplikacje w środowisku VBA Visual Basic for Aplications Podstawowe informacje o VBA Visual Basic for Aplications, w skrócie VBA, to język programowania rozwijany przez Microsoft, którego zastosowanie pozwala
Bardziej szczegółowoFirebug. Instalacja Firebuga. Zakładka HTML
Firebug Firebug jest darmowym rozszerzeniem przeglądarki Mozilla Firefox, które znacząco ułatwia pracę nad wyglądem serwisu. W tym artykule poznasz sposoby, dzięki którym będziesz mógł tworzyć strony szybciej
Bardziej szczegółowoza pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Bardziej szczegółowoAplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed
Bardziej szczegółowoŹ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/
Bardziej szczegółowoProgramowanie na poziomie sprzętu. Programowanie w Windows API
Programowanie w Windows API Windows API Windows Application Programming Interface (API) to zestaw funkcji systemu operacyjnego Windows, które umożliwiają aplikacjom korzystanie z wszystkich usług systemu.
Bardziej szczegółowojquery Aplikacje internetowe laboratorium jquery
jquery Celem dwiczenia jest zapoznanie studenta z biblioteką jquery, przeznaczoną dla języka JavaScript. W trakcie wykonywania zadao student zdobędzie następujące umiejętności: posługiwanie się różnymi
Bardziej szczegółowo2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
Bardziej szczegółowoI. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
Bardziej szczegółowoKASK by CTI. Instrukcja
KASK by CTI Instrukcja Spis treści 1. Opis programu... 3 2. Pierwsze uruchomienie... 4 3. Okno główne programu... 5 4. Konfiguracja atrybutów... 6 5. Nadawanie wartości atrybutom... 7 6. Wybór firmy z
Bardziej szczegółowoStruktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:
Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod
Bardziej szczegółowoSzczegół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
Bardziej szczegółowoBudowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)
Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS) Laboratorium 7 Technologie internetowe Zofia Kruczkiewicz TINT_Lab_7, Zofia Kruczkiewicz 1 Wykaz pytań dotyczących materiału
Bardziej szczegółowoPodstawy 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
Bardziej szczegółowoPrzykład integracji kalkulatora mbank RATY na platformie IAI
Przykład integracji kalkulatora mbank RATY na platformie IAI 1. Moderacja - > Dodatki HTML i JavaScript 1.1 Klikamy na przycisk nowy dodatek Wpisujemy w pole Tytuł dodatku nazwę CSS_mRaty. Następnie ustawiamy
Bardziej szczegółowoTechnologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny
Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny AiRIII gr. 2TI sekcja 1 Autorzy: Tomasz Bizon Józef Wawrzyczek 2 1. Wstęp Celem projektu było stworzenie sklepu
Bardziej szczegółowoZad. 3: Rotacje 2D. Demonstracja przykładu problemu skończonej reprezentacji binarnej liczb
Zad. 3: Rotacje 2D 1 Cel ćwiczenia Wykształcenie umiejętności modelowania kluczowych dla danego problemu pojęć. Definiowanie właściwego interfejsu klasy. Zwrócenie uwagi na dobór odpowiednich struktur
Bardziej szczegółowoJavaScript 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:
Bardziej szczegółowoXML 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
Bardziej szczegółowoAUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ
Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa
Bardziej szczegółowoZaawansowane 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
Bardziej szczegółowo2.8. Algorytmy, schematy, programy
https://app.wsipnet.pl/podreczniki/strona/38766 2.8. Algorytmy, schematy, programy DOWIESZ SIĘ co oznaczają pojęcia: algorytm, schemat blokowy, język programowania, jakie są sposoby obliczania największego
Bardziej szczegółowoPERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed
Bardziej szczegółowodokumentacja Edytor Bazy Zmiennych Edytor Bazy Zmiennych Podręcznik użytkownika
asix 4 Edytor Bazy Zmiennych Podręcznik użytkownika asix 4 dokumentacja Edytor Bazy Zmiennych ASKOM i asix to zastrzeżone znaki firmy ASKOM Sp. z o. o., Gliwice. Inne występujące w tekście znaki firmowe
Bardziej szczegółowo