LMSGI

Llenguatges de marques i sistemes de gestió d'informació - DAW, DAM, ASIX

View on GitHub

JavaScript

Introducció

Tecnologies web

Fins ara heu treballat amb pàgines web estàtiques

Es poden aconseguir pàgines web dinàmiques si hi afegim estructures de programació. Però…

A on s’executarà el codi, al navegador o al servidor?

Front-end

Tecnologies que s’executen al costat del client (navegador).

JavaScript

Back-end

Tecnologies que s’executen al servidor.

Llenguatges back-end

Què és JavaScript?

Història

Brendan Eich

Què es pot fer amb Javascript?

Teoria completa www.w3schools.com

Canviar contingut

⚠️ Tot i que els següents exemples tenen l’html i el javascript al mateix document, les bones pràctiques recomanen que estiguin en fitxers separats.

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Demo

Canviar valors d’atributs

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

Demo

Canviar estils

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>


</body>
</html>

Demo

Ocultar elements

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>


</body>
</html>

Demo

Mostrar elements

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

Demo

Fixa’t en dos aspectes importants:

Incloure codi JS

Teoria completa a w3schools.com

Podem incloure codi Javascript en una pàgina web de 3 formes diferents:

En el mateix document

El codi Javascript es troba tancat entre les etiquetes <script> en qualsevol part del document.

Es recomana la definició del codi en la capçalera del document <head>.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Exemple de codi JavaScript en el propi document</title>
	<script>
  		alert("Hola mòn!!");
	</script>
</head>
 
<body>
	<p>Benvinguts al mòn Javascript</p>
</body>
</html>

Demo

Inconvenients

En els elements HMTL

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Demo

Inconvenient

En un fitxer extern

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple de codi JavaScript en un document extern</title>
        <script src="/js/myScript.js"></script>
    </head>
    <body>
        <h2>External JavaScript</h2>
        
        <p id="demo">A Paragraph.</p>
        
        <button type="button" onclick="myFunction()">Try it</button>
        
        <p>(myFunction is stored in an external file called "myScript.js")</p>    
    </body>
</html>

// File name: js/_myScript.js
function myFunction() {
    document.getElementById("demo").innerHTML="Paragraph changed.";
}

Demo

Avantatges

Sintaxi del llenguatge

No es tenen en compte els espais en blanc i les noves línies

Com en HTML, JavaScript ignora qualsevol espai en blanc sobrant, el codi es pot ordenar per a entendre’l millor.

Per exemple: Tabulant, amb espais, etc.

Es distingeixen les majúscules de les minúscules

JavaScript és Case sensitive.

En JavaScript una variable anomenada Comptador no és el mateix que comptador.

⚠️ Majúscula != Minúscula

⚠️ Comptador != comptador

No es defineix el tipus de les variables

En crear una variable, no és necessari indicar el tipus de dada que emmagatzemarà.

No és necessari acabar cada sentència amb el caràcter de punt i coma (;)

Encara que JavaScript no obliga a fer-ho, és convenient seguir la tradició d’acabar cada sentència amb el caràcter ;

Comentaris

Comentaris d’una sola línia

// Comentari una sola línia 
alert("Hi JS developers");

Comentaris de més d’una línia

/* Els comentaris de varies línies son útils quan es necessita 
incloure molta informació en els comentaris */
alert("Hi JS developers");

Altres aspectes

GitBook d’en Sergi Coll: