html부터 웹사이트 개발까지! - JavaScript편

Coosla·2022년 9월 14일
JavaScript자바스크립트
1

Html부터 웹사이트 개발까지!

목록 보기
3/7
post-thumbnail

이 게시글은 Front-End 웹프로그래밍을 참고하여 내용을 정리한 게시글입니다.

JavaScript 정리 후기

  • JavaScript의 아주 기초적인 내용을 다루고 있어 처음 JavaScript를 접하는 사람한테는 좋은거 같음.
  • 생략된 내용이 좀 있어서 TCPschool이나 생활코딩/w3school과 같은 프로그래밍 언어 공부 사이트를 같이 보면서 기초 내용을 탄탄히 쌓는게 좋을 듯.
  • 이 책과 프로그래밍 언어 공부 사이트을 이용해 기초 JavaScript를 공부했다면 모던 자바스크립트 튜토리얼 사이트를 보는 것을 추천함. 위 사이트에서 JavaScript 심화내용을 공부하면 될 듯.

✏️ JavaScript의 역사

  • 1995년 6월 넷스케이프사의 브렌단 아이히가 모카(Mocka)라는 이름으로 개발 시작
  • 모카가 라이브 스크립트로 명명됨
  • 라이브 스크립트는 서버 운용에 관련된 자바 프로그래밍 언어의 특징을 별도의 컴파일러가 필요없는 웹어서 실행되는 인터프리터 방식의 html 코드 내에 삽입되어 실행되도록 개발
  • 썬(SUN)사에서 자바 기능을 보완할 수 있는 클라이언트 기반의 스크립팅 언어 개발의 필요성 인식
  • 썬(SUN)사와 넷스케이프사와 함께, 1995년 12월 라이브스크립트를 확장한 JavaScript 버전 1.0을 출시
  • 이후 자바스크립트 다양한 버전 출시 및 지원

✏️ JavaScript란?

  • 웹문서에 이미지 및 문자열의 효과, 각종 연산제어 및 웹페이지 간 상호작용이 가능한 문서를 만들 수 있는 기능을 제공하는 스크립트 언어이다.

✏️ JavaScript의 특징

  • HTML 코드 내에 삽입되어 웹브라우저에서 해석되고 실행
  • 브라우저 안에 내장된 인터프리터에 의해 HTML 태그 명령을 수행하기 때문에 서버의 부하를 크게 줄임
  • 객체 컴포넌트 처리의 객체 지향형 언어이나 자바스크립트에는 클래스 선언 및 상속 기능이 없음
  • 멀티미디어 플러그 인을 통합하여 동적이고 상호 작용이 가능한 웹문서를 작성 가능
  • 변수 선언 등이 필요 없는 등 단순한 문법 체계를 가지고, 내장 함수 및 내장 객체를 제공하여 프로그래밍과 디버깅이 용이
  • 브라우저에서 실행되기 때문에 브라우저의 기능 확장을 위한 메소드 지원이 한계성이 있음
  • HTML에 포함되어 공개되는 프리웨어이므로 보안에 취약
  • 입력을 할 수 있는 폼 작성을 통해 사용자의 입력과 연산 처리 가능
  • HTML 태그와 CSS의 속성 값을 변경하여 동적 처리 가능
  • 브라우저 객체의 윈도우 크기와 모양을 변경할 수 있으며 새 윈도우 열기, 다른 사이트 연결과 전,후 윈도우로 전환하는 히스토리 제어가 가능
  • 웹서버와의 연결, 세션 스토리지, 위치정보서비스 등 자바스크립트 제어 활용 API 기능을 탑재한 다양한 웹 어플리케이션 제작 가능

✏️ JavaScript의 기본 구조

  • script태그를 사용하여 작성, script 태그의 속성으로 language, type, src, defer이 있다.
  • 자바스크립트의 내용을 직접 script태그 내부에 작성할수도 있고 src 속성을 이용해 외부 파일로 불러와 사용할 수도 있다.
  • script태그를 head 태그 부분에 삽입하면 다른 태그문장보다 우선적으로 해석 및 처리되어 어러 발생 시 디버깅이 용이

✏️ 변수와 상수 선언

✏️ 연산자

  • 부호 연산자
    • 피연산자의 부호를 반대로 하는 연산자인 음수 연산자(unary minus operator)
    • 양수 연산자는 대개 사용하지 않음
    • 형태
      var a = 1;
console.log(-a) // output : -1
  • 증감 연산자
    • 증가 연산자(increment operator, ++)와 감소 연산자(decrement operator, --)로 단항 연산자이다.
    • 전위 증감 연산 : 먼저 증가/감소 후 연산 수행
    • 후위 증감 연산 : 연산 수행을 진행한 후 증가/감소
    • 형태
      var a = 1;
console.log(a++) // output : 1, a : 2
console.log(++a) // output : 3, a : 3
console.log(a--) // output : 3, a : 2
console.log(--a) // output : 1, a : 1
  • 산술 연산자
    • 사칙 연산과 나머지 연산을 수행
    • 오퍼런드의 제약성
      • 나눗셈 : 모두 정수일 시 정수형 몫만 출력, 실수가 있을 시에는 몫과 나머지를 출력
      • 나머지 : 정수형에만 적용
  • 배정 연산자(assignment operator, =)
    • 우측에 있는 오퍼런드의 결과를 좌측에 있는 데이터 형에 맞게 배정
    • 여러 개의 대입 연산자를 사용하면 다중 대입문, 변수가 하나인 경우 단순 배정 연산자
      변수1 = 변수2 = ... = 대입값; // 다중 대입문
타입 변수명 = 대입값 // 단순 배정 연산자
    • 복합배정 연산자
      • a += b -> a = a + b
      • a -= b -> a = a - b
      • a *= b -> a = a * b
      • a /= b -> a = a / b
      • a %= b -> a = a % b
      • a <<= b -> a = a << b
      • a >>= b -> a = a >> b
      • a &= b -> a = a & b
      • a |= b -> a = a | b
      • a ∧= b -> a = a ∧ b
  • 관계 연산자
    • 두 오퍼런드 간의 대소 관계를 나타내는 것
    • a >= b : a가 b보다 크거나 같다
    • a > b : a가 b보다 크다
    • a <= b : a가 b보다 작거나 같다
    • a < b : a가 b보다 작다
    • a != b : a와 b가 같지 않다
    • a == b : a와 b가 같다
    • a === b : a의 타입과 b의 타입, a와 b가 같다
    • a !== b : a의 타입과 b의 타입, a와 b가 같지 않다
  • 논리 연산자
    • !a : 참이면 거짓, 거짓이면 참
    • a && b : a와 b 둘다 참일 때 참, 아니면 거짓
    • a || b : a와 b 둘 중 하나가 참일 때 참, 둘다 거짓일 때 거짓
  • 비트 연산자
    • 비트 단위로 논리 연산을 수행
    • a & b : a와 b의 대응되는 비트가 모두 1이면 1 반환 (비트 AND 연산)
    • a | b : a와 b의 대응되는 비트 중 하나라도 1이면 1 반환 (비트 OR 연산)
    • a ^ b : a와 b의 대응되는 비트가 서로 다르면 1 반환 (비트 XOR 연산)
    • ~a : a의 비트를 반전
    • a << b : 지정한 수 만큼 비트를 전부 왼쪽으로 이동 (left shift 연산), a를 2^b만큼 곱한것과 같음
    • a >> b : 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동 (right shift 연산), a를 2^b만큼 나눈것과 같음
    • a >>> b : 지정한 수만큼 비트를 전부 오른쪽으로 이동, 새로운 비트는 전부 0
  • 조건 연산자
    • 3항 연산자로 if문의 처리조건을 대신할 수 있음
    • 형태
      조건 ? 참일때 반환값 : 거짓일때 반환값

✏️ 제어문

  • if 문
    • 조건식이 참이면 내부 코드블록 실행, 거짓이면 내부 코드를 실행하지 않음
    • 형태
      if(조건식){
	내부 코드
}
  • if-else 문
    • 조건식이 참이면 if문 코드 블럭 실행, 거짓이면 else문 코드 블럭 실행
    • 형태
      if(조건식){
	if문 내부 코드
}
else{
	else문 내부 코드
}
  • if-else if-else 문
    • 조건이 여러개 일때 사용
    • 형태
      if(조건식1){
	내부 코드1
}
else if(조건식2){
	내부 코드2
}
else{
	내부 코드3
}
  • switch 문
    • 다중 if문이 많을 경우 프로그래밍의 복잡성을 줄이기 위해 사용
    • 형태
      // 주의사항
// - case/default문에 break 문을 넣지 않으면 모든 case/default문을 거쳐간다.
switch(조건식)
{
	case 조건값1:
		case1 내부 코드;
		break;
	case 조건값2:
		case2 내부 코드;
		break;
	default:
		default 내부 코드;
		break;
}

✏️ 반복문

  • for 문
    • 형태 
      for(초기화값; 조건식; 증감식){
	반복문;
}
  • while 문
    • 형태
      초기화식;
while(조건식){
	반복문;
	증감식;
}
  • break 문과 continue 문
    • break 문 : 현재의 반복문을 벗어나는 명령
    • continue 문 : 다음 반복으로 제어를 넘기고자 할 경우 사용하는 명령

✏️ 함수문

  • 함수문(function statement)
    • 반복적으로 실행되는 명령을 독립적으로 정의하여 필요할 때마다 호출하여 사용할 수 있는 기능을 제공
    • 함수는 자바스크립트 내부에 선언되어 있는 내장 함수와 사용자가 직접 정의하는 사용자 정의함수가 있다.
  • 형태
    function 함수명(매개변수1, 매개변수2, ... , 매개변수N){
	함수에서 처리할 명령;
	return 반환값
}
  • 내장 함수
    • evel(문자열인 숫자) : 문자열을 숫자로 변환
    • parseInt(문자열인 숫자) : 문자열을 정수로 변환
    • parsefloat(문자열인 실수) : 문자열을 실수로 변환
    • isfinite(숫자) : 숫자가 유한의 수이면 true, 아니면 false
    • isNan(input) : input이 문자이면 true, 숫자이면 false
    • number(objRef) : objRef를 숫자로 변환
    • string(objRef) : objRef를 문자로 변환
    • escape(문자열) : iso-Larin-1 문자셋을 16진수 아스키 값으로 변환
    • unescape(문자열) : 16진수 아스키 값을 iso-Larin-1 문자셋으로 변환

✏️ JavaScript에서의 객체지향

  • 제한적인 객체지향 언어 특징을 잡고 있고, 기본적으로 Array,Date,Math,String 등 내장 객체와 사용자 정의 객체가 존재
  • 객체들은 속성과 메소드를 가지고 있음
  • 객체 생성 방법은 Java, C# 등 객체지향 프로그래밍 언어와 동일
  • 객체의 각 멤버는 도츠연산자를 이용해 초기화
  • 사용자 정의 객체는 객체 생성 전에 생성자 함수를 정의한 다음 new 연산자를 통해 객체를 생성
  • this 예약어는 자기 자신을 나타냄
  • 자바스크립트의 객체지향 참고 사이트
  • 자바스크립트 객체 정리 사이트

✏️ 이벤트와 이벤트 핸들러

  • 이벤트란?
    • 웹사이트에서 발생할 수 있는 사건(클릭, 로딩, 키입력 등)
  • 이벤트 종류
    • UI 이벤트
      • load : 웹페이지나 스크립트의 로드가 완료됬을 때
      • unload : 웹페이지가 언로드될 때(주로 새 페이지 요청한 경우)
      • error : 자바스크립트 오류가 발생했거나 요청한 자원이 존재하지 않는 경우
      • resize : 브라우저 창의 크기를 조절했을 때
      • scroll : 사용자가 페이지를 위아래로 스크롤할 때
      • select : 텍스트를 선택했을 때
    • Keyboard 이벤트
      • keydown : 키를 누르고 있을 때
      • keyup : 누르고 있던 키를 뗄 때
      • keypress : 키를 누르고 뗏을 때
      • keyCode : 키 코드값
    • Mouse 이벤트
      • click : 마우스 버튼을 클릭했을 때
      • dbclick : 마우스 버튼을 더블 클릭했을 때
      • mousedown : 마우스 버튼을 누르고 있을 때
      • mouseup : 누르고 있던 마우스 버튼을 뗄 때
      • mousemove : 마우스를 움직일 때(터치스크린X)
      • mouseover : 마우스를 요소 위로 움직였을 때(터치스크린X)
      • mouseout : 마우스를 요소 밖으로 움직였을 때(터치스크린X)
      • mouserenter : 해당 요소에 마우스 커서를 올려다놓았을 때
      • mouseleave : 해당 요소에 마우스 커서를 빼낼 때
    • Focus 이벤트
      • focus/focusin : 요소가 포커스를 얻었을 때
      • blur/focusout : 요소가 포커스를 잃었을 때
    • Form 이벤트
      • input : input/textarea 요소의 값이 변경되었을 때와 contenteditable 속성을 가진 요소의 값이 변경되었을 때
      • change : select box, checkbox, radio button의 상태가 변경되었을 때
      • submit : form을 submit할 때(버튼/키)
      • reset : reset 버튼을 클릭할 때(최근에 사용안함.)
    • Clipboard 이벤트
      • cut : 콘텐츠를 잘라내기할 때
      • copy : 콘텐츠를 복사할 때
      • paste : 콘텐츠를 붙여넣기할 때
  • 이벤트 핸들러란?
    • 자바스크립트를 통해 어떤 이벤트인지를 알려주기 위해 등록된 자바스크립트 명령어
    • 형태로는 On + 이벤트명 이다.
  • 이벤트 핸들러 등록 방식
    • inline 방식
      • 이벤트를 이벤트 대상의 태그 속성으로 지정
      • this를 이용해 이벤트가 발생한 대상을 사용할 수 있음
      • inline 방식의 this는 전역 객체 window를 가리킴
      • 형태
        <!-- 태그 내부에 이벤트 -->
<input type="button" onclick="이벤트" value="값" />

<!-- script태그에 이벤트 함수를 정의하고 이벤트 핸들러를 설정 -->
<script>
	function 이벤트 함수(){
		내부 코드
	}
</script>
<button onclick="이벤트 함수();">버튼</button>
    • 프로퍼티 방식
      • 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
      • HTML 태그와 스크립트를 분리 가능
      • 이벤트에 오직 하나의 이벤트 핸들러만 바인딩 가능
      • 프로퍼티 방식에서 this는 이벤트를 설정한 요소를 가리킴
      • 형태
        <button class="btn">버튼</button>
<script>
	// querySelector(요소이름)은 CSS 선택자로 요소이름을 선택
	// 주의 사항으로 querySelector는 첫번째 요소만 선택하는 점을 유의
	const btn = document.querySelector('btn');
	
	// 동일한 이벤트를 여러번 설정해주면 제일 마지막에 설정된 이벤트함수가 실행됨.
	btn.이벤트 = 이벤트함수; // 실행X
	btn.이벤트 = function() {
		이벤트 코드; // 이부분이 실행됨.
	};
</script>
    • addEventListener 메소드 방식
      • addEventListener 메소드를 이용해 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백함수(이벤트 핸들러)를 지정
      • addEventListener 형태
        대상요소.addEventListener(이벤트타입, 콜백함수, 캡처링/버블링 여부)
      • addEventListener 장점
        • 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
        • 캡처링과 버블링을 지원
          ※ 버블링 : 가장 최상단의 조상 요소를 만날 때까지 요소에 각각 할당된 핸들러가 동작
          ※ 캡처링 : 가장 최상단 조상에서 시작해 해당 자식까지 내려오며 요소에 각각 할당된 핸들러가 동작
        • HTML요소뿐만 아니라 DOM 요소(HTML, XML, SVG)에 대해 동작
          ※ DOM은 웹문서를 로드한 후, 파싱해서 DOM을 생성
      • addEventListener 메소드 방식에서 this는 이벤트 리스너에 바인딩된 요소를
      • 형태
        <input type="button" id="target1" value="button" />
<input type="button" id="target2" value="button" />
<script>
	var t = document.getElementById('target1');
	
	t.addEventListener('click', function(event){
		이벤트 실행 코드
	});

	var t2 = document.getElementById('target2');
	
	function listenerfunc(event){
		이벤트 실행 코드
	}
	
	// addEventListener에서 콜백함수 부분에 정의한 함수를 사용하려면 ""를 붙여줘야한다.
	t2.addEventListener('click', "listenerfunc()");
</script>
    • Event 객체
      • 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보를 제공
      • 이벤트가 발생하면 event객체를 동적으로 생성하여 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달
  • 이벤트와 이벤트 핸들러 참고 사이트

✏️ 배열 객체

  • 배열이란?
    • 여러 개의 원소를 하나의 배열명으로 묶은 집합체
  • 배열 생성 방법
    // 리터럴을 이용해 배열 생성
var array1 = ["원소1", "원소2", "원소3", ... , "원소N"];
// 배열 생성자를 이용해 배열 생성
var array2 = new Array("원소1","원소2","원소3", ... , "원소N");
var array3 = new Array(배열 길이); // 배열 길이 만큼의 크기를 가진 빈 배열 생성
  • 배열 객체 메소드
    • isArray(인자)
      • 주어진 인자가 배열인지 체크
    • from(인자)
      • ES6에서 도입된 메소드로 특정 객체를 변환하여 새로운 배열을 생성
      • 유사배열 객체(array-like objects) : length 프로퍼티와 인덱스 된 요소를 가지고 있는 객체
      • 이터러블 객체 (iterable objects) : Map과 Set 객체 및 문자열과 같이 해당 요소를 개별적으로 선택할 수 있는 객체
      • 형태
        // 문자열은 이터러블
var arr1 = Array.from('test');
console.log(arr1); // ['t','e','s','t']

// 유사 배열 -> 배열 객체로 변환
var arr2 = Array.from({ length:2, 0:'a',1:'b'});
console.log(arr2); // ['a','b']

// 두번째 매개변수에 배열의 모든 요소에 대해 호출할 함수를 전달
var arr3 = Array.from({length:3}, 함수)
console.log(arr3); // [0,1,2]
    • of(인자)
      • ES6에서 새롭게 도입된 메소드로 전달된 인수를 요소로 갖는 배열을 생성
    • fill(value, start, end)
      • 배열의 시작 인덱스부터 끝 인덱스 이전까지 아나의 값으로 채워주는 메소드
      • 원본 배열을 직접 변경
    • indexOf(search, start)
      • 배열에 인수로 전달된 요소를 검색하여 인덱스를 반환
      • 해당 요소가 있으면 첫번째 인덱스 반환, 없으면 -1 반환
    • push(인자)
      • 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가, 변경된 배열길이를 반환
      • 성능면에서 좋지 않음.
    • pop()
      • 원본 배열에서 마지막 요소를 제거, 제거한 요소를 반환
      • 빈 배열이면 undefined 반환
    • shift()
      • 배열에서 첫요소를 제거, 제거한 요소를 반환
      • 빈 배열이면 undefined 반환
    • sort()
      • 배열 요소를 오름차순으로 정렬하는 메소드
    • reverse()
      • 배열 요소의 순서를 반대로 변경
    • concat(인자)
      • 인수로 전달된 값을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
    • join(구분자)
      • 원본 배열의 모든 요소를 문자열로 변환한 후, 구분자로 연결한 문자열을 반환
    • slice(start, end)
      • 지정된 배열의 부분을 복사하여 반환
      • start가 음수일 경우 배열의 끝에서의 인덱스를 나타냄
    • splice(start, deletecount, items)
      • start번째 요소부터 deletecount 만큼 제거한 후 제거한 위치에 items를 추가
      • 배열 요소 추가, 배열 요소 교체, 배열 요소 삭제 기능으로 사용
  • 배열 객체 참고 사이트

✏️ 스트링 객체

  • 스트링 객체란?
    • 문자열을 다루는 객체
    • 글자모양, 색상 지정, 위치 이동, 하이퍼링크 설정 등을 설정하는 메소드를 지원
    • new 연산자를 이용해 객체 선언X
    • 스트링 객체의 속성(도트 연산자 이용)
      • length : 문자열의 길이 반환
  • 스트링 객체 메소드
    • 글자 속성 변경 메소드
      • big() : 현재 글자크기 보다 한 단계 큰 크기로 설정
      • small() : 현재 글자크기 보다 한 단계 작은 크기로 설정
      • blink() : 글자의 깜박이 설정(익스플로러X)
      • italics() : 이탤릭체 설정
      • bold() : 굵은 체로 설정
      • strike() : 취소선 설정
      • fixed : 크기가 고정인 타자체로 설정
      • sub() : 아래 첨자 설정
      • sup() : 윗 첨자 지정
      • fontcolor(색상) : 글자 색상 지정
      • fontsize(크기) : 글자 크기 지정, 1 ~ 7 숫자 지정가능
    • 문자열 변경 (※ 중요!)
      • toUpperCase() : 문자열 내용 대문자로 변환
      • toLowerCase() : 문자열 내용 소문자로 변환
      • charAt(index) : 문자열의 index 위치의 문자 반환
      • indexOf(searchStr) : 왼쪽을 기준으로 문자열에서 searchStr의 인덱스 값을 반환, 없으면 -1 반환
      • lastIndexOf(searchStr) : 오른쪽을 기준으로 문자열에서 searchStr의 인덱스값을 반환, 없으면 -1 반환
      • replace(searchStr, replaceStr) : 문자열에서 처음 만난 searchStr를 replaceStr로 변경 후 반환
      • split(기준문자) : 기준 문자를 기준으로 문자열 나눔
      • substring(start, end) : start부터 end 이전까지의 문자열 추출 후 반환
      • substr(index, number) : index위치부터 number 만큼 문자열 추출 후 반환
      • concat(str) : 문자열에 str을 결합해 새로운 문자열 반환
      • link(주소/경로) : 주소/경로로 이동
      • anchor(위치) : 동일 문서 내용 책갈피 기능으로 지정 위치로 이동
      • trim() : 문자열 양쪽 끝에 있는 공백 문자 제거
      • repeat(반복횟수) : 문자열을 반복횟수만큼 반복해 연결한 새로운 문자열을 반환
      • includes(searchStr, pos) : 문자열에서 pos위치에 searchStr이 포함되어 있는지 검사
      • padStart(문자열 크기, str) : 현재 문자열이 지정한 문자열 크기보다 짧으면 왼쪽을 기준으로 str로 채워서 반환
      • padEnd(문자열 크기, str) : 현재 문자열이 지정한 문자열 크기보다 짧으면 오른쪽을 기준으로 str로 채워서 반환
  • String객체 참고 사이트

✏️ Data 객체

  • Date 객체란?
    • 날짜와 시간에 관한 정보를 처리하는 객체
    • 생성자 메소드를 이용해 생성
      var dateVar = new Date() // 현재 날짜와 시간을 초기화하는 객체 생성
var dateVar2 = new Date(year, month, day) // 매개변수 year, month, day를 이용해 객체 생성
var dateVar3 = new Date(y,m,d,h,m,s) // 년,월,일,시,분,초 매개변수를 이용해 객체 생성
  • Date 객체 메소드
    • now() : 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환
    • parse() : UTC를 기점으로 인수로 전달된 지정시간까지의 밀리초를 숫자로 반환
    • 날짜와 시간을 가져오는 메소드
      • getFullYear() : 년도를 나타내는 4자리 숫자 반환
        ※ getFullYear 메소드와 동일한 메소드로 getYear이 있는데 현재 Deprecated됨.
      • getMonth() : 1월(0) ~ 12월(11)의 값을 반환
      • getDate() : 날짜(1~31)를 반환
      • getDay() : 요일을 반환, 일요일(0) ~ 토요일(6)
      • getHours() : 시간을 반환
      • getMinutes() : 분을 반환
      • getSeconds() : 초를 반환
      • getMilliseconds() : 밀리초를 반환
      • getTime() : 1970년 1월 1일을 기준으로 현재까지 경화된 시간을 밀리토 단위로 리턴
    • 날짜와 시간을 설정하는 메소드
      • setFullYear() : 년도를 나타내는 4자리 숫자를 설정
      • setMonth() : 1월(0) ~ 12월(11)의 값을 설정
      • setDate() : 날짜(1~31)를 설정
      • setDay() : 요일을 설정, 일요일(0) ~ 토요일(6)
      • setHours() : 시간을 설정
      • setMinutes() : 분을 설정
      • setSeconds() : 초를 설정
      • setMilliseconds() : 밀리초를 설정
      • setTime() : 밀리초 단위의 시간값으로 세팅 저장
    • getTimezoneOffset() : UTC와 지정 Locale 시간과의 차이를 분단위로 반환
    • toDateString() : 문자열로 날짜를 반환
    • toTimeString() : 문자열로 시간을 반환
    • toUTCString() : 문자열로 UTC를 반환
    • toLocaleString() : 숫자의 사용 언어에 따른 표현을 포함한 문자열을 반환
    • toLocalTimeString() : 사용자의 문화권에 맞는 시간표기법으로 시간을 반환
  • Date 객체 참고 사이트

✏️ Math 객체

  • Math 객체란?
    • 수리적 연산을 처리하기 위한 수학 객체
    • 별도 선언이나 생성없이 바로 사용가능
  • Math 객체 메소드
    • abs(num) : 절댓값 반환
    • round(num) : num의 소수점 이하를 반올림한 정수를 반환
    • ceil(num) : num의 소수점 이하를 올림한 정수를 반환
    • floor(num) : num의 소수점 이하를 내림한 정수를 반환
      양수일 경우, 소수점 이하를 버림
      음수일 경우, 소수점 이하를 버린 후 -1 빼고 정수를 반환
    • sqrt(num) : num의 제곱근을 반환
    • random() : 0부터 1 미만의 부동 소수점을 랜덤으로 반환
    • pow(num, exponent) : numexponent로 거듭제곱을 반환
    • max(num1, num2, ...) : 인수 중에서 가장 큰 수를 반환
    • min(num1, num2, ...) : 인수 중에서 가장 작은 수를 반환
    • cbrt(num) : num의 세제곱근을 반환
    • log(num) : num의 자연로그 값을 반환
    • log2(num) : num의 2를 밑으로 가지는 로그 값을 반환
    • log10(num) : num의 10을 밑으로 가지는 로그 값을 반환
    • sign(num) : num의 부호 값을 반환
    • sin(num), cos(num), tan(num), ... : num에 대한 삼각 함수값을 반환
  • Math 객체 프로퍼티
    • E : 오일러의 수, 자연로그의 밑값, 2.718...
    • LN2 : 2의 자연로그 값 , 0.693...
    • LN10 : 10의 자연로그 값, 2.303...
    • LOG2E : 오일러 수(e)의 밑 값이 2인 로그 값, 1.443...
    • log10E : 오일러 수(e)의 밑 값이 10인 로그 값, 0.434...
    • PI : 원의 원주를 지름으로 나눈 비율 값, 3.14159...
    • SQRT1_2 : 2의 제곱근의 역수 값, 0.707...
    • SQRT2 : 2의 제곱근 값, 1.414...
  • Math 객체 참고 사이트

✏️ 브라우저 객체

  • 브라우저 객체란?
    • 웹 브라우저에 직/간접접으로 관련된 객체를 총칭하는 객체
    • window, document, history, screen, location, navigator 객체로 구성
  • 브라우저 객체 모델(BOM)이란?
    • 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능을 제어하는 객체 모델
    • 문서 객체 모델(DOM)과 달리 W3C 표준 객체 모델이 아님
    • 브라우저 객체 모델의 객체들은 전역 객체로 사용
  • window 객체
    • 브라우저 창의 모든 내용을 제어하는 최상위 객체
    • 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨.
    • 웹 브라우저의 종류를 판별해주는 navigator 객체를 제외한 다른 객체는 window 객체의 하위에 존재
  • document 객체
    • 웹문서에 대한 정보를 총괄적으로 제어하는 객체
    • 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 사용
    • window 객체의 하위 객체이면서 문서 객체 모델(DOM)의 최 상위 객체
  • history 객체
    • 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
    • history 객체를 이용해 브라우저 뒤로 가기, 앞으로 가기를 구현할 수 있다.
  • screen 객체
    • 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체
  • location 객체
    • 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
  • navigator 객체
    • 브라우저 공급자 및 버전 정보 등 브라우저에 대한 다양한 정보를 저장하는 객체
    • 브라우저 스니핑에서 사용하는 다양한 프로퍼티를 제공

✏️ 문서 객체 모델(DOM)

  • 문서 객체 모델(DOM)이란?
    • XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
    • 문서 내의 모든 요소를 정의, 각각의 요소에 접근하는 방법을 제공
    • W3C의 표준 객체 모델
  • 문서 객체 모델(DOM)의 종류
    • Core DOM : 모든 문서 타입을 위한 DOM 모델
    • HTML DOM : HTML 문서를 위한 DOM 모델
    • XML DOM : XML 문서를 위한 DOM 모델
profile
Coosla
프로그래밍 언어 공부 정리
이전 포스트

html부터 웹사이트 개발까지! - CSS편

다음 포스트

html부터 웹사이트 개발까지! - Jquery편

0개의 댓글