JavaScript Linguaggio definito da Netscape

Slides:



Advertisements
Presentazioni simili
Commenti C#.
Advertisements

In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi Rivediamo velocemente.
Introduzione a AJAX - Asynchronous Javascript And Xml
Javascript: fondamenti, concetti, modello a oggetti
JavaScript Generalità Cos'è JavaScript?
1 Liste e Combo Liste e combo (lista chiusa) hanno una struttura simile: utilizzano gli stessi due tag: e Il primo tag contiene il secondo. deve essere.
Introduzione a Javascript
JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi.
In… Form… iamoci (validazione delle form) Roberto Bruni e Daniela Giorgetti.
JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi.
EVENTI Gli eventi sono delle azioni che possono essere identificate da javascript. 1 - onMouseOver, che viene messo in atto quando l'utente fa scorrere.
Script bash I file di comandi in Linux. BASH  Bourne Again Shell  Modalità interattiva o batch (file di comandi)  Ambiente di programmazione “completo”
1 ELEMENTI DI INFORMATICA Università degli Studi di Cagliari Corso di Laurea in Ingegneria Elettronica Linguaggio C A.A. 2011/2012
CSS ( Cascading Style Sheets) Fogli di Stile Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata.
.  I tipi di dati non primitivi sono gli array, le struct e le union.  Gli array sono degli aggregati di variabili dello stesso tipo.  La dichiarazione.
Dati in rete Appunti.
Ereditarietà Uno dei principi della programmazione orientata agli oggetti (OOP) è il riuso Le classi dovrebbero essere progettate come componenti riutilizzabili.
Ambienti di Programmazione per il Software di Base
La classe String Una stringa è una sequenza di caratteri
CREAZIONE UTENTE SU ORACLE1
Java: concetti e costrutti base
VISUAL BASIC.
Introduzione al linguaggio C
Universita’ di Milano Bicocca Corso di Basi di dati 1 in eLearning C
Terza Lezione → Navigare nel file System → parte 2
7. Strutture di controllo Ing. Simona Colucci
JavaScript Linguaggio definito da Netscape
7. Strutture di controllo
Commenti Ogni riga che comincia con il simbolo # non viene letta dall’interprete per cui rappresenta un modo per commentare il listato # Questo è un esempio.
Excel 1 - Introduzione.
Corso di Ingegneria del Web e Applicazioni A A
Tipo di dato: array Un array è un tipo di dato usato per memorizzare una collezione di variabili dello stesso tipo. Per memorizzare una collezione di 7.
Asynchronous JavaScript and XML
PROGRAMMAZIONE BASH – ISTRUZIONE IF
I tag essenziali.
Informazioni globali nelle pagine HTML
Corso Java Introduzione.
Corso Java Esercitazione.
realizzato dal prof.Conti Riccardo
INFO/CSE 100, Spring Fluency in Information Technology
Introduzione a JavaScript
Corso Java Cicli e Array.
Come personalizzare il sito Web online di Microsoft SharePoint
Esercitazioni di C++ 31 dicembre 2018 Claudio Rocchini IGMI.
Marco Panella Pubblicare in rete Marco Panella
Lettura di input MIDI da Web MIDI API
2. JavaScript nelle pagine web
JavaScript 6. Oggetti e JavaScript A. Ferrari.
Corso di Laurea Ingegneria Informatica Fondamenti di Informatica
Progetto 1 Input Creare una Funzione commentata che prenda come input:
DOM Document Object Model.
8. Altri oggetti JavaScript
APPUNTI SUL LINGUAGGIO C Esercizi su File e Alberi Binari
Le stringhe in C++ Laboratorio 26 Aprile Dott. Serena Villata
Operazione immissione persona
Processi decisionali e funzioni di controllo
APPUNTI SUL LINGUAGGIO C
Programmazione e Laboratorio di Programmazione
Liceo Scientifico «P.S.Mancini» Avellino
Programmazione e Laboratorio di Programmazione
Programmazione e Laboratorio di Programmazione
Hyper Text Mark-Up Language
Programmazione e Laboratorio di Programmazione
JavaScript 3. Le basi di JavaScript A. Ferrari.
Lezione 7 Editing digitale della partitura Creazione di plug-in con interfaccia grafica Laboratorio di Informatica Musicale – Prof. Luca A. Ludovico.
PowerShell di Windows PowerShell è un shell che mette a disposizione un prompt interattivo e un interprete a riga di comando , per le sue caratteristiche.
Fondamentali JavaScript
Script su vettori Realizza uno script che chiede in input una dimensione d e crea un vettore di d numeri interi casuali. Poi calcola la somma dei due numeri.
Corso di Fondamenti di Informatica
Transcript della presentazione:

JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi sul cliente

Un esempio http://www.di.unipi.it/~ghelli/bdl05/esercizi/ese3/menuSubmit.html : Risorse del corso->Materiale esercizi->ese3->menuSubmit.html Provate a selezionare un esame La form si auto-sottomette per aggiornare i dati degli studenti

Un altro esempio http://www.di.unipi.it/~ghelli/bdl05/esercizi/ese3/menulocal.html : Risorse del corso->Materiale esercizi->ese3->menulocal.html Provate a selezionare un esame La form si auto-aggiorna, senza effettuare nessuna submit dietro le quinte, perché contiene le informazioni necessarie

Un altro esempio http://www.di.unipi.it/~ghelli/bdl05/esercizi/ese3/javascript.html : Risorse del corso->Materiale esercizi->ese3->javascript.html Provate a: Selezionare un’opzione del combo box Inserire un valore nel campo accanto Scrivere una stringa nel campo auto-incrementante

Variabili, Operatori, Commenti Variabili con tipo, ma non dichiarato (e conversione implicita a string) var x = 5 var s = "luigi" s + x -> "luigi5" Tipi: numerici, stringhe, bool, funzioni, oggetti, null Identificatori: lettere+_, case sensitive, anche interi Terminazione dei comandi: newline, ;, o entrambi. Operatori del C: +,-,*,/,%, &&,||, ==, !=, <, > && ed || sono valutati in modo ordinato. Commenti: da // a fine linea (consigliato) e tra /* e */, Uno statement puo’ occupare piu’ righe

Costanti 3.9 // numeric literal "Hello!" // string literal "Perche′" // string literal ′Value = "aa"′ // string literal false // boolean literal null // literal null value {x:1, y:2} // Object literal [1,2,3] // Array literal function(x){return x*x;} // function literal

Coercion Stringhe, booleani, e interi sono convertiti mutuamente se necessario Ad esempio: “a” + 1 -> “a1” parseInt(“123”) si usa per convertire una stringa in un intero (accetta anche: 123abc)

Esempio di codice var parsedF = parseInt(document.Forma1.Anno.value); if (isNan(parsedF)) { alert(document.Forma1.Anno.value + “is not an integer!”); } else { document.Forma1.Anno.value = parsedF; }

Comandi: if e while If: Oppure: While: if ( cond ) { comandi } } else { While: while ( cond ) { In JScript ed ECMAScript la divisione in linee non e’ obbligatoria Esistono anche switch, do/while, break, continue…

For e Funzioni for: Funzioni: for (init; cond; incr) { comandi } Funzioni: function NOME (listaParams) { body Parametri separati da virgole, valore ritornato con return(valore); i parametri sono passati per valore Esistono anche gli oggetti; si creano vuoti, e si aggiungono proprieta’ estendendo l’oggetto Obj.age == obj[“age”] = obj[a] se a= “age”; gli array sono oggetti con una proprieta’ length predefinita. Per creare oggetti basta avere definito prima la funzione con lo stesso nome (il costruttore)

Oggetti (array associativi) var studenti = { BDL : ["Marco", "Mario", "Maria"], ALG : ["Lucia", "Linda", "Luca" ] }; studenti["BDL"] => ["Marco", "Mario", "Maria"] studenti ["BDL"][0] => "Marco" X = "BDL"; studenti[x][0] => "Marco" for (x in studenti) { x … studenti[x] … }

Stringhe Concatenazione: + Alcuni metodi: stringa.length stringa.substring(start,end) stringa.substr(start,length) stringa.charAt(index) JScript supporta le espressioni regolari

Eventi Gestiti dal Browser Di pagina: loading, unloading Associati ai bottoni: click, submit Associati ai campi di tipo text e select: change select: selezionare una porzione di testo (non nei componenti select) focus/blur: rendere il campo pronto ad accettare input

Associare codice ed eventi Attributo onEvent, per i componenti di una form: <INPUT TYPE="button" NAME="mycheck" VALUE="HA!" onClick="alert('I told you not to click me');"> Il valore dell’attributo è un pezzo di codice che gestisce l’evento Attributo onSubmit, per l’intera form; se la funzione ritorna false, la sottomissione non avviene: <FORM NAME="formname" ... onSubmit="submithandler()"> Per il documento, onLoad, onUnload: <BODY onLoad="loadfunc()" onUnload="unloadfunc()">

Il Tag SCRIPT Meglio metterlo nello head Carica da file: <SCRIPT LANGUAGE="JavaScript" SRC="jscode/click.js"> </SCRIPT> Codice immediato: tra <SCRIPT> e </SCRIPT>, meglio se commentato con <!-- -->: <!-- function dontclickme() { alert("I told you not to click me"); return( false ); } <!-- end script -->

Leggere e scrivere i campi di una form Se la form si chiama myForm, con un campo text chiamato myText, posso scrivere, in una funzione: document.myForm.myText.value += 1; Oppure, nel tag del campo: onChange = “this.value += 1” Per un campo select, posso accedere alla prima opzione scrivendo: document.myForm.mySelect.options[0].value += 1; Posso accedere all’opzione corrente scrivendo: document.myForm.mySelect.options[document.myForm.mySelect.selectedIndex].value += 1;

Accedere ai campi per Id Aggiungere un attributo ID all’elemento: <INPUT TYPE="button" ID="mycheck" NAME="mycheck" .... A questo punto, posso scrivere: var bottone = getElementById(‘mycheck’) Più semplice di: var bottone = document.myform.mycheck

Alcune funzioni importanti form.submit() alert() navigate() Attributi (element.attribute = …): Name Value InnerHTML Style …

Una funzione che fa un controllo function checkit() { var strval = document.myform.mytext.value; var intval = parseInt(strval); if ( 0 < intval && intval < 10 ) { return( true ); } else { alert("Value " + strval + " out of range"); return( false ); }

Esecuzione dell’esercizio Copio il file .../javascript.html sotto ~/public_html/ Rendo il file leggibile da tutti: chmod o+rx ~/public_html/javascript.html Esploro la forma creata: http://www.cli.di.unipi.it/~mioNomeAccount/javascript.html La modifico lavorando sul file: ~/public_html/javascript.html

Esercizio Uso charAt per fare si che venga aggiunto % solo quando la stringa non finisce con % Uso un while su AnnoPrimaIscrizione.options[i].value per settare selected solo quando ….[i].value = anno Aggiungo una checkbox Laureato, per cui, solo quando viene selezionata, appare un campo text ‘DataLaurea’

Esercizio Aggiungo dei radio button: Per scegliere il secondo: <INPUT TYPE=“radio” NAME=“AnnoRadio” VALUE=“2000”>2000 <INPUT TYPE=“radio” NAME=“AnnoRadio” VALUE=“1999”>1999 Per scegliere il secondo: Document.Forma.AnnoRadio[1].checked = true;