Diferència entre revisions de la pàgina «M06 UF1A1. Teoria»
| Línia 127: | Línia 127: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| − | |||
| − | |||
| − | |||
| − | |||
Revisió del 14:31, 7 oct 2021
Contingut
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
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>
