Diferència entre revisions de la pàgina «M06 UF1A1. Teoria»

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 6 revisions intermèdies del mateix usuari que no es mostren)
Línia 6: Línia 6:
 
Però també farem referència constant a aquest curs online:
 
Però també farem referència constant a aquest curs online:
 
*https://www.w3schools.com/js/default.asp
 
*https://www.w3schools.com/js/default.asp
 +
=scripts de classe=
 +
*[[Fitxer:Curs javascript developer mozilla.zip]] (actualitzat 19/11/2021)
  
 
=T1. Introducció a Javascript=
 
=T1. Introducció a Javascript=
Línia 15: Línia 17:
 
*Eines
 
*Eines
 
*Hola, Món
 
*Hola, Món
 +
 +
En aquesta sessió parlem de:
 +
*Arquitectura d'una apliació web, servidors web, model client-servidor, navegadors web
 +
*Eines de programació.
 +
*Models d'execució de codi
 +
*Mecanismes d'execució de codi en un navegador web. Consola en el navegador web.
 +
*Llenguatges de programació en entorn client. Javascript
 +
*Programació de guions (scripts)
 +
*Integració del codi amb les etiquetes HTML.
 +
*Eines de programació sobre clients web (IDEs)
 +
*Tecnologies i llenguatges associats a la programació web.
  
 
=T2. Gramàtica i tipus=
 
=T2. Gramàtica i tipus=
Línia 26: Línia 39:
 
*Literals
 
*Literals
 
Descarrega el script de classe:
 
Descarrega el script de classe:
−
*[[Fitxer:Curs javascript developer mozilla.zip]]
 
  
 
=T3. Control de flux i gestió dels errors=
 
=T3. Control de flux i gestió dels errors=
Línia 53: Línia 65:
  
 
=T7. Números i dates=
 
=T7. Números i dates=
 +
[[Fitxer:Screenshot NaN.jpg | thumbnail | Error de programació: NaN]]
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Numbers_and_dates
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Numbers_and_dates
  
 
=T8. Formatació del text=
 
=T8. Formatació del text=
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Text_formatting
 
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Text_formatting
 +
==Diferència entre el mètode .trim() i programar la funció trim()==
 +
Els String tenen el mètode trim(), que podem aplicar directament sobre l'objecte. El mateix resultat es podria aconseguir programant una funció que li passis com a argument una cadena i retorni una altra cadena (o la mateixa cadena). Aquest exemple només és per veure la diferència entre un mètode propi d'un objecte, i una funció. (Evidentment, allò lògic és que per programar la funció trim utilitzarem el mètode .trim()).
 +
<pre>
 +
<!DOCTYPE html>
 +
<html>
 +
<body>
 +
<p id="demo"></p>
 +
 +
<script>
 +
var cad = " cadena amb espais blancs als extrems ";
 +
str = cad + " " + cad.length +  "<br />";
 +
str += cad.trim() + " " + cad.trim().length +  "<br />";
 +
var cad2 = trim(cad);
 +
str += cad2 + " " + cad2.length +  "<br />";
 +
document.getElementById("demo").innerHTML = str;
 +
 +
function trim(s) {
 +
return s.trim();
 +
        //return (s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
 +
        //una altra manera:
 +
        //return s.replace(/^\s+|\s+$/g, "");
 +
}
 +
</script>
 +
</body>
 +
</html>
 +
</pre>
 +
==Prototype: definir un nou mètode als Strings==
 +
Definir per als Strings un nou mètode, el mètode '''primeraMajuscula()''' que, donada una cadena, converteixi a majúscules la primera lletra de les paraules que la composa. Per exemple, converteix la cadena ''Make a new array method that transforms array'' en ''Make A New Array Method That Transforms Array''.
 +
 +
Solució:
 +
<pre>
 +
<html>
 +
<head>
 +
<meta charset="utf8"></meta>
 +
</head>
 +
<body>
 +
<p id="parr"></p>
 +
<script>
 +
var cad = "En un lugar de la Mancha";
 +
 +
String.prototype.primeraMajuscula = function() {
 +
var arr=this.split(" ");
 +
for (i=0; i<arr.length; i++) {
 +
arr[i] = capitalizeFirstLetter(arr[i]);
 +
console.log(arr[i]);
 +
}
 +
return arr.join(" ");
 +
}
 +
 +
function capitalizeFirstLetter(string) {
 +
    return string.charAt(0).toUpperCase() + string.slice(1);
 +
}
  
−
=T9. Treballar amb objectes=
+
document.getElementById("parr").innerHTML = cad.primeraMajuscula();
−
*https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects
+
</script>
−
{{Autor}}, setembre 2021
+
</body>
 +
</html>
 +
</pre>

Revisió de 09:35, 12 des 2021

Introducció

Som a la primera UF i està començant el curs, i el primer objectiu és aprendre la sintaxi de Javascript, que ens acompanyarà durant tot el curs. S'ha de fer una metodologia dinàmica, no podem entretenir-nos explicant totes i cadascuna de les possibilitats que proporciona el llenguatge. A les classes es donarà preferència a la guia de developer.mozilla.org, però s'aniran intercalant altres exemples i recursos.

Recursos

Donarem preferència al següent recurs online:

Però també farem referència constant a aquest curs online:

scripts de classe

T1. Introducció a Javascript

Subtemes:

  • Sobre JavaScript
  • JavaScript i Java
  • ECMAScript
  • Eines
  • Hola, Món

En aquesta sessió parlem de:

  • Arquitectura d'una apliació web, servidors web, model client-servidor, navegadors web
  • Eines de programació.
  • Models d'execució de codi
  • Mecanismes d'execució de codi en un navegador web. Consola en el navegador web.
  • Llenguatges de programació en entorn client. Javascript
  • Programació de guions (scripts)
  • Integració del codi amb les etiquetes HTML.
  • Eines de programació sobre clients web (IDEs)
  • Tecnologies i llenguatges associats a la programació web.

T2. Gramàtica i tipus

Subtemes:

  • Sintaxi bàsica i comentaris
  • Declaració de variables
  • Àmbit de variables
  • Elevació de variables (hoisting)
  • Estructures i tipus de dades
  • Literals

Descarrega el script de classe:

T3. Control de flux i gestió dels errors

Subtemes:

  • if...else
  • switch
  • try/catch/throw
  • Objectes Error

T4. Bucles i iteracions

Subtemes:

  • for
  • while
  • do...while
  • break/continue
  • for..in
  • for..of

T5. Funcions

T6. Expressions i operadors

T7. Números i dates

Error de programació: NaN

T8. Formatació del text

Diferència entre el mètode .trim() i programar la funció trim()

Els String tenen el mètode trim(), que podem aplicar directament sobre l'objecte. El mateix resultat es podria aconseguir programant una funció que li passis com a argument una cadena i retorni una altra cadena (o la mateixa cadena). Aquest exemple només és per veure la diferència entre un mètode propi d'un objecte, i una funció. (Evidentment, allò lògic és que per programar la funció trim utilitzarem el mètode .trim()). 

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var cad = " cadena amb espais blancs als extrems ";
str = cad + " " + cad.length +  "<br />";
str += cad.trim() + " " + cad.trim().length +  "<br />";
var cad2 = trim(cad);
str += cad2 + " " + cad2.length +  "<br />";
document.getElementById("demo").innerHTML = str;

function trim(s) {
	return s.trim();
        //return (s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
        //una altra manera:
        //return s.replace(/^\s+|\s+$/g, "");
}
</script>
</body>
</html>

Prototype: definir un nou mètode als Strings

Definir per als Strings un nou mètode, el mètode primeraMajuscula() que, donada una cadena, converteixi a majúscules la primera lletra de les paraules que la composa. Per exemple, converteix la cadena Make a new array method that transforms array en Make A New Array Method That Transforms Array.

Solució: 

<html>
<head>
<meta charset="utf8"></meta>
</head>
<body>
<p id="parr"></p>
<script>
var cad = "En un lugar de la Mancha";

String.prototype.primeraMajuscula = function() {
	var arr=this.split(" ");
	for (i=0; i<arr.length; i++) {
		arr[i] = capitalizeFirstLetter(arr[i]);
		console.log(arr[i]);
	}
	return arr.join(" ");
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

document.getElementById("parr").innerHTML = cad.primeraMajuscula();
</script>
</body>
</html>
Obtingut de «http://wiki.joanillo.org/index.php?title=M06_UF1A1._Teoria&oldid=298154»