Workshop #4
Koło Naukowe Tworzenia Aplikacji Webowych
- Jak do strony dodać JavaScript?
- Czym jest jQuery i jak go używać?
- Dodajemy modal
- Dodajemy galerię
Krzysztof Jung
Dodanie JavaScrypt
- tag <script>
- skrypty w dokumencie vs skrypty w plikach
- odpalanie skryptów
Tag <script>
- zawiera w sobie kod skryptu
- zawiera link do pliku ze skryptem
- interpretacja skryptów jest synchroniczna
- w trakcie wykonania skryptów parsowanie dokumentu jest wstrzymane
- dobra praktyka: obszerne skrypty na koniec dokumentu (body)
<script>
- zawiera w sobie kod skryptu
- zawiera link do pliku ze skryptem
- interpretacja skryptów jest synchroniczna
- w trakcie wykonania skryptów parsowanie dokumentu jest wstrzymane
- dobra praktyka: obszerne skrypty na koniec dokumentu (body)
dokument vs pliki
- małe skrypty lub prototyp - dokument
- biblioteki - pliki
- logika aplikacji - pliki
- widgety/snippety/service'y - zależy
Jak uruchamiać?
- same skrypty - podczas parsowania
- często najpierw chcemy poczekać na dokument
- DOMContentReady - event
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>Jak uruchamiać?
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM.
</script>jQuery
- krótka historia
- główne zastosowania
- obecne trendy
jQuery - historia
- przeglądarki - różnice w DOM API
- polyfille - Dojo, GWT, Prototype
- jQuery boom
- HTML5
jQuery - zastosowania
- praca z DOM (CSS selectors)
- praca z eventami
- Ajax
- widgets
jQuery - trendy
- HTML5 + JS (ES6) vs jQuery
- nowe frameworki
- jakość widgetów
- czy używać jQuery?
jQuery - abc
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
$(function() {
console.log( "ready!" );
});
</script>$('.top-bar').hide();
$('.top-bar').fadeIn();
$('.top-bar').slideUp();
$('.top-bar').slideDown();
W konsoli:
jQuery - abc
<script>
$( 'button' ).click(function(event) {
console.log( "click!" );
});
$('button').toggle();
$('button').css('')
</script>jQuery plugins
- jak używać
- jak konfigurować
- dodajemy modal i galerię
jQuery plugins - użycie
- plik .js + .css
- skopiowanie do projektu (lub CDN)
- $('#id_miejsca').runWidget(options)
jQuery plugins - konfiguracja
- najczęściej komenda tworząca przyjmuje opcje
- przyjmują one postać obiektu JS
- najczęściej większość opcji ma wartość domyślną
- część funkcjonalności wywołujemy komendami
- $(widgetSelector).doSomething()
jQuery modal - Avground
- http://labs.voronianski.com/jquery.avgrund.js/
- jak konfigurować
- dodajemy modal
- http://zurb.com/building-blocks/log-in-form
- http://css2sass.herokuapp.com/
jQuery galeria - nanoGallery
- http://nanogallery.brisbois.fr/
- jak konfigurować
- dodajemy galerię
jQuery
By Krzysztof Jung
