Embed Size (px)
Citation preview
Osnove Javascript
Vegova Ljubljana
Zgradba spletne strani
• Gradniki spletne strani (besedilo, url, slike …)
• HTML – struktura spletne strani
• CSS – oblikovanje spletne strani
• Javascript – programiranje spletne strani
Gradniki
• besedilo
• URL - povezave
• Slike
– Jpg
– Png
– Gif
HTML
<!DOCTYPE html>
<html>
<head><title>Naslov strani</title>
</head>
<body>
Telo spletne strani
</body>
</html>
Pomembni HTML ukazi
• Bločni stavek <div>
• Odstavek <p>
• Obrazec <form>
– <input type="">
• text
• button
• …
– <select> in <option>
CSS - oblikovanje
• Povezava s HTML– Znotraj značke
• <p style="color:red";>
– V glavi dokumenta <head>• <style type="text/css">• p {• color:red;• }• </style>
– V zunanji datoteki• <link type="text/css" href="css/stil.css" rel="stylesheet"
title="default" />
CSS v zunanji datoteki
• V glavo se doda stavek, ki pove lokacijo css datoteke.
• <link type="text/css" href="css/stil.css" rel="stylesheet" title="default" />
• V CSS navedemo, kako se prikažejo html značke z določenimi lastnostmi
• p {
• color:red;
• }
Uporaba lastnosti id
• id je vedno enoličen
– dve znački ne moreta imeti isti id.
• HTML: <p id="ime">
• CSS: #id { color:red; }
Uporaba lastnosti class
• class pa pomeni razred
• Več značk je lahko istega razreda (id je vedno enoličen)
• HTML: <p class="razred">
• CSS: .razred { color:red; }
Pomembne CSS lastnosti
• Pisave:
– color (red, #ff0000, rgb(255,0,0)
– font-family (Arial, Serif, Verdana, Times New Roman)
– text-align (left, right, center)
– background-color, background--image (url('../img/bg.gif'))
– width, heigth, margin (50 px)
– border ( solid 1pt green)
– padding (2px)
Javascript
• za programiranje v spletnih straneh
• Sintaksa vejitev in zank je podobna C, C++, C#, Java
• Različne so spremenljivke, ki lahko spremenijo tip spremenljivke
Programiranje Javascript
• Znotraj programa
– <input type="button" value="Ugibaj" onclick="alert('Dober dan')"/>
• V glavi
• V zunanji datoteki (.js)
Javascript v glavi HTML
• <script type="text/javascript">
• function f(){
• alert("Dober dan");
• </script>
• Klic javascript iz HTML-ja
• <input type="button" value="Ugibaj" onclick="f()"/>
Javascript v zunanji datoteki (.js)
• <script type="text/javascript" src="js/program.js"></script>
• Klici funkcij enak kot prej
Spremenljivke
• var x=0;
• x="qwe qwe";
• x=new Date();
• x=x.toLocaleString();
Operacije nad spremenljivkami
• Matematika nad števili:+,-,*,/,% (ostanek po deljenju)
• Math.floor(4.2) – zaokroževanje navzdol
• x=parseInt("1234"); x je 1234
• X=3+3; X je 6
• X=3+3+"3"; X je "63"
• X="12345".length; X je 5
Operatorji primerjanja
• == enak?• != različen• > večji• >= večji ali enak• < manjši• <= manjši ali enak
• && and (in)• || or (ali)
Vejitev in zanke stavki
• Stavki se zaključijo s ;
• if (pogoj) { stavki;}
• if (pogoj) { stavki1; } else { stavki2; }
• for (var i=0;i<100;i++) { stavki; }
Vhodno/izhodni ukazi
• alert("1");
• document.write("1");
• if (confirm("Brez vprašanja?")) {
}
• var odgovor=prompt("Kako ti je ime?","");
• var el=document.getElementById(id);
• el = document.getElementById(id);el.innerHTML+= vrstica+"<br/>";
Funkcije
function imeFunkcije (par1,par2) {
stavki;
}
Primer klica v HTML:
onclick="imeFunkcije(1,3);"
Naloga 1
• Naredi javascript program, ki te pozdravi
– alert()
– document.write()
– el.innerHTML;
Pozdrav z alert
<!DOCTYPE html>
<html>
<head><title>Pozdrav</title>
</head>
<body>
alert("Dober dan");
</body>
</html>
Naloge 2
• Naredi javascript program, ki te pozdravi (alert) z imenom, ki ga vpišeš
– Prompt
– preko input tekstnega polja
Pozdrav z imenom
<!DOCTYPE html> <html> <head><title>Pozdrav</title><script type="text/javascript">function beri() {var el=document.getElementById('ime');alert("Pozdravljen, "+el.value);
}</script></head> <body><input type="text" id="ime"><input type="button" value="Vpisi ime" onclick="beri()"></body> </html>
Naloga 3
• Primerjanje dveh vpisanih števil (input)
– Večja, manjša ali enaka (alert)
– Izdelava semaforja (innerHTML)
Primerjava HTML
<!DOCTYPE html>
<html>
<head><title>Pozdrav</title>
</head>
<body>
<input type="text" id="stev1">
<input type="text" id="stev2">
<input type="button" value="Primerjaj" onclick="beri()">
</body>
</html>
Javascript
<script type="text/javascript">
function beri() {
var el=document.getElementById('stev1'); stev1=parseInt(el.value);
var el=document.getElementById('stev2'); stev2=parseInt(el.value);
if (stev1==stev2)
alert("Enaki stevili ");
else if (stev1>stev2)
alert("Prvo stevilo je vecje ");
else alert("Drugo stevilo je vecje ");
}
</script>
Dodan semafor
Dodano v HTML:
• <div id="rez" style="margin-left:500px; position:fixed; top:0px; border: solid 2px red; background-color:yellow; width:200px;">
• </div>
Dodano v Javascript
• el=document.getElementById('rez');
• el.innerHTML += "<br>"+stev1+":"+stev2;
Uporaba CSS v Javascriptu
• Uporaba bločnega stavka - div
• Uporaba class (namesto id) pri vnosu
• .innerHTML += "<h1 class='q1'>beseda</h1>“
• Novi css stili:<style type="text/css">
.levi { text-align:left; color:red; }
.desni { text-align:right; color:blue; }
.center { text-align:center; color:green; }
</style>
Izdelava programa za iskanje števila
• Ukaz Math.random() za naključno generiranje števila
