ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • javascript
      JAVASCRIPT 2022. 1. 11. 00:43

      지난주에 이어서,

       

      1. 데이터 타입. etc

      <script>
      //논리 타입
      var logical = false;
      logical = true;
      //logical = True;
      var apple = 0;
      if(apple){
      console.log('사과가 ' + apple + '개 있습니다.');
      } else{
      console.log('사과가 하나도 없습니다.');
      }
      //null
      var banana = '바나나';
      banana = null;
      console.log(typeof banana);
      </script>
      </body>

       

      2. 연산자

      (1) 비교연산자

       

      <body>
      <script>
      var a = 5, b = '5';
      // == 연산자는 암묵적으로 문자열 내부에 숫자가 있다면 자동으로 숫자로 변환한 후 비교합니다.
      // ===을 사용하면 타입까지 일치하는지 비교합니다.
      console.log(a == b); // 동등 비교 -> true
      console.log(a === b); // 일치 비교 -> false
      //동등 비교는 결과 예측이 힘들기 때문에 조심해야 합니다.
       
      console.log('====================');
      console.log('0' == ''); -> false
      console.log(0 == ''); -> true
      console.log(0 == '0'); -> true
      console.log(false == 'false'); -> false
      console.log(false == '0'); -> true
       
      console.log('====================');
       
      //일치 비교에서는 NaN을 주의해야 합니다.
      //NaN은 자신과 일치하지 않는 유일한 값입니다.
      console.log(NaN === NaN); -> false
       
      //문자열 비교
      console.log('====================');
      console.log('apple' === 'APPLE'); -> false
       
      // 문자열의 대소 비교는 유니코드 문자번호 기준입니다.

       

      // 영어 대문자 < 영어 소문자 < 한글
      // 같은 문자형태일 경우 사전 등재 순서로 판단합니다.
      console.log('peach' < 'zebra'); ->true
      console.log('감자' > '복숭아'); -> false
      console.log('ZEBRA' > 'apple'); -> false
      </script>
      </body>
       

      (2) 산술연산자

       

      <body>
      <script>
      console.log(27 % 5); -> 2
      var num = 3;
      console.log(num ** 3); -> 27
      console.log(Math.pow(num, 3)); -> 27
      console.log('==========================');
      //단항 산술 연산자 ++, --
      var x = 3;
      x++;
      ++x;
      x--;
      console.log('x: ' + x); -> x: 4
       
      //전위(prefix), 후위(postfix) 연산
       
      var a = 10, result;
      result = a++; //선연산 후증감
      console.log(`result: ${result}, a: ${a}`); -> result: 10, a: 11
      result = ++a; //선증감 후연산
      console.log(`result: ${result}, a: ${a}`); -> result: 12, a: 12
      </script>
      </body>

      (3) 삼항 연산자

      <body>
      <script>
      var score = 20;
      var result = score >= 60 ? '합격' : '탈락';
      console.log('시험결과: ' + result);
      /*가지고 있는 돈 액수를 입력 받아서 액수가 5000 이상이면, '김치찌개'를,
      5000 미만이면 '라면'을 저장하고 alert으로 선택된 음식을 출력하세요. */
      var money = +prompt('가지고 있는 돈을 입력하세요.');
      var food = money >= 5000 ? '김치찌개' : '라면';
       
      alert('선택된 음식: ' + food);
       
      </script>
       
      </body>
       
       

      3. 조건문 (자바랑 똑같아서 신기했다.)

      <body>
      <script>
      var num1 = 1;
      var num2 = 2;
      if(num1 > num2 && true) {
      console.log(true);
      } else {
      console.log(false);
      }
      var point = +prompt('점수를 입력하세요: ');
      alert('당신의 점수:' + point + '점');
      if(point >= 90){
      if(point >= 95){
      alert('A+ 학점입니다.');
      }else{
      alert('A 학점입니다.');
      }
      }else if(point >= 80){
      alert('B 학점입니다.');
      }else if(point >=70){
      alert('C 학점입니다.');
      }else if(point >= 60){
      alert('D 학점입니다.');
      }else{
      alert('F 학점입니다.');
      }
      </script>
       
      </body>
       
      4. 반복문
      (1) 반복문
      <body>
      <script>
      //Math.random(): 0.0이상 1.0미만의 랜덤값.
      //Math.floor(): 내림, Math.ceil(): 올림, Math.round(): 반올림
       
      var rn = (Math.random()*10) + 1;
      console.log(rn);
       
      //1~10까지의 총합을 구하는 로직
      var total = 0;
       
      /*
      var n = 1; //begin
      while(n <= 10){ //end
      total += n;
      n++; //step
      }
      */
      for(var n=1; n<=10; n++){
      total += n;
      }
      </script>
       
      </body>
       
      (2) 탈출문
      <body>
      <script>
      for(var i=0; i<=10; i++){
      if(i === 5){
      break;
      }
      console.log(i);
      }
      while(true){
      var rn = Math.floor(Math.random()*6);
      console.log('랜덤값: ' + rn);
       
      if(rn === 3){
      console.log('반복문 종료!');
      break;
      }
      }
      </script>
      </body>
       
       
      5. 타입캐스팅
      (1) 암묵적
      <body>
      <script>
      var ex = 10 + '20';
      console.log('ex:' + ex);
      ex = 10 * '3';
      console.log('ex:' + ex);
      var ex2 = 100 + ''; // '100'
       
      //문자열 타입의 암묵적 숫자 변환
      ex2 = + '550';
      ex2 = true + '';
      //논리 타입의 암묵적 숫자 변환
      ex2 = +false;
      ex2 = +null;
      console.log(ex2);
      console.log(typeof ex2);
      </script>
       
      </body>
       
       (2) 명시적
      <body>
      <script>
      var a = 10, b = 20;
      var result = a + String(b);
      result = a.toString() + b.toString();
      //숫자가 아닌 값을 숫자 타입으로 변환하는 방법
      var m = '10', n = '3.14';
      result = Number(m) + Number(n);
      result = parseInt(m) + parseFloat(n);
      //논리 타입이 아닌 값을 논리 타입으로 변환하는 방법
      var t = 'Hello', f = '';
      colsole.log(Boolean(t));
      colsole.log(Boolean(f));
      console.log(!!'hello');
      </script>
       
      </body>
       
      6. 배열
      (1) 기본
       
      <body>
      <script>
      var fruits = ['딸기', '포도', '복숭아', '사과'];
       
      console.log('배열의 길이: ' + fruits.length);
       
      fruits[1] = '수박';
      console.log(fruits);
       
      fruits[4] = '파인애플';
      console.log(fruits);
      console.log('배열의 길이: ' + fruits.length);
      fruits[fruits.length] = '망고';
      //배열 요소 참조
      var apple = fruits[3];
      for(var i=0; i<fruits.length; i++){
      console.log(`${i+1}번째 과일: ${fruits[i]}`);
      }
      </script>
       
      </body>
       
      (2)push, shift
      <body>
      <script>
      var foods = ['볶음밥', '닭강정', '피자'];
      console.log(foods);
      //pop: 배열의 마지막 요소를 제거하고, 제거한 요소를 반환합니다.
      var lastElement = foods.pop();
      console.log(lastElement);
      console.log(foods);
      //push: 배열의 끝에 요소를 추가합니다.
      foods.push('파스타');
      foods.push('족발');
      console.log(foods);
      //shift: 배열의 맨 첫번째 요소를 제거하고, 그 위치에 요소를 추가합니다.
      var firstElement = foods.shift();
      console.log(firstElement);
      console.log(foods);
      //unshift: 배열의 맨 첫번째 위치에 요소를 추가합니다.
      foods.unshift('떡볶이');
      console.log(foods);
      </script>
       
      </body>
       
      (3)2d
       
      <body>
      <script>
      //우리반 학생들 4과목 점수 (국영수탐)
      var kim = [67,89,92,32];
      var lee = [100,87,55,67];
      var ourStudentScores= [
      [100,90,32,83],
      [34,56,78,64],
      [21,45,67,78],
      [100,56,89,87]
      ];
      console.log(ourStudentScores);
      console.log(ourStudentScores[1]);
      console.log(ourStudentScores[0],[2]);
      //우리반 한 학생의 평균의 총합을 저장할 변수
      var ourAverages = 0;
       
      for(var studentScores of ourStudentScores){
       
      var eachTotal = 0; //한 학생의 4과목 총점
      for(var score of studentScores){
      eachTotal += score;
      }
      //한 학생의 평균 점수
      var eachAvg = eachTotal / studentScores.length;
      ourAverages += eachAvg;
      }
      var classAvg = ourAverages / ourStudentScores.length;
      console.log('우리반 평균: ' + classAvg + '점');
      </script>
       
      </body>
       
      (4) splice (배열의 특정 요소를 제거!)
       
      <body>
      <script>
      //splice(): 배열의 특정 요소를 제거합니다.
      var foods = ['떡볶이', '오뎅', '김말이', '닭꼬치'];
      console.log(foods);
       
      var delFood = foods.splice(1,2);
      console.log(delFood);
      console.log(foods);
      foods.splice(0,1, '치킨', '파스타');
      console.log(foods);
       
      //삭제 요소 개수를 0개 주면 삭제 없이 데이터를 추가할 수도 있습니다.
      foods.splice(2,0,'피자');
      console.log(foods);
      //개수를 지정하지 않으면 시작 인덱스부터 끝까지 삭제됩니다.
      foods.splice(2);
      console.log(foods);
      foods.push('보쌈', '닭발');
       
      var input = '보쌈';
      var idx = foods.indexOf(input);
      if(idx >= 0){
      foods.splice(idx, 1);
      console.log('삭제 완료!');
      }else{
      console.log('데이터가 없습니다.');
      }
      console.log(foods);
      </script>
       
      </body>
       
      7. 객체
      (1)
      <body>
      <script>
      //객체 생성
      var dog = {
      name : '뽀삐',
      kind : '시츄',
      age: 3,
      favorite : ['산책', '간식']
      };
      var cat = {
      name : '야옹이',
      kind : '페르시안',
      age : 2,
      favorite : ['낮잠', '츄르']
      };
      console.log(typeof cat);
       
      //객체 프로퍼티 참조
      console.log(dog.name);
      console.log(cat.name);
      console.log(cat.age);
      console.log(cat.favorite[1]);
      dog.favorite.push('꼬리 흔들기');
      console.log(dog);
      //프로퍼티 참조 다른 방식
      console.log(dog.kind);
      console.log(dog['kind']);
       
      //프로퍼티 값 수정
      dog.age = 5;
      cat.favorite[1] = '고등어';
      console.log(cat);
      console.log('=====================');
      //프로퍼티 동적 추가
      dog.owner = '김철수';
      console.log(dog);
       
      //프로퍼티 삭제
      delete dog.owner;
      console.log(dog);
      //for ~ in (ES6)
      console.log('==================');
      for(var key in cat){
      console.log(cat[key]);
      }
       
      console.log('==================');
      //객체의 프로퍼티 키의 존재 유무 확인 (in 키워드)
      var falg = 'kind' in cat;
      console.log(flag);
       
      </script>
       
      </body>

       

      'JAVASCRIPT' 카테고리의 다른 글

      javascript  (0) 2022.01.17
      javascript  (0) 2022.01.14
      javascript  (0) 2022.01.13
      javascript  (0) 2022.01.12
      javascript  (0) 2022.01.12

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바