JavaScript 자바스크립트 기초

🌐 FrontEnd/JavaScript

JavaScript 자바스크립트 기초 - 객체

m-ur-phy 2022. 5. 30. 20:06

시작하면서

자바스크립트 기초를 공부합니다. 자바스크립트의 객체를 예제와 함께 공부합니다.

1. 객체

(1) 객체란?

자바스크립트는 객체(Object) 기반 언어입니다. 객체는 기능(메서드) 또는 속성으로 구성되어 있습니다.

// 기본형

객체.메서드();

TV.켜다();
TV.끄다();

객체.속성 또는 객체.속성=값;

TV.너비 = "30inch";
TV.색상 = "black";

(2) 객체의 종류

객체는 크게 세 가지로 분류할 수 있습니다.

(2-1) 내장 객체

자바스크립트 자체 내에서 지원하는 객체를 가리킵니다.
내장 객체에는 문자(String), 날짜(Date), 수학(Math), 배열(Array) 객체 등으로 구성되어있습니다.

(2-2) 브라우저 객체 모델(BOM)

브라우저에 계층적으로 내장되어 있는 객체들을 말합니다.
브라우저 객체로는 windows, screen, location, history, navigaor 객체 등이 있습니다.

(2-3) 문서 객체 모델(DOM)

HTML 문서 구조를 말합니다.
HTML 문서의 기본 구조는 최상위 객체로 <html> 이 있으며, 그 하위 객체로는 <head>와 <body> 가 있습니다.

이제 하나 하나 객체를 살펴보도록 하겠습니다.

2. 내장 객체

내장 객체(Built-in Object) 는 브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다.

(1) 내장 객체 생성하기

객체를 생성할 때에는 new 라는 키워드와 생성함수를 사용합니다.

// 기본형

참조 변수 = new 생성함수();

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내장 객체 생성하기</title>
    <script type="text/javascript">
        let tv = new Object(); // 생성된 객체를 변수 tv가 참조합니다

        // tv 객체의 속성을 생성합니다
        tv.width = "30cm"; // tv 의 가로 속성
        tv.height = "25cm"; // tv 의 세로 속성
        tv.weight = "5kg"; // tv 의 무게 속성
        tv.color = "black"; // tv 의 색 속성

        // tv 객체의 off 기능(메서드)을 생성합니다
        tv.off = function() {
            document.write("전원 off", "<br/>");
        }

        document.write(tv.width, "<br/>"); // tv의 가로 속성을 출력합니다
        document.write(tv.height, "<br/>"); // tv의 높이 속성을 출력합니다
        document.write(tv.weight, "<br/>"); // tv의 무게 속성을 출력합니다
        document.write(tv.color, "<br/>"); // tv의 컬러 속성을 출력합니다

        tv.off(); // tv off 기능을 실행합니다
    </script>
</head>
<body>
    
</body>
</html>

(2) 날짜 정보 객체

날짜 객체는 현재 날짜 또는 특정 날짜 관련 다양한 정보를 제공합니다.
예를 들어, 2002.02.02 가 무슨 요일인지 정보를 얻을 수 있습니다.
날짜 정보 객체에는 날짜의 정보를 가져오는 메서드와 날짜를 수정하는 메서드로 나누어 집니다.
다음은 날짜 정보 객체에 대한 표 입니다.

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

// 기본형

참조 변수 = new Date();

let t = new Date();
let t = new Date("2002/2/20");
let t = new Date(2002,2,22);

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>날짜 정보 객체</title>
    <script type="text/javascript">
        let time = new Date(); // 현재 날짜 객체를 생성합니다

        let nowMonth = time.getMonth(); // 현재 월을 반환하며 -1 로 나옵니다
        let nowDate = time.getDate(); // 현재 일자를 반환합니다
        let nowDay = time.getDay(); // 현재 요일을 반환합니다 (0: 일 ~ 6: 토)

        document.write("현재 월: " + nowMonth, "<br/>");
        document.write("현재 일: " + nowDate, "<br/>");
        document.write("현재 요일: " + nowDay, "<br/>");

        let worldcup = new Date(2002, 4, 31); // 2002(5.31) 월드컵 날짜 객체를 생성합니다 (월 -1)

        let theMonth = worldcup.getMonth(); // 날짜 객체에서 월에 대한 정보만 가져옵니다
        let theDate = worldcup.getDate(); // 날짜 객체에서 일에 대한 정보만 가져옵니다
        let theDay = worldcup.getDay(); // 날짜 객체에서 요일에 대한 정보만 가져옵니다

        document.write("2002 월드컵은 몇 월에 개최되었나요?: " + theMonth, "<br/>");
        document.write("2002 월드컵은 몇 일에 개최되었나요?: " + theDate, "<br/>");
        document.write("2002 월드컵은 무슨 요일에 개최되었나요?: " + theDay, "<br/>");
    </script>
</head>
<body>

(3) 숫자 객체

숫자를 표기할 때, 표현 가능한 수의 속성과 숫자 표기법에 대한 메서드를 제공합니다.

// 기본형

let 참조변수 = new Number(값) 또는 let 참조변수 = 값;

Number.속성;

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>숫자 객체</title>
    <script type="text/javascript">
        let num1 = 3.456789;
        let num2 = 900000000;
        let num3 = "30.5px";
        let num4 = 10;

        document.write("표현 가능한 가장 큰 수: " + Number.MAX_VALUE, "<br/>");
        document.write("표현 가능한 가장 작은 수: " + Number.MIN_VALUE, "<br/>");
        document.write("숫자가 아닌경우의 표기: " + Number.NaN, "<br/>");
        document.write("무한대 수 표기: " + Number.POSITIVE_INFINITY, "<br/>");
        document.write("음의 무한대 수 표기: " + Number.NEGATIVE_INFINITY, "<br/>");

        document.write(num2.toExponential(1), "<br/>"); // toExponential : 숫자를 지수 표기법으로 표기해 문자열로 반환
        document.write(num1.toFixed(2), "<br/>"); // toFixed : 소수의 자리수를 제한하여 문자열로 반환
        document.write(num1.toPrecision(2), "<br/>"); // toPrecision : 수의 자리수를 제한하여 문자열로 반환
        document.write(num1.toString(), "<br/>"); // toString : 숫자를 문자열로 반환
        document.write(num4.valueOf(), "<br/>"); // valueOf : Boolean 에 대한 원시 데이터형을 반환
        document.write(parseInt(num3) + num4, "<br/>"); // parseInt : 문자열을 숫자형(정수)으로 반환
        document.write(parseFloat(num3) + num4, "<br/>"); // parseFloat : 문자열을 숫자형(부동소수점)으로 반환
    </script>
</head>
<body>
    
</body>
</html>

(4) 수학 객체

앞서 수를 더하거나 빼는 작업은 산술 연산자를 사용하였습니다.
하지만 최댓값, 반올림 등 수학 관련 기능을 사용하기 위해서는 수학 객체를 사용해야 합니다.
다음 표는 수학 객체의 메서드와 참조하는 상수에 대해 정리한 것입니다.

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

(4) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>수학 객체</title>
    <script type="text/javascript">
        let num = 2.1234;
        
        let maxNum = Math.max(1, 1000, 10, 100); // 최댓값을 반환합니다
        let minNum = Math.min(1, 1000, 10, 100); // 최솟값을 반환합니다
        let roundNum = Math.round(num); // 반올림 값을 반환합니다
        let floorNum = Math.floor(num); // 소수점 첫째 자리에서 값을 내립니다
        let ceilNum = Math.floor(num); // 소수점 첫째 자리에서 올립니다
        let rndNum = Math.random(); // 0~1 사이 난수를 발생합니다
        let piNum = Math.PI; // Math.PI는 원주율 상수를 반환합니다

        document.write(maxNum, "<br/>");
        document.write(minNum, "<br/>");
        document.write(roundNum, "<br/>");
        document.write(floorNum, "<br/>");
        document.write(ceilNum, "<br/>");
        document.write(rndNum, "<br/>");
        document.write(piNum, "<br/>");

    </script>
</head>
<body>
    
</body>
</html>

(5) 배열 객체

앞서 변수에는 한 개의 데이터만 저장할 수 있고, 만일 변수에 새 값이 저장되면 기존에 저장된 값은 제거되었습니다.
하지만 배열 객체를 이용하면 여러 개의 데이터를 한 변수에 저장할 수 있습니다.
다음 표는 배열 객체에서 사용할 수 있는 메서드 및 속성입니다.

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

// 기본형

let 참조변수 = new Array();
let 참조변수 = new Array(값1, 값2, 값3, ... , 값n);
let 참조변수 = [값1, 값2, 값3, ... , 값n];

// 배열 객체 저장된 데이터 불러오기

참조변수[인덱스 번호];

(5) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열 객체</title>
    <script type="text/javascript">
        let num = ["사당", "교대", "방배", "강남"];
        // 배열 객체를 출력하였습니다
        document.write(num, "<br/>");
        // 배열 객체의 타입을 출력하였습니다
        document.write(typeof num, "<br/>");

        /* 기준 문자("-") 기준으로 배열의 값들이 하나의 문자형 데이터로 결합됩니다 */
        document.write(num.join("-"), "<br/>");
        document.write(typeof num.join("-"), "<br/>");
        
        // 배열 객체의 값의 순서를 거꾸로 뒤집고 출력합니다
        document.write(num.reverse(), "<br/>");

        // 배열 객체의 값들을 오름차순으로 정렬 후 출력합니다
        document.write(num.sort(), "<br/>");

    </script>
</head>
<body>
    
</body>
</html>

(6) 문자 객체

문자 객체(String Object) 는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용합니다.
new 키워드와 문자 객체 함수 String 메서드를 사용합니다.
다음 표는 문자 객체 메서드 및 속성을 정리한 표입니다.

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

// 기본형

let 참조변수 = new String(문자형 데이터);

let t = new String("hello world");
let t = "hello world"; // 문자 객체 생성

(6) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문자 객체</title>
    <script type="text/javascript">
        let t = "Hello Thank you good luck to you";

        document.write(t.charAt(16), "<br/>"); 
        document.write(t.indexOf("you"), "<br/>"); 
        document.write(t.indexOf("you", 16), "<br/>"); 
        document.write(t.lastIndexOf("you"), "<br/>"); 
        document.write(t.lastIndexOf("you", 25), "<br/>"); 
        document.write(t.match("luck"), "<br/>"); 
        document.write(t.search("you"), "<br/>"); 
        document.write(t.substr(21, 4), "<br/>"); 
        document.write(t.substring(6, 12), "<br/>"); 
        document.write(t.replace("you", "me"), "<br/>"); 
        document.write(t.toLowerCase(), "<br/>"); 
        document.write(t.toUpperCase(), "<br/>"); 
        document.write(t.length, "<br/>");

        let s = t.split(" "); 
        document.write(s[0], "<br/>"); 
        document.write(s[4], "<br/>");

        document.write(String.charCodeAt("A"), "<br/>"); 
        document.write(String.fromCharCode(65), "<br/>");
    </script>
</head>
<body>
    
</body>
</html>

3. 브라우저 객체 모델(BOM)

(1) 브라우저 객체란?

브라우저에 내장된 객체를 가리킵니다.
브라우저 객체의 최상위 객체는 window 객체이며 그 하위로는 document, screen, location, history, navigator 등의 계층적 구조로 이루어져 있는 것을 일컬어 브라우저 객체 모델 (BOM : Browser Object Model) 이라고 합니다.

window - document : body, div, img, a, form, input, ...
       - screen
       - location
       - history
       - navigator

(2) windows 객체

windows 객체 메서드 종류에 대한 표입니다.

종류	설명
open()	새 창을 열 때 사용한다
alert()	경고 창을 띄운다
prompt()	질의응답 창을 띄운다
confirm()	확인 / 취소 창을 띄운다
moveTo()	창의 위치를 이동시킬 때 사용한다
resizeTo()	창의 크기를 변경시킬 때 사용한다
setInterval()	일정 간격으로 지속적으로 실행문을 실행시킬 때 사용한다
setTimeout()	일정 간격으로 한 번만 실행문을 실행시킬 때 사용한다

(3) screen 객체

screen 객체는 스크린(모니터) 너비, 높이 등 정보(속성)를 제공합니다.

// 기본형

screen.속성;
screen.width; // 모니터의 너비 값을 반환합니다

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스크린 객체</title>
    <script type="text/javascript">
        document.write("width: " + screen.width, "<br/>");
        documetn.write("height: " + screen.height, "<br/>");
    </script>
</head>
<body>
    
</body>
</html>

(4) location 객체

location객체는 브라우저에 url 관련 정보(속성) 및 메서드를 제공합니다.
다음은 location 객체의 속성, 메서드 종류를 정리한 표입니다.

종류	설명
location.href	주소 영역에 참조 주소를 설정하거나 url을 반환한다
location.hash	url 에 해시값(#에 명시된 값)을 반환한다 예) http://www.tistory.com#hello
location.hostname	url에 호스트 이름을 설정하거나 반환한다
location.host	url에 호스트 이름과 포트 번호를 반환한다
location.port	url에 포트 번호를 반환한다
location.protocol	url에 프로토콜을 반환한다
location.search	url에 쿼리(요청 값)을 반환한다 예) http://www.tistory.com?pageNum=1&sort=DESC
location.reload	새로 고침이 일어난다

// 기본형

location.속성 또는 location.메서드();
location.href; // 주소 영역에 참조 주소(url)를 반환합니다

(5) history 객체

history 객체는 브라우저에 방문 기록에 대한 정보(속성) 및 메서드를 제공합니다.
마치 브라우저에 이전, 다음버튼과 같은 기능을 제공합니다.

// 기본형

history.메서드 또는 history.속성;
history.back(); // 바로 이전 페이지로 이동합니다

(6) navigator 객체

navigator 객체는 방문자의 브라우저 정보와 운영체제 정보를 제공합니다.

4. 문서 객체 모델(DOM)

(1) 문서 객체 모델

문서 객체 모델이란 HTML 문서의 구조를 가리킵니다.
가령 <img> 태그에는 src 라는 속성과 그림을 표현하는 기능을 가지고 있습니다. 이렇듯 HTML 태그는 다른 말로 문서 객체라고 부릅니다.

(2) 선택자

선택자는 자바스크립트를 이용해 HTML에 문서 객체를 선택할 때 사용합니다.

// JavaScript 선택자 (CSS 선택자와 유사)

// CSS

#box {
	color: red;
}
#box + p {
	color: red;
}


//javascript

document.getElementById("box").style.color = red;
document.getElementById("box").nextSibling.style.color = red;

(3) 인접 요소 관계 파악하기

<html> 은 모든 문서 객체를 감싸고 있어 문서 객체의 최상위 객체 또는 루트 객체라고 합니다.
<head> 태그와 <body> 태그는 <html> 태그의 자식 요소입니다. 그렇다면 <html> 태그는 이들의 부모 요소가 됩니다.

(4) 선택자 종류

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

* parentNode, firstChild, previousSibling, nextSibling 등은 공백 문자 인식 호환성에 문제가 있는 경우가 있다고 합니다.

(5) 선택자 적용 위치와 방법

// 잘못된 예시

<html>
<head>
	자바스크립트 선언 // HTML 문단 태그가 로딩되기 전에 실행됩니다
</head>
<body>
	HTML 문단 태그 작성
</body>
</html>

// 올바른 예시 1

<html>
<head>
</head>
<body>
	HTML 문단 태그 작성
    자바스크립트 선언 // HTML 문단 태그가 로딩된 후에 실행됩니다
</body>
</html>

// 올바른 예시 2

<html>
<head>
	<script type="text/javascript">
		window.onload=function() {
			스크립트 실행문; //HTML 문단 태그가 로딩된 후에 실행됩니다
		}
	</script>
</head>
<body>
	HTML 문단 태그 작성
</body>
</html>

(6) 폼 요소 선택자

다음은 폼 요소 선택 방식과 관련한 표입니다.

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

(6) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM - 폼 요소 예제</title>
</head>
<body>
    <form action="#" method="get" name="f1">
        <fieldset>
            <legend>폼 요소1</legend>
            <p>
                <label for="user_pw1">비밀번호</label>
                <input type="password" name="user_pw1" id="user_pw1">
            </p>
            <p>
                <label for="user_pw2">비밀번호 재확인</label>
                <input type="password" name="user_pw2" id="user_pw2">
                <input type="submit" value="확인">
            </p>
        </fieldset>
    </form>
    <form action="#" method="get" name="f2">
        <fieldset>
            <legend>폼 요소2</legend>
            <div id="terms">
                개인정보의 보호 및 사용에 대해서는 관련법 및 회사의 개인정보취급방침이 적용됩니다.
            </div>
            <p>
                <input type="checkbox" name="accept" id="accept">
                <label for="accept">약관 동의합니다.</label>
            </p>
            <p>
                <input type="checkbox" name="allChk" id="allChk">
                <label for="allChk">전체선택</label><br>
                
                <input type="checkbox" name="subject1" id="subject1" value="s1">
                <label for="subject1">과목1</label><br>

                <input type="checkbox" name="subject2" id="subject2" value="s2">
                <label for="subject2">과목2</label><br>

                <input type="checkbox" name="subject3" id="subject3" value="s3">
                <label for="subject3">과목3</label>
            </p>
            <p>
                <input type="submit" value="등록 완료">
                <input type="reset" value="등록 취소">
            </p>
        </fieldset>
    </form>
    <script type="text/javascript">
        // 첫 번째 폼 요소에 전송 버튼을 눌렀을 때 실행
        document.f1.onsubmit = function(e) {
            let pw1 = document.f1.user_pw1;
            let pw2 = document.f1.user_pw2;

            pw2.value = pw1.value;
            pw2.disabled = true;

            return false;
        }

        // 전체 선택 체크박스를 클릭했을 때
        document.f2.allChk.onclick = function() {
            if(this.checked) { // 체크되어 있으면 true 반환
                document.f2.subject1.checked = true; // 첫 번째 체크박스 체크
                document.f2.subject2.checked = true; // 두 번째 체크박스 체크
                document.f2.subject3.checked = true; // 세 번재 체크박스 체크
            } else {
                document.f2.subject1.checked = false; // 첫 번재 체크박스 체크 해제
                document.f2.subject2.checked = false; // 두 번째 체크박스 체크 해제
                document.f2.subject3.checked = false; // 세 번째 체크박스 체크 해제
            }
        }

        // 두 번째 폼 요소에 전송버튼 눌렀을 때 실행
        document.f2.onsubmit = function() {
            let act = document.f2.accept;
            if(act.checked == false) { // 체크되어 있지 않다면 false
                alert("약관 동의해야 합니다!");
                act.focus();
                return false;
            }
        }
    </script>
</body>
</html>

마무리하며

자바스크립트의 객체를 공부해 보았습니다.

댓글과 공감은 항상 환영입니다!