Sabin Buraga — JavaScript

transcript

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 ECMAEuropean Computer Manufacturers Association

www.ecma-international.org

limbaj de tip script (interpretat)

destinat sa manipuleze, sa automatizezesi sa integreze facilitatile oferite

de un anumit sistem

limbaj de tip script (interpretat)

nu necesita intrari/iesiri in mod implicit

Cum putem executa programeleJavaScript?

mediu de executie(host-environment):

navigator Web

“injectarea” de cod JavaScriptin documentele (X)HTML via <script>

platforma de dezvoltarea aplicatiilor

e.g., Adobe Flex/AIR

aplicatie de sine-statatoare

Adobe Creative Suite, UltraEdit etc.

procesor (engine) independent

e.g., Yahoo! Widget Engine

componenteale sistemului de operare

Dashboard – Mac OS XSidebar – Windows Vista/7

cuvinte rezervate: break else new var case finally returnvoid catch for switch while continuefunction this with default if throwdelete in try do instanceof typeof

alte cuvinte rezervate: abstract enum int short boolean export interface static byte extends long superchar final native synchronized class floatpackage throws const goto private transient

debugger implements protected volatiledouble import public

tipuri de date:

Numberdubla precizie, stocare pe 64 biti

Stringsecvente de caractere Unicode, 16 biti

Booleansecvente ce se pot evalua ca true/false

ObjectFunction, Array, Date, RegExp

Nullsemnifica “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 reprezintaun 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 + 53453 + 4 + "5"75

pentru a afla tipul unei expresii,se foloseste typeof

typeof "Tux"string

instructiuni de control

testare: if ... else, switch

ciclare: while, do ... while, for

exceptii: try ... catch ... finally

emiterea unei exceptii: throw

obiecte

perechi nume—valoare

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

HashMaps in Java

obiecte

perechi nume—valoare

numele este desemnatde 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

GlobalObjectFunctionArrayStringBooleanNumberMathDate

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 apartineunor 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 functiese acceseaza via tabloul arguments

functii

pot fi specificate functii anonime

expresiilambda

functii

pot fi specificate functii anonime

expresiilambda

in acest sens, JavaScript este un limbaj functional

var media = function () { // calculul medieivar 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; // date-membrethis.marime = marime;this.oferaNume = function () { // metoda

return this.nume;};this.oferaMarime = function () { // metoda

return this.marime;};

instantierea unui obiect:

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

operatorul new creaza un nou obiect vid

si apeleaza functia specificatacu 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 initialathis.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 sia ierarhiei de prototipuri –

se foloseste operatorul instanceof

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

marimi instanceof Arraytruemarimi instanceof Objecttruemarimi 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 consideratca 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 obiecteoferite de navigatorul Web

rularea in browser

de pilda, poate fi accesat obiectul global window

</script>

graceful degradation &progresive enhancement

conceperea “stratificata” a aplicatiilor JavaScript

initial: interactiune minimala, fara JavaScript

adaugarea progresiva a facilitatilor,in functie de context

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

folosit la serializarea datelor in contextul Web

uzual, transfer (a)sincron de dateintre servicii Web si aplicatii (clienti)

defineste datele in termeni de obiecte & literali

json.org

{ 'nume' : 'Tux', 'stoc' : 33, 'gen' : ['candid', 'furios', 'vesel']

}datele pot fi

evaluate directin JavaScript

instrumente

medii de dezvoltareAptana Studio

depanareFirebug (Lite)

Visual Studio Developer 2010

instrumente

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

instrumente

alte extensii/utilitare folositoareGreaseMonkey, Ubiquity, Y! Slow

SpiderMonkeyRhino

JavaScript Shell

biblioteci

Dojo: dojotoolkit.orgjQuery: jquery.com

Prototype: prototypejs.orgRico: openrico.org

Script.aculo.us: script.aculo.usYUI: 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 interactiuniidintre 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");

obiectjQuery

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 :lastvizibilitate – :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

efecte de interfata +facilitarea interactiunii cu utilizatorul(e.g., slider, tabs, resize, drag & drop)

http://ui.jquery.com/

jQuery

pentru alte detalii, a se consultahttp://plugins.jquery.com

JavaScript

resurse

B. Bibeault, Y. Katz, jQuery in Action, Manning, 2008

S. Buraga (coord.), Programareain 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 Centerdeveloper.mozilla.org

Ajaxianwww.ajaxian.com

Ajax Patternswww.ajaxpatterns.org

jQueryhttp://docs.jquery.com

www.learningjquery.com

Sabin Buraga — JavaScript

Education