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

De Wikijoan
(Diferència entre revisions)
Dreceres ràpides: navegació, cerca
(Exercici de classe. Funció factorial (25 set 2018))
(Exercici de classe (23 set 2019). No confondre Javascript amb NodeJS)
 
Línia 603: Línia 603:
 
// 3) parametritzar el número de la taula que vull visualitzar
 
// 3) parametritzar el número de la taula que vull visualitzar
 
// $ node taula_multiplicar.js 9 (per visualitzar la taula del 9)
 
// $ node taula_multiplicar.js 9 (per visualitzar la taula del 9)
 +
// o bé demanar pel teclat
  
 +
</pre>
 +
===Demanar un valor pel teclat (compte! és NodeJS, no pas javascript)===
 +
*https://stackoverflow.com/questions/8128578/reading-value-from-console-interactively
 +
<pre>
 +
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() + "]");
 +
  });
 
</pre>
 
</pre>

Revisió de 18:05, 23 set 2019

Contingut

Introducció

Seguirem el següent manual online:

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:

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

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

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:

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

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

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:

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:

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)

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

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)

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() + "]");
  });
Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines