Obraz zawierający tekst, Czcionka, Grafika Opis wygenerowany automatycznie 

Kierunek Informatyka

 

Instrukcja do ćwiczeń laboratoryjnych nr:

4

Nazwa przedmiotu:
Nowoczesne techniki programowania 

   Temat JavaScript

Tryb studiów: stacjonarny

Czas trwanie ćw.

2x45 min

Autor materiałów: dr Marcin Skuba

 

1. Treści programowe: 

JavaScript, zmienne, instrukcje warunkowe, pętle, funkcje, tablice, operatory: arytmetyczne, logiczne, przypisania, programowanie obiektowe, współpraca z formularzami.  

 

2. Cel zajęć:

Celem zajęć jest opanowanie podstawowych umiejętność programowania w języku JavaScript. Deklaracja zmiennych, operacje arytmetyczno logiczne, deklaracja funkcji, tablice, i inne.

 

3. Materiały dydaktyczne

JavaScript to język programowania na stronach internetowych po stronie klienta.

 

Lind do pełnej dokumentacji https://www.w3schools.com/js/default.asp

 

Przykład ulokowania skryptu w kodzie HTML oraz wywołanie przykładowej funkcji w momencie użycia przycisku:

<!DOCTYPE html>

<html>

    <head>

        <script>

           function mojaFunkcja() {

                       document.getElementById("obiekt_teksowy").innerHTML = "Zmiana wartości";

           }

        </script>

     </head>

 

    <body>

         <h1>A Web Page</h1>

         <p id="obiekt_teksowy">Przyklad</p>

         <button type="button" onclick=" mojaFunkcja()">Uruchom funkcję </button>

    </body>

</html>

Lub

 

 

Przykład wykorzystania skryptu z pliku zewnętrznego .js:

<script src="myScript.js"></script>  

<script src="https://www.w3schools.com/js/myScript1.js"></script>

 

Komentarz

// komentarz jednej linii

/* komentarz do znaku */

 

Wyświetlanie komunikatów w trybie debugowania (Chrome F12)

console.log("komunikat");

 

Zmienne

            Słowa kluczowe:

let – deklaracja zmiennej, której później można zmieniać typ

const – deklaracja zmiennej, której nie można zmieniać typu

var – to domyślny specyfikator (niezalecany) używany często przed ES6 (do 2015 rok)

 

let a, b, c;

const a, b, c

let pi = 3.14;
let person = "John Doe";

let person = "John Doe", carName = "Volvo", price = 200;

 

Tablice

let cars = ["Saab", "Volvo", "BMW"]; // deklaracja tablicy

            let car=cars[0];                                          // odwołanie się do pierwszego elementu tablicy

            cars[2]= "Fiat";                                           // przypisanie wartości do trzeciego elementu tablicy

            let dlugosc=cars.length;                          // pobranie rozmiaru tablicy

document.getElementById("obiekt_teksowy").innerHTML=cars.toString();  zwraca elementy tablicy jako tekst ("Saab,Fiat,BMW")

 

Konwersja z tekstu do liczby

            let tekst=”500”;

            let liczba = Number(tekst);                     // zwrócona wartość liczbowa 500;

            let liczba = parseInt(tekst);                     // zwrócona wartość liczbowa 500;

            let liczba = parseFloat(”13.33”);           // zwrócona wartość zmienno-przecinkowa 13.33;

 

Losowanie wartości

let wynik= Math.floor(Math.random() * 10);           // Losowanie wartości z przedziału od 0 do 9 (10 wartości)

let wynik= Math.floor(Math.random() * 10)+2;      // Losowanie wartości z przedziału od 2 do 11

 

Obiekty JavaScript są pisane za pomocą nawiasów klamrowych {}. Właściwości obiektu są zapisywane jako pary nazwa: wartość, oddzielone przecinkami.

let osoba = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

let imie=osoba. firstName;   odwołanie się od składowej firstName obiektu osoba

   lub

let imie= osoba["firstName"]  odwołanie się od składowej firstName obiektu osoba

 

Operatory przypisania

 

operator

Opis

+

Dodawanie

-

Odejmowanie

*

Mnożenie

**

Potęgowanie

/

Dzielenie

%

Dzielenie modulo

++

Inkrementacja

--

Dekrementacja

 

Operator porównania

 

Operator

Opis

==

równy (porónanie wartości)

===

równy (porównaie typów)

!=

różny

!==

różny typ

> 

większy

< 

mniejszy

>=

większy lub równy

<=

mniejszy lub równy

?

operator trójskładnikowy

 

Operatory logiczne

 

Operator

Opis

&&

logiczny and

||

logiczny or

!

logiczny not

 

Instrukcje warunkowe  

if (condition) {
            //  instrukcje wykonywane gdy warunek jest prawdziwy
} else {
            //  instrukcje wykonywane gdy warunek jest fałszywy
}

Przykład:

if (time < 10) {
            wynik = "Good morning";
} else if (time < 20) {
            wynik = "Good day";
} else {
            wynik = "Good evening";
}

 

switch(wyrażenie) {
  case x:
    // gdy wartość wyrażenia jest równa x
    break;
  case y:
    // gdy wartość wyrażenia jest równa  y
    break;
  default:
    // gdy wartość wyrażenia jest inna niż powyższe warunki
}

 

Pętla for

for (deklaracja licznika i przypisanie wartości początkowej; warunek pętli; modyfikacja licznika) {
       //instrukcje wykowywane w pętli           

}

            Przykład 1:

for (i = 0; i < 5; i++) {
  tekst += "wartość jest:  " + i + "<br>";
}

 

Przykład 2:

var cars = ['BMW', 'Volvo', 'Mini'];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

 

Pętla while

while (warunek) {
    // instrukcje wykonywane gdy warunek jest prawdziwy

}

Przykład:

const cars = ["BMW", "Volvo", "Saab", "Ford"];
const i = 0;
const text = "";

while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

 

Pętla do-while

do {
  // code block to be executed
}
while (condition);

 

Deklaracja funkcji pobierającej dwa argumenty oraz zwracająca wartość

function myFunction(p1, p2) {
      return p1 * p2;   // zwracana wartość przez funkcję
}

 

let x = myFunction(4, 3);  - wywołanie powyższej funkcjji  

----------------------------------------------------------------------------------------------------------------------------

Programowanie obiektowe

 

class Osoba{

        // constructor(){

        //     this.imie="brak"

        //     this.nazwisko="brak"

        // }

        constructor(imie="brak", nazwisko="brak"){

            this.imie=imie

            this.nazwisko=nazwisko

        }

        pokazDane() {

            console.log("imie="+this.imie+" nazwisko="+this.nazwisko)   

        }

    }

 

    const osoba1 = new Osoba();

    osoba1.pokazDane()   

    const osoba2 = new Osoba("Jan", "Kowalski")

    osoba2.pokazDane()

    const osoba3 = new Osoba("Marek")

    osoba3.pokazDane()

 

    // dziedziczenie

    class Student extends Osoba{

        constructor(imie="brak", nazwisko="brak", rok=0){

            super("Piotr", "Nowak")

            this.rok=rok

        }

        //geter

        get pobierzImie(){

            return this.imie   

        }

        //seter

        set ustawImie(imie){

            this.imie=imie;

        }

        pokazDane(){

            super.pokazDane() // wywoływanie metody przysłoniętej

            console.log(" rok"+this.rok)

        }

    }

    const student1 = new Student("Wojtek", "Nowak", 3)

    student1.ustawImie="Jarek"  // ustawienie wartosci przez seter

    //student1.ustawImie("Marian")

    imie=student1.pobierzImie; // użycie getera do pobrania wartosci z obiektu

    console.log("pobrane imie: "+imie)

    student1.pokazDane()

 

//--------------------------------------------------------------

 //starszy przykład tworzenia klasy przez funkcje

 

    function Pracownik(imie, nazwisko){

        this.imie=imie;

        this.nazwisko=nazwisko;

        this.pokazDane = function(){

            console.log("imie="+this.imie+" nazwisko="+this.nazwisko)   

        }

    }

    const pracownik1 = new Pracownik("Mieczysław", "Niemiec")

    pracownik1.pokazDane()

 

----------------------------------------------------------------

// Przykład deklaracji bezpośredniego obiektu

 

      const uczen ={

          imie:"Jan",

          nazwisko:"Kowalski",

          klasa:2,

     

          ustawDane(imie,nazwisko,klasa){

            this.imie=imie;

            this.nazwisko=nazwisko;

            this.klasa=klasa;

          },

          pokazDane(){

          document.write("imie:"+this.imie+" nazwisko:"+this.nazwisko+" klasa:"+this.klasa);

          },

         ustaw: function(imie){  // inny sposób deklaracji funkcji

          this.imie=imie;

          }

      };

      uczen.ustawDane("Piotr", "Nowak", 1)

      uczen.ustaw("Piter")

      uczen.pokazDane();

 

----------------------------------------------------------------------------------------------------------------------------

Uruchamianie funkcji w czasie startu strony

<body onload="funkcja()">

 

Przykład wyszukania i zmiany wartości tekstowej elementu HTML:

document.getElementById("demo").innerHTML = "Hello JavaScript";

 

Zdarzenia – przykład wyświetlający datę w momencie naciśnięcia przycisku

<button onclick="document.getElementById('id_tekst').innerHTML=Date()">Godzina</button>

 

Wybrana lista zdarzeń

onchange - Element HTML został zmieniony
onclick - Użytkownik klika element HTML
onmouseover - Użytkownik przesuwa mysz nad elementem HTML
onmouseout - Użytkownik odsuwa mysz od elementu HTML
onkeydown - Użytkownik naciska klawisz klawiatury
onload - Przeglądarka zakończyła ładowanie strony

 

Deklaracja klasy

class Car {                                        //deklaracja klasy
  constructor(brand) {                  //deklaracja konstruktora
    this.carname = brand;
  }
}
mycar = new Car("Ford");           // tworzenie obiektu typu Car

 

Przykład aplikacji obliczającej potęgę podaje liczby -  przycisk, pole tekstowe, tekst

 

<!DOCTYPE html>

<html lang="pl">

            <head>

                        <meta charset="utf-8"/>

                        <script type="text/javascript">

                                   function obliczPotege(){

                                               var wartosc= new Number(document.getElementById("liczba").value);

                                               var wynik = wartosc*wartosc;

                                               document.getElementById("wynik").innerHTML=wynik;

                                   }

                        </script>

            </head>

            <body >

                        <center>

                        <h1> Potęga

                        <div id="potega"></div>

                        </h1>

                        <br>

                        <input type="text" id="liczba"/>

                        <input type="submit" value="Oblicz" onclick="obliczPotege()"/>

                        <br><br>

                        <h2><div id="wynik"> ... </div></h2>

                        </center>    

            </body>

</html>

 

Elementy HTML

<button type="button" onclick=" mojaFunkcja()">Etykieta </button>    - przycisk button

<input type="submit" value="Oblicz" onclick="obliczPotege()"/>                        - przycisk input typ submit

<input type="text" id=" id_obiektu_html "/>                                                           - edycyjne pole tekstowe

<h2><div id="wynik"> ... </div></h2>                                                                        - pojemnik, w którym wyświetlony zostanie np. tekst

 

 

Przykład drugi (cała strona):

 

Obraz zawierający tekst, zrzut ekranu, Czcionka, wyświetlacz Zawartość wygenerowana przez sztuczną inteligencję może być niepoprawna.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <form name="formularz">

        <h2>Kontakt</h2>

        <table>

            <tr>

                <td><label for="imie">Imie </label></td>

                <td><input type="text" id="imie"><br></td>    

            </tr>

            <tr>

                <td><label for="nazwisko">Nazwisko </label></td>

                <td><input type="text" id="nazwisko"><br></td>    

            </tr>

            <tr>

                <td><label for="email">Email</label>   </td>

                <td><input type="email" id="email"><br></td>    

            </tr>

            <tr>

                <td><label for="zgloszenie">Zgłoszenie </label>    </td>

                <td><textarea id="zgloszenie" cols="30" rows="10"></textarea> </td>    

            </tr>

            <tr>

                <td></td>

                <td><input type="checkbox" id="regulamin">Zapoznałem sie z regulaminem</td>    

            </tr>

            <tr>

                <td></td>

                <td><input type="reset">

                    <input type="button" value="Prześlij" onclick=" przeslij()">

                </td>    

            </tr>

        </table>            

    </form>

 

    <hr>

    <p id="tekst" class="klasa"></p>

    <script>

        function przeslij(){

           //tekst =document.getElementById("tekst");

           //tekst = document.getElementsByTagName("p")[0];

           tekst = document.getElementsByClassName("klasa")[0];

            regulamin = document.getElementById("regulamin").checked;

           

 if(!regulamin){

                tekst.style.color="#f00";  

            }else{

                tekst.style.color="navy";

            }

            string=""+document.getElementById("imie").value;

            string+=" "+document.getElementById("nazwisko").value;

            string+="</br>Treść twojej sprawy "+document.getElementById("zgloszenie").value;

            tekst.innerHTML=string;

        }

    </script>

 

</body>

</html>

 

 

Pobieranie wartości z obiektu HTML:

var wartosc= new Number(document.getElementById("id_obiektu_html").value);

 

Modyfikacja elementu HTML

            Przykład 1 – zamiana obrazu w obiekcie img:

<img id="obraz" src="stary.gif">

<script>

      document.getElementById("obraz").src = "nowy.jpg";

</script>

 

Przykład 2 – zamiana całego elementu html

                        <div id="image">

                                   <img src="as.png"/>

                        </div>

                        <script >

                                   document.getElementById("image").innerHTML = '<img src="ikona.png" />';

                        </script>

                       

            </body>

 

Modyfikacja stylu CSS elementu HTML

            document.getElementById(id).style.property = new style

 

            Przykłady:

document.getElementById("id_obiektu").style.color = "blue";

document.getElementById("id_obiektu").style.background = "#00dd00";

document.getElementById("id_obiektu").style.border="3px solid #00cc00";

document.getElementById("id_obiektu").style.cursor="default";

 

Zmiana wartości atrybutu

document.getElementById("id_obiektu").setAttribute="onclick",";";

 

Opóźnienie wywołania funkcji

setTimeout("stoper()", 1000);   // wywołanie funkcji “stoper()” po upływie jednej minuty (1000 ms)

 

Okno dialogowe z komunikatem

alert("Treść komunikatu");

 

 

Zadania

Zadanie 1.

Napisz program „zegarek” wyświetlający aktualny czas zmieniający się co sekundę.

 

Zadanie 2.

Napisz program „stoper” odliczający czas z dokładnością 10 razy na sekundę. Zadeklaruj przyciski „stop/start” oraz „zeruj”, zaprogramuj ich funkcjonalności. Ustaw nowy wygląd aplikacji w stylach CSS.

 

Zadanie 3.

Napisz program „przeglądarka zdjęć” wyświetlający kolejno pięć zdęć w losowej kolejności co trzy sekundy. Dla każdego zdjęcia dodaj jego numer widoczny na stronie. Kliknięcie danego numeru powinno wyświetlić przypisane do niego zdjęcie.