Merci d'avoir rencontré.
Bonjour,
je m'appelle Ken
Le 24 octobre 2020, une colonne JavaScript est créée pour célébrer la journée du programmeur 10.24
et continuera d'être mise à jour. Au
plaisir de vous revoir
Concentrez-vous sur les manuels scolaires pour aider les amis du RPSC à démarrer et à réviser
_
Tout le monde est une île
, les faibles se rassemblent, les
forts se renforcent
1.1_ Qu'est-ce que JavaScript
1.1.1_Vue d'ensemble de JavaScript
JavaScript est un langage de programmation puissant dans le domaine du développement Web, principalement utilisé pour développer des pages Web interactives. Sur les pages Web consultées sur des ordinateurs, des téléphones mobiles et d'autres appareils, la plupart de la logique d'interaction est presque implémentée par JavaScript.
| Langue | Fonction et description |
|---|---|
| HTML | Structure_Déterminer la structure et le contenu de la page Web, qui est équivalent au corps humain |
| CSS | Style-_Détermine l'apparence de la page Web pour les utilisateurs, ce qui équivaut à l'habillage et au maquillage |
| JavaScript | Behavior_Realize la logique métier et le contrôle de page, équivalent à diverses actions humaines |
JavaScript est intégré dans les pages Web HTML et est interprété et exécuté par le moteur JavaScript intégré au navigateur pour transformer une page qui était à l'origine uniquement utilisée pour l'affichage en un programme de page prenant en charge l'interaction de l'utilisateur.
1.1.2_La naissance et le développement de JavaScript
En 1995, Brandon Eich de Netscape (maintenant Mozilla) a conçu JavaScript pour la première fois sur le navigateur Netscape Navigator.
_
Netscape a initialement appelé ce langage de script LiveScript, puis Netscape et Sun (acquis par Oracle en 2009) ont coopéré et renommé JavaScript.
_C'est
parce que le langage Java introduit par Sun a attiré beaucoup d'attention et que Netscape a emprunté le nom de Java pour le marketing. En fait, la relation entre JavaScript et Java est comme Lei Feng Tower et Lei Feng. Ce sont essentiellement deux langages de programmation différents.
1.1.3_Caractéristiques JavaScript
- JavaScript est un langage de script. Le
script est simplement une série de commandes de texte, qui sont exécutées une par une selon le déroulement du programme. Les langages de script courants incluent JavaScript, TypeScript, PHP, Python, etc. Les langages sans script (tels que C, C ++) doivent généralement être compilés, liés et exécutés après avoir généré un fichier exécutable indépendant. Cependant, les langages de script dépendent d'un interpréteur et ne sont automatiquement interprétés ou compilés que lorsqu'ils sont appelés. Les langages de script sont généralement simples, faciles à apprendre et à utiliser. Les règles grammaticales sont relativement lâches, de sorte que les développeurs peuvent rapidement terminer le travail de programmation. - JavaScript peut être multiplateforme. Le
langage JavaScript ne dépend pas du système d'exploitation et nécessite uniquement la prise en charge du navigateur. - JavaScript prend en charge orienté objet
1.1.4_Composition JavaScript
JavaScript est composé de trois parties: ECMAScript, DOM et BOM.
Ensuite, nous présenterons brièvement la composition de JavaScript.
(1) ECMAScript: est le cœur de JavaScript. ECMAScript stipule la syntaxe de programmation et le contenu de base de JavaScript, et est un ensemble de normes industrielles pour la syntaxe JavaScript que tous les fabricants de navigateurs respectent.
(2) DOM: Document Object Model, qui est une interface de programmation standard pour le traitement du langage de balisage extensible recommandé par l'organisation W3C. Grâce à l'interface fournie par DOM, différents éléments de la page peuvent être exploités (tels que la taille, la position, la couleur, etc.).
(3) BOM: Modèle d'objet du navigateur, qui fournit une structure d'objet indépendante du contenu et pouvant interagir avec les fenêtres du navigateur. Grâce à la nomenclature, vous pouvez utiliser la fenêtre du navigateur (comme la boîte de dialogue, le contrôle du saut de navigation du navigateur, etc.).
1.2_ Outils de développement communs
Si vous voulez bien faire, vous devez d'abord affiner vos outils Un excellent outil de développement peut grandement améliorer l'efficacité et l'expérience de développement de programmes. Dans le développement Web front-end, les outils de développement couramment utilisés incluent Visual Studio Code, Sublime Text, HBuilder, etc. Ensuite, nous présenterons les caractéristiques de ces outils de développement.
- Code Visual Studio
Visual Studio Code (VS Code en abrégé) est un éditeur léger très puissant développé par Microsoft. L'éditeur fournit une multitude de touches de raccourci, intègre la coloration syntaxique, la liaison de touches d'accès rapide personnalisable, la correspondance entre crochets et la collection d'extraits de code, et prend en charge l'écriture de plusieurs formats de syntaxe et de fichier.
- Texte sublime
Sublime Text est un éditeur de code léger avec une interface utilisateur conviviale qui prend en charge la vérification orthographique, les signets, les raccourcis clavier personnalisés et d'autres fonctions. Il peut également étendre les fonctions de l'éditeur grâce à un mécanisme de plug-in flexible. Ses plug-ins peuvent utiliser Python Développement du langage. Sublime Text est un éditeur multiplateforme qui prend en charge Windows, Linux, macOS et d'autres systèmes d'exploitation.
- HBuilder
HBuider est un éditeur de développement Web prenant en charge HTML5 lancé par DCloud (Digital Paradise). Il fournit des fonctions riches et une expérience utilisateur intime dans le développement frontal et le développement mobile. Il fournit également le développement d'applications mobiles HTML5 Bon support.
- Adobe Dreamweaver
Adobe Dreamweaver est un éditeur de pages Web WYSIWYG qui intègre la production de pages Web et la gestion de sites Web. Il est utilisé pour aider les concepteurs Web à améliorer l'efficacité de la production de pages Web, à simplifier la difficulté du développement Web et le seuil d'apprentissage HTML5 et CSS. Mais l'inconvénient est que la fonction d'édition visuelle générera beaucoup de code redondant et ne convient pas pour développer des pages Web avec une structure complexe et beaucoup d'interaction dynamique.
- WebStorm
WebStorm est un outil de développement web front-end lancé par JetBrains. Le développement JavaScript et HTML5 sont ses forces. Il prend en charge de nombreuses technologies front-end populaires, telles que jQuery, Prototype, Less, Sass, AngularJS, ESLint, webpack, etc.
1.3_Introduction à JavaScript❗
1.3.1_ Position d'écriture du code
- Style en ligne Le style en
ligne fait référence à l'écriture d'une seule ligne ou d'une petite quantité de code JavaScript dans l'attribut event de la balise HTML (c'est-à-dire l'attribut commençant par on, comme onclick)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" οnclick="alert('行内式')“>
</body>
</head>
</html>
Utilisez le style en ligne pour écrire du code JavaScript. Réalisation: après avoir cliqué sur un bouton, une boîte d'avertissement apparaîtra, affichant des informations d'invite
La quatrième ligne déclare que le codage de la page Web est UTF-8, ce qui aide le navigateur à reconnaître correctement le codage de la page Web. Après avoir déclaré l'encodage, vous devez également vous assurer que l'encodage du fichier lui-même est également UTF-8. Actuellement, la plupart des fichiers créés par les éditeurs de code ont un encodage UTF-8 par défaut. En outre, le codage par défaut du Bloc-notes Windows est ANSI et les pages Web écrites dans le Bloc-notes sont sujettes à des caractères déformés, les lecteurs ne doivent donc pas utiliser le Bloc-notes pour écrire des fichiers de code.
Faites attention à l'utilisation du style en ligne:
- Faites attention à l'utilisation de guillemets simples et doubles. Des guillemets doubles sont utilisés en HTML et des guillemets simples sont recommandés pour Javascript.
- Le style en ligne est moins lisible, en particulier lors de l'écriture de beaucoup de code JavaScript en HTML. Pas facile à lire.
- Il est très facile de confondre dans le cas de plusieurs guillemets incrustés, ce qui entraîne des erreurs de code.
- Le style en ligne ne doit être utilisé que pour des tests temporaires ou des circonstances spéciales, le style en ligne n'est pas recommandé en général
- Inline (intégré)
Inline doit utiliser uniquement la balise <script> pour envelopper le code JavaScript, la balise <script> peut écrire la balise dans la balise <head> ou <body>. Grâce à l'inline, vous pouvez écrire plusieurs lignes de code JavaScript dans la balise <script>. L'embarqué est le moyen le plus courant d'apprendre JavaScript.
<head>
......
<script>
alert('内嵌式');
</script>
</head>
La quatrième ligne est une instruction JavaScript et le point-virgule à la fin indique la fin de l'instruction, et l'instruction suivante peut être écrite plus tard. La balise <script> possède également un attribut type. En HTML5, la valeur par défaut de cet attribut est "text / JavaScript", de sorte que l'attribut type peut être omis lors de l'écriture.
- Type externe (type de chaîne externe)
Le type externe consiste à écrire du code JavaScript dans un fichier séparé, utilisez généralement "js" comme extension de fichier. Utilisez la balise <script> pour importer dans la page html, ce qui convient aux situations où il y a beaucoup de code JavaScript.
En externe, le code JavaScript ne peut pas être écrit dans la balise <script>
<head>
......
<script src="test.js"></script>
</head>
avec
alert('外部式');
Une autre façon d'incorporer du code JavaScript dans html consiste à utiliser un pseudo-protocole.
<a href="javascript:alert('伪协议')">点我</a>
Dans le code, le "JavaScript" dans l'attribut href représente le pseudo-protocole, et le morceau de code JavaScript suivant fera apparaître une boîte d'alerte lorsque vous cliquez sur ce lien hypertexte. Cette méthode n'est pas recommandée dans le développement réel.
Lors de l'écriture de code JavaScript, vous devez faire attention aux règles grammaticales de base pour éviter les erreurs de programme, comme suit:
- JavaScript est strictement sensible à la casse, vous devez donc faire attention à l'exactitude de la casse lors de l'écriture du code. Par exemple: si l'alerte dans le code de cas est changée en ALERTE majuscule, la boîte d'avertissement n'apparaîtra pas.
- Le code JavaScript n'est pas sensible aux espaces, aux sauts de ligne et à l'indentation, et une phrase peut être divisée en. Peut écrire sur plusieurs lignes. Par exemple, si vous modifiez le "(" après l'alerte à la ligne suivante, le programme s'exécutera toujours correctement.
- Si une instruction est écrite et l'instruction suivante est écrite sur une nouvelle ligne, le point-virgule après l'instruction précédente peut être omis.
1.3.2_ Remarques
- Commentaire sur une seule ligne "//"
<script>
alert('Hello,JavaScript'); //输出Hello,JavaScript
</script>
- Commentaire multiligne "/ * * /"
<script>
alert('Hello,JavaScript');
/* 输出
Hello,JavaScript
*/
</script>
1.3.3_ instructions d'entrée et de sortie
| Déclaration | La description |
|---|---|
| alerte （'msg'） | Le navigateur affiche une boîte d'avertissement |
| console.log （'msg'） | Informations de sortie de la console du navigateur |
| invite ('msg') | Le navigateur affiche une boîte de sortie et l'utilisateur peut entrer du contenu |
<script>
alert("这是一个警告框");
console.log ('在控制台输出信息');
prompt ('这是一个输入框');
document.write("输出语句");
</script>
1.3.4_ Utilisation de la console
Vous pouvez saisir directement le code JavaScript pour l'exécuter dans la console du navigateur.
1.4_Variables JavaScript❗
1.4.1_ Qu'est-ce qu'une variable
Une variable est un espace que le programme demande en mémoire pour stocker des données
1.4.2_ Utilisation de variables
- Déclarer la variable
var age; // 声明变量
- Affectation des variables
age = 10; // 为变量赋值
alert(age); // 使用alert()警告框输出age的值
console.log(age); // 将age的值输出到控制台中
- Initialisation variable
var age = 10; //声明变量同时赋值
1.4.3_ Cas d'application des variables
- Utiliser des variables pour enregistrer des informations personnelles
<script>
var myName = '小明'; //名称
var address = 'xx市xx区'; //地址
var age = 18; //年龄
var email = 'xiaoming@localhost'; //电子邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email); //输出相应的值
</script>
- Utiliser des variables pour enregistrer la valeur saisie par l'utilisateur
<script>
var myName = prompt('请输入您的名字');
alert(myName);
</script>
1.4.4_ Détails de la syntaxe des variables
- Mettre à jour la valeur de la variable
var myName = '小明'; //变量赋初值
console.log (myName); //输出结果：小明
var myName = '李华'; //更新变量的值
console.log (myName) //输出结果：小红
- Déclarez plusieurs variables en même temps
var myName,age,email; //同时声明多个变量，不赋值
var myName = '小明'，
age = 18,
email = 'xiaoming@localhost';
- Le cas particulier de la déclaration de variables
(1) Ne déclarant que des variables mais n'affectant pas de valeurs, lors de la sortie de variables, le résultat n'est pas défini
var age;
console.log (age); //输出结果：undefined
(2) Si la variable n'est pas déclarée et que la valeur de la variable est directement sortie, le programme ira mal
console.log (age);
Si une erreur se produit dans la ligne de code précédente, le code suivant ne sera pas exécuté. Par conséquent, pendant le développement, si le code ne s'exécute pas comme prévu, vous pouvez ouvrir la console pour voir s'il y a un message d'erreur et découvrir quelle ligne est erronée.
(3) Ne déclarez pas de variables, affectez uniquement des valeurs
age1 = 10; //变量age1没有使用var进行声明
console.log (age1); //输出结果：10
Il ressort du résultat de sortie que l'affectation directe d'une variable non déclarée peut également générer correctement la valeur de la variable. Cette situation est une caractéristique du langage JavaScript. Vous pouvez la comprendre en apprenant la portée globale et l'objet window.
1.4.5_ Convention de dénomination des variables
Lors de la dénomination de la variable, vous devez suivre la convention de dénomination des variables pour éviter les erreurs de code et améliorer la lisibilité du code
① Se compose de lettres, de chiffres, de traits de soulignement et de signes dollar ($), tels que l'âge et le nombre.
②Strictement sensible à la casse, comme l'application et l'application sont deux variables.
③ Impossible de commencer par un nombre, tel que 18age est le mauvais nom de variable.
④Il ne peut pas s'agir de mots clés ou de mots réservés, tels que var, for, while, etc. sont des noms de variables incorrects.
⑤ Essayez de "voir son nom et connaître sa signification", comme l'âge signifie l'âge et num signifie le nombre.
⑥Il est recommandé de suivre la nomenclature des cas de chameau, la première lettre est en minuscule et la première lettre des mots suivants est en majuscule, comme myFirsName.
En JavaScript, les mots clés sont divisés en «mots clés réservés» et «futurs mots clés réservés». Les mots clés réservés font référence à des mots définis à l'avance et ayant une signification particulière dans le langage JavaScript, et ne peuvent pas être utilisés comme noms de variables.
Les futurs mots clés réservés font référence aux mots clés réservés dans la spécification ECMAScript. Actuellement, ils n'ont pas de fonctions spéciales, mais ils peuvent être ajoutés à un moment donné dans le futur.
Il est recommandé de ne pas utiliser de mots clés réservés comme noms de variables à l'avenir pour éviter les erreurs lors de leur conversion en mots clés à l'avenir.
Identificateurs
Il existe également un concept d' identificateurs en JavaScript. Les identificateurs font référence aux noms donnés par les développeurs pour les variables et les fonctions. Par exemple, le nom de la variable age est un identifiant. D'un point de vue syntaxique, les mots-clés ne peuvent pas être utilisés comme identifiants, sinon des erreurs grammaticales se produiront.
- Tournez votre visage vers la lumière.
Au fil du temps,
vous apprendrez naturellement le truc pour vous entendre.
- Celui-ci était prêt à venir
encore au port de rêves
ne perdez pas la foi
_
Bonjour, je suis Ken Ah
merci les visiteurs