Transcript JavaScript
Web aplikāciju tehnoloģijas
1.
Klienta puses tīmekļa programmēšanas valoda
Pilna integrācija ar pārlūkprogrammu
Viegli realizēt vienkāršus uzdevumus
Strādā gandrīz visur
Java (desktop)
Flash (multimedija) - ActionScript
JavaFX – “klienta puses Java”
Silverlight – “Microsfot Flash”
XUL – saskarnes konstruēšanas valoda
2.
<html>
<head>
<title>Vienkāršs skripts</title>
</head>
<body> <h1>Skaitītājs</h1> <script
type="text/javascript"> for(var i=1;
i<=3; i++) { alert(“Iterācijas
numurs: "+i+".") }
</script> <h1>...viss</h1>
</body></html>
<html> <head> <script
type="text/javascript"> function
count_it() { for(var i=1; i<=3;
i++) { alert(“Iterācijas numurs:
"+i+" .") } } </script> </head>
<body> <input type="button"
onclick="count_it()"
value=“Skaitītājs!"/> </body>
</html>
<script type=...> - ok
<script language=...> -
Komentāri (<!-- -->) -
onclick
onmouseover
onmouseout
u.c.
DOM (Document Object Model)
<html>
<head>
<title> Virsraksts </title>
</head>
<body> Ķermeņa teksts
<ol>
<li> Punkts nr. 1 </li>
<li> Punkts nr. 1 </li>
</ol>
</body>
</html>
html
head
title
body
Ķermeņa
teksts
ol
Virsraksts
li
Punkts nr.
1
li
Punkts nr.
2
var ol = document.getElementsByTagName('ol')[0]
var punkt1 = ol.removeChild(ol.firstChild)
var punkt2 = ol.removeChild(ol.firstChild)
ol.appendChild(punkt2)
ol.appendChild(punkt1)
document.write -
Pārlūkprogrammas elementi:
Logi
cookies
u.c.
AJAX
ECMAScript – formālais valodas sintakses un
darbības apraksts
ECMA-262 (1997.gads)
JavaScript
JScript
ActionScript
; - nav obligāta
Alert(1)
Alert(1);
Var a = ‘ gara ’ +
‘ rinda ’
Return
result; // - undefined
Var a = ‘ gara ’ + \
‘ rinda ’
Return \
result; // - ok
var – lokālas mainīgas
a = 1 // tas būs window.a ekvivalēnts
function go()
{
var a = 6
}
go()
alert(a)
// => 1
3.
Firefox + Firebug
SciTe
http://www.activestate.com/products/komod
o_ide/
http://labs.adobe.com/technologies/jseclipse/
<html> <head> <script> function
divide(number) { var result = number / divisor
alert(number+"/"+divisor+" = "+result) }
</script> </head> <body> <h1>Palaišanas
poga</h1> <!-- klikšķis uz pogas izsauks
divide(6) --> <input type="button"
value=“Palaist" onclick="divide(6)"/> </body>
</html>
4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Dokuments</title>
</head> <body> <div
id="dataKeeper">Data</div> <ul> <li
style="background-color:red">Uzmanīgi</li>
<li class="info">Informācija</li> </ul> <div
id="footer">Made in RA ©</div>
</body> </html>
elem.nodeType
Node.ELEMENT_NODE = 1 (HTML)
Node.TEXT_NODE = 3 (text)
document.documentElement (html tags)
document.body - <body>
childNodes
for(var i=0;
i<document.body.childNodes.length; i++) { if
(document.body.childNodes[i].tagName ==
'UL') { break; } }
firstChild, lastChilds
parentNode
previousSibling, nextSibling
tagName – taga nosaukums
style – stils
innerHTML – HTML kods elementā
className – CSS klase
onclick, onkeypress, onfocus,...
setAttribute(name, value)
getAttribute(name)
hasAttribute(name)
removeAttribute(name)
4.1.
document.getElementById(id)
document.getElementById('dataKeeper').style.
color = 'blue'
document.getElementsByTagName(tag)
document.getElementsByTagName('LI')[1]
document.getElementsByTagName('DIV')[0].getElem
entsByTagName('LI')
<div id="d1“>
<ol id="ol1“>
<li id="li1">1</li>
<li id="li2">2</li>
</ol>
</div>
var div = document.getElementById('d1‘)
var elems = div.getElementsByTagName('*‘)
for(var i=0; i<elems.length; i++) alert(elems[i].id)
document.getElementsByName(name)
name – form, input, a, select, textarea
function removeChildren(node)
{
var children = node.childNodes
for(var i=0;i<children.length; i++)
{
var child = children[i]
node.removeChild(child)
}
}
5.
DOM-notikumi (click)
Loga notikumi (resize)
Citi notikumu (load, readystatechange)
on+[notikuma nosaukums]
<input id="b1" value=“Press me"
onclick="alert(‘Thank you!');" type="button"/>
document.getElementById('myElement').onclic
k = function() { alert(‘Thank you') }
<input id="myElement" type="button"
value=“Press me"/>
function doSomething() { alert(‘Thank you');
} document.getElementById('button').onclick =
doSomething;
var myElement2 = document.getElementById("myElement2");
var handler = function() { alert('Спасибо!');}
var handler2 = function() { alert('Еще раз спасибо!'); }
myElement2.attachEvent("onclick", handler);
myElement2.attachEvent("onclick", handler2);
element.addEventListener( notikuma_nosaukums, apstrādātājs, fāze)
element.removeEventListener(notikuma_nosaukums, apstrādātājs, fāze)
<div class="d1" >
1
<div class="d2">
2
<div class="d3">
3
</div>
</div>
</div>
mousedown
mouseup
click
dblclick
contextmenu
if (event.which == null) /* IE case */ button=
(event.button < 2) ? "LEFT" : ((event.button
== 4) ? "MIDDLE" : "RIGHT"); else /* All others
*/ button= (event.which < 2) ? "LEFT" :
((event.which == 2) ? "MIDDLE" : "RIGHT");