Java Script Slide

8/6/2019 Java Script Slide

1/95

JavaScript

Dr. Sabin Buraga

www.purl.org/net/busaco

@busaco


2/95

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

Leonardo da Vinci


3/95

inventat de Brendan Eich (1995)


4/95

denumit initial LiveScript


5/95

implementat in Netscape Navigator


6/95

adaptat de Microsoft: JScript (1996)


7/95

standardizat in 1997 de ECMAEuropean Computer Manufacturers Association

www.ecma-international.org


8/95

limbaj de tip script(interpretat)


9/95


destinat sa manipuleze, sa automatizezesi sa integreze facilitatile oferite

de un anumit sistem


10/95


nu necesita intrari/iesiri in mod implicit


11/95

Cum putem executa programele

JavaScript?


12/95

mediu de executie(host-environment):

navigator Web

injectarea de cod JavaScriptin documentele (X)HTML via


13/95


platforma de dezvoltarea aplicatiilor

e.g., Adobe Flex/AIR


14/95


aplicatie de sine-statatoare

Adobe Creative Suite, UltraEdit etc.


15/95


procesor (engine) independent

e.g., Yahoo! Widget Engine


16/95


componenteale sistemului de operare

Dashboard Mac OS XSidebar Windows Vista/7


17/95

cuvinte rezervate:break else new var case finally return

void catch for switch while continuefunction this with default if throw

delete in try do instanceof typeof


18/95

alte cuvinte rezervate:abstract enum int short boolean export

interface static byte extends long superchar final native synchronized class float

package throws const goto private transient

debugger implements protected volatile

double import public


19/95

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


20/95

valoarea NaN not a number

parseInt ("Salut")NaN

isNaN (NaN + 33)true


21/95


22/95

un caracter reprezintaun sir de lungime 1

sirurile sunt obiecte

"Salut".length5


23/95

valorile 0, "", NaN, null, undefinedsunt interpretate ca fiind false


24/95

variabile sunt declarate cu var

var marime;var numeAnimal = "Tux";


25/95

variabilele declarate fara valori asignate,se considera undefined


26/95

daca nu se foloseste var,atunci variabila este considerata globala

de evitat asa ceva!


27/95

conversia tipurilor se face din zbor

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


28/95

pentru a afla tipul unei expresii,se foloseste typeof

typeof "Tux"string


29/95

instructiuni de control

testare: if ... else, switch


30/95


ciclare: while, do ... while, for


31/95


exceptii: try ... catch ... finally

emiterea unei exceptii: throw


32/95

obiecte

perechi nume

valoare

tabele de dispersie (hash) in C/C++

tablouri asociative in Perl, PHP, RubyHashMapsin Java


33/95

obiecte

perechi nume

valoare

numele este desemnat

de un sir de caractere

valoarea poate fi de orice tip


34/95

obiecte

colectii de proprietati,avand mai multe atribute

proprietatile pot contine alte obiecte,valori primitive sau metode


35/95

obiecte

in JavaScript, se predefinesc obiectele

Global

ObjectFunction

Array

String

BooleanNumber

Math

Date


36/95

obiecte

create prin intermediul lui new

var obiect = new Object();

var obiect = {};

// echivalent cu linia anterioara


37/95

obiecte

accesarea proprietatilor

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


38/95

obiecte

accesarea proprietatilor

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

echivalent:

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


39/95

obiecte

declarare + asociere de valori

var pingu = {

nume: "Tux",proprietati: {

culoare: "oranj",

marime: 17

}}


40/95

tablouri

sunt tipuri speciale de obiecte

proprietatile sunt numere,nu siruri de caractere


41/95

tablouri

var zoo = new Array ();zoo[0] = "pinguin";

zoo[1] = "omida";

zoo[2] = "urs";

zoo.length3


42/95


43/95

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?


44/95

tablouri

elementele pot apartineunor tipuri de date eterogene

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


45/95

functii

obiecte definite prin function

function transformaPixeliInPuncte (px) {

var puncte = px * 300;

return puncte;

}


46/95

functii

argumentele primite de o functiese acceseaza via tabloul arguments


47/95

functii

pot fi specificate functii anonime

expresiilambda


48/95

functii

pot fi specificate functii anonime

expresiilambda

in acest sens, JavaScript este un limbaj functional


49/95

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;

}


50/95

putem incapsula functiile in clase?


51/95

de la functii la clase:

function Animal (nume, marime) {

this.nume = nume; // date-membre

this.marime = marime;

this.oferaNume = function () { // metoda

return this.nume;

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

return this.marime;

};

}


52/95

instantierea unui obiect:

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


53/95

operatorul new creaza un nou obiect vidsi apeleaza functia specificatacu this setat pe acest obiect


54/95

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

au numele scris cu litera mare


55/95

structura unei clase poate fi extinsa ulterior,folosind proprietatea prototype


56/95

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;

}


57/95

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

se foloseste operatorul instanceof


58/95

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

marimi instanceof Arraytrue

marimi instanceof Objecttrue

marimi instanceof Stringfalse


59/95

extinderea claselor

adaugarea unei metode se realizeaza via prototype


60/95

Animal.prototype.oferaNumeMare =function () {

return this.nume.toUpperCase ();

}

tux.oferaNumeMare ()"TUX"


61/95

in JavaScript, totul e consideratca fiind obiect chiar si functiile


62/95


63/95

operatorul . este echivalentcu de-referentierea:

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


64/95

functiile ascund orice este definitin interiorul lor


65/95

accesorul this este relativla contextul executiei,

nu al declararii


66/95

rularea in browser

programele JavaScript au acces la diverse obiecteoferite de navigatorul Web


67/95

rularea in browser

de pilda, poate fi accesat obiectul global window

var nav = window.navigator.userAgent;

// date privitoare la browser


68/95

graceful degradation &

progresive enhancement

conceperea stratificata a aplicatiilor JavaScript


69/95

graceful degradation &

progresive enhancement

initial: interactiune minimala, fara JavaScript

adaugarea progresiva a facilitatilor,in functie de context


70/95


71/95

JSON JavaScript Object Notation

format compact pentru interschimb de date

intre aplicatii


72/95


folosit la serializarea datelor in contextul Web

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


73/95


defineste datele in termeni de obiecte & literali

json.org


74/95

{

'nume' : 'Tux',

'stoc' : 33,

'gen' : ['candid', 'furios', 'vesel']}

datele pot fievaluate directin JavaScript


75/95

instrumente

medii de dezvoltare

Aptana Studio

depanareFirebug (Lite)

Visual Studio Developer 2010

instrumente


76/95

instrumente

testare (inginerie software)

JSLint, JsUnit,jsTrace, Selenium

instrumente


77/95

instrumente

alte extensii/utilitare folositoare

GreaseMonkey, Ubiquity, Y! SlowSpiderMonkey

RhinoJavaScript Shell

biblioteci


78/95

biblioteci

Dojo: dojotoolkit.org

jQuery:jquery.comPrototype: prototypejs.org

Rico: openrico.orgScript.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/

si multe altele

jQ


79/95

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/

jQ


80/95

jQuery

focalizarea asupra interactiuniidintre codul JavaScript si

constructiile (X)HTML

jQ


81/95

jQuery

aproape orice operatie urmeaza regula:

gaseste ceva+

executa ceva cu ceea ce-ai gasit

jQ


82/95

jQuery

accesul la nodurile documentului HTMLse realizeaza via functia jQuery()

notatie prescurtata: $()


83/95

jQ


84/95

jQuery

selectarea nodurilor dorite recurge laconventiile privitoare la selectorii CSS

http://docs.jquery.com/Selectors

jQ


85/95

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


86/95

jQuery

selectarea nodurilor dorite recurge laconventiile privitoare la selectorii CSS

$('div.info')

toate elementele $('div#adresa')

elementul $('div h1')

in contextul: care include $('div#menu > p')

in contextul:

cu descendentii


87/95

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 ('Salut')inserare de cod HTML


88/95

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


89/95

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


90/95

jQuery

extinderi via plug-in-uri:

manipularea formularelor

jquery.com/plugins/project/form

jQuery


91/95

jQuery


efecte de interfata +

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

http://ui.jquery.com/

jQuery


92/95

jQuery


pentru alte detalii, a se consulta

http://plugins.jquery.com


93/95

JavaScript

resurse


94/95

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


95/95

Mozilla Developer Center

developer.mozilla.org

Ajaxianwww.ajaxian.com

Ajax Patternswww.ajaxpatterns.org

jQueryhttp://docs.jquery.com

www learningjquery com

Date post:	07-Apr-2018
Category:	Documents
Upload:	silviu-cornestean
View:	226 times
Download:	0 times

Java Script Slide

Documents