JavaScript - Javascript 기본 문법

 

 

변수

 

변하는 데이터(값)을 저장할 수 있는 메모리 공간. 문자형(String), 숫자형(Number), 논리형(Boolean), typeof, Null/Undefined 값이 있음.

 

예) var 변수명; 또는 var 변수명 = 값;

 

※ Null = 변수에 저장된 데이터를 비우고자 할 때 사용, Undefined = 변수값에 아무 값도 등록되어 있지 않은 상태

 

※ typeof = 지정한 데이터 또는 변수에 저장된 데이터 형을 알고 싶을 때 사용 (예: typeof 변수 또는 데이터;)

 

 

 

연산자

 

산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)

 

문자 결합 연산자 : 문자형 데이터 + 문자형 데이터 / 문자형 데이터 + 숫자형 데이터

 

대입 연산자 : +=, -=, *=, /=, %=

 

증감 연산자 : 변수--; 또는 --변수 / 변수++; 또는 ++변수;

 

비교 연산자 : 크다( > ), 작다( < ), 같다( == ), 다르다 ( != ), 같다( === ), 다르다( !==)

 

※ "==" 와 "===" 의 차이 : 같은 "같다"라는 의미지만 "=="는 데이터형이 숫자형이든 문자형이든 구분하지 않고 표기된 것만 일치하면 true를 반환하지만 "==="는 숫자면 숫자, 문자면 문자를 입력해 데이터형이 일치 해야지만 true를 반환

 

※ "!=" 와 "!=="의 차이 : 같은 "다르다"라는 "!="는 데이터형이 숫자형이든 문자형이든 구분하지 않고 표기된 것만 일치하지 않으면 false를 반환하지만 "!=="는 숫자면 숫자, 문자면 문자를 입력해 데이터형이 일치하지 않으면 true를 반환

 

논리 연산자 : || (or) 피연산자 중 값이 하나라고 true가 존재하면 true 결과값을 반환

                  && (and) 피연산자 중 값이 하나라도 false가 존재하면 false 결과값을 반환

                  ! (not) 단항 연산자이며, 피연산자의 값이 true이면 반대로 false 결과값을 반환

 

삼항 조건 연산자 : 조건식 ? 실행문 1: 실행문 2; (예: var 변수= 조건식 ? "true" : "false";)

 

 

조건문(if, switch) 및 반복문(while, do while, for)

 

if (else if) ~ else 문 : 조건식을 만족(true)할 경우와 만족하지 않을 경우(false)에만 실행

 

switch 문 : 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 실행문을 실행시킬 때 사용

 

while 문 : 조건식을 만족할 때까지 실행문을 여러 번 반복하여 실행

 

do while 문 : while 문은 조건식의 만족 여부를 "먼저" 검사한 후 실행문의 실행여부를 결정했지만, do while 문은 반드시 "실행문을 실행" 하고 조건식을 검사하는 방식

 

for 문 : 조건식을 만족할 때까지 특정 실행문을 반복하여 실행

 

 

객체

 

Object 기반 언어로 "기능(메서드)" 또는 "속성(프로퍼티)"를 가지고 있다. (예 : 객체.메서드(); / 객체.속성; 또는 객체.속성=값;)

 

내장객체

 

브라우저의 자바스크립트 엔진에 내장된 객체. 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object)등이 있다.

 

날짜(Date) 메서드

날짜 정보를 가져올 때(GET)		날짜 정보를 수정할 때 (SET)
getFullYear()	연도 정보를 가져옴	setFullYear()	연도 정보만 수정
getMonth()	월 정보를 가져옴(현재 월-1)	setMonth()	월 정보만 수정(월-1)
getDate()	일 정보를 가져옴	setDate()	일 정보만 수정
getDay()	요일 정보를 가져옴 (일: 0 ~ 토 : 6)	'요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음
getHours()	시 정보를 가져옴	setHours()	시 정보만 수정
getMinutes()	분 정보를 가져옴	setMinutes()	분 정보만 수정
getSeconds()	초 정보를 가져옴	setSeconds()	초 정보만 수정
getMilliseconds()	밀리초 정보를 가져옴(1/1000초 단위)	setMillisecounds()	밀리초 정보만 수정
getTime()	1970 년 1월 1일 부터 경과된 시간	setTime()	1970년 1월 1일부터 경과된 시간 수정
toGMTString()	GMT 표준 표기 방식 데이터로 반환	toLocaleString()	운영 시스템 표기 방식 데이터 반환

 

 

 

숫자(Number) 메서드

속성	설명
toExponential(n)	지수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환
toFixed(n)	소수점 n자리 만크 반올림하여 문자형 데이터로 반환
toPrecision(n)	유효 숫자 n의 개수만큼 반올림하여 문자형 데이터로 반환
toString()	숫자형 데이터를 문자형 데이터로 반환
valueOf()	객체의 원래 값을 반환
parseInt(값)	데이터를 정수로 변환하여 반환
parseFloat(값)	데이터를 실수로 변환하여 반환

 

수학(Math) 메서드

종류	설명
Math.abs(숫자)	숫자의 절대값을 반환
Math.max(숫자 1, 숫자 2, 숫자3, 숫자 4)	숫자 중 가장 큰 값을 반환
Math.min(숫자 1, 숫자 2, 숫자3, 숫자 4)	숫자 중 가장 작은 값을 반환
Math.pow(숫자, 제곱값)	숫자의 거듭제곱한 값을 반환
Math.random()	0~1 사이에 난수를 반환
Math.round(숫자)	소수점 첫째 자리에서 반올림하여 정수를 반환
Math.cell(숫자)	소수점 첫째 자리에서 무조건 올림해서 정수를 반환
Math.floor(숫자)	소수점 첫째 자리에서 무조건 내림해서 정수를 반환
Math.sqrt(숫자)	숫자의 제곱근 값을 반환
Math.PI	원주율 상수를

 

배열(Array) 메서드

종류	설명
join(연결 문자)	배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열 객체에 데이터의 순서를 거꾸로 바꾼 후 반환
sort()	배열 객체에 데이터를 오름차순으로 정렬
slice(index 1, index 2)	배열 객체에 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
splice()	배열 객체에 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입 할 수 있음
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
push(new data)	배열 객체 마지막 인덱스에 새 데이터를 삽입
shift()	배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제
unshift(new data)	배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입
length	배열에 저장된 총 데이터의 개수를 반환

 

문자(String) 메서드

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자를 반환
indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환. 만약 문자가 없으면 -1를 반환
lastIndexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환. 만약 문자가 없으면 -1를 반환
match("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 반환. 만약 문자가 없으면 null을 반환
replace("바꿀 문자","새 문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호 반환
search("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호 반환
slice(a, b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환
substring(a, b)	a인덱스 부터 b인덱스 이전 구간의 문자를 반환
substr(a, 문자 개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환
split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환
toLowerCase()	문자열에서 영문 대문자를 모두 소문자로 바꿈
toUpperCase()	문자열에서 영문 소문자를 모두 대문자로 바꿈
length	문자열에서 문자의 개수를 반환
concat("새로운 문자")	문자열에 새로운 문자열을 결합
charCodeAt(index)	문자열에 index에 해당 문자의 아스키 코드 값을 반환
fromCharCode(아스키 코드 값)	아스키 코드 값에 해당하는 문자를 반환
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제

 

브라우저 객체 모델(BOM)

 

브러우저에 내장된 객체를 '브라우저 객체'라 한다. 

 

Window 객체 메서드 종류

종류	사용법	설명
open() / close()	window.open("url경로","창 이름","옵션 설정")	새 창을 열 때 사용 / 창을 닫을 때 사용
alert()	alert("경고 메세지")	경고 창을 띄움
prompt()	prompt("질의 내용","기본 답변");	질의응답 창을 띄움
confirm()	confirm("질의 내용");	확인/취소 창을 띄움
moveTo()	moveTo(x의 위치값, y의 위치값);	창의 위치를 이동시킬 때 사용
resizeTo()	resizeTo(너빗값, 높이값);	창의 크기를 변경시킬 때 사용
setInterval()	var 참조변수=setInterval("스크립트 실행문",시간 간격");	일정 간격으로 지속적으로 실행문을 실행시킬 때 사용
setTimeout()	var 참조변수=setTimeout("스크립트 실행문","시간간격");	일정 간격으로 한 번만 실행문을 실행시킬 때 사용

 

Screen 객체 메서드 종류

종류	설명
screen.width	화면의 너빗값을 반환
screen.height	화면의 높잇값을 반환
screen.availWidth	작업 표시줄을 제외한 화면의 너빗값을 반환
screen.availHeight	작업 표시줄을 제외한 화면의 높잇값을 반환
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

 

History 객체 메서드 종류

종류	설명
history.back()	이전 방문한 페이지로 이동
history.forward()	다음 방문한 페이지로 이동
history.go(이동 숫자)	이동 숫자가 -2이면 2단계 이젠 페이지로 이동
length	방문 기록에 저장된 목록의 개수를 반환

 

navigator 속성

종류	설명
navigator.appCodeName	방문자의 브라우저 코드명을 반환
navigator.appName	방문자의 브라우저 이름을 반환
navigator.appVersion	방문자의 브라우저 버전 정보를 반환
navigator.language	방문자의 브라우저 사용 언어를 반환
navigator.product	방문자의 브라우저 사용 엔진 이름을 반환
navigator.platform	방문자의 브라우저를 실행하는 운영체제를 반환
navigator.userAgent	방문자의 브라우저와 운영체제 종합 정보를 제공-

 

 

선택자

 

선택자의 종류

구분	종류	설명
직접 선택자	document.getElementById("아이디 명")	아이디를 이용해 요소를 선택
	document.getElementsByTagName("요소(태그)명")	요소의 이름을 이용해 요소를 선택
	document.formName.inputName	폼 요소에 name 속성을 이용해 요소를 선택
인접 관계 선택자	parentNode	선택한 요소의 부모 요소를 선택
	childNodes	선택한 요소의 모든 자식 요소를 선택(요소가 배열 객체로 저장 됨)
	children	선택한 요소의 자식 요소인 태그만 선택(요소가 배열 객체로 저장 됨)
	firstChild	선택한 요소의 첫 번째 자식 요소만 선택
	previousSibling	선택한 요소의 이전에 오는 형제 요소만 선택
	nextSibling	선택한 요소의 다음에 오는 형제 요소만 선택

 

문서 객체의 속성 메소드

종류	풀이
요소 선택.속성명	요소의 지정한 속성값을 불러옴
요소 선택.속성명 = "새 값"	요소의 지정한 속성값을 새 값으로 변경 또는 생성
요소 선택.getAttribute("속성")	요소의 저정한 속성값을 불러옴
요소 선택.setAttribute("속성", "새 값");	요소의 지정한 속성값을 새 값으로 변경 또는 생성

 

문서 객체의 하위 요소 속성

종류	풀이
요소 선택.innerHTML;	선택한 요소의 모든 하위 요소를 문자 데이터로 반환
요소 선택.innerHTML = 새 요소;	선택한 요소의 전체 하위 요소를 새 요소로 변경 또는 새롭게 생성

 

이벤트 종류

이벤트	설명
onclick	선택한 요소를 마우스로 클릭했을 때 이벤트가 발생
onmouseover	선택한 요소에 마우스를 올렸을 때 이벤트가 발생
onmouseout	선택한 요소에 마우스가 벗어났을 때 이벤트가 발생
submit	선택한 폼에 전송이 일어났을 때 이벤트가 발생

 

폼 요소 선택자

 

이벤트 종류

구분	종류	설명
입력 요소 선택자	document.getElementById("아이디 명")	폼 요소를 아이디로 선택할 때 사용
	document.폼 이름.입력 요소 이름	폼 요소를 이름으로 선택할 때 사용
select option 선택자	document.폼 이름.입력 요소 이름.options[index]	<select>에 <option>을 선택할 때 사용
	var i = document.폼 이름.입력 요소 이름.selectedIndex;  document.폼 이름.입력 요소 이름.options[i];	<select>에 선택된 <option>을 선택할 때 사용

 

폼 요소 속성 종류

구분	속성	설명
전체	value	입력 요소의 value 속성을 변경하거나, 값을 가져옴
	disabled	입력 요소의 disabled 속성을 변경하거나, 현재 상태의 값을 가져옴
	defaultValue	입력 요소 초기에 입력된 value 값을 가져옴
선택박스	selected	<select> 태그에 <option> 선택된 상태의 값을 가져옴.  선택되면 true, 반대면 false
체크박스/라디오 버튼	checked	체크 박스 또는 라디오 버튼 태그에 체크 상태의 값을 반환하거나 체크 여부를 제어.  선택이 되었으면 true, 반대면 false

 

 

 

 

출처 : Do it! 자바스크립트 + 제이쿼리 입문