Podstawy programowania w JavaScript

3,237 views

Published on

Prezentacja ta ma na celu rozpalić iskierkę wśród osób, które chciałyby się JavaScriptu nauczyć. Dzięki kilku analogiom proponuję ona konkretny tok myślenia, który bardzo przydaje się w nauce programowania, nie tylko w JavaScripcie.

Published in: Software
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,237
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
26
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Podstawy programowania w JavaScript

  1. 1. Podstawy programowania w JavaScript
  2. 2. www.kodu.je - podpatrz, jak programują inni
  3. 3. Damian Wielgosik Nokia Roche ferrante.pl Front-Trends SiteSell javascript.pl meet.js Falsy Values @varjs howtocodeinhtml.com Functionite founder
  4. 4. Czym jest programowanie?
  5. 5. Programowanie to planowanie.
  6. 6. Zacznijmy od najprostszych, życiowych czynności.
  7. 7. Wyjście na zakupy?
  8. 8. Co robisz, gdy planujesz pójść kupić coś do jedzenia?
  9. 9. 1. Robisz listę, co chcesz kupić
  10. 10. 1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy.
  11. 11. 1. Robisz listę rzeczy, które chcesz kupić. 2. Sprawdzasz, czy masz wystraczającą ilość pieniędzy. 3. Ubierasz się.
  12. 12. 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ę. ;-)
  13. 13. 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.
  14. 14. 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ć.
  15. 15. 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.
  16. 16. 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.
  17. 17. W internecie musimy z kolei planować zachowanie elementów naszej strony w danej sytuacji.
  18. 18. Czas na zadanie!
  19. 19. 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.
  20. 20. Będąc programistą musisz zaplanować z góry, co ma się stać, jeśli Twój użytkownik...
  21. 21. 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
  22. 22. Planowanie czegoś w życiu to alternatywy i kompromisy.
  23. 23. Nie ma w sklepie białego cukru? Kupisz brązowy.
  24. 24. Nie ma brązowego, kupisz słodzik.
  25. 25. Chcesz policzyć ile masz lat? Od obecnej daty odejmujesz datę urodzin.
  26. 26. Chcesz policzyć ile masz dni? Od obecnej daty odejmujesz datę urodzin, jednak zwracasz uwagę na różne przypadki jak np. 29 dniowy luty.
  27. 27. Podobnie w planowaniu programowaniu.
 Możesz sprawdzać. Możesz podejmować alternatywne decyzje.
  28. 28. Programując sterujesz tym, co ma się stać w danej sytuacji.
  29. 29. “Mówisz” komputerowi: jeśli udało się dodać komentarz, wyświetl go, jeśli nie, wyświetl błąd.
  30. 30. Jeśli user nie wpisał numeru karty, wyświetl błąd.
  31. 31. Powiedzenie czegoś komputerowi nie jest możliwe używając jedynie języka polskiego...
  32. 32. Wypróbujmy to w przeglądarce...
  33. 33. Podobnie do HTMLa i CSSa, stworzono standardowy język, dzięki któremu Anglik i Polak powiedzą komputerowi to samo...
  34. 34. Zapiszmy więc wszystko w języku JavaScript...
  35. 35. Porównaj język naturalny z JSem
  36. 36. JavaScript posiada stałe elementy, tak jak język polski
  37. 37. więcej stałych elementów? if else for while do while else if else if function break Array Object Image {} [] return var continue
  38. 38. więcej stałych elementów? if else for while do while else if else if function break Array Object Image {} [] return var continue
  39. 39. tak jak w polskim zdania kończymy kropką, tak linię kodu zwykle kończymy średnikiem
  40. 40. tak jak w języku polskim, w JS występuje też swoiste “słowotwórstwo”
  41. 41. 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
  42. 42. jak więc tworzymy nowe “słowa” w JavaScript?
  43. 43. W JavaScript nowe rzeczy definiujemy przez var
  44. 44. W JavaScript nowe rzeczy definiujemy przez var var zrobCos = function() {}; var liczba = 1; var zdanie = "Zrobie teraz coś";
  45. 45. Wszystkie nowe rzeczy (wcześniej słowa) zapisujemy do tzw. “zmiennych”
  46. 46. W JavaScript zmienne definiujemy przez var var zrobCos = function() {}; var liczba = 1; var zdanie = "Zrobie to!"; zmienna “zrobCos” zmienna “liczba” zmienna “zdanie”
  47. 47. Pamiętasz funkcje liniowe w matematyce i szukanie x’a?
 
 „niech y będzie równe 40, a x nie wiadomą”
  48. 48. „niech y będzie równe 40, a x nie wiadomą”
 
 y = 40; x + y = 60; x = ?
  49. 49. Podobnie działają zmienne, przechowują jakąś wartość
  50. 50. 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!”
  51. 51. „niech y będzie równe 40, a x nie wiadomą”
 
 y = 40; x + y = 60; ———————————————————————— x = 60 - y; x = 60 - 40; x = 20;
  52. 52. „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
  53. 53. 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ć
  54. 54. 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!");
  55. 55. Jeśli zdefiniujemy daną zmienną, możemy wziąć ją potem pod uwagę w planowaniu!
  56. 56. Dużo w JavaScript podobnego myślenia: “jeśli zmienna to 1, zrób to, jeśli nie, zrób tamto”
  57. 57. Albo “jeśli zmienna jest większa od 1, zrób to, jeśli nie, zrób tamto”
  58. 58. I tak dalej.
  59. 59. Zabawmy się jeszcze w tłumacza!
  60. 60. Jak w JavaScript wyglądałoby coś takiego: jeśli zmienna x jest większa od zera to przekieruj na wp.pl
  61. 61. jeśli zmienna x jest większa od zera to przekieruj na wp.pl if (x > 0) {
 window.location = "http://wp.pl";
 }
  62. 62. Programowanie to planowanie konkretnych zdarzeń.
  63. 63. 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ę”
  64. 64. zmienia się link
  65. 65. pokazuje się dodatkowa warstwa
  66. 66. z <a href=””>Like</a> zrobiliśmy <a href=””>Unlike</a>
  67. 67. dodaliśmy overlay i <div class="_t"></div> do dokumentu, który zawiera treść okienka i przyciski

×