Tworzenie stron WWW w HTML, JavaScript i PHP

Maciej Żukiewicz

maciek@harmony-systems.com

Prawa autorskie do materiałów

Materiały szkoleniowe (w wersji elektronicznej i drukowanej) udostępnione przez firmę Vavatech w ramach niniejszego kursu, należą wyłącznie do firmy Harmony sp. z o.o. i podlegają ochronie na podstawie przepisów o prawie autorskim i prawach pokrewnych.

W związku z powyższym, każdy uczestnik szkolenia zobowiązuje się nie wykonywać

żadnych z niżej wymienionych działań:

•modyfikacja, adaptacja, zmiana, łączenie lub tłumaczenie materiałów oraz tworzenie prac pochodnych na ich podstawie;

•wypożyczanie, sprzedaż lub innego rodzaju przekazywanie materiałów szkoleniowych jakiejkolwiek stronie trzeciej;

•kopiowanie lub jakiekolwiek powielanie materiałów.

W ramach szkolenia uczestnik otrzymuje jedynie prawo własności otrzymanego

egzemplarza materiałów i uprawniony jest do jego używania wyłącznie w

ramach dozwolonego użytku określonego w przepisach i własności intelektualnej.

materiały

Link do prezentacji: https://goo.gl/jNjRgL

Link do ankiety: https://goo.gl/sfS7rw

#1//HTML

Czym jest HTML?

Do czego aktualnie jest wykorzystywany?

#1//HTML

Przykładowy, podstawowy plik HTML strony WWW

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Hello my dear!</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        Hello my dear!
    </body>
</html>

Które z elementów są wymagane przez standardy?

#1//HTML - SKŁADNIA

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Hello my dear!</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- Header start -->
        <header>
            Hello!
        </header>
        <!-- Header end -->

        <!-- Content start -->
        <main id="content" class="style-secondary">
            <div>
                <h1>Lorem ipsum dolor sit.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Reiciendis, quia.</em></p>
                <p><strong>Porro, sed nemo laboriosam tempore,</strong> tempora cupiditate harum molestias voluptas!</p>
            </div>

            <div>
                <p><a href="https://placeholder.com/">Get placeholder!</a> and have fun :)</p>

                <img src="http://via.placeholder.com/350x150" alt="Image">
            </div>
        </main>
        <!-- Content end -->

        <hr>

        <!-- Footer start -->
        <footer id="footer" class="style-primary">
            Copyright 2018
        </footer>
        <!-- Footer end -->
    </body>
</html>

#1//HTML - Budowa tagu

<!-- tag posiadający tag domykający -->
<tag atrybut1="wartosc" atrybut2="wartoscA wartoscB"> ... zawartość tagu ... </tag>

<!-- tag nieposiadający tagu domykającego (samodomykający się) -->
<tag atrybut1="wartosc" atrybut2="wartoscA wartoscB">

#1//HTML - GRUPY ELEMENTÓW

Na jakie dwie podstawowe grupy można podzielić elementy/tagi HTML?
Czym się charakteryzują / Czym różnią się od siebie?
Jakie są przykłady tagów należących do tych grup?

#1//HTML - ELEMENTY BLOKOWE

Zajmują całą dostępną szerokość
Zaczynają się od nowej linii
W elementach blokowych możemy umieszczać inne elementy blokowe i liniowe (wyjątkiem jest tag <p> - zobacz tu)
Na elementach blokowych możemy stosować właściwości modelu blokowego CSS (do zapamiętania na później :))

Charakteryzują się tym, że:

Wyświetlają się tak:

przykładowe tagi:

<div>
<header>
<nav>
<main>
<footer>
<ul>
<ol>
<table>
<form>
<h1>, <h2>, ..., <h6>
<p>
<blockquote>

Więcej na ten temat na:

m oz://a oraz w3schools

#1//HTML - ELEMENTY liniowe

Zajmują tylko taką szerokość jaką wymaga zawartość tagu
Nie zaczynają się od nowej linii
W elementach liniowych możemy umieszczać TYLKO inne elementy liniowe
Na elementach liniowych nie możemy stosować właściwości modelu blokowego CSS (do zapamiętania na później :))

Charakteryzują się tym, że:

Wyświetlają się tak:

przykładowe tagi:

<a>
<strong>
<span>
<em>
<img>
<input>
<label>

Więcej na ten temat na:

m oz://a oraz w3schools

#1//HTML - najczęściej wykorzystywane tagi i ich zastosowanie

Jakie są najczęściej wykorzystywane tagi HTML?
Do czego się je wykorzystuje w praktyce?
Dlaczego ważny jest odpowiedni dobór tagów?

w3schools

mozi//a

Więcej na ten temat na:

#1//HTML - semantyka tagów w HTML5

Czym jest semantyka tagów?
Na co wpływa semantyka tagów?
Jakie znasz tagi semantyczne?
Czym jest Document Outline?
Czy Document Outline jest ważny?

mozi//a

Więcej na ten temat na:

#1//HTML - semantyka tagów w HTML5

A jak to wpływa na Document Outline?

#1//HTML - atrybuty

Jakie znasz przykłady podstawowych atrybuty, które można nadać dla każdego dowolnego elementu HTML?
Czym charakteryzują się te atrybuty, czym różnią się od siebie i do czego najczęściej są wykorzystywane?
Czym są specyficzne atrybuty tagów i jakie znasz przykłady takich atrybutów?

#1//HTML - atrybuty

Atrybut	Opis	Przykład
id	Identyfikator. (!) Element o danym ID może występować tylko i wyłącznie raz na danej stronie. (!!) Każdy element HTML może posiadać maksymalnie jeden identyfikator.	<div id="header-wrapper"></div> <section id="topic-basic-terms"></section>
class	Klasa. (!) Na stronie może się znajdować wiele elementów posiadających tą samą klasę. (!!) Każdy element HTML może posiadać dowolną ilość klas.	<div class="color-primary"> <div class="color-primary wide-box"> <div class="color-primary wide-box small-text">
data-*	Atrybut HTML5 pozwalający na tworzenie własnych atrybutów.	<article data-article-title="Nice code in one week" data-article-id="5"></article>

#1//HTML - narzędzia

Jakie znasz narzędzia, dzięki którym praca z dokumentami HTML jest szybsza i wygodniejsza?

#1//HTML - narzędzia

Narzędzia przydatne podczas pracy z HTML

Chrome Developer Toolbar / Firefox Developer Tools
W3C Markup Validation Service (W3C Validator)
Szybki i wygodny edytor (najlepiej ze Snippetami)
Emmet
Live Preview
Linters (HTML + CSS)

#2//css

Czym jest CSS?

Do czego jest wykorzystywany?

Jak CSS ma się do HTML'a?

#2//css - składnia

/* Domyślne style dla:
- strony głównej
- podstron tekstowych */

p{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.category-menu{
    width: 250px;
    height: 300px;
    float: left;
}

#main-nav{
    height: 30px;
}

#main-nav.color-primary {
    background-color: blue;
}

Czym jest selektor?

Czym jest właściwość, a czym wartość w CSS?

Jakie są rodzaje selektorów?

Czym charakteryzuje się te rodzaje?

#2//css - rodzaje selektorów

Jakie znasz kombinatory selektorów?

#2//css - kombinatory selektorów

#2//css - rodzaje selektorów

Kombinator	Opis	Przykład
(spacja)	Wybiera wszystkie elementy a wewnątrz wszystkich elementów z klasą menu	.menu a
(brak spacji)	Wybiera element div mający identyfikator header oraz klasę color-primary	div#header.color-primary
>	Wybiera wszystkie elementy a znajdujące się bezpośrednio elemencie z klasą menu	.menu > a
,	Wybiera wszystkie elementy a i wszystkie elementy strong i wszystkie elementy span	a, strong, span

w3schools

moz://a

Więcej na ten temat na:

Czym jest kaskadowość w CSS jak działa?

#2//css - Kaskadowość

Czym jest siła/specyficzność selektorów i jak działa?

#2//css - siła selektorów

Rodzaj selektora	Mnożnik
Element	x1
Klasa	x10
Identyfikator	x100
Atrybut style	x1000

<p id="main-text" class="custom-styles">
    Lorem ipsum dolor sit.
</p>

p{
    font-size: 10px;
}

.custom-styles{
    font-size: 11px;
}

p.custom-styles{
    font-size: 44px;
}

#main-text{
    font-size: 6px;
}

p#main-text{
    font-size: 22px;
}

p#main-text.custom-styles{
    font-size: 12px;
}

kalkulator online

moz://a

Więcej na ten temat na:

#2//css - Przykłady selektorów //1

/* Wszystkie paragrafi */
p {...}

/* Wszystkie elementy z klasą "menu-item" */
.menu-item {...} 

/* Element o id "main-nav" */
#man-nav {...}

/* Wszystkie elementy z atrybutem href */
[href] {...}

/* Wszystkie elementy z atrybutem rel ustawionym na nofollow */
[rel="nofollow"] {...}

/* Wszystkie elementy z atrybutem href, który zaczyna się od "file" */
[href^="file"] {...}

/* Wszystkie elementy z atrybutem href, który kończy się na ".pdf" */
[href$=".pdf"] {...}

/* Wszystkie elementy z atrybutem href, w którym znajduje się ciąg "smile" */
[href*="smile"] {...}

#2//css - Przykłady selektorów //2

/* Wszystkie paragrafi */
p {...}

/* Wszystkie elementy z klasą "menu-item" */
.menu-item {...} 

/* Element o id "main-nav" */
#man-nav {...}

/* Wszystkie elementy z atrybutem href */
[href] {...}

/* Wszystkie elementy z atrybutem rel ustawionym na nofollow */
[rel="nofollow"] {...}

/* Wszystkie elementy z atrybutem href, który zaczyna się od "file" */
[href^="file"] {...}

/* Wszystkie elementy z atrybutem href, który kończy się na ".pdf" */
[href$=".pdf"] {...}

/* Wszystkie elementy z atrybutem href, w którym znajduje się ciąg "smile" */
[href*="smile"] {...}

#2//css - Przykłady selektorów //3

/* Wszystkie tagi em strong i element z klasą hl */
em, strong, .hl {...}

/* Wszystkie paragrafy znajdujące się w elementach z klasą .section */
.section p {...}

/* Wszystkie tagi li będące bezposrednim potomkiem elementu z klasą "main-menu" */
.main-menu > li {...}

/* Wszystkie tagi a, które znajdują się w elementach 
li będących bezposrednimi potomkami elementu z klasą "main-menu" */
.main-menu > li a {...}

#2//css - Przykłady selektorów //4

/* Wszystkie tagi strong posiadające klasę "hl" */
strong.hl {...}

/* Tag ul posiadający identyfikator "main-nav" */
ul#main-nav {...}

/* Tag ul posiadający identyfikator "main-nav" i klasę "custom-style" */
ul#main-nav.custom-style {...}

/* Tag ul posiadający identyfikator "main-nav" i klasy "custom-style" oraz "big" */
ul#main-nav.custom-style.big {...}

/* Wszystkie tagi "a", których wartosć atrybutu href kończy się na ".pdf" */
a[href$=".pdf"] {...}

#2//css - pseudoselektory

/* Wszystkie elementy a, na któych znajduje się kursor myszki */
a:hover {...}

/* Wszystkie odwiedzone linki */
a:visited {...}

/* Wszystkie tagi <li>, które są pierwszymi potomkami */
li:first-child {...}

/* Wszystkie tagi <p>, które są ostatnimi potomkami */
p:last-child {...}

/* Każdy co drugi (przysty) paragraf w swoim rodzicu */
p:nth-child(2n) {...}

/* Każdy nieprzysty paragraf w swoim rodzicu */
tr:nth-child(odd) {...}

/* Każdy przysty paragraf w swoim rodzicu */
td:nth-child(even) {...}

/* Każdy tag <p>, który nie posiada klasy "hl" */
p:not(.hl) {...}

#2//css - rodzaje selektorów

Rodzaj selektora	Opis	Przykład
Wszystkie elementy	Wybiera wszystkie elementy	*
Element	Wybiera wszystkie elementy o określonym tagu	div p
Klasa	Wybiera wszystkie elementy o określonej wartości atrybutu class	.color-primary .text-highlighted
Identyfikator	Wybiera wszystkie element o określonej wartości atrybutu id.	#header #footer
Atrybut	Wybiera wszystkie element na podstawie wartości zadanego atrybutu	[href] [rel="nofollow"]
Pseudoselektor	Wybiera wszystkie elementy spełniające warunek pseudoselektora	:hover :fist-child :last-child

w3schools

moz://a

Więcej na ten temat na:

#2//css - pseudoElementy

/* Dla wszystkich paragrafów na początku dodaje strzałkę o rozmiarze .6em'a */
p::before {
    content: '->';
    font-size: .6em;
}


/* Dla wszystkich elementów z klasą read-more dodaje na końcu znak wielokropka */
.read-more::after {
    content: '...';
}

w 3schools

moz://a

Więcej na ten temat na:

#2//css - dziedziczenie

Czym jest dziedziczenie w CSS jak działa?

#2//css - dziedziczenie

#2//css - Kaskadowość, specyfika, dziedziczenie - podsumowanie

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

#2//css - Jednostki

Jakie znasz jednostki, którymi możemy posługiwać się w CSS?

Czym różnią się od siebie?

Jakie jest ich optymalne przeznaczenie?

Nazwa	Jednostka	Najczęstsze zastosowanie
piksele	px	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procenty	%	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
emy	em	Definiowanie Media Queries, wielkości czcionek.
remy	rem	Definiowanie wielkości czcionek.
procent szerokości okna (viewport)	vw	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent wysokości okna (viewport)	vh	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent najmniejszego wymiaru okna (viewport)	vmin	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent największego wymiaru okna (viewport)	vmax	Definiowanie szerokości, wysokości, marginesów, paddingów, etc.

W CSS oprócz powyższych można spotkać inne jednostki jak: ex, cm, mm, in, pt, pc - jednak są one bardzo rzadko stosowane. Zobacz więcej na: W3Schools.

#2//CSS - najcześciej wykorzystywane jednostki

#2//css - Jednostki / em i rem

1 em = 100% z wielkości rodzica

1 rem = 100% z wielkości głównego węzła (root)

#2//css - Jednostki / vw i vh

1 vw = 1% szerokości okna (viewport)

1 vh = 1% wysokości okna (viewport)

#2//css - Jednostki / vmin i vmax

1 vmin = 1% najmniejszego wymiaru okna (viewport)

1 vmax = 1% największego wymiaru okna (viewport)

#2//css - RWD

Co oznacza skrót RWD?

Czy każda strona działająca na mobile jest RWD?

Jakie inne rodzaje stron mobilnych (oprócz RWD) znasz?

#2//css - Responsive Web Design

"You put water into a cup it becomes the cup.

You put water into a bottle it becomes the bottle.

You put it into a teapot it becomes the teapot."

Brucee Lee

#2//css - Responsive Web Design

Cechy podstawowe strony responsywnej:

1. Płynny interfejs

2. Elastyczna treść (obrazki, tabelki, etc.)

3. Media Queries

4. Relatywne jednostki interfejsu i typografii

#2//css - Responsive Web Design

Rodzaje stron mobilnych:

1. Fluid

2. Adaptive

3. Responsive

http://www.liquidapsive.com/

#2//css - Responsive Web Design

Podejścia do kodowania stron responsywnych

Zaczynamy od kodowania wersji mobilnej (najmniejszej), a następnie stopniowo dokodowujemy pozostałe rozmiary.

Mobile first

Desktop first

Które podejście jest lepsze?

#3//Javascript

#3//javascript - gdzie to jesT? :)

#3//javascript - podstawowe informacje

Gdzie jest uruchamiany?

Czy jest kompilowany czy interpretowany?

Czy JavaScript to to samo co Java?

#3//javascript

Składnia i elementy języka
1. Podstawowe zasady składni języka
2. Podstawowe funkcje I/O
3. Zmienne, stałe i zasada nazewnictwa
4. Typy danych
5. Instrukcje warunkowe
6. Pętle
7. Funkcje i zasada nazewnictwa
8. Zakres zmiennych
9. Typy błędów
10. Hoisting
Debuggowanie kodu
Przetwarzanie drzewa DOM
Obsługa zdarzeń na stronie

#3//javascript - Składnia

/*
New totaly awsome fraggable game!
*/
var userName = 'ki||3r';
var totalFrags = 89;

// adding frags
function addFrags (frags, fragsToAdd, bonusRatio) {
    return frags + (fragsToAdd * bonusRatio);
}

// listen when button clicked
document.querySelector('#addFrag').onclick = function () {
    var i = 0, l = document.querySelector('.fragged').length;

    for (i=0; i<l; i++) {
        totalFrags = addFrags(i, (Math.random()*10));
    }
};

Wielkość liter - ma znaczenie
Średniki na końcu każdej instrukcji
Nawiasy kołowe, klamrowe
Komentarze jedno i wieloliniowe

Zwróć uwagę na:

Białe znaki nie są interpretowane (ale warto ich używać dla czytelności kodu :))

#3//javascript - Funkcje i/o

alert('Jestem zwykłym okienkiem informacyjnym');

confirm('Czy na pewno chcesz usunąć ten element?');

prompt('Podaj hasło');

console.log('To jest wiadomość, która pojawi się tylko w konsoli przeglądarki');

Najczęstsze zastosowanie:

- wyświetlenie komunikatu użytkownikowi

- pobranie danych od użytkownika

- debuggowanie kodu (wyświetlanie wyników)

#3//javascript - zmienne i stałe

/*
    Poniżej znajdziesz informacje o:
    - zmiennych
    - stałych
*/

// Zmienne
var age = 18;
var lastName = 'Kowalski'; // camelCase - recommended
var first_name = 'Jan'; // underscore - NOT recommended
var number3 = 3;
var number5 = 5;

// Stałe
const DEFAULT = 'template';
const DEFAULT_TEMPLATE = 'template';

// Odnoszenie się do zmiennych i stałych
alert(age);
alert(lastName);
alert(DEFAULT);

Czy deklaracja zmiennej różni się od definicji zmiennej?

Zasady nazewnictwa zmiennych - sprawdź "Pomocnik programisty"

#3//javascript - typy danych

// Liczby
var numberReal = 123;
var numberFloat = 56.78;
var numberNegative = -123;
var total = numberReal + numberFloat + numberNegative;

alert(total);


// Tekst
var textA = 'Welcome';
var textB = 'to the';
var textC = 'real world';
var fullText = textA + ' ' + textB + ' ' + textC;

alert(fullText);

typy skalarne

więcej o typie number

informacje

działania

więcej o typie string

informacje

działania

Typowanie dynamiczne!

#3//javascript - typy danych

var team = [
    'Adam Nowak',
    'Jan Kowalski',
    'Anna Zaradna',
    'Joanna Radosna',
    'Adrian Lider',
];

alert('W zespole jest ' + team.length + ' członków');

var teamMember = [
    'Adam',
    'Nowak',
    38,
    'Starszy programista',
    [
        'HTML/CSS',
        'JavaScript',
        'PHP'
    ],
];

alert('Imię i nazwisko: ' + teamMember[0] + ' ' + teamMember[1]);

tablice

więcej o tablicach

informacje

działania

#3//javascript - typy danych

var teamMember = {
    firstName: 'Adam',
    lastName: 'Nowak',
    age: 38,
    rank: 'Starszy programista',
    technologies: [
        'HTML/CSS',
        'JavaScript',
        'PHP'
    ],
};

alert('Imię i nazwisko: ' + teamMember.firstName + ' ' + teamMember['lastName']);

tablice asocjacyjne / obiekty

więcej o tablicach asocjacyjnych / obiektach

informacje

#3//javascript - typy danych

var firstName; // undefined
var role = null; // null
var age = 'test' * 123; // NaN

Typy specjalne

#3//javascript - instr. warunkowe

// przykład 1
if (age < 18) {
    alert('Ups... You are under age');
}

// przykład 2
if ('admin' == userRole) {
    renderAdminView();
} else {
    renderUserView();
}

// przykład 3
if (points > 500) {
    rank = 'EXPERT';
} else if (points > 3500) {
    rank = 'INTERMEDIATE';
} else {
    rank = 'STUDENT';
}

instrukcja warunkowa if .. else

instrukcja warunkowa switch..case

switch (userRole) {
    case 'SUPER_ADMIN':
        template = 'superAdmin.html';
        break;

    case 'ADMIN':
        template = 'admin.html';
        break;

    case 'OLD_USER':
        template = 'oldUser.html';

    case 'USER':
        template = 'user.html';
        break;

    default:
        template = 'notFound.html';      
}

#3//javascript - pętle

// przyklad 1
var policzDo = 10;
var aktualnaWartosc = 0;

while (policzDo >= aktualnaWartosc) {
    alert(aktualnaWartosc);
    aktualnaWartosc++;
}


// przyklad 2
var running = true;

while (running) {
    alert('Program pracuje');

    running = !confirm('Zatrzymać program?');
}

pętle while

// przyklad 1
var policzDo = 10;
var aktualnaWartosc = 0;

do {
    alert(aktualnaWartosc);
    aktualnaWartosc++;
} while (policzDo >= aktualnaWartosc);


// przyklad 2
var running = true;

do {
    alert('Program pracuje');

    running = !confirm('Zatrzymać program?');
} while (running);

pętle do..while

#3//javascript - pętle

// przyklad 1
var policzDo = 10;

for (i = 0; i<=policzDo; i++) {
    alert(i);
}


// przyklad 2 - iteracja po tablicy
var team = [
    'Adam Nowak',
    'Jan Kowalski',
    'Anna Zaradna',
    'Joanna Radosna',
    'Adrian Lider',
];

for(var i=0; i<team.length; i++) {
    alert(team[i]);
}

pętla for

#3//javascript - pętle

// przyklad 1
var teamMember = {
    firstName: 'Adam',
    lastName: 'Nowak',
    age: 38,
    rank: 'Starszy programista',
    technologies: [
        'HTML/CSS',
        'JavaScript',
        'PHP'
    ],
};

for(var key in teamMember) {
    alert(key + ': ' + teamMember[key]); // firstName: Adam | lastName: Nowak | etc.
}

pętla for..in

#3//javascript - funkcje

// przyklad 1
function welcome() {
    alert('Hej witaj!');
}

welcome();


// przyklad 2
function welcomeUser(userName) {
    alert('Hej witaj ' + userName);
}

welcomeUser('Adam Nowak');


// przyklad 3
function getWelcomeText(userName) {
    return 'Hej witaj ' + userName;
}

var welcomeText = getWelcomeText('Jan Kowalski');
alert(welcomeText);

funkcje

#3//javascript - typy błędów

Zobacz także "Pomocnik programisty - Najczęściej spotykane błędy"

SyntaxError

ReferenceError

TypeError

Wystąpił błąd składniowy.

if (radnomNumber == 21 {
    alert('bingo!');
}

Wystąpił błąd odwołania do nieistniejącego obiektu.

var userName = 'John Doe';

alert(userNema);

Wystąpił błąd typu.

var userName = 'John Doe';

userName();

#3//javascript - zakres zmiennych

Czy w JavaScript występuje zmienne mają jakiś konkretny zakres? Jeżeli tak to jaki i na czym polega?

#3//javascript - hoisting

Co pojawi się w konsoli po uruchomieniu tego kodu?

#3//javascript - hoisting

bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}

// deklaracje var zostaną przeniesione tutaj
var bar, someValue; // ustawione domyślnie na 'undefined'

// deklaracje funkcji zostaną również przeniesione na górę
function test(data) {

    // brak blokowego zasięgu spowoduje przeniesienie tutaj
    var goo, i, e; 

    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

// powoduje błąd TypeError gdyż bar jest nadal 'undefined'
bar(); 

// przypisania nie zostają zmienione przez 'hoisting'
someValue = 42; 
bar = function() {};

test();