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 '===':

<!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>

Exemple 1

Adaptar al Spidermonkey el següent exemple:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

<!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>

script date.js:

print ("La data del sistema és: ");
print (myFunction());
// o bé
//print (Date());

function myFunction() {
    return Date();
}

Exemple 2

Adaptar al Spidermonkey el següent exemple:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

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

script helloworld.js:

function myFunction(valor)
{
print(valor);
}

print('Escriu un valor:');
valor = readline();
myFunction(valor);

Exemple 3

script undefined.js

var a;
print(a);

var x=5;
var y;
var z=x+y;
print (z);

Exemple 4

script newstring.js

var txt1 = new String("Hello World");
print (txt1.length);

var txt2 = "Hello World 2";
print (txt2.length);

Exemple 5

script tripleigual.js

var x=5;

//true
print (x == 5) ;

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

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

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

Exemple 6

script compararcadenes.js

var cad1 = "pepe";
var cad2 = "pepe";

print (cad1 == cad2);

Exemple 7

script compararcadenes.js

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);

Exemple 8: compte amb les cometes dobles i simples!

FUNCIONA:

<!DOCTYPE html>
<html>
<body>

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

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

NO FUNCIONA (DEGUT A PROBLEMA AMB LES COMETES DOBLES):

<!DOCTYPE html>
<html>
<body>

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

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

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ó:

<!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>

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:

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

En el segon cas no ens podem equivocar: (la 1a correcta, la 2a no)

document.getElementById("foto2").addEventListener("click", canviar_img2); -> funciona
document.getElementById("foto2").addEventListener("Click", canviar_img2); -> no funciona

Exemple 10

js> print(0xA + 0xB);       
21
js> print('A'+'B');
AB
js> var num=13; 
js> print(num.toString(16));
d
js> print(typeof(num.toString(16)));
string
js> print(typeof(0xA));
number

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)

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);

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:

//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));
}

Solució 2:

<!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>

Exercici de classe (16.10.2017). 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;

var cad = 'Domínguez';
var cad2 = cad.afegir_prefix_sufix('Sr. ',':');
console.log(cad2); //'Sr. Domínguez:';

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.

var num = 24;
var num2 = num.transformar_numero();
console.log(num2); //'C'
num = 25;
num2 = num.transformar_numero();
console.log(num2); //false

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:

<!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>

llibreria_prototype_original.html:

//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;

Solució 2 (profe, OK :-) ) ejercicio_prototype_corregit.html:

<!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>

llibreria_prototype_corregit.html:

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);
	}
}

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

<!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>

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)

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

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?

$ node nums_primers.js

//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++;
}

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).

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));

Exercici de classe (23 set 2019). No confondre Javascript amb NodeJS

//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

Demanar un valor pel teclat (compte! és NodeJS, no pas javascript)

https://stackoverflow.com/questions/8128578/reading-value-from-console-interactively

var stdin = process.openStdin();

stdin.addListener("data", function(d) {
    // note:  d is an object, and when converted to a string it will
    // end with a linefeed.  so we (rather crudely) account for that  
    // with toString() and then trim() 
    console.log("you entered: [" + 
        d.toString().trim() + "]");
  });

Tutorial de Javascript: http://www.w3schools.com/js/

Contingut

Introducció

Exemples aclaridors vistos a classe

Exemple 0

Exemple 1

Exemple 2

Exemple 3

Exemple 4

Exemple 5

Exemple 6

Exemple 7

Exemple 8: compte amb les cometes dobles i simples!

Exemple 9

Exemple 10

Bateria d'exercicis proposats

Exercici de classe

Exercici de classe (16.10.2017). Propietat prototype

Exemple Date

Exercici de classe (23/10/2017) (Temps d'execució d'un script)

Exercici de classe (23/10/2017) (Ús de biblioteques)

Exemple 11 (expressions regulars)

Exercici de classe. Números primers (primos) (25 set 2018)

Exercici de classe. Funció factorial (25 set 2018)

Exercici de classe (23 set 2019). No confondre Javascript amb NodeJS

Demanar un valor pel teclat (compte! és NodeJS, no pas javascript)

Menú de navegació

Eines de l'usuari

Espais de noms

Variants

Vistes

Més

Cerca

Navegació

Institut Jaume Balmes

Màquines recreatives

CNC

Informàtica musical

joanillo.org Planet

Eines