SlideShare una empresa de Scribd logo
1 de 35
Descargar para leer sin conexión
Wprowadzenie do Javascript
Cezary Buras
Marek Mitis
Dlaczego Javascript?
Dlaczego Javascript?
Javascript != Java
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})`
}
}
Projekt
goo.gl/4EhKjg
QUIZ
?
(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"?

Más contenido relacionado

Más de DreamLab

DreamLab Academy #12 Wprowadzenie do React.js
DreamLab Academy #12 Wprowadzenie do React.jsDreamLab Academy #12 Wprowadzenie do React.js
DreamLab Academy #12 Wprowadzenie do React.jsDreamLab
 
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8DreamLab
 
Intro to React | DreamLab Academy
Intro to React | DreamLab AcademyIntro to React | DreamLab Academy
Intro to React | DreamLab AcademyDreamLab
 
Subtelna sztuka optymalizacji
Subtelna sztuka optymalizacji Subtelna sztuka optymalizacji
Subtelna sztuka optymalizacji DreamLab
 
Let's build a PaaS platform, how hard could it be?
Let's build a PaaS platform, how hard could it be?Let's build a PaaS platform, how hard could it be?
Let's build a PaaS platform, how hard could it be?DreamLab
 
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.DreamLab
 
Gdy testy to za mało - Continuous Monitoring
Gdy testy to za mało - Continuous MonitoringGdy testy to za mało - Continuous Monitoring
Gdy testy to za mało - Continuous MonitoringDreamLab
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 DreamLab
 
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2DreamLab
 
About Motivation in DevOps Culture
About Motivation in DevOps CultureAbout Motivation in DevOps Culture
About Motivation in DevOps CultureDreamLab
 
Continuous Integration w konfiguracji urządzeń sieciowych
Continuous Integration w konfiguracji urządzeń sieciowychContinuous Integration w konfiguracji urządzeń sieciowych
Continuous Integration w konfiguracji urządzeń sieciowychDreamLab
 
Real User Monitoring at Scale @ Atmosphere Conference 2016
Real User Monitoring at Scale @ Atmosphere Conference 2016Real User Monitoring at Scale @ Atmosphere Conference 2016
Real User Monitoring at Scale @ Atmosphere Conference 2016DreamLab
 
DevOps at DreamLab
DevOps at DreamLabDevOps at DreamLab
DevOps at DreamLabDreamLab
 

Más de DreamLab (13)

DreamLab Academy #12 Wprowadzenie do React.js
DreamLab Academy #12 Wprowadzenie do React.jsDreamLab Academy #12 Wprowadzenie do React.js
DreamLab Academy #12 Wprowadzenie do React.js
 
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8
Selenium WebDriver Testy Automatyczne w Pythonie | DreamLab Academy #8
 
Intro to React | DreamLab Academy
Intro to React | DreamLab AcademyIntro to React | DreamLab Academy
Intro to React | DreamLab Academy
 
Subtelna sztuka optymalizacji
Subtelna sztuka optymalizacji Subtelna sztuka optymalizacji
Subtelna sztuka optymalizacji
 
Let's build a PaaS platform, how hard could it be?
Let's build a PaaS platform, how hard could it be?Let's build a PaaS platform, how hard could it be?
Let's build a PaaS platform, how hard could it be?
 
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.
Wdrażanie na wulkanie, czyli CI w świecie który nie znosi opóźnień.
 
Gdy testy to za mało - Continuous Monitoring
Gdy testy to za mało - Continuous MonitoringGdy testy to za mało - Continuous Monitoring
Gdy testy to za mało - Continuous Monitoring
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
 
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2
 
About Motivation in DevOps Culture
About Motivation in DevOps CultureAbout Motivation in DevOps Culture
About Motivation in DevOps Culture
 
Continuous Integration w konfiguracji urządzeń sieciowych
Continuous Integration w konfiguracji urządzeń sieciowychContinuous Integration w konfiguracji urządzeń sieciowych
Continuous Integration w konfiguracji urządzeń sieciowych
 
Real User Monitoring at Scale @ Atmosphere Conference 2016
Real User Monitoring at Scale @ Atmosphere Conference 2016Real User Monitoring at Scale @ Atmosphere Conference 2016
Real User Monitoring at Scale @ Atmosphere Conference 2016
 
DevOps at DreamLab
DevOps at DreamLabDevOps at DreamLab
DevOps at DreamLab
 

Podstawy JavaScript | DreamLab Academy #7