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

Sabin Buraga — JavaScript

Embed Size (px)

DESCRIPTION

O presentation regarding the essential aspects of the JavaScript language.

Citation preview

Page 1: Sabin Buraga — JavaScript

JavaScript

Dr. Sabin Buraga

www.purl.org/net/busaco

@busaco

Page 2: Sabin Buraga — JavaScript

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

Leonardo da Vinci

Page 3: Sabin Buraga — JavaScript

inventat de Brendan Eich (1995)

Page 4: Sabin Buraga — JavaScript

denumit initial LiveScript

Page 5: Sabin Buraga — JavaScript

implementat in Netscape Navigator

Page 6: Sabin Buraga — JavaScript

adaptat de Microsoft: JScript (1996)

Page 7: Sabin Buraga — JavaScript

standardizat in 1997 de ECMAEuropean Computer Manufacturers Association

www.ecma-international.org

Page 8: Sabin Buraga — JavaScript

limbaj de tip script (interpretat)

Page 9: Sabin Buraga — JavaScript

limbaj de tip script (interpretat)

destinat sa manipuleze, sa automatizezesi sa integreze facilitatile oferite

de un anumit sistem

Page 10: Sabin Buraga — JavaScript

limbaj de tip script (interpretat)

nu necesita intrari/iesiri in mod implicit

Page 11: Sabin Buraga — JavaScript

Cum putem executa programeleJavaScript?

Page 12: Sabin Buraga — JavaScript

mediu de executie(host-environment):

navigator Web

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

Page 13: Sabin Buraga — JavaScript

mediu de executie(host-environment):

platforma de dezvoltarea aplicatiilor

e.g., Adobe Flex/AIR

Page 14: Sabin Buraga — JavaScript

mediu de executie(host-environment):

aplicatie de sine-statatoare

Adobe Creative Suite, UltraEdit etc.

Page 15: Sabin Buraga — JavaScript

mediu de executie(host-environment):

procesor (engine) independent

e.g., Yahoo! Widget Engine

Page 16: Sabin Buraga — JavaScript

mediu de executie(host-environment):

componenteale sistemului de operare

Dashboard – Mac OS XSidebar – Windows Vista/7

Page 17: Sabin Buraga — JavaScript

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

Page 18: Sabin Buraga — JavaScript

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

Page 19: Sabin Buraga — JavaScript

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”

Page 20: Sabin Buraga — JavaScript

“valoarea” NaN – “not a number”

parseInt ("Salut")NaN

isNaN (NaN + 33)true

Page 21: Sabin Buraga — JavaScript

valori speciale:

Infinity

–Infinity

Page 22: Sabin Buraga — JavaScript

un caracter reprezintaun sir de lungime 1

sirurile sunt obiecte

"Salut".length5

Page 23: Sabin Buraga — JavaScript

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

Page 24: Sabin Buraga — JavaScript

variabile sunt declarate cu var

var marime;var numeAnimal = "Tux";

Page 25: Sabin Buraga — JavaScript

variabilele declarate fara valori asignate, se considera undefined

Page 26: Sabin Buraga — JavaScript

daca nu se foloseste var,

atunci variabila este considerata globala

de evitat asa ceva!

Page 27: Sabin Buraga — JavaScript

conversia tipurilor se face “din zbor”

"3" + 4 + 53453 + 4 + "5"75

Page 28: Sabin Buraga — JavaScript

pentru a afla tipul unei expresii,se foloseste typeof

typeof "Tux"string

Page 29: Sabin Buraga — JavaScript

instructiuni de control

testare: if ... else, switch

Page 30: Sabin Buraga — JavaScript

instructiuni de control

ciclare: while, do ... while, for

Page 31: Sabin Buraga — JavaScript

instructiuni de control

exceptii: try ... catch ... finally

emiterea unei exceptii: throw

Page 32: Sabin Buraga — JavaScript

obiecte

perechi nume—valoare

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

HashMaps in Java

Page 33: Sabin Buraga — JavaScript

obiecte

perechi nume—valoare

numele este desemnatde un sir de caractere

valoarea poate fi de orice tip

Page 34: Sabin Buraga — JavaScript

obiecte

colectii de proprietati,avand mai multe atribute

proprietatile pot contine alte obiecte,valori primitive sau metode

Page 35: Sabin Buraga — JavaScript

obiecte

in JavaScript, se predefinesc obiectele

GlobalObjectFunctionArrayStringBooleanNumberMathDate

Page 36: Sabin Buraga — JavaScript

obiecte

create prin intermediul lui new

var obiect = new Object();

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

Page 37: Sabin Buraga — JavaScript

obiecte

accesarea proprietatilor

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

Page 38: Sabin Buraga — JavaScript

obiecte

accesarea proprietatilor

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

echivalent:

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

Page 39: Sabin Buraga — JavaScript

obiecte

declarare + asociere de valori

var pingu = {nume: "Tux",proprietati: {

culoare: "oranj",marime: 17

}}

Page 40: Sabin Buraga — JavaScript

tablouri

sunt tipuri speciale de obiecte

proprietatile sunt numere,nu siruri de caractere

Page 41: Sabin Buraga — JavaScript

tablouri

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

zoo.length3

Page 42: Sabin Buraga — JavaScript

tablouri

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

zoo.length3

notatie alternativa:

var zoo = ["pinguin", "omida", "urs"];

Page 43: Sabin Buraga — JavaScript

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?

Page 44: Sabin Buraga — JavaScript

tablouri

elementele pot apartineunor tipuri de date eterogene

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

Page 45: Sabin Buraga — JavaScript

functii

obiecte definite prin function

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

}

Page 46: Sabin Buraga — JavaScript

functii

argumentele primite de o functiese acceseaza via tabloul arguments

Page 47: Sabin Buraga — JavaScript

functii

pot fi specificate functii anonime

expresiilambda

Page 48: Sabin Buraga — JavaScript

functii

pot fi specificate functii anonime

expresiilambda

in acest sens, JavaScript este un limbaj functional

Page 49: Sabin Buraga — JavaScript

var media = function () { // calculul medieivar suma = 0;for (var iter = 0,

lung = arguments.length; iter < lung; iter++) {

suma += arguments[iter];}return suma / arguments.length;

}

Page 50: Sabin Buraga — JavaScript

putem incapsula functiile in clase?

Page 51: Sabin Buraga — JavaScript

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;};

}

Page 52: Sabin Buraga — JavaScript

instantierea unui obiect:

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

Page 53: Sabin Buraga — JavaScript

operatorul new creaza un nou obiect vid

si apeleaza functia specificatacu this setat pe acest obiect

Page 54: Sabin Buraga — JavaScript

aceste functii se numesc constructori,trebuie apelate via new si, prin conventie,

au numele scris cu litera mare

Page 55: Sabin Buraga — JavaScript

structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype

Page 56: Sabin Buraga — JavaScript

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;}

Page 57: Sabin Buraga — JavaScript

pentru a cunoaste tipul unui obiect– pe baza constructorului sia ierarhiei de prototipuri –

se foloseste operatorul instanceof

Page 58: Sabin Buraga — JavaScript

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

marimi instanceof Arraytruemarimi instanceof Objecttruemarimi instanceof Stringfalse

Page 59: Sabin Buraga — JavaScript

extinderea claselor

adaugarea unei metode se realizeaza via prototype

Page 60: Sabin Buraga — JavaScript

Animal.prototype.oferaNumeMare = function () {

return this.nume.toUpperCase ();}

tux.oferaNumeMare ()"TUX"

Page 61: Sabin Buraga — JavaScript

in JavaScript, totul e consideratca fiind obiect – chiar si functiile

Page 62: Sabin Buraga — JavaScript

orice obiect e intotdeauna mutabil(poate fi alterat oricind)

Page 63: Sabin Buraga — JavaScript

operatorul . este echivalent

cu de-referentierea:

obiect.prop === obiect["prop"]

Page 64: Sabin Buraga — JavaScript

functiile ascund orice este definit in interiorul lor

Page 65: Sabin Buraga — JavaScript

accesorul this este relativ

la contextul executiei, nu al declararii

Page 66: Sabin Buraga — JavaScript

rularea in browser

programele JavaScript au acces la diverse obiecteoferite de navigatorul Web

Page 67: Sabin Buraga — JavaScript

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>

Page 68: Sabin Buraga — JavaScript

graceful degradation &progresive enhancement

conceperea “stratificata” a aplicatiilor JavaScript

Page 69: Sabin Buraga — JavaScript

graceful degradation &progresive enhancement

initial: interactiune minimala, fara JavaScript

adaugarea progresiva a facilitatilor,in functie de context

Page 70: Sabin Buraga — JavaScript

graceful degradation &progresive enhancement

inaintea folosirii oricarei tehnici dorite,de testat suportul oferit de navigator:

JavaScript, cookie-uri, clase/metode DOM, Ajax,…

Page 71: Sabin Buraga — JavaScript

JSON – JavaScript Object Notation

format compact pentru interschimb de date intre aplicatii

Page 72: Sabin Buraga — JavaScript

JSON – JavaScript Object Notation

folosit la serializarea datelor in contextul Web

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

Page 73: Sabin Buraga — JavaScript

JSON – JavaScript Object Notation

defineste datele in termeni de obiecte & literali

json.org

Page 74: Sabin Buraga — JavaScript

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

}datele pot fi

evaluate directin JavaScript

Page 75: Sabin Buraga — JavaScript

instrumente

medii de dezvoltareAptana Studio

depanareFirebug (Lite)

Visual Studio Developer 2010

Page 76: Sabin Buraga — JavaScript

instrumente

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

Page 77: Sabin Buraga — JavaScript

instrumente

alte extensii/utilitare folositoareGreaseMonkey, Ubiquity, Y! Slow

SpiderMonkeyRhino

JavaScript Shell

Page 78: Sabin Buraga — JavaScript

biblioteci

Dojo: dojotoolkit.orgjQuery: jquery.com

Prototype: prototypejs.orgRico: openrico.org

Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/

…si multe altele

Page 79: Sabin Buraga — JavaScript

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/

Page 80: Sabin Buraga — JavaScript

jQuery

focalizarea asupra interactiuniidintre codul JavaScript si

constructiile (X)HTML

Page 81: Sabin Buraga — JavaScript

jQuery

aproape orice operatie urmeaza regula:

“gaseste ceva”+

“executa ceva cu ceea ce-ai gasit”

Page 82: Sabin Buraga — JavaScript

jQuery

accesul la nodurile documentului HTML se realizeaza via functia jQuery()

notatie prescurtata: $()

Page 83: Sabin Buraga — JavaScript

// 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)

Page 84: Sabin Buraga — JavaScript

jQuery

selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS

http://docs.jquery.com/Selectors

Page 85: Sabin Buraga — JavaScript

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 (...)

Page 86: Sabin Buraga — JavaScript

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>

Page 87: Sabin Buraga — JavaScript

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

Page 88: Sabin Buraga — JavaScript

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

Page 89: Sabin Buraga — JavaScript

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

Page 90: Sabin Buraga — JavaScript

jQuery

extinderi via plug-in-uri:

manipularea formularelor

jquery.com/plugins/project/form

Page 91: Sabin Buraga — JavaScript

jQuery

extinderi via plug-in-uri:

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

http://ui.jquery.com/

Page 92: Sabin Buraga — JavaScript

jQuery

extinderi via plug-in-uri:

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

Page 93: Sabin Buraga — JavaScript

JavaScript

Page 94: Sabin Buraga — 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

Page 95: Sabin Buraga — JavaScript

resurse

Mozilla Developer Centerdeveloper.mozilla.org

Ajaxianwww.ajaxian.com

Ajax Patternswww.ajaxpatterns.org

jQueryhttp://docs.jquery.com

www.learningjquery.com