94_111122114208_1

Bases de JS pour débutants

Étapes pour écrire du JS

  1. Implémenter d'abord la mise en page
  2. Comprendre le principe d'implémentation
  3. Comprendre la syntaxe JS

Implémentation pour supprimer un élément spécifique

  • display: none; affiché comme rien
  • visibility: hidden; masquer
  • width \ height
  • Transparence
  • left \ top
  • Utiliser un div avec la même couleur d'arrière-plan pour couvrir l'élément
  • Utiliser des valeurs de margin
  • ……

Obtenir un élément

  • getElementById() — méthode statique, ne peut être précédée que de document
  • document.body, document.title — éléments qui n'apparaissent qu'une seule fois sur la page
  • getElementsByTagName() — méthode dynamique, peut être précédée de document ou d'autres éléments, renvoie une collection d'éléments semblable à un tableau
    • Possède une longueur de type tableau
    • Possède une utilisation de type tableau, comme ali
    • Lors de l'utilisation de TagName, vous devez ajouter des crochets []
    • La méthode dite dynamique signifie que les éléments ajoutés dynamiquement via JS peuvent aussi être trouvés par getElementsByTagName(), mais document.getElementById ne peut pas les trouver.

Événements

Événements : événements de souris, événements de clavier, événements système, événements de formulaire, événements personnalisés
  • onclick
  • onmouseover
  • onmousedown
  • onmouseout
  • onmouseup
  • onmousemove
  • ……

Comment ajouter des événements

  • element.onmouseover

Fonctions

Les fonctions peuvent être comprises comme des commandes pour faire quelque chose, par ex. : function abc() { // Elle ne s'exécutera certainement pas toute seule ! ... }
  1. Appel direct : abc();
  2. Appel d'événement : element.event = nom de fonction (oDiv.onclick = abc;)
  3. ……
function(){} fonction anonyme element.event = function(){}

Test

  • alert(1); boîte d'alerte avec bouton OK ; alert('ok'); 'ok' est une chaîne de caractères
  • Débutants : il est préférable de garder l'habitude d'écrire et de tester à tout moment

Variables

  • var li = document.getElementById('lis');
  • var num = 123;
  • var name = 'leo';

Opérations sur les attributs JS

Opérations sur les attributs HTML

  • Nom de l’attribut
  • Valeur d'attribut
  • Lecture d'un attribut : obtenir, trouver
    • element.attributeName
  • Écriture d'un attribut : remplacer, modifier
    • element.attributeName = nouvelle valeur
    • Pour ajouter, il faut utiliser +=
  • innerHTML lit tout le code HTML à l'intérieur d'un élément.
Concaténation de chaînes : signe plus.

Remarques sur la lecture et l'écriture des attributs

  • Les tirets ne sont pas autorisés dans les propriétés JS ; par exemple, font-size devient fontSize.
  • "class" est un mot réservé en JS ; pour utiliser class en JS, utilisez className.
  • N'utilisez pas de chemins relatifs pour les jugements (par exemple, le src de img, ainsi que href).
  • N'utilisez pas de valeurs de couleur pour les jugements (car il existe des formes comme red, #f00, rgb(250, 0, 0), etc.).
  • N'utilisez pas non plus de chemins relatifs pour les jugements.
  • N'utilisez pas la valeur de innerHTML pour les jugements.
  • Dans IE6, IE7, IE8, le type des éléments de formulaire ne peut pas être modifié ; ce n'est pas pris en charge et générera une erreur ; tout le reste peut l'être.
  • Dans certains navigateurs, la modification directe de la valeur float peut ne pas être prise en charge. En JS, vous pouvez traiter IE (styleFloat) et non-IE (cssFloat) différemment.
  • Pour les choses qui ne peuvent pas être utilisées pour le jugement, vous pouvez créer un switch et utiliser une valeur booléenne pour l'implémenter.
À propos de la compatibilité :
  • Techniquement : vous devez être capable de maîtriser la compatibilité (solutions aux problèmes de compatibilité).
  • Concernant les exigences : discutez-en et trouvez une solution (fournissez la solution de rendu la plus précise).

Utilisation des crochets []

  • La valeur après le point « . » ne peut pas être modifiée.
  • La valeur à l'intérieur des crochets [] peut être modifiée ; en JS, « . » peut être remplacé par « [] ».

Instruction conditionnelle

  • if (condition) { ... };
  • if (condition) { ... } else { ... };
  • if (condition1) { ... } else if (condition2) { ... } else if (condition3) { ... } else { ... };

Tableaux

  • « Entrepôt pour stocker des données. »
  • Crochets [], séparés par des virgules en demi-largeur : ne pas ajouter de virgule après le dernier élément de données.
  • La propriété length d'un tableau.
  • Utilisez push() pour ajouter des éléments à la fin d'un tableau.

Application de la boucle for

Cas d'utilisation des boucles for :
  • Si vous souhaitez exécuter de manière répétée un certain code.
  • Chaque fois qu'il s'exécute, un nombre change.
Ordre d'exécution d'une boucle for : 1 → 234 → 234 ...
  1. var i = 0;
  2. i < 3; étape critique.
  3. Tout le code à l'intérieur des parenthèses.
  4. i++
Notez la boucle suivante :
for (var i=0; i<aLi.length; i++) {
  aLi[i].onclick = function(){
    alert(i);
  }
}
Le code ci-dessus va alerter 3, au lieu de 0, 1, 2 dans l'ordre. À noter ici : si une fonction est encapsulée dans la boucle for et que la fonction utilise i, alors en raison de la portée, i ne s'incrémentera pas un par un comme vous pourriez vous y attendre.

Formatage de texte cssText et opérations sur les attributs

  • oDiv.style.cssText = 'width: 200px; height: 200px;';
  • cssText ne touche pas aux paramètres de la balise style dans le head ; mais il modifiera les styles en ligne (note : il remplace les styles en ligne, il n'ajoute pas de nouveaux styles en ligne).

Idée pour ne pas répéter la fonction après le clic sur le bouton

  1. Manipulez le bouton, par exemple, après un clic, définissez oBtn.disabled = true;
  2. Continuez à manipuler le bouton, par exemple, après un clic, masquez le bouton : oBtn.style.display = 'none';
  3. Effacez ce que le bouton a ajouté, puis ajoutez-le à nouveau ; effacez d'abord, puis générez.
  4. Utilisez un test (conditionnel).

Le pointage de this et son application

window est le « patron » en JS.
function fn1(){
    alert(this);
}
fn1();
Dans le code ci-dessus, exécuter la fonction fn1() équivaut à window.fn1(); par conséquent, afficher this avec alert dans le corps de la fonction donne toujours window.
function fn1(){
    alert(this);
}
oBtn.onclick = fn1;
Dans ce qui précède, la fonction fn1 appelée par l’événement click du bouton finit par afficher le bouton lui-même, et non window.
function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    alert(this)
}
Dans le code ci-dessus, en cliquant sur le bouton, le this affiché est toujours le bouton oBtn.
function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    fn1();
}
Dans le code ci-dessus, en cliquant sur le bouton oBtn, ce qui est affiché n’est plus l’objet oBtn, mais window.
<input id="btn2" type="button" value="按钮2" onclick="alert(this)" />
Le code ci-dessus est un événement inline, et le this affiché est le bouton btn2.
function fn1(){
    alert(this);
}
<input id="btn2" type="button" onclick="fn1();" value="按钮2” />
Dans le code ci-dessus, le this affiché est window.
  • this : l’objet qui appelle la méthode (fonction) en cours.
function fn1(){
    this
}

fn1(); this ＝> window

oDiv.onclick = fn1; this => oDiv

oDiv.onclick = function(){
    this => oDiv
};

oDiv.onclick = function(){
    fn1(); fn1()里面的this => window
}

<div onclick="  this  "></div> this => div

<div onclick = "  fn1();  "></div>  fn1()里面的this => window

<script>

fn1(this);
function fn1(obj){
  obj => window
}

oDiv.onclick = function(){
  this
  fn1(this);
};
function fn1(obj){ obj => oDiv }

</script>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  for(var i=0; i<aBtn.length; i++) {
    aBtn[i].onclick = function(){
      this.style.background = 'yellow';
    }
  }
}
L’effet du code ci-dessus est équivalent au code suivant ; notez l’utilisation de that.
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var that = null; 
  
  for(var i=0; i<aBtn.length; i++) {
    aBtn[i].onclick = function(){
      that = this;
      fn1();
    };
  }
  function fn1(){
    //this => window
    that.style.background = 'yellow';
  }
}
Le code ci-dessus est également équivalent au code suivant :
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  for(var i=0; i<a.aBtn.length; i++) {
    aBtn[i].onclick = fn1; //注意不要在fn1后面加括号
  }
  
  function fn1(){
    this.style.background = 'yellow';
  }
}

Attributs personnalisés, valeurs d'index

Lecture et écriture d'attributs personnalisés

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  aBtn[0].abc = 123; //自定义属性
  
  // alert(aBtn[0].abc); 自定义属性的读
  // aBtn[0].abc = 456; 自定义属性的写
}
JS peut ajouter un nombre quelconque d’attributs personnalisés à n’importe quel élément HTML.

Application des attributs personnalisés

À l'aide d'attributs personnalisés, vous pouvez ajouter une propriété de commutateur à un élément pour servir de commutateur de contrôle. Par exemple, ce qui suit :
window.onload = function(){
  var aLi = document.getElementsByTagName('li');
  // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。
  
  for(var i=0; i<aLi.length; i++) {
    aLi[i].onOff = true;
    aLi[i].onclick = function(){
      if (this.onOff){
        this.style.background = 'url(img/active.png)';
        this.onOff = false;
      } else {
        this.style.background = 'url(img/normal.png)';
        this.onOff = true;
      }
    }
  }
}

Obtenir son propre numéro incrémentiel et faire correspondre le contenu d'un tableau

Définissez trois boutons sur la page avec une valeur par défaut de 0 ; chaque fois qu'un bouton est cliqué, les lettres défilent successivement dans l'ordre A, B, C, D.
<input type="button" value="0" />
<input type="button" value="0" />
<input type="button" value="0" />

  var aBtn = document.getElementsByTagName('input');
  var arr = ['A', 'B', 'C', 'D'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].num = 0;
    aBtn[i].onclick = function(){
      this.value = arr[this.num]
      this.num++;
      if(this.num === arr.length){
        this.num = 0;
      };
    };
  };

Ajouter une valeur d'index, faire correspondre un tableau, élément HTML

Faites correspondre les valeurs des trois boutons avec les valeurs du tableau dans l'ordre.
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var arr = ['莫涛','张森','杜鹏'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].index = i; //自定义属性index，添加索引值
    aBtn[i].onclick = function(){
      //alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。
      this.value = arr[this.index];
    };
  };
}
Ce qui précède met en correspondance les valeurs du tableau par valeur d'index ; la mise en correspondance des éléments HTML est identique. Si vous souhaitez établir une relation « d'appariement » ou « de correspondance », utilisez les valeurs d'index.

Types de données, conversion de type

ECMAScript：Standard, cœur.

Types de données

  • Types de balises HTML.
    • block
    • inline
    • inline-block
    • table
    • ……
  • Types de données en JS :
    • Number (NaN appartient au type number).
    • String.
    • Boolean.
    • Type de fonction.
    • Objet.
      • obj
      • []
      • {}
      • null (on ne peut pas ajouter de propriétés personnalisées à null/vide).
    • Undefined.
typeof sert à déterminer les types de données. La méthode de chaîne charAt() : obtient une sous-chaîne en fonction de l'index de la chaîne. On peut ajouter des propriétés personnalisées aux objets. Si vous affectez une fonction à un objet, vous avez ajouté une méthode à cet objet.

Conversion des types de données JS

Méthodes pour convertir des chaînes en nombres :

Méthode JS : Number();

var a = '100';
alert(a + 100); //'100100'

var b = '00100';
alert(Number(b)); //100

var c = '+100';
alert(Number(c)); //100

var d = '';
alert(Number(d)); //0

var e = '   ';
alert(Number(e)); //0

var f = true;
alert(Number(f)); //1

var g = false;
alert(Number(g)); //0

var i = [];
alert(Number(i)); //0 空数组用Number转出来是0

var j = [''];
alert(Number(j)); //0

var k = [123];
alert(Number(k)); //123

var l = ['123'];
alert(Number(l)); //123

var o = null;
alert(Number(o)); //0

----------------------------
var m = [1,2,3];
alert(Number(m)); //NaN

var json = {abc:123};
alert(Number(json)); //NaN

var json2 = {};
alert(Number(json2)); //NaN 即使是空json，Number方法也转不了

var h = function(){};
alert(Number(h)); //NaN

var p;
alert(Number(p)); //undefined 

var q = '100px';
alert(Number(q)); // NaN

parseInt et parseFloat

var a = '100px';
alert(parseInt(a)); //100

var b = '100px123456789';
alert(parseInt(b)); //100

var d = '-100px';
alert(parseInt(d)); //-100 parseInt还是认加减号的

var e = '   100px';
alert(parseInt(e)); //100 parseInt也是认空格的

var f = '000000100px';
alert(parseInt(f)); //100

var g = '12.34元';
alert(parseInt(g)); //12 parseInt只能转出整数
------------------------------
var c = true;
alert(parseInt(c)); //NaN

//parseInt也不能用于转函数等
La méthode parseInt() a également un paramètre, qui est la base de conversion ; par exemple, parseInt(a, 10) signifie convertir en décimal ; parseInt(b, 2) signifie convertir en binaire.
var a = '12.34元';
alert(parseFloat(a)); //12.34

var b = '12.3.4元';
alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点
Utilisation combinée de parseInt et parseFloat., elle peut être utilisée pour déterminer si une valeur est un entier ou un décimal, comme suit :
var num = '200.345';
if(parseInt(num) == parseFloat(num)) {
  alert(num + '是整数');
} else {
  alert(num + '是小数');
}

Conversions de type implicites étranges en JS

Conversion de type explicite (conversion de type forcée) :
  • Number();
  • parseInt();
  • parseFloat();
Conversion de type implicite :
  • - * / % la soustraction, la multiplication, la division, le modulo peuvent convertir des chaînes en nombres.
  • Le signe plus + peut convertir des nombres en chaînes.
  • ++ -- les opérateurs d'incrémentation et de décrémentation peuvent convertir des chaînes en nombres.
  • < > les signes supérieur à et inférieur à peuvent convertir des chaînes en nombres ; veillez à noter si la comparaison est numérique ou s'il s'agit d'une comparaison de chaînes.
  • ! la négation convertit le type de données à droite en une valeur booléenne.
  • ==
alert('200' - 3); //197
alert(200 + '3'); //2003

var a = '10';
a++;
alert(a); //11

alert('10'>9); //true
alert('1000000'>'9'); //false
//注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。

alert(!'ok'); //false
alert(!100); //false

alert('2' == 2); //true
alert('2' === 2); //false 三个等号不仅判断值，还会先判断两者的类型
Si la conversion de type implicite ne peut pas convertir, elle renvoie aussi NaN ; par exemple, alert('...' - 9); affichera NaN.

Exemple d'application de isNaN

NaN : (pas un nombre). NaN est de type number mais ce n'est pas un nombre. Tous les nombres sont de type number, mais tous les types number ne sont pas des nombres.
  • NaN est de type number, mais ce n'est pas un nombre.
  • Dès que NaN apparaît dans un programme, cela indique à coup sûr qu'une opération illégale a été effectuée.
  • NaN est une valeur fausse (falsy).
  • NaN n'est même pas égal à lui-même.
var a = Number('abc');
//alert(a); //NaN
//alert(typeof(a)); //number

if(a) { //会弹出‘假’，说明NaN是false
  alert('真');
} else {
  alert('假');
}

//alert(a === a); //false NaN比较，比出false
isNaN :« n'est pas un Number » signifie demander « est-ce que ce n'est pas un nombre ? » (pas un nombre). isNaN(); est une méthode utilisée pour effectuer le travail.
  • Aide à déterminer si une certaine valeur est un nombre.
  • Il n'aime pas les nombres, il déteste les nombres (pas le type number ; isNaN aime beaucoup NaN, renvoyant true, mais NaN est de type number). Il est utilisé pour juger les nombres. Par exemple, alert(isNaN(2)); renvoie false. alert(isNaN('I love you')); renvoie true. alert(isNaN(function(){})); renvoie true.
Le processus de jugement de isNaN : il passe ce qui se trouve entre parenthèses à Number. Si Number le convertit en nombre, il renvoie false ; s'il ne peut pas le convertir, il renvoie true.
alert(isNaN('250'));
//Number() '250' => 250 => false

alert(isNaN(true));
//Number() true => 1 => false

alert(isNaN([]));
//Number() [] => 0 => false
Voici une petite application de isNaN :
<input type="text" />
<input type="button" value="判断输入值是不是数字" />

window.onload = function(){
  var aInp = document.getElementsByTagName('input');
  var str = '';
  
  aInp[1].onclick = function(){
    str = aInp[0].value
    //alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串
    
    if(isNaN(str)){
      alert(str + '不是数字');
    } else {
      alert(str + '是数字');
    }
  }
}

Passage de paramètres de fonction

Paramètres = types de données JS :
  • Number.
  • String.
  • Boolean.
  • Function.
  • Objet.
  • Undefined.

Vérification du type des paramètres

fn1(100);
fn1('miaov');
fn1(function(){alert(1);});

function fn1(a){
  if(typeof a === 'number' &amp;&amp; a === a) {
    alert(a+20);
  } else if (typeof a === 'string'){
    alert(a.charAt(2));
  } else if (typeof a === 'function'){
    a();
  }
}

Étapes pour réutiliser du code

  1. Essayez de garder la structure du code HTML cohérente ; vous pouvez sélectionner les éléments enfants via le parent.
  2. Implémentez le programme principal de base et encapsulez-le dans une fonction.
  3. Trouvez les valeurs différentes dans chaque groupe et implémentez-les via le passage de paramètres.

Portée JS

Qu'est-ce que la portée.
  • Domaine : espace, étendue, zone.
  • Fonction : lire, écrire.

Le "parseur JS" du navigateur

« Analyseur JS » : un programme dans le navigateur spécialement utilisé pour lire du JS. Il fait au moins les deux choses suivantes (bien sûr, il y a d'autres choses) :
  1. Préparation (« chercher des choses ») : chercher des choses en fonction de var, function et des paramètres —pré-analyse JSa = undefined. Toutes les variables, avant l'exécution réelle du code, reçoivent à l'avance une valeur : undefined. fn1 = function fn1(){alert(2);} Toutes les fonctions, avant l'exécution réelle du code, correspondent à l'intégralité du bloc de fonction. En cas de noms en double, un seul est conservé.
  2. Interpréter le code ligne par ligne. Chaque fois qu'une ligne est lue, il revient à la bibliothèque pré-analysée pour y jeter un coup d'œil. Lorsqu'il rencontre une expression (avec = + - * / % ++ – ! les paramètres ... tous sont des expressions) qui peut modifier une valeur, c'est une expression. Lorsqu'il rencontre une expression, il va dans la bibliothèque et modifie la valeur.
alert(a); //未定义
var a=1; //在库里面a的值由未定义换成1
function fn1(){alert(2);}

alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a);  //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function
Le processus du code ci-dessus lors du pré-analysage est le suivant : 1) Pré-analyse : var paramètres de fonction ... lire var a = 1 => a est undefined ; lire function a(){alert(2);} => a = function a(){alert(2);}. Lorsqu'une variable et une fonction ont le même nom, seule la fonction est conservée : a = function(){alert(2);}. Lire var a = 3 => a est undefined ; ici, il a le même nom que la fonction a ci-dessus, donc il conserve toujours a = function(){alert(2);}. Lire function a(){alert(4);} => a = function a(){alert(4);}. Il a le même nom que le précédent a = function(){alert(2);}. Selon le contexte, la fonction postérieure écrase la précédente, donc la pré-analyse ne conserve que a = function(){alert(4);}. 2) Interpréter le code ligne par ligne. Lorsqu'une expression est lue, l'expression peut modifier la valeur pré-analysée. Les paramètres peuvent aussi modifier la valeur pré-analysée. Lorsqu'un appel de fonction est rencontré, deux choses doivent être faites : la pré-analyse et l'analyse du code ligne par ligne. Une déclaration de fonction n'est pas une expression et ne change pas la valeur lors de la pré-analyse.

Portée

  • Les fonctions et variables déclarées à l'intérieur de la balise <script> sont des fonctions globales et des variables globales (mais l'analyseur JS doit d'abord finir de traiter un bloc, puis traiter l'autre bloc).De haut en bas
  • Fonction : une fonction est aussi une portée. Elle effectue d'abord une recherche, puis elle exécute.De l'intérieur vers l'extérieur
  • Objet {}
Chaîne de portées: le processus de saut d'une portée enfant à une portée parente
<script>
alert(a); //报错：a is not defined。因为在预解析里面压根就没有a这个东西
</script>

...

<script>
var a = 1;
</script>

<script>
alert(a); //不报错，会弹出undefined。因为预解析里面有a这个东西，但是由于执行的时候，还没有改变a的值，因此a的值为undefined
var a = 1;
</script>

...

<script>
</script>

<script>
var a = 1; //预解析里面存了a，并且a的值存为1
</script>

...

<script>
alert(a); //弹出1
</script>

var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    var a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，先预解析出一个局部的 a 是未定义（局部的a与全局的a一点关系都没有）；然后读代码，alert(a)弹出的是undefined；然后继续执行，遇到表达式，将局部的变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1
La simulation du code ci-dessus dans l'analyseur JS est la suivante : 1) Pré-analyse : paramètres de fonction var... a = ... fn1 = function fn1(){ alert(a); var a=2; } 2) Analyser le code ligne par ligne. Un autre morceau de code :
var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，没有任何函数和变量声明，因此预解析里面没东西；然后读代码，alert(a)，在局部没有找到预解析的a，于是从子级作用域跳到父级作用域去找，找到了全局的a，所以弹出的是全局变量a的值1；然后继续执行，遇到表达式，将全局变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为2

var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到参数a，因此预处理里面有个局部的a是未定义。；然后读代码，alert(a)，弹出的是局部的a为undefined；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1

var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(a); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到局部参数a，因此预处理里面有个局部的a是未定义。；然后读代码，读到第一行function fn1(a)，这时有参数进来，把全局的a的值1赋给了局部变量a，这时局部变量a的值变为1，alert(a)，弹出的是局部的a为1；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1

Vouloir obtenir la valeur à l'intérieur d'une fonction

  • Méthode 1 : utilisez une variable globale à l'intérieur de la fonction. Car les fonctions peuvent lire et écrire des variables globales. Voir le code ci-dessous :
var str = '';
function fn1(){
    var a = '大鸡腿~';
    str = a;
}
fn1();
  • Méthode 2 : appelez une fonction globale à l'intérieur de la fonction, et implémentez-la en passant des paramètres. Voir le code ci-dessous :
function fn2(){
    var a = '99999999克拉钻石';
    fn3(a);
}
fn2();
function fn3(a){ //注意这个a是fn3里面的，与fn2里面的a毫无关系
    alert(a);
}
RemarquesLes accolades d'une fonction forment une portée ; if(){} n'est pas une portée ; for(){} n'est pas non plus une portée. Seules les portées sont pré-analysées d'abord, puis exécutées. Les accolades de if et for n'ont pas de processus de pré-analyse.
alert(a); //弹出undefined。这说明if大括号中的a已经在全局就被预解析了，因此if的大括号并不是作用域
if(true){
    var a=1;
}
Cependant, notez :
alert(fn1); //在火狐浏览器里面会报错说fn1 is not defined。但是在chrome浏览器里可以正常弹出fun1函数。

if(true){
    var a = 1;
    function fn1(){
        alert(123);
    }
}
Seul Firefox, lors de la pré-analyse, ne peut pas pré-analyser les fonctions entre les parenthèses de if ou for. Par conséquent, il y a des problèmes de compatibilité. Donc, si vous voulez définir des fonctions globales ou des variables globales, essayez de ne pas les mettre à l'intérieur des accolades de if et for ; mettez-les à l'extérieur des accolades.
for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //弹出3。因为必须for循环全部执行完成之后，aBtn才能够点击。但是for循环执行完了，外面的i已经变成3；但是在function里面又没有i，自然找到了外面的i，也就是3.
    }
}

for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //这时候弹出的就不是3了，是undefined
        
        for(var i=0; i<aBtn.legnth; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}

for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //下面for循环的括号中的var删去了，function里面又找不到i了，所以到父级找到了i，又是个3。因此，此处会弹出3.
        
        for (i = 0; i<aBtn.length; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}

Opérateurs

Arithmétique

  • + Addition
  • - Soustraction
  • * Multiplication
  • / Division
  • % Modulo (reste)

Affectation

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

Relationnel

  • <
  • >
  • <=
  • >=
  • ==
  • !=
  • ===
  • !===

Logique

  • && ET
  • || OU
  • ! NON

Précédence des opérateurs

  • Parenthèses

Contrôle du flux du programme

Condition

  • if
  • switch (case break default)
  • ?:

Boucle

  • while
  • for

Break, Skip

  • break
  • continue

Ce qui est vrai, ce qui est faux

  • Vrai : nombres non nuls, chaînes, true, fonctions, objets : [] {} éléments qui peuvent être trouvés
  • Faux : zéro, NaN, chaîne vide, false, null, undefined, éléments introuvables

Valeur de retour d'une fonction - return expliqué et appliqué

  • valeur de retour de return : nom de fonction + parenthèses (par ex., fn1()) équivaut à obtenir la valeur après return à l'intérieur de cette fonction
  • Toutes les fonctions ont une valeur de retour par défaut : undefined
  • Peut retourner : nombres, chaînes de caractères, booléens, fonctions, objets (éléments, [], {}, null), undefined
  • Tout code après return n'est plus exécuté
alert fn1();
function fn1(){
    return function(){
        alert(1);
    }
}
Ce qui s'affiche à ce moment est : function(){alert(1);}
alert fn1()();
function fn1(){
    return function(){
        alert(1);
    }
}
Ce qui s'affiche à ce moment est 1, qui est le résultat de l'exécution de la fonction anonyme retournée par return.
alert fn1()(10);
function fn1(){
    return function(a){
        alert(a);
    }
}
Ce qui s'affiche à ce moment est 10.
alert fn1(20)(10);
function fn1(a){
    return function(b){
        alert(a + b);
    }
}
Ce qui s'affiche à ce moment est 30.

arguments

fn1(1, 2, 3); //paramètres réels — les paramètres réellement passés function fn1(a, b, c) //paramètres formels — formellement, les noms a, b, c représentent 1, 2, 3 Si vous n'écrivez pas de paramètres formels, 1, 2, 3 peuvent quand même être passés, tous stockés dans arguments. function fn1(){ //arguments => [1, 2, 3] — la collection des paramètres réels (pas un tableau, mais semblable à un tableau, possède length, et peut aussi utiliser des indices pour trouver les données) } Lorsque le nombre de paramètres de fonction ne peut pas être déterminé, utilisez arguments :
alert(sum(1,2,3));
function sum(){
    var n=0;
    for(var i=0; i<arguments.length; i++){
        n += arguments[i];
    }
    return n;
}

var a=1;
function fn2(a){ //arguments的某个数值就相当于某个形参
    arguments[0]=3;
    alert(a); //弹出3
    var a=2;
    alert(arguments[0]); //弹出2
}
fn2(a);
alert(a); //弹出1

Application de currentStyle et getComputedStyle

  • getComputedStyle récupère le style calculé par l'ordinateur (navigateur), mais n'est pas compatible avec IE6, 7, 8
  • La méthode currentStyle est compatible avec IE6, 7, 8, mais pas avec les navigateurs standards
Méthode de détection de propriété et méthode de détection de version pour résoudre les problèmes de compatibilité entre navigateurs ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~Remarques :
  • Si vous utilisez la méthode ci-dessus pour récupérer un style composé d'un élément, tel que background, alors ne l'utilisez pas pour le récupérer, car il y a des problèmes de compatibilité entre différents navigateurs. Utilisez la méthode ci-dessus pour récupérer un style simple, et ne l'utilisez pas pour récupérer des styles composés.
  • Lorsque vous utilisez les méthodes ci-dessus, veillez à ne pas saisir d'espaces supplémentaires
  • Lorsque vous utilisez les méthodes ci-dessus, ne récupérez pas les styles qui n'ont pas été définis, car ils sont incompatibles entre navigateurs
  • Avant Firefox 4.0, il y avait un bug : si getComputedStyle n'est pas suivi d'un paramètre, des problèmes se produisent. Certaines personnes écrivent donc getComputedStyle(obj, false); ce false sert à résoudre ce bug. Ce bug peut aussi être écrit sous la forme 0, ou n'importe quel autre paramètre. Cependant, les navigateurs Firefox actuels sont relativement récents, donc ce problème n'est pas très courant maintenant.

Minuteur

setInterval

setInterval(function, milliseconds); s'exécute de façon répétée (moteur)
var i=0;
function fn1(){
    document.title = i;
    i++;
}
setInterval(fn1, 1000);
Méthodes d'invocation d'événement
  • fn1(); appel direct
  • document.onclick = fn1; invocation d'événement
  • setInterval(fn1, 1000); appel de fonction
clearInterval 
var timer = setInterval(函数, 毫秒); //重复执行
clearInterval(timer); //清除定时器

var i=0,
    timer = null;
function fn1(){
    i++;    
    document.title = i;
    
    if(i===10){
        clearInterval(timer);
    }
}
timer = setInterval(fn1, 1000);
RemarqueSi le minuteur est contrôlé par un événement, comme l'onclick d'un bouton, vous devez alors suivre un principe : fermer d'abord, puis ouvrir. Cela peut éviter de définir plusieurs fois des minuteurs en cliquant plusieurs fois de suite sur le bouton. De plus, clearInterval() peut s'exécuter sans problème, que ce qui est renseigné soit un minuteur, null ou undefined.

setTimeout

var timer = setTimeout(function, milliseconds); s'exécute une fois (bombe) clearTimeout(timer);

Petite application de minuterie (encapsulation de fonction et fonction de rappel)

Encapsulation de fonction de doMove

<input id="btn1" type="button" value="走" />
<div id="div1"></div>

var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

//doMove函数封装

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长
        
        if ( speed > target &amp;&amp; dir > 0 ||  speed < target &amp;&amp; dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn &amp;&amp; endFn();
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { 
    return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
}

Encapsulation de fonction de Shake

<img id="img1" src="img/4.jpg.html" />
<img id="img2" src="img/5.jpg.html" />

window.onload = function () {
    var oImg1 = document.getElementById('img1');
    var oImg2 = document.getElementById('img2');
    
    oImg1.onclick = fnShake;
    oImg2.onclick = fnShake;
    
    function fnShake() {
        var _this = this;
        shake( _this, 'left', function(){
            shake( _this, 'top' );
        });
    }

};

function shake ( obj, attr, endFn ) {
    var pos = parseInt( getStyle(obj, attr) ); //有隐患 需要解决
    var arr = [];           // 20, -20, 18, -18 ..... 0
    var num = 0;
    var timer = null;
        
    for ( var i=20; i>0; i-=2 ) {
        arr.push( i, -i );
    }
    arr.push(0);
        
    clearInterval( obj.shake );
    obj.shake = setInterval(function (){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if ( num === arr.length ) {
            clearInterval( obj.shake );
            endFn &amp;&amp; endFn();
        }
    }, 50);
}

Objet d'heure système

new Date(); //objet représentant l'heure système actuelle
var myTime = new Date(); //myTime的类型是object
var iYear = myTime.getFullYear(); //获得年份
Méthodes associées (les suivantes renvoient toutes des types numériques) :
  • getFullYear()
  • getMonth()
  • getDate()
  • getDay()
  • getHours()
  • getMinutes()
  • getSeconds()
Notes :
  • Pour le mois obtenu avec getMonth(), janvier commence à 0. Par conséquent, par exemple, si le mois actuel est mai, getMonth() renvoie 4.
  • Le jour de la semaine obtenu avec getDay() est une valeur numérique. Si la date actuelle est un dimanche, il renvoie le nombre 0.

Paramètres de l'objet Date

  • Forme numérique : new Date(2013, 4, 1, 9, 48, 12); //année mois jour heure minute seconde, notez que le mois commence à 0.
var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0);
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';
  • Jours : Math.floor(t/86400)
  • Heures : Math.floor(t%86400/3600)
  • Minutes : Math.floor(t%86400%3600/60)
  • Secondes : t%60
  • Forme chaîne : new Date('June 10, 2013 12:12:12');
var iNow = new Date();
var iNew = new Date('November 10, 2013 21:56:0');
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';

Horodatage

getTime(); renvoie le nombre de millisecondes depuis le 1er janvier 1970, 00:00:00.000 jusqu'à présent

Opérations sur les chaînes

Classe de récupération de chaînes, encapsulant une méthode pour détecter les nombres

  • .lengthLes espaces comptent aussi dans la longueur
  • .charAt()Trouver une sous-chaîne. Si rien n'est écrit entre les parenthèses, la valeur par défaut est de trouver le 0e. Si cela dépasse la longueur de la chaîne moins 1, elle renvoie une chaîne vide
  • .charCodeAt()Obtenir l'encodage Unicode du caractère spécifié. Si rien n'est écrit entre les parenthèses, la valeur par défaut est d'obtenir la valeur Unicode du 0e caractère. Le minimum entre les parenthèses est 0, et le maximum est la longueur de la chaîne moins 1
  • String.fromCharCode();Renvoie un caractère en fonction de son encodage de caractère. Par exemple, String.fromCharCode(22937); renvoie le caractère "妙". Pour obtenir plusieurs caractères, utilisez des virgules pour séparer différents encodages de caractères, par exemple : String.fromCharCode(22937, 21916); renvoie les deux caractères "妙味". 0～9 => 48～57; a~z => 97~122; A~Z => 65~90
alert(detectNum(' 1a23d456'));
function detectNum(str){
    var n = 0;
    for(var i=0; i<str.length; i++){
        n = str.charAt(i);
        if( n < 48 || n > 57 ) {
            return false;
        }
    }
    return true;
}

indexOf、lastIndexOf

  • .indexOf()Renvoie la position d'un caractère ou d'une chaîne dans la chaîne entière. str.indexOf('m', 5) signifie commencer à la position 5 dans la chaîne str et rechercher vers l'avant la position du caractère m. Si indexOf() est utilisé pour rechercher et que cela est introuvable, -1 est renvoyé. Il recherche de gauche à droite. Si le deuxième paramètre est négatif, il est traité comme 0 par défaut.
var str = 'Example - 学的不仅是技术，更是梦想！'；
var s = 'Example';
var i = 0;

for ( ; str.indexOf(s, i) != -1; ){
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}

ou 

while(str.indexOf(s, i) != -1) {
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}
  • .lastIndexOf()Recherche de droite à gauche. Il peut également prendre un paramètre numérique, indiquant à partir d'où commencer la recherche vers l'arrière.

Classe de comparaison, classe de découpage

  • La comparaison de taille de chaînes compare l'encodage Unicode du caractère à la position 0 des chaînes.
  • .substring(n, m)Extrait les caractères de la n-ième position à la m-ième position. S'il n'y a pas de m, la valeur par défaut est d'extraire jusqu'à la dernière position. str.substring(2, 0); et str.substring(0, 2); ont le même résultat. substring peut vérifier la taille des deux paramètres à l'intérieur. Si le second paramètre est plus petit que le premier, il inverse automatiquement les deux paramètres. S'il n'y a aucun paramètre dans les parenthèses, cela équivaut à extraire de la position 0 à la dernière position, c'est-à-dire la chaîne entière. Si un paramètre est négatif, il est traité comme 0.
  • .slice(n, m)str.slice(0, 2) et str.slide(2, 0) ont des résultats différents. Ce dernier ne peut pas trouver de résultat car la méthode .slice() ne vérifie pas la taille des paramètres internes et n'échange pas leurs positions. str.slice(-2); extrait de la dernière position à l'avant-dernière position. -1 représente le dernier caractère de la chaîne. str.slice(-4, -2); extrait la chaîne de la quatrième position en partant de la fin à l'avant-dernière position.

Conversion de casse, découpage de chaînes avec split

  • .toUpperCase()Convertir en majuscules
  • .toLowerCase()Convertir en minuscules
  • .split()Diviser une chaîne en tableau. var str = 'www.miaov.com'; str.split('.'); => ["www", "miaov", "com"]; var str1 = 'leo'; str1.split(); => ['leo']; str2 = 'leo'; str2.split(''); => ["l", "e", "o"]; var str3 = '/www.miaov.com/'; str3.split('/'); => ["", "www.miaov.com", ""]; var str4 = '2013-11-29-23-07'; str4.split('-', 3); => ["2013", "11", "29"]
  • .join()Méthode utilisée pour assembler les éléments d'un tableau. var arr = ['aa', 'bb', 'cc]; arr.join(); => 'aa,bb,cc'. Si rien n'est écrit entre les parenthèses de .join(), la séparation par défaut se fait par des virgules. arr.join(''); => 'aabbcc'; arr.join('-'); => 'aa-bb-cc'

Résumé des opérations sur les chaînes

var str = 'Example-www.example.com';

str.charAt(1); // 3
str.charCodeAt(1); // 51
String.fromCharCode(119, 51); // w3

str.indexOf('c', 3); // 4
str.lastIndexOf('o'); // 25

'1000' < '2' // true
'1000' > 2 // true

str.substring(0, 4); // Example
str.slice(-3); // .cc

str.toUpperCase(); // Example-WWW.example.com
str.toLowerCase(); // Example-www.example.com

str.split('.', 2); // ["Example-www", "example"]

var arr = ['www', 'example', 'com'];
arr.join('.'); // www.example.com

Opérations sur les tableaux

Format et syntaxe des données JSON

var json = { name: 'leo', age: 32};
alert(json.name);

var imgData = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};
alert(imgData.url[1]);

var json2 = { 'name': 'miaov' }; //推荐的安全格式的写法
alert(json2.name);
alert(json2['name']);
json2.name = 'abc';
json2['name'] = '妙味'; //注意中括号里面要用引号

var arr = [{'name': 'TM', 'age': 23}, {'name': 'leo', 'age': 32}];
alert(arr[0].name);

Boucle for-in, parcours de JSON

var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
    alert(attr);
    alert(json4[attr]);
}

var json5 = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};

for(var attr in json5) {
    for(var i=0; i<json5[attr].length; i++){
        alert(json5[attr][i]);
    }
}
for-in peut aussi parcourir les propriétés d'un objet :
var str = '';
var num = 0;
for(var attr in window){
    str += num + '. ' + attr + ' : ' + window[attr] + '<br/>';
    num ++;
}
document.body.innerHTML = str;
Les tableaux peuvent aussi être parcourus avec for-in :
var arr = ['a', 'b', 'c'];
for(var i in arr){
    alert(arr[i]);
}

Vidage de tableaux et efficacité du vidage de tableaux

// var arr = [1, 2, 3];
// var arr = new Array(1, 2, 3);

var arr = new Array(4);
alert(arr.length); // 4 在new Array()里面写了一个数字，就是定义了arr的长度

var arr = [1, 2, 3];
arr.length = 1; //数组的length属性是可写的
alert(arr);

var arr = [1, 2, 3];
arr.length = 0; //快速清空数组arr
ou 
arr = []; //通过重新赋值来清空数组，效率更高

var str = 'aaaaa';
str.length = 1;
alert(str); // 'aaaaa'
//字符串的length属性不可写，但是数组的length属性可写

Opérations sur les tableaux

Ajout
  • méthode push : arr.push(); ajoute du contenu à la dernière position du tableau. La méthode .push() a une valeur de retour, qui est la nouvelle longueur du tableau.
  • méthode unshift : arr.unshift(); ajoute du contenu tout au début du tableau. La valeur de retour est la nouvelle longueur du tableau (IE6 et IE7 ne prennent pas en charge la valeur de retour d'unshift).
Suppression
  • méthode pop : arr.pop(); supprime le dernier élément du tableau. La valeur de retour est la valeur supprimée.
  • méthode shift : arr.shift(); supprime le premier élément du tableau. La valeur de retour est la valeur supprimée.
Astuces 
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为：['Leo', '钟毅', '张森', '杜鹏', 'TM']
ou 
arr.push(arr.shift()); //数组变为：['钟毅', '张森', '杜鹏', 'Leo', 'TM']
méthode splice
  • La méthode splice a trois fonctions : suppression, remplacement et ajout.
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位，替换1个，替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里，删除0个，添加了一个'李贤'到了第1位，'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。

Déduplication de tableau

var arr = [1, 2, 2, 4, 2];
for ( var i=0; i<arr.length; i++ ) {
    for ( var j = i+1; j<arr.length; j++) {
        if( arr[i]==arr[j] ){
            arr.splice( j, 1 );
            j--;
        }
    }
}
tri sort 
var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序

var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况

// arr2. sort(function( a, b ){
    return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76

// arr2. sort(function( a, b ){
    return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
Autres méthodes de tri :
  • Tri rapide
  • Tri de Shell
  • Tri à bulles
  • Tri fusion
  • Tri par sélection
  • Tri par insertion
var arrWidth = ['345px', '23px', '10px', '1000px'];
arrWidth.sort(function(a, b){
    return parseInt(a) - parseInt(b);
}); // ['10px', '23px', '345px', '1000px']
Tri aléatoire 
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(function(a, b){
    return Math.random(); - 0.5;
});

Nombres aléatoires et processus de raisonnement de la formule aléatoire

Math.random(); renvoie un nombre aléatoire entre 0 et 1 Si vous voulez renvoyer aléatoirement un entier entre 0 et 1, vous pouvez utiliser la méthode d'arrondi : Math.round(Math.random()); // Remarque : Math.floor ne peut pas être utilisé ici Si vous voulez renvoyer un nombre aléatoire entre 0 et 10 : Math.round(Math.random() * 10); // Renvoie un entier aléatoire entre 0 et 10 Renvoyer un nombre aléatoire entre 20 et 100 : Math.round( Math.random()*80 + 20 ); // Renvoie un entier aléatoire entre 5 et 10 Si vous voulez renvoyer un entier aléatoire entre x et y, vous pouvez écrire : Math.round( Math.random() * (y - x) + x ); Pour renvoyer un entier de 0 à x, vous pouvez écrire : Math.round( Math.random() * x ); Pour renvoyer un entier de 1 à x, vous pouvez écrire : Math.ceil( Math.random() * x ); // Math.ceil() arrondit à l'entier supérieurméthode concatLa méthode concat est utilisée pour concaténer des tableaux.
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
méthode reverseLa méthode reverse inverse les positions dans un tableau et modifiera le tableau d'origine.
var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]

var str = 'abcdef';
alert(str.split('').reverse().join('')); //'fedcba'

Références

Pour plus de tutoriels, vous pouvez consulter notre :Tutoriel JavaScript。