자바스크립트 정리1

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>

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
지역변수,전역변수 개념과 자바스크립트의 객체(Object) (2)	2017.08.10
자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08
자바스크립트로 제어하고 싶은 대상 선택하기(찾기) (0)	2017.08.04

악덕고용주의 개발 일기

자바스크립트 정리1

'스터디 > 자바스크립트' 카테고리의 다른 글

+ Recent posts

티스토리툴바