JavaScript

Dr. Sabin Buraga www.purl.org/net/busaco @busaco

Cu cat cunosti mai bine, cu atat iubesti mai mult.

Leonardo da Vinci

inventat de Brendan Eich (1995)

denumit initial LiveScript

implementat in Netscape Navigator

adaptat de Microsoft: JScript (1996)

standardizat in 1997 de ECMA

European Computer Manufacturers Association

www.ecma-international.org

limbaj de tip script (interpretat)

limbaj de tip script (interpretat)

destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite de un anumit sistem

limbaj de tip script (interpretat)

nu necesita intrari/iesiri in mod implicit

Cum putem executa programele JavaScript?

mediu de executie (host-environment):

navigator Web
injectarea de cod JavaScript in documentele (X)HTML via <script>

mediu de executie (host-environment):

platforma de dezvoltare a aplicatiilor

e.g., Adobe Flex/AIR

mediu de executie (host-environment):

aplicatie de sine-statatoare
Adobe Creative Suite, UltraEdit etc.

mediu de executie (host-environment):

procesor (engine) independent

e.g., Yahoo! Widget Engine

mediu de executie (host-environment):

componente ale sistemului de operare

Dashboard Mac OS X Sidebar Windows Vista/7

cuvinte rezervate: break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof

alte cuvinte rezervate:

abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public

tipuri de date:

Number
dubla precizie, stocare pe 64 biti

String
secvente de caractere Unicode, 16 biti

Boolean
secvente ce se pot evalua ca true/false

Object
Function, Array, Date, RegExp

Null
semnifica nici o valoare

Undefined
nici o valoare asignata inca

valoarea NaN not a number

parseInt ("Salut")NaN
isNaN (NaN + 33)true

valori speciale:
Infinity Infinity

un caracter reprezinta un sir de lungime 1 sirurile sunt obiecte

"Salut".length5

valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false

variabile sunt declarate cu var

var marime; var numeAnimal = "Tux";

variabilele declarate fara valori asignate, se considera undefined

daca nu se foloseste var, atunci variabila este considerata globala de evitat asa ceva!

conversia tipurilor se face din zbor

"3" + 4 + 5345 3 + 4 + "5"75

pentru a afla tipul unei expresii, se foloseste typeof typeof "Tux"string

instructiuni de control
testare: if ... else, switch

instructiuni de control
ciclare: while, do ... while, for

instructiuni de control
exceptii: try ... catch ... finally

emiterea unei exceptii: throw

obiecte
perechi numevaloare

tabele de dispersie (hash) in C/C++ tablouri asociative in Perl, PHP, Ruby HashMaps in Java

obiecte
perechi numevaloare

numele este desemnat de un sir de caractere valoarea poate fi de orice tip

obiecte
colectii de proprietati, avand mai multe atribute
proprietatile pot contine alte obiecte, valori primitive sau metode

obiecte
in JavaScript, se predefinesc obiectele
Global Object Function Array String Boolean Number Math Date

obiecte
create prin intermediul lui new

var obiect = new Object();

var obiect = {}; // echivalent cu linia anterioara

obiecte
accesarea proprietatilor

obiect.nume = "Tux"; var nume = obiect.nume;

obiecte
accesarea proprietatilor

obiect.nume = "Tux"; var nume = obiect.nume; echivalent:

obiect["nume"] = "Tux"; var nume = obiect["nume"];

obiecte
declarare + asociere de valori
var pingu = { nume: "Tux", proprietati: { culoare: "oranj", marime: 17 } }

tablouri
sunt tipuri speciale de obiecte

proprietatile sunt numere, nu siruri de caractere

tablouri
var zoo = new Array (); zoo[0] = "pinguin"; zoo[1] = "omida"; zoo[2] = "urs"; zoo.length3

tablouri
var zoo = new Array (); zoo[0] = "pinguin"; zoo[1] = "omida"; zoo[2] = "urs"; zoo.length3 notatie alternativa: var zoo = ["pinguin", "omida", "urs"];

tablouri
iterari: for (var iter = 0; iter < zoo.length; iter++) { // de prelucrat zoo[iter] }

for (var iter = 0, lung = zoo.length; iter < lung; iter++) { // varianta mai buna // de prelucrat zoo[iter] de ce? }

tablouri
elementele pot apartine unor tipuri de date eterogene

var zoo = [16, "musca", true, "gaga"];

functii
obiecte definite prin function

function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; }

functii
argumentele primite de o functie se acceseaza via tabloul arguments

functii
pot fi specificate functii anonime
expresii lambda

functii
pot fi specificate functii anonime
expresii lambda

in acest sens, JavaScript este un limbaj functional

var media = function () { // calculul mediei var suma = 0; for (var iter = 0, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; }

putem incapsula functiile in clase?

de la functii la clase:
function Animal (nume, marime) { this.nume = nume; this.marime = marime; this.oferaNume = function () { return this.nume; }; this.oferaMarime = function () { return this.marime; }; }

// date-membre // metoda

// metoda

instantierea unui obiect:

var tux = new Animal ("Tux", 17);

operatorul new creaza un nou obiect vid si apeleaza functia specificata cu this setat pe acest obiect

aceste functii se numesc constructori, trebuie apelate via new si, prin conventie, au numele scris cu litera mare

structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype

function Animal (nume, marime) { // definitie initiala this.nume = nume; this.marime = marime; } Animal.prototype.oferaNume = function () { return this.nume; } Animal.prototype.oferaMarime = function () { return this.marime; }

pentru a cunoaste tipul unui obiect pe baza constructorului si a ierarhiei de prototipuri se foloseste operatorul instanceof

var marimi = [17, 20, 7, 14];

marimi instanceof Arraytrue marimi instanceof Objecttrue marimi instanceof Stringfalse

extinderea claselor
adaugarea unei metode se realizeaza via prototype

Animal.prototype.oferaNumeMare = function () { return this.nume.toUpperCase (); }

tux.oferaNumeMare ()"TUX"

in JavaScript, totul e considerat ca fiind obiect chiar si functiile

orice obiect e intotdeauna mutabil (poate fi alterat oricind)

operatorul . este echivalent cu de-referentierea: obiect.prop === obiect["prop"]

functiile ascund orice este definit in interiorul lor

accesorul this este relativ la contextul executiei, nu al declararii

rularea in browser
programele JavaScript au acces la diverse obiecte oferite de navigatorul Web

rularea in browser
de pilda, poate fi accesat obiectul global window

<script type="application/javascript"> var nav = window.navigator.userAgent; // date privitoare la browser </script>

graceful degradation & progresive enhancement

conceperea stratificata a aplicatiilor JavaScript

graceful degradation & progresive enhancement

initial: interactiune minimala, fara JavaScript adaugarea progresiva a facilitatilor, in functie de context

graceful degradation & progresive enhancement

inaintea folosirii oricarei tehnici dorite, de testat suportul oferit de navigator: JavaScript, cookie-uri, clase/metode DOM, Ajax,

JSON JavaScript Object Notation

format compact pentru interschimb de date intre aplicatii

JSON JavaScript Object Notation

folosit la serializarea datelor in contextul Web uzual, transfer (a)sincron de date intre servicii Web si aplicatii (clienti)

JSON JavaScript Object Notation

defineste datele in termeni de obiecte & literali

json.org

{
'nume' : 'Tux', 'stoc' : 33, 'gen' : ['candid', 'furios', 'vesel'] }
datele pot fi evaluate direct in JavaScript

instrumente
medii de dezvoltare Aptana Studio depanare Firebug (Lite) Visual Studio Developer 2010

instrumente
testare (inginerie software) JSLint, JsUnit, jsTrace, Selenium

instrumente
alte extensii/utilitare folositoare GreaseMonkey, Ubiquity, Y! Slow SpiderMonkey Rhino JavaScript Shell

biblioteci
Dojo: dojotoolkit.org jQuery: jquery.com Prototype: prototypejs.org Rico: openrico.org Script.aculo.us: script.aculo.us YUI: developer.yahoo.net/yui/ si multe altele

jQuery
scop principal: manipularea documentului HTML pe baza selectorilor CSS nivelul 3
ofera un API concis, usor de folosit, disponibil open source

http://jquery.com/ http://visualjquery.com/

jQuery
focalizarea asupra interactiunii dintre codul JavaScript si constructiile (X)HTML

jQuery
aproape orice operatie urmeaza regula:
gaseste ceva + executa ceva cu ceea ce-ai gasit

jQuery
accesul la nodurile documentului HTML se realizeaza via functia jQuery() notatie prescurtata: $()

// liniile de tabel de pe pozitii pare vor fi redate // via proprietatile CSS din clasa fundal-gri $("table tr:nth-child(even)").addClass("fundal-gri"); obiect jQuery selector CSS

metoda
(functionalitate)

jQuery
selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS

http://docs.jquery.com/Selectors

jQuery
selectori magici:
privitori la pozitie :first :last vizibilitate :hidden :visible referitori la animatie :animated

vizand formularele Web :input :text :password :radio :submit desemnand cu anumit continut :contains (...)

jQuery
selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS $('div.info') toate elementele <div class="info"> $('div#adresa') elementul <div id="adresa"> $('div h1') in contextul: <div> care include <h1> $('div#menu > p') in contextul: <div id="menu"> cu descendentii <p>

unele rezultate ale $() pot intoarce colectii de noduri, prelucrate prin: $('div.info').size () marimea colectiei obtinute
$('div.info').each (function(div) { ... }) iterator $('div.info').html ('<em>Salut</em>') inserare de cod HTML

unele rezultate ale $() pot intoarce colectii de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut
$('a.menu').addClass ('vizitat') adaugarea unei clase CSS $('p:odd').css ('color: blue') modificare de proprietati CSS

suportul pentru transferuri asincrone Ajax: $('div#stiri').load ('stiri.html'); incarcare asincrona $.get (url, parametri, functie-callback); incarcare prin GET $.post (url, parametri, functie-callback); incarcare via POST
$.getJSON (url, parametri, functie-callback); preluare raspuns in format JSON

jQuery
extinderi via plug-in-uri: manipularea formularelor
jquery.com/plugins/project/form

jQuery
extinderi via plug-in-uri: efecte de interfata + facilitarea interactiunii cu utilizatorul (e.g., slider, tabs, resize, drag & drop)
http://ui.jquery.com/

jQuery
extinderi via plug-in-uri: pentru alte detalii, a se consulta http://plugins.jquery.com

JavaScript

resurse
B. Bibeault, Y. Katz, jQuery in Action, Manning, 2008 S. Buraga (coord.), Programarea in Web 2.0, Polirom, 2007 R. Harmes, D. Diaz, Pro JavaScript Design Patterns, Apress, 2008 M. Haverbeke, Eloquent JavaScript, 2007: http://eloquentjavascript.net/

S. Willinson, A (Re)-Introduction to JavaScript, ETech Conference, 2005

resurse
Mozilla Developer Center developer.mozilla.org
Ajaxian www.ajaxian.com Ajax Patterns www.ajaxpatterns.org jQuery http://docs.jquery.com www.learningjquery.com