Diferència entre revisions de la pàgina «M06 UF1A1. Teoria»
| (Hi ha 2 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 7: | Línia 7: | ||
*https://www.w3schools.com/js/default.asp | *https://www.w3schools.com/js/default.asp | ||
=scripts de classe= | =scripts de classe= | ||
| − | *[[Fitxer:Curs javascript developer mozilla.zip]] | + | *[[Fitxer:Curs javascript developer mozilla.zip]] (actualitzat 19/11/2021) |
=T1. Introducció a Javascript= | =T1. Introducció a Javascript= | ||
| Línia 65: | 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 | ||
Revisió de 09:35, 12 des 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
- Fitxer:Curs javascript developer mozilla.zip (actualitzat 19/11/2021)
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>
