Pierwszy program w JavaScript

W dzisiejszym artykule przedstawię jak stworzyć pierwszy prosty program w javascripcie. Aby to zrobić potrzebować będziemy jakiś edytor tekstu, ja będę używał Visual Studio Code, ale jak wspomniałem w poprzednim artykule nie ma to większego znaczenia jakiego edytora użyjesz.

Na początek stwórz sobie nowy folder nazwij go np. Pierwszy-program-javascript. W tym folderze dodaj nowy plik index.html oraz nowy folder css, a w nim style.css.

Plik index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pierwszy program w JavaScript</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="mainText" class="textRed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vero incidunt fugiat eos.</div>
    <button id="changeColorText" class="button">Zmień kolor tekstu</button>
</body>
</html>

Plik style.css:

.textRed {
    color: red;
}

.button {
    margin-top: 1rem;
    background-color: lightcyan;
    font-size: 2rem;
}

W przeglądarce powinno to wyglądać mniej więcej tak:
javascript1

Oczywiście w tym przykładzie stawiamy na prostotę, więc nasza strona nie będzie miała jakichś skomplikowanych styli. Spróbujemy zrobić tak aby po kliknięciu w przycisk "Zmień kolor tekstu" - zmienił się kolor wyświetlanego tekstu na kolor zielony. Oczywiście można to zrobić na kilka różnych sposobów, ja przedstawię jeden z nich. W pierwszym kroku dodamy klasę, która ustawia kolor na zielony w pliku style.css:

.textRed {
    color: red;
}

.button {
margin-top: 1rem;
background-color: lightcyan;
font-size: 2rem;
}

.textGreen {
    color: green;
}

Następnie należy dodać skrypt js do strony. Można to zrobić na kilka sposobów, ja przedstawię sposób, który jest najlepszą praktyką tzn. wyeksportowanie skryptu do osobnego pliku. Najpierw dodajemy do głównego folderu nowy folder js, a w nim plik scripts.js, który będzie miał następującą postać:

var button = document.querySelector("#changeColorText"); //wybranie przycisku i zapisanie w zmiennej button.
var text = document.querySelector("#mainText"); //wybranie tekstu i zapisanie w zmiennej text.
button.onclick = function() { //podpięcie się pod zdarzenie onclick przycisku.
    text.classList.add("textGreen"); //dodanie klasy textGreen.
};

Dzięki wyeksportowaniu pliku javascriptowego do osobnego pliku, w pliku index.html trzeba dodać tylko odwołanie do tego pliku. Plik index.html będzie miał następującą postać:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pierwszy program w JavaScript</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="mainText" class="textRed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vero incidunt fugiat eos.</div>
    <button id="changeColorText" class="button">Zmień kolor tekstu</button>

    <script src="js/scripts.js"></script> <!--dobrą praktyką jest umieszczanie odwołowania do pliku skryptowego pod koniec sekcji body, dzięki temu nasza strona szybciej się załaduje.-->
</body>
</html>

Teraz po kliknięciu w przycisk zostanie zmieniony kolor tekstu, czyli to co chcieliśmy osiągnąć w naszym pierwszym programie w javascripcie.
java-script2

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam do kolejnego artykułu z serii podstawy programowania w języku JavaScript.

Kolejny artykuł - Komentarze w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Komentarze (6)

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły