Lorenzo'Bracciale' AA' ' Programmazione'WEB'

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Lorenzo'Bracciale' AA'201472015' Programmazione'WEB'"

Romano Donato
8 anni fa
Visualizzazioni

1 Lorenzo'Bracciale' AA' ' Programmazione'WEB'

2 Cos e &Javascript?& E 'un'linguaggio'di'programmazione'creato'nel'1995' da'brendan'eich'(netscape)' Originariamente'chiamato' Livescript ' Javascript'!='Java'(chiamato'cosi 'solo'per'markelng!)' Standard'nel'1996'da'European'Computer' Manufacturer s'associalon'(ecma)' Chiamato'ECMAScript' Oggi'molL'browser'supportano'la'versione'corrente' (v5)' ECMA'v6'sarà'rilasciata'tra'poco'(giugno'2015)'

Originariamente'chiamato' Livescript ' Javascript'!='Java'(chiamato'cosi 'solo'per'markelng!

3 AA' ' Programmazione'WEB'

4 src:'hvp://javascript.crockford.com/javascript.html' AA' ' Programmazione'WEB'

5 Ruolo&di&Javascript& Web'client7side'scripLng' pralcamente'monopolista!' E'non'solo ' es.'nodejs' ' StruVura'(HTML)' Presentazione'(CSS)' Comportamento'(JS)'

6 Dove&studiare& Libro'di'testo' Documentazione'online' hvps://developer.mozilla.org/en7us/docs/web/javascript' Libri'specifici' AA' ' Programmazione'WEB'

7 Cosa&fa&javascript:&AJAX& (Asynchronous&JavaScript&and&XML,)&

8 Cosa&fa&javascript:&instant&search&

9 Cosa&fa&javascript:&chat&

10 Cosa&fa&javascript& Cambiare'elemenL'e'sLli'in'una'pagina' Ad'es:'aggiungere'classi'css'in'risposta'a'evenL'generaL' dall utente'(click,'scroll'ecc)' Comunicazione'asincrona' Invio'daL'senza'ricaricare'la'pagina'o'senza'interazione'con' l utente' Il'paradigma'è'spesso'chiamato'AJAX' Altro' Test'browser'capabiliLes'ed'adaVamento'(polyfills)' Concorrente'APP'mobile?'' Cordova,'Phonegap?''

Comunicazione'asincrona' Invio'daL'senza'ricaricare'la'pagina'o'senza'interazione'con' l utente'

11 CaraCerisDche&del&linguaggio& Dynamic:'non'è'compilato,'gira'in'una' macchina' virtuale '' Loosely'typed:'non'bisogna'dire'che'Lpo'ha'una' variabile' Case7sensiLve:'aTTenZione'allE'MaiUscole!'

12 Javascript&garbage&collector& Un' garbage'collector 'rimuove'le'variabili'che' non'ci'servono'dalla'memoria'automalcamente' Lo'capisce'quando'non'abbiamo'più' riferimenl 'ad'un'oggevo' Possiamo'dichiarare'nuove'variabili'dinamicamente'senza' preoccuparci*'di'rimuoverle'dalla'memoria' *'in'realtà'un'po 'dovremmo'preoccuparci,'anche'qui'possiamo'fare'dei' memory'leak '' more'info:'hvps://developer.mozilla.org/en7us/docs/web/javascript/memory_management' AA' ' Programmazione'WEB'

Possiamo'dichiarare'nuove'variabili'dinamicamente'senza' preoccuparci*'di'rimuoverle'dalla'memoria' *'in'realtà'un'po

13 Hello&world!& AA' ' Programmazione'WEB'

14 TesDamolo&realDme&sulla&console&

15 Statements&e&commenD& '//'visualizziamo'una'finestra'popup'con'un'messaggio' alert( ciao );' /*'visualizziamo'una'finestra'in'cui'chiediamo'una' domanda&all utente.'' La'funzione'ritorna&il&valore&immesso'*/' prompt( come'l'chiami? );'' //'mostra'una'finestra'con' Ok /' Annulla.'' //'Ritorna'la'scelta'faVa' confirm( sei'uno'studente'di'pw? );'//' ;'alla'fine'di'uno'statement'e 'una' best'praclce ' approfondimento:'hvp://mislav.uniqpath.com/2010/05/semicolons/'

'' La'funzione'ritorna&il&valore&immesso'*/' prompt( come'l'chiami? );'' //'mostra'una'finestra'con' Ok /' Annulla.

16 Variabili& //'definisco'una'variabile' var'myname;'' //'la'assegno'all output'della'funzione' prompt ' myname'='prompt( come'l'chiami? );''' //'concateno'due'stringhe' alert( ciao' '+'myname');'''

17 Aggiungere&Javascript&a&una&pagina& <script'type= text/javascript >' </script>' '//'Scrivi'qui'il'tuo'codice'javascript' embedded' external' <script'type= text/javascript 'src="my_script.js">' </script>'' Solitamente'inclusi'in'<head>'o'alla'fine'del'<body>'

18 Strict&mode& a'='5;'//'non'uso'var,'dichiarazione'implicita' NaN'='true;'//'non'produce'errore'ma'non'ha'senso!'' ' ' use'strict ;'//'rende'queste'cose'un'errore' //'da'mevere'prima'del'resto'del'codice' //'ECMAScript6'parLrà'dallo'strict'mode' AA' ' Programmazione'WEB'

19 Tipi&di&dato& primidvi & Ogni'dato'apparLene'ad'un'Lpo:' ma'non'serve'specificarlo'nella'dichiarazione' ' var test; ' var test = null; ' var test = 5;! var test = ciao ;! var test = true; ' la'variabile'è'undefined' la'variabile'è'null' la'variabile'è'un'numero.''(anche' float :'5.123)' Operazioni:'+'7'*'/' (es'5'+'3.1)' la'variabile'è'una'stringa.'(singoli'o'doppi'apici)' Concatenazione'con'+'' (es:' ciao '+' 'a'tuu )' variabile'booleana' Inverso'con'!' (es'!test''è'false)'

var test = true; ' la'variabile'è'undefined' la'variabile'è'null' la'variabile'è'un'numero.''(anche' float :'5.

20 Conversioni& var answer = 42;! answer = La risposta giusta e ";! answer += 42! // 42 è convertito in stringa e concatenato! answer = 45 3;//42 (conversione automatica)!!! answer = ; //????!!!!! AA' ' Programmazione'WEB' Domanda'

21 Funzioni&uDli& DescripLon:'The'parseInt()'funcLon'parses'a'string' argument'and'returns'an'integer'of'the'specified' radix'(the'base'in'mathemalcal'numeral'systems).' Syntax:'parseInt(string,'radix);' ' DescripLon:'The'parseFloat()'funcLon'parses'a'string' argument'and'returns'a'floalng'point'number.' Syntax:'parseFloat(string);' ' AA' ' Programmazione'WEB'

22 Ancora&sulle&variabili& const'prefix'=' 06';' //'read'only' ' //'case'mavers' var'programmazioneweb;' var'programmazioneweb;' ' ' AA' ' Programmazione'WEB'

23 Esercizio& Creare'una'calcolatrice''in'javascript' (usare'console,'prompt,'variabili'numeriche)'

24 OggeS,&array&e&istruzioni&di& base& AA' ' Programmazione'WEB'

25 OggeS& Un'oggeVo'è'una'lista'di'di'coppie' proprietà ' valore,'racchiuse'in'parentesi'angolari'{'}' Un'valore'può'essere'un'Lpo'primiLvo,'un'altro'oggeVo'o'una' funzione' var studente = {! };!! name: pippo,! age: 22,! scores: [1,2,3],! classes: {pw: 30, fi: 18}! da#qui:#javascript#object#nota5on#(json)# Non'ci'sono'metodi/aVribuL'privaL'' AA' ' Programmazione'WEB'

26 OggeS& var'studente'='{};'//'oggevo'vuoto' studente'='new'object();'//'stessa'cosa' ' studente.voto = 30;!! console.log(studente.voto); // 30! Accedo' console.log(studente[ voto ]); // stessa cosa!!! delete studente.voto;! console.log(studente.voto); // undefined! ' AA' ' Programmazione'WEB' creazione' Aggiungo'proprietà' Rimuovo'proprietà'

27 Array& Contenitori'di'variabili'(anche'con'Lpi'diversi)' Sono'oggeu'con'proprietà'numeriche'e'metodi/ avribul'per' maneggiarli ' Ogni'membro'dell array'ha'un'indice'(che'parte'da'0)' Definizione' var myfirstarray = [5, ciao, false, undefined];! alert(myfirstarray[2]); //'alert( ciao )' myfirstarray.length; // ritorna 4' Accesso'

28 Insidie&degli&array& var a = [ a, b, c ];! a.length;! delete a[0];! a.length;! a[10] = d ;! a.length;!!!!! ritorna 3! [undefined, b, c ]! ritorna sempre 3!! ritorna 11!! AA' ' Programmazione'WEB'

29 Array& Creazione'di'un'array'(equivalenL)' var'arr'='new'array(element0,'element1,'...,'elementn);' var'arr'='array(element0,'element1,'...,'elementn);' var'arr'='[element0,'element1,'...,'elementn];' Modificare'un'membro' myfirstarray[0]'=' nuovo'valore ;' Aggiungere'un'membro' myfirstarray.push( ciao )'//aggiunge'alla'fine'' myfirstarray[10]'=' ciao ;'//'aggiunge'al'decimo'posto''(che'succede'a'length?)' Rimuovere'un'membro' myfirstarray.pop()'//'rimuove'ullmo'elemento'ritornandolo' metodo'splice'//'vedi'dopo' delete'myfirstarray[10]'//'rimuove'l elemento'ma'non'sposta'gli'indici'dell array' Lunghezza'dell array' myfirstarray.length' Svuotare'un'array' myfirstarray'='[]' myfirstarray.length'='0' manualmente'con'cicli'e'splice'(vedi'dopo)'

30 Altri&metodi&uDli& var colors = ['red', 'green', 'blue'];! colors.foreach(function(color) {! });! console.log(color);! var list = myarray.join(" - "); // red green blue! var a = ['a', 'b', 'a', 'b', 'a'];! console.log(a.indexof('b')); // 1! AA' ' Programmazione'WEB'

31 Slicing& slice(start_index,'upto_index)'extracts'a'seclon'of'an'array'and' returns'a'new'array.' var myarray = new Array ("a", "b", "c", "d", "e");! myarray = myarray.slice(1, 4); // starts at index 1 and extracts all elements! // until index 3, returning [ "b", "c", "d"]! splice(index,'count_to_remove,'addelement1,'addelement2,'...)' removes'elements'from'an'array'and'(oplonally)'replaces'them.' var myarray = new Array ("1", "2", "3", "4", "5");! myarray.splice(1, 3, "a", "b", "c", "d");! // myarray is now ["1", "a", "b", "c", "d", "5"]! // This code started at index one (or where the "2" was),! // removed 3 elements there, and then inserted all consecutive! // elements in its place.! AA' ' Programmazione'WEB'

32 Operatori&di&comparazione& new!' =='e'!=' >'e'>='e'<'e'<=' ==='e'!==' Uguale'e'non'uguale' Maggiore,'maggiore'o'uguale,'minore,'minore'o' uguale' IdenLco'o'non'idenLco'(stesso'dato'e'Lpo)' var a = 5 ; // stringa contentente il numero 5! var b = 5; //numero 5! alert(a == b); // true! alert(a === b); // false!

Documenti analoghi

JavaScript. crash course. by Stefano Burigat

JavaScript. crash course. by Stefano Burigat JavaScript crash course by Stefano Burigat Introduzione ECMAScript (no DOM e BOM, no ) Sintassi simile a Java Variabili definite tramite var, loosely typed, operatore comma (,) per separare definizioni