javascript 정리

JavaScript 정리

jQuery를 학습하기 전에 JavaScript를 정리하고자 한다.

배열 선언

- push 메서드를 사용하면 배열의 가장 마지막에 요소를 추가하므로 당연 배열크기가 늘어 나게된다. 따라서 javascript의 동적배열을 구성할 수 있겠다.

- for in 구문 역시도 봐 두기 바란다.

window.onload = function() { testArray(); } testArray = function() { var str = ""; var arr1 = new Array("aa","bb","cc"); // 배열선언 방법 1 var arr2 = ["aa","bb","cc"]; // 배열선언 방법 2 var arr3 = new Array(3); // 배열선언 방법 3 arr3[0] = "aa"; // 배열할당 방법 arr3[1] = "bb"; arr3[2] = "cc"; for (var i in arr3) { str += arr3[i]; } arr3.push("dd"); // 배열할당 방법 배열의 가장 마지막에 요소추가 배열크기가 증가함. alert("arr3.lehgth = " + arr3.length + "\n" + arr3.toString()); }

switch 문

switch( data ) { case "a" : 실행; break; case "b" : 실행; break; default : 실행; }

function 형태

- ()()를 이용해서 function 호출 없이 자동실행 하는 function 구문

<script> (function() { alert(" 명시적인 호출없이 자동 실행되는 function이다"); })(); </script>

- 변수명에 할당 하는것 처럼쓰는 형태

test01 = function(x, y) { alert("x=" + x + ", y=" + y); } test01(2,3);

- 함수를 이용한 객체 생성 및 멤버 및 멤버함수 사용예

- javascript에는 class라는 명령어는 없다. 함수를 이용해서 class를 만들고 사용하는 간단한 예이다.

- 일반적으로 class를 생각해 보면 멤버변수, 멤버함수, 생성자를 떠올리게 되는데 하기 예로 보면 function MkDiv() 의 MkDiv()이 문구가 class 명이고 또한 생성자가 되겠다.

// class function MkDiv() { this.element = null; // 멤버변수 this.make = function(id, x, y, c) { // 멤버함수 this.element = document.createElement("div"); this.element.id = id; this.element.style.width = x + "px"; this.element.style.height = y + "px"; this.element.style.backgroundColor = c; console.log("element :" + this); return this.element; } } window.onload = function() { // 객체생성 var md = new MkDiv(); var colors = ["Red","Orange","Yellow","Green","Blue","Navy","Violet"]; for (var i=0; i < colors.length; i++) { var newDiv = md.make("id" + i, 30, 300, colors[i]); newDiv.style.float = "left"; document.body.appendChild(newDiv); } }

내장객체

Date 객체

보통은 DB에 들어있는 날짜값을 포맷에 맞게 표시하는게 일반적이지만 간혹 날짜를 더하거나 빼거나 해서 처리해야 할 경우도 있을 것이다. Data 내장 객체에 대한 얘기는 접고 moment.js url을 남긴다.

moment url : http://momentjs.com/guides/

사용예 url : http://pikabu.tistory.com/50

var m = moment(); // 현재 new Date() 같다.

m.format("YYYY-MM-DD HH:mm:ss");

/** * moment 시간 초기화 * moment 개체에는 많은 초기화 방법이 있다. * */ // 1. 현재시각 var m1= moment(); // 2. 밀리초로 시간을 설정할 수 있다. var m2 = moment(1368543600000); console.log("밀리초로 시간을 설정할 수 있다. 1368543600000 밀리초는 ->" + m2.format("YYYY-MM-DD HH:mm:ss dddd")); // 3. Date.parse에서 해석 가능한 문자열로 지정 moment("June 12, 2016"); // 4. Date오브젝트 로 초기화 moment(new Date(2016,7, 12)); // 5. 배열로 초기화 moment([2016, 7, 12]); // month는 -1한 값이다. // 6. 다른 moment 오브젝트로 초기화 moment(moment([2016, 7, 12])); // 7. 포맷형식을 통한 초기화 moment("2016-08-08", "YYYY-MM-DD"); moment("20160808","YYYYMMDD"); moment("2016년08월08일","YYYY년MM월DD일"); // 실제로는 "YYYYMMDD" 만 지정해도 된다. // 8. DB Date, timestamp 데이터인 경우는 Date객체를 이용할 수 있다. moment(new Date(timeValue)).format("YYYY/MM/DD HH:mm:ss dddd"); /** * moment 출력 */ var m = moment(); //format을 지정하여 출력 m=format("YYYY년MM월DD일 ddd"); //각 단위 메소드 console.log("m.year() -> " + m.year()); // 년 console.log("m.month()-> " + m.month()); // 월 ※ 0〜11의 값 console.log("m.date() ->" + m.date()); // 일 console.log("m.day() -> " + m.day()); // 요일 console.log("m.hours() -> " +m.hours()); // 시 console.log("m.minutes() -> " + m.minutes()); // 분 console.log("m.seconds()-> " + m.seconds()); // 초 console.log("m.milliseconds() -> " + m.milliseconds())"; // 밀리 초

m.month() 는 0~11 이다. 

m.day() 요일이다. 0~6 까지 수를 갖으며 일요일이 0이다.

- 요일을 한글로 표기

//lang:ko를 등록한다. 한번 지정하면 자동적으로 사용된다. moment.lang('ko', { weekdays: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"], weekdaysShort: ["일","월","화","수","목","금","토"], }); // moment를 생성 var m = moment("May 15, 2013"); // 한국어로 출력 m.format("MM/DD (ddd) dddd"); // => 07/12 (수) 수요일 // 다시 영어로 출력하고 싶을 때 m.lang("en").format("MM/DD (ddd) dddd"); // => 07/12 (Wed) Wednesday

- 이번달 1일의 요일 얻기

// day메소드가「요일」(0〜6) 으로 반환되며 date 메소드에서는 「일」 (1〜31)로 반환된다. moment().date(1).day(); // => 3 （수요일）

- 이번주 월요일의 정확한 타임스탬프 얻기

moment() .day(1) // day로 요일 지정. 0:일요일 〜 6:토요일 .hours(12) // 12시를 지정 .minutes(0).seconds(0).milliseconds(0) // 이걸 지정하지 않으면 현재 시각의 분,초가 지정된다. .format("X"); // => 1368414000

- 지정한 날이 존재하는지 유무

moment("2016-02-30", "YYYY-MM-DD").isValid(); // => false

- 오늘부터 30일 후의 날짜

moment().add("days", 30).format("YYYY년MM월DD일"); // => 2016년08월11일

- 이번달은 몇일 까지 있는지

moment().daysInMonth() // => 31

- 특정일로 부터 몇일 지났는지

moment().diff(moment([2016, 3, 1]), "days");

- A날짜가 B날짜 보다 미래인지 판단

var momentA = moment([2016, 3, 1]); var momentB = moment([2016, 5, 1]); momentA.isAfter(momentB); // => false

Documnet 객체

Window객체의 하위 객체로 웹 브라우저에 보여지는 HTML 문서의 태그 엘리먼트에 대한 정보와 그 문서 자체에 대한 여러 가지 속성에 대한 정보를 가지고 있다.

주요속성

linkColor : 링크 색상

alinkColor : 링크 누를 때 색상

vlinkColor: 방문한 링크의 색상

bgColor : 문서 배경색

fgColor: 문서 글자색

images : 문선에 있는 이미지들의 배열

layers : 문서에 있는 레이어들의 배열

cookie : 크라이언트에 저장된 쿠키 정보

domain: 현재 도메인 이름

title : 문서 제목

URL : 현재의 url

location : 현재 문서의 url

lastModified : 문서를 마지막으로 수정한 일자

referrer : 링크된 이전 문선의 URL 정보를 알아냄.

주요메서드

clear() : 문서내용을 지움

close() : 문서에 내용 입력후 닫는다.

open([MIME Type]) : 문서에 내용 입력을 준비한다.

getSelection() : 마우스로 드래그한 문자열을 반환(IE 지원 안함)

eval(수식) : 문자열을 객체로 변환

toString() : 오브젝트를 문자열로 변환

valueOf() : 오브젝트의 값을 표시

getElementById

getElementByTagName

createElement