Desenvolupament web dinàmic frontend amb javascript
Conceptes¶
Sessió 1: FrontEnd-JS¶
Objectiu Sessió 1
En aquesta sessió inicial 1 l'objectiu és introduir el concepte de frontend en una web, així com introduir al llenguatge javascript per a dinamitzar el contingut html.
Frontend¶
El frontend és la part visible d'un lloc web o aplicació amb la qual els usuaris interactuen directament. Inclou tot el que es veu en un navegador web, com ara el disseny, els colors, els botons, els formularis i la navegació. En termes simples, és la "cara" del lloc web o aplicació, que es dissenya per ser atractiva, intuïtiva i fàcil d'utilitzar.
El seu objectiu principal és combinar disseny i funcionalitat per oferir una experiència d'usuari fluida i atractiva.
Components principals del Frontend El desenvolupament frontend es basa en tres tecnologies clau:
-
HTML (HyperText Markup Language):
Defineix l'estructura i el contingut de les pàgines web. Per exemple, títols, paràgrafs, taules, imatges, etc. -
CSS (Cascading Style Sheets):
S'encarrega de l'aparença visual del lloc web, com ara els colors, les mides, les fonts i les disposicions. -
JavaScript:
Afegeix interactivitat i funcionalitat dinàmica a la pàgina web. Per exemple, fer que un botó mostri un missatge o que es carreguin dades sense recarregar la pàgina.
Rol del Frontend en una aplicació web¶
El frontend s'encarrega de:
-
Interfície d'usuari (UI):
Creació i disseny dels elements visuals que els usuaris veuen i utilitzen. -
Interactivitat:
Permetre que els usuaris interactuïn amb el lloc web (formularis, menús, animacions, etc.). -
Experiència d'usuari (UX):
Assegurar-se que la navegació sigui fluida i l'experiència general sigui agradable. -
Connexió amb el backend:
Rebre i mostrar informació del servidor mitjançant API o altres mitjans.
WYSIWYG¶
What You See Is What You Get, literalment seria el el que tu veus és el que tu tens, per tant en edició de contingut si poso una etiqueta <img src='ratoli.png'> observo que tinc la imatge a la interfície. Per tant en edició o desenvolupament les etiquetes html i estils css o les instruccions d'un llenguatge de programació es pot observar el seu resultat directament.
Navegadors web¶
Un navegador web és una aplicació que permet a un usuari accedir a un recurs, ja sigui local o publicat en un servidor web, i descrit mitjançant una adreça URL.
Els navegadors han evolucionat amb el temps, i a més de permetre obrir recursos remots, també poden interpretar llenguatges de scripts, representar elements gràfics complexos, mostrar contingut multimèdia, etc.
Tot i que la gran majoria treballen en entorn gràfic, existeixen navegadors que treballen des de consola en mode text:
Navegadors
NCSA Mosaic (1993)
Va ser el primer navegador amb capacitats gràfiques. Inicialment es va crear per a UNIX però degut a la seva acceptació es van fer versions per Windows i Mac.
Es va utilitzar com a base per desenvolupar les primeres versions d'Internet Explorer i posteriorment també Mozilla Firefox.
Netscape Navigator (1994)
Els principals desenvolupadors de Mosaic van crear la corporació Netscape i desenvolupar el primer navegador comercial, que va ser el primer en poder executar JavaScript i tenir suport per frames i cookies. Incorporava algunes extensions propietàries del llenguatge HTML que no respectaven les recomanacions del W3C. Va servir de base per crear el navegador Firefox.
Internet Explorer (1995)
Desenvolupat per Microsoft. Va aconseguir una gran quota de mercat pel fet de venir preinstal·lat en els sistemes Windows, fins al punt de desbancar del mercat el seu competidor Netscape Navigator. Utilitza una versió pròpia de JavaScript, i fins la versió 9 no comença a acomplir amb els estàndards moderns del W3C, fet que obligava a moltes pàgines a crear versions específiques per Internet Explorer. Utilitza el motor de renderitzat Trident.
Opera (1996)
Inicialment llançat com a aplicació shareware, va ser el primer navegador que tenia com a objectiu seguir al màxim els estàndards del W3C. Va incorporar característiques que després van copiar altres navegadors, com les barres laterals o l'Speed Dial. Des del febrer de 2013 va abandonar el seu motor de renderitzat propi (Presto) en favor del Blink de Google.
Safari (2003)
Desenvolupat per Apple, és el navegador per defecte de Mac OS X i iOS. Comparteix la majoria de característiques amb la resta de navegadors. Es va desenvolupar una versió per sistemes Windows que posteriorment va ser descontinuada. Utilitza el motor de renderitzat WebKit.
Mozilla Firefox (2004)
Navegador de codi obert i multiplataforma. Permet l'ampliació i personalització a través d'extensions i va ser un dels primers en incorporar la navegació per pestanyes. Està disponible per la majoria de sistemes operatius i també hi ha una versió per Android. Utilitza el motor de renderitzat Gecko.
Google Chrome (2008)
Desenvolupat per Google, destaca per la seva velocitat d'execució de JavaScript, la gestió de memòria independent per cada pestanya oberta i l'execució en mode aïllat (sandbox) dels complements. Està disponible per la majoria de sistemes operatius i també hi ha versions per Android i iOS. Utilitzava el motor de renderitzat WebKit fins a la versió 27, a partir de la qual utilitza el motor propi Blink, també basat en WebKit.
Microsoft Edge (2015)
Desenvolupat per Microsoft com a substitut d'Internet Explorer per el sistema operatiu Windows 10. Té molt millor suport per els estàndards web que Internet Explorer i un rendiment de JavaScript millorat. Incorpora control per veu i integració amb les plataformes online de Microsoft, com OneDrive. Utilitza el motor de renderitzat EdgeHTML, que és una variant de Trident.
Execució de codi en un navegador web
Els navegadors web segueixen una arquitectura bàsica comú a l'hora d'interactuar amb l'usuari i accedir als recursos web.
Tot i això, cada navegador pot prioritzar algun aspecte concret, per exemple:
- oferir la resposta més ràpida
- mostrar la resposta més fidel al contingut
- incrementar la seguretat de les comunicacions
Navegació
L'usuari navega per la interfície i del resultat de la petició d'un recurs web, rebrà una pàgina HTML + CSS + Javascript i el nevegador ha de muntar el contingut web i permetre la seva interacció.
més detall
Interfície d'usuari
És la capa amb la que interactua l'usuari i gestiona les funcions d'alt nivell de l'aplicació. Inclou tot el que no sigui la finestra que mostra la pàgina web:
- menús i barres d'eines
- barra d'adreces i botons de navegació
- adreces preferides
- configuració de l'aplicació
- etc.
Motor de navegació
Fa de pont entre la interfície d'usuari el motor de renderitzat. S'encarrega de comunicar als subsistemes inferiors l'adreça que l'usuari vol visitar perquè la descarreguin i la mostrin. Si el navegador suporta extensions, també són gestionades pel motor de navegació.
Motor de renderitzat (o de representació)
Produeix la representació visual del contingut d'una URL. Interpreta el codi d'una pàgina web (HTML, CSS, etc.) per generar cada element suportat pel motor i posicionar-lo on li correspongui. Les capacitats d'aquest motor afecten directament a la fidelitat de representació d'una pàgina i per tant al resultat que l'usuari obté en pantalla.
Els més utilitzats són:
| Motor | |
|---|---|
| Gecko | de codi lliure, utilitzat per Firefox, Netscape, Flock, Galeon, etc. |
| Trident / EdgeHTML | propietari, utilitzat per Internet Explorer / Edge per a Windows |
| WebKit / Blink | de codi lliure i basat en KHTML, utilitzat per Chrome, Safari i dispositius mòbils basats en Android i iOS |
| Presto | propietari, utilitzat per Opera fins a la versió 12 i en els navegadors d'algunes consoles de Nintendo |
Subsistema de comunicacions
S'encarrega d'implementar els protocols de transferència de documents i de fitxers:
- HTTP
- HTTPS
- FTP
Suporta un nombre limitat (normalment de 2 a 6) de connexions concurrents per agilitzar la descàrrega.
Intèrpret de JavaScript
S'encarrega d'analitzar i executar el codi JavaScript que es trobi contingut a la URL que s'hagi obert. Habitualment aquest mòdul pot ser deshabilitat per l'usuari per qüestions de seguretat. Cada navegador té el seu propi intèrpret de JavaScript, que competeix amb els demés per tenir la millor velocitat i suportar el màxim de característiques del llenguatge.
Intèrprets de JavaScript més populars:
- SpiderMonkey i les seves variants, utilitzats per Firefox
- V8, de codi lliure i utilitzat a Chrome
- JavaScriptCore (també anomenat Nitro), utilitzat per Safari
- Chakra, utilitzat a l'Internet Explorer a partir de la versió 9 i a Edge
Intèrpret de XML
Per poder accedir més ràpidament als diferents continguts d'un document HTML, els navegadors carreguen en memòria una representació en arbre (arbre DOM) en format XML.
Component de visualització
Subsistema molt lligat a les biblioteques de visualització del sistema operatiu. Permet que el navegador pugui mostrar components comuns de la interfície gràfica del sistema operatiu:
- generació de finestres, botons, controls de text, etc.
- fonts tipogràfiques (tipus de lletra)
- accés a acceleració gràfica
- etc.
Subsistema de persistència de dades
S'encarrega d'emmagatzemar diferents tipus de dades:
- historial de navegació
- certificats de seguretat
- emmagatzematge local (HTML5)
- memòria cau (caché)
- cookies
- etc.
Llenguatges de programació en entorn client¶
Són tots aquells llenguatges que s'executen dins del navegador web.
NO són llenguatges de programació:
- HTML
- XML
- CSS
El principal llenguatge de programació en entorn client és JavaScript, i és suportat per la gran majoria de navegadors web. És un llenguatge interpretat, orientat a objectes i amb una sintaxi semblant al llenguatge C.
Altres llenguatges de programació en entorn client:
- Dart, de Google, es pot compilar a codi JavaScript
- TypeScript, de Microsoft, variant de JavaScript amb tipus estrictes
JavaScript no és Java
JavaScript (creat per Netscape) i Java (creat per Sun Microsystems) no tenen cap relació entre sí. Només comparteixen la sintaxi semblant a C i la orientació a objectes. La similitud en el nom prové d'un acord entre Netscape i Sun l'any 1995 per canviar el nom del seu llenguatge de script “LiveScript” per un nom més comercial aprofitant la popularitat de Java: JavaScript
Introducció al llenguatge JavaScript¶
Característiques¶
JavaScript és un llenguatge de programació interpretat dialecte de l'estàndard ECMAScript. La seva aplicació principal és la de programació dins de pàgines web en entorn client, i es va dissenyar per afegir interactivitat a les pàgines HTML. JavaScript no està restringit per cap llicència comercial.
Evolució històrica de JavaScript
Tots els navegadors moderns incorporen algun intèrpret de codi JavaScript:
| Navegador | Motor de JavaScript |
|---|---|
| Firefox | SpiderMonkey |
| Chrome | V8 |
| Opera | Carakan / V8 |
| Safari | Nitro |
| Edge | Chakra / V8 |
Informació addicional
Podeu trobar una llista més completa de motors de JavaScript a la wikipedia.
JavaScript també és pot executar en entorn servidor (Server Side JavaScript, SSJS) per exemple utilitzant node.js
Característiques distintives
- sintaxi similar a la de C++ i Java
- basat en objectes, però no orientat a objectes
- feblement tipat: una variable pot contenir valors de diferents tipus en diferents moments de l'execució
- herència basada en prototipus enlloc d'en classes
- qualsevol funció pot actuar com un constructor
Sintaxi¶
Tot el codi JavaScript va entre les etiquetes <script> i </script>.
Podem posar un bloc <script> a qualsevol punt de la capçalera (<head>) o el cos (<body>) de la pàgina.
Per eficiència en la càrrega de la pàgina, es recomana posar tot el codi JavaScript al final del codi HTML, just abans de la marca </body>
El codi JavaScript es pot integrar amb el codi HTML de 3 maneres diferents i compatibles entre sí:
-
JavaScript dins del document HTML
En qualsevol punt dins del codi HTML podem utilitzar les etiquetes
Aquest codi s'executarà mentre la pàgina es carrega.<script>i</script>per indicar l'existència d'un bloc de codi JavaScript. -
JavaScript en un fitxer extern
El codi JavaScript es pot guardar en un fitxer extern, normalment amb l'extensió .js En qualsevol punt dins del codi HTML podem utilitzar les etiquetes
per carregar el codi, que es comportarà com si estigués escrit en el punt on hem posat l'etiqueta
<script>(dins del fitxer extern no s'hi ha de posar les etiquetes
<script>) -
JavaScript dins d'elements HTML
Consisteix en inserir fragments de JavaScript dins d'atributs d'etiquetes HTML, normalment associat a esdeveniments.
Això fa que el codi HTML i JavaScript quedin barrejats, però hi ha tècniques per evitar-ho, com ara associar els esdeveniments directament a objectes del DOM
Exemple 1 de Javascript
Tenim aquest resultat:
Aquest codi s'executarà quan es passi amb el ratolí per damunt del text “passa'm per sobre”.
El codi Javascript està a dins de l'element HTML.
Onmouseover captura el moment en el que el cursor o ratolí passarà per damunt de l'element i actuarà, és a dir executarà el codi javascript que hi ha a dins de "...".
p2-s1-ex1-Alert.html p2-s1-ex1-Alert.html :fontawesome-solid-download:
Majúscules i minúscules
JavaScript distingeix entre majúscules i minúscules a l'hora de referir-se a:
- paraules reservades del llenguatge
- noms de variables
- noms de funcions
Convencions a l'hora de posar noms
Per evitar confusions a l'hora de declarar variables i funcions, existeixen algunes convencions que podem utilitzar. Les més habituals són:
| Nom | Primera lletra | Si hi ha més d'una paraula... | Exemple |
|---|---|---|---|
| Camel case | minúscula | es comença només la primera lletra de les següents paraules en majúscula |
nomUsuari |
| Snake case | minúscula | s'escriu tot en minúscula i on hi aniria un espai s'hi posa un guió baix |
nom_usuari |
| Kebab case | minúscula | s'escriu tot en minúscula i on hi aniria un espai s'hi posa un guió, es fa servir per exemple en CSS |
nom-usuari |
| Pascal case | majúscula | es comença només la primera lletra de les següents paraules en majúscula |
NomUsuari |
| Macro case | majúscula | s'escriu tot en majúscula i on hi aniria un espai s'hi posa un guió baix, es sol utilitzar per distingir les constants |
NOM_USUARI |
Resum: Taula de convencions de noms
En cas de produir-se un error no es mostra cap missatge al cos de la pàgina i cal buscar-lo a la consola del navegador, dins les eines de desenvolupador. Entre aquestes eines també hi trobarem un depurador (debugger) que ens permetrà posar punts de parada, executar el codi pas per pas o avaluar qualsevol variable o expressió.
Comentaris al codi
Comentar una sola línia, posant-hi al davant //
Comentar un bloc, tancant-lo entre /* i */
Punt i coma
Normalment s'acaba cada instrucció de JavaScript amb un punt i coma ;.
El seu ús és opcional excepte quan hi ha més d'una instrucció per línia.
Variables¶
Són espais de memòria que s'identifiquen amb un nom i que poden emmagatzemar dades.
Els noms de les variables:
- han de començar per una lletra
- opcionalment poden començar per
_o$ - no poden ser paraules reservades del llenguatge
- distingeixen entre majúscules i minúscules
Declaració de variables
Les variables de JavaScript es poden declarar de 4 formes diferents:
Automàticament
Una variable es declara automàticament el primer cop que s'utilitza i es converteix en una variable global, independentment del punt del codi on s'hagi declarat.
Atenció!
Es considera una mala pràctica de programació no declarar explícitament les variables abans d'utilitzar-les, per tant s'ha d'evitar aquesta sintaxi encara que JavaScript ho permeti.
Recomanació
Si activem el mode estricte de JavaScript no se'ns permetrà treballar amb variables que no s'hagin inicialitzat, fer-ho provocarà un error.
Utilitzant const¶
Una variable assignada amb const:
- té àmbit de bloc
- no es pot redeclarar
- no se li pot assignar un nou valor
- se li ha d'assignar un valor en el mateix moment de declarar-la
const a = 3;
a = 4; // ERROR, no es pot tornar a assignar
const a; // ERROR, declarada sense un valor
a = 4;
Ús recomanat de 'const'
La forma recomanada de declarar els arrays i els objectes en JavaScript és utilitzant const. Això permet actualitzar els seus elements i alhora impedeix que la variable es reassigni o pugui canviar de tipus per error.
Utilitzant let
Una variable assignada amb let:
- té àmbit de bloc
- no es pot redeclarar
- s'ha de declarar abans de poder utilitzar-la
Ús recomanat de 'let'
La forma recomanada de declarar variables numèriques, de cadena o booleanes en JavaScript és utilitzant let.
Com que let té àmbit de bloc, si redeclarem la variable dins d'un bloc de codi no afectem la variable que es troba fora del bloc:
let a = "hola";
for (let a = 0; a < 5; a++) { // dins del bloc { } és una altra variable
// a --> 0,1,2,3,4
}
// a --> "hola"
Utilitzant var
Una variable assignada amb var no té àmbit de bloc, sinó de funció o global depenent del lloc on es declara.
Variable local, es redeclara dins d'una funció:
var a = 10; // declarada fora d'una funció, és una variable GLOBAL
function test() {
var a = 5; // variable LOCAL de la funció
// a --> 5
}
test();
// a --> 10
Variable global, s'utilitza directament dins d'una funció
var a = 10; // declarada fora d'una funció, és una variable GLOBAL
function test() {
a = 5; // és la variable GLOBAL, el valor és sobreescriu
// a --> 5
}
test();
// a --> 5
Si provem el mateix exemple hem fet amb let amb var, el resultat és diferent degut a l'àmbit:
var a = "hola";
for (var a = 0; a < 5; a++) { // <-- és la mateixa variable
// a --> 0,1,2,3,4
}
// a --> 5
Recomanació
En JavaScript modern (ES6) el conveni és no fer servir mai var i declarar totes les variables només amb const i let:
- const per els valors que no variaran, arrays i objectes
- let per tota la resta
La declaració amb var es manté per compatibilitat amb el codi que hagi funcionar amb navegadors antics.
Inicialització de variables
Es pot declarar més d'una sola variable alhora separant-les per coma:
Podem fer l'assignació del valor just en el moment de la declaració.
No s'ha d'especificar el tipus de les variables, ja que JavaScript fa assignació dinàmica de tipus quan els assignem un valor. En el moment de declarar-les el seu valor és indefinit (undefined).
Consell
Es considera una bona pràctica de programació declarar totes les variables a l'inici del bloc de codi.
Donem un valor a una variable amb l'operador d'assignació =
Podem assignar un valor:
-
per assignació directa
-
per assignació indirecta (per ex. a través d'un càlcul)
-
per sol·licitud a l'usuari
Àmbit de les variables¶
L'àmbit determina l'accessibilitat (visibilitat) de les variables.
JavaScript té 3 tipus d'àmbit:
Recorda
Si declarem una variable sense cap paraula reservada (const, let o var) al davant, la variable tindrà àmbit global en tot cas, encara que la declarem dins d'una funció o d'un bloc.
És una mala pràctica de programació ometre la declaració de les variables.
Àmbit de bloc
Les variables declarades dins d'un bloc { } no són accessibles fora del bloc:
S'aplica només a les variables declarades amb let i const:
Àmbit de funció
Les variables declarades dins d'una funció no són accessibles fora de la funció.
S'aplica a les variables declarades amb let, const, i var.
Àmbit global
Les variables declarades fora de qualsevol funció tenen àmbit global, i són accessibles des de qualsevol punt del codi JavaScript.
Si dins d'una funció es defineix una variable local amb el mateix nom que una variable global existent, dins de la funció la variable local preval per sobre de la global.
Tipus bàsics de dades¶
Els tipus de dades bàsics de JavaScript són:
Números
Només hi ha un tipus de números. Es poden escriure amb o sense decimals.
Internament tots es guarden en format de coma flotant de 64 bits, equivalent al tipus double
Cadenes
Les cadenes de text es delimiten entre cometes simples ' o dobles ".
En una cadena hi poden aparèixer cometes sempre que no siguin del tipus de les delimitadores.
O bé podem fer servir seqüències d'escapament:
Longitud màxima d'una cadena
Les cadenes estan limitades per l'especificació del llenguatge a 253 elements, que equival a 16384TB d'espai d'emmagatzematge. Tot i això, els motors de JavaScript dels navegadors limiten la mida màxima de les cadenes a un valor més tractable:
- per Chrome: 1GB
- per Firefox: 2GB
- per Safari: 4GB
Template literals (Template strings)
Els literals de plantilla (o cadenes de plantilla) són un tipus de cadenes amb característiques addicionals. Es van incorporar al llenguatge a partir d'ECMAScript versió 6 (ES6).
Es delimiten amb el caràcter de l'accent obert `.
- Permeten la interpolació de variables i expressions
Es substitueixen automàticament pel seu valor en delimitar-les amb
${...}.
💡 Bàsicament ho farem servir al moment de concatenar cadenes de valors a strings de sortida a alert, document.write, ... Notem que l'estring ho posem entre `, (cometes simples).
let nom = "Jordi";
let s1 = `El seu nom és "${nom}"`; // El seu nom és "Jordi"
let quantitat = 3;
let preu = 200;
let import = `Import: ${quantitat * preu}`; // Import: 600
- Permeten múltiples línies de text
No cal posar explícitament un salt de línia amb
\n, sinó que podem fer-lo directament dins de la cadena de text.
Booleans
Només poden tenir dos valors
- cert (true)
- fals (false)
Arrays
Els arrays són un tipus de dades compost que ens permet desar grans volums d'informació.
Els tractarem més endavant amb més detall.
Objectes
Els objectes són un tipus de dades complexes que ens permet desar informació i mètodes d'accés o tractament a aquesta informació englobades i protegides.
En tindrem de predefinides del llenguatge o bé de pròpies
La generació d'objectes definits per l'usuari es tractarà al proper curs. Ara només usarem objectes ja definits pel llenguatge, com l'exemple superior, per obtenir la data actual.
Exemple 2: Sumar variables
Tenim aquest resultat:
En aquest exemple, el codi javascript està inclòs a dins de etiquetes <script> </script>.
La ubicació la posem a dins del <body>.
document.write insereix el text en la posició que s'ubica l'script.
Així doncs ens interessa ubicar-lo a dins del <body>
El resultat que mostrem resulta de sumar dos valors de variables amb l'operador +.
p2-s1-ex2-Variables.html p2-s1-ex2-Variables.html :fontawesome-solid-download:
Exemple 2: Usar constants
<!DOCTYPE html>
<html>
<head>
<title>HTML - Javascript - Exemple de càlcul cercle</title>
</head>
<body>
<h2>Exemple 2: Calcular cercle</h2>
<script>
const pi = 3.141592;
let radi = 4;
var cercle = 2 * pi * radi;
document.write(`El valor d'un cercle de radi ${radi} és: ` + cercle);
</script>
</body>
</html>
Tenim aquest resultat:
En aquest exemple, el codi javascript està inclòs a dins de etiquetes <script> </script>.
La ubicació la posem a dins del <body>.
document.write insereix el text en la posició que s'ubica l'script.
Fem servir la notació ${var} per accedir al valor de la variable al concatenar string de sortida.
Així doncs ens interessa ubicar-lo a dins del <body>
El resultat que mostrem resulta de calcular el cercle segons la fórmula 2Piradi.
p2-s1-ex2-Constants.html p2-s1-ex2-Constants.html :fontawesome-solid-download:
Operadors¶
- Operadors aritmètics (MDN)
- Operadors lògics (MDN)
- Operadors d'assignació (MDN)
- Operadors de comparació (MDN)
Funcions predefinides del llenguatge¶
Són funcions integrades per defecte en el llenguatge JavaScript i que podem fer servir quan les necessitem. Estarien englobades a dins del concepte d'objectes globals i moltes poden ser usades com a funcions o com a objectes.
encodeURI()
Codifica una URI en format UTF-8 de manera que els caràcters especials que contingui es puguin transportar correctament, per exemple dins de capçaleres HTTP.
No codifica els següents caràcters: , / ? : @ & = + $ #
Si necessitem codificar tots els caràcters, podem fer-ho amb la variant encodeURIComponent
decodeURI()
Fa la funció inversa de encodeURI() i descodifica els caràcters especials d'una URI de manera que es pugui recuperar el text original.
Existeixen també les variants encodeURIComponent / decodeURIComponent que converteixen un major conjunt de caràcters
eval()
Retorna el resultat d'avaluar una expressió o executar instruccions de JavaScript. Si s'utilitza correctament pot ser molt potent però també és molt perillosa ja que permet la injecció de codi.
Atenció
Executar JavaScript a partir del contingut d'una cadena es considera un risc important, per tant es recomana evitar sempre l'ús de la funció eval().
isFinite()
Ens indica si un valor és un número vàlid.
isNaN()
Ens indica si el valor passat com a paràmetre no és un número.
Number()
Converteix el valor passat com a paràmetre en un valor numèric si és possible
String()
Converteix el valor passat com a paràmetre a una cadena.
parseInt()
Converteix el valor passat a un número enter, amb la particularitat que intenten fer la conversió fins a trobar el primer caràcter no numèric.
parseFloat()
Converteix el valor passat a un número amb coma flotant, amb la particularitat que intenten fer la conversió fins a trobar el primer caràcter no numèric.
Alguns imprescindibles 💡¶
Per a poder controlar i dinamitzar el frontend ens caldrà usar algunes tècniques per accedir o controlar els elements html de la interfície.
control d'un esdeveniment
Entre la interfície web i l'usuari tenim dispositius que permeten la interacció de l'usuari amb la mateixa, per exemple el ratolí, el teclat, ...
Podrem controlar aquesta interacció i programar la lògica que es vulgui actuar.
Per exemple:
- quan apretem una tecla
- quan passem per sobre d'un element
- quan cliquem un element
- ...
Per fer-ho, només caldrà definir l'atribut amb el nom de l'esdeveniment i llavors indicar bé el codi javascript o bé el nom d'una funció javascript.
Més endavant els veurem amb més detall.Accedir a un element
Per exemple, ens interessarà poder accedir a un valor que hem escrit a un formulari.
Per fer-ho, primer caldrà accedir a l'element i llavors a la seva propietat.
Usarem el mètode getelementById() d'un element HTML dins d'un document web, usant el seu atribut id.
Abans haurem d'haver definit l'element del DOM amb l'atribut id
Podem fer dues accions:
Canviar text amb la propietat innerHTML
O bé accedir a un valor amb l'atribut value
Més endavant veure més mètodes i més propietats.
Funcions per agrupar codi
Una pràctica comú serà la d'agrupar les diferents accions que programarem a un esdeveniment amb una funció.
<script>
function DoblarValor()
{
var quant = document.getElementById("quantitat");
var valor = quant.value;
var ele = document.getElementById("Doble");
ele.value = valor*2;
}
</script>
<input id="quantitat" type="text" value="22">
<button onclick="DoblarValor()">Prem aquí</button>
<input id="Doble" type="text">
En veurem més detall més endavant.
Exemples¶
Exemple 1 de Javascript
Tenim aquest resultat:
Aquest codi s'executarà quan es passi amb el ratolí per damunt del text “passa'm per sobre”. El codi Javascript està a dins de l'element HTML. Onmouseover captura el moment en el que el cursor o ratolí passarà per damunt de l'element i actuarà, és a dir executarà el codi javascript que hi ha a dins de "...".
p2-s1-ex1-Alert.html p2-s1-ex1-Alert.html :fontawesome-solid-download:
Exemple 2: Sumar variables
Tenim aquest resultat:
En aquest exemple, el codi javascript està inclòs a dins de etiquetes <script> </script>.
La ubicació la posem a dins del <body>.
document.write insereix el text en la posició que s'ubica l'script.
Així doncs ens interessa ubicar-lo a dins del <body>
El resultat que mostrem resulta de sumar dos valors de variables amb l'operador +.
p2-s1-ex2-Variables.html p2-s1-ex2-Variables2.html :fontawesome-solid-download:
exemple 3: Accedir a valors
<!DOCTYPE html>
<html lang="ca">
<head>
<title>Exemple de HTML - Javascript - Exemple 3</title>
<script>
// funció de Saludar
function Saludar()
{
// obtenim el valor de l'input
var nom = document.getElementById("nom").value;
//mostrem la salutació concatenada a dins del <div> Saludem
document.getElementById("Saludem").innerHTML = "hola " + String(nom);
}
</script>
</head>
<body>
<h1>HTML - Javascript - Exemple 3</h1>
<label>Nom: </label>
<input id="nom" type="text">
<button onclick="Saludar();">Saludar</button>
<div id="Saludem"></div>
</body>
</html>
Tenim aquest resultat:
Primer identifiquem els elements del HTML amb l'atribut id
<input id="nom" type="text">
Això permetrà accedir el javascript al seu valor amb:
var nom = document.getElementById("nom").value;
I guardar-ho a la variable nom
<div id="Saludem"></div>
Permetrà que podem inserir codi HTML a dins del seu contingut amb:
document.getElementById("Saludem").innerHTML = "hola " + String(nom);
Quan cliquem el botó “Saludar”, s'executarà la funció Saludar()
<button onclick="Saludar();">Saludar</button>
El codi de la funció Javascript està a dins de les etiquetes <script>
Llavors la lògica de l'script és:
Obtenir el valor entrat al quadre de text.
Concatenar “hola” i el text escrit i mostrar-ho a dins del `<div>`.
Amb l'operador +, concatenem strings.
Amb la funció `String()` convertim el que hem escrit al quadre de text a un string.
Posem ja comentaris a la lògica desenvolupada.
p2-s1-ex3-Saludar.html p2-s1-ex3-Saludar.html :fontawesome-solid-download: