Tutorial de Javascript: http://www.w3schools.com/js/ - Historial de revisió

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

2021-09-20T16:08:21Z

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

Joan: /* Exemple 2 */

2021-09-20T16:06:44Z

Exemple 2

Joan a 23:57, 17 oct 2020

2020-10-17T23:57:51Z

Joan: /* Exemple 10 */

2020-10-01T18:11:01Z

Exemple 10

Joan: /* Exercici de classe (23 set 2019). No confondre Javascript amb NodeJS */

2019-09-23T18:05:23Z

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

Pàgina nova

=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 al Spidermonkey 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>
print ("La data del sistema és: ");
print (myFunction());
// o bé
//print (Date());

function myFunction() {
return Date();
}
</pre>

===Exemple 2===
Adaptar al Spidermonkey el següent exemple:
*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>

script ''helloworld.js'':
<pre>
function myFunction(valor)
{
print(valor);
}

print('Escriu un valor:');
valor = readline();
myFunction(valor);
</pre>
===Exemple 3===
script ''undefined.js''
<pre>
var a;
print(a);

var x=5;
var y;
var z=x+y;
print (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>
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
</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 (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;
<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.html'':
<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.html'':
<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>
===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>

@@ Línia 599: / Línia 599: @@
 // o bé demanar pel teclat
 </pre>
 =Altres apunts=
 *https://docs.google.com/document/d/1I9ehS5LZ-try4qJ4kDeWsmQbi2YNwzl-SEbfvcMSF7k/

@@ Línia 77: / Línia 77: @@
 ===Exemple 2===
 *http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate
 <pre>
@@ Línia 99: / Línia 97: @@
 </pre>
-script ''helloworld.js'':
+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===

@@ Línia 351: / Línia 351: @@
 </html>
 </pre>
-===Exercici de classe (16.10.2017). Propietat prototype===
+===Exercici de classe (05.10.2020). Propietat prototype===
 Exercici senzill de prototype:
 *https://codepen.io/joanillo/pen/EKqozG
@@ Línia 396: / Línia 396: @@
 </html>
 </pre>
-''llibreria_prototype_original.html'':
+''llibreria_prototype_original.js'':
 <pre>
 //Ejercicio 1:
@@ Línia 456: / Línia 456: @@
 </html>
 </pre>
-''llibreria_prototype_corregit.html'':
+''llibreria_prototype_corregit.js'':
 <pre>
 String.prototype.add_prefix_sufix=function(pre,suf){
@@ Línia 477: / Línia 477: @@
 *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>

@@ Línia 39: / Línia 39: @@
 </pre>
 ===Exemple 1===
-Adaptar al Spidermonkey el següent exemple:
+Adaptar a la consola del Node el següent exemple:
 *http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
 <pre>
@@ Línia 66: / Línia 66: @@
 script ''date.js'':
 <pre>
 function myFunction() {
      return Date();
+}
 </pre>
 ===Exemple 2===
-Adaptar al Spidermonkey el següent exemple:
+'''No fer aquest exercici de moment'''
 *http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate
 <pre>
@@ Línia 108: / Línia 110: @@
 myFunction(valor);
 </pre>
 ===Exemple 3===
 script ''undefined.js''
 <pre>
 var a;
-print(a);
+console.log(a);
 var x=5;
 var y;
 var z=x+y;
-print (z);
+console.log (z);
 </pre>
 ===Exemple 4===
 script ''newstring.js''
@@ Línia 262: / Línia 266: @@
 ===Exemple 10===
 <pre>
-js> print(0xA + 0xB);
+> console.log(0xA + 0xB);
-js> print('A'+'B');
+> console.log('A'+'B');
 AB
-js> var num=13;
+> var num=13;
-js> print(num.toString(16));
+> console.log(num.toString(16));
+d
-js> print(typeof(num.toString(16)));
+> console.log(typeof num.toString(16));
 string
-js> print(typeof(0xA));
+> console.log(typeof 0xA );
 number
 </pre>
 ===Bateria d'exercicis proposats===
 *http://www.w3resource.com/javascript-exercises/
@@ Línia 619: / Línia 624: @@
    });
 </pre>