Maison > interface Web > js tutoriel > le corps du texte

Tutoriel d'introduction minimaliste JavaScript (1) : compétences Basics_javascript

WBOY
Libérer: 2016-05-16 16:32:57
original
1157 Les gens l'ont consulté

La lecture de cet article nécessite une expérience en programmation dans d'autres langages.

Avant de commencer à étudier

La plupart des langages de programmation ont de bonnes et de mauvaises parties. Cet article ne couvre que les bons côtés de JavaScript car :

1. Seul l'apprentissage des bonnes parties peut raccourcir le temps d'apprentissage
2. Le code écrit est plus robuste
3. Le code écrit est plus lisible
4. Le code écrit est plus facile à maintenir

Tactage faible et typage fort

De manière générale, plus un bug est corrigé tôt, moins cela coûte cher. Les compilateurs de langages fortement typés peuvent rechercher certaines erreurs au moment de la compilation. JavaScript est un langage faiblement typé et son interprète ne peut pas vérifier les erreurs de type, mais la pratique montre :

1. Les erreurs que la frappe forte peut éviter ne sont pas des erreurs critiques
2. Les types faibles peuvent apporter de la flexibilité, et il n'est pas nécessaire de porter le bagage des types forts

Normes liées à JavaScript

La norme ECMA-262 définit le langage ECMAScript. Le JavaScript et l'ActionScript que nous connaissons bien sont tous deux basés sur ECMAScript. Actuellement, le grand public utilise la cinquième édition de l'ECMA-262, et le moteur V8 de Google en est l'implémentation.

Bonjour JavaScript

JavaScript est un langage de script qui nécessite un interprète pour interpréter et exécuter. Vous pouvez interpréter et exécuter JavaScript dans le navigateur ou utiliser directement node.js, qui intègre le moteur JavaScript V8 de Google. Puisque node.js est très pratique à utiliser, j'utilise ici node.js pour interpréter et exécuter JavaScript. Regardez maintenant le premier programme JavaScript :

Copier le code Le code est le suivant :

// test.js
console.log("Bonjour JavaScript");

Exécutez cette procédure :

Copier le code Le code est le suivant :

nœud test.js

Grammaire

Remarques

JavaScript utilise la même méthode de commentaire que C, // est utilisé pour les commentaires sur une seule ligne et /* */ est utilisé pour les commentaires sur plusieurs lignes.

Type de numéro

JavaScript n'a qu'un seul type de nombre, qui est un nombre à virgule flottante de 64 bits. Le type numérique a deux valeurs spéciales, NaN et Infinity signifie pas un nombre (pas un nombre). Utilisez la fonction isNaN pour vérifier s'il s'agit de NaN. La valeur Infinity signifie l'infini. Dans l'objet Math, il existe un ensemble de méthodes pour manipuler les nombres, par exemple : la méthode Math.floor est utilisée pour arrondir à l'inférieur.

Chaîne

Les chaînes littérales peuvent être placées entre guillemets simples ou doubles, en utilisant des caractères d'échappement (un peu comme dans de nombreuses autres langues). Chaque caractère en JavaScript fait deux octets et utilise le jeu de caractères Unicode. Les chaînes ont une propriété de longueur :

Copier le code Le code est le suivant :

"Hello".length // La valeur est 5, notez pas "Hello".length()

Les chaînes ne peuvent pas être modifiées (comme pour Lua). En plus de l'attribut de longueur mentionné ici, il existe également certaines méthodes, telles que :

.

Copier le code Le code est le suivant :

'cat'.toUpperCase() === 'CAT'

Déclaration

L'instruction

var est utilisée pour déclarer des variables locales, sinon la variable est une variable globale et la valeur d'une variable non initialisée n'est pas définie :

Copier le code Le code est le suivant :

fonction f() {
varVarlocale = 123;
globalVar = 456;
var i; // La valeur de i n'est pas définie
};

f();

console.log(globalVar); // ok
console.log(localVar); // Erreur, localVar n'est pas défini

Un groupe d'instructions enveloppé par {} est appelé un bloc. Contrairement à d'autres langages, les fonctions en JavaScript créeront de nouvelles étendues mais pas les blocs, par exemple :

Copier le code Le code est le suivant :

{
var v = 123;
>
console.log(v); // ok

instruction if

Copier le code Le code est le suivant :

si (expression)
Déclaration

ou

Copier le code Le code est le suivant :

si (expression)
Déclaration1
d'autre
Déclaration2

ou

Copier le code Le code est le suivant :

si (expression1)
Déclaration1
sinon si (expression2)
Déclaration2
sinon si (expression3)
Déclaration3
d'autre
Déclaration4

L'instruction if détermine s'il faut exécuter ou ignorer certaines instructions en jugeant si la valeur de l'expression est vraie ou fausse. En JavaScript les valeurs suivantes sont fausses (toutes les autres valeurs sont vraies) :

1.faux
2.null
3.indéfini
4. Chaîne vide
5.0
6.NaN

L'instruction dans if peut être une instruction ou un bloc d'instructions.

instruction de commutation

Copier le code Le code est le suivant :

commutateur (n) {
cas 1 : // si n est égal à 1
//Exécuter le bloc de code
Pause ;
Cas 2 : // Si n est égal à 2
//Exécuter le bloc de code
Pause ;
Par défaut : // Si n n'est ni 1 ni 2
//Exécuter le bloc de code
Pause ;
>

Le break ici est utilisé pour quitter l'instruction loop ou l'instruction switch. En JavaScript, il existe deux opérateurs pour comparer si deux valeurs sont égales :

1.== ​​​​(correspondant à l'opérateur !=), égal, lorsque les deux types d'opérandes sont différents, cet opérateur tente de convertir le type d'opérande avant comparaison, par exemple :

Copier le code Le code est le suivant :

var x = 1;
x == 1; // vrai
x == "1"; // vrai

2.=== (correspondant à l'opérateur !==), complètement égal, comparant deux opérandes sans effectuer de conversion de type d'opérande, par exemple :

Copier le code Le code est le suivant :

var x = 1;
x === 1; // vrai
x === "1"; // faux

Il est à noter que NaN n'est égal à aucune valeur. Si x est NaN, alors x !== x (uniquement vrai pour NaN), nous pouvons implémenter la fonction isNaN comme ceci :

Copier le code Le code est le suivant :

la fonction estNaN(n) {
Retour n !== n;
>

L'instruction switch ci-dessus est convertie en instruction if :

Copier le code Le code est le suivant :

si (n === 1)
// ...
sinon si (n === 2)
// ...
d'autre
// ...

instructions while et do-while

Copier le code Le code est le suivant :

tandis que (expression)
Déclaration

Si l'expression est vraie, l'instruction est exécutée à plusieurs reprises jusqu'à ce que l'expression soit fausse.

Copier le code Le code est le suivant :

faire
Déclaration
tandis que (expression);

Semblable à une boucle while, sauf que l'instruction est exécutée en premier, puis l'expression conditionnelle est vérifiée.

pour déclaration

Copier le code Le code est le suivant :

pour (initialiser; tester; incrémenter)
Déclaration

La première initialisation est exécutée une fois (couramment utilisée pour initialiser les variables de boucle), puis la condition de test est testée (couramment utilisée pour tester les variables de boucle). Si la condition de test est fausse, la boucle est arrêtée, sinon l'instruction est exécutée. puis l'incrément est exécuté (couramment utilisé pour mettre à jour les boucles) variable), puis effectuez le test de condition de test, et la boucle continue. Exemple d'utilisation :

Copier le code Le code est le suivant :

pour (var i=0; i<5; i) {
console.log(i);
>

Une autre forme de for est utilisée pour énumérer tous les noms de propriétés d'un objet :

Copier le code Le code est le suivant :

pour (variable dans l'objet)
Déclaration

Exemple :

Copier le code Le code est le suivant :

var obj = {
une : 1,
b : 2,
c:3
};

pour (nom de la variable dans obj)
console.log(nom);

A noter que nous utilisons la méthode hasOwnProperty pour vérifier si le nom de la propriété appartient à l'objet ou est trouvé dans la chaîne de prototypes (le prototype sera présenté dans le prochain article) :

Copier le code Le code est le suivant :

pour (var dans obj) {
Si (obj.hasOwnProperty(var)) {
               // ...
>
>

déclaration de retour

L'instruction

return est utilisée pour permettre à la fonction de renvoyer une valeur. Si la fonction n'utilise pas explicitement return, alors undefined est renvoyé :
.

Copier le code Le code est le suivant :

fonction f() { }
var v = f(); // v === non défini

? : opérateur conditionnel (le seul opérateur ternaire en JavaScript)
? : L'opérateur conditionnel existe dans de nombreux langages de programmation. Lorsque le premier opérande est vrai, l'opérateur renvoie la valeur du deuxième opérande, sinon il renvoie la valeur du troisième opérande. Exemple d'utilisation :

.

Copier le code Le code est le suivant :

fonction abs() {
Retourner x > 0 ? x : -x;
>

type d'opérateur

L'opérateur typeof est utilisé pour obtenir le type d'une variable, et sa valeur de retour comprend :

1.'numéro'
2.'chaîne'
3.'booléen'
4.'non défini'
5.'fonction'
6.'objet'

Le type spécial de null renvoie « objet ». Exemple de type de :

Copier le code Le code est le suivant :

var a = typeof 'bonjour'; // a === 'string'
var b = typeof null; // b === 'objet'

Opérateur

L'opérateur

peut être utilisé pour les opérations d'addition en JavaScript et peut également être utilisé pour la concaténation de chaînes :

Copier le code Le code est le suivant :

var message = 'bonjour' 'monde'; // message === 'bonjour monde'

&& et || opérateurs

L'opérateur

&& renvoie la valeur du premier opérande si le premier opérande est faux, sinon renvoie la valeur du deuxième opérande
L'opérateur || renvoie la valeur du premier opérande si le premier opérande est vrai, sinon il renvoie la valeur du deuxième opérande

Copier le code Le code est le suivant :

var a = 1 && vrai; // a === vrai
var b = 1 || faux; // b === 1
Un usage idiomatique de

|| :

Copier le code Le code est le suivant :

name = name || 'inconnu'; // Définit la valeur par défaut pour le nom 'inconnu'
Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal