Maison interface Web js tutoriel Introduction aux compétences JavaScript_javascript

Introduction aux compétences JavaScript_javascript

May 16, 2016 pm 04:14 PM
javascript 简介

Cet article n'est pas un manuel de référence. Il convient uniquement pour acquérir une compréhension générale de JS. Si vous avez besoin d'une syntaxe détaillée et d'une application de JS, veuillez vous rendre sur w3school

.

Qu'est-ce que JavaScript ?

La naissance de JavaScript

Vers 1995, la bande passante grand public mondiale était de 28,8 Kbps, et maintenant la bande passante moyenne de téléchargement dans le monde est de 21,9 Mbps (les données proviennent de http://www.netindex.com). À cette époque, les internautes devaient attendre longtemps pour recevoir une réponse du serveur à chaque fois qu'ils soumettaient un formulaire. Il était même possible qu'après quelques minutes d'attente, la réponse qu'ils recevaient soit qu'un certain élément manquait. Afin d'améliorer l'expérience utilisateur, un script intégré dans le client du navigateur capable de réaliser un jugement de forme simple est né.

JavaScript a été développé pour la première fois par Brendan Eich, qui travaillait chez Netscape, pour Netscape Navigator 2.0 (NN2.0), qui devait sortir en 1995. Il s'appelait à l'époque LiveScript. Comme elle coopérait avec la très populaire société Sun à l'époque, afin de rattraper la tendance de l'époque - le langage Java, ce langage s'appelait JavaScript.

Quelle est la relation entre JavaScript et Java ?

C'est aussi la première réaction des profanes lorsqu'ils entendent JavaScript, et c'est aussi l'un des problèmes les plus critiqués de ce langage.

À proprement parler, cela n’a pas d’importance. Si nous devons établir un lien, peut-être que certaines fonctions, idées orientées objet, structures de jugement, instructions de boucle sont les mêmes, etc., mais ce ne sont évidemment pas des brevets de Java, mais le consensus des langages de programmation.

Standardisation JavaScript et historique du développement

Lorsque JavaScript a été lancé, le navigateur NN offrant une meilleure expérience utilisateur dominait le marché des navigateurs, et Microsoft a rattrapé son retard. Lorsque IE3 a été lancé, Microsoft a publié VBScript sous le nom de JScript, qui n'était en fait pas très différent du JavaScript de Netscape (un copieur dans les termes actuels). Face à la concurrence de Microsoft, Netscape et Sun ont soumis leurs projets JavaScript à l'ECMA (European Computer Manufacturers Association) pour normaliser JavaScript, et ont finalement créé la première version d'ECMAScript (ECMA-262).

Fait intéressant, après que Netscape ait standardisé JavaScript, des problèmes internes sont apparus et la recherche sur JavaScript a stagné. Microsoft a profité de l'occasion pour rattraper son retard et a lancé IE4, qui a intégré le premier moteur JavaScript conforme à la spécification ECMA avec un an d'avance. . De plus, les systèmes Microsoft occupent progressivement le marché des systèmes d'exploitation informatiques, et sa part de marché des navigateurs IE préinstallés augmente progressivement, et NN continue d'être évincé du marché. Cependant, lorsque Microsoft a perdu son plus grand rival, il a perdu la motivation de développer IE6 et IE8, qui étaient incompatibles en termes de rendu d'interface et d'exécution de scripts. Ils sont devenus une fleur étrange dans l'histoire des navigateurs et une malédiction pour le front-end. développeurs Cauchemar.

Copier le code Le code est le suivant :

1.v1 juin 1997 Première édition
2.v2 juin 1998 Le format a été révisé pour rendre son format cohérent avec la norme internationale ISO/IEC16262
3.v3 décembre 1999 Expressions régulières puissantes, meilleur traitement de la chaîne de texte, nouvelles instructions de contrôle, gestion des exceptions, définitions d'erreurs plus claires, formatage de la sortie numérique et autres changements
La 4.v4 n'est pas terminée... peut-être une définition plus claire des classes, des espaces de noms, etc...
5.v5 décembre 2009 Ajout du "mode strict", un sous-ensemble utilisé pour fournir une vérification des erreurs plus approfondie afin d'éviter les erreurs structurelles. Clarifie de nombreuses spécifications ambiguës de la version 3 et s'adapte au comportement des implémentations réelles qui différaient systématiquement de cette spécification. Certaines nouvelles fonctionnalités ont été ajoutées, telles que les getters et setters, la prise en charge de JSON et une réflexion plus complète sur les propriétés des objets.

****En juin 2004, l'Association européenne des fabricants d'ordinateurs a publié la norme ECMA-357, qui est une extension d'ECMAScript. Elle est également appelée E4X (ECMAScript pour XML).

Quelle est la relation entre JavaScript et ECMAScript ?

En fait, la question devrait être de savoir quelle est la relation entre JavaScript, JScript et ECMAScript. En fait, ECMAScript est la spécification générale. JavaScript et JScript sont développés selon cette spécification et sont compatibles avec ECMAScript, mais incluent des fonctions au-delà d'ECMAScript. Cependant, quel que soit celui-ci, il est désormais communément connu sous le nom de JavaScript, simplement parce qu'il est apparu en premier et a eu la plus grande influence, et que son nom a été transmis jusqu'à ce jour.

Que peut faire JavaScript ?

Sur la page Web, toutes les opérations nécessitant un traitement logique peuvent être effectuées par JavaScript. Par exemple :

Copier le code Le code est le suivant :

• Validation du formulaire
•Effets d'animation
•Jeux Web
•Compte à rebours
•……

Il existe de très nombreuses applications, que je n'entrerai pas dans les détails ici. Je pense que vous trouverez de nombreuses applications après avoir appris cette langue.

Pourquoi devriez-vous apprendre JavaScript ?

1. Parce que vous n'avez pas le choix, seul JavaScript peut contrôler tous les navigateurs couramment utilisés, et JavaScript est l'un des langages de programmation les plus importants au monde. Pour apprendre la technologie Web, vous devez apprendre JavaScript.

2. JavaScript est un beau langage, c'est bien, donc il faut l'apprendre

Positionnement de JavaScript

Copier le code Le code est le suivant :

1. JavaScript est un langage de script léger qui ne nécessite pas de compilation et est analysé et exécuté par un moteur d'analyse JavaScript (fait généralement référence au navigateur, bien sûr sans exclure les analyseurs tels que node)
2. JavaScript possède des fonctionnalités de langage non fonctionnelles, des fonctionnalités de langage fonctionnelles et des fonctionnalités de langage dynamiques, et sa syntaxe est très flexible
3. JavaScript est un langage de programmation orienté objet. Il y a un dicton dans le monde JavaScript : tout est un objet. Son héritage est basé sur l'héritage des prototypes (j'ai déjà écrit un article expliquant spécifiquement l'héritage des prototypes)
4. JavaScript est un langage de type C, donc toute personne ayant appris le C peut facilement démarrer avec JavaScript
5. L'écriture de JavaScript ne nécessite pas de compilateur, mais seulement un éditeur de texte (le Bloc-notes n'est pas requis, un texte sublime est fortement recommandé ici)

Qu'est-ce que JavaScript a ?

Le JavaScript utilisé par tout le monde comprend désormais trois parties : DOM, BOM et ECMAScript (ou core js).

DOM

On suppose ici que tout le monde a au moins une certaine compréhension du HTML et du CSS. Si vous souhaitez ignorer directement le HTML et le CSS pour lire cet article, lisez d'abord ici.

DOM, modèle objet de document

Nous savons que XHTML exige que les balises soient fermées et imbriquées correctement. L'imbrication des balises crée une relation parent-enfant (ou relation ancêtre-descendant). Le DOM fournit un grand nombre d'API qui nous permettent d'exploiter facilement l'arborescence DOM. J'écrirai plus tard un article spécifiquement sur JS DOM.

En utilisant DOM, nous pouvons modifier dynamiquement le contenu des pages, ajuster les styles, etc. C'est aussi une manifestation de la diversité de JS.

BOM

BOM, modèle objet du navigateur

Similaire au DOM, sauf que le corps principal devient le navigateur. Le navigateur fournit également un grand nombre d'API, dont certaines sont ouvertes en JS, nous fournissant des méthodes pour faire fonctionner la fenêtre du navigateur.

Utilisations courantes :

Copier le code Le code est le suivant :

1. La possibilité d'ouvrir une nouvelle fenêtre de navigateur
2. La possibilité de déplacer, fermer et modifier la taille de la fenêtre du navigateur
; 3. Objet de navigation pouvant fournir des informations détaillées sur le navigateur WEB
4. Un objet local qui peut fournir des informations détaillées sur la page chargée par le navigateur
; 5. Un objet d'écran qui fournit des informations détaillées sur la résolution de l'écran de l'utilisateur
 ; 6.Cookies de support ;
7. Internet Explorer étend la nomenclature pour inclure des classes d'objets ActiveX, et les objets ActiveX peuvent être implémentés via JavaScript.

Noyau ECMAScript

Également appelé noyau JS, peu importe comment vous l'appelez, la signification est la même. Ils représentent tous les composants essentiels du langage JS, y compris la définition des variables, le garbage collection, la syntaxe, la portée, etc. Contrairement au DOM et au BOM mentionnés ci-dessus, qui nécessitent uniquement l'utilisation de ces API, le noyau ECMAScript est l'essence du langage et nécessite une étude continue. Le chapitre suivant abordera plus en détail la syntaxe de JS.

Utilisation de JavaScript

En ligne

Inline est du JavaScript écrit en balises. Par exemple, nous écrivons en HTML :

Copier le code Le code est le suivant :


Lorsque nous cliquons sur le bouton, une boîte pop-up affichera « être cliqué ».
Mais notez que cela est fortement déconseillé, car cela entraînerait d'énormes problèmes de maintenance. Chaque fois que nous devons modifier l'événement, nous devons d'abord rechercher l'élément, puis modifier son contenu javascript, et ces codes javascript ne peuvent pas être réutilisés.

De plus, les événements écrits dans les balises doivent avoir « on », et les js ne peuvent être introduits dans les balises que via des événements, et les expressions js simples ne peuvent pas être écrites

Intégré

Embedded signifie écrire du code js dans la balise de script HTML. La méthode consiste à ajouter une nouvelle balise de script en HTML, puis à insérer l'un de vos codes js au milieu de la balise, comme suit :

Copier le code Le code est le suivant :



           Cliquez sur

<script><br> <span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript ">         btn.onclick = function() {<br> alert("être cliqué");<br> ><br> </script>
Si vous utilisez en ligne, vous êtes beaucoup plus libre qu'en ligne. Vous pouvez écrire plus de code, vous pouvez également éviter le problème des guillemets qui s'échappent et la maintenance devient plus facile. Mais il y a aussi un problème. Ces codes ne peuvent être appliqués qu’à cette page et ne peuvent pas être utilisés par d’autres pages.

Lien externe

La méthode des liens externes résout tous les défauts des deux formulaires ci-dessus. Voici comment procéder :

Créez d’abord un nouveau fichier et remplacez le suffixe par .js. Par exemple, nous créons un nouveau fichier click.js, puis copions le code js dans le inline que nous venons d'écrire (notez que la balise script n'est pas incluse)

Copier le code Le code est le suivant :
var btn = document.getElementById("btn");
btn.onclick = fonction() {
​​ alert("être cliqué");
>

Puis introduisez

en HTML via la balise script

Copier le code Le code est le suivant :


           Cliquez sur




L'avantage est que le même code js peut être partagé par plusieurs pages HTML. L'inconvénient est que cela augmente le nombre de fichiers et augmente le temps requis pour les requêtes, la réutilisabilité du code devrait donc être améliorée et le les fichiers js doivent être fusionnés à la fin (fusionner différents fichiers js en un seul fichier js)

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Benchmark de performances Python ORM : comparaison de différents frameworks ORM Benchmark de performances Python ORM : comparaison de différents frameworks ORM Mar 18, 2024 am 09:10 AM

Les frameworks de mappage objet-relationnel (ORM) jouent un rôle essentiel dans le développement de Python, ils simplifient l'accès et la gestion des données en créant un pont entre les bases de données objet et relationnelles. Afin d'évaluer les performances de différents frameworks ORM, cet article comparera les frameworks populaires suivants : sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM Méthode de test Le benchmark utilise une base de données SQLite contenant 1 million d'enregistrements. Le test a effectué les opérations suivantes sur la base de données : Insérer : Insérer 10 000 nouveaux enregistrements dans la table Lire : Lire tous les enregistrements de la table Mettre à jour : Mettre à jour un seul champ pour tous les enregistrements de la table Supprimer : Supprimer tous les enregistrements de la table Chaque opération

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Application de Python ORM dans les projets Big Data Application de Python ORM dans les projets Big Data Mar 18, 2024 am 09:19 AM

Le mappage objet-relationnel (ORM) est une technologie de programmation qui permet aux développeurs d'utiliser des langages de programmation objet pour manipuler des bases de données sans écrire directement de requêtes SQL. Les outils ORM en python (tels que SQLAlchemy, Peewee et DjangoORM) simplifient l'interaction avec les bases de données pour les projets Big Data. Avantages Simplicité du code : ORM élimine le besoin d'écrire de longues requêtes SQL, ce qui améliore la simplicité et la lisibilité du code. Abstraction des données : ORM fournit une couche d'abstraction qui isole le code de l'application des détails d'implémentation de la base de données, améliorant ainsi la flexibilité. Optimisation des performances : les ORM utilisent souvent la mise en cache et les opérations par lots pour optimiser les requêtes de base de données, améliorant ainsi les performances. Portabilité : ORM permet aux développeurs de

Obtenez une compréhension approfondie de 7 modèles de conception Java couramment utilisés Obtenez une compréhension approfondie de 7 modèles de conception Java couramment utilisés Dec 23, 2023 pm 01:01 PM

Comprendre les modèles de conception Java : une introduction aux 7 modèles de conception couramment utilisés, des exemples de code spécifiques sont nécessaires. Les modèles de conception Java sont une solution universelle aux problèmes de conception de logiciels. Ils fournissent un ensemble d'idées de conception et de principes comportementaux largement acceptés. Les modèles de conception nous aident à mieux organiser et planifier la structure du code, rendant le code plus maintenable, lisible et évolutif. Dans cet article, nous présenterons 7 modèles de conception couramment utilisés en Java et fournirons des exemples de code correspondants. Patte Singleton

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Comment mettre en œuvre un système de signature électronique en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de signature électronique en ligne à l'aide de WebSocket et JavaScript Dec 18, 2023 pm 03:09 PM

Présentation de l'utilisation de WebSocket et de JavaScript pour mettre en œuvre un système de signature électronique en ligne : Avec l'avènement de l'ère numérique, les signatures électroniques sont largement utilisées dans divers secteurs pour remplacer les signatures papier traditionnelles. En tant que protocole de communication full-duplex, WebSocket peut effectuer une transmission de données bidirectionnelle en temps réel avec le serveur. En combinaison avec JavaScript, un système de signature électronique en ligne peut être mis en œuvre. Cet article expliquera comment utiliser WebSocket et JavaScript pour développer un outil en ligne simple.

Implémenter une persistance efficace des données à l'aide de Python ORM Implémenter une persistance efficace des données à l'aide de Python ORM Mar 18, 2024 am 09:25 AM

Le mappage objet-relationnel (ORM) est une technologie qui permet de construire un pont entre les langages de programmation orientés objet et les bases de données relationnelles. L'utilisation de pythonORM peut simplifier considérablement les opérations de persistance des données, améliorant ainsi l'efficacité et la maintenabilité du développement d'applications. Avantages L'utilisation de PythonORM présente les avantages suivants : Réduire le code passe-partout : ORM génère automatiquement des requêtes SQL, évitant ainsi d'écrire beaucoup de code passe-partout. Simplifiez l'interaction avec la base de données : ORM fournit une interface unifiée pour interagir avec la base de données, simplifiant ainsi les opérations sur les données. Améliorer la sécurité : ORM utilise des requêtes paramétrées, qui peuvent empêcher les vulnérabilités de sécurité telles que l'injection SQL. Promouvoir la cohérence des données : ORM assure la synchronisation entre les objets et les bases de données et maintient la cohérence des données. Choisissez ORM pour avoir

Ajoutez du charme GUI à vos projets avec Python Tkinter Ajoutez du charme GUI à vos projets avec Python Tkinter Mar 24, 2024 am 09:46 AM

Tkinter est une bibliothèque puissante pour créer des interfaces utilisateur graphiques (GUI) en python. Il est connu pour sa simplicité, sa compatibilité multiplateforme et son intégration transparente avec l'écosystème Python. En utilisant Tkinter, vous pouvez ajouter une interface conviviale à votre projet, améliorant ainsi l'expérience utilisateur et simplifiant l'interaction avec votre application. Création d'une application GUI Tkinter Pour créer une application GUI à l'aide de Tkinter, effectuez les étapes suivantes : Importez la bibliothèque Tkinter : importtkinterastk Créez la fenêtre principale de Tkinter : root=tk.Tk() Configurez la fenêtre principale : Définissez le titre, la taille et la position de la fenêtre. , etc. Ajouter des éléments GUI : Utilisation de Tki

See all articles