1. JS 흐름 제어문
(1) if 판단
if 문은 조건이 참인 경우에만 해당 코드를 실행합니다.
if...else 문은 지정된 조건이 true일 때 if가 실행되는 이후의 코드이고, 조건이 true가 아닐 때 else가 실행되는 이후의 코드입니다.
If...else 중첩 문은 여러 조건에서 실행할 해당 코드 블록 중 하나를 선택합니다.
if 문은 모든 유형의 데이터에 적합하며 복잡한 논리적 관계를 처리할 수 있습니다.
(2), switch 문
선택사항이 많을 때 if...else보다 switch를 사용하는 것이 더 편리하며, 구조가 간단하고 다중 선택을 위해 특별히 설계되었습니다. 그러나 다중 열거된 논리적 관계만 처리할 수 있습니다. 이 문은 개인 취향에 따라 if를 사용하여 완성할 수도 있습니다.
switch 문의 작동 방식: 먼저 일반적으로 변수인 식을 만든 다음 식의 값을 switch 문의 각 Case 값과 비교합니다. 일치하는 경우 Case 뒤의 문은 다음과 같습니다. Case 값과 일치하지 않으면 default 이후의 문이 실행됩니다. switch 문을 사용할 때 루프를 중단하고 다음 Case가 실행되지 않도록 하려면 각 Case 문 다음에 break를 사용해야 합니다.
var d = new Date().getDay(); //如果今天不是周末，则提示默认消息
switch (d){
case 6:
alert("今天是星期六");
break;
case 0:
alert("今天是星期天");
break;
default:
alert("同志尚未努力，革命仍需成功。");
}switch 문은 비교할 때 동등성 대신 일치성을 사용하므로 문자열과 숫자를 일치시킬 때 특별한 주의가 필요합니다.
//使用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('不等于'); }(3), for loop
많은 일이 한 번만 수행되는 것이 아니라 반복적으로 수행되어야 합니다. 예를 들어 문서 10장을 한 번에 한 장씩 인쇄하고 인쇄가 완료될 때까지 이 작업을 반복합니다. 이런 종류의 작업은 for 루프를 사용하여 수행됩니다. 루프는 매번 다른 값을 가진 코드 조각을 반복적으로 실행하는 것입니다.
다음은 for 루프의 작은 응용 프로그램입니다. 1.2.3 ... 10 RMB가 있고 총 몇 개가 있는지 계산합니다.
var sum = 0; for(var rmb=1; rmb<=10; rmb++){
sum += rmb; } alert('一共有: ' + sum + '元'); //返回：一共有：55元(4), while 루프
while 루프와 for 루프는 동일한 기능을 가지며, 지정된 조건이 true인 한, 조건이 no가 될 때까지 루프를 실행할 수 있습니다. 더 오랫동안 만났습니다.
//使用while循环输出5个数字
var i = 0; //第一部分：初始化，给一个初始的值，让i从0循环
while(i < 5){ //第二部分：条件。成立继续循环，不成立退出
alert(i); //第三部分：语句
i++; //第四部分：自增
} //while循环使用比较复杂，使用for循环更简洁。
//for(初始化;条件;自增){语句}(5), do...while 루프
do...while 루프와 while 루프의 원리 구조는 기본적으로 동일하지만 루프는 조건이 맞는지 확인합니다. true 이전에 한 번 코드 블록이 실행되었으며, 조건이 true이면 루프가 반복됩니다. 이 루프에는 코드를 먼저 실행한 다음 조건을 결정하기 때문에 약간의 문제가 있습니다. 조건이 부적절하면 무한 루프에 들어가 브라우저가 충돌하게 됩니다.
/*
语法： do{ 执行语句 } while(条件); */
//操作有风险，尝试需谨慎
//若将循环条件改为：num <= 6 会导致浏览器崩溃
var num = 6; do{ document.write("数字:" + num + "<br>"); num -= 1; } while(num > 0);(6), JS 오류 처리 문
try...catch 문은 예외 처리에 사용됩니다. try 문은 코드 블록의 오류를 감지하고 처리해야 하는 코드 세그먼트를 나타내는 데 사용됩니다. catch 문은 try 문에서 발생한 오류를 처리하는 데 사용됩니다. try 문이 먼저 실행됩니다. 작업 중에 오류가 발생하면 try 문에 있는 코드를 건너뛰고 catch에 있는 문을 실행합니다. 오류가 발생하지 않으면 catch의 명령문이 실행되지 않습니다. 일반적으로 try...catch 문은 예측 가능한 오류를 처리하는 데 사용할 수 있습니다.
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'); }throw 문을 사용하여 사용자 정의 오류를 생성할 수 있습니다. 공식적인 용어는 예외를 생성하거나 발생시키는 것입니다. 구문: '예외 객체'를 발생시킵니다.
throw 문은 try...catch 문과 함께 사용하여 프로그램 흐름을 제어하고 정확한 오류 메시지를 생성할 수 있습니다.
//输入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>(7), break out of the loop
break 문은 현재 루프에서 빠져나와 다음 코드를 실행하기 위해 루프를 직접 종료하는 데 사용됩니다. 더 이상 판단하지 않고 전체 루프를 실행합니다. continue 문은 이 루프에서 벗어나서 다음 루프를 계속 실행합니다. 즉, 이 루프를 종료하고 다음 루프를 실행할지 여부를 결정합니다. return은 함수 본문의 실행을 종료하고 값을 반환할 수 있습니다.
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
}2. JSON
JSON(JavaScript Object Notation): JS 객체 표기법입니다. JSON은 주로 XML과 유사하게 데이터 정보를 저장하고 교환하는 데 사용되지만, XML에 비해 JSON은 읽고 쓰기 쉽고 구문 분석하기 쉽습니다.
JSON 구문은 JS 객체 표현 구문의 하위 집합입니다. 데이터는 쉼표로 구분된 키-값 쌍으로 되어 있고 중괄호는 객체를 나타내고 대괄호는 배열을 나타냅니다.
JSON 구문의 작성 형식: "name" : "value", "name" : "value"
이름과 값은 큰따옴표 안에 포함되며 각 부분은 콜론으로 구분됩니다. 데이터는 쉼표로 구분됩니다. 이는 JS의 name = "value"와 달리 이해하기 쉽습니다.
JSON 값은 숫자(정수 및 소수 포함), 문자열(큰따옴표로 묶음), 부울 값(true 또는 false), 객체(중괄호로 묶음), 배열(대괄호로 묶음) 또는 null입니다.
JSON은 일반 텍스트로, 일반적으로 서버에서 웹 페이지로 데이터를 전송하고 서버에서 JSON 데이터를 얻은 다음 웹 페이지에서 데이터를 사용하는 데 사용됩니다.
(1), JSON 객체
var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值：
alert(json.a);
//修改第二项的值
alert(json.b = "xyz");
//返回第三项数组中第一项的值
alert(json.c[0]);(2), JSON 및 배열
동일점:
둘 다 첨자 값을 통해 항목을 반환할 수 있습니다. 루프를 사용할 수 있습니다. JSON에는 길이 속성이 없고 for 루프를 사용할 수 없지만 for...in 루프를 사용하여 for 루프와 동일한 작업을 완료할 수 있습니다.
배열은 for...in 루프를 사용할 수도 있지만 for 루프를 사용하는 것이 더 좋습니다. for...in 루프는 배열의 요소가 아닌 객체의 속성을 반복합니다.
차이점:
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]); }(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>(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); //返回：string(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);说到 JSON，就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域（网站）访问数据需要一个特殊的技术 (JSONP) 呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略，一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通，而 HTML 的
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
