Notebook Pages index

Index des pages de la catégorie "JS"

Les cours sur Javascript chez OpenClassRoom
Le 29/03/2018 Auteur: Marc L. Harnist

Extrait:

16 cours - 10 heures - Les bases de JavaScript. (J'ai terminé tous ses cours, sauf le tp, le dernier)
13 cours - 20 heures - Utilis" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout
Texte entier
1. 16 cours - 10 heures - Les bases de JavaScript. (J'ai terminé tous ses cours, sauf le tp, le dernier)
2. 13 cours - 20 heures - Utilisez Javascripts dans vos projets web (J'ai terminé tous ses cours, sauf le tp, le dernier) pour vous assurer que vous êtes à la hauteur. Vous n'avez pas besoin de comprendre tous les concepts, mais vous devriez avoir un vocabulaire JavaScript fonctionnel (fonctions, variables, boucles).
3. 11 cours sur jquery - 15 heures (J'ai terminé tous ses cours, sauf le tp, le dernier)
4. Ensuite...Angular

Cours sur JavaScript
Le 30/03/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

JavaScript a été créé en 1995 par Brendan Eich.
2009 création de node.js qui travaille côté serveur.
2009 aussi: Base de donnée MongoDB en C++ fonctionne aussi avec js.

Versions JS
La version js s'appelle ECMAScript
Version 2009:ES5, introduced in 2009 (cours Openclassroom)
Nouvelle version SS6 / ES2015 pas encore sur tous les navigateurs.

Outils
https://jsfiddle.net/

Outil de traitement de code
Sublime texte : https://www.sublimetext.com/

Mes TP js
http://marcharnist.fr/formation/view/intro-javascript/

Prompt
Le 03/04/2018

Extrait:

Prompt crée un formulaire dans une nouvelle fenêtre:
var name = prompt('Entrez votre prénom:');
alert('Bonjour, ' + name);

var number = Number(prompt('Entrez un nombre'));
if(number > 0){
alert(number + ' est un nombre positif');
}
" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Alert
Le 03/04/2018

Alert() ouvre une nouvelle fenêtre avec un contenu de votre choix.
" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

else if
Le 03/04/2018

Attention: else if s'écrie en deux mots en JS et non elseif (php)" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Switch, case, break et default en JS
Le 03/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

switch (expression) {
case value1:
// code when the expression matches value1
break;
case value2:
// code when the expression matches value2
break;
...
default:
// code for when neither case matches
}

EXEMPLE
var weather = prompt('Quel temps fait-il?');
switch(weather){
case 'ensolleillé':
alert('Un temps pour sortir en T-shirt!');
break;
case 'pluvieux':
alert('N oubliez pas votre parapluie!');
break;
case 'venteux':
alert('Mettez votre veste coupe-vent.')
break;
case 'neigeux':
alert('Restez chez vous!');
break;
default:
alert('Ce n est pas un temps valide.');

}

Argument et paramètres
Le 06/04/2018 Auteur: Marc L. Harnist

function sayHello(parametre) {
var message = "Hello, " + name + "!";
return message;
}

console.log(sayHello("argument"));
console.log(sayHello("argument"));" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Argument et paramètres
Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Paramètre: la chose passée dans la définition de la fonction

Argument: la chose est passée quand la fonction est appelée

function sayHello(parametre) {
var message = "Hello, " + name + "!";
return message;
}
" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Paramètre: la chose passée dans la définition de la fonction

Argument: la chose est passée quand la fonction est appelée

function sayHello(parametre) {
var message = "Hello, " + name + "!";
return message;
}

console.log(sayHello("argument"));
console.log(sayHello("argument"));

Fonctions en js
Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Les fonctions en js s'appellent avec un point.

var originalWord = "Bora-Bora";
var lowercaseWord = originalWord.toLowerCase();
console.log(lowercaseWord); // will be "bora-bora"
var uppercaseWord = originalWord.toUpperCase();
console.log(uppercaseWord); // " (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Objets en JS
Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Source: openclassroom
Les objets en js se déclarent avec {}

Ex:
var pen = {
type: "ballpoint",
color: "blue",
brand: "Bic"
};

Pour afficher une propriété, il suffit d'écrire le nom de l'objet et un point et l'att" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Source: openclassroom
Les objets en js se déclarent avec {}

Ex:
var pen = {
type: "ballpoint",
color: "blue",
brand: "Bic"
};

Pour afficher une propriété, il suffit d'écrire le nom de l'objet et un point et l'attribut:
console.log(pen.color); // affiche "blue" dans la console (faire f12/console)

Objet et méthode incluse dans l'objet en JS
Le 06/04/2018

Extrait:

Texte entier

On peut inclure une méthode dans un objet:
var cake = {
flavor: "strawberry",
levels: 2,
price: "$10",
occasion: "birthday",

// Describe the cake
describe: function () {
var description = "The " + this.occasion + " cake has a " + this.flavor + " flavor, " + this.levels + " layers, and costs " + this.price + ".";
return description;
}
};

console.log(cake.describe());

// The cake is actually for a wedding!
cake.occasion = "wedding";

// Its number of layers and price both go up.
cake.levels = cake.levels + 8;
cake.price = "$50";

console.log(cake.describe());

Modifier facilement la valeur d'un attribut d'un objet en JS
Le 06/04/2018 Auteur: Marc L. Harnist

Pour modifier la valeur d'un attribut d'un objet en js il suffit de donner une nouvelle valeur ainsi:

classeur.intercalaires = 18;
objet.attribut = 'Nouvelle valeur'; // pour les chaînes de caract.
ou
objet.attribut = 18; // pour les nombres." (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

This en POO js comme ne php
Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Comme en PHP, on utilise "this" pour nommer un objet à l'intérieur de la "class"

var cake = {
flavor: "strawberry",
levels: 2,
price: "$10",
occasion: "birthday",

// Describe the cake
describe: function () {
var description = "The " + this.occasion + " cake has a " + this.flavor + " flavor, " + this.levels + " layers, and costs " + this.price + ".";
return description;
}
};

console.log(cake.describe());

// The cake is actually for a wedding!
cake.occasion = "wedding";

// Its number of layers and price both go up.
cake.levels = cake.levels + 8;
cake.price = "$50";

console.log(cake.describe());

Les objets en JS
Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Voici à quoi ressemble une classe en JS:
function Pastry(type, flavor, levels, price, occasion) {
this.type = type;
this.flavor = flavor;
this.levels = levels;
this.price = price;
this.occasion = occasion;
}
// Voici le constructeur<" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Voici à quoi ressemble une classe en JS:
function Pastry(type, flavor, levels, price, occasion) {
this.type = type;
this.flavor = flavor;
this.levels = levels;
this.price = price;
this.occasion = occasion;
}
// Voici le constructeur
Pastry.prototype.describe = function () {
var description = "The " + this.type + " is a " + this.occasion + "pastry, has a " + this.flavor + " flavor, " + this.levels + " layer(s), and costs " + this.price + ".";
return description;
}

Voici comment on l'instancie:
new Pastry(type, flavor, levels, price, occasion);

Récupérer le code d'une tentative d'instanciation de classe js sans new
Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Certains programmeurs aiment sauver le code qui oublie d'utiliser le mot - clé "new". Ils le font en ajoutant une vérification dans leurs fonctions constructeurs pour voir si la fonction est appelée sans "new" . Ce n'est pas obligatoire, mais c'est une technique utile à connaître et qui peut aider à prévenir les bogues dans le futur lorsque votre bibliothèque d'objets est utilisée de manière inattendue.

Si nous réécrivons notre fonction Pâtisserie pour ce faire, elle utilisera "instanceof" pour s'assurer que this c'est réellement un Pastry (patisserie) objet, et non, par exemple, le window global. Si ce n'est pas le cas, on peut supposer que le mot - clé "new" a été involontairement omis, et même aider l'utilisateur dans ce cas en appelant à nouveau la fonction constructeur (de la bonne façon cette fois) et en retournant cette valeur à la Pastry fonction:
function Pastry(type, flavor, levels, price, occasion) {
if !( this instanceof Pastry ) {
return new Pastry(type, flavor, levels, price, occasion);
}

// the rest of the function goes here...
}

Globales, fenêtres - windows en js
Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

La portée globale de Javascript est spéciale d'une autre manière, car elle se comporte comme un objet.

Cet objet a généralement un nom, qui varie en fonction du contexte dans lequel votre code javascript est en cours d'exécution. Dans le navigateur, il est généralement appelé" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

La portée globale de Javascript est spéciale d'une autre manière, car elle se comporte comme un objet.

Cet objet a généralement un nom, qui varie en fonction du contexte dans lequel votre code javascript est en cours d'exécution. Dans le navigateur, il est généralement appelé "fenêtre".

Dans d'autres environnements Javascript, l'objet global a des noms différents. Dans Node.js, l'objet global est généralement appelé "global", et les web workers le désignent par "self"...

Arrays
Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

var films = ["Jurassic Park", "Titanic", "Toy Story"];

films.push("The Revenant"); // push pour ajouter une valeur

console.log(films[3]); // will show "The Revenant"

AFFICHER LE CONTENU D'UN OBJET AVEC FOREACH
var Film = {
// Initialise" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Résumé sur Javascript
Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Résumé (source: Openclassroom)
Un programme est une liste de commandes à un ordinateur. Le rôle du programmeur est d'écrire des programmes qui produiront de bons résultats cohérents!

JavaScript est génial pour sa polyvalence. Il a longtemps été associé au Web, mais il est maintenant présent partout, des serveurs aux applications mobiles et aux objets connectés.

Un programme JavaScript est une série d'instructions compilées dans un fichier ayant l'extension .js. Il peut être testé à partir d'un navigateur Web en ouvrant une page HTML qui lie le fichier.

Dans un programme, les valeurs sont stockées en les stockant dans des variables . Une variable est un conteneur d'informations.

Un type de données déterminera le rôle de l'élément et ce qu'il peut faire. Les principaux types de JavaScript incluent number, string, boolean et object.

if peut être utilisé pour exécuter du code basé sur une déclaration vraie ou fausse, et switch est utilisé pour le faire plusieurs fois.

Vous pouvez répéter des actions plusieurs fois en utilisant des boucles comme ou . whilefor

Les fonctions déclarent un ensemble d'instructions qui exécutent une tâche donnée. Une fonction peut être appelée de n'importe où dans le programme! Une fonction peut recevoir des informations sous la forme de paramètres et renvoyer une valeur ou non.

Programmation orientée objet signifie un code d'écriture composé d' objets . Un objet JavaScript a un ensemble de propriétés. Une propriété est une association entre un nom et une valeur. Lorsque sa valeur est une fonction, on dit que la propriété est une méthode de l'objet.

JavaScript utilise des prototypes pour définir des modèles et partager des propriétés entre des objets.

Les tableaux sont utilisés pour regrouper les données. Comme les caractères d'une chaîne, les éléments du tableau sont identifiés par un index commençant à zéro.??

Boucle JS qui affiche les noeuds d'une page
Le 11/04/2018 Auteur: Marc L. Harnist

// Show the body node's children
for (var i = 0; i < document.body.childNodes.length; i++) {
console.log(document.body.childNodes[i]);
}" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

forEach en JS
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

var myArray = ["Bonjour!", "Je", "m'appelle", "Marc"];

/**
* value, index, array: value renvoie la valeur, index la clé, et array est le nom de votre array
*
myArray.forEach(function(value, index, array) {
alert(
'Index : ' + index " (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Afficher ou se déplacer dans les noeuds d'une page
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

// Access the first child of the body node
console.log(document.body.childNodes[0]);

// Access the second child of the body node
console.log(document.body.childNodes[1]);

// Show the body node's children
for (var i = 0; i < document.body.childNodes.length; i++) {
console.log(document.body.childNodes[i]);
}

Les objets DOM ont des propriétés et des méthodes à utiliser avec JavaScript. Par exemple, nodeTyperenvoie le type de nœud, childNodes contient une collection de nœuds enfants et parentNoderenvoie le nœud parent.

Il y a d'autres propriétés que nous ne discuterons pas ici qui vous permettent de naviguer dans le DOM, comme firstChild, lastChildou nextSibling .

Noeuds js
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

document.getElementsByClassName(): Récupérer les valeurs d'un élement html par son id et l'afficher
Le 11/04/2018 Auteur: Marc L. Harnist

// // Get all elements that have the class "wonders"
var wondersElements = document.getElementsByClassName("wonders");
for (var i = 0; i < wondersElements.length; i++) {
console.log(wondersElements[i]);
}" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Récupérer le contenu d'une balise html en JS et autres méthodes
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Source

Contenu HTML
La propriété innerHTML propriété récupérera le contenu HTML de votre élément DOM.

// The HTML content of the "content" ID
console.log(do" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Source

Contenu HTML
La propriété innerHTML propriété récupérera le contenu HTML de votre élément DOM.

// The HTML content of the "content" ID
console.log(document.getElementById("content").innerHTML);
Contenu textuel
La propriété textContent renvoie tout le contenu textuel d'un élément DOM, sans balise HTML.

// The href attribute of the first link
console.log(document.querySelector("a").getAttribute("href"));

Les attributs
La méthode getAttribute peut être appliquée à un élément DOM et retournera la valeur de l'attribut.

// ID of the first list
console.log(document.querySelector("ul").id);

// href attribute of the first link
console.log(document.querySelector("a").href);
Certains attributs sont directement accessibles en tant que propriétés. Cela est vrai pour les attributs ID, href et value.

Vous pouvez vérifier l'existence d'un attribut en utilisant la méthode hasAttribute comme indiqué dans l'exemple ci-dessous.

if (document.querySelector("a").hasAttribute("target")) {
console.log("The first link has a target attribute.");
} else {
console.log("The first link does not have a target attribute.");
}
Classes
Dans une page Web, une balise peut avoir plusieurs classes. classList récupère la liste des classes d'un élément DOM de l'élément DOM.

// List of classes of the element identified by "ancient"
var classes = document.getElementById("ancient").classList;
console.log(classes.length); // Will be 1, since the element only has one class.
Vous avez également la possibilité de tester la présence d'une classe sur un élément en l'appelant contains et en lui passant un paramètre.

if (document.getElementById("ancient").classList.contains("wonders")) {
console.log("The element identified by 'ancient' also has the class 'wonders'.");
} else {
console.log("The element identified by 'ancient' does not have the class 'wonders.'");
}
En résumé
Plutôt que de passer par le nœud DOM, vous pouvez rapidement accéder à un ou plusieurs éléments en utilisant des méthodes de sélection.

Les getElementsByTagName, getElementsByClassName et les méthodes getElementById de recherche respectivement les éléments par nom de la balise, la classe et ID. Les deux premières méthodes renvoient une liste et la dernière renvoie un seul élément.

Les méthodes querySelectorAll et querySelector permettent de rechercher des éléments en utilisant un sélecteur CSS. La première méthode renvoie tous les éléments correspondants et la seconde renvoie uniquement la première.

La propriété innerHTML renvoie le contenu HTML d'un élément. La propriété textContent renvoie son contenu textuel sans balise HTML.

Les méthodes getAttribute et hasAttribute permettent l'accès aux attributs d'élément.

classList fournit un accès aux classes d'un élément.

Rajouter du texte à une page html avec JS
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

La page html:

Java

Marc Harnist eh oui!

Le code js:
// // Modifying a" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

La page html:

Java

Marc Harnist eh oui!

Le code js:
// // Modifying an HTML element: adding an

document.getElementById("languages").innerHTML += '

';
// Ce code va rajouter une ligne:

dans la page.
Regardez

Effacer un bloc html avec js et autres fonctions
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

La page html:

Java

Marc Harnist eh oui!

Le code js:
// // Delete the " (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

La page html:

Java

Marc Harnist eh oui!

Le code js:
// // Delete the HTML content of the list, replacing it with nothing
document.getElementById("languages").innerHTML = ""; // ce code va effacer la liste ci-dessus!

// // Modifying an HTML element: adding an

// document.getElementById("languages").innerHTML += '

';

// // Delete the HTML content of the list, replacing it with nothing
document.getElementById("languages").innerHTML = "";

// ///////////////

// // Modify the title's text content
document.querySelector("h1").textContent += " for programming";

// ////////////

// var titleElement = document.querySelector("h1"); // Grab the first h1
// titleElement.classList.remove("beginning"); // Remove the class "beginning"
// titleElement.classList.add("title"); // Add a class called "title"
// console.log(titleElement);

// //////////////

// var pythonElement = document.createElement("li"); // Create an li element
// pythonElement.id = "python"; // Add details to the elment, like an id
// pythonElement.textContent = "Python"; // Define its text content
// document.getElementById("languages").appendChild(pythonElement); // Insert the new element into the DOM

// ///////////////////

// var bashElement = document.createElement("li"); // Create an li element
// bashElement.id = "bash"; // Define its id
// bashElement.textContent = "Bash"; // Define its text content
// // Replace the element identified by "perl" with the new element
// document.getElementById("languages").replaceChild(bashElement, document.getElementById("perl"));

// //////////////////////

// // Remove the element with the "bash" id
// document.getElementById("languages").removeChild(document.getElementById("bash"));

Avec js, on peut modifier l'attribut d'un élément html
Le 11/04/2018 Auteur: Marc L. Harnist

// Define the id attribute of the first title
document.querySelector("h1").setAttribute("id", "title");" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Modifier une classe d'un élément html avec js avec la fonction classList
Le 11/04/2018 Auteur: Marc L. Harnist

var titleElement = document.querySelector("h1"); // Grab the first h1
titleElement.classList.remove("beginning"); // Remove the class "beginning"
titleElement.classList.add("title"); // Add a class called "title"
console.log(titleElement);" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Modal de Bootstrap pour de belles fenêtres "alert"
Le 11/04/2018 Auteur: Marc L. Harnist

https://getbootstrap.com/docs/4.0/components/modal/" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)

Démo JS: compte à rebours
Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Cette page va s'auto-détruire dans 1000 secondes...

Le lien vers le fichier js se trouve dans le footer.

Code javascript dans le footer:
var cou" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
Cette page va s'auto-détruire dans 1000 secondes...

Le lien vers le fichier js se trouve dans le footer.

Code javascript dans le footer:
var counterElement = document.getElementById("counter");

// Count down the counter until 0
function decreaseCounter() {
// Convert counter text to a number
// Converti le contenu de l'élément html déterminé par l'id "counter" en un nombre
var counter = Number(counterElement.textContent);
counterElement.textContent = counter - 1;
if(counter == 0){
alert('BOUM!')//ouvre une fenêtre avec le message "BOUM!"
};
if(counter < 0) {
document.body.innerHTML = ""; // ce code va effacer le body soit toute la page
}
}

// Call the decreaseCounter function every second (1000 milliseconds)
setInterval(decreaseCounter, 1000);

// Call the decreaseCounter function every second (1000 milliseconds)
setInterval(decreaseCounter, 1000);

Effacer le body, un div, ou autre élément HTML avec js
Le 12/04/2018 Auteur: Marc L. Harnist

Extrait:

document.body.innerHTML = ""; // ce code va effacer le body soit toute la page. On déclare l'élément body.html vide. On peut écrire quelque chose.

// // Delete the HTML content of the list, replacing it with nothing
// document.getElementById("languages").innerHTML = ""; //" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
document.body.innerHTML = ""; // ce code va effacer le body soit toute la page. On déclare l'élément body.html vide. On peut écrire quelque chose.

// // Delete the HTML content of the list, replacing it with nothing
// document.getElementById("languages").innerHTML = ""; //efface le contenu de l'élément html qui a l'id "langage"

Ajax importe un fichier dans un autre via un bouton html!
Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

L'exemple: Démo

Le code:
< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< link rel="stylesheet" href="css/styles.css">
< title>AJAX practice< /title>
< script>

// I" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
L'exemple: Démo

Le code:
< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< link rel="stylesheet" href="css/styles.css">
< title>AJAX practice< /title>
< script>

// Instanciation de la classe: objet "myRequest"
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'surprise.html'); // on souhaite inclure le fichier "surprise.html" ici
// open est une méthode de l'objet "myRequest"
myRequest.onreadystatechange = function () {

// 4 signifie que le serveur a répondu
if (myRequest.readyState === 4) {
document.getElementById('ajax-content').innerHTML = myRequest.responseText;
console.log(myRequest.responseText);
}
};

function sendTheAJAX() {
myRequest.send();
document.getElementById('reveal').style.display = 'none'; // 'reveal' = < button id='reveal' .... below
}
< /script>
< /head>
< body>
< div class="title">
< h1>Today's your special day!< /h1>
< /div>
< button id="reveal" onclick="sendTheAJAX()" class="button">Why's that?< /button>
< div id="ajax-content">< !-- le code importé par ajax, soit le fichier "surprise.html" est collé ici -->
< /p>
< /body>
< /html>

La syntaxe JSON de base et JS - exemple des bonbons
Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Démo : https://codepen.io/eclairereese/pen/QEKMdG

La syntaxe JSON de base
Dans JSON, une liste de bonbons avec un nom, u" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier

Démo : https://codepen.io/eclairereese/pen/QEKMdG

La syntaxe JSON de base
Dans JSON, une liste de bonbons avec un nom, une marque et une quantité disponibles ressemblerait à ceci:

[
{
"name": "Gummy bears",
"brand": "Haribo",
"quantity": 5
},
{
"name": "Chocolate bar",
"brand": "Hershey's",
"quantity": 3
},
{
"name": "Licorice",
"brand": "Twizzlers",
"quantity": 4
},
{
"name": "Truffles",
"brand": "Godiva",
"quantity": 0
}
]
Ouvrez et fermez le JSON avec des crochets , comme n'importe quel autre tableau. Dans chaque ensemble de parenthèses, vous avez des objets individuels. Chacun des objets ci - dessus a des propriétés appelé name, brandet quantity.

LE CODE JS
var req = new XMLHttpRequest();
req.open('GET', '/candies.json');
req.onreadystatechange = function () {
if(req.readyState === 4 && req.status === 200) {
var candies = JSON.parse(req.responseText);
var candyList = '
';
for (var i=0; i if (candies[i].quantity > 0) {
candyList += '
';
} else {
candyList += '
';
}
candyList += candies[i].name + '
' + "Brand: " + candies[i].brand;
candyList += ''
candyList += '
';
}
candyList += '
';
document.getElementById('candyListing').innerHTML = candyList;
}
};
req.send();

JQUERY une bibliothèque Javascript open-source: deux formats développement et production
Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Query est indispensable dans le monde du développement Web front-end. jQuery est une bibliothèque JavaScript open-source qui rendra votre développement JavaScript exponentiellement plus facile. Vous appré" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
Query est indispensable dans le monde du développement Web front-end. jQuery est une bibliothèque JavaScript open-source qui rendra votre développement JavaScript exponentiellement plus facile. Vous apprécierez plus facilement la sélection d'éléments, la création d'animations, l'utilisation de formulaires et l'utilisation d'AJAX pour charger les données de manière asynchrone.

Prenez ce morceau de JavaScript.

var redItems = document.getElementsByClassName("red");
for (var i = 0; i < redItems.length; i++) {
redItems[i].className = redItems[i].className + " highlighted";
}

Comparez-le à son équivalent jQuery. Quelle différence!

$(".red").addClass("highlighted");

Query est une bibliothèque JavaScript open-source inventée par John Resig en 2006.

Elle vous permet d'exploiter la puissance de JavaScript pour accomplir une myriade de choses impressionnantes sur votre page Web. Avec jQuery, vous pourriez:

Ajoutez, supprimez ou modifiez des éléments HTML dans votre page.

Changez les styles des éléments sur la page en modifiant leur CSS associé.

Animez des éléments sur votre page.

Envoyez et recevez des données à partir d'un serveur via AJAX (JavaScript et XML asynchrones) afin que votre page n'ait pas à être rechargée après l'envoi d'un formulaire.

JQUERY est compatibles sur beaucoup de navigateurs!

Et plus!

JQUERY détails sur les deux fichiers: prod et dev
Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Le fichier de développement est plus volumineux car il est annoté de manière à permettre aux développeurs de comprendre plus facilement ce qui se passe dans le code. Il y a des commentaires de code, des espaces blancs utiles pour séparer les sections, et plus encore. Ces annotations intercalé" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
Le fichier de développement est plus volumineux car il est annoté de manière à permettre aux développeurs de comprendre plus facilement ce qui se passe dans le code. Il y a des commentaires de code, des espaces blancs utiles pour séparer les sections, et plus encore. Ces annotations intercalées entre les codes facilitent l'intégration intelligente de jQuery, comme si vous disposiez d'astuces directement dans le code. Le fichier contenant le format de développement jQuery est simplement jquery-1.12.2.js (les chiffres peuvent être différents si vous utilisez une version différente de jQuery).

Le format de production est plus petit et donc plus rapide à utiliser sur vos pages Web en direct. La plupart des annotations que vous avez trouvées dans le format de développement ont été supprimées, car la fin "utilisateur" sera une page web et non un être humain qui bénéficierait de remarques supplémentaires sur le code. Le fichier contenant le format de production jQuery est jquery-1.12.4.min.js. La seule différence dans le nom de fichier est .min, ce qui signifie que le contenu est compressé.

Si vous le souhaitez, téléchargez les deux fichiers ici: https://jquery.com/download/

Le format de production jQuery a même tout le code sur une seule ligne pour le rendre plus petit!

En somme:

Utilisez le format de développement lorsque vous travaillez sur votre projet afin de voir les commentaires et les annotations utiles.

Utilisez le format de production une fois que vous avez mis votre projet en ligne sur le Web afin qu'il fonctionne mieux.

Deux façons d'utiliser JQUERY: télécharger le fichier ou online
Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Source: OpenClassRoom
Vous avez également deux options pour inclure les fichiers jQuery (que ce soit le développement ou la production) dans votre code. Le premier est un scénario classique: vous téléchargez une copie du format de développement ou de production et l'incluez dans vos fic" (Pour ouvrir l'article dans une nouvelle fenêtre, cliquez sur le titre)
Lire tout

Texte entier
Source: OpenClassRoom
Vous avez également deux options pour inclure les fichiers jQuery (que ce soit le développement ou la production) dans votre code. Le premier est un scénario classique: vous téléchargez une copie du format de développement ou de production et l'incluez dans vos fichiers de projet. Encore une fois, vous téléchargez les fichiers ici: https://jquery.com/download/

Vous le référenceriez dans votre HTML comme suit:

Vous devez également placer le fichier sur le même serveur que celui sur lequel vous hébergez votre site Web.

Je recommande la deuxième option, qui consiste à inclure jQuery via CDN (réseau de diffusion de contenu) . Les fichiers jQuery sont hébergés sur des serveurs dans le monde entier, vous n'avez donc pas à les mettre sur les vôtres! Cela signifie de meilleures performances et la possibilité qu'un utilisateur possède déjà le fichier dans sa mémoire locale ("mis en cache") à partir d'une visite sur un autre site Web utilisant la même version de jQuery. Gagnant-gagnant!

Si vous incluez jQuery de cette manière, vous incluez le script suivant dans votre code HTML:

Les cours sur Javascript chez OpenClassRoom Le 29/03/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Cours sur JavaScript Le 30/03/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Prompt Le 03/04/2018

Extrait:

Texte entier

Alert Le 03/04/2018

else if Le 03/04/2018

Switch, case, break et default en JS Le 03/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Argument et paramètres Le 06/04/2018 Auteur: Marc L. Harnist

Argument et paramètres Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Fonctions en js Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Objets en JS Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Objet et méthode incluse dans l'objet en JS Le 06/04/2018

Extrait:

Texte entier

Modifier facilement la valeur d'un attribut d'un objet en JS Le 06/04/2018 Auteur: Marc L. Harnist

This en POO js comme ne php Le 06/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Les objets en JS Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Récupérer le code d'une tentative d'instanciation de classe js sans new Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Globales, fenêtres - windows en js Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Arrays Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Résumé sur Javascript Le 09/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Boucle JS qui affiche les noeuds d'une page Le 11/04/2018 Auteur: Marc L. Harnist

forEach en JS Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Afficher ou se déplacer dans les noeuds d'une page Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Noeuds js Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

document.getElementsByClassName(): Récupérer les valeurs d'un élement html par son id et l'afficher Le 11/04/2018 Auteur: Marc L. Harnist

Récupérer le contenu d'une balise html en JS et autres méthodes Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Rajouter du texte à une page html avec JS Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Effacer un bloc html avec js et autres fonctions Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Avec js, on peut modifier l'attribut d'un élément html Le 11/04/2018 Auteur: Marc L. Harnist

Modifier une classe d'un élément html avec js avec la fonction classList Le 11/04/2018 Auteur: Marc L. Harnist

Modal de Bootstrap pour de belles fenêtres "alert" Le 11/04/2018 Auteur: Marc L. Harnist

Démo JS: compte à rebours Le 11/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Effacer le body, un div, ou autre élément HTML avec js Le 12/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

Ajax importe un fichier dans un autre via un bouton html! Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Texte entier

La syntaxe JSON de base et JS - exemple des bonbons Le 13/04/2018 Auteur: Marc L. Harnist

Extrait:

Les cours sur Javascript chez OpenClassRoom
Le 29/03/2018 Auteur: Marc L. Harnist

Cours sur JavaScript
Le 30/03/2018 Auteur: Marc L. Harnist

Prompt
Le 03/04/2018

Alert
Le 03/04/2018

else if
Le 03/04/2018

Switch, case, break et default en JS
Le 03/04/2018 Auteur: Marc L. Harnist

Argument et paramètres
Le 06/04/2018 Auteur: Marc L. Harnist

Argument et paramètres
Le 06/04/2018 Auteur: Marc L. Harnist

Fonctions en js
Le 06/04/2018 Auteur: Marc L. Harnist

Objets en JS
Le 06/04/2018 Auteur: Marc L. Harnist

Objet et méthode incluse dans l'objet en JS
Le 06/04/2018

Modifier facilement la valeur d'un attribut d'un objet en JS
Le 06/04/2018 Auteur: Marc L. Harnist

This en POO js comme ne php
Le 06/04/2018 Auteur: Marc L. Harnist

Les objets en JS
Le 09/04/2018 Auteur: Marc L. Harnist

Récupérer le code d'une tentative d'instanciation de classe js sans new
Le 09/04/2018 Auteur: Marc L. Harnist

Globales, fenêtres - windows en js
Le 09/04/2018 Auteur: Marc L. Harnist

Arrays
Le 09/04/2018 Auteur: Marc L. Harnist

Résumé sur Javascript
Le 09/04/2018 Auteur: Marc L. Harnist

Boucle JS qui affiche les noeuds d'une page
Le 11/04/2018 Auteur: Marc L. Harnist

forEach en JS
Le 11/04/2018 Auteur: Marc L. Harnist

Afficher ou se déplacer dans les noeuds d'une page
Le 11/04/2018 Auteur: Marc L. Harnist

Noeuds js
Le 11/04/2018 Auteur: Marc L. Harnist

document.getElementsByClassName(): Récupérer les valeurs d'un élement html par son id et l'afficher
Le 11/04/2018 Auteur: Marc L. Harnist

Récupérer le contenu d'une balise html en JS et autres méthodes
Le 11/04/2018 Auteur: Marc L. Harnist

Rajouter du texte à une page html avec JS
Le 11/04/2018 Auteur: Marc L. Harnist

Effacer un bloc html avec js et autres fonctions
Le 11/04/2018 Auteur: Marc L. Harnist

Avec js, on peut modifier l'attribut d'un élément html
Le 11/04/2018 Auteur: Marc L. Harnist

Modifier une classe d'un élément html avec js avec la fonction classList
Le 11/04/2018 Auteur: Marc L. Harnist

Modal de Bootstrap pour de belles fenêtres "alert"
Le 11/04/2018 Auteur: Marc L. Harnist

Démo JS: compte à rebours
Le 11/04/2018 Auteur: Marc L. Harnist

Effacer le body, un div, ou autre élément HTML avec js
Le 12/04/2018 Auteur: Marc L. Harnist

Ajax importe un fichier dans un autre via un bouton html!
Le 13/04/2018 Auteur: Marc L. Harnist

La syntaxe JSON de base et JS - exemple des bonbons
Le 13/04/2018 Auteur: Marc L. Harnist

JQUERY une bibliothèque Javascript open-source: deux formats développement et production
Le 13/04/2018 Auteur: Marc L. Harnist

JQUERY détails sur les deux fichiers: prod et dev
Le 13/04/2018 Auteur: Marc L. Harnist

Deux façons d'utiliser JQUERY: télécharger le fichier ou online
Le 13/04/2018 Auteur: Marc L. Harnist