JavaScript - Zaawansowane programowanie

THIS IS A DRAFT

This text may not be complete.

Template:JavaScript Links <slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >

title

JavaScript

</slideshow>

JavaScript - Zaawansowane programowanie ⌘

Co to jest ECMAScript ⌘

Czym charakteryzuje się ECMAScript jako język programowania?

JavaScript - Zaawansowane programowanie ⌘

Jakim językiem jest ECMAScript? ⌘

• Co to jest ECMAScript?

Jakim językiem jest ECMAScript? ⌘

• Co to jest DOM?

Jakim językiem jest ECMAScript? ⌘

• Co to jest BOM?

Jakim językiem jest ECMAScript? ⌘

• JavaScript = ECMAScript + BOM + DOM

Jakim językiem jest ECMAScript? ⌘

• Proceduralnym?

Jakim językiem jest ECMAScript? ⌘

• Proceduralnym?

Jakim językiem jest ECMAScript? ⌘

• Proceduralnym?
• Funkcyjnym?

Jakim językiem jest ECMAScript? ⌘

• Proceduralnym?
• Funkcyjnym?
• Obiektowym?

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji
• Currying

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji
• Currying
• Funkcje zwaracajace funkcje

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji
• Currying
• Funkcje zwaracajace funkcje
• Rekurencja

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji
• Currying
• Funkcje zwaracajace funkcje
• Rekurencja
• Funkcje wyższego rzędu

Programowanie funkcyjne w ECMAScript ⌘

• Funkcje anonimowe
• Domknięcia
• Aplikowanie funkcji
• Currying
• Funkcje zwaracajace funkcje
• Rekurencja
• Funkcje wyższego rzędu
• Efekty uboczne funkcji

Programowanie objektowe w ECMAScript ⌘

• W ECMAScript można powoływać instancje ale...

Programowanie objektowe w ECMAScript ⌘

• W ECMAScript można powoływać instancje ale...
• w ECMAScript nie ma klas!

Programowanie objektowe w ECMAScript ⌘

• Klasy znane z innych językow programowania można jednak imitować

Programowanie objektowe w ECMAScript ⌘

• Klasy znane z innych językow programowania można jednak imitować
• za pomoc funkcji!

Programowanie objektowe w ECMAScript ⌘

• W ECMAScript obiekt może być równocześnie definicj klasy

Programowanie objektowe w ECMAScript ⌘

• W ECMAScript obiekt może być równocześnie definicj klasy
• ale to zachowanie nie jest dostępne tylko w języku ECMAScript. Tak możliwość daje również np. język Scala.

Programowanie objektowe w ECMAScript ⌘

Co świadczy o tym, że dany język można uznać za obiektowy - 4 filary (paradygmaty) programowania obiektowego

Programowanie objektowe w ECMAScript ⌘

• Abstrakcja

Programowanie objektowe w ECMAScript ⌘

• Abstrakcja
• Dziedziczenie

Programowanie objektowe w ECMAScript ⌘

• Abstrakcja
• Dziedziczenie
• Hermetyzacja/Enkapsulacja

Programowanie objektowe w ECMAScript ⌘

• Abstrakcja
• Dziedziczenie
• Hermetyzacja/Enkapsulacja
• Polimorfizm

Możliwości JavaScript ⌘

• JavaScript a inne języki
• Łatwość programowania
• Programowanie obiektowe
• JavaScript i QA

JavaScript - OOP ⌘

• Co jest obiektem?
• Objekt Global i Object
• Najważniejsze obiekty
• Wsparcie dla paradygmatów OOP

JavaScript - OOP ⌘

Konstruktory ⌘

Wzorzec prototypu ⌘

 function Father() {
 }

 Father.prototype.age = 48;
 Father.ptototype.children = new Array();

 father1 = new Father();
 father2 = new Father();

 father1.children.push('Adam');

 console.log(father2.children);

Wzorzec dynamicznego prototypu ⌘

 public class Father {
     public int age;
     public Father(int age) {
         this.age = age;
     }
     public int getAge() {
         return this.age;
     }
 }
 Father father1 = new Father(36);
 Father father2 = new Father(42);

 System.out.println(father1.getAge());
 System.out.println(father2.getAge());

 function Father(age, children) {
     this.age = age;
     this.children = children;
     if (typeof Father.__instance == "undefined") {
         Father.prototype.getAge = function() {
             return this.age;
         }
         Father.__instance = true;
     }
 }
 father1 = new Father(36, new Array("Adam"));
 father2 = new Father(42, new Array("Anna"));

 console.log(father1.getAge());
 console.log(father1.age);
 console.log(father1.children);
 
 console.log(father2.getAge());
 console.log(father2.age);
 console.log(father2.children);

• Dziedziczenie
• Słowo kluczowe this
• Wzorzec prototypu
• Pierwsza klasa

JavaScript i DOM ⌘

• Czym jest DOM
• Wezły (tagi oraz textNode)
• Podstawowe elementy drzewa
• "Ładowanie" dokumentu HTML i możliwość pracy z węzłem

JavaScript i zdarzenia (Events) ⌘

• Programowanie oparte o zdarzenia
• Wzorzec obserwatora
• Omówienie i wykrywanie zdarzeń
• Reakcja na zdarzenia

Wykrywanie błędów, obsługa wyjątków ⌘

• Najczęstrze błędy
• Komunikaty błędów
• Logowanie błędów i pozyskiwanie informacji o obiektach
• Obsługa wyjątków, konstrukcja try, catch, finally

jQuery - Podstawowe informacje ⌘

• Co to jest juery
• Krótka historia
• jQuery i ECMA-262
• jQuery alternatywy?
• Zalety
  • Popularność
  • Liczba bibliotek
  • Niezależny od urządzenia klienta
• Wady
  • Wielkość
  • Jakość pluginów

CDN...

Exercises

• Got to repository