200121 Date(), RegExp, Ajax

Date 생성자

날짜와 시간을 생성하는 생성자

// 생성자가 실행될때 그 순간의 날짜와 시간을 today변수에 대입
var today = new Date().toLocaleString();
//toLocaleString 날짜와 시간을 한국 표기법으로 변환해준다.

substring(x,y);
// x번째 글자부터 y번째 글자까지만 출력

day = today.substring(x, y);

// 지정한 시간마다 함수를 반복 호출
var 변수명 = setInterval(function(){
    실행문
}, 시간) // 1000 -> 1초

// 지정한 시간후에 함수 호출을 중지
setTimeout(function(){
    clearInterval(변수명);  //setInterval에서 설정한 변수명
}, 시간)

---

RegExp 정규표현식

특정한 규칙이나 패턴을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식언어. 문자열을 입력할때 특정한 조건을 주어 그 입력값이 맞는 검증하거나, 문자열에서 특정한 패턴이나 문자열이 있는지 검증하는 역할을 수행합니다.

// 정규표현식 객체 생성
// 형식1)
var 객체명 = new RegExp("패턴");

// 형식2)
var 객체명 = /패턴/;

예시)
var obj = new RegExp("코딩");
var str = "javascript python 자바 코딩";

// obj.test() : 패턴이 일치하면 true, 아니면 false
if(obj.test(str)){  // 'obj로 테스트(검사)하겠다 str를'
    console.log("해당 문자가 있다.");
} else {
    console.log("해당 문자가 없다.");
}

메타문자를 이용하여 정규 표현식 객체 만들기

/* 0~9까지 숫자가 오는지 검사 이걸 6번(6자리) - 1~4까지 숫자가 오는지 검사, 0~9까지 숫자가 오는지 검사 6자리 */
obj = /[0-9]{6}-[1234][0-9]{6}/;

// 한글 [가-힣]

// 영문 소문자 또는 숫자만 7개 이상 입력
obj = /([a-z]|[0-9]){7,}/;  //{7,}은 7개 이상이라는 의미
// 전체가 7자리 이상이여야 하기때문에 전체를()로 묶고 끝에 {7,}

---

Ajax

javascript(client)와 xml(server) 계열의 문서(xml, html, jsp, php, json)와 비동기통신 의미 웹페이지전체를 업데이트하지 않고 특정한 부분만 서버에서 데이터를 받아 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다.

// Ajax 객체 생성하는 방법
var 객체명 = new XMLHttpRequest()


 // 1. Ajax 객체 생성          
     var request = new XMLHttpRequest();

 // 2. 요청 준비 : 
 // open("전송방식", 'server url or file', [기본값:true]/false)
     request.open('get', "server url", true);
     // true : 비동기, false : 동기

 // 3. 데이터 요청 : send()
     request.send(); // 실제 통신 

 // 4. 데이터 수신 
     request.onreadystatechange = function(){
         if(request.readyState == 4){ // 서버 응답 완료 
                if(request.status == 200){ // 정상 응답 
                   // 비동기통신 성공 시 작업 내용  
                    result = document.getElementById("result");
                    result.innerHTML = request.responseText;  // text로 받는다.
                    // innerHTML : text -> html문서로 파싱
              }
          }
      }    

xml파일의 경우 직접 xml의 태그네임을 선택하여 element 가져온다.

result = document.getElementById("result");
var xml = request.responseXML;  // XML 형식으로 파싱하여 새로운 객체를 만듬
var name = xml.getElementsByTagName("name"); // xml의 name tag
var price = xml.getElementsByTagName("price");

for(var i=0; i < name.length; i++){
    result.innerHTML += "<h3>" + name[i].childNodes[0].nodeValue + "</h3>";
    result.innerHTML += "<h3>" + price[i].childNodes[0].nodeValue + "</h3>";
}

JSON파일은 내용이 객체로 이루어진 데이터 인데 JSON 파일 자체는 그것을 읽을 수가 없어서 따로 JSON으로 파싱을 해야한다.

result = document.getElementById("result");
// json 객체 파싱 : 응답 문자열 -> JSON 객체 생성
var obj = JSON.parse(request.responseText); // text로 가져온다음에 JSON으로 파싱