... Programare Multimedia ...

Cap 4. Limbaje Client Side Script.

Aplicatiile de tip Client Side Script se refera in general la acele programe Web care ruleaza pe client (browser), dupa sau in timpul incarcarii pagini Web de catrea acesta. Limbajele de programare Client Side Script sunt acele limbaje care permit scrierea unor astfel de aplicatii. Aceste limbaje fie sunt  integrate in limbajul HTML si suportate direct de catre browser (ex. JavaScript), fie necesita un plug-in extern (ex. ActionScript - Flash). In afara de utilizarea de limbaje de tip script, pentru implementarea aplicatiilor Client Side se pot utiliza si limbaje de programare (ex. Java prin Java Applet). Acest capitol se va concentra pe doua limbaje foarte raspandite si anume JavaScript si ActionScript.

4.1. Limbajul JavaScript

Limbajul JavaScipt (sau ECMAScript) este un limbaj de tip script suportat de browserele Web care poate fi integrat direct intr-o pagina HTML. Fata de alte limbaje el are cateva avantaje importante, cum ar fi:

  • nu necesata instalarea unor aplicatii suplimentare pentru a rula.
  • este simplu de invatat (sintaxa este asemenatoare cu cea a limbajelor C si Java)
  • permite implementarea unor aplicatii complexe intr-o maniera simpla
  • din el se poat accesa si contorla direct toate elementele unei pagini HTML (text, imagini, formulare, frame-uri etc)
  • sprijina validarea datelor din formularele HTML
  • permite programarea bazata pe evenimente 
 

Cea mai importanta facilitate oferita de JavaScript este aceea de a adauga dinamism si interactivitate in paginile Web clasice. Un exemplu elocvent este oferit de Dave Tau in pagina de prezentare a cartii JavaScript 3nd Ed.: 

js ex1

Elemente de limbaj JavaScript

Limbajul JavaScript este case sensitive. Declaratiile vor fi (optional) despartite de ";". La fel ca si in limbajul C secventele de cod pot forma instructiuni compuse daca sunt plasate intre acolade. Pentru comentarii poate fi utilizata sintaxa Java pentru comentarii pe o singura linie (//) sau pe mai multe linii (/*...*/). Pentru a include o secventa JavaScript intr-o pagina HTML se va folosi tagul (>>> Ex 4.1 <<<):
<script type = "text/javascript">
// cod JavaScript
</script>
Desi majoritatea browserelor accepta si forma mai veche (<script language = "JavaScript">) nu se recomanda folosirea acesteia.

Plasarea codului in pagina se poate face functie de momentul in care dorim ca acesta sa ruleze. In sectiunea <head> se vor scrie functiile apelabile la nevoie si cele declansate de evenimente. Codul scris in sectiunea <body> se va executa in timpul incarcarii paginii in browser. Pot exista oricate sectiuni de cod JavaScript atat in <head> cat si in <body>. Pentru secvente lungi de cod sau pentru cod reutilizabil se poate folosi includerea unui fisier JavaScript extern:
<script type="text/javascript" src="fisierCod.js">
</script>

Variabile: variabilele JavaScript sunt case sensitive. Varibilele nu au asociat un tip de date de la declarare ci pot sa-si schimbe tipul functie de valoarea stocata. Numele poate incepe cu o litera sau cu caracterul "_". Pentru declararea unor variabile se va folosi constructia var.
Ex: var  x=2, y;

Operatori:

Operator
matematic		 Descriere Examplu Rezultat
+ adunare x=y+2 x=7
- scadere x=y-2 x=3
* multiplicare x=y*2 x=10
/ impartire x=y/2 x=2.5
% modul (rest) x=y%2 x=1
++ incrementare x=++y x=6
-- decrementare x=--y x=4

Oparatorii de asignare (=, +=, -=, *=, /=, %=).
Operatorul de concatenare siruri (+). Daca se concateneaza un sir cu un numar rezulta un sir.

Operator
logic		 Descriere Examplu
== egal ca valoare x==8 fals
=== egal si ca tip x===5 adevarat
x==="5" fals
!= diferit x!=8 adevarat
> mai mare x>8 fals
< mai mic  x<8 adevarat
>= mai mare sau egal x>=8 fals
<= mai mic sau egal  x<=8 adevarat


Operatorii logici (&&, ||, !).
Operatorul conditional (var=condition?val1:val2).

Instructiuni

  1. instructiunea if
    if (conditie)  {
      cod executat pentru conditie adevarata
    }
    else {
      cod executat pentru conditie falsa
    }
     (>>> Ex 4.2 <<<):
    <script type="text/javascript">
    var d = new Date();
    var time = d.getHours();
    if (time < 10) {
    document.write("Buna Dimineata!");
      }
    else
      {
      document.write("Buna Ziua!");
      }
    </script>
  2. Instructiunea switch 
    switch(n)
    {
    case 1:
      cod executat daca n==1
      break;
    case 2:
      cod executat daca n==2
      break;
    default:
      cod executat daca n!=1 si n!=2
    }
    Ex:
    <script type="text/javascript">
    var d=new Date();
    theDay=d.getDay();
    switch (theDay)
    {
    case 0:
      document.write("duminica");
      break;
    case 1:
      document.write("luni");
    ...
    case 6:
      document.write("sambata");
    default:
      document.write("zi gresita!");
    }
    </script>
  3. Instructiunea for
    for (var=start;var<=end;var=var+pas)
    {
       cod de executat
    }
    Ex:
    <script type="text/javascript">
    var n=1,i;
    document.write("<h2>n factorial </h2><br>");
    for(i=1;i<=10;i++) {
      n=n*i;
      document.write(i"! = "+n+"<br>");
    }
    </script>
  4. Instructiunea while/do while
    while (var<=endval)
    {
      code de executat
    }
    do
    {
      code de executat
    }
    while (var<=endval);
    Ex:
    <script type="text/javascript">
    var n=1, i=1;
    document.write("<h2>numere impare </h2><br>");
    while(i<=10) {
      document.write(n,", ");
      n+=2;
    }
    </script>
  5. Instructiunea for in
    for (variable in object)
    {
      code de executat
    }

Ferestre de avertizare

  1. Alert box
    alert("mesaj");
  2. Confirm box
    confirm("mesaj");
  3. Prompt box (>>> ex4_3 <<<)
    prompt("mesaj","valoare implicita");

Functii

Functiile sunt secvente de cod care se executa fie prin apelarea explicita fie prin legarea de un eveniment. De obicei functiile sunt plasate in sectiunea <head>.
Functiile au un nume, o lista de parametrii de apel si un bloc de cod. Daca codul functiei calculeaza o valoare atunci aceasta poate fi returnata prin aplelul return val;.

function numeFunctie(var1,var2,...,varN)
{
  codul functiei
}

Pentru mai multe informatii consultati tutorialul de la w3Schools.

Evenimente

Evenimentele sunt actiuni care sunt detectate de catre browser si pot declansa executia unor functii.
Evenimentele captate de JavaScript: onLoad, onUnload, onFocus, onBlur, onChange, onSubmit, onMouseOver, onMouseOut.
Ex:
function verificSuma() {
  if(document.getElementById("suma").value<0) {
       alert("Suma nu poate fi negativa!");
       document.getElementById("suma").value=0;
  }
}
...
<input type="text" size="30" id="suma" onchange="verificSuma()">

O lista cu evenimentele specifice entitatilor javascript se gaseste la Elated.

Mecanisme de tratarea a erorilor

Pentru tratarea erorilor se pot folosi contructiile try..cartch pentru captarea lor, respectiv throw pentru generarea lor. Mai multe informatii gasiti la w3Schools - tratarea erorilor.

Obiecte JavaScript

JavaScript este un limbaj orientat pe obiecte. Obiectele au proprietati si metode. Pentru crearea obiectelor se va folosi operatorul new. Proprietatile obiectului pot fi create dinamic prin atribuirea unor valori:
p=new Object();
p.nume = "Ion";
p.varsta = 25;
Mai multe informatii gasiti la w3Schools - obiecte JS.

4.2. Modelul DOM

(sursa: Wikymedia)

Exemplu de DOM:


Fiecare obiect definit de modelul DOM are o serie de proprietati si metode prin care poate fi controlat:

  • window - proprietati: screen.height, screen.width, metode: addEventListener(eventType, listener, useCapture)/IE:attachEvent(eventType, function), resizeBy(dx, dy), resizeTo(x y), scrollByLines(lines), sizeToContent()
  • document - proprietati: ownerDocument, title, URL, metode: createAttribute("attrname"), createDocumentFragment(), createElement(tagName), createTextNode(text), getElementById(id), getElementsByName(name), getElementsByTagName(tagname)
  • dom element - proprietati: attributes[], childNodes[], className, id, innerHTML, nodeType, nodeValue, parentNode, style, metode: appendChild(node), blur(), focus(), getAttribute(attrname), hasChildNodes(), removeAttribute(attrname), removeChild(child)
  • dom table - proprietati: bgColor, border, caption, cells[], width, metode: createCaption(), InsertRow(index), moveRow(fromIndex, toIndex)

Mai multe informatii la JavaScript Kit.

4.3. Action Script


ActionScript este un limbaj asemanator cu JavaScript, folosit în principal pentru dezvoltarea de functionalitati în cadrul animatiilor Adobe Flash prin generarea fisierelor cu extensia .swf ce ruleaza în Adobe Flash Player. A fost dezvoltat initial de compania Macromedia, iar acum apartine Adobe, care a achizitionat Macromedia în 2005. Limbajul de programare are la baza standardul ECMA. El a fost creat pentru desenarea si controlarea animatiilor vectoriale 2D dar de-a lungul vremii s-a dezvoltat pentru a realiza aplicatii WEB complexe sau chiar jocuri. ActionScript este case-sensitive.(wikipedia). Versiunea actuala: Actionscript 3.0.

Tipuri de date: Boolean, Int, Uint, Object, Number, String, Null, Void.

Variabile:
  var a:int = 10, b:int = 20;
  var numArray:Array = ["zero", "one", "two"];

Constante predefinite: null, undefined, true, false.
Declararea constantelor: const MIN:int = 0; 

Obiecte:
declarare: var someObj:Object;
instantiere: var myBirthday:Date = new Date();
var someArray:Array = new Array(1,2,3);

Clase dinamice:
dynamic class Persoana
{
    private var adresa:String;
    public var nume:String = "Ion";
    function Persoana()
    {
        this.adresa="nu are";
    }
}
var pers:Persoana = new Persoana();
pers.inaltime = 180;

Instructiuni conditionale: if..then..else, switch la fel ca si la JavaScript

Instructiuni ciclice:
- for
var i:int;
for (i=0; i<5; i++) { trace(i); }
- for..in
var myObj:Object = {x:20, y:30};
for (var i:String in myObj)
{
    trace(i + ": " + myObj[i]);
}
// output: x: 20   y: 30
- for each..in
var myObj:Object = {x:20, y:30};
for each (var num in myObj)
{
    trace(num);
}
// output: 20   30
- while
var i:int = 0;
while (i < 5)
{
    trace(i);
    i++;
}
- do while
var i:int = 5;
do
{
    trace(i);
    i++;
} while (i < 5);
// output: 5

Pentru mai multe informatii accesati tutorialul de Flash de la WebDevelopers.