유정잉

27일차 JavaScript [ 출력, 함수 ] 본문

네이버 클라우드 부트캠프/복습 정리

27일차 JavaScript [ 출력, 함수 ]

유정♡ 2024. 3. 28. 11:26

[ JavaScript 주석 처리 ]

          <script>
               // script 주석 처리 /* 여러행 주석 처리 */
          </script>

 

[ JavaScript 종류 ]

    - 내부 자바스크립트 (파일 안에 쓰는 작업)

    - 외부 자바스크립트 

     <body>    
          <!-- 알림창 -->
          <script>
               alert('안녕하세요')
          </script>    
     </body>
   

 

[ JavaScript 출력 방법 3가지 ]

    1. alert('출력내용'); : 알림창 형태

    2. document.write('출력내용'); : 브라우저 안에 body에서 출력 (실무에서 제일 많이 사용 多)

    3. console.log('출력내용'); : 오류 체크하기 위해 콘솔창에 출력 (f12 개발자도구 -> 콘솔)

     <body>    
          <script>
               alert('안녕하세요');
               document.write('안녕하세요');
               console.log('안녕하세요');
          </script>
     </body>

알림창이 alert / 브라우저 안에 body부분이 document

 

[ JavaScript 변수 선언 3가지 ]

   1. var (variables) : 변수의 재선언 가능, 내가 썻던 변수를 또 사용 가능 (주로 var 아니면 let이 사용됨)

   2. let : 변수의 재선언이 불가능 !!! 값을 변경할 수는 있음 (요새는 let을 가장 많이 사용)

   3. const (constant) : 값 조차 변경할 수 없음 재선언도 불가능, 잘 사용되지 않음

 <body>    
          <script>
               // 변수 알아보기
               var n1; //변수 선언
               n1 = 10; //변수 값 할당
               var n2 = 20;

               document.write(n1 + "<br>");
               document.write(n2 + "<br>");

               var s1, s2, s3;
               s1 = 'aa';
               s2 = 'bb';
               s3 = 'cc';
               document.write(s1 + ' ' + s2 + ' ' + s3);

               // var와 let의 차이점 : 변수를 재선언 했을 때 사용 가능 여부 가능vs불가능
               var name ='gildong';
               console.log(name);

               var name='juli';
               console.log(name); // var의 경우 똑같은 변수명을 사용해도 잘 출력이 됨

               let name2 ='gildong';
               console.log(name2);

               let name2='juli';
               console.log(name2); // let의 경우 똑같은 변수명을 사용하면 에러가 뜸 !!!
          </script>
     </body>

위 콘솔창은 var / 아래 콘솔창은 let

     <body>    
          <script>
               // var 개념 : 값 변경 가능, 재선언 가능
               var com='java';
               console.log(com);

               com='db';
               console.log(com);

               com='js';
               console.log(com);

               // let 개념 : 값 변경 가능, 재선언 불가능
               let com2='java';
               console.log(com2);

               com2='db';
               console.log(com2);

               com2='js';
               console.log(com2); // 값 변경 가능

               let com3='java';
               console.log(com3);

               let com3='db';
               console.log(com3);

               let com3='js';
               console.log(com3); // 재선언 불가능

               // const 개념 : 값 조차 변경 불가능
               const com4='java';
               console.log(com4);

               com4='db';
               console.log(com4);

               com4='js';
               console.log(com4);
          </script>
     </body>

let 재선언과 const는 오류 뜸

 

[ JavaScript 변수 선언 - 호이스팅 ]

   호이스팅 (hoisting) : var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined 값을 가질 수 있다. 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타낸다. => var 대신 주로 let을 사용하는 이유 !!

     <body>    
          <script>
               // 호이스팅 : var 사용시 undefined가 아닌 tom이 출력됨 그래서 주로 let 사용
               var name;
               console.log(name);
               name='tom;'

               // let 사용시 우리가 원래 알고 있던 개념 : undefined
               let name2;
               console.log(name2);
               name2='tom;'
          </script>
     </body>

 

[ JavaScript 자료형 ]

    숫자, 문자열('' ""), bool(true false), function(함수), object, undefined 

     <body>    
          <script>
               // 숫자
               document.write(100);
               // 문자열 ''붙이면
               document.write('100');
               // 문자열 - 쌍따옴표 or 작은따옴표
               document.write("안녕");
               document.write('<br>'); // 작은따옴표는 안에 태그 가능 !!!
               document.write('오늘 목요일');
               document.write('<br>');
               document.write('네이버'); // 작은따옴표 안에 큰따옴표
               document.write('<br>');
               
               // bool - 참과 거짓 판단
               document.write(100>28); //true
               document.write(100<28); //false
               document.write(true);   //true
               document.write(false);  //false
               document.write('true'); //문자열 'true'
               document.write('false');//문자열 'false'
               document.write('<br>');

               // function - 함수
               alert('안녕');
               prompt('이름입력','문자로만 입력'); //입력할수 있는 prompt창 ,placeholder
               document.write('<br>');

               // object - js가 제어가능한 요소
               document.write(document);
               document.write('<br>');

               // undefined - 변수에 값이 할당되지 않을 때
               var a; // 변수 a를 선언하겠단 키워드
               document.write(a); // 초기화값이 없기에 undefined 출력됨 - 정의되지 않은 값
               document.write('<br>');
               document.write('a'); // 그냥 문자열 a 출력
               document.write('<br>');
          </script>
     </body>

prompt('이름입력','문자로만 입력'); 창 : '이름입력'은 제목 '문자로만 입력'은 placeholder 역할

 

     <body>    
          <script>
               document.write("<h2>안녕</h2>");

               var r = prompt('이름입력');
               if ( r == null ) { //취소버튼
                    alert('오류발생 !!!');
               }
               else if ( r == '' ) {
                    alert('다시'); //문자열 입력 안 하고 확인버튼 눌렀을 때
               }
          </script>
     </body>

왼쪽 : 값 입력하고 확인버튼 누른 결과 / 가운데 : 값 입력하지 않고 확인 누른 결과 / 오른쪽 : 취소 버튼 누른 결과

     <body>    
          <script>
               var r = confirm('전송할까요?');
               if( r==true) {
                    alert('확인');
               }
          </script>
     </body>

 

 

[ JavaScript 연산자 ]

     <body>    
          <script>
               // 콘솔창에서 사칙연산
               console.log(11+22);
               console.log(10%5);
               console.log(5-'3'); // '3'을 문자열로 줬지만 사칙연산 제대로 적용 됨 - 2출력
               console.log(5+'3'); // 문자열 사칙연산은 -, *, / 만 가능 !! +는 문자열로 취급

               console.log( '내 점수는' + 100 + '점' );

               // 비교 연산자
               console.log(5>=3);
               console.log(5==3); // =만 적으면 오류 =은 대입연산자임
               console.log(5===3);// ==은 항등연산자 equal. ===은 데이터유형까지 일치해야함
               console.log(5!=3);
          </script>
     </body>

 

[ JavaScript 백틱 ` ]

    변수명을 +로 나열하는 것이 아니라 백틱(`)을 사용하여 ${변수명}으로 나열한다. => `내이름은 ${name}이다`

     <body>    
          <script>
               var name="tom";
               var age=90;
               var name2="jack";
               var name3="juli";

               // 백틱 `에서 변수를 사용할 때 ${변수명}으로 사용한다. 연산도 가능 !
               var msg=`내 이름은 ${name}이고 나이는 ${age}이다.`;
               console.log(msg);

               var msg2=`내 나이는 ${age+3}이다.`; // 사칙연산도 가능 ${변수명+3}
               console.log(msg2);
          </script>
     </body>

 

[ JavaScript 조건문 IF, switch문, 삼항조건연산자 ]

   parseInt는 문자를 정수로 바꾸는 함수 / Number는 문자열을 정수로 변환하는 함수 

     <body>    
          <script>
               var score;
               var num=prompt('길동의 점수를 입력하세요',100);
               num=parseInt(num); //문자를 정수로 바꿔 다시 null에 대입한다.

               if(num>=90)
                    score="A";
               else if(num>=80)
                    score="B";
               else
                    score="F";
               document.write(score);
          </script>
     </body>

 <body>    
          <script>
               var age=prompt('나이는?')
               if(age>=20)
                    document.write('성인');
               else
                    document.write('학생');
          </script>
     </body>

 

     <body>    
          <script>
               var age=prompt('나이는?')
               if(age>=0 && age<=100) {
                    if(age >= 50) {
                         alert('A');}
                    else{
                         alert('B');}
                    }
                    else{
                         alert('입력하세요');
               }
          </script>
     </body>

     <body>    
          <script>
               var t1 = 50 > 60;
               document.write(t1); // false

               var t2 = 50 < 60;
               document.write(t2); // true

               var t3 = 50 == 60;
               document.write(t3); // false

               console.log(t1 && t2 && t3);
               console.log(t1 || t2 || t3);
               console.log(!t1);
          </script>
     </body>

     <body>    
          <script>
               /* 1 2 3 4 중 수를 받아서 1,3이면 남자 2,4면 여자 출력*/
               var num = prompt('입력','성별을 정수로 입력');
               if(num==1 || num==3) {
                    alert('남자');
               }
               else if(num==2 ||  num==4) {
                    alert('여자');
               }
               else{
                    alert('다시입력');
               }
          </script>
     </body>

     <body>    
          <script>
               var n = confirm('확인?');
               if(n==true){
                    alert('확인');
               }
          </script>
     </body>

     <body>    
          <script>
               var money=0;
               var cafe=prompt('무슨 커피 드릴까요?');

               switch(cafe){
                    case "아메리카노":
                    case "아이스아메리카노":
                         money=4000;
                         break;
                    case "라떼":
                         money=4500;
                         break;
                    default : document.write(cafe+"라는 메뉴 없다");
               }
               document.write(money+'원');
          </script>
     </body>

     <body>    
          <script>
               var n = prompt('점수입력');

               n >= 80 ? alert('합격') : alert('불합격');
          </script>
     </body>

 

[ JavaScript 연산자와 list 함수 응용 ]

     <body>    
          <script>
               var n = 5;
               n+=5;
               alert(n);

               var str = '자바';
               str+='재밌다';
               alert(str);

               var x = '<ul>';
               x+='<li>태그1</li>';
               x+='<li>태그2</li>';
               x+='<li>태그3</li>';
               x+='</ul>';
               document.write(n);
          </script>
     </body>

 

[ JavaScript 반복문 for, while, do-while ]

     <body>    
          <script>
               for(i=1;i<=10;i++) {
                    console.log(i);
               }
          </script>
     </body>

     <body>    
          <script>
              // select option을 1~12까지 일일히 주기 어려우니 반복문을 통해서 줌
               var n='<select>';
                   
               for(i=1 ; i<=12 ; i++) {
                    n += '<option>' + i + '</option>';
               }
               n += '<select>';
               document.write(n);
 
                // for(i=1990 ; i<=2024 ; i++)
                // for(i=2024 ; i>=1990 ; i--)
          </script>
     </body>

     <body>    
          <script>
               var n=1;
               while(n<=10) {
                    console.log(n);
                    n++;
               }
          </script>
     </body>

<body>
     <script>
          for(i=0;i<=100;i++){
               if(i%2==1){
                    document.write(i+' ');
               }
          }
     </script>
</body>

<body>
    <script>
        for(let i=0;true;i++) {
            var user=confirm("계속 반복?");
            if(user) {
                alert(i+'번째 반복');
            }
            else {
                break;
            }
        }
    </script>
</body>

confirm은 반환형이 true ! 즉 취소를 누를 때 까지 계속 반복 됨

<body>
    <script>
        // 1~10까지 3의 배수 제외하고 출력
        for(let i=0;i<=10;i++) {
            if(i%3!=0) {
                document.write(i+' ');
            }
        }
    </script>
</body>

 

 

[ JavaScript 함수 ]

  함수 선언 : function 함수명() { 명령 }

  함수 호출 : 함수명() 또는 함수명(변수)

<body>
     <script>
          function hi() {
               alert("하이");
          }
          hi(); // 함수 호출을 하게 되면 함수 안에 있는 명령이 실행 됨
     </script>
</body>

<body>
     <script>
          function addNumber() {                                      
               var num1 = 2;
               var num2 = 3;
               var sum = num1 + num2;            
               alert("결과 값: " + sum);
          }
          addNumber();
     </script>
</body>

 

 

[ JavaScript 재사용할 수 있는 함수 ]

   매개변수, 인수, return

<body>
     <script>
          function fun(e) {
               return e*e;
          }
          var num = prompt("정수입력");
          alert(fun(num));
     </script>
</body>

<body>
     <script>
          function fun(name) {
               var msg = `하이 ${name} !!! ` ;
               console.log(msg);
          }

          fun('길동');
     </script>
</body>

<body>
     <script>
          function fun(name) {
               var msg = '안녕' ;
               if(name) {
                    msg += `${name}`;
               }
               console.log(msg);
          }
          fun();
          fun('길동');
     </script>
</body>

<body>
     <script>
          var name='tom';
          function fun() {
               var msg='안녕';
               console.log(`${msg} ${name}`);
          }
          fun();
 
          console.log(msg); // 에러 발생 ! 왜냐면 msg는 지역변수니깐 fun(){} 안에 있는
     </script>
</body>

 

 

[ JavaScript 함수 표현식, 익명함수와 화살표함수 ]

   익명함수는 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다. 익명 함수는 이름이 없어서 함수 자체가 식(expression)이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수도 있다.

    화살표함수는 ES6 버전부터는 => 표기번(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다. 익명 함수에서만 사용할 수 있다. (매개변수) => { 함수내용 }

<body>
     <script>
          /*function fun(x,y) {
               return x+y;
          }*/

          //익명함수 : 변수가 함수명 대신한다
          var fun = function(x,y) {
               return x+y;
          }
          document.write(fun(3,4));
     </script>
</body>
<body>
     <script>
          //익명함수 : 변수가 함수명 대신한다
          var fun = function(x,y) {
               return x+y;
          }
          // 더하기니깐 parseInt 필요
          var a=parseInt(prompt("정수1"));
          var b=parseInt(prompt("정수2"));
          document.write(fun(a,b));
     </script>
</body>
<body>
     <script>
          //화살표함수
          var add = (x,y) => {
               return x+y;
          }
          var add2=(x,y) => x+y; //실행구문이 한줄이면 이런식으로도 나타낼 수 있음

          //익명함수
          var add = function(x,y) {
               return x+y;
          }
 
          //화살표함수를 표현할 수 있는 다양한 방법
          var n=(name) => {
               return name;
          }
          var n=(name)=>(name);
          var n=name => name;
 
          //화살표 함수의 매개변수가 없을 경우
          var fun = () => {
               alert("Error");
          }
 
          //화살표 함수의 매개변수가 있을 경우
          var fun = (name, age) => {
               var msg= `${name}, ${age}`;
               return msg;
          }
            alert (fun('aa',3));
     </script>
</body>

 

[ JavaScript 이벤트와 이벤트 처리 ]

   - this.value = 자기 자신이 가지고 있는 value 

<body>
     <!-- 함수랑 태그랑 연결하는 이벤트 처리 -->
     <script>
          function fun1(){
               alert('a');
               alert('b');
               alert('c');
          }
          function fun2(){
               alert('d');
               alert('e');
               alert('f');
          }
     </script>

     <button onclick="fun1()">나 클릭해줘 1 !</button>
     <button onclick="fun2()">나 클릭해줘 2 !</button>
</body>

나 클릭해줘 1 ! 버튼을 클릭했을 때 결과

<body>
     <ul>
          <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
          <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
          <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
     </ul>          
     <div id="result"></div>
</body>

버튼 클릭하면 알림창 표시하기

<body>
    <script>
        function order(coffee) {
            alert(coffee);
        }
    </script>
                                                                <!-- 자기 자신이 가지고 있는 value 값 -->
    <button value="아메리카노" onclick="order(this.value)">아메리카노</button>
    <button value="라떼" onclick="order(this.value)">라떼</button>
    <button value="카푸치노" onclick="order(this.value)">카푸치노</button>
    <button value="에스프레소" onclick="order(this.value)">에스프레소</button>
</body>

[ JavaScript 함수 표현식, 내장함수 ]

   - parseInt(문자열) : 문자열에서 숫자만 정수로 반환하는 함수

   - isNaN(수식) : Not a Number : 수식이 NaN이면 참, 아니면 거짓 

                           isNaN("hi"); 참  /  isNaN(4); 거짓

<body>
    <script>
        var n=100;
        var d=prompt('달러 입력'); // 만약 숫자말고 문자 입력하면 NaN이라고 뜸
        alert(n*parseInt(d)); // 이런식으로 하면 5$ 5달러 라고 문자열이랑 숫자를 같이 입력해도 숫자만 뽑아서 계산해줌
    </script>
</body>
<body>
    <script>
        var n=100;
        var d=prompt('달러 입력');
        if(isNaN(d)) {
            alert("다시 입력");
        }
        else {
            alert(n*d);
        }
    </script>
</body>

 

[ JavaScript 함수 표현식, 타이머 함수 ]

  - setTimeout() : 저장된 시간이 지난 후 한번 실행하는 함수

  - setInterval() :  지정된 시간마다 계속 실행하는 함수

  - clearTimeout() : setTimeout을 중지시키는 함수

  - clearInterval() : setInterval을 중지시키는 함수

  - 함수이름(function)() { 실행코드() }); setTimeout(function() { 실행코드() }, 시간);

<body> //setTimeout()
    <script>
        // 5초가 지나면 '5초가 지났다' 
        setTimeout(function () {
            document.write('5초가 지났다');
        }, 5000)
    </script>
</body>

<body> // setInterval()
    <script>
        var n=1;
        function msg() {
            console.log(`사이트 들어온지 ${n++} 초 되었다.`);
            if(n > 10){
                clearInterval(timeOut);
                alert('끝');
            }
        }
        var timeOut = setInterval(msg, 1000); // 1초마다 msg 함수 실행함
    </script>
</body>

<body>  // setInterval() 위에꺼랑 똑같은 다른 방식 !
    <script>
        var n = 1;

        var timeOut = setInterval(function() {
            document.write(n + '초가 지났다<br>');
            n++;
        }, 1000) // 1초 단위로 1초 지났다 2초 지났다

        setTimeout(function() {
            clearInterval(timeOut);
        }, 10000); // 10초가 될때 끝
    </script>
</body>

<body>
    <script>
        // 콜백함수 (call back) : 다른 함수가 실행을 끝낸 뒤 실행되는 callback
        // setTimeout(콜백함수, 시간, 인수);
        function msg(message) {
            document.write(message);
        }
        setTimeout(msg, 5000, '5초 지났다');
    </script>
</body>

 

[ JavaScript 함수 표현식, 생성자 함수 ]

   1. 객체 만들 때 : var 객체명 = { 프로퍼티 : 데이터, 프로퍼티 : 데이터 ... 함수: function }

   2. 객체 반환 함수(생성자 함수) 

<body>
    <script>
        // 생성자 함수
        function student(name, age, major, loc) {
            return {
                name,
                age,
                major,
                loc
            }
        }
        var tom = student('tom', 33, '컴공', 'seoul'); // student tom = new student('tom',33,'컴공','seoul')
        console.log(tom);

        var juli = student('juli', 30, '화공', 'siheung');
        console.log(juli);
    </script>
</body>

<body>
    <script>
        // 생성자 함수
        var student = {
            name: 'tom',
            loc: 'seoul',
            age: 23,
            show: function() {
                console.log(`${student.name}`);
            }
        }
        student.show();
    </script>
</body>

<body>
    <script>
        // 생성자 함수
        var student = {
            name: 'tom',

            show: function() {
                console.log(`${student.name}`);
            }
        }

        var student2 = {
            name: 'juli',

            show: function() {
                console.log(`${student2.name}`);
            }
        }
        student.show();
        student2.show();
    </script>
</body>

<body>
    <script>
        // 생성자 함수 // 함수를 하나 만들어서 함수명만 객체에 넣어서 호출하기
        var student = {
            name: 'tom',
            show:show   // 뒤에 show가 함수명
        }

        var student2 = {
            name: 'juli',
            show:show
        }
       
        function show() {
            console.log( `${this.name}` );
        }
       
        student.show();
        student2.show();
    </script>
</body>

<body>
    <script>
        // 생성자 생성 : 매개변수 갯수와 이름이 똑같아야함
        function Student(name, age, loc, major) {
            this.name=name;
            this.age=age;
            this.loc=loc;
            this.major=major;
            this.show=function() {
                console.log(`${name}은 ${age}살이다.`)
            }
        }

        // 객체 생성
        var stu1 = new Student('jack', 23, 'seoul', 'computer');
        var stu2 = new Student('juli', 30, 'seoul', 'java');

        // 함수 호출
        stu1.show();
        stu2.show();
    </script>
</body>

<body>
    <script>
        // 생성자 함수
        function order(price, size, color, title) {
            this.price=price;
            this.size=size;
            this.color=color;
            this.title=title;
        }
        // 공통 항목 : 생성자 함수로 부터 값을 공통적으로 뽑아내는 prototype 함수
        order.prototype.market='컬리';
        order.prototype.delivery='CJ대한통운';

        order.prototype.result=function() {
            alert(this.market + ',' + this.delivery);
            alert(this.price + ',' + this.size + ',' + this.color + ',' + this.title);
        }

        var p1 = new order('50000','M','black','shirt');
        var p2 = new order('60000','S','pink','t-shirt');

        function show(e) {
            if(e=='one') {
                p1.result();
            }
            else if (e=='two'){
                p2.result();
            }
        }
    </script>

    <div>
        <button value="one" onclick="show(this.value)">shirt</button> <!--this는 버튼태그 value는 one!-->
        <button value="two" onclick="show(this.value)">t-shirt</button> <!-- onclick의미 버튼 클릭했을 때 show 함수 호출 -->
    </div>
</body>

실무에서 많이 사용하는 방식

<body>
    <script>
        // 생성자 함수
        function Score(name, a, b, c) {
            this.name=name;
            this.a=a;
            this.b=b;
            this.c=c;
        }
        Score.prototype.result=function() {
               return ((this.a+this.b+this.c)/3).toFixed(3) + '<br>';
        }

        var s1 = new Score('lee', 100, 69, 34);
        var s2 = new Score('kim', 90, 56, 34);
        var s3 = new Score('park', 100, 33, 100);
       
        document.write(s1.result()); // 평균 출력
        document.write(s2.result());
        document.write(s3.result());
    </script>
</body>

.toFixed(3)함수사용 소숫점 3째자리 까지

 

[ 복습 문제풀이 ]

<!DOCTYPE html>
     <head>
     </head>
     <body>    
          <script>
               //4가지 과목 점수를 prompt로 입력받아 출력하고 평균 구하기 
               let score1=prompt('첫번째 과목 점수 입력','숫자로만 입력');
               let score2=prompt('두번째 과목 점수 입력','숫자로만 입력');
               let score3=prompt('세번째 과목 점수 입력','숫자로만 입력');
               let score4=prompt('네번째 과목 점수 입력','숫자로만 입력');
               
               // Number 함수는 문자열을 숫자로 변환하는 함수 !!!
               let avg=(Number(score1)+Number(score2)+Number(score3)+Number(score4))/4;
               
               document.write('점수: '+score1+'점');
               document.write('<br>');
               document.write('점수: '+score2+'점');
               document.write('<br>');
               document.write('점수: '+score3+'점');
               document.write('<br>');
               document.write('점수: '+score4+'점');
               document.write('<br>');

               document.write("네과목 점수의 평균: " + Math.round(avg)); // 평균 소숫점 반올림
          </script>
     </body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <style>
             /* 제목을 화면 가운데에 가운데 정렬하기 위한 스타일 */
             h2 {
            text-align: center; /* 텍스트를 가운데 정렬 */
            margin: 0; /* 위아래 여백 제거 */
            padding: 20px 0; /* 좌우 여백 제거 */
        }
    </style>
</head>
<body>    
        <script>
            document.write('<h2>4의 배수일까 아닐까</h2>');
            var num = prompt('숫자를 입력하시오.');
            if (num !== null) { // 사용자가 취소하지 않았을 경우에만 계속 진행
                if (num % 4 == 0) {
                    document.write(num + '는 4의 배수입니다.');
                } else {
                    document.write(num + '는 4의 배수가 아닙니다.');
                }
            }
        </script>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>연습문제 2</title>
	<style>
		body {
			font-size:1.2em;
			text-align:center;
		}
		p {
			color:#f00;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h2>3의 배수 찾기</h2>

	<script>
		var i;
		var userNumber = parseInt(prompt("몇 까지 3의 배수를 찾을까요?", "100"));
		var count = 0;

		if (userNumber !== null) {
			for (i = 1; i <= userNumber; i++) {
				if (i % 3 === 0) {
					count++;
					document.write(i + ", ");
				}
			}
			document.write("<p>" + userNumber + "까지 3의 배수의 갯수 : " + count  + "</p>");
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<body> 
    <script>
        // 생성자 함수
        function order(price, size, color, title) {
            this.price=price;
            this.size=size;
            this.color=color;
            this.title=title;
        }
        // 공통 항목 : 생성자 함수로 부터 값을 공통적으로 뽑아내는 prototype 함수
        order.prototype.market='컬리'; 
        order.prototype.delivery='CJ대한통운';

        order.prototype.result=function() {
            alert(this.market + ',' + this.delivery);
            alert(this.price + ',' + this.size + ',' + this.color + ',' + this.title);
        }

        var p1 = new order('50000','M','black','shirt');
        var p2 = new order('60000','S','pink','t-shirt');

        function show(e) {
            if(e=='one') {
                p1.result();
            }
            else if (e=='two'){
                p2.result();
            }
        }
    </script>

    <div>
        <button value="one" onclick="show(this.value)">shirt</button> <!--this는 버튼태그 value는 one!-->
        <button value="two" onclick="show(this.value)">t-shirt</button> <!-- onclick의미 버튼 클릭했을 때 show 함수 호출 -->
    </div>
</body>
</html>

실무에서 많이 사용하는 방식

[ JavaScript 이론 ]

웹 요소를 제어하는 자바 스크립트 ! 

HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등일 지정한다.

여기에 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.

자바스크립트는 HTML이나 CSS와 함께 사용하여 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓는 것처럼 웹사이트 UI 부분에 많이 활용한다.

 

[ JavaScript 용어와 기본 입출력 방법 ]

알림 창 출력하기 : alert는 가장 많이 사용하는 간단한 대화 상자. 웹 브라우저에서는 작은 알림창을 열어 메시지를 표시할 수 있다. alert(메시지)

확인 창 출력하기 : confirm은 사용자가 [확인] 이나 [취소] 버튼 중에서 직접 클릭할 수 있다. confirm(메시지)

프롬포트 창에서 입력하기 : prompt은 텍스트가 있는 작은 창이다. 텍스트 필드 안에 간단한 메시지를 입력할 수 있다.

prompt(메시지, 기본값)

웹 브라우저 화면에 출력을 담당하는 document.write()문 : 큰따옴표나 작은따옴표 사이에 입력한 내용이 브라우저 화면에 그대로 표시된다. 따옴표 안에 HTML태그와 함께 사용할 수 있다.

콘솔 창에 출력하는 console.log() 문 : 콘솔 창에 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있습니다. 웹 브라우저에서 콘솔 창 열어서 오류를 찾고 수정도 가능하다.

 

[ JavaScript 변수 알아보기 ]

변수(variable)란 : 프로그램이 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가르킴. 반면 값을 한번 지정하면 바뀌지 않는 데이터를 상수(constant)

변수 선언 : 변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여주어야하는데, 이것을 변수선언 => var 변수명

1. var (variables) : 변수의 재선언 가능, 내가 썻던 변수를 또 사용 가능 (주로 var 아니면 let이 사용됨)

2. let : 변수의 재선언이 불가능 !!! (요새는 let을 가장 많이 사용)

3. const (constant) : 잘 사용되지 않음

 

4. 호이스팅 (hoisting) :

자바스크립트에서 변수를 사용할 때 조심해야할 개념이 있다. 바로 호이스팅 ! 호이스팅이란 '끌어올린다'를 뜻한다. 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것.

var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined 값을 가질 수 있다. 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타낸다.

   => var 대신 주로 let을 사용하는 이유 !!  p.519, 526

 

[ JavaScript 자료형 이해하기 ]

   정수 : 정수는 소수점 없는 숫자
   실수 : 실수는 소수점이 있는 숫자
   문자열 : 작은따옴표('') 큰따옴표("")로 묶은 데이터를 의미. 둘다 사용 가능
   논리형 : 불린(Boolean)이라고도 하며, 참(true)이나 거짓(false)의 값을 표현하는 자료형
   undefined : 자료형이 정의되지 않았을 때의 데이터 상태를 나타냄
   null : 데이터의 값이 유효하지 않은 상태를 나타냄
   배열 : 하나의 변수에 값을 여러 개 저장 할 수 있음. 배열은 여러 개의 데이터 값을 하나의 배열 이름으로 묶어서 선언함.

             배열명["값1, 값2, 값3"]

JavaScript 자료형 종류

 

[ JavaScript 연산자 이해하기 ]

   = 은 대입연산자, == 은 항등연산자 equal, === 은 데이터 유형까지 일치해야하는 연산

JavaScript 연산자 종류

 

 

논리 연산자 종류
비교 연산자 종류

[ JavaScript prompt()문과 parseInt()함수 ]

[ JavaScript 함수 ]

함수 : 여러 동작을 묶은 덩어리​ 동작해야 할 목적대로 묶은 명령을 함수(function). 즉 alert() 문이 자바스크입트에 포함되어 있는 여러 함수 중의 하나이다. alert() 함수는 알림 창을 표시할 때 쓰는 아주 많이 사용 되는 함수 ! 함수에 대한 정의를 호출 뒤에 해도 영향을 받지는 않지만 보통 함수 뒤에 호출을 한다.
함수 사용 이유 : 일종의 모듈화 작업
함수 선언 및 호출 : function 함수명() { 명령 }

[ 변수의 재선언과 재할당 ]
var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있다.

[ let을 사용한 변수의 특징 ]
ES6 이전의 자바스크립트 프로그램에서는 var 예약어만으로 변수를 선언했다. var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 프로그램 길이가 길어지다 보면 실수로 사용하는 변수를 재선언하거나 값을 재할당해 버리는 경우가 생기기도 한다.(=var의 단점)
그래서 ES6에서는 변수를 선언하기 위한 예약어로 let와 const가 추가 되었고, 되도록이면 var 예약어를 사용하지 않을 것을 권장한다.
예약어 var와 let, const의 가장 큰 차이는 스코프의 범위이다. var 함수 영역(레벨)의 스코프를 가지지만 let와 const는 블록 영역의 스코프를 가진다.

[ 블록 안에서만 쓸 수 있는 변수 ]
let 예약어로 선언한 변수는 변수를 선언한 블록( { } 로 묶은 부분) 에서만 유효하고 블록을 벗어나면 사용할 수 없다. 만약에 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 된다.

[ 재할당은 가능하지만 재선언은 할 수 없는 변수 ]
let 예약어를 사용하여 선언한 변수는 재할당할 수는 있지만 변수를 재선언할 수는 없다.

[ 호이스팅이 없는 변수 ]
var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined 값을 가질 수 있다. 바로 호이스팅 때문이다. 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메세지를 나타낸다.

[ const를 사용한 변수의 특징 ]
const로 선언한 변수는 상수변수(constant variable)이다. 상수는 프로그램 안에서 변하지 않는 값을 뜻한다. cost로 할당한 변수는 재선언 하거나 재할당할 수 없다.

[ 자바스크립트 변수 사용 방법 꿀팁 !!! ]
1. 전역 변수는 최소한으로 사용한다. (거의 사용하지 않음)
2. var 변수는 함수의 시작 부분에서 선언한다.
3. for문에서 카운터 변수를 사용할때는 var 예약어를 사용하지 않는다.
   1) 블록 밖으로 var 선언 var i; for(i=1;i<=n;i++) { }
   2) let를 사용하여 블록 변수로 선언 for(let i=1;i<=n;i++) { }
4. ES6을 사용한다면 예약어 var 보다 let을 사용하는 것이 좋다.

 

[ JavaScript 함수 표현식, 익명함수 ]

익명함수는 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다.

익명 함수는 이름이 없어서 함수 자체가 식(expression)이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수도 있다. : 익명함수는 변수가 함수명을 대신한다.

 

[ JavaScript 함수 표현식, 화살표함수  ]

화살표함수는 ES6 버전부터는 => 표기번(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다. 익명 함수에서만 사용할 수 있다. (매개변수) => { 함수내용 }

 

[ JavaScript 함수 표현식, 즉시 실행 함수 ]

한 번만 실행하는 함수, 나중에 호출 같은 거 할수 없음.

 

 

[ JavaScript 이벤트와 이벤트 처리기 ] 
[ 이벤트 알아보기 ]
브라우저의 이벤트(event) 개념이 도입되면서 새롭게 구현된 것이다. 웹 브라우저를 기본으로 실행하는 자바스크립트에서 이벤트는 중요한 개념이다.
이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다.
하지만 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것 처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다.


[ 이벤트 처리기 알아보기 ]
이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것이다. 먼저 HTML 태그 안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그 다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다 <태그 on이벤트명 = "함수명">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[ parseInt와 Number의 차이점 ]  

<JavaScript> parseInt()와 Number()는 어떤 차이가 있을까? (tistory.com)

 

<JavaScript> parseInt()와 Number()는 어떤 차이가 있을까?

자바스크립트에서 문자를 숫자로 변환하기 위해 사용하는 방법으로는 parseInt()와 Number()가 있다. 더 간단하게는 문자 앞에 +를 붙여 숫자로 바꾸기도 한다. 어쨌든 둘 다 숫자로 변환해주니까 그

haruisshort.tistory.com

 

728x90

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

29일차 JavaScript [ 문서 객체 모델, Node ]  (1) 2024.04.01
28일차 JavaScript [ 객체, 내장객체 ]  (0) 2024.03.29
26일차 CSS [ 배치, 플렉스 박스 ]  (0) 2024.03.27
25일차 CSS [ 기본태그 ]  (0) 2024.03.26
24일자 HTML < 기본 태그, Visual Studio Code >  (0) 2024.03.25
'네이버 클라우드 부트캠프/복습 정리' Related Articles more