Zajęcia 5

Materiały do warsztatów technologii webowych prowadzonych na Wydziale Matematyki i Informatyki Uniwersytetu im. Adama Mickiewicza w Poznaniu.
Wróć do spisu materiałów Tu będziemy testować kod źródłowy

10. Użycie języka JavaScript w projektowaniu stron internetowych

10.1. Umieszczanie skryptów JS na stronie

Przykład 10.1.

<!DOCTYPE html>
<html>
	<head>
		<title>Przykład 10.1.</title>
	</head>
	<body>
		<h1>Przykład 10.1.</h1>
		<p>To jest przykład strony, która została zrobiona przy pomocy JS</p>
		<script src="app.js"></script>
	</body>
</html>

10.2. Modyfikowanie elementów HTML w języku JavaScript

Większość przykładów i ćwiczeń w tym punkcie będziemy wykonywać dla strony o następującym kodzie źródłowym:

<!DOCTYPE html>
<html>
	<head>
		<title>Przykłady i ćwiczenia</title>
	</head>
	<body>
		<h1 id="heading-one">Przykładowy nagłówek 1</h1>
		<p id="paragraph-one">To jest przykład strony, która została zrobiona przy pomocy JS</p>
		<span id="span-one">Uczymy się języka JavaScript.</span>
		<br />
		<p id="paragraph-two">Język JavaScript nie jest taki trudny.</p>
		<span id="span-two">Czas trwania zajęć: 90 minut.</span>
		<p id="paragraph-three">Technologie webowe</p>
	</body>
</html>

Przykład 10.2.

var time = 90/60;

var el = document.getElementById('span-two'); // pobranie elementu o id = 'span-two'
el.innerHTML = 'Czas trwania zajęć: ' + time + 'h.'; // uaktualnienie tekstu (i kodu znaczników) pobranego elementu

Metody uzyskania dostepu do elementów:

Metody zwracające jeden węzeł elementu:

  • document.getElementById(‘id’) - pobiera element na podstawie wartości atrybutu id;
  • document.querySelector(‘selektor css’) - wykorzystuje składnię selektora CSS wybierającego jeden element lub więcej. Metoda ta zwraca tylko pierwszy z dopasowanych elementów.

Metody zwracające co najmniej jeden element (w postaci nodelist - kolekcji węzłów):

  • document.getElementsByClassName(‘klasa’) - wybiera element lub elementy na podstawie wartości atrybutu class;
  • document.getElementsByTagName(‘nazwaZnacznika’) - wybiera wszystkie elementy na stronie posiadające znacznik o zadanej nazwie;
  • document.querySelectorAll(‘selektor css’) - używa składni selektora CSS w celu wybrania co najmniej jednego elementu, a następnie zwraca wszystkie elementy dopasowane.

10.3. Obiekty w języku JavaScript

Utworzenie obiektu za pomocą notacji literału

Notacja literału to najłatwiejszy i jednocześnie najpopularniejszy sposób tworzenia obiektów.

Przykład 10.3.

var hotel = {
	name: 'Tipton',
	rooms: 40,
	booked: 25,
	
	checkAvailability: function() {
		return(this.rooms - this.booked);
	}
};

var hotelName = hotel.name; // inna składnia: var hotelName = hotel['name'];
var roomsFree = hotel.checkAvailability();

Ćwiczenie 10.1.

Jak myślisz, kiedy używamy notacji podanej w komentarzu w przykładzie 10.3.?

Ćwiczenie 10.2.

Do czego służy słowo kluczowe this?

Utworzenie obiektu za pomocą notacji z użyciem konstruktora

Słowo kluczowe new i konstruktor obiektu powodują utworzenie pustego obiektu. Następnie można do niego dodać właściwości i metody.

Przykład 10.4.

var hotel = new Object();
hotel.name = 'Tipton';
hotel.rooms = 40;
hotel.booked = 25;
hotel.checkAvailability = function() {
	return (this.rooms - this.booked);
}

Uaktualnienia obiektu dokonujemy przez podanie nazwy obiektu, kropki, nazwy właściwości, znaku równości i nowej wartości właściwości, np. hotel.name = ‘Hilton’;.

Tworzenie wielu obiektów za pomocą składni konstruktora

Przykład 10.5.

function Hotel(name, rooms, booked) {
  this.name = name;
  this.rooms = rooms;
  this.booked = booked;
  this.checkAvailability = function() { 
    return this.rooms - this.booked; 
  };
}

var tiptonHotel = new Hotel('Tipton', 40, 25);
var hiltonHotel = new Hotel('Hilton', 120, 77);

Dodawanie i usuwanie właściwości

Przykład 10.6.

var hotel = {
  name: 'Hilton',
  rooms: 120,
  booked: 77
};

hotel.gym = true;
hotel.pool = false;
delete hotel.booked;

Ćwiczenie 10.3.

Dla strony o kodzie źródłowym HTML z ppkt. 10.2. zmień zawartość nagłówka na Zmieniona zawartość. Następnie utwórz obiekt o nazwie zadania z właściwościami iloscZadan, nazwaPrzedmiotu, ileZrobionych i metodą ileZostalo, która oblicza różnicę “iloscZadan” minus “ileZrobionych”. Wypełnij ten obiekt danymi. Dalej wstaw zawartość właściwości “nazwaPrzedmiotu” na stronę, podmieniając treść elementu o identyfikatorze span-one. Pokaż też na stronie wynik, który zwraca metoda naszego obiektu, podmieniając treść elementu o identyfikatorze span-two.

10.4. Obiekt String

W przypadku wartości będącej ciągiem tekstowym można użyć własciwości i metody obiektu String:

  • length - właściwość, która przechowuje liczbę znaków znajdujących się w ciągu tekstowym;
  • toUpperCase() - metoda, która zmienia małe znaki na duże;
  • toLowerCase() - metoda, która zmienia duże znaki na małe;
  • charAt() - metoda, która pobiera numer indeksu jako parametr, a następnie zwraca znak znajdujący się we wskazanym położeniu;
  • indexOf() - metoda, która zwraca numer indeksu pierwszego znaku lub zbioru znaków;
  • lastIndexOf() - metoda, która zwraca numer indeksu ostatniego znaku lub zbioru znaków;
  • substring() - metoda, która zwraca znaki znalezione między dwoma indeksami, przy czym znak znajdujący się w położeniu wskazywanym przez pierwszy indeks jest dołączony, natomiast znak wskazywany przez drugi indeks nie jest dołączony;
  • split() - metoda, która po podaniu znaku powoduje podział ciągu tekstowego w każdym miejscu wystąpienia danego znaku, a następnie poszczególne elementy przechowuje w tablicy;
  • trim() - metoda, która usuwa znaki odstępu na początku i końcu ciągu tekstowego;
  • replace() - metoda, która działa podobnie jak funkcja typu “znajdź i zamień”. Pobiera wartość do znalezienia oraz wartość zastępującą (domyślnie zastąpienie wartości następuje tylko dla pierwszego znalezionego dopasowania).

Ćwiczenie 10.4.

Mamy do dyspozycji zmienną var sentence = “ Home sweet home “;. Dla strony o kodzie źródłowym z podpunktu 10.2. zastąp treść elementu o identyfikatorze paragraph-one następującą treścią:

Nasz ciąg ma długość: ... .
Jeśli zmienimy wszystkie znaki na wielkie ciąg będzie wyglądać tak: ... .
Na 10. pozycji znajduje się znak: ... .
Ciąg 'ee' znajduje się na miejscu: ... .
Ostatni indeks znaku 'e' to: ... .
Znaki od 8 do 14 to: ... .
Po usunięciu niepotrzebnych spacji nasz ciąg wygląda tak: ... .
Po zmianie 'me' na 'w' nasz ciąg wygląda tak: ... .

W miejsce “…” należy wywołać odpowiednią metodę lub właściwość, która zwróci nam szukaną informację.

10.5. Obiekt Number

Jeżeli mamy do czynienia z wartością będącą liczba, to możemy na niej używać metod i właściwości obiektu Number:

  • isNaN() - sprawdza, czy wartość nie jest liczbą;
  • toFixed() - zaokrągla wartość do podanej liczby miejsc po przecinku (wartością zwrotną jest ciąg tekstowy);
  • toPrecision() - zaokrągla wartość do podanej liczby cyfr (wartością zwrotną jest ciąg tekstowy);
  • toExponential() - zwraca ciąg tekstowy przedstawiający liczbę wyrażoną w notacji wykładniczej.

10.6. Obiekt Math

Obiekt Math ma właściwości i metody przeznaczone do pracy z funkcjami i stałymi matematycznymi:

  • Math.PI - właściwość, która zwraca wartość liczby pi;
  • Math.round() - metoda zaokrąglająca liczbę do najbliższej liczby całkowitej;
  • Math.sqrt(n) - metoda, która zwraca pierwiastek kwadratowy liczby dodatniej;
  • Math.ceil() - metoda zaokrąglająca liczbę w górę;
  • Math.floor() - metoda zaokrąglająca liczbę w dół;
  • Math.random() - metoda, która generuje wybraną liczbę z zakresu [0; 1).

Ćwiczenie 10.5.

Co należy wstawić w miejsce ‘…..’, aby na stronie o kodzie źródłowym z ppkt. 10.2. treść elementu o identyfikatorze paragraph-two została zastąpiona przez komunikat: ‘Losowo wygenerowana liczba to x’, gdzie x to liczba naturalna z zakresu od 1 do 10?

var randomNumber = .....;

var el = document.getElementById('paragraph-two');
el.innerHTML = 'Losowo wygenerowana liczba to ' + randomNumber;

10.7. Obiekt Date

Gdy mamy utworzony obiekt typu Date, wymienione poniżej metody pozwalają na pobranie lub ustawienie daty i godziny przedstawianej przez dany obiekt:

  • getDate(), setDate() - zwraca lub ustawia dzień miesiąca;
  • getDay() - zwraca dzień tygodnia (od 0 do 6);
  • getFullYear(), setFullYear() - zwraca lub ustawia rok (4 cyfry);
  • getHours(), setHours() - zwraca lub ustawia godzinę (od 0 do 23);
  • getMilliseconds(), setMilliseconds() - zwraca lub ustawia milisekundy (od 0 do 999);
  • getMinutes(), setMinutes() - zwraca lub ustawia minuty (od 0 do 59);
  • getMonths(), setMonths() - zwraca lub ustawia miesiąc (od 0 do 11);
  • getSeconds(), setSeconds() - zwraca lub ustawia sekundy (od 0 do 59);
  • getTime(), setTime() - liczba milisekund, które upłynęły od 1 stycznia 1970 roku, 00:00:00 UTC; dla daty sprzed podanego dnia wartość jest ujemna;
  • getTimezoneOffset() - zwraca wyrażone w minutach przesunięcie strefy czasowej dla bieżącej lokalizacji;
  • toDateString() - zwraca datę w postaci ciągu tekstowego;
  • toTimeString() - zwraca godzinę w postaci ciągu tekstowego;
  • toString() - zwraca ciąg tekstowy przedstawiający wskazaną datę.

Ćwiczenie 10.6.

Uzupełnij luki (tzn. co wstawić w miejsce ‘???’) w poniższym skrypcie języka JavaScript tak, aby na stronie o kodzie źródłowym z ppkt. 10.2. treść elementu o identyfikatorze paragraph-three została zastąpiona przez komunikat znadujący się pod skryptem JS?

var daysOfWeek = ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'];
var months = ['styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień'];

var d = new Date();

var day = daysOfWeek[d.???];
var month = ???;
var dateOfBirth = new Date(???, ???, ???, ???, ???, ???); // ustawiamy datę z przeszłości w formacie: YYYY, MM, DD, HH, MM, SS
var difference = d.??? - dateOfBirth.???; // wynik jest w milisekundach
var age = Math.???(difference / 31556900000); // dzielone całkowicie przez liczbę milisekund w roku (przy założeniu, że to nie jest rok przestępny)
var date = d.???;

var el = document.getElementById('paragraph-three');
el.innerHTML = 'Dzisiaj jest: ' + day + '.' + '<br />' + 'Aktualny miesiąc: ' + month + '.' + '<br />' + 'Mój wiek w latach to: ' + age + '.' + '<br />' + 'Data wyświetlona w momencie wywołania metody: ' + date + '.';

Dzisiaj jest: (tu skrypt zwraca dzień tygodnia).
Aktualny miesiąc: (tu skrypt zwraca miesiąc).
Mój wiek w latach to: (tu skrypt zwraca nasz wiek w pełnych latach).
Data wyświetlona w momencie wywołania metody: (tu skrypt zwraca godzinę postaci 00:00:00 strefa_czasowa).

Zadania domowe

Zadanie 1.

Dana jest strona o poniższym kodzie źródłowym:

<!DOCTYPE html>
<html>
	<head>
		<title>Zadanie 1.</title>
	</head>
	<body>
		<h1 id="heading">xyz</h1>
		<p id="paragraph-one">xyz</p>
		<p id="paragraph-two">xyz</p>
		<p id="paragraph-three">xyz</p>
		<p id="paragraph-four">xyz</p>
	</body>
</html>

Napisz skrypt języka JavaScript, który zmodyfikuje treść tej strony następująco:

UWAGA: wartości w nawiasach należy podmienić poprzez skrypt JS! Moich komentarzy nie przepisujemy do kodu!

Nagłówek:

(Twoje imię i nazwisko)

Pierwszy akapit:

Data, która pojawi się przy otwarciu tej strony to: (dzień tygodnia - słownie), (numer dnia miesiąca), (nazwa miesiąca odmieniona przez odpowiedni przypadek), (rok)r.
Godzina w momencie otwarcia strony: (godzina):(minuty):(sekundy):(milisekundy).

Drugi akapit:

Operuję na zdaniu: "Podstawą szczęścia jest wolność, a podstawą wolności odwaga."

Trzynastym znakiem w tym zdaniu jest: (znak).
Znaki pomiędzy 7. a 12. pozycją to: (ciąg znaków).
Pierwszy raz znak 'ą' pojawia się na miejscu: (indeks).
Ten ciąg ma (ilość) znaków.
Po zamianie 'podstawą' na 'fundamentem' mamy: (ciąg znaków).
Część zdania przed przecinkiem to: (ciąg znaków przed przecinkiem).
Druga część zdania po odwróceniu to: (ciąg znaków). // UWAGA: przyda tu się metoda join(), proszę znaleźć potrzebne informacje na jej temat!

Trzeci akapit:

Korzystam z dodatkowych wiadomości o obiekcie Math ze strony: http://kursjs.pl/kurs/math.php

Zadanie 1. Mam funkcję kwadratową:
f(x) = x^2 + 5x + 6

Wyróżnik tego trójmianu to: (wartość).
Pierwiastek kwadratowy tego wyróżnika to: (wartość).
Miejscami zerowymi tej funkcji są: (wartość) i (wartość).

Czwarty akapit:

Kontynuuję pracę z obiektem Math i używam obiektu Number:

Zadanie 2. Obliczam wartość funkcji:
f(x) = sqrt(|sin(ln(2^(x))) + max(0, x) + |-e^(2x) + min(-1, x)||) // ln() to logarytm naturalny
dla x = pi/6.

Mój wynik to: (liczba).
Wynik w notacji wykładniczej to: (liczba w notacji wykładniczej).
Po zaokrąleniu wyniku w górę mam: (liczba).

Źródła

  • Duckett Jon, JavaScript and JQuery: Interactive Front-End Web Development, przeł. Robert Górczyński, Helion, 2015, ISBN 978-83-283-0126-9.
  • kursjs.pl