웹 프로그래밍은 사용자와 대화를 위한 서비스 로직을 구성하는 것

1. 개요

/* 선언방식 */
// 내부 스크립트 방식
<script>
	document.write("Hello World")
</script>
// 외부 스크립트 방식
<script src="./hello.js"></script>
// 인라인 스크립트 방식
<button type="button" onclick="alert('Welcom')">
	Click Me!
</button>

2. 변수와 자료형

1) 변수와 상수

/* 식별자 규칙 */
// 1. 첫문자는 알파벳, _, $로 시작
// 2. 두번째 문자부터 알파벳, 숫자, _, $ 사용 가능
// 3. 대소문자 구분
// 4. 키워드 사용 불가
// 5. 변수명에 camelCase 사용
// 6. 명시적 변수선언 불필요
/* 상수 */
// 재지정불가, 블록안에서만 사용

See the Pen public.re.kr/56-2-1-01 by Lee Deokho (@duqe) on CodePen.

2) 자료형

자료형			설명
숫자	정수	10진수	0으로 시작하지 않는 일반 숫자
		8진수	0으로 시작하는 숫자
		16진수	0x로 시작하는 숫자
	실수		소수점을 포함하는 숫자
문자형			따옴표로 묶인 문자의 나열
논리형			true or false
null형			변수 초기화 시 사용

3. 연산자

1) 종류

구분	내용	종류
산술연산자	계산	+, -, *, /, %
대입연산자	우측 실행결과를 좌측변수에 저장	=, +=, -=, *=, /=, %=
증감연산자	변수값 1 증감하여 대입	++, --
비교연산자	값 비교 true/false 반환	==, ===, !=, !==, <, <=, >, >=
논리연산자	논리곱, 논리합, 논리부정	&&, ||, !
조건연산자	삼항연산자	(조건) ? (선택1) : (선택2)
연결연산자	문자열 연결	+
비트연산자	and, or, xor, not	&, ^, |, ~
시프트		<<, >>, <<<
거듭제곱		**

See the Pen public.re.kr/56-3-1-01 by Lee Deokho (@duqe) on CodePen.

2) 우선순위

우선순위	연산자	결합성	내용
1	(), []	-
2	!, ++, --, ~	우->좌	논리 NOT, 증감, 비트 NOT(a++, a-- 와 같은 경우 결합성 없음.)
3	**	우->좌
4	*, /, %	좌->우
5	+, -	좌->우
	<<, >>, >>>	좌->우	>>> 부호비트까지 포함하여 >> 처리
6	<, >, <=, >, >=	좌->우
7	==, !=, ===, !===	좌->우
8	&	좌->우	and
9	^	좌->우	xor
10	|	좌->우	or
11	&&	좌->우	논리곱
12	||	좌->우	논리합
13	? :	우->좌
14	=, +=, -=, /=, *=, %=	우->좌

 

4. 조건문과 반복문

1) 조건문

See the Pen 123 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-4-1-02 by Lee Deokho (@duqe) on CodePen.

2) 반복문

See the Pen public.re.kr/56-4-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-4-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen CodePen Home public.re.kr/56-4-2-03 by Lee Deokho (@duqe) on CodePen.

5. 함수

1) 정의 및 호출

See the Pen public.re.kr/56-5-1-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-5-1-02 by Lee Deokho (@duqe) on CodePen.

2) 대화상자

See the Pen public.re.kr/56-5-2-01 by Lee Deokho (@duqe) on CodePen.

6. 객체

1) 개념

• 속성(Property): 갹체의 특성을 표현하기 위한 데이터
• 메서드(Method): 데이터를 동작하는 규칙이나 방법

2) 내장객체

일반적인 갹체 생성 및 사용 형식	예
객체변수 = new 객체명([매개변수_리스트]);	msg = new String("JavaScript);
객체변수.속성	msg.length
객체변수.메서드([매개변수])	msg.toUpperCase()

String객체의 기능	메서드	설명
글꼴 및 위치 이동 관련 메서드	big()	글자크기를 현재보다 한단계 크게
	small()	글자크기를 현재보다 한단계 작게
	bold()	굵게
	italics()	이텔릭체로
	strike()	취소선
	sub()	아래첨자
	sup()	윗첨자
	fontcolor("색")	색상
	fontsize(크기)	크기(1~7)
	anchor("이름")	"이름" 위치로 현재 페이지를 이동
	link("url")	이동할 위치의 링크
문자열 처리관련 메서드	toLowerCase()	소문자로 변환
	toUpperCase()	대문자로 변환
	charAt(n)	n번째 문자를 변환
	substring(m, n)	m부터 n이전까지의 문자열 반환
	slice(m, n)	m부터 n이전까지의 문자열 반환
	substr(m, n)	m이후부터 n개 만큼의 문자열 반환
	indexOf("문자열")	왼쪽에서부터 지정된 문자열의 위치 반환
	lastIndexOf("문자열")	오른쪽에서부터 지정된 문자열의 위치 반환
	concat("문자열")	문자열을 연결
	replace("문자열1", "문자열2")	문자열1을 문자열2로 대체
	split(분리자, [개수])	분리자를 기준으로 '개수'만큼 문자열을 분리
	charCodeAt(n)	n번째 문자의 유니코드 번호를 반환
	fromCharCode(숫자)	유니코드 번호를 문자열로 반환(String객체를  직접 사용)
	trim("문자열")	문자열 앞뒤의 공백(빈칸, 엔터, 탭)을 제거

See the Pen public.re.kr/56-6-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-6-2-02 by Lee Deokho (@duqe) on CodePen.

Array 객체의 메서드 종류	설명
join("삽입문자")	삽입문자는 결합되는 내용 사이 구분 문자, 생략 시 쉼표 사용
reverse()	배열의 순서를 역순으로
sort([비교함수])	비교함수는 정렬방식 결정
slice(시작인덱스, 종료인덱스)	시작인덱스에서 종료인덱스-1까지 부분 선택하여 새 배열생성
concat(배열변수)	두 배열을 하나의 배열로
indexOf(값)	값을 가진 요소의 인덱스
push(값), pop()	스텍에 데이터를 삽입하고 삭제
shift()	배열의 첫번째 요소를 반환하고, 배열에서 제거

See the Pen public.re.kr/56-6-2-02 by Lee Deokho (@duqe) on CodePen.

Date 객체의 정보 획득 메서드	Date 객체의 정보 설정 메서드	설명
getFullYear()	setFullYear()	4개의 숫자로 된 연도
getMonth()	setMonth()	0~11 숫자된 월
getDate()	setDate()	일
getDay()	setDay()	0~6 요일(일~토)
getHours()	setHours()	0~23 시간
getMinutes()	setMinutes()	0~59 분
getSeconds()	setSeconds()	0~59 초
getMilliseconds()	setMilliseconds()	0~999 밀리초
getTime()	setTime()	70-1-1 00:00:00부터 경과 시간 1/1000초 단위로 반환
toGMTString()
toLocalString()
toString()

See the Pen public.re.kr/56-6-2-03 by Lee Deokho (@duqe) on CodePen.

Math 객체의 주요 속성	설명
E	자연로그 밑에 사용되는 오일러 상수(약 2.718)
LN10	10의 자연로그(약 2.032)
LN2	2의 자연로그(약 0.693)
PI	원주율(3.141592)
SQRT1_2	1/2의 제곱근(약 0.707)
SQRT2	2의 제곱근
abs(n)	n의 절대값
acos(n)	n의 역 코사인값
asin(n)	n의 역 사인값
atan(n)	n의 역 탄젠트값
atan2(x, y)	지정된 x, y 좌표에서의 역 탄젠트 값을 반환
ceil(n)	n의 소수 부분을 올림한 값
cos(n)	n의 코사인 값
exp(n)	e ⌒ n값
floor(n)	n의 소수 부분을 버림한 값
log(n)	n의 자연로그 값
max(m, n)	둘 중 큰수
min(m, n)	둘 중 작은수
pow(m, n)	m ⌒ n값
random()	0에서 1미만 사이의 난수
round(n)	n을 반올림
sqrt(n)	n의 제곱근
tan(n)	n의 탄젠트

See the Pen public.re.kr/56-6-3-01 by Lee Deokho (@duqe) on CodePen.

3) 사용자 정의 객체

/* 프로토타입의 생성 */
function 프로토타입명 (매개변수1, 매개변수2, ..., 매개변수n) {
  this.속성1 = 매개변수1; // 매개변수1은 속성1의 속성값
  // this: 현재 객체를 나타내는 예역어
  this.속성n = 매개변수n;
  this.메서드1 = function () {
    ...
  }
  this.메서드n = function () {
    ...
  }
}

See the Pen public.re.kr/56-6-3-01 by Lee Deokho (@duqe) on CodePen.

7. 이벤트

1) 개요

구분	이벤트	이벤트 발생 시점
Window	load	웹브라우저에서 문서나 이미지의 로딩이 완료된 순간
	unload	웹브라우저에서 문서를 닫을 때
Focus	focus	window, form 등의 객체가 포커스를 가질 때
	blur	객체가 포커스를 잃을 때
Form	change	input, select 요소 등의 값이 변경되었을 때
	select	입력된 텍스트를 사용자가 선택했을 때
	submit	submit 버튼을 눌러 폼을 전송했을 때
	reset	reset 버튼으로 초기화 시켰을 때
Keyboard	keydown	키보드의 아무키나 누르는 순간
	keyup	누른 키를 놓는 순간
	keypress	키보드의 키를 눌렀다 놓는 순간
Mouse	click	클릭하는 순간
	dblclick	더불클릭하는 순간
	mousedown	마우스 버튼을 누르는 순간
	mouseup	눌러진 마우스 버튼을 눌렀다 놓는 순간
	mousemove	마우스가 객체위에서 움직이는 동안
	mouseover	마우스 커서가 객체 영역안으로 들어가는 순간
	mouseout	마우스 커서가 객체 영역밖으로 벗어나는 순간

2) 이벤트 처리

/* 이벤트 리스너 사용 */
// html 요소 내에서 이벤트 리스너의 이름을 속성으로 사용하여 간단히 작성
// 이벤트 리스너의 이름은 해당 이벤트 이름앞에 'on'을 붙임.
<요소명 속성 = "값" ... 이벤트리스너이름 = "자바스크립트_코드">

See the Pen public.re.kr/56-7-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-7-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/56-7-2-03 by Lee Deokho (@duqe) on CodePen.

 

[참고자료]

• 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023