Mostra la font per a Tutorial de Javascript: http://www.w3schools.com/js/

=Introducció=
Seguirem el següent manual online:
*http://www.w3schools.com/js/

Com a introducció de la sintaxi del llenguatge explicarem a classe '''JS Tutorial''', des de '''JS Home''' fins a '''JS validation'''

L'alumne, en la mesura del possible, haurà de treballar en aquestes primeres sessions directament amb la shell, utilitzant el motor ''Spidermonkey''.
=Exemples aclaridors vistos a classe=
===Exemple 0===
Diferència entre l'operador '==' i l'operador '===':
<pre>
<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>

<script>
var cad;
//== 	equal to
cad1 = (5 == 3);
cad2 =  ('5' == 5);
//=== 	equal value and equal type
cad3 =  ('5' === 5);


document.getElementById("demo1").innerHTML = cad1;
document.getElementById("demo2").innerHTML = cad2;
document.getElementById("demo3").innerHTML = cad3;
document.getElementById("demo4").innerHTML = typeof '5';
document.getElementById("demo5").innerHTML = typeof 5;
</script>

</body>
</html>
</pre>
===Exemple 1===
Adaptar a la consola del Node el següent exemple:
*http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
<pre>
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>Click Date to display current day, date, and time.</p>

<button type="button" onclick="myFunction()">Date</button>

<p id="demo"></p>

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

</body>
</html> 
</pre>

script ''date.js'':
<pre>
function myFunction() {
    return Date();
}

console.log ("La data del sistema és: ");
console.log (myFunction());
// o bé
//console.log (Date());
</pre>

===Exemple 2===

*http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate
<pre>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
</pre>

Aquest codi no el podem adaptar a la consola de Node, doncs el context importa: un navegador web té una interfície d'usuari i podem interactura, per exemple clicant el botó. En canvi, en la consola el concepte de ''clicar el botó'' no existeix, com tampoc existeix el concepte de ''popup'' (finestres emergents).

===Exemple 3===
script ''undefined.js''
<pre>
var a;
console.log(a);

var x=5;
var y;
var z=x+y;
console.log (z);
</pre>

===Exemple 4===
script ''newstring.js''
<pre>
var txt1 = new String("Hello World");
print (txt1.length);

var txt2 = "Hello World 2";
print (txt2.length);
</pre>
===Exemple 5===
script ''tripleigual.js''
<pre>
var x=5;

//true
print (x == 5) ;

//true
print (x == "5") ;

//true
print (x === 5) ;

//false
print (x === "5") ;
</pre>
===Exemple 6===
script ''compararcadenes.js''
<pre>
var cad1 = "pepe";
var cad2 = "pepe";

print (cad1 == cad2);
</pre>
===Exemple 7===
script ''compararcadenes.js''
<pre>
print ('escriu l\'edat:');
age = readline();

//manera típica
if (age<18) {
	voteable = "Too young";
} else {
	voteable = "Old enough";
}
print (voteable);

//manera alternativa de fer un if
voteable=(age<18)?"Too young":"Old enough";
print (voteable);
</pre>
===Exemple 8: compte amb les cometes dobles i simples!===
FUNCIONA:
<pre>
<!DOCTYPE html>
<html>
<body>

<button onclick='document.getElementById("demo").innerHTML=Date()'>The time is?</button>

<p id="demo">kmjkj</p>
</body>
</html>
</pre>
NO FUNCIONA (DEGUT A PROBLEMA AMB LES COMETES DOBLES):
<pre>
<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById("demo").innerHTML=Date()">The time is?</button>

<p id="demo">kmjkj</p>
</body>
</html>
</pre>

===Exemple 9===
*http://www.w3schools.com/jsref/event_onclick.asp
En aquest exemple veiem com podem associar un event en fer click sobre un paràgraf. Es fa de dues maneres: 1) barregem HTML i Javascript (és més curt i fàcil d'entendre); 2) separem HTML i Javascript (pot semblar més difícil, però té l'avantatge de què estem separant la capa de presentació de la capa de comportament).

Fixant-te en l'anterior exemple, implementa una petita pàgina amb una imatge. Quan facis click sobre la imatge, canvia la imatge. Quan tornis a fer click, torna a la imatge original (per ex, l'exemple vist de la bombeta que s'encén i s'apaga).

Fes-ho de les dues maneres:
*Barregem HTML i Javascript: <element onclick="myScript">
*Separem HTML i Javascript: object.onclick=function(){myScript};

'''solució:'''
<pre>
<!DOCTYPE html>
<html>
<body>

<p>Exemple del sol i la lluna I</p>

<img id="foto1" onclick="canviar_img1()" src="sol.png" />

<script>
function canviar_img1() {
	var str = document.getElementById("foto1").src;
    var n = str.indexOf("sol.png");
    if (n >= 0) {
	    document.getElementById("foto1").src = "lluna.png";
	} else {
	    document.getElementById("foto1").src = "sol.png";		
	}
}
</script>

<p>Exemple del sol i la lluna II</p>

<img id="foto2" src="sol.png" />

<script>
document.getElementById("foto2").addEventListener("click", canviar_img2);

function canviar_img2() {
	var str = document.getElementById("foto2").src;
    var n = str.indexOf("sol.png");
    if (n >= 0) {
	    document.getElementById("foto2").src = "lluna.png";
	} else {
	    document.getElementById("foto2").src = "sol.png";		
	}
}
</script>

</body>
</html>
</pre>
Molt de compte amb la sintaxi, majúscules i minúscules. En el primer cas funcionen les dues, perquè al HTML li és igual majúscules o minúscules:
<pre>
<img id="foto1" onclick="canviar_img1()" src="sol.png" />
<img id="foto1" onClick="canviar_img1()" src="sol.png" />
</pre>
En el segon cas no ens podem equivocar: (la 1a correcta, la 2a no)
<pre>
document.getElementById("foto2").addEventListener("click", canviar_img2); -> funciona
document.getElementById("foto2").addEventListener("Click", canviar_img2); -> no funciona
</pre>
===Exemple 10===
<pre>
> console.log(0xA + 0xB);       
21
> console.log('A'+'B');
AB
> var num=13; 
> console.log(num.toString(16));
d
> console.log(typeof num.toString(16));
string
> console.log(typeof 0xA );
number
</pre>

===Bateria d'exercicis proposats===
*http://www.w3resource.com/javascript-exercises/ 
(a classe veurem algun d'aquests exercicis)
===Exercici de classe===
Càlcul de l'àrea d'un triangle: (el resultat no és correcte)
<pre>
var side1 = 5; 
var side2 = 6; 
var side3 = 7; 
var perimeter = (side1 + side2 + side3)/2;
var area =  Math.sqrt(perimeter*((perimeter-side1)*(perimeter-side2)*(perimeter-side3)));
print(area);
</pre>
Modificar l'exercici per tal de què et demani dos valors, el tercer és aleatori entre 1 i 20,
i has de donar el resultat en format de 3 decimals. I sobretot, que el resultat sigui correcte.

'''Solució 1''':
<pre>
//https://es.wikipedia.org/wiki/F%C3%B3rmula_de_Her%C3%B3n
//Fórmula de Herón
var side1 = parseFloat(readline()); 
var side2 = parseFloat(readline()); 
var side3 = parseFloat(20*Math.random());

print (side1 + " " + side2 + " " + side3);
var semiperimeter = (side1 + side2 + side3)/2;
print(semiperimeter);
var area;
area =  Math.sqrt(semiperimeter*(semiperimeter-side1)*(semiperimeter-side2)*(semiperimeter-side3));
if (isNaN(area)) {
	print("Aquest triangle no té solució");
} else {
	print(area.toFixed(2));
}
</pre>
'''Solució 2''':
<pre>
<!DOCTYPE html>
<html>
	<head>
		<title>Area triangle irregular</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<p id="res"><p>
		<script type="text/javascript">
			var c1 = parseFloat(prompt("Insereix el primer costat:"));
			var c2 = parseFloat(prompt("Insereix el segon costat:"));
			var c3 = parseFloat(  (Math.random()*20+1).toFixed(3) );

			console.log(c1 + " " + c2 + " " + c3);

			//Fórmula d'Heron
			var sper = (c1+c2+c3)/2;
			console.log(sper);

			var area = parseFloat(Math.sqrt(sper*(sper-c1)*(sper-c2)*(sper-c3)));
			area = area.toFixed(2);
			if (isNaN(area)) area = "Aquest triangle no té solució";
			console.log(area);

			var res;
			res = "costats: " + c1 + " " + c2 + " " + c3 + "<br />";
			res += "semiperímetre: " + sper + "<br />";
			res += "àrea: " + area + "<br />";
			document.getElementById("res").innerHTML = res;

		</script>
	
	</body>
</html>
</pre>
===Exercici de classe (05.10.2020). Propietat prototype===
Exercici senzill de prototype:
*https://codepen.io/joanillo/pen/EKqozG

1. Definir un nou mètode de l'objecte ''String'', anomenat '''afegir_prefix_sufix(pre,suf)''' que, donada una cadena (String), afegeix al davant i al darrere el prefix i el sufix. Per ex;
<pre>
var cad = 'Domínguez';
var cad2 = cad.afegir_prefix_sufix('Sr. ',':');
console.log(cad2); //'Sr. Domínguez:';
</pre>
2. Donat un número, definir un nou mètode, anomenat '''transformar_numero()'''  que:
*retorna false si el número no és enter
*retorna false si el número és senar
*divideix el número per 2
*retorna un String amb la representació hexadecimal d'aquest número.
<pre>
var num = 24;
var num2 = num.transformar_numero();
console.log(num2); //'C'
num = 25;
num2 = num.transformar_numero();
console.log(num2); //false
</pre>
3. Afegir aquests dos mètodes en una llibreria externa (''llibreria.js''), i fer un document web que inclogui aquesta llibreria i que mostri l'ús d'aquests dos mètodes (joc de proves).

Entregar en el Google Classroom

'''Solució 1 (alumne, malament :-) )

''ejercicio_prototype_original.html'':
<pre>
<!DOCTYPE html>
<html>
<head>
	<title>Ejercicios</title>
	
</head>
<body>
	<h2>Ejercicios</h2>
	<p id="ejercicio1"></p>
	<p id="ejercicio2"></p>
	<script type="text/javascript" src="./llibreria_prototype_original.js"></script>
</body>
</html>
</pre>
''llibreria_prototype_original.js'':
<pre>
//Ejercicio 1:
String.prototype.add_prefix_sufix=function(pre,suf){
	var x= pre+this+suf;
	return x;
}
var pre="Hola ";
var suf=" ,como estas?";
var cad="Dominguez";
var y=cad.add_prefix_sufix(pre,suf);
document.getElementById("ejercicio1").innerHTML=y;

//Ejercicio 2:
Number.prototype.transformar_numero=function(){
	if (this!==parseInt(this)&&this%2!=0) {
		return false;
	}
	return (this/2).toString(16);
}

var num=24;
var a=num.transformar_numero();
document.getElementById("ejercicio2").innerHTML=a;
</pre>
'''Solució 2 (profe, OK :-) )
''ejercicio_prototype_corregit.html'':
<pre>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
	<title>Ejercicios</title>
	<script type="text/javascript" src="./llibreria_prototype_corregit.js"></script>
</head>
<body>
	<h2>Ejercicios</h2>
	<p id="ejercicio1"></p>
	<p id="ejercicio2"></p>
	<script>
	//Ejercicio 1:
	var pre="Hola ";
	var suf=", cómo estás?";
	var cad="Domínguez";
	var y=cad.add_prefix_sufix(pre,suf);
	document.getElementById("ejercicio1").innerHTML=y;

	//Ejercicio 2:
	//var num=24; //num=25 //num=25.4
	var num=24;
	var a = num.transformar_numero();
	num = 25;
	a += " " + num.transformar_numero();
	num = 25.4;
	a += " " + num.transformar_numero();
	document.getElementById("ejercicio2").innerHTML=a;
	</script>
</body>
</html>
</pre>
''llibreria_prototype_corregit.js'':
<pre>
String.prototype.add_prefix_sufix=function(pre,suf){
	var x= pre+this+suf;
	return x;
}

Number.prototype.transformar_numero=function(){
	if (this!=parseInt(this) || this%2!=0) {
		return false;
	} else {
		return (this/2).toString(16);
	}
}
</pre>
'''Diferències entre la solució bona i la dolenta''':
*una llibreria ha de el més genèrica i independent possible. S'ha de pensar en una llibreria com un conjunt de funcions que pots compartir amb els teus companys, i que pots reaprofitar en d'altres projectes. No pot ser que en la llibreria facis referència a elements que existeixen en la vista, com ara ''document.getElementById("ejercicio1")''.
*Com a conseqüència de l'anterior, s'ha de fer el include de la llibreria en el ''<head>''. Si en la llibreria fas referència a ''document.getElementById("ejercicio1")'' aleshores el include s'ha de fer al final de tot, la qual cosa no és correcta. El include s'ha de fer en el ''<head>'', perquè està carregant en memòria tot un conjunt de funcions que de moment no s'executen.
*Joc de proves: el joc de proves s'ha de fer en la vista, en el fitxer html, i no en la llibreria. El joc de proves ha d'incloure totes les possibilitats. Per ex, en el cas del segon exercici, s'ha de provar un número parell, un número senar ( donarà ''false''), i un número decimal (donarà ''false'').
*No és cap tonteria: no s'han de fer faltes d'ortografia, incloure tots els accents (i incloure ''<meta charset="UTF-8">''). Recorda que els teus projectes els ensenyaràs als clients o possibles clients, i que vols causar bona impressió als clients.
*Recorda! que el resultat sigui correcte no vol dir que la solució sigui correcte. A l'hora de corregir un exercici o un examen el professor no es fixa només en el resultat, sinó que s'ha de mirar el codi.

===Exemple Date===
<pre>
<!DOCTYPE html>
<html>
<body>

<p>Date.parse(string) returns milliseconds.</p>
<p>You can use the return value to convert the string to a date object:</p>

<p id="demo"></p>

<script>
var cad = "March 21, 2012";
console.log(typeof cad);
var msec = Date.parse("March 21, 2012");
console.log(typeof msec);
var d = new Date(msec);
console.log(typeof d);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>
</pre>
===Exercici de classe (23/10/2017) (Temps d'execució d'un script)===
*https://ioc.xtec.cat/materials/FP/Materials/ICC0_DAW/DAW_ICC0_M06/web/html/WebContent/u1/a2/activitats.html

===Exercici de classe (23/10/2017) (Ús de biblioteques)===
*https://ioc.xtec.cat/materials/FP/Materials/ICC0_DAW/DAW_ICC0_M06/web/html/WebContent/u1/a2/activitats.html
===Exemple 11 (expressions regulars)===
<pre>
js> var patt = /e/ig;
js> var str="en un lugar de Extremadura"; 
js> print(patt.test(str));
true
js> print(patt.exec(str));
e
js> print(str.search(patt));
0 -> el '0' significa que hi ha una 'e' en la primera posició
js> print(str.match(patt));
e,e,E,e
</pre>
===Exercici de classe. Números primers (''primos'') (25 set 2018)===
Trobar els 20 primers nombres primers. Faràs un bucle amb una condició de sortida (sortiràs quan hagis trobat els 20 primers). Com se sap que un nombre és ''primer''?

<pre>
$ node nums_primers.js
</pre>
<pre>
//Exercici números primers
console.log("20 primeros numeros primos: ")

var primos = 0;
var i = 1;
while(primos!=100){
	if (i == 1) {
		console.log(i);
		i++;
		primos++;
	}
	var cont = 0;
	for (var x = 1; x <= i ; x++) {
			if (i%x==0) {
				cont++
			}
	}
	if (cont==2) {
		console.log(i);
		primos++;
	}
	i++;
}
</pre>

===Exercici de classe. Funció factorial (25 set 2018)===
Funció factorial. És un típic exemple de funció recursiva (funció que es crida a ella mateixa).

Fer un joc de proves (amb 5 casos).
<pre>
console.log("Factorial: ")
function factorial(n){
	if (n==0) {return 1}
	return n * factorial(n-1)
}
console.log("factorial de 5: " + factorial(5));
console.log("factorial de 10: " + factorial(10));
console.log("factorial de 12: " + factorial(12));
console.log("factorial de 15: " + factorial(15));
console.log("factorial de 20: " + factorial(20));
</pre>
===Exercici de classe (23 set 2019). No confondre  Javascript amb NodeJS===
<pre>
//taula de multiplicar

//funció no neutra
function taula_multiplicar(num) {
	console.log("Taula del " + num);
	console.log("----------------------");
	for (var i=1; i<=10; i++) {
		console.log (num + "*" + i + "=" + num*i);
	}
}

taula_array = [];
//funció neutra
function taula_multiplicar2(num) {
	mult = [];
	for (var i=1; i<=10; i++) {
		mult.push(i*num)
	}
	return mult;
}

var num = 4;
taula_array = taula_multiplicar2(num);

//imprimir ràpid per pantalla
console.log(taula_array);
//imprimir bonic:
console.log("Taula del " + num);
console.log("----------------------");
for (var i=1; i<=10; i++) {
	console.log (num + "x" + i + "=" + taula_array[i]);
}


//millores
// 1) definir una llibreria de funcions matemàtiques (externa)
// 2) la definició de la funció ha de ser neutra
// 3) parametritzar el número de la taula que vull visualitzar
// $ node taula_multiplicar.js 9 (per visualitzar la taula del 9)
// o bé demanar pel teclat

</pre>
=Altres apunts=
*https://docs.google.com/document/d/1I9ehS5LZ-try4qJ4kDeWsmQbi2YNwzl-SEbfvcMSF7k/