자바스크립트 작성
1) 웹 문서 안에 작성
<script> </script> 태그 사이에 실행할 자바스크립트 소스를 작성
- 웹 문서 안 어디든 위치할 수 있고 삽입된 위치에서 바로 스크립트가 실행
- 되도록 <body> 태그 안에서 작성하고 </body> 직전에 작성
- 단점은 웹 문서가 복잡해짐
2) 외부 스크립트 파일로 연결
<script src="외부 스크립트 파일 경로"></script>
- HTML 문서에서 자바스크립트 파일 연결하면 됨
- 외부 스크립트 파일은 자바스크립트 소스만 작성하고 확장자 .js로 저장
기본 문법
1) 변수
var 변수명;
- 변수란 프로그램 실행하는 동안 값이 여러 번 달라질 수 있는 데이터(<->상수)
- 변수 이름은 영어 문자, 언더바(_), 숫자를 사용(다만 첫 글자는 영어 문자와 언더바만 사용 가능)
ex1 var age; /* 나이 변수 선언 */
ex2 var currentYear, birthYear, age; /* 여러 변수 한번에 선언 */
2) 자료형
| 종류 | 설명 | 예시 |
| 숫자형 | 따옴표 없이 숫자로만 표기 | var age = 2000; |
| 문자열 | 따옴표로 묶어서 표기 | var greeting = "Hello"; var birthYear = "2000"; |
| 논리형 | 참, 거짓 값만 있는 유형 | var isEmpty = true; 100 > 10 |
| 배열 | 하나의 변수에 여러 값 저장 대괄호로 표기([ ]) |
var seasons = ['봄', '여름', '가을', '겨울']; |
| 객체 | 함수와 속성을 함께 포함 | var date = new Date(); |
| undefined | 변수 선언만 하고 값 할당하지 않은 상태 | var age; |
| null | 값이 유효하지 않을 때의 상태 |
3) 연산자
| 종류 | 설명 | 종류 | 설명 |
| + | 더하기 | == | 서로 같으면 true |
| - | 빼기 | === | 서로 값이 같고 자료형도 같으면 true |
| * | 곱하기 | != | 서로 다르면 true |
| / | 나누기 | !== | 서로 값이 다르고 자료형도 다르면 true |
| % | 나눈 나머지 | < | 왼쪽이 오른쪽보다 작으면 true |
| ++ | 1 증가 | > | 오른쪽이 왼쪽보다 작으면 true |
| -- | 1 감소 | || | 둘 중 하나만 true여도 true |
| = | 오른쪽 값을 왼쪽 변수에 할당 | && | 둘 다 true여야 true |
| += | y += x -> y=y+x |
! | 값 반전 |
| -= | y -= x -> y=y-x |
||
| *= | y *= x -> y=y*x |
||
| /= | y /= x -> y=y/x |
||
| %= | y %= x -> y=y%x |
4) 출력문
| 기본형 | 설명 | 예시 |
| alert(메시지) | 웹 브라우저에서 알림창 표시 | alert("안녕하세요?") |
| confirm(메시지) | 웹 브라우저에서 확인창 표시 (확인과 취소 버튼 클릭 가능) |
var reply = confirm("정말 바꾸시겠습니까?"); |
| prompt(메시지) prompt(메시지, 기본값) |
웹 브라우저에서 간단한 입력 받는 창 표시 | var name = prompt("이름을 입력하세요", "홍길동"); |
| document.write() | 웹 브라우저 화면에 출력 | document.write("<h1>어서오세요</h1>"); |
| console.log() | 콘솔 창에 출력 | console.log("환영합니다"); |
5) 조건문
if(조건)
조건이 참일 경우 실행할 명령
else
조건이 거짓일 경우 실행할 명령
- 실행할 명령이 여러 개라면 중괄호{ }로 묶고 그 안에 명령을 나열
- if문 안에 다른 if문 중첩 가능
(조건) ? 참일때 실행할 명령 : 거짓일때 실행할 명령
ex (usernumber % 3 == 0) ? alert("3의 배수입니다") : alert("3의 배수가 아닙니다");
switch(조건) {
case 조건1: 명령1
break
case 조건2: 명령2
break
...
default: 명령
}
- switch문은 조건에 맞다면 case로 내려가고, case에서 해당하는 조건의 명령 실행함
- 해당 case에서 break가 없다면 계속 내려가면서 명령 실행(끝까지 내려가면 default도 실행)
6) 반복문
for (start, stop, step) {
실행할 명령
}
while(조건) {
실행할 명령
}
do {
실행할 명령
} while(조건)
- for문은 start에서 시작하여 step만큼 증가 또는 감소하며 stop이 될 때까지 반복
- while문은 조건에 맞는 경우 계속 반복
- do~while문은 조건이 뒤에 있어서 일단 명령을 한 번 수행한 후에 while문에서 조건을 체크
- break : 반복문 내에서 break 차례가 오면 반복문을 탈출
- continue : 반복문 내에서 continue 차례가 오면 반복문 처음으로 위치 돌아감
함수와 이벤트
1) 함수
함수 선언
function 함수명() {
명령
}
함수 실행
함수명() 또는 함수명(변수)
- 함수 선언과 실행의 순서는 프로그램 흐름에 영향 주지 않음(어느 것이 먼저여도 상관 x)
2) 이벤트
객체
1) 정의
- 자바스크립트에서의 객체란 프로그램에서 인식할 수 있는 모든 대상을 가리킴
| 객체 종류 | 설명 |
| 문서 객체 모델(DOM) | 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지, 링크 등도 모두 객체이다. ex document, image, link 객체 등 |
| 브라우저 관련 객체 | 웹 브라우저에서 사용하는 정보도 나타낼 수 있음 ex navigator, history, location, screen 객체 등 |
| 내장 객체 | 자바스크립트 안에 미리 정의된 객체 ex Date |
객체의 인스턴스 만들기
new 객체명
- 자바스크립트의 객체가 틀이라면 그 틀을 기본으로해서 사용하는 것이 인스턴스
ex var now = new Date();
/* Date 인스턴스 만들고 now 변수에 저장 */
프로퍼티(property) : 객체의 특징이나 속성
메서드(method) : 객체에서 할 수 있는 동작
- 프로퍼티나 메서드 사용하는 방법은 인스턴스명 뒤에 마침표(.) 붙이고 객체의 프로퍼티나 메서드명 작성
ex var now = new Date();
document.write("현재 시각은" + now.toLocaleString());
2) 내장 객체
Array 객체
Array 객체 인스턴스 만들기
var numbers = new Array(); /* 배열의 크기를 지정하지 않음 */
var numbers = new Array(4); /* 배열의 크기를 4로 지정 */
var numbers = [1, 2, 3, 4]; /* 배열 선언 */
var numbers = Array(1, 2, 3, 4); /* Array 객체를 사용한 배열 선언 */
- length 프로퍼티 : 배열 요소의 갯수 확인 가능
Array 객체 메서드
| 종류 | 설명 |
| concat | 기존 배열에 요소를 추가해 새로운 배열 생성(서로 다른 배열 2개 합치기) ex var nums = [1, 2, 3]; var chars = ['a', 'b', 'c']; var charsNums = chars.concat(nums); |
| every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 거짓이면 false 반환 |
| filter | 배열 요소 중 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열 생성 |
| forEach | 배열의 모든 요소에 대해 주어진 함수를 실행 |
| index0f | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스 찾기 |
| join | 배열 요소를 문자열로 합치기(구분자 지정 가능, 기본 쉼표) ex var nums = [1, 2, 3]; var string_1 = nums.join(); /* 결과는 1,2,3 */ var string_2 = nums.join(/); /* 결과는 1/2/3 */ |
| push | 배열의 맨 끝에 새로운 요소 추가한 후 새로운 length 반환 ex var nums = [1, 2, 3]; var new_1 = nums.push(4, 5); document.write(new_1, nums); /* 결과는 5와 1,2,3,4,5 */ var new_2 = nums.unshift(0); document.write(new_2, nums); /* 결과는 6과 0,1,2,3,4,5 */ |
| unshift | 배열의 시작 부분에 새로운 요소를 추가한 후 새로운 length 반환 |
| pop | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환 |
| shift | 배열의 첫 번째 요소를 꺼내 그 값을 결과로 반환 |
| splice | 배열에 요소를 추가하거나 삭제 인수 1개 : splice(n) -> n번째 인덱스부터 반환 인수 2개 : splice(n, m) -> n번째 인덱스부터 m개 반환 인수 3개 : splice(n, m, k) -> n번째 인덱스부터 m개 반환하고 k를 추가 ex var numbers = [1, 2, 3, 4, 5]; var new_1 = numbers.splice(2, 1); document.write(new_1, numbers); /* 결과는 3과 1,2,4,5 */ |
| slice | 배열에서 특정 부분만 잘라내기 |
| reverse | 배열의 배치 순서를 역순으로 바꾸기 |
| sort | 배열 요소를 지정한 조건에 따라 정렬 |
| toString | 배열에서 지정한 부분을 문자열로 반환 |
Date 객체
Date 객체 인스턴스 만들기
new Date(); /* 현재 날짜로 생성 */
new Date("2020-10-10") /* 특정 날짜 저장 */
Date 객체 메서드
| 종류 | 설명 |
| getFullYear() | 연도를 4자리 숫자로 표시 |
| getMonth() | 월을 표시(0이 1월을 의미) |
| getDate() | 일을 표시 |
| getDay() | 요일을 표시(0이 일요일을 의미) |
| getTime() | 시간을 표시 |
| setFullYear() | 연도를 설정 |
| setMonth() | 월을 설정 |
| setDate() | 일을 설정 |
| setTime() | 시간을 설정 |
| toLocaleString() | 현재 날짜와 시간을 현지 시간으로 표시 |
| toString() | Date 객체 타입을 문자열로 표시 |
Math 객체
- Math 객체는 따로 인스턴스를 만들지 않고 프로퍼티나 메서드명으로 사용
Math.프로퍼티명
Math.메서드명
Math 객체 프로퍼티
| 종류 | 설명 |
| E | 오일러 상수 |
| PI | 원주율(3.141592...) |
Math 객체 메서드
| 종류 | 설명 |
| abs() | 절댓값을 반환 |
| max() | 매개변수 중 최댓값 반환 |
| min() | 매개변수 중 최솟값 반환 |
| sqrt() | 매개변수의 제곱근 반환 |
| round() | 매개변수의 소수점 이하 부분 반올림 |
| floor() | 매개변수의 소수점 이하 부분 버림 |
| random() | 0과 1 사이 무작위 수 반환 |
3) 브라우저 관련 객체
window 객체
- 브라우저 창이 열릴 때마다 하나씩 만들어지며, 브라우저 창 안의 요소 중 최상위에 위치
window 객체 메서드
| 종류 | 설명 |
| alert() | 알림 창 표시 |
| confirm() | [확인], [취소] 버튼이 있는 확인 창 표시 |
| prompt() | 웹 브라우저에서 간단한 입력 받는 창 표시 |
| close() | 현재 창 닫기 |
| open("경로", 창 이름, 창 옵션) | 새로운 창 열기 창 옵션으로는 left, top 속성으로 위치 지정 또는 width, height 속성으로 크기 지정 가능 |
| print() | 현재 문서 인쇄 |
history 객체
| 구분 | 종류 | 설명 |
| 프로퍼티 | length | 방문한 사이트 갯수 저장 |
| 메서드 | back() | 이전 페이지를 불러오기 |
| forward() | 다음 페이지 불러오기 | |
| go() | 현재 페이지를 기준으로 이동 -1 : 이전 페이지 1 : 다음 페이지 |
location 객체
| 구분 | 종류 | 설명 |
| 프로퍼티 | hash | URL 중 #로 시작하는 해시 부분 정보 |
| host | URL의 호스트 이름과 포트 번호 | |
| hostname | URL의 호스트 이름 | |
| pathname | URL 경로가 저장 | |
| port | URL의 포트 번호 | |
| protocol | URL의 프로토콜 저장 | |
| search | URL 중에서 ?로 시작하는 검색 내용 저장 | |
| username password |
도메인 이름 앞에 username이나 password 함께 입력하는 사이트의 URL인 경우 정보 저장 | |
| 메서드 | assign() | 현재 문서에 새 문서 주소 할당해서 새 문서 가져옴 |
| reload() | 현재 문서 다시 불러오기 | |
| replace() | 현재 문서 URL 지우고 다른 URL 문서로 교체 | |
| toString() | 현재 문서 URL을 문자열로 반환 |
문서 객체 모델(DOM)
1) 정의
- 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
- 기본 원칙 : 모든 HTML 태그는 요소 노드 / HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드 / HTML 태그에 있는 속성은 자식 노드인 속성 노드 / 주석은 주석 노드
2) DOM에 접근하기
id 선택자를 이용한 접근
요소명.getElementById("id명")
ex document.getElementById("heading") /* id값이 heading인 요소에 접근 */
class 선택자를 이용한 접근
요소명.getElementsByClassName("class명")
ex document.getElementsByClassName("cubic") /* class=cubic 속성이 있는 모든 요소 접근 */
태그 이름으로 접근
요소명.getElementsByTagName("태그명")
ex document.getElementsByTagName("p") /* <p> 태그를 사용한 모든 요소에 접근 */
노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
ex querySelector("#heading") /* id=heading인 요소 접근 */
활용 예 : 이미지 클릭하면 알림 창 표시
<img src="images/cup.png" id="cup">
...
<script>
var cup = document.querySelector("#cup");
cup.onclick = function() {
alert("이미지를 클릭했습니다.");
}
</script>
3) CSS 속성에 접근하기
document.요소명.style.속성명
- 스타일 속성값을 가져와서 그 값을 수정 가능
ex document.getElementById("desc").style.color = "blue";
/* id가 desc인 요소의 글자를 파란색으로 수정 */
