Javascript

Javascript est un langage de programmation utilisé pour donner vie aux sites Web. Vous le voyez en action chaque fois que vous visitez un site Web qui a une interaction. L'apprentissage de Javascript est rapide, facile et amusant car vous avez déjà tous les outils nécessaires sur votre ordinateur et vous voyez les résultats instantanément. Essayez l'exemple simple étape par étape ci-dessous et vous serez sur votre chemin!


Télécharger le logiciel:Aucun nécessaire

Coût:Libre

Instructions pour configurer le logiciel:Aucun nécessaire

Exigences matérielles:PC, Mac, robotique, appareil mobile


Systèmes d'exploitation pris en charge:Win, Mac, Linux

Niveau de difficulté:1 sur 5



ESSAYEZ-LE!

1. Créez un dossier sur votre disque dur - appelez-le «JS Demo»


2. Copiez ce code Javascript:

 // JavaScript Document // Note: lines that start with two backslashes are comments - not code!  var bePrepared = function () {        // = = = = = = = declare all the variables = = = = = = = =         var tempF, tempC, myActionText, newText;        //get the temp (F) from the HTML page        tempF = document.getElementById('MyInputTemp').value;         // = = = = = = = convert the temp to Celsius (with only one decimal place)        tempC = (5 / 9 * (tempF - 32)).toFixed(1);        // = = = = = = = evaluate the temp (three categories) = = = = = = =         if (tempF = 60) && (tempC = 75) {                 myActionText = ' Take Sunscreen!';             }        // = = = = = = = build a complete sentence = = = = = = =         newText = 'If the temperature is ' + tempF + ' °F (' + tempC + ' °C): ' + myActionText;       //push the sentence back to the HTML page (using the ID of the markup element: 'myAnswer')       document.getElementById('myAnswer').innerHTML = newText;     }; 

Et collez-le dans votre éditeur de texte préféré. Le bloc-notes Windows fonctionne correctement.

3. Enregistrez le fichier sous «JS-Example.js» dans le nouveau dossier que vous avez créé à l'étape 1.

4. Copiez maintenant ce code HTML:


       Example Javascript Program for Boy Scout Merit Badge       	 	

Javascript Programming Example

Enter Temperature (°F):

Et collez-le dans votre éditeur de texte préféré. Le bloc-notes Windows fonctionne correctement.

5. Enregistrez ce code HTML dans le même dossier et appelez-le «JS-HTML.htm»

6. Double-cliquez sur le fichier JS-HTML pour lancer un navigateur. Entrez une température et cliquez sur le bouton GO pour voir le résultat. Essayez plusieurs températures différentes.


À PROPOS DU PROGRAMME - UNE PROMENADE À TRAVERS

1. Le fichier HTML définit le texte et les informations de formatage d'une simple page Web. Vous pouvez modifier tout ce que vous voulez pour voir comment cela affecte le formatage de la page. Ce n’est pas vraiment de la programmation, mais c’est amusant de jouer avec. Il:

une. Crée un titre pour le site Web
b. Indique au code HTML d'utiliser Javascript et où trouver le code
c. Formate le texte affiché
ré. Spécifie une zone de saisie de texte avec ID = 'MyInputTemp' (Javascript en aura besoin)
e. Spécifie un bouton intitulé 'Go!'
F. Lorsque le bouton de la souris est enfoncé, lance la fonction javascript bePrepared ()
g. affiche la chaîne dans «myAnswer» qui est créée dans le programme javascript.

2. Le fichier Javascript a une seule fonction appelée «bePrepared ()». Il est exécuté à chaque fois que vous cliquez sur le bouton GO (regardez la méthode «onclick» pour la balise «input» = «Button» dans le fichier HTML pour voir l'appel de fonction.)

3. La fonction «bePrepared ()»

une. Obtient la valeur saisie dans la balise 'Input' - 'Text' en utilisant son ID: 'MyInputTemp'
b. La valeur est convertie en Celcius (avec une seule décimale).
c. La valeur Celsius est évaluée avec une série d'instructions IF et une phrase d'action suggérée est attribuée à la variable: 'myActionText'
ré. Une phrase est créée en combinant ou «concaténant» un texte statique avec les valeurs de température (deg F et Deg C) et la phrase d'action.
e. La nouvelle phrase est insérée sur la dernière ligne de la page HTML en utilisant l'ID de la balise sur cette ligne: 'myAnswer'


ESSAYE ÇA

1. Changez les températures utilisées dans les décisions - changez la température inférieure de 60 à 30 degrés, par exemple. Assurez-vous de le changer à deux endroits! Enregistrez le fichier et actualisez le navigateur (ou redémarrez la page Web), et entrez de nouveaux chiffres - les réponses ont-elles changé à la nouvelle température?

2. Créez une nouvelle plage de température de 30 à 60 degrés et faites-la afficher - «Apportez un chapeau et des gants!»

3. Modifiez le libellé des phrases.

4. Ajoutez une autre entrée de texte - demandez la vitesse du vent, par exemple.

5. Ajoutez des instructions conditionnelles qui évaluent le facteur de refroidissement éolien.

6. Ajoutez du texte pour afficher le résultat du refroidissement éolien.


APPRENDRE ENCORE PLUS

W3schools.com - Un tutoriel bien organisé avec de nombreux exemples de travail et code source

Webmonkey - Un tutoriel Javascript en cinq parties


RESSOURCES, CONSEILS, ASTUCES ET ASTUCES

1. Google Chrome a une fonctionnalité intéressante.

- Installez Google Chrome si vous ne l'avez pas déjà.

- Ouvrez l'exemple JS-HTML ci-dessus dans Google Chrome (faites un clic droit sur le fichier JS-HTML que vous avez créé ci-dessus et sélectionnez 'Ouvrir avec ..' et choisissez Chrome)

- Cliquez sur paramètres >> Outils >> Console Javascript

Cela ouvre une fenêtre de console qui affiche des messages d'erreur (et un tas d'autres outils) pour vous aider à déboguer votre code.

Cette console est très utile lors du débogage des erreurs javascript. La plupart des navigateurs ont des plugins qui font des choses similaires.

2. Notepad ++ est un excellent éditeur de texte gratuit spécialement conçu pour les programmeurs. Vérifiez le ici .