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/11/06 18:19]
enric_mieza_sanchez [Cordova no vol inlines]
+++ cordova [2025/11/06 19:00] (actual)
enric_mieza_sanchez [Inicialitzacions HTML]
@@ Línia 157: / Línia 157: @@
 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