Aclaracions Javascript UF1

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Aclaració. Javascript com a llenguatge interpretat

Sempre que programem amb Javascript hem de pensar que és un llenguatge interpretat, i que el navegador executa de forma seqüencial les comandes. De totes maneres, executar de forma seqüencial no ens ho hem de prendre al peu de la lletra, perquè el motor de Javascript té diferents tècniques i pautes d'execució. Com a norma general, però, hem de pensar que no podem fer referència a un objecte si aquest no s'ha declarat prèviament, o no podem cridar a una funció si aquesta no s'ha definit prèviament.

Hem de pensar a més que el codi de Javascript incrustat dins el codi HTML no s'executa de la mateixa manera. El navegador web interpreta el codi HTML, i quan troba instruccions Javascript les envia al motor de Javascript (ie Spidermonkey).

Cas 1

Aquest codi evidentment funciona. Primer definim la funció i després cridem a la funció.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aclaració Javascript</title>

</head>
<body>
    <h1>Aclaració Javascript</h1>

    <script type="text/javascript">

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
    }

    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);

    </script>

</body>
</html>

Cas 2

En el següent cas la marca es printa bé encara que la definició del constructor/funció estigi per sota de la crida. Diguem que l'intèrpret de Javascript sap trobar la funció i la guarda en memòria.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aclaració Javascript</title>

</head>
<body>
    <h1>Aclaració Javascript</h1>

    <script type="text/javascript">

    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
    }

    </script>

</body>
</html>

Cas 3 i 4

Els dos casos anteriors funcionen perfectament si fiquem el codi en el head:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aclaració Javascript</title>

    <script type="text/javascript">
    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
    }
    </script>

</head>
<body>
    <h1>Aclaració Javascript</h1>


</body>
</html>

Cas 5

És una bona pràctica incloure les nostres funcions de Javascript en llibreries externes. Per exemple, anem a crear el fitxer llibreria.js que inclou el constructor de l'objecte i totes les funcions relacionades amb el comportament de l'objecte.

llibreria.js

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
    }

I podem fer referència a a aquesta llibreria com un fitxer extern:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aclaració Javascript</title>
    <script type="text/javascript" src="llibreria.js" ></script>
    <script type="text/javascript">
    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);
    </script>

</head>
<body>
    <h1>Aclaració Javascript</h1>

</body>
</html>

o bé:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aclaració Javascript</title>
    <script type="text/javascript" src="llibreria.js" ></script>

</head>
<body>
    <h1>Aclaració Javascript</h1>
    <script type="text/javascript">
    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);
    </script>
</body>
</html>

Recordem que l'etiqueta script sempre s'ha de tancar:

<script></script>

Quan un tag no está buit no podem tancar-lo utilitzant la notació abreviada de self-closing. No es pot utilitzar

    <script type="text/javascript" src="llibreria.js" />

S'ha d'utilitzar:

    <script type="text/javascript" src="llibreria.js"></script>

tal com està explicat a

És a dir, que el tag script no està buit (conté les propietats type i src), i per tant no podem utilitzar la mateixa notació que fem amb

<br />

Llibreries

La idea d'utilitzar llibreries (per exemple jquery.js) és perquè ens pot interessar definir tota una biblioteca de funcions que podem cridar des dels diferents punts del projecte. És bo que aquestes instruccions no incloguin comandes com ara document'write o document.getElementById

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
	document.getElementById("resuyltat").innerHTML = this.marca;
	document.write ("s'ha creat l'objecte");
    }

Aquesta pràctica és errònia perquè ens carreguem la filosofia MVC (model vista-contrlador), que pretén separar totalment la lògica del programa dels seu disseny, interfície i context. Hem de pensar que les nostres llibreries les podem reutilitzar en projectes futurs (en projectes on no existirà el id=resultat. També pensar que la nostra llibreria es pot reutilitzar en un àmbit on no existeixi l'objecte document (és a dir, que no estigui associat a un navegador web en un ordinador, smartphone, tauleta,...). Per exemple, et pot ajudar pensar que la nostra llibreria la podem utilitzar en l'àmbit del Spidermonkey (consola), on no existeix l'objecte document.

Validació XHTML

Recordem que si volem validar el nostre codi com a XHTML, les comandes Javascript les haurem de fer transparents al validador. Això ho fem de la següent manera:

<script type="text/javascript">
//<![CDATA[
    ordenador = new ordenadorObj("Intel", "Core i7", 4, "1TB");
    document.write (ordenador.marca);

    function ordenadorObj (marca, cpu, ram, hdd)
    {
        this.marca = marca;
        this.cpu = cpu;
        this.ram = ram;
        this.hdd = hdd;
        this.estado = false;
    }
//]]>
</script>

creat per Joan Quintana Compte, novembre 2013

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines