Upload
functionite
View
4.771
Download
6
Embed Size (px)
Citation preview
Podstawy programowania w JavaScript
www.kodu.je - podpatrz, jak programują inni
Damian Wielgosik
Nokia
Roche
ferrante.pl
Front-Trends
SiteSell
javascript.plmeet.js
Falsy Values
@varjshowtocodeinhtml.com
Functionite founder
Czym jest programowanie?
Programowanie to planowanie.
Zacznijmy od najprostszych, życiowych czynności.
Wyjście na zakupy?
Co robisz, gdy planujesz pójść kupić coś do jedzenia?
1. Robisz listę, co chcesz kupić
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy.
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się.
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się. 4. Sprawdzasz, czy wziąłeś klucze, portfel i komórkę. ;-)
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się. 4. Sprawdzasz, czy wziąłeś klucze, portfel i komórkę. ;-) 5. Wychodzisz, kierujesz się do sklepu.
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się. 4. Sprawdzasz, czy wziąłeś klucze, portfel i komórkę. ;-) 5. Wychodzisz, kierujesz się do sklepu. 6. Bierzesz z półki to, co chcesz kupić.
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się. 4. Sprawdzasz, czy wziąłeś klucze, portfel i komórkę. ;-) 5. Wychodzisz, kierujesz się do sklepu. 6. Bierzesz z półki to, co chcesz kupić. 7. Podchodzisz do kasy, płacisz.
1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się. 4. Sprawdzasz, czy wziąłeś klucze, portfel i komórkę. ;-) 5. Wychodzisz, kierujesz się do sklepu. 6. Bierzesz z półki to, co chcesz kupić. 7. Podchodzisz do kasy, płacisz. 8. Przychodzisz do domu.
W internecie musimy z kolei planować zachowanie elementów naszej strony w danej sytuacji.
Czas na zadanie!
Uznajmy, że projektujesz rejestrację na Twitterze. Zaplanuj, jakie kroki są potrzebne, by zarejestrować się na tym serwisie, podobnie do tego, jak zaplanowaliśmy wyjście na zakupy. Wyróżnij zdarzenia alternatywne, np. co ma się stać, kiedy podana przez użytkownika nazwa użytkownika jest zajęta.
Będąc programistą musisz zaplanować z góry, co ma się stać, jeśli Twój użytkownik...
Będąc programistą JavaScript musisz zaplanować z góry, co ma się stać, jeśli Twój użytkownik...
... kliknie w dany element <a>
... kliknie w dany element <div>
... najedzie kursorem na dany element HTML
... wpisze coś w <textarea>
... załaduje stronę
... kliknie w obrazek, który ma się wyświetlić w overlayu... kliknie w przycisk “dodaj”
... przeniesie element w inne miejsce (drag and drop)
... odznaczy element formularza
Planowanie czegoś w życiu to alternatywy i kompromisy.
Nie ma w sklepie białego cukru? Kupisz brązowy.
Nie ma brązowego, kupisz słodzik.
Chcesz policzyć ile masz lat? Od obecnej daty odejmujesz datę urodzin.
Chcesz policzyć ile masz dni? Od obecnej daty odejmujesz datę urodzin, jednak zwracasz
uwagę na różne przypadki jak np. 29 dniowy luty.
Podobnie w planowaniu programowaniu.Możesz sprawdzać.
Możesz podejmować alternatywne decyzje.
Programując sterujesz tym, co ma się stać w danej sytuacji.
“Mówisz” komputerowi: jeśli udało się dodać komentarz, wyświetl go, jeśli nie,
wyświetl błąd.
Jeśli user nie wpisał numeru karty, wyświetl błąd.
Powiedzenie czegoś komputerowi nie jest możliwe używając jedynie języka polskiego...
Wypróbujmy to w przeglądarce...
Podobnie do HTMLa i CSSa, stworzono standardowy język, dzięki któremu Anglik i Polak powiedzą komputerowi to samo...
Zapiszmy więc wszystko w języku JavaScript...
Porównaj język naturalny z JSem
JavaScript posiada stałe elementy, tak jak język polski
więcej stałych elementów?
if
else
for
while
do whileelse if
else if
function
break
Array
Object
Image
{}
[]
return
var
continue
więcej stałych elementów?
if
else
for
while
do whileelse if
else if
function
break
Array
Object
Image
{}
[]
return
var
continue
tak jak w polskim zdania kończymy kropką, tak linię kodu zwykle kończymy średnikiem
tak jak w języku polskim, w JS występuje też swoiste “słowotwórstwo”
przed użyciem nowych „słów” czy „zdań”, musimy je stworzyć ktoś w końcu musiał pierwszy wymyślić słowo „destynacja” i tysiące innych
jak więc tworzymy nowe “słowa” w JavaScript?
W JavaScript nowe rzeczy definiujemy przez var
W JavaScript nowe rzeczy definiujemy przez var
var zrobCos = function() {};var liczba = 1;var zdanie = "Zrobie teraz coś";
Wszystkie nowe rzeczy (wcześniej słowa) zapisujemy do tzw. “zmiennych”
W JavaScript zmienne definiujemy przez var
var zrobCos = function() {};var liczba = 1;var zdanie = "Zrobie to!";
zmienna “zrobCos”
zmienna “liczba”
zmienna “zdanie”
Pamiętasz funkcje liniowe w matematyce i szukanie x’a?
„niech y będzie równe 40, a x nie wiadomą”
„niech y będzie równe 40, a x nie wiadomą”
y = 40; x + y = 60;
x = ?
Podobnie działają zmienne, przechowują jakąś wartość
W JavaScript nowe rzeczy definiujemy przez var
var zrobCos = function() {};var liczba = 1;var zdanie = "Zrobie to!";
zmienna “zrobCos”
zmienna “liczba”
zmienna “zdanie”
wartość to funkcja
wartość to liczba 1
wartość to zdanie “Zrobię to!”
„niech y będzie równe 40, a x nie wiadomą”
y = 40; x + y = 60;
———————————————————————— x = 60 - y;
x = 60 - 40; x = 20;
„niech y będzie równe 40, a x nie wiadomą”
y = 40; x + y = 60; x = 60 - y;
var y = 40;var x = 60 - y;alert(x); // 20
JavaScriptalgebra
Oczywiście są też słowa zmienne, których nie musimy definiować stworzyli je autorzy języka JavaScript, byśmy mogli od razu ich używać
Oczywiście są też słowa zmienne, których nie musimy definiować stworzyli je autorzy języka JavaScript, byśmy mogli od razu ich używać
alert("Zrobie to!");
Jeśli zdefiniujemy daną zmienną, możemy wziąć ją potem pod uwagę w planowaniu!
Dużo w JavaScript podobnego myślenia: “jeśli zmienna to 1, zrób to, jeśli nie, zrób tamto”
Albo “jeśli zmienna jest większa od 1, zrób to, jeśli nie, zrób tamto”
I tak dalej.
Zabawmy się jeszcze w tłumacza!
Jak w JavaScript wyglądałoby coś takiego: jeśli zmienna x jest większa od zera to przekieruj na wp.pl
jeśli zmienna x jest większa od zera to przekieruj na wp.pl
if (x > 0) { window.location = "http://wp.pl"; }
Programowanie to planowanie konkretnych zdarzeń.
odpowiedz sobie na pytanie, co się stanie po
kliknięciu na lubię to
odpowiedz sobie na pytanie, co się stanie po
kliknięciu na “podziel się”
zmienia się link
pokazuje się dodatkowa warstwa
z <a href=””>Like</a> zrobiliśmy <a href=””>Unlike</a>
dodaliśmy overlay i <div class="_t"></div> do dokumentu, który zawiera treść okienka i przyciski