Podstawy JavaScript | DreamLab Academy #7

Wprowadzenie do Javascript
Cezary Buras
Marek Mitis

Javascript vs Java
1. Interpretowany
2. Dynamicznie typowany (Duck typing) (nadawanie typu
podczas wykonywania programu)
3. Słabo typowany (konwersje wykonywane automatycznie)

Zmienne
var nazwaSzkolenia = “Wstep JS”;
słowo kluczowe
znak końca instrukcji
wartośćoperator przypisania
nazwa zmiennej camelCase

Typy
Prymitywne | Złożone
Nazwa Przykład
string “Dreamlab”
number 3.14
boolean true
null null
undefined undefined
object {
imie: “Gosia”
}

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

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) {}

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);
};

Funkcje
var pomnoz = function(a, b) {
return a * b;
}
function pomnoz(a, b) {
return a * b;
}

Zasięg zmiennych
function zewnetrzna() {
function wewnetrzna() {
var a = 5;
}
console.log(a);
}
// Uncaught ReferenceError: a is not defined
zewnetrzna();

Operatory
Logiczne | Porównania
Operator Opis
&& koniunkcja
|| alternatywa
! zaprzeczenie
== vs ===
!= vs !==

Instrukcje warunkowe
if (a === 0) {
b = 0;
} else {
b = 1;
}
// ternary operator
var b = (a === 0) ? b = 0 : b = 1;

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.”;
}

Obsługa wyjątków
try {
throw „Wyjatek”;
} catch (err) {
console.log(err);
} finally {
console.log(„Zawsze tutaj wejdę”);
}

Prototypy – pseudo klasowość
var Samochod = function(){
this.przejechaneKM = 0
};
Samochod.prototype.jazda = function(){
this.przejechaneKM++;
}
var auto = new Samochod();
auto.jazda();

Zmienne i stałe
let samochod = "BMW";
const dlugosc = 100;
var nazwa = "DreamLab Academy"
Function vs block scope

Funkcje strzałkowe
let pomnoz = (a, b) => {
return a * b;
}
let dodaj = (a, b) => a * b;

Template literals
var wiek = 24;
console.log(`Mam ${wiek} lata.`)

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

Domyślne parametry
function podajPanstwo(kraj = "Polska") {}

Klasy
class Punkt {
constructor(x, y) {
this.x = x;
this.y = y;
}
podajWspolrzedne() {
return `(${this.x}, ${this.y})`
}
}

(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)

Jaka jest różnica pomiędzy null a undefined
?

Podaj 3 nowości z Ecmascript 6
?

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");

?
const event = {
name: 'DreamLabAcademy',
city: 'Kraków'
};
event.city = 'Warszawa';
console.log(event.city);
Jaki będzie wynik poniższego kodu?

?
W jakim mieście odbywał się tegoroczny JS Conf Europe?

?
Podaj różnicę pomiędzy canvas z SVG.

?
Podaj różnicę pomiędzy operatorem == oraz ===

?
Czym jest "ternary operator"?

Podstawy JavaScript | DreamLab Academy #7

More Related Content

Similar to Podstawy JavaScript | DreamLab Academy #7

More from DreamLab

Podstawy JavaScript | DreamLab Academy #7