자바스크립트 : 프로토타입을 이용해서 객체 생성
1-11. 자바스크립트의 객체
- 자바스크립트의 객체
- 클래스(설계도)가 필요없다.
- 객체의 구성요소는 name:value의 쌍으로 이루어져 있다.
- 객체 생성 후에도 객체의 구성요소를 추가/변경/삭제 가능하다.
- 자바스크립트 객체는 자바의 Map과 유사하다.
- 자바스크립트 객체의 생성
- 빈 객체의 생성
var obj = { }; - 구성요소를 가지고 있는 객체 생성
var obj = {no:100, title:"이것이 자바다", author:"신용권", price:35000, discountRate:0.15, onSell:true}; - 생성된 객체에 구성요소 추가하기
var obj = { };
obj.no = 100; // obj -> {no:100}
obj["title"] = "이것이 자바다" // obj -> {no:100, title:"이것이 자바다"}
obj.price = 35000; // obj -> {no:100, title:"이것이 자바다", price:35000}
obj.price = 32000; // obj -> {no:100, title:"이것이 자바다", price:32000}
- 빈 객체의 생성
자바의 멤버변수 ≒ 자바스크립트의 프로퍼티 { no:100, title:"이것이 자바다", price:32000 } 이런것들
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 객체</title>
</head>
<body>
<h1>자바스크립트의 객체</h1>
<script type="text/javascript">
// 빈 객체 생성하기
var obj1 = {};
console.log("첫번째 객체", obj1);
// 구성요소를 포함하고 있는 객체 생성하기
var obj2 = {no:100, title:"이것이 자바다", price:35000, discountPrice:32000, onSell:true, stock:30};
console.log("두번째 객체", obj2);
// 객체를 생성하고, 구성요소 추가/삭제하기
var obj3 = {};
console.log("세번째 객체 -1", obj3);
obj3.userId = 'hong';
obj3.name = "홍길동";
obj3.deleted = false;
obj3.point = 14000;
console.log("세번째 객체 -2", obj3);
delete obj3.userId;
console.log("세번째 객체 -3", obj3);
// 다양한 값을 포함하는 객체
var obj4 = {
name: "블랙팬서, 와칸다 포에버", // 값: 문자열
genre: ['액션', '어드벤처', 'SF'], // 값: 배열
score: 6.1, // 값: 실수
runningTime: 161, // 값: 정수
act: [ // 값: 배열 (각 배열의 값이 객체)
{name:"레티티아 라이트", role:"슈리 역", engName:"Letitia Wright"},
{name:"류피타 뇽오", role:"나키아 역", engName:"Lupita Myong'o"},
{name:"다나이 구리라", role:"오코예 역", engName: "Danai Gurira"}
]
}
// 객체의 프로퍼티값 출력
console.log("영화제목", obj4.name);
console.log("영화장르", obj4.genre[0], obj4.genre[1], obj4.genre[2]);
console.log("영화 평점", obj4.score);
console.log("상영시간", obj4.runningTime);
console.log("배우1", obj4.act[0].name);
console.log("배우2", obj4.act[1].name);
console.log("배우3", obj4.act[2].name);
</script>
</body>
</html>
* 자바스크립트의 배열
- 가변길이 배열
- Java의 List와 유사
- 순서있는 값의 리스트
[ 값, 값, 값, 값 ]
( *값의 타입이 달라도 상관없다. )
- index를 이용해서 값을 조작(추가, 변경, 조회)
- 사용목적 : 같은 타입의 값을 여러 개 저장할 때 사용
var arr = [ ]; // 자바스크립트의 배열 리터럴
* 자바스크립트의 객체
- 클래스없이 생성한다.
- name:value의 쌍으로 구성된다.
- Java의 Map과 유사
- name:value 쌍의 집합
[ 이름:값, 이름:값, 이름:값 ]
( *이름 중복 불가 )
- 이름으로 값을 조작(추가, 변경, 조회)
- 사용목적 : 다양한 타입의 값을 이름을 붙여서 저장할 때 사용
var obj = { }; // 자바스크립트의 객체 리터럴
1-12. 자바스크립트의 함수
1) 함수
- 함수
- 특정 기능을 처리하는 자바스크립트 코드의 묶음
- 함수의 구성요소
- 함수의 선언부
- function 함수명(매개변수명, 매개변수명, 매개변수명, ...)
- function은 함수를 나타내는 키워드
- 함수명은 다른 함수와 구별되는 식별자
- 매개변수는 변수의 타입은 필요없고, 변수명만 지정하면 된다.
- 반환타입을 정의하지 않는다.
- 모든 함수는 값을 반환한다.
- return 문을 사용해서 값을 반환한다.
- return 문이 없는 함수는 undefined를 반환한다.
- function 함수명(매개변수명, 매개변수명, 매개변수명, ...)
- 함수의 바디부
- { } 으로 표시된다.
- { } 내에 필요한 수행문을 작성한다.
- 함수의 선언부
- 함수명 작성 규칙
- 영어 대소문자, $, _, 숫자 사용가능 (숫자로 시작할 수 없다.)
* 함수명이 _로 시작하면 보통 private 함수로 간주한다. - 예)
function $( ) { ... }
function _get( ) { ... }
- 영어 대소문자, $, _, 숫자 사용가능 (숫자로 시작할 수 없다.)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 함수</title>
</head>
<body>
<h1>자바스크립트의 함수</h1>
<script type="text/javascript">
// 매개변수가 없는 함수
function fn1(){
console.log("fn1이 실행됨");
}
// 매개변수가 있는 함수
function fn2(a,b,c){
console.log("fn2가 실행됨");
console.log("fn2의 매개변수에 전달된 값", a,b,c);
}
function fn3(x,y){
console.log("fn3가 실행됨");
console.log("fn3의 매개변수에 전달된 값", x,y);
console.log("fn3의 arguments", arguments);
}
// 함수의 호출
fn1();
fn1(10,20,30); // 사용x
fn2();
fn2(10);
fn2(10,20);
fn2(10,20,30);
fn2(10,20,30,40); // 4개를 전달해도, 매개변수가 3개이므로 3개까지만 전달
fn3('hong', 'kim');
fn3('hong', 'kim', 'kang', 'lee', 'ahn'); // arguments : 전달한 모든 값 표시
</script>
</body>
</html>
2) 함수 선언식과 함수 표현식
- 함수 선언식
- function 함수명(매개변수, 매개변수) {
수행문;
}
* 이름있는 함수를 선언한다.
- function 함수명(매개변수, 매개변수) {
- 함수 표현식
- var 변수명 = function(매개변수, 매개변수) {
수행문;
}
* 이름없는 함수를 정의하고, 그 함수를 변수에 대입시킨다.
- var 변수명 = function(매개변수, 매개변수) {
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 함수</title>
</head>
<body>
<h1>자바스크립트 함수</h1>
<script type="text/javascript">
fn1(20,40); // 함수선언식으로 정의된 함수는 선언식 전에도 사용가능
//fn2(30,60); // 오류. 함수표현식으로 정의된 함수는 해당 표현식 이후 수행문에서만 사용가능
// 함수 선언식으로 함수 정의
function fn1(x,y){
console.log("fn1이 실행됨");
console.log("fn1의 매개변수값", x,y);
}
// 함수 표현식으로 함수 정의
var fn2 = function(x,y){
console.log("이름없는 함수가 실행됨");
console.log("이름없는 함수의 매개변수값", x,y);
}
// 함수의 실행
fn1(10,20); // 함수이름이 fn1인 함수를 실행한다.
fn2(100,200); // fn2변수에 대입되어 있는 함수를 실행한다.
</script>
</body>
</html>
1-13. 자바스크립트 이벤트
- 이벤트
- 사용자가 어떤 동작을 할 때마다 생성되는 객체
- 사용자가 웹페이지내에서 어떤 동작을 할 때마다 그 모든 동작은 이벤트가 된다.
- 웹페이지에서 사용자와 상호작용 하기 위해서는 사용자가 동작할 때마다 발생되는 이벤트를 활용한다.
- 이벤트 소스
- 이벤트가 발생되는 컨트롤(버튼, 체크박스, 입력필드, 스크롤)
- 이벤트 핸들러(이벤트 리스너)
- 이벤트 소스에서 기대하던 이벤트가 발생했을 때 실행할 함수
- 이벤트의 종류
- 키보드 이벤트
- onkeydown : 키보드의 키를 눌렀을 때
- onkeypress : 키가 완전히 눌렸을 때 (숫자, 영문) , (한글,백스페이스,엔터,방향키는 X)
- onkeyup : 눌렸던 키가 위로 올라올 때 (이 때, 입력한 값이 화면에 표시됨)
- 마우스 이벤트
- onclick : 클릭했을 때
- ondbclick : 더블클릭했을 때
- onmouseenter : 마우스 포인트가 엘리먼트의 경계선 안으로 진입했을 때
- onmouseleave : 마우스 포인트가 엘리먼트의 경계선 밖으로 나갔을 때
- onmouseover : 마우스 포인트가 엘리먼트 위에 올라왔을 때 (어디 위에 있는지가 기준)
- onmouseout : 마우스 포인트가 엘리먼트를 벗어났을 때 (어디 위에 있는지가 기준)
- onmousedown : 마우스의 버튼을 눌렀을 때
- onmouseup : 마우스의 버튼에서 손을 뗐을 때
- onmousemove : 마우스 포인트가 움직일 때
- 폼 이벤트
- onchange : 폼 요소의 값이 변경될 때 (체크박스와 라디오버튼 선택/해제, select의 옵션 변경)
(키보드로 입력할 때 XXXX -> 입력 후 벗어났을 때) - onreset : 폼 입력값이 리셋될 때
- onsubmit : 폼 입력값이 서버로 제출될 때
- onfocus : 폼 입력요소에 포커스가 위치할 때
- onblur : 폼 입력요소에서 포커스가 다른 곳으로 이동할 때
- onchange : 폼 요소의 값이 변경될 때 (체크박스와 라디오버튼 선택/해제, select의 옵션 변경)
- 윈도우 이벤트
- onresize : 윈도우 창의 크기가 조절될 때
- onscroll : 스크롤바를 움직일 때 (스크롤바를 아래로 이동할 때마다 새로운 콘텐츠 추가)
- onload : 화면의 로딩이 완료됐을 때 (웹페이지 로딩이 완료되면 특정 작업을 수행)
- onerror : 웹페이지에서 에러가 발생했을 때
- 키보드 이벤트
- 이벤트소스와 이벤트핸들러 바인딩하기
- 1. HTML 이벤트 핸들러 바인딩 (HTML 태그에 직접 작성)
<button onclick="eventHandler( );">버튼</button>
function eventHandler( ) {
수행문;
}
* 이벤트 소스 : <button>
* 기대하는 이벤트 : onclick
* 이벤트 핸들러 : function eventHandler( ) { ... } - 2. DOM 이벤트 핸들러 바인딩
<button id="btn-delete">삭제</button>
var btn = document.querySelector("#btn-delete");
btn.onclick = eventHandler; // 이벤트 실행결과가 아닌 이벤트 자체가 담겨야하므로, eventHandler(); 절대 X
function eventHandler( ) {
수행문;
} - 3. 이벤트 리스너 바인딩
<button id="btn-delete">삭제</button>
var btn = document.querySelector("#btn-delete");
btn.addEventListener= ( 'click', eventHandler ); // 이벤트이름에서 on 생략
function eventHandler( ) {
수행문;
}
- 1. HTML 이벤트 핸들러 바인딩 (HTML 태그에 직접 작성)
1) 이벤트핸들러 함수 바인딩하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 이벤트</title>
</head>
<body>
<h1>자바스크립트 이벤트</h1>
<div>
<!-- 이벤트소스인 button 태그에서 이벤트핸들러 함수 바인딩하기 -->
<button id="btn-1" onclick="fn1()">버튼1</button>
<button id="btn-2">버튼2</button>
<button id="btn-3">버튼3</button>
</div>
<script type="text/javascript">
// 이벤트 핸들러(=이벤트 리스너) 함수
function fn1(){
alert("fn1이 실행됨");
}
// 이벤트 핸들러(=이벤트 리스너) 함수
function fn2(){
alert("fn2가 실행됨");
}
// 이벤트 핸들러(=이벤트 리스너) 함수
function fn3(){
alert("fn3이 실행됨");
}
var btn2 = document.querySelector("#btn-2");
btn2.onclick = fn2;
var btn3 = document.getElementById("btn-3");
btn3.addEventListener('mouseenter', fn3);
</script>
</body>
</html>
2) 자바스크립트 키보드 이벤트
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 키보드 이벤트</title>
</head>
<body>
<h1>자바스크립트 키보드 이벤트</h1>
<form>
입력필드 : <input type="text" name="field1" onkeydown="keydown();" onkeyup="keyup();" onkeypress="keypress();"/><br />
입력필드 : <input type="password" name="field2" onkeyup="checkInputField();" placeholder="6 ~ 12 글자로 입력" /><br />
</form>
<p id="feedback-message"></p>
<script type="text/javascript">
// 이벤트 핸들러 함수 - 입력필드에 입력된 값을 체크하는 이벤트 핸들러 함수
function checkInputField(){
// id가 feedback-message인 <p /> 태그를 표현하는 Element 객체를 조회한다.
var p = document.querySelector("#feedback-message"); //"[id=feedback-message]"로 적어도 됨
// <p /> 태그를 표현하는 Element 객체는 textContent 프로퍼티를 가지고 있다.
// textContent 프로퍼티는 태그의 텍스트 콘텐츠를 표현하는 프로퍼티다. (<>태그들 사이에 텍스트가 있는 애들은 모두 textContent 갖고있음</>)
// name속성값이 field2인 <input /> 태그를 표현하는 Element 객체를 조회한다.
var input = document.querySelector("[name=field2]");
// <input /> 태그를 표현하는 Element 객체는 value 프로퍼티를 가지고 있다.
// value 프로퍼티는 입력필드에 입력된 갓을 표현하는 프로퍼티다.
var inputValue = input.value;
console.log("입력값", inputValue);
// 입력필드에 입력된 글자수에 따라서 메시지가 p태그의 텍스트콘텐츠로 표현되게 한다.
if(inputValue.length < 6){
p.textContent = "글자수가 모자랍니다.";
p.style.color = 'red';
} else if(inputValue.length > 12){
p.textContent = "글자수가 너무 깁니다.";
p.style.color = 'red';
} else {
p.textContent = "글자수가 적당합니다.";
p.style.color = 'green';
}
}
function keydown(){
console.log("keydown - 이벤트 핸들러 실행...");
}
function keyup(){
console.log("keyup - 이벤트 핸들러 실행...");
}
function keypress(){
console.log("keypress - 이벤트 핸들러 실행...");
}
</script>
</body>
</html>
3) 자바스크립트 마우스 이벤트
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마우스 이벤트</title>
</head>
<body>
<h1>자바스크립트 마우스 이벤트</h1>
<form>
<textarea rows="10" style="width: 100%;" name="content" id="content-field"></textarea>
</form>
<script type="text/javascript">
// 아이디가 content-field인 <textarea> 태그를 표현하는 엘리먼트 객체를 조회한다.
var el = document.querySelector("#content-field");
// 엘리먼트 객체의 프로퍼티에 이벤트핸들러 함수를 등록한다.
el.onmouseenter = mouseenter;
el.onmouseleave = mouseleave;
el.onmousedown = mousedown;
el.onmouseup = mouseup;
el.onmousemove = mousemove;
function mouseenter(){
console.log("마우스 포인터가 진입했습니다.");
}
function mouseleave(){
console.log("마우스 포인터가 빠져나갔습니다.");
}
function mousedown(){
console.log("마우스 버튼이 눌러졌습니다.");
}
function mouseup(){
console.log("마우스 버튼이 떨어졌습니다.");
}
function mousemove(){
console.log("마우스 포인터가 움직입니다.");
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마우스 이벤트</title>
</head>
<body>
<h1>자바스크립트 마우스 이벤트</h1>
<form>
<textarea rows="10" style="width: 100%;" name="content" id="content-field"
onmouseenter="mouseenter(event);"
onmouseleave="mouseleave(event);"></textarea>
</form>
<script type="text/javascript">
// 아이디가 content-field인 <textarea> 태그를 표현하는 엘리먼트 객체를 조회한다.
var el = document.querySelector("#content-field");
// 엘리먼트 객체의 프로퍼티에 이벤트핸들러 함수를 등록한다.
//el.onmouseenter = mouseenter;
//el.onmouseleave = mouseleave;
el.onmousedown = mousedown;
el.onmouseup = mouseup;
el.onmousemove = mousemove;
function mouseenter(){
console.log("마우스 포인터가 진입했습니다.", event.target); // 실행하는 위치를 알려줌
}
function mouseleave(){
console.log("마우스 포인터가 빠져나갔습니다.", event.target);
}
// 이벤트 핸들러 함수는 Event객체를 전달받을 수 있다.
function mousedown(event){
//console.log("마우스 버튼이 눌러졌습니다.", event);
el.value = event.which + "버튼 down"; // 마우스 왼쪽, 오른쪽, 휠버튼
}
function mouseup(e){
//console.log("마우스 버튼이 떨어졌습니다.", e);
el.value = e.which + "버튼 up";
}
function mousemove(e){
//console.log("마우스 포인터가 움직입니다.", e);
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<title>자바스크립트 폼 이벤트</title>
</head>
<body>
<div class="container my-3">
<h1>자바스크립트 폼 이벤트</h1>
<form class="bg-light border p-3" method="post" action="register.jsp">
<div class="mb-3">
<label class="form-label">직위</label>
<select class="form-control" name="position" onchange="checkPosition();">
<option value="">직위를 선택하세요</option>
<option value="100">사원</option>
<option value="200">대리</option>
<option value="300">과장</option>
<option value="400">차장</option>
<option value="500">부장</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">급여</label>
<input type="number" class="form-control" name="salary">
</div>
<div class="mb-3">
<label class="form-label">입사구분</label>
<div class="form-check">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="type" value="신입" checked="checked" onchange="toggleYearBox(event);">
<label class="form-check-label">신입</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="type" value="경력" onchange="toggleYearBox(event);">
<label class="form-check-label">경력</label>
</div>
</div>
</div>
<div id="box-year" class="mb-3" style="display: none;">
<label class="form-label">개발경력(년)</label>
<input type="text" class="form-control" name="year">
</div>
</form>
</div>
<script type="text/javascript">
function toggleYearBox(){
// Event 객체의 target 프로퍼티 : 지금 이벤트가 발생한 엘리먼트가 저장되어 있다.
var el = event.target;
var checkedValue = el.value;
var el2 = document.querySelector("#box-year");
if(checkedValue === "신입"){
el2.style.display = "none";
} else if(checkedValue === "경력"){
el2.style.display = "";
}
}
function checkPosition(){
//console.log("checkPosition()이 실행됨");
var el = document.querySelector("select[name=position]");
var selectedValue = el.value;
//console.log("선택된 옵션의 값 -> ", selectedValue);
var el2 = document.querySelector("input[name=salary]");
el2.value = selectedValue;
}
</script>
</body>
</html>
'수업내용 > Javascript & jQuery' 카테고리의 다른 글
| [2022.11.29.화] jQuery 선택자 (0) | 2022.11.29 |
|---|---|
| [2022.11.25.금] web-board 에 자바스크립트 기능 (입력값 누락방지, 검색) (0) | 2022.11.25 |
| [2022.11.25.금] 자바스크립트3 - 이벤트 (0) | 2022.11.25 |
| [2022.11.24.목] 자바스크립트3 - 값 조회, 변경 (0) | 2022.11.24 |
| [2022.11.22.화] 자바스크립트 (0) | 2022.11.22 |