Code Carrots

Zajęcia z programowania w języku JavaScript

Autor prezentacji: Artur Delura

Breaking the ice

• Każdy się przedstawia
• Ustalamy zasady w grupie
• Przedstawiamy zarys grupy (czas trwania, grupa zamknięta)
• Plakietki z imonami

Świat IT - co jest najważniejsze?

• Wiedza, niewiedza, czy umiejętność szukania źródeł wiedzy?
• Sposób myślenia, umiejętność rozwiązywania problemów.
• Ciągły rozwój, współpraca i wymiana doświadczeń.

• To i to.
• Rozwiązywanie zagadek.
• Uświadomić, że niewiedza to normalny stan.
• Pokazać, gdzie szukać informacji i odpowiedzi na pytania.

Do czego można wykorzystać JavaScript?

• Interaktywne strony internetowe.
• Aplikacje mobile (Firefox OS, PhoneGap).
• Aplikacje Windows 8.
• Backend stron www - node.js.

Przykłady użycia

• Slidery
• Walidacja formularzy
• Gry przeglądarkowe
• Narzędzia i Aplikacje internetowe

Jakie projekty będziemy robić?

• Czat w czasie rzeczywistym.
• Gra zgadnij liczbę.
• System rankingowy do gry w piłkarzyki.
• Wasze pomysły?

Funkcjonalne strony WWW dzięki HTML i CSS

HTML - Warstwa opisująca strukturę dokumentu.

<img class="logo" src="./logo.png"></img>
						

CSS - Wartstwa definiująca wygląd strony.

.logo { border: 10px solid #fff; }
						

Co jest nie tak w tym kodzie? hr, input, meta, link, base.

Kodzimy trochę

• Prezentacja IDE: Atom
• Przygotowujemy szablon strony
  • Szczypta HTML'a, CSS'a i JS'a.
    • HTML - znaczniki atrybuty i wartości
    • CSS - selektory, wygląd
  • Jak działa przeglądarka

JavaScript - Interaktywne strony WWW (warstwa behawioralna)

• Dostęp do elementów na stronie i ich modyfikacja.
• Logika strony - wykonywanie odpowiednich czynności w zależności od sytuacji.
• Reakcja na zdarzenia użytkownika.
• Komunikacja z serwerem (pobieranie i wysyłanie danych).

W jaki sposób my będziemy uczyć się JS?

• Poznamy składnię, gramatykę i słownictwo.
• Doświadczymy tego, w jaki sposób JS współpracuje z przeglądarką.
• Nauczymy się myśleć programistycznie i samodzielnie rozwiązywać problemy.
• Będziemy współpracować ze sobą i pisać kod zrozumiały dla innych.

Narzędzia deweloperskie (F12)

Explore and Master Chrome DevTools @ Code School

Przedstawienie Chrome Developer Tools

• Pokazać że jest też przydatny, przy pracy z treścią i wyglądem strony.
• Ogólnie o programowaniu
• Skrypt jako zestaw poleceń do wykonania (receptura, przepis)
• Codziennie wykonujemy mnóstwo skomplikowanych czynności, nawet o nich nie myśląc. Gdy uczymy się czegoś nowego, to zwykle rozkładamy to na czynniki pierwsze.
• Na początku będziemy zlecać wykonanie prostych czynności i nauczymy się rozkładać nasz cel na czynniki pierwsze.
• Pokazać działania matematyczne
  • Dodawanie liczb i stringów (typy)
  • Wartości logiczne true i false