Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- cordova [2025/10/16 16:51]
enric_mieza_sanchez [Exercici Tasklist v0.2]
+++ cordova [2025/11/06 19:00] (actual)
enric_mieza_sanchez [Inicialitzacions HTML]
@@ Línia 78: / Línia 78: @@
 \\
-{{tasklist2.png?200}} {{tasklist1.png?200}}
 ==== Exercici Tasklist v0.2 ====
+{{tasklist2.png?200}} {{tasklist1.png?200}}
 <WRAP todo>
 Continua de l'anterior exercici Tasklist v0.1:
   - Implementa un **botó Elimina** dins de cada element de la llista que esborri aquell element. Convé fer-ho en la pròpia creació de l'element ''jQuery''.
-    * Enlloc d'assignar la //callback// en el ''onclick='' del botó, assigneu-la d'aquesta manera, que és la bona pràctica recomanada en general:<code javascript>$(".boto_eliminar").click(elimina);</code>On ''elimina'' és la funció que cridarem per esborrar l'element.
+    * Enlloc d'assignar la //callback// en el ''onclick="elimina()"'' del botó, assigneu-la d'aquesta manera, que és la bona pràctica recomanada en general:<code javascript>$(".boto_eliminar").click(elimina);</code>On ''elimina'' és la funció que cridarem per esborrar l'element.
-    * Per eliminar un element del DOM caldrà saber **//quin// element està cridant (caller)**. [[https://stackoverflow.com/questions/945201/how-to-get-the-caller-event-and-dom-element-id|Aquest post explica com obtenir el caller]]:<code javascript>function esborra(event){
+    * Per eliminar un element del DOM caldrà saber **//quin// element està cridant (caller)**. [[https://stackoverflow.com/questions/945201/how-to-get-the-caller-event-and-dom-element-id|Aquest post explica com obtenir el caller]]:<code javascript>function elimina(event){
     var caller = event.target || event.srcElement;
     console.log( caller );
@@ Línia 97: / Línia 98: @@
     - Buidant l'element ''<li>'' que volem editar i creant a dins un ''<input>'' i botó de OK com a la imatge. Després caldrà agafar el text i ficar-ho dins l'element de la tasca.
     - Demanant amb el //prompt//, que de fet és la opció més senzilla (però també la menys vistosa).
-    - (no molt aconsellable en Cordova): que ens porti a una altra pàgina que ens permeti editar la tasca.
    - És probable (depenent de la implementació que hagis fet) que quan vulguis editar el text de la tasca (està dintre d'un <a>) et trobis que et posa també el text dels elements fills (botons d'esborrar i/o editar). [[https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags|En aquest post s'explica una solució molt eleganṭ]] per eliminar el text dels botons i deixar el de la task sola.
 </WRAP>
@@ Línia 135: / Línia 135: @@
 \\
-===== Cordova no vol inlines =====
+===== Seguretat en Cordova =====
-Típicament podríem fer una aplicació en JavaScript en una pàgina HTML i podríem posar botons que cridin a funcions del nostre codi amb un //onclick// (el què coneixem per crida //inline//). Doncs bé, Cordova no ens deixa fer //inlines// com aquest.
+<WRAP important>
+Cordova ens deixa crear qualsevol pàgina HTML amb el codi que ens sembli bé. Però si ens fixem en la plantilla al crear de zero un projecte, ens trobem algunes particularitats que cal parar atenció, sobretot el **tag META amb el Content-Security-Policy**:
-<WRAP alert>
-Aquesta solució funcionaria en una web normal, però **no funciona en Cordova si utilitzem la plantilla que ve quan creem un projecte**:
-<code html><button id="boto_esborrar" onclick="esborra()">Esborra</button></code>
-Això es deu al tag META que hi ha l'inici del HTML (secció //head//):
 <WRAP prewrap>
 <code html>
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
 </code>
+</WRAP>
+Aquest tag META bàsicament ens limita certes accions de l'HTML que podrien fer vulnerable el nostre codi. Entre d'altres, no ens deixa connectar a webs externes si no les validem dins del tag. I tampoc ens permet posar codi //inline//.
 </WRAP>
-i que veurem més endavant com a mesura de seguretat, per evitar injeccions de codi extern a la nostra app.
+Típicament podríem fer una aplicació en JavaScript en una pàgina HTML i podríem posar botons que cridin a funcions del nostre codi amb un //onclick// (el què coneixem per crida //inline//). Doncs bé, Cordova no ens deixa fer //inlines// com aquest:
+<WRAP alert>
+Aquesta solució funcionaria en una web normal, però **no funciona si posem el tag META de Content-Security-Policy**:
+<code html><button id="boto_esborrar" onclick="esborra()">Esborra</button></code>
 </WRAP>
 Forma de solventar-ho: fer els botons més senzills, sense //onclick// (però amb //id//):
-<code javascript index.html>
+<code html index.html>
   <button id="boto1">Prem per afegir</button>
+  <!-- al final del body carreguem les llibreries de Cordova i la de la nostra app -->
+  <script src="cordova.js"></script>
+  <script src="js/index.js"></script>
 </code>
-I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version):
+I després, en el nostre ''index.js'', ja li afegim el //onclick// per cridar la funció ''addElem'':
-<code javascript index.js>
-  $('#boto1').click(addElem);
-</code>
-En aquest exemple, cridaríem a la funció ''addElem()''.
+<tabbox JavaScript>
+<code javascript index.js>document.getElementyById('boto1').onclick(addElem);</code>
+<tabbox jQuery>
+<code javascript index.js>$('#boto1').click(addElem);</code>
+</tabbox>
-I un darrer apunt, la crida a aquesta funció no pot anar al principi del document, pq en el //head// encara no existeix el nostre //button//. Tenim 2 solucions:
+\\
-  - Posar el tag ''<script src=...'' al final del doc (just després del //button//).
-  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<sxh javascript>
+===== Inicialitzacions =====
+==== Inicialitzacions HTML ====
+Abans d'executar codi JavaScript sol convenir esperar a que estigui carregat tot el document. Tenim 2 estratègies bàsiques:
+  - Posar el tag ''<script src=...'' al final del document HTML.
+  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<tabbox jQuery>
+Estil jQuery amb la funció ''ready'':
+<code javascript>
 $(document).ready( function ()  {
-	// initialize
+    // inicialitzar: assignar events
-	$('#addButton').click(addElem);
+    $('#addButton').click(addElem);
-	$('#apiButton').click(callAPI);
+    $('#apiButton').click(callAPI);
 });
-</sxh>
+</code>
+<tabbox JavaScript>
+<code javascript>
+function inicialitza() {
+    // inicialitzar: assignar events
+    document.getElementById("addButton").onclick = addElem;
+    document.getElementById("apiButton").onclick = callAPI;
+}
+// associem l'event "onload" del document a la funció inicialitza
+window.addEventListener("load", inicialitza, false);
+</code>
+</tabbox>
+==== Inicialitzacions Cordova ====
+Cordova necessita inicialitzar el //hardware// del dispositiu. Per això és important que al nostre codi carreguem les llibreries. Si és una aplicació com la //tasklist// que només dibuix per pantalla segurament no li caldria. Però si volem accedir a la càmera o al sistema d'arxius del dispositiu serà imprescindible carregar aquestes llibreries:
+<code html index.html>
+<body>
+  ...
+  <!-- carreguem les llibreries de Cordova i la de la nostra app -->
+  <script src="cordova.js"></script> <!-- dispara event ondeviceready -->
+  <script src="js/index.js"></script>
+</body>
+</code>
+La línia del HTML que carrega ''cordova.js'' dispararà un event "ondeviceready" propi de Cordova. Al nostre codi podem començar a realitzar accions quan es rebi aquest event:
+<code javascript index.js>
+document.addEventListener('deviceready', onDeviceReady, false);
+function onDeviceReady() {
+    // aquí ja podem fer accions amb la càmera, arxius, etc.
+}
+</code>
+<WRAP todo>
+Fes una **versió v0.4 de la Tasklist** aplicant el tag META de seguretat i les inicialitzacions pertinents.
+</WRAP>
 \\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina