Scribd
Upload
46 views7 pages

JavaScript Dokument

JavaScript

Uploaded by

Piotr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views7 pages

JavaScript Dokument

JavaScript

Uploaded by

Piotr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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;
- pobieranie wartości i przykładowa obsługa:

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;
- pobieranie wartości i przykładowa obsługa:

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’)">
<output id="out"></output>

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;
- pobieranie wartości i przykładowa obsługa:

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;
- pobieranie wartości i przykładowa obsługa:

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;
- pobieranie wartości i przykładowa obsługa:

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;
- pobieranie wartości i przykładowa obsługa:

HTML: <ul>
<li class="item" onClick="komunikat(0)">uczen1</li>
<li class="item" onClick="komunikat(1)">uczen2</li>
<li class="item" onClick="komunikat(2)">uczen3</li>
<li class="item" onClick="komunikat(3)">uczen4</li>
<li class="item" onClick="komunikat(4)">uczen5</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;
- pobieranie wartości i przykładowa obsługa:

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;
- pobieranie wartości i przykładowa obsługa:

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’)">
<output id="out"></output>

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
elementu o podanym id;
 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
elementu o podanym id;
JavaScript
 document.getElementById(‘id’).style.color – odnoszenie się do koloru
elementu o podanym id;
 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]

You might also like