Sabinburaga Esenta de Javascript 150405124051 Conversion Gate01

Dr.
Sabin Buraga
Dr. Sabin Buragawww.purl.org/net/busaco
esen de JavaScript pentru novici
Facultatea de Informatic, Universitatea A. I. Cuza din Iai

www.purl.org/net/busaco @busaco4web
Oferit n premier de browser-ul Netscape Navigator

Adaptat de Microsoft: JScript (1996)
Standardizat ca ECMAScript: ECMA-262 (1997)
www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
Inventat de Brendan Eich (1995)

denumit iniial Mocha, apoi LiveScript
versiunea standardizat actual: 5.1 (iunie 2011)

www.ecma-international.org/publications/standards/Ecma-262.htm
versiunea n lucru: 6.0 ES6 (n curnd)

git.io/es6features
referina de baz: https://developer.mozilla.org/JavaScript
ECMAScript
destinat s manipuleze, s automatizeze

i s integreze funcionalitile
oferite de un anumit sistem
Limbaj de tip script (interpretat)
nu necesit intrri/ieiri n mod implicit
dinamic
variabilele i pot schimba tipul
pe parcursul rulrii programului
navigator Web
Mediu de execuie (host-environment)
permite rularea de aplicaii Web la nivelul unei platforme

(un sistem de operare)
navigator Web
permite rularea de aplicaii Web la nivelul unei platforme

(un sistem de operare)
inclusiv pe dispozitive mobile: Android, iOS, Firefox OS,

Fire OS (Kindle Fire), Windows Phone,
tehnologii Web disponibile (via JavaScript)

la nivel de browser http://platform.html5.org/
independent de navigatorul Web

platforme de dezvoltare de aplicaii distribuite: Node.js
servere de baze de date e.g., Apache CouchDB
componente ale sistemului de operare
aplicaii de sine-stttoare e.g., Adobe Creative Suite
Cteva caracteristici importante?
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
caracteristici: sintaxa
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
caracteristici: sintaxa
Number
caracteristici: tipuri de date
reprezentare n dubl precizie (stocare pe 64 bii)
String
secvene de caractere Unicode
fiecare caracter ocup 16 bii
Boolean
expresii ce se pot evalua ca fiind true/false
Object
aproape totul e considerat ca fiind obiect,
inclusiv funciile
Null
nseamn nicio valoare
Undefined
are semnificaia nicio valoare asignat nc
Nu exist valori ntregi
convertirea unui ir n numr: parseInt ()

parseInt ("123") 123
parseInt ("11", 2) 3
indic baza
de numeraie
Valoarea NaN (not a number)

parseInt ("Salut") NaN
isNaN (NaN + 3) true
Un caracter reprezint un ir de lungime 1
irurile sunt obiecte

"Salut".length 5
Metode utile
pentru procesarea irurilor de caractere:
s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..)
s.indexOf(s1, start)
s.match(regexp) s.replace(search, replace)
s.slice(start, end) s.split(separator, limit)
s.substring(start, end)
s.toLowerCase() s.toUpperCase()
etc.
Valorile 0, "", NaN, null, undefined

sunt interpretate ca fiind false
!!234 true
Variabilele se declar cu var

var marime;
var numeAnimal = "Tux";
variabilele declarate fr valori asignate

se consider undefined
caracteristici: variabile
Dac nu se folosete var,

atunci variabila este considerat global
de evitat aa ceva!
caracteristici: variabile
Pentru numere: + * / %
De asignare: += = *= /= %=
Incrementare i decrementare: ++
Concatenare de iruri: "Java" + "Script" "JavaScript"
Logici: && || ?:
caracteristici: operatori
Conversia tipurilor se face din zbor (dinamic)

"3" + 4 + 5 "345"
3 + 4 + "5" "75"
adugnd un ir vid la o expresie, o convertim la String
Comparaii: < > <= >= (numere i iruri)

egalitatea valorilor se testeaz cu == i !=
1 == true true
Comparaii: < > <= >= (numere i iruri)

egalitatea valorilor se testeaz cu == i !=
1 == true true
a se folosi: 1 === true false
inhib conversia
tipurilor de date
Testare: if else, switch

pentru switch, sunt permise expresii la fiecare case
(testarea se realizeaz cu operatorul ===)
switch (2 + 3) {
/* sunt permise expresii */
case 4 + 1 : egalitate ();
break;
default
: absurd (); // nu se apeleaz niciodat
}
caracteristici: control
Ciclare: while, do while, for

do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; contor++) {
// de 33 de ori
}
caracteristici: control
Perechi numevaloare
caracteristici: obiecte
Perechi numevaloare
tabele de dispersie (hash) n C/C++

tablouri asociative n Perl, PHP sau Ruby
HashMaps n Java
everything except primitive values is an object
Perechi numevaloare
numele este desemnat de un ir de caractere
(i.e., expresie de tip String)
valoarea poate fi de orice tip,
inclusiv null sau undefined
Obiect colecie de proprieti,

avnd mai multe atribute
Obiect colecie de proprieti,

avnd mai multe atribute
proprietile pot conine alte obiecte,

valori primitive sau metode
Obiecte predefinite:
Global
Function
String
Boolean
Math
Object
Array
RegExp
Number
Date
Create prin intermediul operatorului new:
var ob = new Object ();

var ob = { }; // echivalent cu linia anterioar
se prefer aceast sintax
Accesarea proprietilor operatorul .
ob.nume = "Tux";
var nume = ob.nume;
Accesarea proprietilor operatorul .
ob.nume = "Tux";
var nume = ob.nume;
echivalent cu:
ob["nume"] = "Tux";
var nume = ob["nume"];
Declarare + asignare:
var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}
Declarare + asignare:
var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}
accesare:
pinguin.proprietati.marime 17
pinguin["proprietati"]["culoare"] verde
Iterarea proprietilor considerate chei:
var pinguin = { 'nume': 'Tux', 'marime': 17 };

for (var proprietate in pinguin) {
afiseaza (proprietate + ' = ' + pinguin[proprietate]);
}
Tipuri speciale de obiecte
proprietile (cheile) sunt numere,

nu iruri de caractere
caracteristici: tablouri
Se poate utiliza sintaxa privitoare la obiecte:

var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "urs";
animale[2] = "pterodactil";
animale.length 3
Se poate utiliza sintaxa privitoare la obiecte:

var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "urs";
animale[2] = "pterodactil";
animale.length 3
notaie alternativ preferat:
var animale = [ "pinguin", "urs", "pterodactil" ];
Elementele pot aparine

unor tipuri de date eterogene
var animale = [ 33, "vierme", false, "gaga" ];
Definite via function

function transformaPixeliInPuncte (px) {
var puncte = px * 300;
return puncte;
}
caracteristici: funcii
Dac nu este ntors nimic n mod explicit,

valoarea de retur se consider undefined
Parametrii de intrare pot lipsi,

fiind considerai undefined
Pot fi transmise mai multe argumente,

cele n surplus fiind ignorate
transformaPixeliInPuncte (10, 7) 3000
Funciile sunt tot obiecte
astfel, pot fi specificate funcii anonime

expresii
lambda
n acest sens, JavaScript este un limbaj funcional
var media = function () { // calculul mediei a N numere

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

var suma = 0;
variabilele declarate
for (var iter = 0,
n funcie nu vor fi
lung = arguments.length; accesibile din exterior,
fiind nchise
iter < lung; iter++) {
suma += arguments[iter];
funcie closure
}
return suma / arguments.length;
};
rezultatul obinut n urma rulrii programului JavaScript

via aplicaia JS Bin http://jsbin.com/
console.log ( media (9, 10, 7, 8, 7) ) 8.2
JavaScript Object Notation
http://json.org/
json
JavaScript Object Notation

format compact pentru interschimb de date
ntre aplicaii
biblioteci de procesare i alte resurse de interes:

http://jsonauts.github.io/
json
{
'nume': 'Tux',
'stoc': 33,
'model': [ 'candid', 'furios', 'vesel' ]
}
datele pot fi evaluate
direct n JavaScript
json
instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools
Cum ruleaz programele JavaScript

n navigatorul Web?
SpiderMonkey, IonMonkey, Rhino (Mozilla)

V8 (Google, Opera, Node.js)
Majoritatea programelor JavaScript

ruleaz sunt interpretate
n navigatorul Web via un script engine
cod JavaScript intern vs. preluat dintr-un fiier extern
<body>
<script type="text/javascript">
alert ("Salut, lume!");
</script>
</body>
<script type="text/javascript"
src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js">
</script>
injectarea de cod JavaScript n documentele HTML

via elementul <script>
specificaii ale Consoriului Web

www.w3.org/DOM/DOMTR
Un program JavaScript are acces la arborele DOM

(Document Object Model)
corespunztor documentului HTML
HTML
HtmlElement
HTML
BodyElement
HTML
ParagraphElement
Text
HTML
DivElement
HTML
ImageElement
<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
e.g., informaii privind contextul rulrii

(caracteristici ale navigatorului, latena reelei),
istoricul navigrii, fereastra de redare a coninutului,
transfer (a)sincron de date,
De asemenea, programele JavaScript au acces

la diverse obiecte oferite de mediul de execuie
pus la dispoziie de browser
N-am putea recurge la biblioteci JS specifice?
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: http://sourceforge.net/projects/openrico/
Script.aculo.us: script.aculo.us
Biblioteci generale privind prezentarea

coninutului i manipularea paginii Web
uzual, recurg la
<canvas> din HTML5
D3 Processing.js
sau la SVG
Snap.svg svg.js Bonsai
selection.datavisualization.ch
Biblioteci pentru
vizualizarea datelor
examinarea codului SVG generat de biblioteca Snap.svg

folosind instrumentele de depanare furnizate de browser
biblioteci JavaScript pentru grafica 3D:

Babilon, c3DL, CopperLicht, CubicVR, OSG,
PhiloGL, SceneJS, TDL, Three.js,
alte detalii la www.khronos.org/webgl/wiki/User_Contributions
procesarea formularelor Web

facilitarea transferurilor asincrone de date
realizarea de efecte vizuale
interaciune cu utilizatorul
dezvoltare de jocuri (e.g., game engines)
tehnici criptografice
Multe alte biblioteci JavaScript specializate
colecii de (micro-)biblioteci JS:

www.javascripting.com
jster.net
microjs.com
aspecte eseniale (o prezentare succint)
jQuery
scop principal:
oferirea unui framework JavaScript
pentru manipularea facil a documentului HTML
pe baza selectorilor CSS nivelul 3
http://jquery.com/
jQuery
concis, dar extensibil, uor de folosit

nu intr n conflict cu alte biblioteci JavaScript
disponibil open source
existena unui numr mare de extensii (plug-ins)
http://plugins.jquery.com/
jQuery
documentaii i tutoriale:
http://learn.jquery.com/
http://try.jquery.com/
http://jqfundamentals.com/
jQuery
filosofie iniial:
focalizarea asupra interaciunii dintre codul JavaScript
i construciile HTML
aproape fiecare operaie urmeaz ablonul:
gsete ceva + execut ceva cu ceea ce-ai gsit
jQuery
accesul la nodurile documentului HTML se realizeaz

via funcia jQuery() notaie prescurtat: $()
jQuery
accesul la nodurile documentului HTML se realizeaz

via funcia jQuery() notaie prescurtat: $()
// liniile de tabel de pe poziii pare vor fi redate
// via proprietile de stil CSS din clasa fundal-gri
$("table tr:nth-child(even)").addClass("fundal-gri");
obiect jQuery
selector CSS
metod
(funcionalitate)
jQuery
selectarea nodurilor dorite recurge la conveniile

privitoare la selectorii CSS nivelul 2 i nivelul 3
http://docs.jquery.com/Selectors
jQuery
selectarea nodurilor dorite recurge la conveniile

privitoare la selectorii CSS nivelul 2 i nivelul 3
$(div.info) toate elementele <div class="info">
$(div#adresa) elementul <div id="adresa">
$(div h1) n contextul: <div> care include <h1>
$(div#cap > p) context: <div id="cap"> cu descend. <p>
jQuery
selectori magici:
poziie :first :last
antet :header
vizibilitate :hidden :visible
animaie :animated
formulare :input :text :password :radio :submit
coninut :contains ()
jQuery
unele rezultate ale $() pot ntoarce colecii de noduri,

prelucrate prin:
$('div.info').size ()
mrimea coleciei obinute
jQuery

prelucrate prin:
$('div.info').each (function (div) { })
iterare via o funcie aici: anonim
jQuery

prelucrate prin:
$('div.info').html ('<em>Web hackathon</em> la FII')
inserare de construcii HTML
jQuery

prelucrate prin:
$('img.foto').attr ('src', '/anonim.png')
alterarea unui atribut
jQuery

prelucrate prin:
$('a.menu').addClass ('vizitat')
adugarea unei clase CSS
jQuery

prelucrate prin:
poziie impar
$('p:odd').css ('color', 'blue')

modificarea unor proprieti CSS
jQuery
o serie de metode ntorc rezultate

privind primul nod selectat:
var latime = $('table').width ();
// limea tabelului
var src = $('img#profil').attr ('src'); // URL-ul unei imagini
var ultimP = $('p:last').html ();
// coninutul ultimului <p>
jQuery
asocierea de funcii de tratare a evenimentelor

// evenimentul click asupra unui element <a>
$('a').click ( function(ev) {
$(this).css({ backgroundColor: 'yellow' });
ev.preventDefault (); // previne comportamentul implicit
});
$('a:first').click ();
// generm click prin program
jQuery
suportul pentru transferuri asincrone Ajax:

ncrcare asincron a unui document
$('div#stiri').load ('stiri.html');
jQuery

preluarea unor date de la o anumit adres Web
$.get (url, parametri, funcie-de-procesare-a-datelor);
jQuery

preluare datelor JSON oferite de o aplicaie Web
$.getJSON (url, parametri, funcie-de-procesare-a-datelor);
jQuery
efectuarea de animaii simple:

$('h1').hide ('slow');
$('h1').slideDown ('fast');
$('h1').fadeOut (2000);
alternativ mai performant: Velocity.js velocityjs.org/
jQuery
efectuarea de animaii simple:

aciunile pot fi specificate i de programator
$("#reclama").animate ({
width: "+=100px",
detalii la
opacity: 0.4,
http://api.jquery.com/animate/
fontSize: "3em",
borderWidth: "10px"
}, 1500);
jQuery
Cteva exemple de interes?

Obinerea fotografiilor publice stocate pe situl

Flickr pe baza serviciului Web oferit
cod-surs disponibil la
http://jsfiddle.net/busaco/4d2tmc6b/
studiu de caz: FlickrPics
Obinerea fotografiilor publice stocate pe situl

Flickr pe baza serviciului Web oferit
utilizm URL-ul
http://api.flickr.com/services/feeds/photos_public.gne
pentru a obine informaii despre imagini
(formate disponibile: Atom, CSV, JSON, XML,)
vezi http://www.flickr.com/services/feeds/docs/photos_public/
interactiune
web:Uploads",
ajax studiu de caz
"title"
: "Recent
"link"
: "http://www.flickr.com/photos/",
"modified"
: "2014-12-06T13:33:07Z",
"generator"
: "http://www.flickr.com/",
"items"
:[{
"title"
: "...",
"link"
: "http://www.flickr.com/photos/.../4204222/",
"media" : { "m": "https://farm.staticflickr.com/...jpg" },
"date_taken": "2012-05-20T17:23:43-08:00",
"description": "...",
"published" : "2012-05-26T13:49:08Z",
"author"
: "...",
"author_id" : "...",
"tags"
: "iasi romania informatica FII ..."
}]
Forma general a rspunsului JSON transmis de Flickr:

// prelum asincron imagini disponibile pe Flickr

jQuery.getJSON
("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{ // datele de intrare transmise serviciului Web
tags: "Iasi, informatica", format: "json"
},
// funcia anonim ce va procesa datele JSON trimise asincron de Flickr
function (data) {
// iterm fiecare informaie obinut de la serviciul Web
$.each (data.items, function (numar, foto) {
// crem un element <img> avnd ca valoare a atributului "src"
// adresa Web inclus n datele JSON obinute;
// acest <img> va fi adugat la elementul cu id="imagini" din pagin
$ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title)
.appendTo ("#imagini");
});
});
un posibil rezultat editarea & rularea codului via JSFiddle
Crearea unui joc simplu cu 2 zaruri

arunci zarurile i ctigi 10 tuci numai dac
suma punctelor obinute este mai mare de 7
(uneori, pot aprea surprize)
cod-surs disponibil la
http://jsfiddle.net/busaco/r8L2kp30/
studiu de caz: DiceX
Managementul unui zar clasa Zar

proprietate: valoareZar
metode: obtineZar () i aruncaZar ()
obine un numr preluat de la random.org
sau local cu Math.round (Math.random () * 5) + 1
Implementarea jocului clasa Joc

proprieti: scorCurent, zar1, zar2
metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize ()
probabilitate 20% ca Tux s fure banii
probabilitate 15% ca Pingu s ofere 33 de tuci
depanare cu Firebug
sau cu instrumentele
oferite de browser
Bun, a dori s aprofundez
resurse
S. Buraga, Dezvoltarea aplicaiilor Web la nivel de client,
FII, UAIC, 2015: www.info.uaic.ro/~busaco/teach/courses/cliw/
S. Buraga, Front-end Web Developer Resources, 2014
http://tinyurl.com/cliw-devel
JSbooks the best free JavaScript resources
http://jsbooks.revolunet.com/
DevDocs
http://devdocs.io/javascript/
JavaScript
Mult succes!
imagini din filmul Perfume: The Story of a Murderer www.imdb.com/title/tt0396171/

Sabinburaga Esenta de Javascript 150405124051 Conversion Gate01

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sabinburaga Esenta de Javascript 150405124051 Conversion Gate01

Încărcat de

Drepturi de autor:

Formate disponibile

Dr.

Dr. Sabin Buragawww.purl.org/net/busaco

esen de JavaScript pentru novici

Facultatea de Informatic, Universitatea A. I. Cuza din Iai

Oferit n premier de browser-ul Netscape Navigator

Dr. Sabin Buragawww.purl.org/net/busaco

Inventat de Brendan Eich (1995)

versiunea standardizat actual: 5.1 (iunie 2011)

versiunea n lucru: 6.0 ES6 (n curnd)

referina de baz: https://developer.mozilla.org/JavaScript

Dr. Sabin Buragawww.purl.org/net/busaco

destinat s manipuleze, s automatizeze

Dr. Sabin Buragawww.purl.org/net/busaco

Limbaj de tip script (interpretat)

nu necesit intrri/ieiri n mod implicit

Dr. Sabin Buragawww.purl.org/net/busaco

Limbaj de tip script (interpretat)

Dr. Sabin Buragawww.purl.org/net/busaco

Limbaj de tip script (interpretat)

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuie (host-environment)

permite rularea de aplicaii Web la nivelul unei platforme

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuie (host-environment)

permite rularea de aplicaii Web la nivelul unei platforme

inclusiv pe dispozitive mobile: Android, iOS, Firefox OS,

Dr. Sabin Buragawww.purl.org/net/busaco

tehnologii Web disponibile (via JavaScript)

independent de navigatorul Web

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuie (host-environment)

Dr. Sabin Buragawww.purl.org/net/busaco

Cteva caracteristici importante?

break else new var case finally return void catch

Dr. Sabin Buragawww.purl.org/net/busaco

Alte cuvinte rezervate:

abstract enum int short boolean export interface

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

reprezentare n dubl precizie (stocare pe 64 bii)

fiecare caracter ocup 16 bii

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Nu exist valori ntregi

convertirea unui ir n numr: parseInt ()

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Valoarea NaN (not a number)

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

Un caracter reprezint un ir de lungime 1

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date

irurile sunt obiecte

Dr. Sabin Buragawww.purl.org/net/busaco