Sintaxi del llenguatge I
Objectius
En aquesta primera pràctica hauràs d'anar definit el teu IDE (Entorn de desenvolupament): Netbeans, Sublime,...
També aniràs aprenent a depurar els errors en el codi, llegint bé a la consola els missatges d'error.
Concretament, farem l'exercici de la bombeta: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Implementaràs l'exercici en els diferents entorns:
- w3school
- en local
- jsfiddle o codepen o en qualsevol altra plataforma al núvol per fer proves, com ara el curs d'introducció de Javascript de http://www.codecademy.com
- Consola (NodeJS) (aquí no pots mostrar la bombeta!)
Investigació: eliminar els botons, i fer que la bombeta vagi canviant entre encès i apagat cada segon.
Introducció
Aquesta pràctica té per objectiu iniciar-se en l'aprenentatge i familiarització de la sintaxi de Javascript, i continua amb les següents pràctiques. Així mateix s'explica el procediment i la pauta que seguirem mentre s'explica la teoria i es fa la pràctica.
El tutorial que seguirem per aprendre Javascript és el de http://www.w3schools.com/ (en anglès). En aquest tutorial, tots els exemples estan orientats a la web. El procediment que seguirem serà:
- el professor explicarà la teoria.
- els alumnes faran i provaran els exercicis proposats (en un entorn HTML o de consola).
- els alumnes adaptaran els exercicis proposats a un entorn de consola. Els fitxers generats tindran extensió .js. Per exemple,
$ node ruta/codi.js
- els alumnes assimilaran els conceptes i miraran d'ampliar coneixements, fer provatures,...
Referències
- http://www.w3schools.com/js/default.asp
- http://www.w3schools.com/js/js_intro.asp
- http://www.w3schools.com/js/js_whereto.asp
- http://www.w3schools.com/js/js_statements.asp
- http://www.w3schools.com/js/js_comments.asp
Desenvolupament
Els alumnes provaran amb l'ordre proposat tots els exemples que s'han explicat a classe.
Anem a fer un exemple dels proposats. El fitxer this_is_a_paragraph.html s'executa obrint-lo en un navegador web:
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript can write directly into the HTML output.
</p>
<script>
document.write("<p>This is a paragraph.</p>");
</script>
</body>
</html>
Entrega
Els alumnes entregaran al Classroom tots els fitxers generats (fitxers html, js, etc.). S'empaquetaran tots aquests fitxers i es pujaran al Classroom dins del termini d'entrega de la pràctica.
Recorda la normativa per entregar les pràctiques al Google Classroom: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom
Guió de l'entrega
fitxers html amb scripts incrustats <script>
fitxers html amb scripts externs
document.getElementByID("demo").innerHTML(Date())
----
Node
> console.log(Date());
$ node /ruta/pr1_1.js
$ node /ruta/pr1_2.js
...
---
captura de pantalla
readme.txt
---
https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
---
Recollir tots els fitxers, empaquetar-los, i enviar al Classroom
creat per Joan Quintana Compte, setembre 2019
