callBack01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 💚 이렇ㄱㅔ 하면 안됨
// function loadScript(src) {
// // script 태그를 만들고 페이지에 script 태그를 추가
// // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행
// let script = document.createElement('script');
// script.src = src;
// document.head.append(script);
// }
// loadScript("myScript.js"); // 로드 되기전에 print_Hi(); 호출해서 ReferenceError
// print_Hi();
// 💚 콜백함수 --> 어느 시점에 내가 불러서 호출
function loadScript(src, call_back) {
let script = document.createElement('script');
script.src = src;
script.onload = () => call_back(); // 다 로드 되면 콜백
document.head.append(script);
}
loadScript("myScript.js", function() {
print_Hi(); // 함수가 다 되면 print_Hi(); 실행
})
</script>
</body>
</html>
myScript.js
function print_Hi() {
console.log('안녕 ?');
}
callBack02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// console.log('1');
// setTimeout(() => {
// console.log('2');
// }, 2000)
// console.log('3');
// 🔽🔽
// 1
// 3
// 2
// 💚 동기적
// console.log('1');
// for(let i=0; i<1000000000; i++) {
// }
// console.log('2');
// console.log('3');
// 🔽🔽
// 1
// 2
// 3
function printConsole() {
console.log("자바스크립트 콜백");
}
// 💚 synchronous 콜백 (동기)
function printImmediately(print) {
print();
}
printImmediately(printConsole); // 바로 실행
// 💚 asynchronous 콜백 (비동기)
function printWithDelay(print, timeout) {
setTimeout(print, timeout);
}
printWithDelay(printConsole, 2000);
</script>
</body>
</html>
error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// try { // 에러 X (error 없으면 catch는 무시)
// alert ('try 실행')
// }
// catch (e) { // 에러 O (error 있으면 try에서 넘어옴)
// alert ('catch 실행')
// }
// let json = '{"name" : "green", "age" : 30}';
// let user = JSON.parse(json); // JSON.parse ) 객체로 만들기
// console.log(user.name); // green
// console.log(user.age); // 30
// 🔻 문법 바꾸기 // script가 죽지 않고 에러를 처리
let json = '{"name" "green", "age" : 30}';
try {
let user = JSON.parse(json);
console.log(user.name);
console.log(user.age);
}
catch (e) {
console.log('에러 발생');
}
let json2 = '{"age":20}';
try {
let user2 = JSON.parse(json);
// console.log(user2.age);
console.log(user2.name);
// asdg;
if(!user2.name) {
throw new SyntaxError('불완전 ~~~ 이름 없음'); // error를 만들어줌
}
}
catch (e) {
console.log('에러에러에러');
// console.log(e.name); // ReferenceError
// console.log(e.message); // asdg is not defined
}
// throw 연산자 - 에러 처리를 통보
// throw <error object>
// 자바스크립트 에러 객체 생성자
// Error, SyntaxError, ReferenceError, TypeError
// new Error(message);
// new SyntaxError(message);
// new ReferenceError(message);
// new TypeError(message);
let error = new Error('에러 생김');
console.log(error); // Error: 에러 생김 at error.html:53:21
console.log(error.name); // error
console.log(error.message); // 에러 생김
</script>
</body>
</html>
