Study/웹 공부

자바스크립트

NOredstone 2021. 11. 6. 17:48

자바스크립트 작성

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인 요소의 글자를 파란색으로 수정 */