Sont devenus Le langage de programmation JavaScript Un ingrédient clé Développement web moderne. Ce langage puissant est devenu un outil essentiel pour tout Développeur Web.
Contient du JavaScript Il a des fonctionnalités spéciales qui le distinguent des langages de programmation traditionnels. Nous allons passer à ce qu'ils sont, comment ils fonctionnent et ce que vous pouvez faire avec ce jeu. Commençons.
Qu'est-ce que JavaScript?
Javascript Il s'agit d'un langage de programmation Web. Lorsqu'il s'agit d'un langage interprété (un langage de programmation interprété est un langage de programmation dans lequel les programmes écrits ne sont pas traduits dans le langage machine du processeur, mais ils doivent être interprétés à l'aide d'un programme appelé L'interprète Pour exécuter des programmes écrits avec eux.), Ce qui signifie qu'ils n'ont pas besoin d'un traducteur pour traduire leur code comme C ou C ++. Le code JavaScript s'exécute directement dans un navigateur Web.
JavaScript est utilisé pour créer des pages Web interactives et pour fournir des applications Web, y compris des jeux. Il est utilisé par la plupart des sites Web et pris en charge par presque tous les navigateurs sans avoir besoin de modules externes.
JavaScript fonctionne avec HTML et CSS pour créer des applications Web ou des pages Web. JavaScript est pris en charge par la plupart des navigateurs Web modernes comme Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. La plupart des navigateurs mobiles pour les appareils Android et iPhone prennent désormais également en charge JavaScript.
JavaScript contrôle les éléments dynamiques des pages Web. Il fonctionne dans les navigateurs Web et plus récemment sur les serveurs Web. Les API sont également prises en charge par JavaScript, vous offrant plus de fonctionnalités.
Comprendre tous les modes de fonctionnement de JavaScript est un peu plus facile pour comprendre le fonctionnement de la programmation Web, alors apprenons-en plus.
Blocs de construction pour une application Web
Trois composants vous permettent de créer des sites Web et des applications: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) et JavaScript. Chacun a un rôle à jouer dans la création d'une application Web.
- HTML Langage destiné à créer la structure d'une page Web. Tous les paragraphes, sections, images, titres et texte sont tous écrits en HTML. Le contenu apparaît sur le site dans l'ordre dans lequel il est écrit en HTML.
- Contrôle CSS Dans le style, l'apparence et d'autres aspects de la mise en page. CSS est utilisé pour créer la conception de sites Web de couleurs, polices, colonnes, bordures, etc. Cette langue fait passer le site d'éléments de texte brut à des conceptions colorées.
- Le troisième élément est JavaScript. HTML et CSS génèrent tous deux la structure, mais il ne fait rien à partir de là. JavaScript crée une activité dynamique dans votre application. Les scripts en JavaScript contrôlent la fonctionnalité lorsque l'utilisateur clique sur des boutons, la manière dont les formulaires de mot de passe sont authentifiés et la manière dont le support est contrôlé.
Les trois parties fonctionnent en harmonie les unes avec les autres pour créer des applications complètes. Il serait bon d'en savoir plus sur HTML et CSS Si vous n'êtes pas Complètement satisfait de vous-même.
Comment fonctionne JavaScript?
Avant d'écrire en JavaScript, il est important de savoir comment ce langage de code fonctionne sous le capot. Il y a deux parties importantes à savoir: comment le navigateur Web et le modèle d'objet de document (DOM) fonctionnent.
Un navigateur Web charge la page Web, analyse le code HTML et crée ce que l'on appelle un modèle d'objet de document (DOM) à partir du contenu. DOM apporte une vue de page Web en direct à votre code JavaScript.
Ensuite, le navigateur obtiendra tout ce qui concerne le HTML, comme les images et les fichiers CSS. Les informations CSS proviennent d'un analyseur CSS.
HTML et CSS sont mis en place par le DOM pour créer la page Web en premier. Après cela, le navigateur JavaScript pour les navigateurs charge les fichiers et codes JavaScript intégrés mais n'exécute pas le code immédiatement. HTML et CSS devraient terminer le chargement.
Une fois cela fait, les codes JavaScript sont exécutés dans l'ordre dans lequel ils ont été écrits. Il en résulte que le DOM est actualisé par le code JavaScript et rendu par le navigateur.
L'arrangement ici est important. Si JavaScript n'attend pas les fichiers HTML et CSS, vous ne pourrez pas modifier les éléments DOM.
Que puis-je faire avec JavaScript?
JavaScript est un langage de programmation complet qui peut faire la plupart des choses qu'un langage ordinaire comme Python peut faire. Cela comprend:
- Définissez les variables.
- Stockez et récupérez des valeurs.
- Identifiez et appelez des fonctions.
- Définissez les objets JavaScript et leurs classes.
- Téléchargement et utilisation des unités extérieures.
- Écriture de gestionnaires d'événements qui répondent aux événements de clic.
- Écriture du code serveur.
- Et bien plus.
Avertissement: Étant donné que JavaScript est un langage puissant, il est également possible d'écrire des logiciels malveillants, des virus et du contenu intrusif sur votre navigateur pour nuire aux utilisateurs. Cela va du vol des cookies du navigateur, des mots de passe et des cartes de crédit au téléchargement de virus sur votre ordinateur.
Utiliser JavaScript
Jetons un coup d'œil à certaines des bases de JavaScript avec des exemples de code.
Définissez les variables
JavaScript est écrit dynamiquement, ce qui signifie que vous n'avez pas à définir le type de variables dans le code.
let num = 5; let myString = "Hello"; var interestRate = 0.25;
Opérations mathématiques
Ajouter
12 + 5 >> 17
Soustraction
20 - 8 >> 12
Multiplication
5 * 2 >> 10
Division
50/2 >> 25
Coefficient du reste de la division
45 ٪ 4 >> 1
Matrices
let myArray = [1,2,4,5]; let stringArray = ["hello","world"];
Les fonctions
يمكن لجافا سكريبت كتابة الدوال ، وإليك دالة بسيطة تضيف أرقامًا.
function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15 Répétition
JavaScript peut faire des boucles en boucle, pendant et pendant.
for(let i = 0; i < 3; i++){
console.log("echo!");
}
>> echo!
>> echo!
>> echo!
let i = 0;
while(i < 3) {
console.log("echo!");
i++;
}
>> echo!
>> echo!
>> echo! Commentaires
// Écrire un commentaire
/* Rédiger un commentaire sur plusieurs lignes
Vous pouvez utiliser autant de lignes que vous le souhaitez
Divisez le texte et rendez les commentaires plus lisibles
* /
Sur la page web
La façon la plus courante de charger JavaScript dans une page Web consiste à utiliser la balise de code HTML. Selon vos besoins, vous pouvez utiliser l'une des méthodes suivantes.
Téléchargez un fichier JavaScript externe sur une page Web comme suit:
<script type="text/javascript" src="/path/to/javascript"></script>
Vous pouvez spécifier l'URL complète si le fichier javascript provient d'un domaine différent de la page Web comme suit:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
JavaScript peut être intégré directement dans HTML. Voici comment:
<script type="text/javascript">
alert("Page is loaded");
</script> Outre ces méthodes, il existe des moyens de télécharger du code JavaScript sur demande. En fait, il existe des cadres personnalisés pour charger et exécuter des modules JavaScript avec les dépendances appropriées résolues au moment de l'exécution.
Ce sont des sujets plus avancés et vous apprenez maintenant les bases.
Modèle d'extrait de code JavaScript
Vous trouverez ci-dessous quelques exemples de code amphibie simples pour JavaScript afin de montrer comment les utiliser sur des pages Web. Ce sont des exemples de code qui fonctionne avec le DOM.
Vous trouverez ci-dessous la sélection de tous les éléments sombres du document et définissez la première couleur sur rouge.
var elems = document.getElementsByTagName('b');
elems[0].style.color = 'red'; Voulez-vous changer l'image dans la balise img? Les instructions suivantes lient le gestionnaire d'événements à un événement de clic de bouton.
<img id="myImg" src="prev-image.png">
<button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button> Mettre à jour le contenu du texte pour l'élément de paragraphe (P)? Définissez l'attribut innerHTML sur l'élément comme indiqué:
<p id="first-para">Hello World</p>
<button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button> Ces exemples de code ne fournissent qu'un aperçu de ce que vous pouvez faire avec JavaScript sur votre page Web. Il existe des tonnes de tutoriels qui peuvent vous apprendre à coder pour commencer. Vous pouvez l'essayer sur n'importe quelle page Web, même cette page! Ouvrez votre console et essayez du code JavaScript.
Vous savez maintenant ce que fait JavaScript
Nous espérons que cette introduction vous a apporté un aperçu de JavaScript et vous a rendu passionné par la programmation Web. Il existe de nombreuses ressources pour en savoir plus sur JavaScript. Une fois que vous vous sentez plus à l'aise, pourquoi ne pas essayer Apprenez à utiliser le DOM?
