Warsztaty Webowe
Mikołaj Szumigalski

Powrót

Zajęcia 10
JavaScript

Czym jest JavaScript?

Ktoś kto nigdy nie programował może po poznaniu HTML'a i CSS'a pomyśleć - "ŁAŁ! Jestem programistą(tką)". Hmm... no nie do końca. O ile HTML i CSS nie możemy nazwać językami programowania, to JavaScript już tak - to skryptowy język programowania. Proszę nie mylić też JavaScriptu z Javą, oprócz nazwy nic ich nie łączy.

Do czego służy JavaScript?

Ma dużo zastosowań, my skupimy się dziś na tym dotyczącym wsparcia naszych stron internetowych. JS (będę pisał czasem tym skrótem) pomaga nam w tworzeniu bardziej skomplikowanych animacji, pozwala na większą interakcję użytkownika ze stroną, wsparcie dla pobierania, wysyłania danych, kontrola bierząca nad elementami na stronie i wiele innych

Hello World!

Każdy szanujący się programista uczący się nowego języka powinien zacząć właśnie od tego. Zanim jednak wyświetlimy napis dowiedzmy się jak dodać skrypt w JS na naszą stronę. Będzie nam potrzebny znacznik <script> ,który umieścimy na samym końcu sekcji body. Dlaczego tam? Kod JS w niektórych przypadkach będzie bardziej użyteczny gdy strona już się załaduje, więc bezpieczniej umieszczać go tam. Można go też dać np. do sekcji head, ale to może spowodować problemy w niektórych sytuacjach. Przykład:

<!DOCTYPE html>
<html>
<title>Wyświetlamy HelloWorld!</title>
<body>

<script> console.log("Hello World!"); </script>
</body>
</html>

No dobrze, tylko gdzie ten napis się wyświetli? Wystarczy wcisnąć klawisz F12 (na Firefox i Chrome na pewno, na innych przeglądarkach nie dam głowy) i wtedy naszym oczom ukaże się konsola a tam napis "Hello World!"

Trzymanie kodu w osobnym pliku

Tu podobnie jak w przypadku CSS możemy umieścić kod w osobnym pliku, tym razem z rozszerzeniem .js , a potem zaimportować go do pliku HTML. Robi się to w bardzo łatwy sposób, ponieważ do nowo poznanego znacznika <script> dodajemy znany atrybut src i link do pliku z kodem JS

Przerzucamy się na konsolę NODE.js

Na razie odcinamy się od HTML'a i będziemy nasze pliki .js odpalać za pomocą konsoli NODE.js. Na komputerach wydziałowych powinn być zainstalowane, można też je zainstalować u siebie, pobierająć go stąd

Po zainstalowaniu z domyślnymi ustawieniami odpalamy Node.js command prompt. Jeżeli będziemy chcieli uruchomić skrypt języka JavaScript, wydajemy polecenie node nazwaSkryptu.js i wciskamy ENTER.

Spróbujmy jeszcze raz odpalić nasz przykład. Plik możemy nazwać helloworld.js i uruchomić za pomocą NODE.js

HelloWorld!

console.log("Hello World!");

Przykład 2

var name = 'Adam';
var surname = "Kowalski";
/* wielowierszowy
komentarz */
console.log("Witaj, " + name + " " + surname);

Jak widzimy możemy tworzyć własne zmienne, podobnie jak w innych językach. Tutaj jednak się nie rozdrabniamy na int, double... tu jest po prostu var bez względu na to czy jest liczbą, czy tekstem. Zmienne tekstowe umieszczamy za to w nawiasach (obojętnie jakich). Komentarze dodajemy podobnie jak np. w języku C++. Dodatkowo poznaliśmy kolejny sopsób jak wyświetlać tekst razem ze zmiennymi za pomocą console.log

Pętla "for"

Przykład 3.1

var x = 1;
var y = 2;
var z = '3';
console.log(x == 1);
console.log(x != y);
console.log(x > y);
console.log(y <=z )
console.log(z == 3);
console.log(z === 3);
console.log(y !== '2');
y = y.toString();
console.log(y !== '2');

Operator === jest operatorem identycznościowym, tzn. porównuje nie tylko wartości, ale także typy danych. Podobnie jest z operatorem !==.

Przykład 3.2

Tablice

Przykład 4.1

var colors = [];
colors = ['white', 'red', 'blue', 'other']; // wypełnienie tablicy danymi

var el = colors[0]; // odniesienie do pierwszego elementu tablicy

console.log(el);

colors[1] = 'green';

console.log(colors);

Więcej informacji o tablicach można znaleźć TUTAJ

Pętla for

Przykład 5.1

for (var i = 0; i < 5; i++) {
console.log(i);
}

var iterators = [1, 2, 3, 4, 5];
for (i in iterators) {
console.log(i);
}

Przykład 5.2

var tab = [1, 2, 3, 4, 5];
for (var i = 0; i < tab.length; i++) {
console.log(tab[i]);
}

Przykład 5.3

var n = 5; // deklaracja rozmiaru tablicy tab
var tab = []; // stworzenie jednowymiarowej tablicy

for (var i = 0; i < n; i++) {
tab[i] = []; // każdy element tablicy jednowymiarowej staje się nową tablicą, dzięki czemu mamy tablicę dwuwymiarową
}

Przykład 5.4

W pętlach działają słowa kluczowe break i continue (tak jak np. w C++).

Pętla "while"

Przykład 6.1

var i = 0;
while (i < 5) {
console.log(i);
i++;
}

Pętla "do-while"

Przykład 7.1

var i = 0;

do {
console.log(i);
i++;
} while (i < 5);

Funkcje

Przykład 8.1

function hello() {
console.log('Hello world!');
}

hello();

Przykład 8.2

function getArea(width, height) {
return (width * height);
}

var wallWidth = 3;
var wallHeight = 5;
var area = getArea(wallWidth, wallHeight);

console.log(area);

Przykład 8.3

function getSize(width, height, depth) {
var area = width * height;
var volume = area * depth;
var sizes = [area, volume]
return sizes; // funkcja zwraca tablicę elementów
}

var area = getSize(3, 2, 3)[0];
var volume = getSize(3, 2, 3)[1];

console.log(area, volume);

// lub:

var areaVolume = getSize(3, 2, 3); // tablica o dwóch elementach

console.log(areaVolume);

Znając już funkcje w języku JavaScript, możemy przedstawić jeszcze jeden sposób wykonywania pętli. Obrazuje to poniższy przykład.

Przykład 8.4

var numbers = [11, 6, 12, 1, 3, 14, 10, 0, 13, 4, 15, 5, 9, 17, 7, 16, 2, 8];
var chars = ['O', 'H', 'W', 'N', 'I', ' ', 'E', 'B', 'E', 'W', 'L', 'T', 'C', 'G', 'O', 'E', 'O', 'E'];

numbers.forEach(function(element) {
console.log(chars[element]);
});

Jak zrobić własną stronę na Github'ie

Github oferuje nam sworzenie własnej witryny,

Praca domowa

Prosiłbym aby skupić się na dokończeniu projektów, dla pozostałych osób, które mają już projekt skończony zachęcam do zapoznania się z dalszą nauką JavaScript, czyli z zajęciami grupy średniozaawansowanej, link tutaj

Warsztaty WeboweMikołaj Szumigalski

Zajęcia 10 JavaScript