1. Instruction de contrôle de flux JS
(1), jugement if
L'instruction if exécute le code correspondant en fonction de la condition étant vraie.
L'instruction if...else est le code après if est exécuté lorsque la condition spécifiée est vraie, et le code après else est exécuté lorsque la condition n'est pas vraie.
If...else Les instructions imbriquées sélectionnent l'un des blocs de code correspondants à exécuter dans plusieurs conditions.
L'instruction if convient à tout type de données et peut gérer des relations logiques complexes.
(2), instruction switch
Lorsqu'il y a de nombreux choix, switch est plus pratique à utiliser que if...else Il a une structure simple et est spécialement conçu pour des choix multiples, mais il ne peut gérer que plusieurs relations logiques énumérées. Cette déclaration peut également être complétée en utilisant if, cela dépend des préférences personnelles.
Comment fonctionne l'instruction switch : créez d'abord une expression, généralement une variable, puis comparez la valeur de l'expression avec la valeur de chaque cas dans l'instruction switch. Si elles correspondent, l'instruction après le cas est. exécutée Si elle ne correspond à aucune valeur de cas, l'instruction après la valeur par défaut sera exécutée. Lors de l'utilisation d'une instruction switch, break doit être utilisé après chaque instruction case pour sortir de la boucle et empêcher l'exécution du cas suivant.
var d = new Date().getDay(); //如果今天不是周末，则提示默认消息
switch (d){
case 6:
alert("今天是星期六");
break;
case 0:
alert("今天是星期天");
break;
default:
alert("同志尚未努力，革命仍需成功。");
}Copier après la connexion
Lors de la comparaison, l'instruction switch utilise la congruence au lieu de l'égalité, vous devez donc prêter une attention particulière lors de la correspondance des chaînes et des nombres.
//使用switch语句将字符串与数字做比较
//返回：不等于，执行default语句
var n = '5'; switch(n){
case 5:
alert('等于，执行case语句');
break;
default:
alert('不等于，执行default语句'); }
//使用if语句将字符串与数字做比较
//返回：等于
var n = '2'; if(n == 2){
alert('等于');
}else{
alert('不等于');
}
//将case的值改为字符串再做比较
//返回：等于，执行case语句
var n = '2'; switch(n){
case '2':
alert('等于，执行case语句');
break;
default:
alert('不等于，执行default语句');
}
//使用全等再做比较
//返回：不等于
var n = '2';
if(n===2){
alert('等于'); }else{
alert('不等于'); }Copier après la connexion
(3), boucle for
Beaucoup de choses ne sont pas faites une seule fois, mais doivent être faites à plusieurs reprises. Par exemple, imprimez 10 copies d'un document, une copie à la fois, et répétez cette action jusqu'à ce que l'impression soit terminée. Ce genre de chose se fait à l'aide d'une boucle for. Une boucle consiste à exécuter à plusieurs reprises un morceau de code avec une valeur différente à chaque fois.
Ce qui suit est une petite application d'une boucle for. Supposons qu'il y ait 1.2.3 ... 10 RMB avec des dénominations différentes. Calculez le nombre total de RMB.
var sum = 0; for(var rmb=1; rmb<=10; rmb++){
sum += rmb; } alert('一共有: ' + sum + '元'); //返回：一共有：55元Copier après la connexion
(4), boucle while
La boucle while a la même fonction que la boucle for Tant que la condition est spécifiée comme vraie, la boucle peut être exécutée jusqu'à ce que la boucle for soit exécutée. la condition n’est plus remplie.
//使用while循环输出5个数字
var i = 0; //第一部分：初始化，给一个初始的值，让i从0循环
while(i < 5){ //第二部分：条件。成立继续循环，不成立退出
alert(i); //第三部分：语句
i++; //第四部分：自增
} //while循环使用比较复杂，使用for循环更简洁。
//for(初始化;条件;自增){语句}Copier après la connexion
(5), boucle do...while
La structure principale de la boucle do...while et de la boucle while est fondamentalement la même, mais la boucle vérifiera si le la condition est d'exécuter le bloc de code une fois avant qu'il ne soit vrai et de répéter la boucle si la condition est vraie. Il y a un léger problème avec cette boucle, car elle exécute d'abord le code puis détermine les conditions. Si les conditions sont inappropriées, elle entrera dans une boucle infinie, provoquant le crash du navigateur.
/*
语法： do{ 执行语句 } while(条件); */
//操作有风险，尝试需谨慎
//若将循环条件改为：num <= 6 会导致浏览器崩溃
var num = 6; do{ document.write("数字:" + num + "<br>"); num -= 1; } while(num > 0);Copier après la connexion
(6), instruction de gestion des erreurs JS
L'instruction try...catch est utilisée pour la gestion des exceptions. L'instruction try est utilisée pour détecter les erreurs dans les blocs de code et indiquer le segment de code qui doit être traité. L'instruction catch est utilisée pour gérer les erreurs générées dans l'instruction try. L'instruction try est exécutée en premier Si une erreur se produit pendant l'opération, le code de l'instruction try sera ignoré pour exécuter l'instruction dans catch. Si aucune erreur ne se produit, les instructions contenues dans catch ne sont pas exécutées. Généralement, les instructions try...catch peuvent être utilisées pour gérer les erreurs prévisibles. L'instruction
try{
document.write("开始执行try语句" + '<br>');
document.write("还没抛出错误" + '<br>');
alert(x); //抛出错误
alert('123'); //没被执行
} catch(e){
document.write("捕捉到错误，开始执行catch语句" + '<br>');
document.write("错误类型: " + e.name + '<br>');
document.write("错误信息: " + e.message);
alert('x'); }Copier après la connexion
throw peut être utilisée pour créer des erreurs personnalisées. Le terme officiel est : créer ou lever une exception. Syntaxe : lancer 'Objet d'exception'.
L'instruction throw peut être utilisée avec l'instruction try...catch pour contrôler le flux du programme et générer des messages d'erreur précis.
//输入0到10之间的数字，如果输入错误，会抛出一个错误，catch会捕捉到错误，并显示自定义的错误消息。
<body>
<input id="txt" type="text"/>
<span id="demo" style="font-weight:bold;"></span><br>
<input type="button" value="检测输入" onclick="error()">
<script> function error(){
try{
var x = document.getElementById("txt").value;
var y = document.getElementById("demo");
y.style.color = 'red';
if(x == '') throw '输入不能为空';
if(isNaN(x)) throw '请输入数字';
var num = [7,8,9];
for(var i=0; i<num.length; i++){
if(x == num[i]){
throw '该数字已经存在';
}
}
if(x == 0){
throw '输入不能为0';
}
else if(x > 10){
throw '数字太大了';
}
else if(x <= 3){
throw '数字太小了';
}
else{
y.style.color = 'green';
y.innerHTML = 'OK';
}
}
catch(e){
y.innerHTML = '错误提示：' + e + '！';
}
}
</script>
</body>Copier après la connexion
(7), Sortir de la boucle
L'instruction break est utilisée pour sortir de la boucle actuelle et quitter directement la boucle pour exécuter le code suivant, c'est-à-dire terminer la boucle entière sans faire d’autres jugements. L'instruction continue saute uniquement hors de cette boucle et continue d'exécuter la boucle suivante, c'est-à-dire termine cette boucle, puis détermine s'il faut exécuter la boucle suivante. return peut terminer l’exécution du corps de la fonction et renvoyer une valeur.
for(var i=0; i<6; i++){ if(i == 3) break; //当i=3时跳出整个循环，不再执行循环
alert(i); //返回：0,1,2
}
for(var i=0; i<6; i++){ if(i == 3) continue; //当i=3时跳出本次循环，继续执行后面循环
alert(i); 返回：0,1,2,4,5
}Copier après la connexion
2. JSON
JSON (JavaScript Object Notation) : notation d'objet JS. JSON est principalement utilisé pour stocker et échanger des informations de données, similaire à XML, mais comparé à XML, JSON est plus facile à lire et à écrire, et plus facile à analyser.
La syntaxe JSON est un sous-ensemble de la syntaxe de représentation d'objet JS : les données sont présentées dans des paires clé-valeur séparées par des virgules, les accolades contiennent des objets et les crochets contiennent des tableaux.
Le format d'écriture de la syntaxe JSON : "name" : "value", "name" : "value"
Le nom et la valeur sont contenus entre guillemets doubles et séparés par des deux-points. des données sont séparées par des virgules. C'est facile à comprendre, contrairement à name = "value" en JS.
Les valeurs JSON peuvent être : des nombres (y compris des entiers et des décimales), des chaînes (entre guillemets), des valeurs booléennes (vrai ou faux), des objets (entre accolades), Tableau (entre crochets) ou null.
JSON est du texte brut, généralement utilisé par le serveur pour transférer des données vers la page Web, obtenir des données JSON du serveur, puis utiliser les données de la page Web.
(1), objet JSON
var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值：
alert(json.a);
//修改第二项的值
alert(json.b = "xyz");
//返回第三项数组中第一项的值
alert(json.c[0]);Copier après la connexion
(2), JSON et tableau
Le même point :
Les deux peuvent renvoyer une certaine valeur via indice La valeur de l'article. Vous pouvez utiliser des boucles. Bien que JSON n'ait pas d'attribut de longueur et ne puisse pas utiliser de boucles for, vous pouvez utiliser des boucles for...in pour effectuer les mêmes actions que les boucles for.
Les tableaux peuvent également utiliser des boucles for...in, mais il est préférable d'utiliser des boucles for. La boucle for...in parcourt les propriétés de l'objet, pas les éléments du tableau.
Différences :
JSON 的下标是字符串，数组的下标为数字。JSON 没有 length 属性，数组有该属性。
var arr = [12,5,7]; var json = {"a":12,"b":5,"c":7};
alert(arr[0]); //返回：12
alert(json["a"]); //返回：12
alert(arr.length); //返回：3
alert(json.length); //返回：undefined
//数组for循环
for(var i=0; i<arr.length; i++){ alert('第' + (i+1) + '个数据是：' + arr[i]); } alert(typeof i); //返回：number
//数组使用for...in循环
for(var i in arr){ alert('第' + (i+1) + '个数据是：' + arr[i]); } alert(typeof i); //返回：string
//JSON使用for...in循环
for(var i in json){ alert('第' + i + '个数据是：' + json[i]); }Copier après la connexion
(3)、JSON 数组对象
<body>
<p>
姓 名: <span id="fname"></span><br>
性 别: <span id="gender"></span><br>
员工号: <span id="num"></span><br>
修改姓名: <span id="lname"></span><br>
</p>
<script> var staff = [ {"name" : "小明", "sex" : "男", "id" : 1},
{"name" : "小白", "sex" : "男", "id" : 2},
{"name" : "小红", "sex" : "女", "id" : 3} ];
var x = document.getElementById("fname");
var y = document.getElementById("gender");
var z = document.getElementById("num");
var n = document.getElementById("lname"); //访问对象数组中第一项的值：
x.innerHTML = staff[0].name; y.innerHTML = staff[0].sex; z.innerHTML = staff[0].id;
//修改数据：
n.innerHTML = staff[1].name = '大白'; </script>
</body>Copier après la connexion
(4)、JSON 字符串对象
var str = '{"name":"小明", "sex":"男", "age":21}';
var toObj = JSON.parse(str); //JSON字符串转换为JSON对象alert(toObj.name);
alert(typeof toObj); //返回：object
var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json); //JSON对象转换为JSON字符串
alert(toStr); //返回字符串alert(json.age);
alert(typeof toStr); //返回：stringCopier après la connexion
(5)、JSON 应用
当需要表示一组数据时，JSON 不但能够提高可读性，而且还可以减少复杂性。JSON 能够表示多个值，每个值又可包含多个值，例如要表示一个用户列表信息，就可以将所有信息存储在一个变量中，分成多项，每项中又可分成多个条目，每个条目中记录一个用户的信息。
var userName = {
"first": [{
"name": "路飞",
"sex": "男",
"tel": "aaa"
}, {
"name": "索罗",
"sex": "男",
"tel": "bbb"
}, {
"name": "娜美",
"sex": "女",
"tel": "ccc" }],
"second": [{
"name": "卡卡西",
"sex": "男",
"tel": "ddd"
}, {
"name": "鸣人",
"sex": "男",
"tel": "fff"
}, {
"name": "佐助",
"sex": "男",
"tel": "eee"
}, {
"name": "皱田",
"sex": "女",
"tel": "sss"
}],
"third": [{
"name": "小明",
"sex": "男",
"tel": "xxx"
},{
"name": "小红",
"sex": "女",
"tel": "zzz"
}]
};
//获取用户的信息：
alert(userName.first[1].name + ' \n ' + userName.first[1].sex + '\n '+ userName.first[1].tel);
alert(userName.second[3].name + ' \n ' + userName.second[3].sex +' \n '+ userName.second[3].tel);
alert(userName.third[0].name + ' \n ' + userName.third[0].sex + ' \n '+ userName.third[0].tel);Copier après la connexion
说到 JSON，就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域（网站）访问数据需要一个特殊的技术 (JSONP) 呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略，一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通，而 HTML 的
Tutoriels populaires
Plus>
Recommandations populaires
Derniers téléchargements
Plus>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
