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/12/04 17:52] (actual)
enric_mieza_sanchez [AJAX amb jQuery]
@@ 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>
 \\
@@ Línia 226: / Línia 278: @@
 </WRAP>
-==== AJAX amb jQuery ====
+==== Exemple AJAX amb API Musicbrainz.org ====
 Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem [[http://api.jquery.com/jquery.ajax/|AJAX amb jQuery]] que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org :
+<tabbox JavaScript>
+<code javascript>
+fetch('https://musicbrainz.org/ws/2/artist?query=queen&fmt=json')
+  .then(response => {
+      if (!response.ok) {
+          throw new Error('Error de xarxa.');
+      }
+      return response.json();
+  })
+  .then(data => {
+    // iterem pels diversos elements de l'array artists
+    for( const artist of data.artists ) {
+      console.log(`${artist.name} (${artist.disambiguation}`)
+      // pintar l'HTML necessari...
+    }
+  })
+  .catch(error => {
+    console.error('Error en obtenir les notícies:', error);
+  });
+</code>
+<tabbox jQuery>
 <code javascript>
 $.ajax({
@@ Línia 234: / Línia 307: @@
   url: "https://musicbrainz.org/ws/2/artist?query=queen",
   dataType: "json",   // necessitem això pq ens retorni un objecte JSON
-}).done(function (msg) {
+}).done(function (data) {
-  for(let item in msg.artists) {
+  for(let item in data.artists) {
-    console.log(msg.artists[item]);
+    var artista = data.aritsts[item].name;
-    // aquí caldría fer mes coses, of course...
+    var descripcio = data.aritsts[item].disambiguation;
+    console.log(`${artista} (${descripcio}`)
+    // aquí caldria pintar l'HTML necessari
     // ...
   };
@@ Línia 244: / Línia 319: @@
 });
 </code>
+</tabbox>
 Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat.

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina