<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>submit 버튼 - 유효성 검사를 하지 않는 경우</h3>
<form action="request.jsp" name="myForm" method="post">
<p> 이름 : <input type="text" name="name"></p>
<p> 나이 : <input type="text" name="age"></p>
<p>
<button type="submit">전송하기</button>
<!-- 서버로 전송할 수 있는 기능을 가지고 있는 버튼 : submit 버튼, image 버튼 -->
<!-- <button>에서 type="submit"을 생략하면 submit 버튼 -->
<!-- submit 버튼, image 버튼 등은 form 태그 안에 있어야 한다. -->
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function check() {
var f = document.myForm;
if(! f.name.value){
alert("이름을 입력하세요.");
f.name.focus();
return false; // 이벤트 취소
}
if(! /^(\d)+$/.test(f.age.value)) {
alert("나이는 숫자만 가능합니다.");
f.age.focus();
event.preventDefault(); // 이벤트 취소
return;
}
return true; // 서버로 전송
// submit 버튼에서는 submit() 메소드를 호출하면 서버로 두 번 전송되므로 절대로 호출해서는 안된다.
// submit 버튼은 자바스크립트에 오류가 있는 경우 스크립트를 실행하지 않고 바로 서버로 전송하므로 주의해야 한다.
}
</script>
</head>
<body>
<h3>submit 버튼 - 유효성 검사</h3>
<form action="request.jsp" name="myForm" method="post" onsubmit="return check();">
<p> 이름 : <input type="text" name="name"></p>
<p> 나이 : <input type="text" name="age"></p>
<p>
<button type="submit">전송하기</button>
<!-- submit 버튼을 클릭하면 submit 이벤트가 발생한다. -->
<!-- submit 이벤트는 false를 반환하거나 event.preventDefault()를 호출하면 이벤트가 취소 된다. -->
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function check() {
var f = document.myForm;
if(! f.name.value){
alert("이름을 입력하세요.");
f.name.focus();
event.preventDefault(); // 이벤트 취소
// 이 예제는 return false; 로는 이벤트 취소 발생되지 않음.
return;
}
if(! /^(\d)+$/.test(f.age.value)) {
alert("나이는 숫자만 가능합니다.");
f.age.focus();
event.preventDefault();
return;
}
return true; // 서버로 전송
}
// form에 submit 이벤트 등록
/*
window.onload = function() {
document.myForm.addEventListener("submit", check);
};
*/
window.onload = () => document.myForm.addEventListener("submit", check);
</script>
</head>
<body>
<h3>submit 버튼 - 유효성 검사</h3>
<form action="request.jsp" name="myForm" method="post">
<p> 이름 : <input type="text" name="name"></p>
<p> 나이 : <input type="text" name="age"></p>
<p>
<button type="submit">전송하기</button>
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var obj = { // 객체 리터널로 객체 생성
name:'홍길동',
score:90
};
console.log(obj.valueOf()); // obj 에는 valueOf가 없지만 동작함. valueOf()는 상위 객체에서 물려 받음
console.dir(obj);
console.log(obj.__proto__ === Object.prototype);
// __proto__ : 객체의 부모를 나타내는 프로토타입으로 부모에게 물려 받은 정보를 가지고 있음
// prototype : 자신의 프로토 타입 객체로 하위로 물려줄 프로토 타입 정보를 가지고 있음
// --------------------------------
function User(name) {
this.name = name;
}
var u = new User('이자바'); // 객체를 생성
console.dir(User);
console.dir(u);
</script>
</head>
<body>
<h3>프로토 타입</h3>
</body>
</html>
- 객체는 JavaScript 언어만이 가지고 있는 특징을 기초로 이루는 자료형으로, 데이터를 저장하고 있는 프로퍼티(property) 및 프로퍼티에 저장된 데이터에 조작을 가할 수 있는 method의 집합으로 구성된다.
- 객체는 '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너이다. 기본 타입은 하나의 값만을 가지지만 참조 타입인 객체는 여러 개의 프로퍼ㅣ들을 포함할 수 있으며, 이러한 객체의 프로퍼티들은 기본 타입의 값을 포함하거나 다른 객체를 가리킬 수 있다.
- null 과 undefined 를 제외한 모든 원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고, 모두 객체로서의 특징을 갖는다. (숫자, 문자열, 배열, 함수, 정규 표현식 등)
- 객체를 사용할 때는 속성 (property) 이름을 이용해서 속성 값을 읽거나 쓸 수 있다.
- 자바스크립트에선, 실행 시점에 특정 객체에 속성을 추가하거나 제거할 수 있다.
프로토타입(prototype) 기반 언어
- 자바스크립트는 클래스 기반이 아닌 프로토타입(prototype)을 기반으로 하는 객체 기반 언어이다.
- 프로토타입 기반 언어는 프로토타입 객체라는 개념이 있으며, 새로운 객체의 초기 속성을 가져오는 템플릿(template)으로 사용되는 객체이다. 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들며, 생성된 객체는 또 다른 객체의 원혀이 될 수 있다.
- 프로토타입 언어는 클래스 없이(Class-less)객체를 생성할 수 있다. ECMAScript 6에서 클래스가 추가 되었다.
- 모든 객체는 객체를 만들거나 런타임에 고유한 속성을 지정할 수 있다.
- 모든 객체를 다른 객체의 프로토타입으로 연결하여 두 번째 객체가 첫 번째 객체의 속성을 공유할 수 있다.
- 프로토 타입 객체를 참조하는 prototype 속성과 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크가 있다.
_proto_ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보(prototype link)
prototype : 자신의 프로토타입 객체로, 하위로 물려줄 프로토 타입의 정보(prototype object)
특징
- 모든 객체는 다른 객체로부터 상속을 받는다.
- 생성자 함수를 이용하여 객체 세트를 정의하고 생성할 수 있다.
- class와 마찬가지로 new 연산자로 하나의 객체(인스턴스)를 생성할 수 있다.
- 하나의 객체를 생성자 함수와 결합된 프로토타입에 할당함으로써 객체의 계층구조를 생성한다.
- 프로토타입 체인에 따라 속성을 상속받는다.
- 생성자 함수 혹은 포로토타입은 초기 속성들을 명시한다. 개별 객체 혹은 전체 객체 세트에 동적으로 속성을 추가, 삭제할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 생성자 함수를 이용한 객체 생성
// 생성자 함수 작성 - 생성자는 대문자로 시작한다.
function User(name, age) {
this.name = name;
this.age = age;
this.state = function() {
return this.age >= 19 ? "성인":"미성년자";
}
this.msg = function() {
var s = this.name + "님은 " +this.state()+"입니다.";
console.log(s);
}
}
// 생성자 함수를 이용한 객체 생성
var obj = new User('홍길동', 20);
console.log(obj.name);
obj.msg();
// Object.create()메소드를 이용한 객체 생성
var Book = {
subject:'자바',
msg: function() {
return '좋아하는 과목은 '+this.subject+'입니다.';
}
};
var b1 = Object.create(Book);
var b2 = Object.create(Book);
b1.subject = 'HTML';
b2.subject = 'CSS';
console.log(Book.msg());
console.log(b1.msg());
console.log(b2.msg());
</script>
</head>
<body>
<h3>객체 생성</h3>
</body>
</html>
생성자 함수를 이용한 객체 생성 특징
- 객체 타입을 정의하는 생성자 함수명의 첫 글자는 일반적으로 대문자로 시작한다.
- 생성자에 매개변수가 없으면 생성자를 호출할 때 전달인자 목록과 괄호를 생략할 수 있다. var o = new Object;
- 생성자를 호출하면 생성자의 프로토타입 속성을 상속받은 새로운 빈 객체가 생성된다. 생성자 함수는 객체를 초기화하고 새로 생성된 이 객체는 호출 컨텍스트로 사용된다.
- 생성자는 새로 생성된 객체를 this 키워드로 참조할 수 있다.
- 생성자 함수는 보통 return 키워드를 사용하지 않는다. 일반적으로 생성자 함수는 새 객체를 초기화하고 생성자 함수 몸체의 끝에 이르면 암시적으로 그 객체를 반환한다.
- 만약 생성자가 return 문을 사용하여 명시적으로 어떤 객체를 반환하면, 반환된 객체가 생성자 호출 표현식의 값이 되며, 생성자가 반환 값 없이 return 구문만을 사용하거나 원시 형식 값을 반환하면, 그 반환 값은 무시되고 새로 생성된 객체가 호출 표현식 값으로 사용된다.
this 키워드
- 자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해 arguments 객체 및 this 인자가 함수 내부로 암시적으로 전달된다.
- 현재 객체를 참조할 때 this키워드 사용하며, 일반적으로 this는 메소드에서 호출하는 객체를 참조한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 객체의 메소드를 호출할 때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체
var obj = { // 객체 생성. 일회성. 주로 속성값 보존을 위해 사용
name : '김자바',
msg : function() {
console.dir(this);
console.log(this.name); // this는 msg() 메소드를 호출한 객체
}
};
obj.msg();
// 생성자 함수를 호출할 때의 this : 새로 생성되는 객체
function Test(arg) {
this.name = arg;
this.getName = function() {
return this.name;
};
}
var obj2 = new Test('자바');
console.log( obj2.getName() );
// 함수를 호출할 때의 this
var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다.
// console.log(userName); // 스프링
console.log(window.userName); // 스프링
// sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩
var sayUser = function() {
console.log( this.userName, userName, window.userName );
}
sayUser();
</script>
</head>
<body>
<h3>객체- this</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 객체의 메소드를 호출할 때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체
var obj = { // 객체 생성. 일회성. 주로 속성값 보존을 위해 사용
name : '김자바',
msg : function() {
console.dir(this);
console.log(this.name); // this는 msg() 메소드를 호출한 객체
}
};
obj.msg();
// 생성자 함수를 호출할 때의 this : 새로 생성되는 객체
function Test(arg) {
this.name = arg;
this.getName = function() {
return this.name;
};
}
var obj2 = new Test('자바');
console.log( obj2.getName() );
// 함수를 호출할 때의 this
var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다.
// console.log(userName); // 스프링
console.log(window.userName); // 스프링
// sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩
var sayUser = function() {
console.log( this.userName, userName, window.userName );
}
sayUser();
</script>
</head>
<body>
<h3>객체- this</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
/*
- 생성자 함수에 추가하는 프로퍼티나 메소드 : 프로토타입에 추가하므로 생성자를 통해 생성된 모든 다른 객체에 적용
- 프로토타입
객체는 부모 객체의 프로퍼티나 메소드를 상속 받아 사용할 수 있으며,
이러한 부모 객체를 프로토 타입 객체 또는 프로토타입이라 함
*/
function User(name) {
this.name = name;
this.age = 20; // 기본값을 가질 수 있음
this.state = function() {
return this.age >= 19 ? '성인':'미성년자';
};
}
console.dir(User);
var obj = new User('홍길동');
console.log(obj.name, obj.state() );
</script>
</head>
<body>
<h3>생성자 함수에 추가하는 프로퍼티나 메소드</h3>
</body>
</html>
