Diferència entre revisions de la pàgina «Promises»

De Wiket
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «=Promises= ==Resources== ==Exercises== <ol> <li>With the given code, create a web page that call a server with some data (it's doesn't matter what data) and print on t...».)
 
 
(Hi ha 12 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
−
=Promises=
+
'''volver a''' [[M06 Desarrollo web en entorno cliente]]
−
==Resources==
+
=Resources=
−
==Exercises==
+
[https://www.w3schools.com/js/js_promise.asp Javascript Promises]
 +
 
 +
=Exercises=
 
<ol>
 
<ol>
−
<li>With the given code, create a web page that call a server with some data (it's doesn't matter what data) and print on the page aplying some kind of format
+
<li>
 +
Create a form with 2 fields a user name and a email. Create a function (with promises) to validate the form and submit the form if it is correct.
 +
<!-- function validateForm(formData) {
 +
  return new Promise(function(resolve, reject) {
 +
    if (formData.username.length < 3) {
 +
      reject(new Error("Username must be at least 3 characters"));
 +
    } else if (!formData.email.includes("@")) {
 +
      reject(new Error("Invalid email address"));
 +
    } else {
 +
      resolve();
 +
    }
 +
  });
 +
}
 +
 
 +
var formData = {
 +
  username: "johndoe",
 +
  email: "[email protected]"
 +
};
 +
 
 +
validateForm(formData)
 +
  .then(function() {
 +
    submitForm(formData);
 +
  })
 +
  .catch(function(error) {
 +
    showError(error.message);
 +
  });
 +
-->
 +
</li>
 +
<li>Make a web page with a button (button text: Load image), when we click on that button you have use "promises" to load an image from your server and catch the errors, if there are
 +
<!-- function loadImage(url) {
 +
  return new Promise(function(resolve, reject) {
 +
    var image = new Image();
 +
    image.onload = function() {
 +
      resolve(image);
 +
    };
 +
    image.onerror = function() {
 +
      reject(new Error("Could not load image at " + url));
 +
    };
 +
    image.src = url;
 +
  });
 +
}
 +
 
 +
loadImage("https://example.com/image.jpg")
 +
  .then(function(image) {
 +
    document.body.appendChild(image);
 +
  })
 +
  .catch(function(error) {
 +
    console.error(error);
 +
  });
 +
--></li>
 +
<li>With the given code, create a web page that call a server with some data (it's doesn't matter what data) and print the data on the page applying some kind of format.
 +
<pre class="prettyprint">
 +
const loadJSON = (file) => {
 +
  return new Promise((resolve, reject) => {
 +
    const xhr = new XMLHttpRequest();
 +
    xhr.open('GET', file, true);
 +
    xhr.responseType = 'json';
 +
    xhr.onload = () => {
 +
      if (xhr.status === 200) {
 +
        resolve(xhr.response);
 +
      } else {
 +
        reject(xhr.statusText);
 +
      }
 +
    };
 +
    xhr.onerror = () => reject(xhr.statusText);
 +
    xhr.send();
 +
  });
 +
};
 +
 
 +
</pre>
 +
</li>
 +
<li>
 +
Using the given code and this api ( https://restcountries.com/ ), create a web application that asks user to enter a capital form some country and displays the name of the country and its flag
 +
<pre class="prettyprint">
 +
findData = new Promise(function (myResolve,myReject) {
 +
 
 +
  res = fetch("API URL")
 +
  if(res){
 +
    myResolve(res)
 +
  }
 +
});
 +
 
 +
findData.then(
 +
  function (value) {
 +
    //console.log(value.json())
 +
    return value.json()
 +
  }
 +
  ).then(res =>{
 +
    console.log(res[0].name.common)
 +
  });
 +
</pre>
 +
</li>
 +
<li>
 +
Modify the previous exercise to display in addition to the name of the country and its flag, the name and flag of the neighboring countries. Hint: Promises.all()
 +
<!--const buscarPais = async (alpha3Code) => {
 +
  try {
 +
    const res = await fetch(
 +
      `https://restcountries.eu/rest/v2/alpha/${alpha3Code}`
 +
    );
 +
 
 +
    const data = await res.json();
 +
 
 +
    return data;
 +
  } catch (error) {
 +
    console.log(error);
 +
  }
 +
};
 +
 
 +
const buscarPaisYVecinos = async () => {
 +
  const colombia = await buscarPais("col");
 +
 
 +
  const vecinos = await Promise.all(
 +
    colombia.borders.map((border) => buscarPais(border))
 +
  );
 +
 
 +
  console.log(vecinos);
 +
};
  
 +
buscarPaisYVecinos();-->
 
</li>
 
</li>
 
</ol>
 
</ol>

Revisió de 15:59, 14 març 2023

volver a M06 Desarrollo web en entorno cliente

Resources

Javascript Promises

Exercises

  1. Create a form with 2 fields a user name and a email. Create a function (with promises) to validate the form and submit the form if it is correct.
  2. Make a web page with a button (button text: Load image), when we click on that button you have use "promises" to load an image from your server and catch the errors, if there are
  3. With the given code, create a web page that call a server with some data (it's doesn't matter what data) and print the data on the page applying some kind of format. 
    const loadJSON = (file) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', file, true);
    xhr.responseType = 'json';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};
  4. Using the given code and this api ( https://restcountries.com/ ), create a web application that asks user to enter a capital form some country and displays the name of the country and its flag 
    findData = new Promise(function (myResolve,myReject) {
  
  res = fetch("API URL")
  if(res){
    myResolve(res)
  }
});

findData.then(
  function (value) {
    //console.log(value.json())
    return value.json()
  }
  ).then(res =>{
    console.log(res[0].name.common)
  });
  5. Modify the previous exercise to display in addition to the name of the country and its flag, the name and flag of the neighboring countries. Hint: Promises.all()
Obtingut de «https://wiket.esteveterradas.cat/index.php?title=Promises&oldid=11164»