Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
데이터 실행하기 - 4 본문

18. 콜백 함수
{
// 콜백 함수
function func(){
document.write("함수가 실행되었습니다.2")
}
function callback(str){
document.write("함수가 실행되었습니다.1");
str();
}
callback(func);
// 콜백 함수 : 반복문
function func() {
document.write("함수가 실행되었습니다.");
}
function callback(num){
for(let i=1; i<=5; i++){
num(i);
}
}
callback(func);
// 콜백 함수 : 동기/비동기
function funcA(){
console.log("funcA가 실행되었습니다.");
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
function funcC() {
setTimeout(() => {
console.log("C")
}, 1000)
}
function funcD() {
console.log("D")
}
funcC();
funcD();
function funcE(callback){
setTimeout(()=>{
console.log("E");
callback();
}, 1000)
}
function funcF() {
console.log("F");
}
funcE(function(){
funcF();
});
}
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
D
C
E
F
함수가 실행되었습니다.2
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
D
C
E
F
19. 객체 생성자 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
this.result = function(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
}
}
// 인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "포론트엔드개발자");
info1.result();
info2.result();
}
결과보기
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
20. 프로토타입 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
func.prototype.result = function(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
}
// 인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "포론트엔드개발자");
info1.result();
info2.result();
}
결과보기
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
21. 객체 리터럴 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
func.prototype = {
result1 : function(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
},
result2 : function(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
}
}
// 인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "포론트엔드개발자");
info1.result1();
info2.result2();
}
결과보기
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
21. 클래스 함수
{
class study {
constructor(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
result(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
};
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹스토리보이", "포론트엔드개발자");
info1.result();
info2.result();
// 클래스 상속
class study {
constructor(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
result(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "입니다.");
};
}
class study2 extends study {
constructor(num, name, job, age){
super(num, name, job);
this.age = age;
}
result2(){
document.write(this.num+".내이름은"+ this.name + "이며, 직업은" + this.job + "이며 나이는" + this.age + "살 입니다.");
};
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹스토리보이", "포론트엔드개발자", 100);
info1.result();
info2.result();
info2.result2();
}
결과보기
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자이며 나이는100살 입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자이며 나이는100살 입니다.
'JavaScript' 카테고리의 다른 글
데이터 제어하기 - 2 (0) | 2022.04.13 |
---|---|
데이터 제어하기 - 1 (0) | 2022.04.13 |
데이터 실행하기 - 3 (0) | 2022.04.13 |
데이터 실행하기 - 2 (0) | 2022.04.13 |
데이터 실행하기-1 (0) | 2022.04.13 |