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