Javascript

{
            function func(){
                document.write("1번. 함수가 실행되었습니다.")
            }
            func();
        }
        

{
    데이터 타입 (자료형) --> 타입 스크립트
    const x = 100;
    const x1 = "100";
    const x2 = [];
    const x3 = {};
    const x4 = null, undefined;
    const x5 = function(){}
    const x6 = true, boolean;

    const func = function(){
        document.write("2번. 함수가 실행되었습니다.")
    }
    func();
}

{
    function func(str){ //함수 안에 넣었다고해서 파라미터,인자라고 불린다
        document.write(str);
    }
    func("3번. 함수가 실행되었습니다.
")
}

{
    function func(){
        const str = "4번. 함수가 실행되었습니다.4
";
        return str;
    }
    document.write(func());
}

{
    func = () => document.write("5번. 함수가 실행되었습니다.");

    func();
}

{
    //1번째 방법
    const func = function(){
        document.write("6-1번. 안녕")
    }

    //2번째 방법
    const func = () => {
        document.write("6-1번. 안녕")
    }

    //3번째 방법
    const func = () => document.write("6-1번. 안녕");
    func();
}

{
    //1번째 방법
    function func(str){
        document.write(str);
    }

    //2번째 방법
    func = (str) => document.write(str);

    //3번째 방법
    func = str => document.write(str);

    func("7번. 안녕");
}

{
    // function func(){
    //     const str = "8번. 안녕";
    //     return str;
    // }

    func = () => {
        const str = "8번. 안녕";
        return str;
    }

    document.write(func())
}

{
    const func = (str) => { //변수에 매개변수 삽입 후
        return str; //매개변수를 리턴해준다.
    }
    document.write(func("함수가 실행되었습니다.9<br>")); //변수 출력
}

{
    const func = (str) => { //변수에 매개변수 삽입 후
        return str; //매개변수를 리턴해준다.
    }
    document.write(func("함수가 실행되었습니다.9<br>")); //변수 출력
}

{
    const func = str => { //변수에 매개변수 삽입 후
        return str; //매개변수를 리턴해준다.
    }
    document.write(func("함수가 실행되었습니다.10<br>")); //변수 출력
}

{
    const func = (str) => { //const가 있냐 없냐에 따라 익명 선언적 함수 둘 중 하나로 결정됨
        return str;
    }
    document.write(func("함수가 실행되었습니다.11
")); //변수 출력
}

{
    const func = str => str; //const가 있냐 없냐에 따라 익명 선언적 함수 둘 중 하나로 결정됨

    document.write(func("함수가 실행되었습니다.12
")); //변수 출력
}

{
    function func(num, str1, str2){ //function func (자리에) 매개변수를 지정 후
        document.write(num + "." + str1 + "가 "+ str2 +  "되었습니다.") //함수안에 내용을 이런식으로 활용 가능
    }

    func("1", "함수", "실행"); //매개변수는 변수안에 변수를 선언 가능하다 지금은 str1에 "함수" 넣은 상태
    func("2", "자바스크립트", "실행"); //매개변수는 변수안에 변수를 선언 가능하다 지금은 str1에 "함수" 넣은 상태
    func("3", "제이쿼리", "실행"); //매개변수는 변수안에 변수를 선언 가능하다 지금은 str1에 "함수" 넣은 상태
}

{
    function func(num1, str1, com){
        document.write(num1 + "함수가 실행되었습니다.")
    }

    const youNum1 = 1;
    const youNum2 = 2;
    const youNum3 = 1;
    const youStr1 = "함수";
    const youStr2 = "자바스크립트";
    const youStr3 = "제이쿼리";
    const youCom = "실행";

    func(youNum1, youNum2, youCom); // 1번 func() 괄호 안의 
}

{
    function func(num1, str1, com){
        document.write(num1 + "." + str1 + "가 " + com +"되었습니다. 
")
    }
    const info = [
        {
            num : "1",
            name : "함수",
            com : "실행"
        },
        {
            num : "2",
            name : "자바스크립트",
            com : "실행"
        },
        {
            num : "3",
            name : "제이쿼리",
            com : "실행"
        },
    ]
    func(info[0].num, info[0].name, info[0].com);
    func(info[1].num, info[1].name, info[1].com);
    func(info[2].num, info[2].name, info[2].com);
}

함수 유형 : 객체 안에 변수와 함수를 이용한 형태
{
    const info = {
        num1 : 1,
        name1 : "함수",
        word1 : "실행",
        num2 : 2,
        name2 : "자바스크립트",
        word2 : "실행",
        num3 : 3,
        name3 : "제이쿼리",
        word3 : "실행",
        result1 : function(){ //객체안에 함수를 적고 불러오는것이 가능합니다.
            document.write(info.num1+info.name1+"가 "+info.word1+"되었습니다.
")
        },
        result2 : function(){
            document.write(info.num2+info.name2+"가 "+info.word2+"되었습니다.
")
        },
        result3 : function(){
            document.write(info.num3+info.name3+"가 "+info.word3+"되었습니다.")
        }
    }
    info.result1();
    info.result2();
    info.result3();
}

{
    function func(num, name, word){
        const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
            
        this.num = num; //this 라는걸 쓰면서 재활용을 한다.
        this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
        this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
            
        this.result1 = function(){ //객체안에 함수를 적고 불러오는것이 가능합니다.
            document.write(this.num+this.name+"가 "+this.word+"되었습니다.
")
        }
    }

    //인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("2", "자바스크립트", "실행");

    //실행
    info1.result1();
    info2.result1();
    info3.result1();
}

 {
    function func(num, name, word){
        // const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
        
        this.num = num; //this 라는걸 쓰면서 재활용을 한다.
        this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
        this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
        
    }

    func.prototype.result = function(){ //객체안에 함수를 적고 불러오는것이 가능합니다.
        document.write(this.num+this.name+"가 "+this.word+"되었습니다.
")
    }

    //인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("2", "자바스크립트", "실행");

    //실행
    info1.result();
    info2.result();
    info3.result();
}

{
    function func(num, name, word){
        // const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
        
        this.num = num; //this 라는걸 쓰면서 재활용을 한다.
        this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
        this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
        
    }

    func.prototype = { //객체안에 함수를 적고 불러오는것이 가능합니다.
        result1 : function(){
            document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
        },
        result2 : function(){
            document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
        },
        result3 : function(){
            document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
        }
    }

    //인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("2", "자바스크립트", "실행");

    //실행
    info1.result1();
    info2.result2();
    info3.result3();
}

(function func(){
    document.write("함수실행")
}());

//화살표함수
(() => {
    document.write("함수실행")
})();

function func(str){
    document.write(str)
}
func("함수가 실행되었습니다.")

function func(str = "함수가 실행되었습니다."){
    document.write(str)
}
func()

function func(a, b){
    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수가 실행되었습니다.", "함수가 실행되었습니다.");

// 반복적으로
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다."+num);
        } else {
            document.write("함수가 실행되었습니다."+num);
            func(num - 1);
        }
        // func()
    }

    func(10);

    //애니메이션
    function animation(){
        document.write("함수가 실행되었습니다.");
        
        requestAnimationFrame(animation);
    }
    animation();

//재귀함수 : 동시에 여러개 실행
//콜백함수 : 하나의 함수가 실행 -> 두번째 함수가 실행
//콜백함수란 각 함수가 순서대로 완벽하게 출력이 되면 다음 함수가 출력되게끔 해주는것
//웹사이트 이미지 로딩이 순서대로 나온것과 비슷
function func(){
    document.write("함수가 실행되었습니다. 1");
}

function callback(str){
    document.write("함수가 실행되었습니다. 2");
    str();
}
callback(func);

//웹사이트 이미지 로딩이 순서대로 나온것과 비슷
    function func(index){
        document.write("함수가 실행되었습니다." + index);
    }
z
    function callback(num){
        for(let i=1; i<=10; i++){
            num(i);    
        }
    }
    callback(func);

function funcA(callback){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.
");
        callback();
    },1000);
}
function funcB(){
    setTimeout(()=>{
        console.log("funcB가 실행되었습니다.
");
        callback();
    },1000);
}
function funcC(){
    setTimeout(()=>{
        console.log("funcC가 실행되었습니다.
");
        callback();
    },1000);
}
function funcD(){
    setTimeout(()=>{
        console.log("funcD가 실행되었습니다.
");
    },1000);
}
// 출력 되기 전에 콜백함수를 통해 출력 값을 뒤바꿈
// 1초 뒤에 funcA가 실행되었을때 funcB를 불러들임
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        });
    });
});

//28번
    function func(){
        function funcA(){
            console.log("함수가 실행되었습니다.");
        };
        funcA();

        function funcB(){
            console.log("함수가 실행되었습니다.");
        };
        funcB();
    }
    func();
}

class study{
    constructor(num, name){
        this.num = num;
        this.name = name;
        this.job = name;
    }

    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){
        this.num = num;
        this.name = name;
        this.job = name;
    }

    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;
    }

    result(){
        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();