Sintaxi del llenguatge I

De wikijoan
Salta a la navegació Salta a la cerca

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

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

Aquest guió només és una plantilla del que s'ha d'entregar. Com s'ha comentat a classe, en aquestes primeres pràctiques de sintaxi es tracta de practicar codi, tan com sigui possible. Per practicar el codi, teniu el tutorial de w3school, però n'hi ha d'altres. El codi el practicareu de diferents maneres, fitxers html (amb el codi javascript incorporat o en fitxers externs); en la consola de Node (heu d'instal·lar Node); amb editors en el núvol com Codepen.

En aquesta primera pràctica no es mirarà si s'han fet més o menys exercicis. En funció dels coneixements previs, l'alumne en farà més o menys, i hi dedicarà més o menys estona.

Sempre es demana un fitxer readme.txt o similar per tal de donar informació al professor: dubtes, èxits, comentaris, etc.

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
...
---
una altra possibilitat:
enllaç a un exercici fet a codepen.io o jsfiddle
---
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

NOTA: algun alumne pot fer de forma voluntària un curs d'Introducció al Javascript (MOOC, massive online open course): edX, coursera, openwebinars, codeacademy.



creat per Joan Quintana Compte, setembre 2020