Scribd Logo
Carica

Benvenuto in Scribd!

  • Javascript: Charset

    Caricato da

    Rvhuonubtg Nukhrfyjik
    9K visualizzazioni8 pagine

    Titolo originale

    Untitled

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    9K visualizzazioni8 pagine

    Javascript: Charset

    Caricato da

    Rvhuonubtg Nukhrfyjik

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 8

    <!

    doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>javascript</title><!--javascript è in
    linguaggio di scripting,è un linguaggio di proggrammazione che
    non viene compilato e trasformato in codice binario me rimane
    semplice testo che è interpretato ed eseguito a run time-->
    <!--è un linguaggio lato client ovvero il codice
    javascript è eseguito dal browser dell'utente e non dal
    server-->
    <!--è un linguaggio a eventi e orientato agli oggetti,Un
    evento è una qualsiasi interazione tramite l’interfaccia
    grafica del browser: per esempio il passaggio del mouse o clic
    su un oggetto, il trascorrere di un dato tempo o anche la
    semplice apertura di una pagina web. -->
    <link rel="stylesheet" type="text/css"
    href="menu.css">
    <script type="text/javascript"><!--il codice javascript
    è incorporato nella sezione HEAD dell'html mediante il tag
    <script> in questo caso il tag deve sempre specificare
    type="text/javascript"-->
    function automobile ()<!-- una funzione è un'insieme
    riutilizzabile di istruzioni per eseguire un compito o
    calcolare un valore -->
    {alert ("benvenuti nel mio sito");}<!--il riqudro di
    avviso allert è gestito dal browser in generale percio
    l'aspetto e il funzionamento del riquadro saranno diversi nei
    vari browser -->
    <!--alert è un metodo che serve per mostrare un finestra
    di avviso, viene utilizzato per comunicare all'utente un
    messaggio-->
    <!--esempio: rendere un testo sensibile al passaggio del
    mouse.-->
    function sopra (obj)
    {obj.innerHTML="mi fai il solletico"}<!--inner è un
    metodo-->
    function fuori (obj)
    {obj.innerHTML="non farmi il solletico"}
    <!--le funzioni sopra() e fuori() cambiano la scritta
    presente nell’oggetto HTML che viene loro passato
    (obj.innerHTML) -->
    </script>
    </head>
    <body onload="automobile()"><!--la funzione è eseguita al
    verificarsi dell’evento onload, ossia quando viene caricato il
    tag <BODY> -->
    <h1>questo è il mio sito</h1>
    <p onmouseover="sopra(this)" onmouseout="fuori(this)">
    non farmi il solletico</p><!--la parola-chiave this («questo»)
    indica l’oggetto in cui la si usa, qui il tag <P>; è utile come
    abbreviazione o per copiare-e-incollare il codice in oggetti
    diversi -->
    <!--l’oggetto qui è il paragrafo <P>, che richiama le
    funzioni in base agli eventi onmouseover («quando il mouse è
    sopra») e onmouseout («quando il mouse è fuori»)-->
    <p id="f"></p> <!--al secondo paragrafo è associato
    l’identificatore prova o f, senza specificare alcun
    contenuto-->
    <p id="dimensioni"></p>
    <p>esempi di variabili implicite <br>
    e dei tipi di dato in javascript </p>
    <p id="variabile"></p>
    <p id="1"></p>
    <p id="2"></p>
    <p id="3"></p>
    <p id="4"></p>
    <p id="uno"></p>
    <p id="due"></p>
    <p id="tre"></p>
    <p id="quattro"></p>
    <p id="cinque"></p>
    <p id="sei"></p>
    <p id="sette"></p>
    <p id="oggetti"></p>
    <button onclick="mostra()">fai click qui</button><!--il
    tag <button> crea un pulsante, cioè un oggetto sensibile al clic
    del mouse, che in HTML è l’evento onclick-->
    <p id="nasc"></p>
    <script >
    document.getElementById("f").innerHTML="paragrafo
    inserito con javascript";<!--il testo del secondo paragrafo è
    specificato mediante uno script: il metodo getElementById
    individua il tag tramite l’id e gli assegna il testo tra doppi
    apici-->
    <!--Per riferirsi a un oggetto specifico, in JavaScript
    si usa la parola-chiave document seguita dall’operatore punto.
    Per esempio, l’espressione: document.getElementById(nome_id)
    invoca il metodo getElementById («trova l’elemento in base al
    suo id») dell’oggetto document, passando come parametro l’id
    del tag su cui agire-->
    var w = window.innerWidth
    var h = window.innerHeight
    <!--innerWidth e innerHeight sono proprietà del BOM
    (infatti iniziano con window) che lo script usa per
    inizializzare w e h-->
    var x = document.getElementById("dimensioni")
    x.innerHTML = "la finestra del browser è larga " + w +
    " pixel ed è alta " + h + " pixel";
    <!--la terza variabile x, definita tramite l’id
    dimensioni, è il tag paragrafo su cui si vuole agire; il testo
    concatena stringhe e variabili con l’operatore + -->
    document.getElementById("variabile").innerHTML=
    typeof "andrea" + "<br>" + <!--nb: si possono concatenare
    anche i tag HTML, purché tra doppi apici-->
    typeof 12 + "<br>" + <!--l’operatore typeof ricava a
    runtime il tipo di dato dei valori che lo seguono-->
    typeof 15.17 + "<br>" +
    typeof true + "<br>" +
    typeof andrea; <!--Andrea non è tra apici, quindi per il
    JavaScript non è una stringa, né un numero, né un valore
    booleano-->
    var x=10;
    var y=7;
    var z=x+y; <!--qui z è una variabile numerica,il simbolo
    + è un operatore aritmetico-->
    document.getElementById("1").innerHTML="io
    ho"+z+"anni";
    x="10"; <!--poiché x non è più un numero, nemmeno z sarà
    un numero -->
    z=x+y;<!-- il simbolo + è automaticamente diventato un
    operatore di concatenamento-->
    document.getElementById("2").innerHTML="io
    ho"+z+"anni";
    document.getElementById("3").innerHTML="io
    ho"+x+y+"anni"; <!--il browser identifica il primo termine
    come stringa, perciò concatena anche x e y come stringhe-->
    document.getElementById("4").innerHTML=io +x+y+"anni";
    <!--qui ho senza apici è una variabile undefined; l’intera
    espressione allora diventa undefined, perciò il browser non la
    visualizza, se invece ne ho 2 di variabili undefined la pagina
    sara totalmente bianca-->
    var colori = ["bianco","rosso","blu"];
    var misto = ["bianco",1000,12.56];
    document.getElementById("uno").innerHTML=
    colori.length; //è um metodo dell'arrey, restituisce il numero
    di elementi presenti nell'arrey
    document.getElementById("due").innerHTML=
    colori[0];<!--un elemento si specifica con il valore
    dell’indice tra parentesi quadre-->
    document.getElementById("tre").innerHTML=
    misto;<!--per visualizzare un intero array, basta scriverne il
    nome-->
    document.getElementById("quattro").innerHTML=
    misto[1]+misto[2];
    document.getElementById("cinque").innerHTML=
    colori.push ("giallo");//aggiunge al fondo dell'arrey
    l'elemento specifico tra doppi apici poi restituisce la nuova
    dimensione dell'arrey; invece unishift aggiunge l'elemento
    all'inizio dell'arey
    document.getElementById("sei").innerHTML=
    colori.sort();//ordina l'arrey, tipo giallo che prima stava
    infondo addesso sara al secondo posto, per ordine alfabetico,
    il metodo funziona pure con arrey numerici e misti
    document.getElementById("sette").innerHTML=
    colori.shift();//elimina il 1 elemento dell'arrey e
    restituisce l'elemento eliminato;.pop() elimina l'ultimo
    elemento
    var studente={nome:"claudia", classe:"quarta b",eta:16,
    nomeanni:function()
    {return this.nome+"ha"+this.eta+"anni";}}
    document.getElementById("oggetti").innerHTML=
    studente.nomeanni();
    function mostra()//Un evento è l’effetto di un’azione del
    browser o dell’utente
    {document.getElementById("nasc").innerHTML=
    "ciao";}//quando l’evento si verifica, il codice richiama la
    funzione mostra_nascosto(), che fa apparire il secondo testo,
    assegnandolo al tag <DIV> con id="nasc"
    </script>
    </body>
    </html>
    <!--Il DOM è un modello standard a oggetti della struttura delle
    pagine HTML.
    JavaScript opera sugli oggetti definiti dal DOM (Document
    Object Model) dell’HTML, che è uno standard stabilito dal
    consorzio W3C.
    Ogni pagina web è considerata un oggetto document, cioè un
    documento, che è origine e contenitore di ogni altro oggetto
    del DOM.
    -->
    <!--Il BOM è un modello non standard a oggetti dell’interfaccia
    di un browser.
    L’oggetto principale nella gerarchia BOM è window, cioè la
    finestra del browser.
    Il BOM è di livello superiore rispetto al DOM: include anche
    l’oggetto document, giacché una pagina HTML esiste soltanto
    all’interno della finestra di un browser.
    Purtroppo però il BOM non è uno standard W3C. Ogni produttore
    di browser ha sviluppato il proprio modello BOM; questo può
    causare incompatibilità quando si cerca di sfruttare con
    JavaScript oggetti e metodi resi disponibili dai diversi BOM.
    -->
    <!--Gli script si possono scrivere:
    • all’interno di un tag <SCRIPT> nella sezione <HEAD> o nella
    sezione <BODY>
    • oppure in un file esterno, che deve avere estensione .js e
    si richiama dalle pagine HTML inserendo nella sezione <HEAD>
    il tag:
    <script type="text/javascript" src="percorso del
    file"></script>
    L’uso dei file esterni è sempre raccomandabile, perché rende
    il codice modulare e ne facilita il riutilizzo e la
    manutenzione.-->
    <!--javascript è case-sensitive ossia distingue tra lettere
    maiuscole e minuscole: una variabile a è differente da una
    variabile A-->
    <!-- in javascript i tipi di dato primitivi string, boolean,
    number, undefined e null sono interpretati a run time
    Una variabile in JavaScript si dichiara scrivendo la
    parola-chiave var:
    var X=5;
    var nome="Giovanni";
    var valuta=true;
    var y=null;
    var Zeta; (in quest’ultimo caso il dato è undefined)
    La tipizzazione debole delle variabili in JavaScript permette
    di assegnare a una stessa variabile – in momenti diversi di uno
    stesso script – tipi di dato diversi:
    var x; x è undefined
    x=-5; ora x è number
    x="Lucia"; adesso x è diventata string
    -->
    <!--JavaScript ha i consueti operatori di tutti i linguaggi,
    più alcuni speciali.
    • gli operatori aritmetici +,-,*,/,%
    • gli operatori di incremento ++ e di decremento --
    • l’operatore di assegnamento = e le sue versioni composte
    +=,-=,*=,/=,%= (esempio: var1 += var2 equivale a var1 =
    var1+var2)
    • gli operatori di confronto ==,!=,<,>,<=,>= usati nelle
    strutture condizionali
    • gli operatori logici && (AND), || (OR) e ! (NOT)

    L’operatore + applicato alle stringhe diventa operatore di


    concatenamento.
    Inoltre, poiché JavaScript non esplicita il tipo di dato delle
    variabili, esistono anche gli operatori di confronto ===
    (controlla che siano uguali sia il valore sia il tipo) e !==
    (controlla che sia diverso il valore oppure il tipo).
    -->
    <!--In JavaScript gli array sono insiemi indicizzati (a partire
    da 0) e dinamici che possono contenere variabili anche di tipo
    diverso.
    La sintassi per dichiarare e inizializzare un array in
    JavaScript è:
    var nomeArray = [elemento0, elemento1, elemento2, …];
    Un array può essere utile in particolare per creare e gestire
    liste HTML
    -->
    <!--JavaScript non ha le classi: gli oggetti si creano
    definendoli nel codice.
    Quando si vuole usare un oggetto in uno script,
    se ne definiscono le proprietà con questa sintassi:
    var nome_oggetto={proprietà1:valore1, proprietà2:valore2,
    …};
    Agli oggetti di JavaScript si possono associare anche metodi,
    cioè funzioni.
    Queste funzioni vanno definite all’interno delle parentesi
    graffe nella dichiarazione dell’oggetto.

    Per definire un metodo nome_funz si scrive, dopo l’elenco delle


    proprietà:
    nome_funz : function (argomenti) {istruzioni da eseguire;}

    Il metodo poi si invoca usando l’operatore punto:


    nome_oggetto.nome_funz()

    -->
    <!--Per creare più oggetti con la stessa struttura si usa un
    metodo costruttore con la parola-chiave new.
    il metodo ha come argomenti le proprietà dell’oggetto-tipo e
    funge da modello per la creazione degli oggetti che ne sono
    istanze
    qui con la parola-chiave new si creano due diversi oggetti
    basati sul metodo studente()
    poi si fanno visualizzare al browser alcune proprietà dei due
    oggetti, concatenate con altre stringhe
    Si possono associare eventi anche agli oggetti del BOM, oltre
    che del DOM.
    -->
    <!--I moduli, in inglese form, sono tra gli strumenti di uso
    più comune nel web.
    Si compila un modulo ogni volta che ci si iscrive a un nuovo
    servizio, per esempio un social network o un sistema di
    pagamento online.
    L’inserimento di un modulo in un sito web coinvolge quattro
    diverse tecnologie:
    • il linguaggio HTML, per la definizione della struttura del
    modulo;
    • un linguaggio di scripting lato client, come JavaScript, per
    vagliare i dati inseriti;
    • un linguaggio di scripting lato server, come PHP, per
    acquisire i dati inviati;
    • un database sul web server, come MySQL, per memorizzare i dati
    ricevuti.
    l’attributo CSS display:inline-block adatta le cornici alla
    larghezza dei campi o dei pulsanti
    il codice del modulo è racchiuso nel tag <FORM>
    i tag <FIELDSET> suddividono il modulo in blocchi grafici
    autofocus: all’apertura della pagina il cursore sarà già in
    questa casella
    placeholder: mostra un testo sbiadito come modello per la
    compilazione
    value: la casella è pre-compilata con un testo di default
    con type="email" il browser controlla automaticamente la
    sintassi del testo digitato
    required obbliga a compilare il campo
    con <INPUT type="submit"> i dati saranno inviati al server
    <SELECT> crea un menu a tendina; <OPTION> sono le possibili
    scelte
    type="radio" definisce un elenco di scelte mutuamente
    esclusive
    <TEXTAREA> crea una casella di testo in cui l’utente può
    digitare liberamente
    -Con JavaScript si può controllare la validità dei dati
    inseriti in un modulo.
    ->

    Potrebbero piacerti anche