0 - Primers pasos

Javascript és un llenguatge de pàgines web que el que fa és donar interacció a tots aquells elements que conté, ja siguen botons, imatges, menús, demanar informació, canviar colors de pantalla, etc.

Per a treballar amb JS anem a utilitzar el programa Atom. En aquest programa anem a crear fitxers html que contindran el codi javascript. Per fer-ho, a Atom indica File > Open folder i selecciona la carpeta Documents. Una vegada obert, a la part esquerra on apareixen els fitxers i les carpetes fes botó dret i Create folder i anomena'l Javascript. Dins d'aquest crea 3 carpetes:

Ara, dins de 00_Primers_passos, crea un fitxer que s'anomene proves.html

Escriure en la web

Dins del fitxer proves.html escriu la paraula html i apreta la tecla tabulador i veuràs com automàticament es crea una estructura bàsica d'HTML. Com que ara no anem a veure html només li hauràs d'afegir i/o canviar el que està en negreta, que servirà per dir-li al fitxer html que utilitzarà codi javascript.

Fitxer proves.html

<!DOCTYPE html>

<head>

<script>

document.write('hola');

</script>

</head>

<body>

</body>

</html>

Per provar-ho obri la carpeta on estiga el fitxer html i obri'l amb el navegador i veuràs la paraula hola que havies escrit al fitxer javascript.

Si a continuació escrivim el mateix però amb adeu fíxa't que apareixen els dos en la mateixa linia, així que entre els dos afegeix un que diga <br> que és un salt de línia en html. A més, fíxa't que totes les línies acaben en ; i que s'executen totes una rere l'altra.

Una altra cosa és la instrucció document.write() en la qual dins dels parèntesi està inclos el que volem mostrar per pantalla, com és un text ho posem entre cometes, però, si volem posar un número ho posarem sense. Però, pots escriure tant el número entre cometes com sense que sempre es mostrarà el mateix.

document.write('hola');

document.write('<br>');

document.write('adeu');

document.write(2);

document.write('2');

Mostrar dades en popup

Així com si utilitzem document.write escriu en pantalla, si utilitzem alert el que farà és mostrar un popup amb el missatge que vulgam. Fixa't que posa dobles cometes quan dins d'un text he de posar un apostrof

alert('Vicent')

alert("Vaig nàixer l'any 1992");

alert(3);

Demanar dades a l'usuari

Amb la funció prompt podem fer que l'usuari ens done dades i poder mostrar-les. Fixa't en l'exemple:

document.write( prompt('Indica el que vols escriure a pantalla') );

Açò farà que el navegador pregunte a l'suuari Indica el que vols escriure a pantalla, després el que es fa es mostrar el que escriurà en la pantalla del navegador.

Exercici

(Nom del fitxer: 00_Exercici1.html) Exercici 1:Ara, escriu un xicotet programa amb 3 instruccions per fer un entrepà de pernil:

1 - Obrir el pa

2 - Posar tomata al pa

3 - Posar el pernil a trocets

4 - Menjar-lo

Page updated

Google Sites

Report abuse