자바스크립트 정리1

스터디/자바스크립트

자바스크립트 정리1

고무곰(GomuGom) 2017. 8. 9. 22:56

<!DOCTYPE html>

// [ 빈 데이터에 관련된 자료형 ]
      // 'undefined', null, ""
      // 변수 선언 후 초기화하지 않으면 undefined
   var undefi;
   console.log(undefi); // undefined 찍힘
   ////////////////////////////////

// [ confirm("문자열"), prompt(" ")]
   var confirmCheck = confirm("최종 승인하시겠습니까?");
   console.log(confirmCheck); // true or false 반환
   /////////////////////////////////

// [ 문자->숫자, 숫자->문자 변환 ]
   // 1. 문자->숫자
   var str2 = "10"; // 문자 데이터 10
   var sum1 = Number(str2) + 5;
   console.log(sum1); // 15출력
   // 2. 문자->숫자
   var sum2 = parseInt(str2) + 2; // parseInt("문자열") : 정수로 변환
   var sum3 = parseFloat(str2) + 3.4; // parseFloat("문자열") : 실수로 변환
   /////////////////////////////////

// [ indexOf("찾을 문자열") : 리턴 => 찾을 문자열이 있으면 해당 인덱스, 없으면 -1을 반환]
   var str3 = "helloWorld hi";
   if ( str3.indexOf("hi") != -1 ){
      console.log( "hi의 시작 인덱스 : " + str3.indexOf("hi") );
   }
   /////////////////////////////////

// [ 배열관련 length, push ]
   var arr = [1,2,3,4,5];
   console.log("배열의 길이 : " + arr.length;
   arr.push(6); // 배열에 데이터 집어 넣기
   /////////////////////////////////

// [ 선언적 함수 선언 방식과 암시적 함수 선언 방식]
   // 1. 선언적 함수 선언
   function sumAll1(args1,args2){
      console.log("선언적 함수 선언");
   }
   // 2. 암시적 함수 선언
   var func = function(v1,v2){
      console.log("암시적 함수 선언");
   }
   ////////////////////////////////

// [ 가변인자 함수 ]
   // 1. arguments를 이용한 방식
   // 2. ... 을 이용한 방식(IE는 지원하지 않음)

// 1)
   function sum1(){
      var sum = 0;
      for ( var i=0; i<arguments.length; i++ ){
         sum += arguments[i];
      }
      return sum;
   }
   console.log(sum1(1,2,3,4,5));
   console.log(sum1(1,6));
   // 2)
   function sum2(...nums){ // 가독성은 arguments보다 좋다. but IE에서 지원하지 않음
      var sum = 0;
      for(var i=0; i<nums.length; i++){
         sum += nums[i];
      }
      return sum;
   }
   console.log(sum2(1,5));
   console.log(sum2(1,4,5,7,8));
   ///////////////////////////////////////

// [ 매개변수로 함수를 넘기는 콜백함수 ]
      // : 함수도 매개변수로 넘길 수 있다. 주로 이벤트처리 시에 많이 사용된다.

function callbackF(){
      return "callback 메서드";
   }

var callbackTest = function(callback){
      // 함수를 매개변수로 받아 함수를 리턴할 수도 있다. 내부에서도 수행할 수도 있고...
      callback();
      return callback(); // 함수를 리턴
   }

callbackTest(callbackF()); // 매개변수에 함수를 전달해 주었다.
   /////////////////////////////////////////

// [ 일정주기마다 수행하는 setInterval()메서드와 일정시간 후에 수행하는 setTimeout() 메서드 ]
      // 각 메서드를 수행하면 각 id를 반환하고 수행을 중단하려면 clearInterval(id), clearTimeout(id)를 하면 된다.
   var intervalId = setInterval(function(){
      console.log("setInterval");
   },1000); // 1초마다 수행

setTimeout(function(){
      clearInterval(intervalId); // id를 지정해 해제
   },10000); // 10초 뒤에 Interval 해제
   ///////////////////////////////////////////

// [ 인코딩, 디코딩 관련 함수 ]
   // 특히 한글 문자열을 주고 받을 때 인코딩, 디코딩이 필요한 경우가 있다.
   // escape()와 같은 인코딩 함수도 잇지만 특수문자는 인코딩되지 않는 등 문제가 있을 수 있음으로
   // 아래 방식을 자주 사용한다.
   var str4 = "안녕하세요.";
   // 인코딩 : encodeURIComponent("인코딩할 문자열");
   var encodeStr = encodeURIComponent(str4);
   // 디코딩 : decodeURIComponent("디코딩할 문자열");
   var decodeStr = decodeURIComponent(encodeStr);
   /////////////////////////////////////////////

// [ eval("문자열") 메서드 ] : 문자열을 자바스크립트로 그대로 수행하는 메서드
   console.log( eval("3 + 4") ); // 7 출력

</script>

저작자표시 비영리