Esență de JavaScript pentru novici

Dr.SabinBuragawww.purl.org/net/busaco
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „A. I. Cuza” din Iași
www.purl.org/net/busaco  @busaco4web
esență de JavaScript pentru novici

Inventat de Brendan Eich (1995)
denumit inițial Mocha, apoi LiveScript
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

ECMAScript
versiunea standardizată actuală: 5.1 (iunie 2011)
www.ecma-international.org/publications/standards/Ecma-262.htm
versiunea în lucru: 6.0 – ES6 (în curând)
git.io/es6features
referința de bază: https://developer.mozilla.org/JavaScript

Limbaj de tip script (interpretat)
destinat să manipuleze, să automatizeze
și să integreze funcționalitățile
oferite de un anumit sistem

nu necesită intrări/ieșiri în mod implicit

dinamic
variabilele își pot schimba tipul
pe parcursul rulării programului

Mediu de execuție (host-environment)
navigator Web
permite rularea de aplicații Web la nivelul unei platforme
(un sistem de operare)

navigator Web
permite rularea de aplicații 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 aplicații distribuite: Node.js
servere de baze de date – e.g., Apache CouchDB
componente ale sistemului de operare
aplicații de sine-stătătoare – e.g., Adobe Creative Suite

Câteva 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
reprezentare în dublă precizie (stocare pe 64 biți)
caracteristici: tipuri de date

String
secvențe de caractere Unicode
fiecare caracter ocupă 16 biți

Boolean
expresii ce se pot evalua ca fiind true/false

Object
aproape totul e considerat ca fiind obiect,
inclusiv funcțiile

Null
înseamnă „nicio valoare”

Undefined
are semnificația „nicio valoare asignată încă”

Nu există valori întregi
convertirea unui șir în număr: parseInt ()
parseInt ("123")  123
parseInt ("11", 2)  3
indică baza
de numerație

„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 fără valori asignate
se consideră undefined
caracteristici: variabile

Dacă nu se folosește var,
atunci variabila este considerată globală
de evitat așa 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"
adăugând un șir vid la o expresie, o convertim la String

Comparații: < > <= >= (numere și șiruri)
egalitatea valorilor se testează cu == și !=
1 == true  true

Comparații: < > <= >= (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 nume—valoare
caracteristici: obiecte

tabele de dispersie (hash) în C/C++
tablouri asociative în Perl, PHP sau Ruby
HashMaps în Java
“everything except primitive values is an object”

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  colecție de proprietăți,
având mai multe atribute

Obiect  colecție de proprietăți,
având mai multe atribute
proprietățile pot conține alte obiecte,
valori primitive sau metode

Obiecte predefinite:
Global Object
Function Array
String RegExp
Boolean Number
Math Date

Create prin intermediul operatorului new:
var ob = new Object ();
var ob = { }; // echivalent cu linia anterioară
se preferă această sintaxă

Accesarea proprietăților – operatorul .
ob.nume = "Tux";
var nume = ob.nume;

Accesarea proprietăților – 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 proprietăților – considerate chei:
var pinguin = { 'nume': 'Tux', 'marime': 17 };
for (var proprietate in pinguin) {
afiseaza (proprietate + ' = ' + pinguin[proprietate]);
}

Tipuri speciale de obiecte
proprietățile (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
notație alternativă – preferată:
var animale = [ "pinguin", "urs", "pterodactil" ];

Elementele pot aparține
unor tipuri de date eterogene
var animale = [ 33, "vierme", false, "gaga" ];

Definite via function
function transformaPixeliInPuncte (px) {
var puncte = px * 300;
return puncte;
}
caracteristici: funcții

Dacă nu este întors nimic în mod explicit,
valoarea de retur se consideră undefined

Parametrii de intrare pot lipsi,
fiind considerați undefined

Pot fi transmise mai multe argumente,
cele în surplus fiind ignorate
transformaPixeliInPuncte (10, 7)  3000

Funcțiile sunt tot obiecte
astfel, pot fi specificate funcții anonime
în acest sens, JavaScript este un limbaj funcțional
expresii
lambda

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;
for (var iter = 0,
lung = arguments.length;
iter < lung; iter++) {
suma += arguments[iter];
}
return suma / arguments.length;
};
variabilele declarate
în funcție nu vor fi
accesibile din exterior,
fiind „închise”

funcție closure

console.log ( media (9, 10, 7, 8, 7) )  8.2
rezultatul obținut în urma rulării programului JavaScript
via aplicația JS Bin – http://jsbin.com/

JavaScript Object Notation
http://json.org/
json

JavaScript Object Notation
format compact pentru interschimb de date
între aplicații
biblioteci de procesare și alte resurse de interes:
http://jsonauts.github.io/
json

{
'nume': 'Tux',
'stoc': 33,
'model': [ 'candid', 'furios', 'vesel' ]
}
json
datele pot fi evaluate
direct în JavaScript

instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools

Cum rulează programele JavaScript
în navigatorul Web?

Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
SpiderMonkey, IonMonkey, Rhino (Mozilla)
V8 (Google, Opera, Node.js)

„injectarea” de cod JavaScript în documentele HTML
via elementul <script>
cod JavaScript intern vs. preluat dintr-un fișier 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>

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
specificații ale Consorțiului Web
www.w3.org/DOM/DOMTR

<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
HTML
HtmlElement
HTML
BodyElement
HTML
ParagraphElement
Text
HTML
DivElement
HTML
ImageElement

De asemenea, programele JavaScript au acces
la diverse obiecte oferite de mediul de execuție
pus la dispoziție de browser
e.g., informații privind contextul rulării
(caracteristici ale navigatorului, latența rețelei),
istoricul navigării, fereastra de redare a conținutului,
transfer (a)sincron de date,…

N-am putea recurge la biblioteci JS specifice?

Biblioteci generale privind prezentarea
conținutului și manipularea paginii Web
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: http://sourceforge.net/projects/openrico/
Script.aculo.us: script.aculo.us

Biblioteci pentru
vizualizarea datelor
uzual, recurg la
<canvas> din HTML5
D3 Processing.js
sau la SVG
Snap.svg svg.js Bonsai
selection.datavisualization.ch

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

Multe alte biblioteci JavaScript specializate
procesarea formularelor Web
facilitarea transferurilor asincrone de date
realizarea de efecte vizuale
interacțiune cu utilizatorul
dezvoltare de jocuri (e.g., game engines)
tehnici criptografice
…

colecții de (micro-)biblioteci JS:
www.javascripting.com
jster.net
microjs.com

jQuery
aspecte esențiale (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, ușor de folosit
nu intră în conflict cu alte biblioteci JavaScript
disponibil open source
existența unui număr mare de extensii (plug-ins)
http://plugins.jquery.com/

jQuery
documentații și tutoriale:
http://learn.jquery.com/
http://try.jquery.com/
http://jqfundamentals.com/

jQuery
filosofie inițială:
focalizarea asupra interacțiunii dintre codul JavaScript
și construcțiile HTML
aproape fiecare operație urmează șablonul:
„găsește ceva” + „execută ceva cu ceea ce-ai găsit”

jQuery
accesul la nodurile documentului HTML se realizează
via funcția jQuery() – notație prescurtată: $()

jQuery
accesul la nodurile documentului HTML se realizează
via funcția jQuery() – notație prescurtată: $()
// liniile de tabel de pe poziții pare vor fi redate
// via proprietățile de stil CSS din clasa ‘fundal-gri’
$("table tr:nth-child(even)").addClass("fundal-gri");
obiect jQuery selector CSS
metodă
(funcționalitate)

jQuery
selectarea nodurilor dorite recurge la convențiile
privitoare la selectorii CSS – nivelul 2 și nivelul 3
http://docs.jquery.com/Selectors

jQuery
selectarea nodurilor dorite recurge la convențiile
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”:
poziție – :first :last
antet – :header
vizibilitate – :hidden :visible
animație – :animated
formulare – :input :text :password :radio :submit
conținut – :contains (…)

jQuery
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('div.info').size ()
mărimea colecției obținute

jQuery
prelucrate prin:
$('div.info').each (function (div) { … })
iterare via o funcție – aici: anonimă

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

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

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

jQuery
prelucrate prin:
$('p:odd').css ('color', 'blue')
modificarea unor proprietăți CSS
poziție impară

jQuery
o serie de metode întorc rezultate
privind primul nod selectat:
var latime = $('table').width (); // lățimea tabelului
var src = $('img#profil').attr ('src'); // URL-ul unei imagini
var ultimP = $('p:last').html (); // conținutul ultimului <p>

jQuery
asocierea de funcții 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 (); // generăm click prin program

jQuery
suportul pentru transferuri asincrone – Ajax:
încărcare asincronă a unui document
$('div#stiri').load ('stiri.html');

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

jQuery
preluare datelor JSON oferite de o aplicație Web
$.getJSON (url, parametri, funcție-de-procesare-a-datelor);

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

jQuery
efectuarea de animații simple:
acțiunile pot fi specificate și de programator
$("#reclama").animate ({
width: "+=100px",
opacity: 0.4,
fontSize: "3em",
borderWidth: "10px"
}, 1500);
detalii la
http://api.jquery.com/animate/

Câteva exemple de interes?

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

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
utilizăm URL-ul
http://api.flickr.com/services/feeds/photos_public.gne
pentru a obține informații despre imagini
(formate disponibile: Atom, CSV, JSON, XML,…)
vezi http://www.flickr.com/services/feeds/docs/photos_public/

interactiune web: ajax – studiu de caz
Forma generală a răspunsului JSON transmis de Flickr:
{
"title" : "Recent Uploads",
"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 ..."
} ]
}

// preluăm 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"
},
// funcția anonimă ce va procesa datele JSON trimise asincron de Flickr
function (data) {
// iterăm fiecare informație obținută de la serviciul Web
$.each (data.items, function (numar, foto) {
// creăm un element <img> având ca valoare a atributului "src"
// adresa Web inclusă în datele JSON obținute;
// acest <img> va fi adăugat 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 câștigi 10 tucși numai dacă
suma punctelor obținute este mai mare de 7
(uneori, pot apărea 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 ()
obține un număr preluat de la random.org
sau local cu Math.round (Math.random () * 5) + 1

Implementarea jocului – „clasa” Joc
proprietăți: scorCurent, zar1, zar2
metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize ()
probabilitate 20% ca Tux să fure banii
probabilitate 15% ca Pingu să ofere 33 de tucși

depanare cu Firebug
sau cu instrumentele
oferite de browser

Bun, aș dori să aprofundez…

S. Buraga, Dezvoltarea aplicațiilor 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/
resurse

JavaScript
Mult succes!
imagini din filmul Perfume: The Story of a Murderer – www.imdb.com/title/tt0396171/

Esență de JavaScript pentru novici

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Esență de JavaScript pentru novici

Similar to Esență de JavaScript pentru novici (20)

More from Sabin Buraga

More from Sabin Buraga (20)

Esență de JavaScript pentru novici