300x250

+ action ( url ) 은

script로 입력 or <form> 태그 attribute 'action'에 입력

 

<!-- If tag is '<input>'-->
<form name="regForm" id="regForm" method="post">
	<input type="text" name="name" placeholder="이름">
	<input type="button" onclick="invalid()"> value="저장">
</form>

<!-- If tag is '<button>'-->
<form name="regForm" id="regForm" method="post">
	<input type="text" name="name" placeholder="이름">
	<button type="button" onclick="invalid()">저장</button>
</form>

 

반응형
300x250

1. 객체 기본

 


- 객체는 데이터와 함수의 *집합

- 보통 데이터함수는 객체 안에 있을 때, 프로퍼티와 메소드 라고 부름

- 프로퍼티(속성) : 데이터 아이템

- 단순히 "Key(이름) : Value(값)" 의 쌍

- Value(값) : 원시 데이터 타입 ( Number, Boolean, Null, Undefined, String) , Object, Function, Array

- 객체 정의 후 프로퍼티 및 함수 추가 가능.

- 특수한 객체 : Array, Function

 

2.  커스텀 객체 생성  - 객체 리터럴


*리터럴이란?

- 소스 코드의 고정된 값을 대표하는 용어, 변수 초기화에 종종 사용된다.

- ECMAScript와 같은 객체 지향 언어들 중에는 리터럴로 객체를 표현

- 필요한 요소들을 열거해 객체를 생성한다. 

https://ko.wikipedia.org/wiki/%EB%A6%AC%ED%84%B0%EB%9F%B4

 

* 열거형이란?

- 멤버라 불리는 명명된 값의 집합을 이루는 "자료형"

https://ko.wikipedia.org/wiki/%EC%97%B4%EA%B1%B0%ED%98%95

 

* 객체 리터럴 이란?

- 자바스크립트에서 객체를 생성하는 권장되는 방식

- 객체 초기화자

- 객체를 중괄호로 감싼다. {}

- 각 프로퍼티와 메소드는 쉼표(,)로 구분

- 프로퍼티와 값은 콜론(:)으로 구분

 

* 리터럴 표기법 

- 변수를 선언과 값 지정를 동시에 하는 방법

 

A. 리터럴 표기법으로 "커스텀 객체 " 생성

var familly= {}; // 빈 객체

 

- 유저 커스텀 객체인 familly는 자신(this)의 프로퍼티와 메소드를 갖고 있지 않다.

- 자신의 프로퍼티와 메소드를 가지지 않을 뿐, Object.prototype을 상속받기에 내장 객체의 프로퍼티, 메소드를 가진다.

 

 

B. 리터럴 표기법으로 " 자신의 프로퍼티와 메소드를 가진 커스텀 객체 " 생성

var family =
{ 
	'address' = 'Newyork',	  // Property : String 
    list = {},  // Property : Object
    addFamily : function (name, age, role){ // Method 
    	this.list[role]={ // Object list에 Object role = { } 선언
        	age : age,  //  Object role의 Property age
            name : name//	Object role의 Property name
        };
    }, 
    countFamily : function (){ // Method
    	console.log(Object.keys(this.list).length);  // 객체의 key값들을 배열로 리턴
    }
};



family.addFamily('happy','3','cutie');
family.countFamily();


family.height="200"; //프로퍼티 동적 추가

delete family.height; //프로퍼티 삭제

- 커스텀 데이터(프로퍼티) 와 함수(메소드) 아이템을 가진 객체 

 

- 아래 링크 인용

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

 

 

 

3.  커스텀 객체 생성  -생성자 함수


 

function Family(name, age, role ){
	this.name = name;
    this.age = age;
    this.role = role;
}

var family = new Family('leo', 30, 'b');

 객체 정의, 선언 후

new 연사자를 이용해 객체를 생성.

반응형

+ Recent posts