JavaScript Dokument

JavaScript
1. Sposoby na osadzenie skryptu JavaScript w dokumencie HTML:

a) wewnętrznie – kod JS umieszczamy pomiędzy znacznikami otwierającymi i
zamykającymi script, np.:
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Wewnętrzny kod JavaScript</title>
<script>
var a = prompt("Podaj liczbę a: ");
alert(a);
</script>
</head>
<body>
</body>
</html>
b) zewnętrznie – kod w języku JavaScript zapisujemy w oddzielnym pliku z

rozszerzeniem .js i dołączamy do dokumentu HTML za pomocą znacznika
script z atrybutem src, przykładowo:
ZAWARTOŚĆ PLIKU script.js

var question = confirm("Czy jesteś obywatelem Rzeczypospolitej Polskiej");
if(question==1) {
alert("Jesteś obywatelem RP. ");
} else {
alert("Nie jesteś obywatelem RP. ");
}
ZAWARTOŚĆ PLIKU index.html

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Zewnętrzny kod JavaScript</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
JavaScript
2. Lista najważniejszych zdarzeń elementów DOM (Document Object Model –

Obiektowy Model Dokumentu).
 onClick – kliknięcie w element;
 onDblClick – podwójne kliknięcie w element;
 onFocus, onFocusIn – element staje się aktywny (uzyskuje focus,
przeciwieństwo onBlur);
 onFocusOut, onBlur – element przestaje być aktywny, traci focus;
 onKeyDown – naciśnięcie klawisza klawiatury;
 onKeyUp – zwolnienie klawisza klawiatury;
 onKeyPress – naciśnięcie dowolnego przycisku na klawiaturze z wyjątkiem
ALT, CTRL, SHIFT, ESC;
 onLoad – załadowanie określonego elementu (np. całości strony);
 onAbort – moment zaniechania załadowania określonego elementu (np.
strony);
 onMouseOver – najechanie na element kursorem myszy;
 onMouseOut – opuszczenie przez kursor myszy obiektu;
 onMouseEnter – kursor wjechał na element;
 onMouseLeave – kursor zjechał elementu;
 onMouseMove – kursor zmienia swoje położenie wewnątrz danego
elementu;
 onSelect – zawartość obiektu zostaje zaznaczona (np. zaznaczenie fragmentu
tekstu);
 onChange – element zmienił swoją zawartość (po opuszczeniu elementu);
 onInput – wciśnięty jest klawisz, wartość zostaje wprowadzana, działa na
bieżąco, bez konieczności opuszczenia elementu;
 onSubmit – moment zatwierdzenia formularza;
 onUnload – strona zostanie zmieniona, np. kliknięto w link i ma nastąpić
przekierowanie;
 onResize – zmiana wielkości okna;
 onContextMenu – wciśnięto PPM (prawy przycisk myszy) i pojawiło się menu
kontekstowe;
3. Pobieranie danych z pól różnego typu.

 pobieranie wartości z pola input type="text":
- najbardziej prawdopodobne zdarzenia: onClick, onFocus, onBlur,
onMouseOver, onMouseOut, onChange, onInput, onKeyDown, onKeyUp,
onSelect;
- pobieranie wartości i przykładowa obsługa:
HTML: <input type="text" name="kolor" id="kolor" onBlur="koloruj()">

JS:
function koloruj() {
var kolor = document.getElementById("kolor").value;
document.body.style.backgroundColor = kolor;
(Uwaga! Body jest nielicznym znacznikiem, do którego
możemy odnieść się w sposób bezpośredni)
JavaScript
}
 pobieranie wartości z pola input type="number":

- najbardziej prawdopodobne zdarzenia: onClick, onFocus, onBlur,
onMouseOver, onMouseOut, onChange, onInput;
HTML: <input type="wiek" name="kolor" id="wiek"

onInput="sprawdz__wiek()">
<output id="out"></output>
JS:
function sprawdz_wiek() {
var wiek = document.getElementById(‘wiek’).value*1;
var odp;
if(wiek>=18) {
odp = "Jesteś pełnoletni.";
} else {
odp = "Nie jesteś pełnoletni.";
}
document.getElementById(‘out’).innerHTML = odp;
}
 pobieranie wartości z pola input type="radio":

- najbardziej prawdopodobne zdarzenia dla i:radio: onClick, onChange,
onInput;
HTML: <input type="radio" name="plec" id="m" value="mezczyzna"

onChange="wyswietl(‘m’)">
<input type="radio" name="plec" id="k" value="kobieta"
onChange="wyswietl(‘k’)">
JS:
function wyswietl(id) {
var plec = document.getElementById(id).value;
document.getElementById(‘out’).innerHTML = plec;
}
 pobieranie wartości z pola input type="checkbox":

- najbardziej prawdopodobne zdarzenia dla i:checkbox: onClick, onChange,
onInput;
HTML: <input type="checkbox" name="pytanie" id="pytanie"

onClick="chbx()">
JavaScript
JS:
function chbx() {
var pytanie =
document.getElementById(‘pytanie’).checked*1;
alert(pytanie);
}
 pobieranie wartości z listy rozwijanej select:

- najbardziej prawdopodobne zdarzenia dla select: onChange, onInput;
HTML: <select name="lista" id="lista" onInput="skrypt()">

<option>raz</option>
<option>dwa</option>
<option>trzy</option>
</select>
JS:
function skrypt() {
var opcja = document.getElementById(‘lista’).value;
alert(opcja);
}
 pobieranie wartości z pola tekstowego textarea:

- najbardziej prawdopodobne zdarzenia dla textarea: onChange, onInput;
HTML: <textarea name="txta" id="txta" cols="30" rows="10"

onInput="tx()"></textarea>
JS:
function tx() {
var a = document.getElementById(‘txta’).value;
document.getElementById("out").innerHTML = a;
}
 pobierania wartości z elementu listy li:

- najbardziej prawdopodobne zdarzenia dla li: onClick;
HTML: <ul>
<li class="item" onClick="komunikat(0)">uczen1</li>
</ul>
JavaScript
JS:
function komunikat(index) {
var element = document.getElementsByClassName(‘item’)
[index].innerHTML;
alert(element);
}
 pobieranie zawartości z paragrafu p:

- najbardziej prawdopodobne zdarzenia dla p: onClick, onMouseOver,
onMouseOut;
HTML: <p onClick="funkcja()">Lorem ipsum dolor sit amet consectetur

adipisicing elit.</p>
JS:
function funkcja() {
var zmienna = document.getElementsByTagName(‘p’)
[0].innerHTML;
alert(zmienna);
}
 pobieranie źródła zdjęcia ze znacznika img:

- najbardziej prawdopodobne zdarzenia dla img: onClick, onDblClick,
onMouseOver, onMouseOut;
HTML: <img onClick="atrybuty(‘zdj’)" src="pies1.jpg" alt="zdjęcie

przedstawia psa" title="pies" id="zdj" onMouseOver="zmiana(‘zdj’,
‘pies2.jpg’)" onMouseOut="zmiana(‘zdj’, ‘pies1.jpg’)">
JS:
function zmiana(id, zrodlo) {
var obiekt = document.getElementById(id);
obiekt.src = zrodlo;
document.querySelector(‘#out’).outerHTML = "<marquee
id=’out’>" + obiekt.src + "</marquee>";
}
function atrybuty(id) {
console.log(document.getElementById(id).src);
console.log(document.getElementById(id).alt);
console.log(document.getElementById(id).title);
console.log(document.getElementById(id).id);
}
JavaScript
4. Ingerowanie w dokument HTML za pomocą kodu JavaScript.
 Zmiana koloru tekstu:
<p id="tekst">przykładowy tekst</p> (HTML)
document.getElementById(‘tekst’).style.color = "red";
lub document.getElementById(‘tekst’).style = "color: red;";
 Zmiana koloru tła:

<body id="bd">zawartość strony</body> (HTML)
document.getElementById(‘bd’).style.backgroundColor = "blue";
lub document.body.style.backgroundColor = "blue";
lub document.body.style = "background-color: blue;
 Zmiana rozmiaru czcionki:
<p id="id1">tekst</p> (HTML)

document.getElementById(‘id1’).style.fontSize = "12px”;
lub document.getElementById(‘id1’).style = "font-size: 12px;";
 Zmiana stylu czcionki:

<p id="tekst">to jest tekst</p> (HTML)
document.getElementById(‘tekst’).style.fontStyle = "italic";
lub document.getElementById(‘tekst’).style = "font-style: normal;";
 Zmiana rodziny czcionki:

<p id="tekst">lorem ipsum</p> (HTML)
document.getElementById(‘tekst’).style.fontFamily = "Webdings";
lub document.getElementById(‘tekst’).style = "font-family: Calibri;";
 Zmiana typu punktorów listy:

<ul id="moja_lista">
<li>punkt pierwszy</li>
<li>punkt drugi</li>
<li>punkt trzeci</li>
</ul> (HTML)
document.getElementById(‘moja_lista’).style.listStyleType = "square";
lub document.getElementById(‘moja_lista’).style = "list-style-type: circle;";
5. Szybka powtórka.
 document.getElementById(‘id’).value – odnoszenie się do wartości
elementu o podanym id;
 document.getElementById(‘id’).checked – odnoszenie się do stanu pola
typu checkbox, które posiada podane id;
 document.getElementById(‘id’).innerHTML – odnoszenie się do zawartości
 document.getElementById(‘id’).outerHTML – odnoszenie się do fragmentu
kodu HTML opisującego element o podanym id wraz z jego potomkami;
 document.getElementById(‘id’).style – odnoszenie się do stylu CSS
JavaScript
 document.getElementById(‘id’).style.color – odnoszenie się do koloru
 document.getElementById(‘zdj’).src –odnoszenie się do źródła elementu o
podanym id;
 document.getElementById(‘id’) – pobieranie elementu poprzez podanie id,

zwraca jeden wynik;
 document.getElementsByClassName(‘klasa’) – pobieranie elementu poprzez
podanie nazwy klasy (class), może zwracać więcej niż jeden wynik, w
zależności od liczby elementów w danej klasie, wymaga odnoszenia się
poprzez indeks tak jak tablica, np.
document.getElementsByClassName(‘klasa’)[0];
 document.getElementsByTagName(‘znacznik’) – pobieranie elementu
poprzez podanie nazwy znacznika, może zwracać więcej niż jeden wynik,
wymagane odnoszenie się poprzez indeks;
 document.getElementsByName(‘name’) – pobieranie elementu poprzez
podanie nazwy (name), może zwracać więcej niż jeden wynik, wymagane
podanie indeksu;
 document.querySelector(‘selektor CSS’) – pobieranie pierwszego na stronie
zaczynając od góry elementu, który pasuje do podanego przez nas selektora
CSS;
 document.querySelectorAll(‘selektor CSS’) – pobieranie wszystkich
pasujących elementów na stronie do podanego przez nas selektora CSS,
może zwracać więcej niż jeden wynik, wymagane podanie indeksu;
6. Ciekawostki dotyczące querySelectora.

 document.getElementById(‘id’) = document.querySelector(‘#id’)
 document.getElementsByClassName(‘klasa’) =
document.querySelectorAll(‘.klasa’)
 document.getElementsByTagName(‘znacznik’) =
document.querySelectorAll(‘znacznik’)
 document.getElementsByName(‘nazwa’) =
document.querySelectorAll("[name=’nazwa’]")
 document.querySelector("zapytanie CSS") =
document.querySelectorAll("zapytanie CSS")[0]

JavaScript Dokument

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Dokument

Uploaded by

Copyright:

Available Formats

JavaScript

1. Sposoby na osadzenie skryptu JavaScript w dokumencie HTML:

b) zewnętrznie – kod w języku JavaScript zapisujemy w oddzielnym pliku z

ZAWARTOŚĆ PLIKU script.js

ZAWARTOŚĆ PLIKU index.html

2. Lista najważniejszych zdarzeń elementów DOM (Document Object Model –

3. Pobieranie danych z pól różnego typu.

HTML: <input type="text" name="kolor" id="kolor" onBlur="koloruj()">

 pobieranie wartości z pola input type="number":

HTML: <input type="wiek" name="kolor" id="wiek"

 pobieranie wartości z pola input type="radio":

HTML: <input type="radio" name="plec" id="m" value="mezczyzna"

 pobieranie wartości z pola input type="checkbox":

HTML: <input type="checkbox" name="pytanie" id="pytanie"

 pobieranie wartości z listy rozwijanej select:

HTML: <select name="lista" id="lista" onInput="skrypt()">

 pobieranie wartości z pola tekstowego textarea:

HTML: <textarea name="txta" id="txta" cols="30" rows="10"

 pobierania wartości z elementu listy li:

 pobieranie zawartości z paragrafu p:

HTML: <p onClick="funkcja()">Lorem ipsum dolor sit amet consectetur

 pobieranie źródła zdjęcia ze znacznika img:

HTML: <img onClick="atrybuty(‘zdj’)" src="pies1.jpg" alt="zdjęcie

 Zmiana koloru tła:

 Zmiana rozmiaru czcionki:

<p id="id1">tekst</p> (HTML)

 Zmiana stylu czcionki:

 Zmiana rodziny czcionki:

 Zmiana typu punktorów listy:

 document.getElementById(‘id’) – pobieranie elementu poprzez podanie id,

6. Ciekawostki dotyczące querySelectora.

You might also like