|
1. Javascript: Pisanje u HTML izlaz
|
2. JavaScript: Reagovanje na događaj(Event)
|
|
<!DOCTYPE
html> <html> <body> <p> Javascript može direkno pisati u HTML izlaz: </p> <script> document.write("<h1>Ovo je heading</h1>"); document.write("<p>Ovo je paragraph.</p>"); </script> </body> </html> |
<!DOCTYPE html> <html> <body> <h1>Moj prvi JavaScript</h1> <p> Javascript može reagovati na događaje(events). Kao što je kliktanje na dugme. </p> <button type="button" onclick="alert('Dobrodošli!')">Kliki me!</button> </body> </html> |
|
Možeš samo koristiti document.write u HTML izlazu. Ako ga koristiš nakon što je dokument učitan, cijeli document biće preljepljen. | Alert() funkcija se ne
koristi puno u Javasciptu, ali je odlična za testiranje koda. Onclick event je jedan od mnogih HTML eventa koje ćeš tek upoznati. |
|
3. JavaScript: Pormjena HTML sadržaja
|
4. JavaScript: Promjena HTML slika
|
|
Veoma bitna funksionalnost Javascripta je manipulisanje sadržaja HTML elemenata. |
||
<!DOCTYPE html> <html> <body> <h1>Moj prvi JavaScript</h1> <p id="demo"> Javascript može promjeniti sadržaj HTML elementa. </p> <script> function myFunction() { x=document.getElementById("demo"); // Nađi element x.innerHTML="Zdravo JavaScript!"; // Promjeni sadržaj } </script> <button type="button" onclick="myFunction()">Klikni me</button> </body> </html> |
<!DOCTYPE html> <html> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="images/pic_bulboff.gif"; } else { element.src="images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="images/pic_bulboff.gif" width="100" height="180"> <p>Klikni sijalicu da je uključiš/isključiš.</p> </body> </html> |
|
Često ćeš vidjeti document.getElementByID("neki id"). Ovom naredbom se pristupa odgovarajućem HTML elementu. |
Javascript može promjeniti većinu atributa bilo kojeg HTML elementa, ne samo slika. |
|
5. JavaScript:Promjena HTML stilova |
6. JavaScript: Validacija unosa
|
|
Javascript se redovno koristi za validaciju unosa. | ||
<!DOCTYPE html> <html> <body> <h1>Moj prvi JavaScript</h1> <p id="demo"> Javascript može promjeniti stil svakog HTML elementa. </p> <script> function myFunction() { x=document.getElementById("demo") // Nađi element x.style.color="#ff0000"; // Promjeni stil } </script> <button type="button" onclick="myFunction()">Klikni me!</button> </body> </html> |
<!DOCTYPE html> <html> <body> <h1>Moj prvi JavaScript</h1> <p>Unesi broj. (Probaj i sa slovom)</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("Nije broj"); }else { alert("Unijeli ste broj.") } } </script> <button type="button" onclick="myFunction()">Klikni me!</button> </body> </html> |
|