Witam, w tym wpisie przedstawię sposób, w jaki sposób można rozpocząć przygodę z Javascript, który jest zorientowanym obiektowo jeżykiem programowania.

Aby móc z niego skorzystać, potrzebne zewnętrzne środowisko jakim może być np.: przeglądarka internetowa.

Tak więc do dzieła!

Na początku stwórzmy plik index.html, który będzie zawierał podstawową stronę internetową.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Strona HTML</title>
</head>
<body>
    

</body>
</html>

Aby móc wykorzystać JS w przeglądarce można skorzystać z dwóch sposobów.

Pierwszy to pisanie kodu Javascript bezpośrednio w pliku html, między znacznikami script.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Strona HTML</title>
</head>
<body>
    

    <script>
        console.log('Works!');
    </script>
</body>
</html>

 

Po otworzeniu pliku index.html, naszym oczom nic się nie ukaże, gdyż funkcja console.log() wypisuje tekst w konsoli przeglądarki. Aby wejść w konsolę przeglądarki, należy wykorzystać skrót klawiszowy Ctrl+Shift+J( w Google Chrome ).

start2

Jak widzimy kod działa prawidłowo i widzimy napis ‚Works!’.

Jednak pisanie kodu wewnątrz pliku HTML jest dość nieefektywne. Można to rozwiązać lepiej i załadować kod JS z zewnętrznego pliku.

Najpierw stwórzmy plik script.js.

var howMany = 1 + 2;
var text = "I've got " + howMany + ' cars.';

console.log(text);

 

Następnie musimy edytować nasz plik index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Strona HTML</title>
</head>
<body>
    

    <script src='script.js'></script>
</body>
</html>

Powyżej można zauważyć, że do importowania skryptów javascript używa się znacznika script z atrybutem src, który jako wartość przyjmuje ścieżkę do pliku. Ponadto znacznik script powinien być umieszczony na samym dole strony, gdyż to sprawi, że najpierw załaduje się strona, a potem dopiero kod JS. Dzięki temu użytkownik będzie miał wrażenie, że strona płynniej się wczytała.

start3.png

I to tyle. Tyle wystarczy aby rozpocząć przygodę z JS. A i jeszcze jedna ważna rzecz. Bardzo gorąco zachęcam do zainstalowania Sublime Text lub Atom. Są to edytory tekstu, które zawierają wiele rozszerzeń, przyśpieszających tworzenie kodu.

Mam nadzieję, że wpis się podobał.