Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Podstawy JavaScript | DreamLab Academy #7

67 views

Published on

Podstawy języka JavaScript. Prezentacja przedstawiona na warsztatach z wprowadzenia do JavaScriptu w ramach DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl

The presentation was created for a DreamLab Academy workshop on JavaScript.For more details get in touch - academy@dreamlab.pl

Published in: Software
  • Be the first to comment

  • Be the first to like this

Podstawy JavaScript | DreamLab Academy #7

  1. 1. Wprowadzenie do Javascript Cezary Buras Marek Mitis
  2. 2. Dlaczego Javascript?
  3. 3. Dlaczego Javascript?
  4. 4. Javascript != Java
  5. 5. Javascript vs Java 1. Interpretowany 2. Dynamicznie typowany (Duck typing) (nadawanie typu podczas wykonywania programu) 3. Słabo typowany (konwersje wykonywane automatycznie)
  6. 6. Zmienne var nazwaSzkolenia = “Wstep JS”; słowo kluczowe znak końca instrukcji wartośćoperator przypisania nazwa zmiennej camelCase
  7. 7. Typy Prymitywne | Złożone Nazwa Przykład string “Dreamlab” number 3.14 boolean true null null undefined undefined object { imie: “Gosia” }
  8. 8. Obiekty var samochod = { marka: “Alfa Romeo”, model: “147”, kolor: “zolty”, obliczPaliwo: function(dlugoscTrasy) { return dlugoscTrasy * 6 / 100; } } samochod.marka; samochod.obliczPaliwo(1000) Złożone struktury danych
  9. 9. Komentarze // tylko jedna linia /* komentarz składający się z kilku linii */ /** * Funkcja wylicza wynik dzielenia dwóch liczb. * @param {number} a opis * @returns {number} */ function wylicz(a, b) {}
  10. 10. Pętle var marka = [‘BMW’, ‘AUDI’, ‘Mercedes’]; for (var i = 0; i < marka.length; i++) { console.log(marka[i]); } var firma = { nazwa: ‘Dreamlab’, branza: ‘IT’ }; for (var el in firma) { console.log(el); } var i = 0; while ( i < 3) { console.log(i); i++; } var j = 0; do { j++ console.log(j); } while(j < 3){ console.log(j); };
  11. 11. Funkcje var pomnoz = function(a, b) { return a * b; } function pomnoz(a, b) { return a * b; }
  12. 12. Zasięg zmiennych function zewnetrzna() { function wewnetrzna() { var a = 5; } console.log(a); } // Uncaught ReferenceError: a is not defined zewnetrzna();
  13. 13. Operatory Logiczne | Porównania Operator Opis && koniunkcja || alternatywa ! zaprzeczenie == vs === != vs !==
  14. 14. Instrukcje warunkowe if (a === 0) { b = 0; } else { b = 1; } // ternary operator var b = (a === 0) ? b = 0 : b = 1;
  15. 15. Instrukcja switch switch(owoc) { case “winogrono”: console.log(“Cena: 5zł”); break; case “jablka”: console.log(“Cena: 2zł”); break; default: console.log(“Brak towaru w sklepie.”; }
  16. 16. Obsługa wyjątków try { throw „Wyjatek”; } catch (err) { console.log(err); } finally { console.log(„Zawsze tutaj wejdę”); }
  17. 17. Prototypy – pseudo klasowość var Samochod = function(){ this.przejechaneKM = 0 }; Samochod.prototype.jazda = function(){ this.przejechaneKM++; } var auto = new Samochod(); auto.jazda();
  18. 18. Zmienne i stałe let samochod = "BMW"; const dlugosc = 100; var nazwa = "DreamLab Academy" Function vs block scope
  19. 19. Funkcje strzałkowe let pomnoz = (a, b) => { return a * b; } let dodaj = (a, b) => a * b;
  20. 20. Template literals var wiek = 24; console.log(`Mam ${wiek} lata.`)
  21. 21. Moduły // plik lib.js export function doKwadratu(x) { return x * x; } // plik main.js import { doKwadratu } from 'lib'; console.log(doKwadratu(5)); Importowanie i eksportowanie
  22. 22. Domyślne parametry function podajPanstwo(kraj = "Polska") {}
  23. 23. Klasy class Punkt { constructor(x, y) { this.x = x; this.y = y; } podajWspolrzedne() { return `(${this.x}, ${this.y})` } }
  24. 24. Projekt
  25. 25. goo.gl/4EhKjg
  26. 26. QUIZ ?
  27. 27. (function(a) { if (a < 2) { var b = 0; } return b; })(2) Jaki wynik zwrócą podane wyrażenia? ? (function(a) { if (a < 2) { let b = 0; } return b; })(1)
  28. 28. Jaka jest różnica pomiędzy null a undefined ?
  29. 29. Podaj 3 nowości z Ecmascript 6 ?
  30. 30. W jaki sposób wyświetlić komunikat "Witaj świecie" w natywnym komponencie przeglądarki alert box? ? a) print("Witaj swiecie"); b) alert("Witaj swiecie"); c) msg("Witaj swiecie"); d) alertBox("Witaj swiecie");
  31. 31. ? const event = { name: 'DreamLabAcademy', city: 'Kraków' }; event.city = 'Warszawa'; console.log(event.city); Jaki będzie wynik poniższego kodu?
  32. 32. ? W jakim mieście odbywał się tegoroczny JS Conf Europe?
  33. 33. ? Podaj różnicę pomiędzy canvas z SVG.
  34. 34. ? Podaj różnicę pomiędzy operatorem == oraz ===
  35. 35. ? Czym jest "ternary operator"?

×