<html>
<head>
<meta charset="UTF-8">
<title>Front End</title>
<link rel="icon" href="./img/favicon.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 비동기의 문제점
function ansyncEx(){
let result = 0;
setTimeout(function(){
result = 10+20; // 10+20 이라는 로직을 완성하기 전에
console.log('10+20='+result);
},100);
// 기다리지 않고 아래 내용을 실행
return 'result : '+result;
}
console.log(ansyncEx());
// 콜백 사용시 콜백지옥 발생(2단계 이사상 진행시...)
// 이것을 해결하기 위해 Promise 객체 라는 것이 등장
function prom(){
// resolve : 성공시 실행 함수
// reject : 실패시 실행 함수
return new Promise(function(resolve,reject){
let result = 0;
setTimeout(function(){
result = 10+20;
resolve('result : '+result);
},100);
});
}
console.log('Promise 객체 활용',prom());//Promise 객체가 나온다.
//Promise 객체에서 무언가를 꺼내기 위해서는 then() 을 사용
prom().then(function(data){
console.log('Promise 에서 꺼내온 값',data);
data += '!!!!';
return data;
}).then(function(data){ // 추가 작업을 하고 싶다면 then()
console.log(data);
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Front End</title>
<link rel="icon" href="./img/favicon.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 콜백함수로 동작하는 plus, multi, divide 함수
// (a+b)*c/d
function plus(a,b){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve(a+b);},100);
});
}
function multi(a,b){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve(a*b);},100);
});
}
function divide(a,b){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve(a/b);},100);
});
}
/* 이렇게 하면 깔끔 할텐데... 이걸 위해 Promise 와 async-await 이 필요
r1 = plus(3,4);
r2 = multi(r1,4);
r3 = divide(r2,2);
r4 = plus(r3,30);
*/
// await 이 실행되는 함수에게 일을시키는 함수엔 async
async function getResult(){
//Promise 를 반환하는 함수엔 await 을 달아준다.
r1 = await plus(3,4);
console.log('r1 : ',r1);
r2 = await multi(r1,4);
console.log('r2 : ',r2);
r3 = await divide(r2,2);
console.log('r3 : ',r3);
r4 = await plus(r3,30);
console.log('최종 : ',r4);
}
getResult();
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Front End</title>
<link rel="icon" href="./img/favicon.png">
<style>
</style>
</head>
<body>
</body>
<script>
// callback함수 비동기 상황에서특정한 내용을 실행 후(back), 실행(call)되는 함수
// 비동기의 문제점 - 기다려 주지 않아
function plus(a){
let result = 0;
setTimeout(function(){
result = a+10;
},100);
console.log(result);
}
plus(5);
// 콜백 활용 - a 값을 주면 그것을 처리해서 callBack 함수에 전해줘
function plus2(a,callBack){
setTimeout(function(){
//result = a+10;
callBack(a);
},100);
}
plus2(5,function(a){
console.log(a+10);
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Front End</title>
<link rel="icon" href="./img/favicon.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 콜백함수로 동작하는 plus, multi, divide 함수
// (a+b)*c/d
function plus(a,b,onResult){
setTimeout(function(){
onResult(a+b);
},100);
}
function multi(a,b,onResult){
setTimeout(function(){
onResult(a*b);
},100);
}
function divide(a,b,onResult){
setTimeout(function(){
onResult(a/b);
},100);
}
// a+b 를 더한 값을 출력
plus(3,4,function(r1){
console.log('3+4='+r1);//7
});
// a+b 를 더한 값에 4를 곱해 출력
plus(3,4,function(r1){
multi(r1,4,function(r2){
console.log('(3+4)*4='+r2);
});
});
// a 와 b 를 더한 값에 4를 곱한 후 2로 나눠 출력
plus(3,4,function(r1){
multi(r1,4,function(r2){
divide(r2,2,function(r3){
console.log('(3+4)*4/2='+r3);
})
});
});
// a 와 b 를 더한 값에 4를 곱한 후 2 나누고 30을 더해 출력
plus(3,4,function(r1){
multi(r1,4,function(r2){
divide(r2,2,function(r3){
plus(r3,30,function(r4){
console.log('(3+4)*4/2+30='+r4);
});
});
});
});
/* 이렇게 하면 깔끔 할텐데... 이걸 위해 Promise 와 async-await 이 필요
r1 = plus(3,4);
r2 = multi(r1,4);
r3 = divide(r2,2);
r4 = plus(r3,30);
*/
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Front End</title>
<link rel="icon" href="./img/favicon.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 비동기의 문제점
function ansyncEx(){
let result = 0;
setTimeout(function(){
result = 10+20; // 10+20 이라는 로직을 완성하기 전에
console.log('10+20='+result);
},100);
// 기다리지 않고 아래 내용을 실행
return 'result : '+result;
}
console.log(ansyncEx());
// 콜백 사용시 콜백지옥 발생(2단계 이사상 진행시...)
// 이것을 해결하기 위해 Promise 객체 라는 것이 등장
function prom(){
// resolve : 성공시 실행 함수
// reject : 실패시 실행 함수
return new Promise(function(resolve,reject){
let result = 0;
setTimeout(function(){
result = 10+20;
resolve('result : '+result);
},100);
});
}
console.log('Promise 객체 활용',prom());//Promise 객체가 나온다.
//Promise 객체에서 무언가를 꺼내기 위해서는 then() 을 사용
prom().then(function(data){
console.log('Promise 에서 꺼내온 값',data);
data += '!!!!';
return data;
}).then(function(data){ // 추가 작업을 하고 싶다면 then()
console.log(data);
});
</script>
</html>
1. J-Query 는 무엇 인가요?
- J-Query 는 JavaScript 의 Library 이다.
2. Library 는?
- 자주 사용하거나, 직접 구현이 어려운 기능을 만들어 모아 놓은 Program Group
- JavaScript Library 로는 J-Query 외에도 RequireJS, Prototye, AngluarJS, Backbone 등이 있다
3. J-Query 를 사용 하는 이유는?
1) 사용의 편리성이 있다.
var elem = document.getElementById( “demo” );
elem.addListener(“click”, function(){
alert( “hello, j-Query” );
})
$( “#demo” ).click( function(){
alert( “hello, j-Query” );
});
2) Cross Browsing
- Java Script 는 Browser 에서 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다.
- J-Query 에서는 내부적으로 Browser 마다 처리를 해 놓았기 때문에 신경 쓸 필요가 없다.
3) 다양한 Plugin - J-Query 를 기초로 한 유용한 Plugin 이 많다.
- Bootstrap, J-query UI, Pagination 등