Modification du contenu HTML
L’une des nombreuses méthodes dans les DOM est document.getElementById ().
L’exemple suivant « trouve » l’élément avec id = « demo », et modifie son contenu (innerHTML):
Modifier le contenu HTML :
Ceci est une démonstration.
Changement des styles HTML (CSS)
Changer le style d’un élément HTML, est une variante de changer un attribut HTML:
Changer le style d’un élément HTML
Modifier les attributs HTML
Cet exemple modifie la source d’une image de HTML, en modifiant l’attribut src d’une balise <img alt= » » />:
Cliquer pour changer le logo de l’école !
Changer les Styles HTML (CSS)
Changer le style d’un élément HTML, est une variante de changer un attribut HTML:
Changer le style d’un élément
Démonstration
Validation des données
JavaScript est souvent utilisé pour valider les entrées:
Introduisez un nombre compris entre 1 et 10 :
<button type= »button » onclick= »myFunction() »>Soumettez votre choix</button>
<p id= »demo »></p>
<script>
function myFunction() {
var x, text;
// Prendre la valeur introduite du champ input id= »numb »
x = document.getElementById(« numb »).value;
// Si x n’est pas un nombre ou s’il est plus petit ou plus grand que 10
if (isNaN(x) || x < 1 || x > 10) {
text = « Valeur incorrecte »;
} else {
text = « Valeur correcte = OK »;
}
document.getElementById(« demo »).innerHTML = text;
}
</script>
Possibilités d’affichage
JavaScript peut Données « d’affichage » de différentes façons:
L’écriture dans une boîte d’alerte, en utilisant window.alert () .
L’écriture dans la sortie HTML en utilisant document.write () .
L’écriture dans un élément HTML, en utilisant innerHTML .
L’écriture dans la console de navigateur, en utilisant console.log () .
Utilisation window.alert ()
Vous pouvez utiliser une boîte d’alerte pour afficher les données :.
Ma première page web
Mon premier paragraphe.
En utilisant document.write ()
Ma première page web
Mon premier paragraphe.
En utilisant document.write () après un document HTML est entièrement chargé, sera supprimer tous HTML existant : Attention toute la page va s’effacer pour afficher le chiffre 20 comme souhaité !
Ma première page web
Mon premier paragraphe.
En utilisant innerHTML
Pour accéder à un élément HTML, JavaScript peut utiliser le document.getElementById ( id ) méthode.
L’ id attribut identifie l’élément HTML. Le innerHTML propriété est le contenu de l’élément:
Ma première page web
Mon premier paragraphe.
Utilisation console.log ()
Dans la console de votre navigateur, vous pouvez utiliser la console.log () méthode pour afficher des données.
Activer la console de navigateur avec F12, et sélectionnez « Console » dans le menu.
Ma première page web
Mon premier paragraphe.
JavaScript Syntaxe
Les règles, comment une langue est construit, sont appelés langue syntaxe.
Les phrases dans un langage de programmation sont appelés programme déclarations.
Déclarations JavaScript
Un programme d’ordinateur est une des séquences de « commandes exécutables appelés« déclarations.
Les Instructions JavaScript sont séparées par virgule.
Une variable est attribué une valeur (15 + 6), et affiché:
Les instructions JavaScript sont composés de:
Valeurs, variables, opérateurs, expressions, mots clés et commentaires.
Valeurs JavaScript
Avec JavaScript, règles les plus importantes pour les valeurs d’écriture sont:
Les nombres sont écrits avec ou sans décimales:
Les chaînes peuvent être écrites avec guillemets doubles ou simples.
Les expressions sont aussi des valeurs:
Les expressions calculent des valeurs.
Variables JavaScript
Dans un langage de programmation, les variables sont utilisées pour stocker des valeurs.
JavaScript utilise le var mot-clé pour définir les variables.
Un signe égal est utilisé pour attribuer des valeurs aux variables.
Dans cet exemple, x est défini comme une variable. Ensuite, on lui attribue la valeur 6:
Opérateurs JavaScript
JavaScript utilise un opérateur d’affectation (=) pour attribuer des valeurs aux variables:
JavaScript utilise un opérateur d’affectation pour attribuer des valeurs aux variables (tout comme l’algèbre).
JavaScript utilise les opérateurs arithmétiques (+ – * /) pour calculer les valeurs:
JavaScript utilise des opérateurs arithmétiques pour calculer les valeurs (comme l’algèbre).
JavaScript Mots-clés
Une déclaration JavaScript commence souvent avec un mot-clé pour identifier une action à effectuer.
Le var mot-clé indique au navigateur de créer une nouvelle variable:
JavaScript Commentaires
Tous les états JavaScript sont « exécutés » sauf tout ce qui suit doubles barres obliques // est traité comme un commentaire .
Les commentaires sont donc ignorés et ne seront pas exécutées:
JavaScript est sensible à la casse
Tous les identificateurs JavaScript sont sensibles à la casse .
Les variables lastName et lastname , sont deux variables différentes.
Essayez de changer de nom lastName.
JavaScript états
En HTML, Les déclarations JavaScript sont des «lignes de commande» exécuté par le navigateur Web.
Déclarations JavaScript
Le but des états, est de dire au navigateur ce qu’il faut faire.
Cette déclaration indique au navigateur d’écrire « Bonjour tout le monde ! » l’intérieur d’un élément HTML avec id = « demo »:
En HTML, les déclarations JavaScript sont des « commandes » au navigateur.
Code JavaScript
Le Code JavaScript (ou juste JavaScript) est une séquence d’instructions JavaScript.
Chaque instruction est exécutée par le navigateur dans l’ordre où elles sont écrites.
Cet exemple de manipuler deux éléments HTML différents:Code JavaScript (ou juste JavaScript) est une séquence d’instructions JavaScript.
Virgules;
Les virgules séparent les instructions JavaScript.
Normalement, vous ajoutez un point-virgule à la fin de chaque instruction exécutable:
Lorsqu’elles sont séparés par des points-virgules, plusieurs instructions sur une ligne sont autorisées:
Les déclarations multiples sur une seule ligne sont autorisées.
JavaScript blanc Espace
JavaScript ignore les espaces supplémentaires. Vous pouvez ajouter un espace blanc à votre script pour le rendre plus lisible.
Les lignes suivantes sont équivalentes:
var person = « Dupont »;
var person= »Dupont »;
JavaScript Blocs
Les instructions JavaScript peuvent être regroupés dans des blocs.
Les blocs commencent par une accolade gauche, et se terminent par une accolade droite.
Le but d’un bloc est de rendre la séquence d’instructions pour exécuter ensemble.
Un bon exemple des états regroupés en blocs, sont les fonctions JavaScript.
Cet exemple va exécuter une fonction qui manipule deux éléments HTML:
Ma Page Web
Je suis un paragraphe.
Lorsque vous cliquez sur « Essayez-le », les deux éléments vont changer.
JavaScript longueur de ligne et les sauts de ligne
Pour une meilleure lisibilité, les programmeurs aiment souvent à éviter les lignes de plus de 80 caractères.
Si une déclaration JavaScript ne tient pas sur une ligne, le meilleur endroit pour casser, est après un opérateur ou une virgule.
Ma Page Web/h1>
Le meilleur endroit pour couper une ligne de code est après un opérateur ou une virgule.
JavaScript Line Break dans une chaîne
Vous pouvez briser une ligne de code dans une chaîne de texte avec une barre oblique inverse:
Ma Page Web
Vous pouvez couper une ligne dans une chaîne de texte avec un barre oblique inverse.
Cependant, vous ne pouvez pas briser une ligne de code comme ceci:
Ma page web
Vous ne pouvez pas briser une ligne de code avec une barre oblique inverse.
JavaScript Variables
Les variables JavaScript sont des conteneurs pour stocker des valeurs de données:
Essayez d’expérimenter avec les // commentaires.
Dans l’exemple ci-dessus vous pouvez vous attendre:
x stocke la valeur 20
y stocke la valeur 30
z stocke la valeur 11
Tout comme l’algèbre
x = 20
y = 30
z = x + y
En algèbre nous utilisons lettres (comme x) pour contenir des valeurs (comme 20).
Dans l’expression z = x + y ci-dessus, nous pouvons calculer la valeur de z à 50.
En JavaScript ces lettres sont appelées des variables.
Comme avec l’algèbre, variables JavaScript peuvent être utilisés pour contenir des valeurs (x = 20) ou expressions (z = x + y).
Remarque
Les variables JavaScript sont des récipients pour le stockage de valeurs de données.
JavaScript identificateurs
Toutes les variables JavaScript ainsi que les fonctions JavaScript doivent être identifiées avec des noms uniques .
Ces noms uniques sont appelés identificateurs .
Les identificateurs peuvent être des noms courts (comme x et y), ou des noms plus descriptifs (âge, somme, totalVolume).
Les règles générales pour construire un nom pour les variables (identifiants uniques) sont:
Les noms doivent commencer par une lettre
Les noms peuvent aussi commencer avec $ et _ (mais nous ne l’utiliseront pas)
Les noms peuvent contenir des lettres, des chiffres, des caractères de soulignement, et des signes de dollars.
Les noms sont sensibles à la casse (Y et Y sont des variables différentes)
Les mots réservés (comme mots-clés JavaScript) ne peuvent pas être utilisés comme noms
Remarque Les deux mots clés et les identificateurs JavaScript JavaScript sont sensibles à la casse.
L’opérateur d’affectation
En JavaScript, le signe égal (=) est un opérateur « d’affectation », ce n’est donc pas un « égal à » opérateur.
Ceci est différent de l’algèbre. Ce qui suit ne fait pas de sens en algèbre:
x = x + 5
En JavaScript, par contre, il est parfaitement logique: Affecter la valeur de x + 5 à la variable x.
En réalité, cela signifie :
Calculer la valeur de x + 5. Puis mettre le résultat dans la variable x.
Remarque
Le « égale à » est un opérateur JavaScript est écrit comme ==
Types JavaScript données
Les variables JavaScript peuvent détenir de nombreuses types de données, tels que les valeurs de texte (personne = « Paul Duupont »).
En JavaScript, les textes sont appelés cordes ou des chaînes de texte.
JavaScript peut gérer plusieurs types de données, mais pour l’instant, il suffit de penser nombres et chaînes.
Lorsque vous attribuez une valeur de chaîne à une variable, vous mettez des guillemets doubles ou simples autour de la valeur.
Lorsque vous attribuez une valeur numérique à une variable, vous ne mettez pas les guillemets autour de la valeur.
Si vous mettez des guillemets autour d’une valeur numérique, elle sera traitée comme une chaîne de texte.
Créer une variable, lui attribuer et l’afficher:
Déclaration de nombreuses variables
Vous pouvez déclarer plusieurs variables dans une déclaration comme suit :
Lancer la déclaration avec var et séparer les variables par des virgules :
var lastName = « Dupont », age = 30, job = « informaticien »;
Votre déclaration peut également s’étendre sur plusieurs lignes:
var lastName = « Dupont »,
age = 30,
job = « informaticien »;
Dans JavaScript, vous pouvez toujours séparer déclarations par un point virgule, mais vous ne pouvez pas omettre le mot-clé var.
Mauvais:
lastName = « Dupont »; age = 30; job = « informaticien »;
Bonne:
var lastName = « Dupont »; var age = 30; var job = « informaticien »;
Valeur = undefined
Dans les programmes informatiques, les variables sont souvent déclarées sans valeur. La valeur peut être quelque chose qui doit être calculée, ou quelque chose qui sera fourni plus tard, comme l’entrée d’utilisateur. La variable déclarée sans valeur aura la valeur undefined .
Le RARnom variable ont la valeur undefined après l’exécution de la déclaration suivante:
var carName;
Re-Déclaration de variables JavaScript
Si vous voulez re-déclarer une variable JavaScript, elle ne perdra pas sa valeur :
La valeur de la variable RARnom aura encore la valeur « Volvo » après l’exécution des deux déclarations suivantes:
var carName = « Volvo »;
var carName;
JavaScript Arithmétique
Comme avec l’algèbre, vous pouvez faire de l’arithmétique avec des variables JavaScript en utilisant des opérateurs comme = et +:
Affecter 5 à y, et afficher le résultat de y + 2:
Vous pouvez également ajouter des chaînes, mais les chaînes seront concaténées (ajoutée de bout en bout):
Affecter 15 à y, et afficher le résultat de y + 2:
Notez que si vous ajoutez un nombre en chaîne, les deux seront traités comme des chaînes.
JavaScript identificateurs
Dans un langage de programmation, toutes les variables doivent être identifiés avec des noms uniques .
Ces noms uniques sont appelés identificateurs .
JavaScript booléens
Les booléens ne peuvent avoir que deux valeurs: vrai ou faux.
Exemple :
var x = true;
var y = false;
Les booléens sont souvent utilisés dans les tests conditionnels.
JavaScript Arrays
Les tableaux JavaScript sont écrits avec des crochets.
Les éléments de tableau sont séparées par des virgules.
Le code suivant déclare (crée) un tableau appelé voitures, contenant trois éléments (noms de voiture):
Les indices de tableau sont basés sur zéro, ce qui signifie que le premier élément est [0], la deuxième est [1], et ainsi de suite.
JavaScript objets
Les objets JavaScript sont écrits avec des accolades.
Les propriétés de l’objet sont écrites comme des paires nom: valeur, séparées par des virgules.
L’objet (personne) dans l’exemple ci-dessus a quatre propriétés: nom, prénom, âge, et couleur des yeux.
L’opérateur typeof
Vous pouvez utiliser le JavaScript typeof opérateur pour trouver le type d’une variable JavaScript:
L’opérateur typeof renvoie le type d’une variable ou une expression.
Indéfini
En JavaScript, une variable sans valeur est définie .
Tant la valeur et le type de données, d’une variable sans valeur est définie .
Valeurs vides
Une valeur vide n’a rien à voir avec undefined.
Une variable chaîne vide a à la fois une valeur et un type.
JavaScript Fonctions
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche particulière.
Une fonction JavaScript est exécuté quand « quelque chose » l’invoque (appelle).
Cet exemple appelle une fonction qui effectue un calcul, et renvoie le résultat:
JavaScript Fonction Syntaxe
Une fonction JavaScript est définie avec la fonction mot-clé, suivie d’un nom , suivi par des parenthèses () .
Les noms de fonction peuvent contenir des lettres, des chiffres, des caractères de soulignement, et des signes dollar (mêmes règles que les variables).
Les parenthèses peuvent inclure les noms de paramètres séparés par des virgules: ( parameter1, paramètre2, … )
Le code à exécuter, par la fonction, est placé à l’intérieur des accolades: {}
functionName(parameter1, parameter2, parameter3) {
code to be executed
}
Les paramètres de la fonction sont les noms énumérés dans la définition de fonction.
Les arguments de la fonction sont les véritables valeurs reçues par la fonction lorsqu’elle est invoquée.
Dans la fonction, les arguments sont utilisés comme variables locales.
Remarque
Une fonction est la même chose qu’une procédure ou un sous-programme dans d’autres langages de programmation.
Fonction Invocation
Le code à l’intérieur de la fonction s’exécute lorsque «quelque chose» invoque (appelle) la fonction:
– Lorsqu’un événement se produit (quand un utilisateur clique sur un bouton)
– Quand il est invoqué (appelé) à partir du code JavaScript
– Automatique (auto invoquée, comme c’est la plupart des fonctions composant ce tutoriel)
Fonction Retour
Lorsque JavaScript atteint une instruction de retour , la fonction arrête l’exécution.
Si la fonction a été appelée à partir d’une déclaration, JavaScript « retour » sera utiliser pour exécuter le code après l’instruction de l’appel.
Les fonctions calculent souvent une valeur de retour. La valeur de retour est « retourné » à la fonction « appelante »:
Exemple
Calculer le produit de deux nombres, et retourner le résultat:
var x = myFunction(5, 5); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
Le résultat en sera x:
25
Cet exemple appelle une fonction qui effectue un calcul, et renvoie le résultat:
Pourquoi utiliser des fonctions?
Vous pouvez réutiliser le code: Définir le code une fois, et l’utiliser plusieurs fois.
Vous pouvez utiliser le même code avec des arguments différents, pour produire des résultats différents.
Cet exemple appelle une fonction de conversion de Fahrenheit à Celsius:
Le’opérateur invoque la fonction.
En utilisant l’exemple ci-dessus, toCelsius fait référence à l’objet de fonction, et toCelcius () fait référence au résultat de fonction.
Accéder à une fonction sans (), provoquera un retour à la définition de fonction:
Fonctions utilisés comme variables
En JavaScript, les fonctions peuvent être utilisées comme variables:
Exemple
Au lieu de:
temp = toCelsius(32);
text = « The temperature is » + temp + » Centigrade »;
Vous pouvez utiliser:
JavaScript objets
Objets de la vie réelle, propriétés et méthodes.
Dans la vraie vie, une voiture est un objet .
Une voiture a des propriétés telles que le poids et la couleur, et des méthodes comme démarrage et l’arrêt.
Toutes les voitures ont les mêmes propriétés, mais les valeurs des propriétés diffèrent d’une voiture à l’autre.
Toutes les voitures ont les mêmes méthodes, mais les méthodes sont effectuées à des moments différents.
Vous avez déjà appris que les variables JavaScript sont des conteneurs pour les valeurs de données.
Ce code assigne une simple valeur (Fiat) à une variable de voiture nommée:
Création d’un objet JavaScript.
Les objets sont des variables aussi. Mais les objets peuvent contenir de nombreuses valeurs.
Ce code attribue de nombreuses valeurs (Fiat, 500, blanc) à une variable de voiture nommée:
Création d’un objet JavaScript.
Les valeurs sont écrites comme un nom: valeur paires (nom et la valeur séparés par deux points).
Remarque
les objets JavaScript sont des conteneurs pour des valeurs nommées .
Propriétés de l’objet
Le nom: valeurs paires (en objets JavaScript) sont appelés propriétés .
var person = {firstName: »Paul », lastName: »Dupont », age:50, eyeColor: »bleu »};
Méthodes des objets
Les méthodes sont des actions qui peuvent être effectuées sur les objets.
Les méthodes sont stockées dans des propriétés comme les définitions de fonctions .
Définiton des objets
les objets JavaScript sont des conteneurs pour des valeurs nommées, appelées propriétés et méthodes.
Vous définissez (et créer) un objet JavaScript avec un littéral d’objet:
Création d’un objet JavaScript.
Les espaces et les sauts de ligne ne sont pas importants. Une définition de l’objet peut s’étendre sur plusieurs lignes:
Création d’un objet JavaScript.
Accès aux propriétés de l’objet
Vous pouvez accéder aux propriétés de l’objet de deux façons:
objectName.propertyName
ou
objectName[propertyName]
Exemple
Il y a deux façons d’accéder à une propriété de l’objet:
Vous pouvez utiliser person.property ou de la personne [«biens»]
Accès méthodes d’objets
Vous accédez à une méthode d’objet avec la syntaxe suivante:
objectName.methodName()
Exemple
Création et utilisation d’une méthode d’objet.
Une méthode d’objet est une définition de fonction, stockée en tant que valeur de la propriété.
Si vous accédez au fullName propriété, sans (), il y aura un retour à la définition de la fonction :
Exemple
Une méthode d’objet est une définition de fonction, stockée en tant que valeur de la propriété.
Si vous accédez sans (), il y aura un retour à la définition de fonction:
Attention à ne pas déclarer des chaînes, des nombres, des booléens comme objets!
Quand une variable JavaScript est déclarée avec le mot-clé « nouvelle », la variable est créé comme un objet:
var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object
Évitez String, Number, et les objets booléens. Ils compliquent votre code et ralentissent la vitesse d’exécution.
