Informatyka

Temat: Podstawy języka JavaScript

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.

Przydatne linki i programy:

JavaScript (w skrócie "JS") jest pełnoprawnym dynamicznym językiem programowania, który po dodaniu do dokumentu HTML, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich, współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.

JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków.

Przykład 1. "hello world"

JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.
  1. Utwórz nowy pusty plik o nazwie main.js i wklej do niego zawratość.
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';


    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  2. Następnie utwórz plik index.html
    <html>
    <head>
    <title> JavaScript </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Informatyka" />
    <meta name="keywords" content="informatyka"/>
    </head>

    <body bgcolor="#99ffcc">
    <center>
    <h1>Witamy na stronie internetowej!</h1>
    <img src="https://jaki-jezyk-programowania.pl/img/technologies/javascript.png" alt="">
    </center>


    </body>
    </html>


    i wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu </body>:
    <script src="main.js"></script>
    W zasadzie, ten kod działa identycznie, jak element w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).
  3. Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index.html w przeglądarce.
Powinieneś zobaczyć coś takiego:



Przykład 2. "Wyskakujący obrazek popup"
  1. Utwórz nowy pusty plik o nazwie popup.js i wklej do niego zawratość.
    hs.graphicsDir = 'https://zsgh.bytom.pl/js/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;


    hs.graphicsDir = 'https://zsgh.bytom.pl/js/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;
  2. Następnie utwórz plik index2.html
    <html>
    <head>
    <title> JavaScript popup </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Informatyka" />
    <meta name="keywords" content="informatyka"/>



    </head>

    <body bgcolor="#99ffcc">
    <center>
    <h1>Witamy na stronie internetowej z obrazkami PopUp!</h1>
    <img src="https://zsgh.bytom.pl/informatyka/informatyka1t/html/html05.jpg" width="300" alt="" >
    </center>
    <br /> <br />
    <center><font size="+2" color="red">Obrazek PopUp</font></center>
    <center><a href="https://zsgh.bytom.pl/informatyka/informatyka1t/html/html06.jpg" class="highslide" onclick="return hs.expand(this)"><img src="https://zsgh.bytom.pl/informatyka/informatyka1t/html/html06.jpg" width="200" border="0" alt="" /></a></center>
    <hr />

    </body>
    </html>


    i wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu </head>:
    <script type="text/javascript" src="https://zsgh.bytom.pl/js/highslide/highslide-full.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://zsgh.bytom.pl/js/highslide/highslide.css"/>
    <script src="popup.js"></script>
  3. Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index2.html w przeglądarce.
Powinieneś zobaczyć coś takiego:
Obrazek PopUp


Powinieneś umieć: