//방법1.

function Car(name,color){

this.name = name;

this.color = color;

this.show = function(){console.log(name, color)}

}


var car1 = new Car('morning','blue');

car1.show();



//방법2. 프로토타입 이용


function BigCar(name, color){

this.name = name;

this.color = color;

}


BigCar.prototype.show = function(){

console.log('bigcar' ,this.name , this.color)

}

//자식 객체 1

var bigcar1 = new BigCar('churare','white');

bigcar1.show();

//자식 객체 2

var bigcar2 = new BigCar('dump','black');

bigcar2.show();



//방법3. 객체리터럴(싱글톤)

var smallcar = {

name: "tico",

color: "blue",

show: function(){

console.log('smallcar',this.name,this.color);

}

}

//할당

smallcar.name = "morning2";

smallcar.color = "gold";

smallcar.show();



//*******************************************************js getter setter 1************************************************

var person = {

    firstName: 'Jimmy',

    lastName: 'Smith',

    get fullName() {

        return this.firstName + ' ' + this.lastName;

    },

    set fullName (name) {

        var words = name.toString().split(' ');

        this.firstName = words[0] || '';

        this.lastName = words[1] || '';

    }

}


person.fullName = 'Jack Franklin';

console.log(person.firstName); // Jack

console.log(person.lastName) // Franklin



//*******************************************************js getter setter 2****************************************************

var person2 = {

    firstName: 'kang',

    lastName: 'youngkyuen'

};


Object.defineProperty(person2, 'fullName', {

    get: function() {

        return this.firstName + ' ' + this.lastName;

    },

    set: function(name) {

        var words = name.split(' ');

        this.firstName = words[0] || '';

        this.lastName = words[1] || '';

    }

});

console.log(person2.fullName) 



//********************************************************************************************




//------------------------------------------

function Student(name, age) {

    this.name = name;

     

    this.getName = function() {

        return this.name;

    }

    this.setName = function(name) {

        this.name = name;

    }

}

var preamtree = new Student(name);



//------------------------------------------

function Student(name, age) {

    this.name = name;

}

Student.prototype.getName = function() {

    return this.name;

}

 

Student.prototype.setName = function(name) {

    this.name = name;

}

var preamtree = new Student(name);


//---------------------------------------------------------------------------

//prototype에 프로퍼티를 추가하는 함수

Function.prototype.method = function(name, func) {

    if(!this.prototype[name]) {

        this.prototype[name] = func;

    }

}

 

function Person(name, age) {

    this.name = name;

}

 

// prototype에 프로퍼티를 추가할 때마다 '.prototype'을 반복할 필요가 없음.

Person.method('getName',  function() {

    return this.name;

});

 

Person.method('setName', function(name) {

    this.name = name;

});



//********************************* 상속 *********************************


//부모 클래스

function Car(name,color){

this.name = name;

this.color = color;

this.show = function(){

return this.name + ' ' + this.color;

}


}



function create(o) {

    function F() {}; //빈 자식 클래스

    F.prototype = o;

    return new F(); // o를 부모로하는 객체 리턴

}


var myPcar = new Car('pCar','BLACK');

var sunCar = create(myPcar);

var text = sunCar.show();

console.log(text);



  1. 2018.10.17 16:14

    비밀댓글입니다

객체의 이해


자바스크립트 객체는 프로퍼티가 키/값 쌍으로 되어 있는 만큼 해시 맵에 빗대어 생각하면 이해하기 쉽다. 객체 프로퍼티에 접근할 때는 점 표기법 또는 각괄호 표기법 중 무엇을 해도 상관없다. 프로퍼티에 값을 할당하면 언제든 객체에 새 프로퍼티를 추가 할 수 있으며 delete 연산자를 사용하면 언제든 프로퍼티를 제거할 수 있다. 프로퍼티의 존재 여부는 프로퍼티 이름과 객체를 in 연산자와 함께 사용하면 알 수 있다. 이때 고유 프로퍼티만 확인하고 싶다면 모든 객체에 대 포함되어 있는 hasOwnProperty()를 사용하면 된다. 모든 객체 프로퍼티는 기본적으로 열거 가능하다. 열거 가능하다는 말은 for-in 반복문이나 Object.keys()를 사용할 때 볼 수 있다는 뜻이다.


프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나누어진다. 데이터 프로퍼티는 값을 담아두기 위한 공간이므로 이 프로퍼티에서 값을 읽거나 저장할 수 있다. 데이터 프로퍼티에 함수를 담아두면 이 프로퍼티는 객체의 메소드로 취급된다. 데이터 프로퍼티와 달리 접근자 프로퍼티 자체에는 데이터를 저장할 수 없다. 접근자 프로퍼티는 게터와 세터를 조합하여 특정 동작을 수행한다. 데이터 프로퍼티와 접근자 프로퍼티 모두 객체 리터럴 표기법을 사용해 만들 수 있다.

 

모든 프로퍼티에는 관련된 내부 속성이 몇 가지 있으며 이러한 속성이 프로퍼티가 어떻게 동작하는지 결정한다. 데이터 프로퍼티와 접근자 프로퍼티에는 둘다 Enumerable Configurable 이라는 속성이 있다. 데이터 프로퍼티에는 WritableValue라는 속성이 추가로 있는 반면, 접근자 프로퍼티에는 GetSet 속성이 더 있다. 모든 프로퍼티의 EnumerableConfigurable 속성은 true가 기본 값이며 데이터 프로퍼티의 Writable 속성 역시 true가 기본 값이다. Object.defineProperty() 또는 Object.defindeProperties()를 사용하면 속성을 변경할 수 있으며 Object.getOwnPropertyDescriptor()를 사용하면 설정된 속성 값을 가져올 수 있다.

 

객체의 프로퍼티를 수정할 수 없게 만드는 방법은 세 가지가 있다. Object.preventExtensions()를 사용하면 객체에 프로퍼티를 추가할 수 없다. object.seal() 메소드를 사용하면 봉인된 객체를 만들 수 있는데 봉인된 객체는 확장 불가능해지며 객체의 프로퍼티는 설정 불가능해진다. Object.freeze()를 사용해 객체를 동결하면 객체가 봉인되는 것은 물론 데이터 프로퍼티에 값을 저장할 수도 없게 된다. 확장 불가능한 객체를 다룰 때는 잘못된 방식으로 객체에 접근했을 때 에러가 발생할 수 있도록 엄격한 모드를 사용하는 것이 좋다.

 

 

 자바스크립트의 객체는 동적이기 때문에 언제라도 바꿀 수 있다. 클래스 기반 언어는 클래스 정의에 따라 객체를 수정할 수 없도록 만들지만 자바스크립트 객체에는 이런 제약이 없다.

 

프로퍼티 정의

 

객체를 만드는 방법

1. Object 생성자를 사용하는 방법

2. 객체 리터럴 사용하는 방법

 

 

var parson 1 = { name :"kim"}

 

var person2 = new Object();

person2.name = "kim";

 

person1.age = 23

person2.age = 23

 

person1.name = "hong";

person2.name = "sim";

 

작성한 객체는 일부러 막아두지 않는 이상 언제든지 수정할 수 있다.

자바스크립트는 프로퍼티를 처음 객체에 추가할 때 객체에 있는 put 이라는 내부 메소드를 호출 한다. put 메소드는 객체에 프로퍼티 저장 공간을 생성한다. 이 동작은 수행하면 초기값은 물론 프로퍼티의 속성도 설정한다. 따라서 위의 예제에서 nameage 프로퍼티가 처음 정의 될 때마다 put 메소드가 호출된다.

 

put을 호출하면 객체에 고유프로퍼티가 만들어진다. 고유프로퍼티는 객체의 특정 인스턴스에 속해 있으며 인스턴스에 바로 저장된다.

 

기존 프로퍼티에 값을 할당 할때는 set이 호출 된다. set은 프로퍼티의 현재 값을 새 값으로 교체 한다.

 

프로퍼티 확인하기

 

잘못된 방법

 

if(person1.age){

 

}


 ****

이 방식의 문제점은 자바스크립트 타입 강제변환이 결과에 영향을 끼친다는 것이다. if 조건문은 주어진 값이 참스러운 값 (객체, 비어있지 않은 문자열, 0이 아닌 숫자, true) 이면 true로 취급하고 거짓스러운 값(null,undefined, false, NaN, 빈문자열) 이면 false로 취급한다. 객체 프로 퍼티에 거짓스러운 값이 저장될 수 있기 때문에 예제 코드와 같은 방식은 잘못 실행될 수 있다.

 

in 연산자 사용

in연산자는 특정 객체에 주어진 이름의 프로퍼티가 존재하는지 확인하고 존재하면 true를 반환한다. 사실 in연산자는 해시테이블에 주어진 키가 있는지 확인한다.

 

)

console.log("name" in person1) //true

consloe.log("age" in person1) //true

consloe.log("hobby" in person1) //false

 

 

자바스크립트에서 메소드는 함수를 참조하고 있는 프로퍼티이므로 메소드의 존재여부도 같은 방식으로 확인할 수 있다.

 

var person1 = {

name: "kim",

sayName: function(){

console.log(this.name)

}

 

}

 

console.log("sayName" in person1); // true

 


때로는 프로퍼티의 존재 여부를 확인하는 것에 그치지 않고 해당프로퍼티가 객체의 고유 프로퍼티인지도 확인해야 한다. in 연산자는 고유프로퍼티와 프로토타입 프로퍼티 둘다 찾기 때문에 고유 프로퍼티인지 확인하고 싶다면 다른 방법을 동원해야 한다. 모든 객체에 포함되어 있는 hasOwnProperty() 메소드는 주어진 프로퍼티가 객체에 존재하는 동시에 고유 프로퍼티일 때만 true를 반환한다.

 

var person1 = {

name: "kim",

sayName: function(){

console.log(this.name)

}

 

}

 

console.log("name" in person1); // true

console.log("person1.hasOwnProperty("name")); // true

 

console.log("toString" in person1); // true

console.log("person1.hasOwnProperty("toString")); // false

 

nameperson1의 고유 프로퍼티이므로 in 연산자와 hasOwnProperty()는 둘다 true를 반환한다. 하지만 toString() 메소드는 모든 객체에 포함되어 있는 프로토타입 프로퍼티이므로 in 연산자는 true를 반환하지만 hasOwnProperty()false를 반환한다.

 

프로퍼티 제거

프로퍼티 값을 null로 바꾸는 것만으로 프로퍼티가 객체에서 환전히 제거 되지 않는다. 값을 null로 바꾸는 동작은 set 내부 메소드를 null과 함께 실행하므로 앞에서 보았듯 프로퍼티의 값만 달라지게 된다.

객체에서 프로퍼티를 완전히 제거할 때는 delete 연산자를 사용해야 한다.

 

객체프로퍼티에서 delete 연산자를 사용하면 내부적으로 delete가 호출된다. 무사히 실행을 마쳤을 때 true를 반환한다.

 

 

var person1 = {

name: "kim",

sayName: function(){

console.log(this.name)

}

 

}

 

console.log("name" in person1) //true

 

delete person1.name;

console.log("name" in person1); //false

console.log(person1.name) //undefined

 

존재하지 않는 프로퍼티에 접근하면 undefinde가 반환된다

 

 

열거

객체에 추가하는 프로퍼티는 기본적으로 열거가 가능하다.

for- in 문을 사용해서 훑을 수 있다. 열거 가능 프로퍼티에는 Enumerable 이라는 내부속성이 true로 설정되어 있다.

 

var property;

for(property in object){

console.log("이름" + property);

console.log("" + object[property]);

}

 

 

객체 프로퍼티의 목록을 가져와야 한다면 ECMAScript 5에서 도입된 Object.keys()메소드가 유용하다.

 

var properties = Object.keys(object);

var I, len;

 

for(i=0, len=properties.length; i<len; i++){

console.log("name" + properties[i]);

console.log("value" + object[properties[i]]);

 

}

 

일반적으로 프로퍼티 이름 목록을 배열 형태로 다루고 싶을때는 Object.keys()를 사용하고 굳이 배열이 필요 없을 때는 for-in을 사용한다. for-in 반복문에서는 열거 가능한 프로토타입 프로퍼티도 반환하지만, object.keys()는 고유 프로퍼티만 반환한다.

 

모든 프로퍼티를 열거할 수 있는 것은 아니다. 객체의 네이티브 메소드는 대부분 Enumerable 속성이 false로 되어 있다. 특정 프로퍼티가 열거 가능한지 확인할 때는 propertyIsEnumerable() 메소드를 사용하면 된다. 이 메소드는 모든 객체에 포함되어 있다.

 

var person1 = {

name: "kim"

 

}

 

console.log("name" in person1) //true

console.log(person1.propertyIsEnumerable("name")); //true

 

var properties = Object.keys(person1);

 

console.log("length" in properties); // true

console.log(properties.propertyIsEnumerable("length")) //false

 

nameperson1에 직접 추가한 프로퍼티이므로 열거 가능하다. 반면 properties 배열의 length 프로퍼티는 Array.prototype의 내장 프로퍼티이므로 열거 가능하지 않다. 네이티브 프로퍼티는 대부분 기본적으로 열거 가능하지 않다.

 

프로퍼티 종류

1.데이터 프로퍼티 : 값을 포함하고 있다. put 메소드의 기본 동작을 통해 생성 된다.

2.접근자 프로퍼티: 값을 포함하지 않는 대신 프로퍼티를 읽었을 때 호출할 함수 게터(getter)와 값을 설정할 때 호추할 함수 세터(setter)를 정의 한다.


)

var person1 = {

name: "kim",

 

get name(){

console.log("name 읽는 중“);

return this.name;

},

 

set name(value){

 

console.log("name의 값을 %s로 설정하는 중", value);

this.name = value;

}

 

};

console.log(person1.name); //name 읽는 중 kim 출력

 

person1.name = "hong";

console.log(person1.name) //name의 값을 hong으로 설정하는 중 출력후 hong

 

이 예제는 name이라는 접근자 프로퍼티를 정의하고 있다. 접근자 프로퍼티에서 사용할 실제 값은 _name이라는 데이터 프로퍼티에 저장한다. name의 게터와 세터를 정의할 때는 function 키워드가 없다는 점만 제외하면 함수를 정의하는 문법과 비슷하다. get 또는 set이라는 특수한 키워드를 접근자 프로퍼티 이름앞에 사용하고 이름 뒤에는 괄호와 함수 코드를 입력한다. 게터는 값을 반환해야 하고 세터는 프로퍼티에 할당할 값을 인수로 전달 받을 수 있어야 한다.

 

프로퍼티 속성


공통속성

데이터 프로퍼티와 접근자 프로퍼티의 공통속성은 두가지다.

하나는 Enumerable 인데 프로퍼티가 열거 가능한지 정하는 속성이고 다른 하나는 Configurable로서 프로퍼티를 변경할 수 있는지 정하는 속성이다. Configurable 속성이 있는 설정가능 프로퍼티는 delete 연산자를 사용해 언제든 제거할 수 있고 속성도 언제든 변경할 수 있다. 다시 말해 설정 가능 프로퍼티는 데이터 프로퍼티를 접근자 프로퍼티로 바꾸거나 그 반대로 바꾸는 것도 가능하다. 객체의 모든 프로퍼티는 따로 설정을 하지 않는 한 열거 가능하며 설정 가능하다.

 

객체의 속성을 바꾸고 싶을 때는 object.defineProperty()메소드를 사용할 수 있다. Object.defineProperty() 메소드에는 인수를 세 개 전달하는 데 첫 번재 인수는 프로퍼티를 소유하고 있는 객체 이고 두 번째 인수는 프로퍼티 이름, 세 번째 인수는 설정할 프로퍼티 속성 값을 포함하고 있는 프로퍼티 서술자 객체이다.

 

var person1 = {name:"kim"}

//열거 불가능

Object.defineProperty(person1,"name",{

enumerable:false});

 

console.log("name" in person1); //true

console.log(person1.propertyIsEnumerable("name")); //false

 

var properties = Object.keys(person1);

console.log(properties.length) // 0

 

//설정불가능

Object.defineProperty(person1,"name",{

configurable:false

});

 

//

delete person1.name;

console.log("name" in person1); //true

console.log(person1.name); //kim

 

//에러

Object.defineProperty(person1,"name",{

configurable:true

});

 

 

데이터 프로퍼티 속성

1. value:

2. writable: 프로퍼티에 값을 저장할 수 있는지 정의하는 불리언 값

 

var person1 ={name : "kim"}


두개는 같다


var person1 = {};

Object.defineProperty(person1,"name",{

value: "kim",

enumerable:true,

configurable:true,

writable:true

 

});

 

Object.defineProperty()를 실행하면 먼저 해당 프로퍼티가 있는지 확인한다. 프로퍼티가 없다면 새 프로퍼티를 추가하고 프로퍼티 서술 객체에 정의한 대로 속성을 설정한다. 이 예제에서 nameperson1의 프로퍼티가 아니었기 때문에 새로 작성된다.

Object.defineProperty()를 사용해 새 프로퍼티를 정의할 때 서술자에 없는 속성은 모두 false로 설정된다. 따라서 필요한 속성은 반드시 서술자에 포함시켜 두어야 한다.


다음 예제는 Object.defineProperty()를 호출할 때 명시적으로 true라고 설정한 속성이 없었기 때문에 열거 불가능, 설정불가능, 쓰기 불가능한 name 프로퍼티를 만든다.

 

 

var person1 = {};

 

Object.defineProperty(person1,"name",{

value: "kim"

});

 

console.log("name" in person1); //true

console.log(person1.propertyIsEnumerable("name")); //false

 

delete person1.name;

console.log("name" in person1); //true

 

person1.name = "hong";

console.log(person1.name); //kim

 

접근자 프로퍼티 속성


접근자 프로퍼티는 저장할 값이 필요 없으므로 valuewritable 속성은 필요 없다

대신 setget 속성이 필요하다.

 

접근자 프로퍼티를 정의할 때 객체 리터럴 형식 대신 접근자 프로퍼티 속성을 사용하면 기존에 있던 객체에도 프로퍼티를 추가할 수 있다는 장점이 있다.

 

var person 1 ={_name:"kim",

 

get name(){

console.log("name 읽는 중")

return this._name;

},

set name(value){

console.log("name의 값을 %s로 설정하는중",value);

this._name=value;

}

 

}

 

이 코드는 다음과 같이 작성할 수 있다.

 

var person1= {_name:"kim"};

 

Object.defineProperty(person1,"name",{

get:function(){

console.log("name 읽는 중")

return this._name;

},

set:function(value){

console.log("name의 값을 %s로 설정하는중",value);

this._name=value;

 

},

enumerable:true,

configurable:true

});

 

Object.defineProperty()에 전달된 객체에 있는 get키와 set키는 값이 함수인 데이터 프로퍼티이다. 이 객체에서는 객체 리터럴 형태의 접근자를 사용할 수 없다.

접근자 프로퍼티에도 enumerable 이나 configurable 과 같은 속성을 설정하여 프로퍼티의 작동 방식을 조정할 수 있다. 설정안하면 false 가 설정된다.

 

여러프로퍼티 정의하기

Object.defineProperty() 대신 Object.defineProperties()를 사용하면 동시에 여러 프로퍼티를 설정할 수 있다. 이 메소드에는 인수를 두 개 전달한다. 첫 번째 인수는 대상 객체이고, 두 번째 인수는 정의할 프로퍼티의 정보를 담고 있는 객체이다.

 

var person1 = {};


Object.defineProperties(person1,{

 

//데이터를 정의할 데이터 프로퍼티

_name : {

value: "kim",

enumerable:true,

configurable:true,

writable:true

},

//접근자 프로퍼티

 

name :{

get:function(){

console.log("name 읽는 중");

return this._name;

},

set:function(value){

console.log("name의 값을 %s로 설정하는중",value);

this._name=value;

},

 

enumerable:true,

configurable:true

 

}

 

})

 

프로퍼티 속성 가져오기

Object.getOwnPropertyDescriptor() 메소드 사용

고유프로퍼티만 사용가능

첫 번째 인수: 대상객체

두 번째 인수: 정보를 가져올 프로퍼티의 이름

인수로 이름을 전달한 프로퍼티가 존재하면 프로퍼티의 속성 정보를 포함한 객체가 반환되며, 이 객체에는 configurable, enumerable을 비롯한 네 종류의 키가 설정되어 있다.

 

var person1 = {

name:"kim"

};

 

var descriptor = Object.getOwnPropertyDescriptor(person1,"name");

 

console.log(descriptor.enumerable); //true

console.log(descriptor.configurable); //true

console.log(descriptor.writable); //true

console.log(descriptor.vlaue); //kim

 

 도서: 객체지향 자바스크립트의 원리 정리

 

함수

자바스크립트에서 함수는 객체이다. 다른 객체에는 없는 함수만의 특성을 꼽으라면 call이라는 내부 속성을 들 수 있다. 내부속성은 코드로 접근할 수 없지만 코드의 동작을 정의한다.

 

선언과 표현식

함수에는 두가지 리터럴 형태가 있다.


1.함수 선언

 

function add(num,num2){

 

return num1 + num2

}

 


2.함수 표현식

 

var add = function add(num,num2){

 

return num1 + num2

}


 *참고

위의 두 함수는 비슷하지만 한가지 중요한 차이점이 있다.함수선언은 코드가 실행될 때 컨텍스트 상단에 끌여올려진다다시 말해 함수를 호출하는 코드가 함수를 선언한 코드보다 앞에 있어도 에러가 발생하지 않는다는 뜻이다.

 

var result = add(5,5);

 

function add(num,num2){

 

return num1 + num2

}

 

함수 표현식은 변수를 통해서만 함수를 참조하기 때문에 호이스팅 되지 않는다.


var result = add(5,5);

 

var add = function add(num,num2){

 

return num1 + num2

}

 

값으로서의 함수

, 함수를 변수에 할당할 수도 있고 객체에 추가할 수도 있으며 다른 함수에 인수로 전달하거나 함수에서 함수를 반환 할 수도 있다.

 

function say(){

console.log("hi");

}

 

say() ; // hi

 

var say2 = say;

 

say2(); // hi 출력

say라는 함수를 만드는 함수 선언이 있다. 그 후에 만들어진 say2 라는 변수에 say의 값을 할당했다. saysay2는 이제 같은 함수를 가리킨다.

 

함수를 다른 함수에 인수로 전달할 수 도 있다.

 

var score = [4, 11, 2, 10, 3, 1];

 

/* 오류 */

score.sort(); // 1, 10, 11, 2, 3, 4

// ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음

 

/* 정상 동작 */

score.sort(function(a, b) { // 오름차순

return a - b;

// 1, 2, 3, 4, 10, 11

});

 

인수

자바스크립트 함수의 다른 특성 중 하나는 인수를 몇 개 전달하든 에러가 발생하지 않는다는 것이다. 이는 함수의 인수가 실제로는 배열과 비슷한 arguments라는 구조체에 저장되기 때문이다. 평범한 자바스크립트 배열과 마찬가지로 arguments에 담을 수 있는 값은 개수 제한이 없다. 저장된 인수는 숫자 인덱스로 접근할 수 있으며 length 속성을 사용하면 저장된 인수의 개수를 알 수 있다.

함수 안에서 arguments 객체가 자동으로 만들어 진다. 

참고: arguments 객체는 Array의 인스턴스가 아니기 때문에 배열 메소드를 사용할 수 없다. Array.isArray(arguments)는 항상 false를 반환 한다.

 

<script>

//매개변수와 관련된 두가지 수가 있다.

// 하나는 함수.length

// 하나는 arguments.length

 

function zero(){

console.log(

'zero.length', zero.length,

'arguments', arguments.length

);

}

function one(arg1){

console.log(

'one.length', one.length,

'arguments', arguments.length

);

}

function two(arg1, arg2){

console.log(

'two.length', two.length,

'arguments', arguments.length

);

}

 

zero(); // zero.length 0 arguments 0

one('val1', 'val2'); // one.length 1 arguments 2

two('val1'); // two.length 2 arguments 1

</script>

 

 

오버로딩

대부분의 객체지향 언어는 한 함수에 여러 시그니쳐를 두는 함수 오버로딩을 지원한다. 함수 시그니처는 함수의 이름과 예상 인수 개수, 인수의 타입으로 이루어진다.

따라서 같은 함수라 해도 문자열 인수 한 개를 받는 시그니처와 숫자 인수 두 개를 받는 시그니처를 가질 수 있다.

하지만 자바스크립트 함수는 인수의 개수에 제한이 없으며 인수의 타입은 아예 정하지 않는다. 때문에 함수 오버로딩도 없다.

 

function say(msg){

console.log(msg);

}

 

function say(){

console.log("defalt msg");

}

 

say("hi") // defalt msg 출력

 

자바스크립트에서는 같은 이름을 가진 함수를 여러개 정의 하려고 할 때 마지막에 정의된 함수가 이긴다. 함수도 객체이기 때문에 두 번째에 있는 함수가 say에 재할당 되기 때문이다.

 

함수 오버로딩을 흉내낼 수 있는 방법

arguments 객체를 이용해서 함수에 전달된 인수의 개수를 구하고 이를 이용해 수행할 동작을 정의 하면 된다.

 

function say(msg){

if(arguments.length ===0 ){

msg = "defalt msg";

}

console.log(msg);

}

say("hi"); //hi 출력

 

say() 함수는 전달된 인수의 개수에 따라 다르게 동작한다. 전달된 인수가 없다면 (arguments.length ===0) 이 실행된다. 전달된 인수가 있을 때는 첫 번째 인수가 메시지로 사용된다. 타입까지 확인하고 싶다면 typeof 연산자와 intanceof 연산자를 이용한다.

  

객체 메소드

 

var person = {

name : "kim",

sayName: function(){

console.log(person.name);

}

 

}

 

person.sayName(); // kim 출력

 

this 객체

say() 메소드는 person.name을 직접 참조하고 있어서 객체와 메소드 간에 강한 결합이 만들어졌는데, 이는 문제의 소지가 많은 방법이다. 첫째, 변수 이름을 바꿀 때는 반드시 메소드 안에 있는 참조 코드도 바꿔줘야 한다. 둘째, 이런 식으로 강한 결합이 이루어지면 같은 함수를 여러 객체에 사용하기 어렵다.

 

문제 해결 방법은?

 자바스크립트의 모든 스코프에는 함수를 호출하는 객체를 뜻하는 this 객체가 있다. 전역 스코프에서 this는 전역 객체(웹브라우저에서는 window)를 참조한다. 객체에 붙어있는 함수를 호출하면 this의 값은 해당 객체가 된다. 따라서 메소드 안에서라면 객체를 직접 참조하는 대신 this를 참조할 수 있다.

 

var person = {

name : "kim",

sayName: function(){

console.log(this.name);

}

 

}

person.sayName(); // kim 출력

 

이제는 변수의 이름을 쉽게 바꿀 수 있으며 say() 함수를 다른 객체에 재사용하기도 쉬워졌다.

 

function sayAll(){

console.log(this.name);

}

 

// 두 객체 리터럴을 만들었고,

//sayNamesayAll 함수를 할당했다.

//함수는 참조값이므로 객체가 몇 개든 상관없이 객체의 속성으로

//함수를 할당할 수 있다.

 

var person1 = {

name : "kim",

sayName: sayAll

 

}

 

 

var person2 = {

name : "park",

sayName : sayAll

 

}

 

var name = "sim";

 

person1.sayName(); // kim

person2.sayName(); //park

 

sayAll(); //sim

 

 

this 값 변경

일반적으로 this 값은 자동으로 할당되지만 목적에 따라 바꿀수도 있다. 자바스크립트에서 this의 값을 바꿀 때 사용할 수 있는 함수 메소드는 세 종류가 있다. 함수도 객체이므로 메소드가 있다.

 

1.call 메소드

2.apply 메소드

3.bind 메소드

 

*call()

메소드는 this의 값을 바꾸는 것은 물론 인수도 전달하며 함수를 실행할 수 있다. call() 메소드의 첫 번째 인수는 함수를 실행할 때 this로서 사용될 값이다. 두 번째 인수부터는 함수를 실행할 때 그대로 전달된다. 다음 코드는 인수를 한 개 전달 받도록 한 것이다.

 

function say(label){

 

console.log(label+ ":"+ this.name);

}

 

var person1 = {

name: "kim"

}

 

 

 

var person2 = {

name: "park"

}

 

var name = "hong";

 

say.call(this,"global"); //global: hong 출력

say.call(person1,"person1"); //person1: kim 출력

say.call(person2,"person2"); //gperson2: park 출력

 

*apply() 메소드

apply() 메소드는 call()과 완전히 똑같이 동작하지만 인수를 두 개만 사용한다는 점이 다르다. apply() 메소드의 첫 번째 인수는 this로 사용할 값이고, 두 번째 인수는 함수에 전달할 인수를 담고 있는 배열 또는 배열과 유사한 객체이다. 즉 두 번째 인수로 arguments를 전달할 수도 있다.

 

function say(label){

 

console.log(label+ ":"+ this.name);

}

 

var person1 = {

name: "kim"

}

 

var person2 = {

name: "park"

}

 

var name = "hong";

 

say.applyl(this,["global"]); //global: hong 출력

say.apply(person1,["person1"]); //person1: kim 출력

say.apply(person2,["person2"]); //gperson2: park 출력

 

데이터가 이미 배열 형태로 존재한다면 apply()를 사용하는 편이 좋고 데이터가 개별 변수로 존재한다면 call()을 사용하는 편이 좋다.

 

요약

자바스크립트의 함수는 매우 특이하다. 함수도 객체이기 때문에 접근하고 복사하고 다시 정의할 수도 있고 다른 객체 값을 다루듯 사용할 수 있다. 자바스크립트에서 함수와 다른 객체의 가장 큰 차이점은 특수한 내부 속성 call 의 존재다. call에는 함수의 실행 동작이 정의되어 있다. typeof 연산자는 객체에 call 내부 프로퍼티가 있는지 찾아보고 있으면 function을 반환한다.

함수 리터럴 형식은 선언과 표현식이라는 두 종류가 있다. 함수 선언은 function 키워드 다음에 함수의 이름이 오며, 함수가 선언된 컨텍스트의 가장 위에서 정의된 것처럼 다루어진다. 함수 표현식은 평범한 값처럼 사용할 수 있어 할당 표현식, 함수 인수, 다른 함수의 반환 값등에 사용된다.

함수는 객체이기 때문에 function이라는 생성자가 존재한다. 자바스크립트에는 클래스라는 개념이 없기 때문에 함수 및 다른 객체만을 사용해 집합과 상속을 구현해야 한다.

 

 도서 객체지향 자바스크립트의 원리 정리



<!DOCTYPE html>


<html>


<head>


    <title>연락처</title>


</head>


<body onload="list()">


    <h3 align="center">연락처 목록</h3>

   


<table id="tbl" border="1" align="center">


   <tr id="trid">


      <th>번호</th>


      <th>이름</th>


       <th>나이</th>


      <th>연락처</th>


      <th>주소</th>


      <th>직업</th>


      <th>취미</th>


   </tr>





</table>


   


   <hr>


   <div align="center">


   <input type="button"  onclick="insertFunction()" id="insert" name="insert" value="추가하기" />


   <input type="button"  onclick="saveFunction()" id="save" name="save" value="저장하기"/>


   <input type="button" id="del" name="del"  value="삭제하기"/>


   <input type="button" id="serch" name="serch"  value="찾아보기"/>


   </div>


   


   


 <script>


// user 객체가 들어갈 배열

var users= [];


//user 정보가 들어갈 빈객체

var user = {};


var keys = ['번호','이름','나이','연락처','주소','직업','취미'];



function list(){


// tr 리스트 생성 부분 (배열의 개수만큼 테이블 행 생성)

for(var i = 0; i<users.length;i++){

      

      //테이블 요소를 선택한다

      var tbl = document.getElementById('tbl');


         // 새로운 행을 생성한다

         var trel =   document.createElement('tr');


         // 테이블 요소에 새로운 행을 붙인다

         tbl.appendChild(trel);

      

               //테이블 칸과 text값 생성

               for (key in users[i]){

                     //첫줄은 이름,나이와 같은 항목이기때문에 + 1 해줌 

                     var tr = document.getElementsByTagName('tr')[i+1];

                     

                     //칸을 만든다.

                     var td = document.createElement('td');

                     

                     var x = document.createElement("INPUT");

                     x.setAttribute("type", "text");

                     

                     //칸에 넣을 내용물을 가져온다.

                     var tdText   = document.createTextNode(users[i][key]);

                     

                     x.value=users[i][key];

                     //내용물을 칸에 붙인다.

                     td.appendChild(x);

                     

                     //칸을 행에 붙인다.

                     tr.appendChild(td);

               }


            }

         }


//저장하기

function saveFunction(){


//배열에 있는 객체 값 확인

alert(JSON.stringify(users));

   //테이블 요소 구하기

   var tbl = document.getElementById('tbl');   


   //테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기

   var trlangth=tbl.getElementsByTagName('tr').length;                     


      alert("값있는 행은 총몇줄?="+(trlangth-1));

      alert("users 객체 개수는?="+users.length);

      

    

      for(var i = 0; i<trlangth-1;i++){

//값이 있는 첫번째 행의 tr 요소를 가져 온다. 

         var selecttrs = tbl.getElementsByTagName('tr')[i+1];

 

//위의 요소에 속한 td 값들을 가져온다.

         var selecttds = selecttrs.getElementsByTagName('td');

            

//칸이 총 7칸

            for(var a = 0 ; a<7;a++){

         

               //alert(selecttds[a].firstChild.value);

               

               var key = keys[a];           //값 '번호', '이름' ...등 칼럼 이름

  

               alert("users["+i+"]:vlaue="+selecttds[a].firstChild.value)

               

// users 객체 0 번방 '번호' = 1 이런식으로 테이블 전체의 값을 읽어 저장

               users[i][key]=selecttds[a].firstChild.value;   

            

            }

      }

//배열에 있는 객체 값 확인

            alert(JSON.stringify(users));

         

}

      



// 추가

function insertFunction(){

user = {}; //초기화  *************************** 중요!

      var tbl = document.getElementById('tbl');

      var trel =   document.createElement('tr');


         for(var i = 0; i<7;i++){

//<input> 생성

            var x = document.createElement("INPUT");

            x.setAttribute("type", "text");

//<td> 생성

var tdel = document.createElement('td');

            tdel.appendChild(x);

            trel.appendChild(tdel);

         }

 

//테이블에 <tr> 붙임

         tbl.appendChild(trel);


//alert(users.length);

//users 배열에 빈 user 객체 추가

   users.push(user);  

   //users.push({});

}




</script>



   </body>


</html>





어제 짜놓은 코드를 보니 큰 문제가 있었다. 

1. 아무것도 없는 테이블에서 '추가하기'를 누르면 빈 행과 칸이 1줄 생깁니다.

- function insertFunction() 가 실행됩니다.(dom)으로 구현 했습니다.

2. 빈칸에 값을 입력하고 저장하기를 누르면 saveFunction() 실행됩니다.

-첫번째 행의 값이 user 객체에 삽입되고 그 각체는 users 배열에 삽입됩니다.


문제는 user 객체를 초기화 하는것이었다!

user객체를 초기화 해서 넣지 않으니깐

전에 user객체에 들어 있던 값이 push 가 되는거였다.....!!!!!!!!


어쨌든 해결 ㅠ!!



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
 
<html>
 
<head>
 
    <title>연락처</title>
 
</head>
 
<body onload="list()">
 
    <h3 align="center">연락처 목록</h3>
   
 
<table id="tbl" border="1" align="center">
 
   <tr id="trid">
 
      <th>번호</th>
 
      <th>이름</th>
 
       <th>나이</th>
 
      <th>연락처</th>
 
      <th>주소</th>
 
      <th>직업</th>
 
      <th>취미</th>
 
   </tr>
 
 
 
 
</table>
 
   
 
   <hr>
 
   <div align="center">
 
   <input type="button"  onclick="insertFunction()" id="insert" name="insert" value="추가하기" />
 
   <input type="button"  onclick="saveFunction()" id="save" name="save" value="저장하기"/>
 
   <input type="button" id="del" name="del"  value="삭제하기"/>
 
   <input type="button" id="serch" name="serch"  value="찾아보기"/>
 
   </div>
 
   
 
   
 
 <script>
 
// user 객체가 들어갈 배열
var users= [];
 
//user 정보가 들어갈 빈객체
var user = {};
 
var keys = ['번호','이름','나이','연락처','주소','직업','취미'];
 
 
function list(){
 
// tr 리스트 생성 부분 (배열의 개수만큼 테이블 행 생성)
for(var i = 0; i<users.length;i++){
      
      //테이블 요소를 선택한다
      var tbl = document.getElementById('tbl');
 
         // 새로운 행을 생성한다
         var trel =   document.createElement('tr');
 
         // 테이블 요소에 새로운 행을 붙인다
         tbl.appendChild(trel);
      
               //테이블 칸과 text값 생성
               for (key in users[i]){
                     //첫줄은 이름,나이와 같은 항목이기때문에 + 1 해줌 
                     var tr = document.getElementsByTagName('tr')[i+1];
                     
                     //칸을 만든다.
                     var td = document.createElement('td');
                     
                     var x = document.createElement("INPUT");
                     x.setAttribute("type""text");
                     
                     //칸에 넣을 내용물을 가져온다.
                     var tdText   = document.createTextNode(users[i][key]);
                     
                     x.value=users[i][key];
                     //내용물을 칸에 붙인다.
                     td.appendChild(x);
                     
                     //칸을 행에 붙인다.
                     tr.appendChild(td);
               }
 
            }
         }
 
//저장하기
function saveFunction(){
 
    //배열에 있는 객체 값 확인
    alert(JSON.stringify(users));
   //테이블 요소 구하기
   var tbl = document.getElementById('tbl');   
 
   //테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기
   var trlangth=tbl.getElementsByTagName('tr').length;                     
 
      alert("값있는 행은 총몇줄?="+(trlangth-1));
      alert("users 객체 개수는?="+users.length);
      
    
      for(var i = 0; i<trlangth-1;i++){
        //값이 있는 첫번째 행의 tr 요소를 가져 온다. 
         var selecttrs = tbl.getElementsByTagName('tr')[i+1];
         
         //위의 요소에 속한 td 값들을 가져온다.
         var selecttds = selecttrs.getElementsByTagName('td');
            
            
            //칸이 총 7칸
            for(var a = 0 ; a<7;a++){
         
               //alert(selecttds[a].firstChild.value);
               
               var key = keys[a];           //값 '번호', '이름' ...등 칼럼 이름
               
               alert("users["+i+"]:vlaue="+selecttds[a].firstChild.value)
               
                // users 객체 0 번방 '번호' = 1 이런식으로 테이블 전체의 값을 읽어 저장
               users[i][key]=selecttds[a].firstChild.value;   
            
            }
            
      }
            
            //배열에 있는 객체 값 확인
            alert(JSON.stringify(users));
         
}
      
 
 
// 추가
function insertFunction(){
        user = {}; //초기화  *************************** 중요!
      var tbl = document.getElementById('tbl');
      var trel =   document.createElement('tr');
 
         for(var i = 0; i<7;i++){
            //<input> 생성
            var x = document.createElement("INPUT");
            x.setAttribute("type""text");
            
            //<td> 생성
            var tdel = document.createElement('td');
            tdel.appendChild(x);
            trel.appendChild(tdel);
         }
         
         //테이블에 <tr> 붙임
         tbl.appendChild(trel);
 
         //alert(users.length);
    //users 배열에 빈 user 객체 추가        
   users.push(user);  
   //users.push({});
}
 
 
 
</script>
 
 
   </body>
 
</html>
 
 
cs






그동안 자바 스크립트 사용을 오래 안했네.. 

감이 가물가물...

몽땅 잃어버리기전에 간단한 프로그램하나 만들어봐야겠다.

아주간단한 배열, 함수, 객체 반복문, 조건문 같은 개념 이용해서 연락처 리스트 만들어보기!



프로그램 예)


연락처 리스트
이름 나이 연락처 주소 직업 취미
홍길동 28 010-1234-5678 서울시 관악구 신림로 18 학생 볼링
김귀남 29 010-5468-5466 서울 종로구 인사동길 100 학생 축구
김동글 30 010-6879-7866 서울 관악구 신림로 14 학생 복싱
추가하기 저장하기 찾기 삭제

1

추가하기 누르면 위에 표에 칸이 생긴다.
2 추가된 빈간이 생긴곳에 마우스 클릭을 하면 텍스트가 활성화되면서 글을 적을 수 있다.
3 저장하기를 누르면 리스트에 뿌려진다.
4 텍스트 입력중인 상태에서 찾기나 삭제를 누르면 alert로 입력한 내용이 지워진다는 경고를 표시한다.
추가하기를 눌러야만 저장하기 버튼을 누를 수 있다.
5 찾기 버튼을 누르면 promt 창을 열어서 찾을 이름을 검색하게 한다.
6 확인을 누르면 검색결과가 리스트에 뿌려진다.
7 모두보기 버튼을 누르면 모든 리스트가 다 뿌려 진다.
8 삭제버튼을 누르면 창이하나 뜬다. 삭제할 이름을 적고 엔터치면 관련 데이터 삭제
or 행을 클릭하고 삭제버튼 누르면 삭제되게




함수와 메서드

함수는 특정 작업을 수행하기 위해 필요한 일련의 구문으로 구성된다. 메서드는 함수와 동일하지만 객체 내에 만들어진다는 점이 다르다.

 

객체

실제 세계를 모델화하기 위해 객체를 사용한다.

객체는 속성과 메서드로 구성된다.

 

내장객체

브라우저는 인터랙티브한 웹 페이지를 개발하기 위한 도구의 역할을 수행하는 다양한 종류의 객체들을 제공한다.

 

함수란 무엇인가?

함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재사용할 수 있다.

 

기본적인 함수

var msg = '안녕하세요';

 

//함수 생성

function updateMessage() {

var el = document.getElementById('message');

el.textContent = msg;

}

//함수 호출

updateMessage();

 


함수선언하기

함수를 생성하기 위해서는 이름을 지정한 후 중괄호 안에 필요한 작업을 수행할 구문들을 작성해야 한다.

이러한 과정을 함수 선언 이라고 한다.

 

function sayHello(){ document.write(‘안녕하세요’);

}

 

function : 함수는 function 키워드를 이용하여 선언한다.

sayHello : 함수에 이름을 부여하고 괄호를 덧붙인다.

{ } : 실제 작업을 실행할 구문은 코드 블록안에 작성한다.

 

 

함수 호출

sayHello();

 

추가 정보가 필요한 함수의 선언

간혹 함수는 자신의 작업을 수행하기 위해 추가적인 정보가 필요할 수도 있다.

이런 경우에는 함수를 선언할 때 매개변수를 전달하면 된다.

매개변수는 함수 내에서는 변수와 동일하게 작동한다.

 

//매개변수는 함수내에서 변수처럼 사용된다.

function getArea(width, heigth){

 

return width height ;

}

 

추가 정부가 필요한 함수의 호출

매개변수를 가진 함수를 호출할 때는 함수 이름 다음의 괄호 안에 값을 명시하면 된다.

이 값들은 인수라고 하며 이를 통해 값이나 변수를 전달할 수 있다.

 

값을 인수로 전달하기

getArea(3,5);

변수를 인수로 전달하기

wallWidth = 3;

wallHeight = 5;

getArea(wallWidth,wallHeight);

 

함수로부터 단일 값 전달받기

일부함수는 자신을 호출한 코드에게 정보를 돌려주기도 한다.

예를 들어, 함수가 어떤 계산을 수행한다면 그 결과를 리턴한다.

 

function calualteArea(width,height){

 

var area = width * height;

return area;

}

 

var wallOne = calculateArea(3,5);

var wallTwo = calculateArea(8,5);

자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한다. 그런후 함수를 호출한 코드로 되돌아간다.

 

함수로부터 여러값 전달 받기

함수는 배열을 이용해 한 번에 여러개의 값을 리턴할 수 있다.

 

function getSize(width, height, depth){

 

var area = width*height;

var volume = width * height * depth;

var sizes = [area, volume];

return sizes;

}

var areaOne = getSize(3,2,4)[0];

var volumOne = getSize(3,2,3)[1];

 

익명함수와 함수 표현식

표현식은 값을 생산한다. 이들은 값을 사용하고자 하는 곳에 사용할 수 있다.

나중에 호출하기 위한 함수를 선언하려면 반드시 이름을 부여해야하기 때문에 이런 함수들을 명명된 함수라고 부른다.

 

function calualteArea(width,height){

 

var area = width * height;

return area;

}

 

var wallOne = calculateArea(3,5);

 

함수표현식

자바스크립트 해석기가 표현식을 필요로 하는 곳에 함수를 전달하면 이 함수는 표현식으로 처리되며, 이런 함수를 함수 표현식이라고 한다. 함수 표현식을 사용할 때는 대부분 함수 이름을 생략하며, 이처럼 이름이 없는 함수를 익명 함수라고 한다.

 

var calualteArea=function (width,height){

 

return width * height;

};

 

var wallOne = calualteArea(3,5);

 

변수의 범위

변수를 사용할 수 있는 코드는 변수가 선언된 위치에 따라 달라진다.

만일 변수를 함수 내에 선언했으면 그 변수는 함수 내에서만 사용이 가능하다.

이렇게 변수가 사용 가능한 영역을 변수의 범위라고 한다.

 

지역 변수

변수를 var 키워드를 이용하여 함수 내부에 선언하면 이 변수는 해당 함수 내부에서만 사용할 수 있다. 이런 변수를 지역 변수 라고 한다.

함수가 두 번 실행되면 지역 변수들은 매번 다른 값을 갖게 된다.

두 개의 서로 다른 함수는 어떤 종류의 이름 충돌 없이 동일한 이름의 변수를 사용할 수 있다.

 

전역 변수

만일 함수의 바깥 부분에서 변수를 선언하면 이 변수는 스크립트의 어느 곳에서도 사용이 가능하다. 이러한 변수를 전역 변수라고 한다.

function calualteArea(width,height){

//지역변수

var area = width * height;

return area;

}

// 전역변수

var wallOne = calculateArea(3,5);

 

메모리와 변수의 동작 원리

전역 변수는 더 많은 메모리를 사용한다.

브라우저는 페이지를 로드하고 있는 동안에는 전역변수를 계속 메모리에 보관한다.

지역 변수는 함수가 실행 중인 동안에만 메모리에 존재한다.

 

 

객체란 무엇인가?

객체란 현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화한 것을 말한다.

객체와 함수는 객체 내에서 새로운 이름으로 불린다.

 

객체 내에서 변수는 속성이라고 부른다.

속성은 자동차의 이름이나 속도 등 객체에 대한 정보를 제공한다. 각각의 자동차들은 이름도 서로 다르고 속도도 다르다.

 

객체 내에서 함수는 메서드라고 부른다.

예를 들어 차와 관련된 정보를 연산해서 구할 수 있다.

 

var car = {

name: ‘sonata’,

heightSpeed: 200,

lowSpeed: 100,

sunroof : true,

type: [소형, 중형, 대형],

 

check : function(){

return this.heightSpeed- this.lowSpeed;

}

 

};

 

위에서 보듯 car 변수는 객체를 담고 있으며 , 이 객체는 키/값 쌍을 가지고 있다.


객체 생성하기: 축약식 표기법

축약식 표기법은 객체를 생성하는 가장 쉬우면서도 대중적인 방법이다.


var car = {

name: ‘sonata’,

heightSpeed: 200,

lowSpeed: 100,

sunroof : true,

type: [소형, 중형, 대형],

 

check : function(){

return this.heightSpeed- this.lowSpeed;

}

 

};

 


객체에 접근하는 방법과 마침표 표기법

마침표 표기법을 이용하면 객체의 속성이나 메서드에 접근이 가능하다.

또한 대괄호를 이용해도 속성에 접근할 수 있다.

var carNmae=car.name;

var sunRoof =car.check();

var varName = var[‘name’];

 

일반적인 표기법을 이용하여 객체생성하기

var hotel = {

name : 'Quay',

rooms : 40,

booked : 25,

checkAvailability : function() {

return this.rooms - this.booked;

}

};

// UHTML 수정

var elName = document.getElementById('hotelName'); // 요소 구하기

elName.textContent = hotel.name; // 속성값 변경

var elRooms = document.getElementById('rooms'); // 요소 구하기

elRooms.textContent = hotel.checkAvailability(); // 속성값 변경

 

 

객체생성하기: 생성자 표기법

new 와 객체 생성자는 빈 객체를 생성한다.

그런 후에 객체에 속성과 메서드를 추가할 수 있다.

// 객체 생성

var hotel = new Object();

 

//속성

hotel.name = 'Park';

hotel.rooms = 120;

hotel.booked = 77;

 

//메서드

hotel.checkAvailability = function() {

return this.rooms - this.booked;

};


var elName = document.getElementById('hotelName'); // 요소 생성

elName.textContent = hotel.name;


var elRooms = document.getElementById('rooms'); // 요소 생성

elRooms.textContent = hotel.checkAvailability();

 

객체 생성자 표기법을 이용하여 객체 여러개 생성하기

생성자 함수를 사용하면 객체의 인스턴스를 생성할 수 있다. 그러려면 new 키워드 다음에 새로운 객체를 생성하는 함수를 호출하면 된다.

각 객체의 속성 값은 함수의 인수로 전달된다.

function Hotel(name, rooms, booked) {

this.name = name;

this.rooms = rooms;

this.booked = booked;

 

this.checkAvailability = function() {

return this.rooms - this.booked;

};

}// 객체 두 개 만들기

var quayHotel = new Hotel('Quay', 40, 25);

var parkHotel = new Hotel('Park', 120, 77);

 

// HTML 페이지 수정

var details1 = quayHotel.name + ' rooms: ';

details1 += quayHotel.checkAvailability();

var elHotel1 = document.getElementById('hotel1');

elHotel1.textContent = details1;

 

//두번째 객체

var details2 = parkHotel.name + ' rooms: ';

details2 += parkHotel.checkAvailability();

var elHotel2 = document.getElementById('hotel2');

elHotel2.textContent = details2;

 

복습: 객체를 생성하는 여러방법들

객체를 생성한 후 속성과 메서드를 추가하는 방법

축약형 표기법

var hotel = {}

 

hotel.name= ‘abc’

hotel.rooms = 40;

hotel.booked = 10;

 

hotel.check = function(){

return this.rooms this.booked;

};

 

객체 생성자 표기법

var hotel = new Object();


hotel.name= ‘abc’

hotel.rooms = 40;

hotel.booked = 10;

 

hotel.check = function(){

return this.rooms this.booked;

}

 

속성과 메서드를 사전에 정의하여 객체 생성하기

축약형 표기법

var hotel = {

name : 'Quay',

rooms : 40,

booked : 25,

checkAvailability : function() {

return this.rooms - this.booked;

}

};

 

객체 생성자 표기법

function Hotel(name, rooms, booked) {

this.name = name;

this.rooms = rooms;

this.booked = booked;

 

this.checkAvailability = function() {

return this.rooms - this.booked;

};

}// 객체 두 개 만들기

var quayHotel = new Hotel('Quay', 40, 25);

var parkHotel = new Hotel('Park', 120, 77);

 

객체응용

<!DOCTYPE html>

 

<html lang="ko">

 

    <head>

 

        <meta charset="utf-8">

 

                <title>문자</title>


        <script>


//자바스크립트 객체 선언

 

        //변수명:값


        var myCar = {make:"BMW",model:"X5", year:2013};

 

        

 

        var txt="";    

 


 

    document.write(myCar["make"]+"<br>");

 

    document.write(myCar["model"]+"<br>");

 

    document.write(myCar["year"]+"<br>");


    document.write(myCar.make+"<br>");

 

    document.write(myCar.model+"<br>");

 

    document.write(myCar.year+"<br>");


    for(var x in myCar){

 


        txt += myCar[x]+" ";

    }

    document.write(txt);


        </script>


    </head>


    <body>


    </body>


</html>    




배열도 객체다

배열은 실제로 특별한 형식의 객체다. 배열은 객체와 마찬가지로 사로 관련있는 키/값 쌍의 집합을 저장하지만 각 값의 키로는 인덱스 번호가 사용된다.

 

객체로 표현하는 경우

객체의 속성을 이용하여 방과 방의 가격을 표현한다.

 

costs={room1: 420, room2: 460};

 

배열로 표현하는 경우

이 경우 각 값들은 속성 이름 대신 인덱스 번호를 갖게 된다.

costs = [420, 460];

 

객체의 배열과 배열내의 객체

복잡한 데이터 구조를 표현하기 위해서는 배열과 객체를 혼합하여 사용할 수도 있다.

배열은 일련의 객체를 저장할 수 있다.

물론, 객체 역시 배열을 저장할 수도 있다.

 

객체 내의 배열

속성 : room1 : items [420,40,10]

costs.room1.items[0];

 

배열 내의 객체

배열 내의 각 요소는 객체를 그 값으로 저장할 수 있다.

번호 : 2 {accom: 420, food:40, phone:10}

costs[2].phone;

 


내장각체



자바스크립트 문서 객체






자바스크립트 브라우저 객체 








<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8"/>

 

<script>


//1

var cat = { "leg":4,

"name":"gg",

"color":"red"}



alert(cat.leg); //4

alert(cat["leg"]); //4

alert(Object.keys(cat));


//2

var enty = {};


enty["leg"]=4;

enty["name"]="kang";

enty["color"]="white";

alert(Object.keys(enty));

//3

var enty1 = {};


enty1.leg=4;

enty1.name="kang";

enty1.color="white";

alert(Object.keys(enty1));

</script>

 

 

</head>

<body>


 

</body>

</html>



=====================================


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8"/>

 

<script>


var animal = [


{"leg":4,"name":"aa","color":"red"},

{"leg":5,"name":"bb","color":"blue"},

{"leg":6,"name":"cc","color":"white"}

]

alert(animal[0]);   // [object Object]

alert(animal[0].leg); // 4


//2


var a = {name:"aa",age:11,num:[2,3,4,5,]};

var b = {name:"bb",age:22,num:[6,7,8,9,]}

var c = {name:"cc",age:33,num:[10,11,12,13,]}

var friend = [a,b,c];


alert(friend[0]); //[object Object]

alert(friend[0].name); //aa

alert(friend[0].num[1]); //3


//3

var 민지 = { 이름: "민지", 나이: 11, 행운의숫자: [2, 4, 8, 16] };

var 지훈 = { 이름: "지훈", 나이: 5, 행운의숫자: [3, 9, 40] };

var 서연 = { 이름: "서연", 나이: 9, 행운의숫자: [1, 2, 3] };


var 친구 = [민지, 지훈, 서연];


친구[1];

// { 이름: "지훈", 나이: 5, 행운의숫자: Array[3] }


친구[2].이름

// "서연"


친구[0].행운의숫자[1];

// 4


</script>

 

 

</head>

<body>


 

</body>

</html>

=====================================

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8"/>

 

<script>

var 빌려준돈 = {};

빌려준돈["지훈"] = 5000;

빌려준돈["민지"] = 7000;

빌려준돈["지훈"];

// 5000

빌려준돈["진영"];

// undefined


빌려준돈["지훈"] += 3000;

빌려준돈["지훈"];

// 8000


빌려준돈;

// { 지훈: 8000, 민지: 7000 }




</script>

 

 

</head>

<body>


 

</body>

</html>


=====================================


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8"/>

 

<script>


var 영화 = {

  "니모를 찾아서": {

    개봉연도: 2003,

    상영시간: 100,

    출연진: ["앨버트 브룩스", "엘런 드제너러스", "알렉산더 굴드"],

    형식: "DVD"

  },

  "스타 워즈 에피소드 6 - 제다이의 귀환": {

    개봉연도: 1983,

    상영시간: 134,

    출연진: ["마크 해밀", "해리슨 포드", "캐리 피셔"],

    형식: "DVD"

  },

  "해리 포터와 불의 잔": {

    개봉연도: 2005,

    상영시간: 157,

    출연진: ["다니엘 레드클리프", "엠마 왓슨", "루퍼트 그린트"],

    형식: "블루레이"

  }

};


var 니모를찾아서 = 영화["니모를 찾아서"];

니모를찾아서.상영시간;

// 100


니모를찾아서.형식;

// "DVD"


var 카 = {

  개봉연도: 2006,

  상영시간: 117,

  출연진: ["오웬 윌슨", "보니 헌트", "폴 뉴먼"],

  형식: "블루레이"

};

영화["카"] = 카;


Object.keys(영화);

// ["니모를 찾아서", "스타 워즈 에피소드 6 - 제다이의 귀환", "해리 포터와 불의 잔", "카"]



</script>

 

 

</head>

<body>


 

</body>

</html>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
    <meta charset="utf-8"/>
 
 
 
<script>
 
 
 
//1
 
var cat = {    "leg":4,
 
            "name":"gg",
 
            "color":"red"}
 
 
 
 
 
            alert(cat.leg); //4
 
            
 
            
 
            alert(cat["leg"]); //4
 
            
 
            
 
            alert(Object.keys(cat));
 
            
 
 
 
//2
 
var enty = {};
 
 
 
enty["leg"]=4;
 
enty["name"]="kang";
 
enty["color"]="white";                
 
alert(Object.keys(enty));        
 
            
 
            
 
//3
 
var enty1 = {};
 
 
 
enty1.leg=4;
 
enty1.name="kang";
 
enty1.color="white";                
 
alert(Object.keys(enty1));        
 
                
 
            
 
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
 
 
</body>
 
</html>
 
 
 
 
 
=====================================
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
    <meta charset="utf-8"/>
 
 
 
<script>
 
 
 
var animal = [
 
 
 
{"leg":4,"name":"aa","color":"red"},
 
{"leg":5,"name":"bb","color":"blue"},
 
{"leg":6,"name":"cc","color":"white"}
 
]
 
            
 
    alert(animal[0]);       //     [object Object]
 
    alert(animal[0].leg); //    4        
 
        
 
 
 
        
 
//2
 
 
 
var a = {name:"aa",age:11,num:[2,3,4,5,]};
 
var b = {name:"bb",age:22,num:[6,7,8,9,]}
 
var c = {name:"cc",age:33,num:[10,11,12,13,]}
 
            
 
var friend = [a,b,c];
 
 
 
alert(friend[0]); //[object Object]
 
alert(friend[0].name); //aa
 
alert(friend[0].num[1]);    //3    
 
 
 
//3
 
var 민지 = { 이름: "민지", 나이: 11, 행운의숫자: [24816] };
 
var 지훈 = { 이름: "지훈", 나이: 5, 행운의숫자: [3940] };
 
var 서연 = { 이름: "서연", 나이: 9, 행운의숫자: [123] };
 
 
 
var 친구 = [민지, 지훈, 서연];
 
 
 
친구[1];
 
// { 이름: "지훈", 나이: 5, 행운의숫자: Array[3] }
 
 
 
친구[2].이름
 
// "서연"
 
 
 
친구[0].행운의숫자[1];
 
// 4
 
 
 
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
 
 
</body>
 
</html>
 
=====================================
 
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
    <meta charset="utf-8"/>
 
 
 
<script>
 
var 빌려준돈 = {};
 
빌려준돈["지훈"= 5000;
 
빌려준돈["민지"= 7000;
 
빌려준돈["지훈"];
 
// 5000
 
빌려준돈["진영"];
 
// undefined
 
 
 
빌려준돈["지훈"+= 3000;
 
빌려준돈["지훈"];
 
// 8000
 
 
 
빌려준돈;
 
// { 지훈: 8000, 민지: 7000 }
 
 
 
 
 
 
 
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
 
 
</body>
 
</html>
 
 
 
=====================================
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
    <meta charset="utf-8"/>
 
 
 
<script>
 
 
 
var 영화 = {
 
  "니모를 찾아서": {
 
    개봉연도: 2003,
 
    상영시간: 100,
 
    출연진: ["앨버트 브룩스""엘런 드제너러스""알렉산더 굴드"],
 
    형식: "DVD"
 
  },
 
  "스타 워즈 에피소드 6 - 제다이의 귀환": {
 
    개봉연도: 1983,
 
    상영시간: 134,
 
    출연진: ["마크 해밀""해리슨 포드""캐리 피셔"],
 
    형식: "DVD"
 
  },
 
  "해리 포터와 불의 잔": {
 
    개봉연도: 2005,
 
    상영시간: 157,
 
    출연진: ["다니엘 레드클리프""엠마 왓슨""루퍼트 그린트"],
 
    형식: "블루레이"
 
  }
 
};
 
 
 
var 니모를찾아서 = 영화["니모를 찾아서"];
 
니모를찾아서.상영시간;
 
// 100
 
 
 
니모를찾아서.형식;
 
// "DVD"
 
 
 
var 카 = {
 
  개봉연도: 2006,
 
  상영시간: 117,
 
  출연진: ["오웬 윌슨""보니 헌트""폴 뉴먼"],
 
  형식: "블루레이"
 
};
 
영화["카"= 카;
 
 
 
Object.keys(영화);
 
// ["니모를 찾아서", "스타 워즈 에피소드 6 - 제다이의 귀환", "해리 포터와 불의 잔", "카"]
 
 
 
 
 
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
 
 
</body>
 
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cs



1.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>자바스크립트 객체</title>

<script>


function Car(model,speed,color){

//맴버변수(속성, property)

this.model = model;

this.speed = speed;

this.color = color;

//함수(method)

this.brake = function(){

this.speed -= 10;

}

this.accel = function(){

this.speed += 10;

}

}

//객체 생성

//자바에서 생성자와 비슷. 초기화 시켜주기

myCar = new Car("520d",60,"red");

document.write("모델"+myCar.model+"속도:"+myCar.speed+"<br>");

myCar.accel();//함수 호출

document.write("모델"+myCar.model+"속도:"+myCar.speed+"<br>")

myCar.brake();

document.write("모델:"+myCar.model+"속도:"+myCar.speed+"<br>");

</script>

</head>

<body>


</body>

</html>




2.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>프로토타입:원형,모델, 객체의 복사본</title>

<script>


//객체 선언

function Point(xpos,ypos){

this.x = xpos;

this.y = ypos;

}

//프로토타입 선언

Point.prototype.getDistance = function(p){

return Math.sqrt(this.x * this.x + this.y*this.y);

}

var p1=new Point(10,20);

var d1=p1.getDistance();

var p2=new Point(10,30);

var d2=p2.getDistance();

document.write(d1+ "<br>");

document.write(d2+ "<br>");

</script>

</head>

<body>


</body>

</html>




3.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>내장객체(date)</title>

<script>


var d1= new Date();

//alert(d1);

document.write(d1.getYear()+1900+"<br>");

document.write(d1.getMonth()+1+"<br>");

document.write(d1.getDate()+"<br>");

document.write(d1.getHours()+"<br>");

document.write(d1.getMinutes()+"<br>");

document.write(d1.getSeconds()+"<br>");

document.write("=======================");

document.write(d1.toDateString()+"<br>");

document.write(d1.toISOString()+"<br>");

document.write(d1.toJSON()+"<br>");

document.write(d1.toLocaleDateString()+"<br>");

document.write(d1.toLocaleTimeString()+"<br>");

document.write(d1.toString()+"<br>");

document.write(d1.toTimeString()+"<br>");

document.write(d1.toUTCString()+"<br>");

</script>

</head>

<body>


</body>

</html>



4.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>날짜구하기</title>

<script>


function checkDate(){

//사용자가 입력한 날짜값

var s=document.getElementById("pdate").value;

var pdate=new Date(s); //특정한 날짜 / 시각

var today= new Date(); //시스템의 현재 날짜/시각

//getTime() 타임스탬프(time stamp, 밀리세컨드)

// 1970.1.1 ~ 현재까지의 밀리세컨드

document.write(today.getTime()+"<br>")


var diff= today.getTime()- pdate.getTime();

document.write(diff+"<br>")

// floor() 버림함수(소수 이하를 버림)

var days=Math.floor(diff/(1000*60*60*24));

if(days>30){

alert("교환기간이 지났습니다.");

}

}


</script>

</head>

<body>


구입날짜 : <input type="date" id="pdate">

<button onclick = "checkDate()">검사</button>

</body>

</html>


5.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>날짜계산(내년신정까지)</title>

</head>

<body>

<div id = "remaining1"></div>

<div id = "remaining"></div>

<script>


function datesUntilNewYear(){

var now = new Date();

var newYear = new Date('January 1,'+(now.getFullYear()+1));

//내년

document.getElementById("remaining1").innerHTML= now.getFullYear()+1;

var diff=newYear - now;

var milliseconds = Math.floor(diff % 1000);

diff = diff/ 1000;

var seconds = Math.floor(diff % 60);

diff = diff / 60;

var minutes = Math.floor(diff % 60);

diff = diff / 60;

var hours = Math.floor(diff % 24);

diff = diff / 24;

var days = Math.floor(diff);

var outStr = "내년 신정까지" +days+ "일, " +

hours +"시간,"+ minutes+ "분, " +seconds+"초 남았습니다.";

document.getElementById("remaining").innerHTML = outStr;

setTimeout("datesUntilNewYear()",1000);

}

datesUntilNewYear();

</script>

</body>

</html>

6.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>날짜계산</title>

</head>

<body>


<div id="clock"></div>

<script>


function setClock(){

var now=new Date();

// getFullYear() 4자리 연도

var s = now.getFullYear()+"-"+(now.getMonth()+1)

+"-"+now.getDate()+" "+now.getHours()+":"+

now.getMinutes()+":"+now.getSeconds();

document.getElementById("clock").innerHTML = s;

}

//setInterval("반복할 함수", 실행 간격)

setInterval("setClock()",1000);

</script>

</body>

</html>


7.



<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>반올림함수</title>

<script>



var count1, count2;

count1=new Number(1.237);

count2 = 1.233;

// 실수.toFixed(소수이하자리수) 반올림함수

document.write(count1.toFixed(2)+"<br>");

document.write(count2.toFixed(2)+"<br>");

if(count1.toFixed(2)== count2.toFixed(2)){

alert("소수 둘 째 자리까지 같습니다")

}else{

alert("같지 않습니다.");

}

</script>

</head>

<body>


</body>

</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
1.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>자바스크립트 객체</title>
 
                
 
        <script>
 
 
 
        
 
        function Car(model,speed,color){
 
        //맴버변수(속성, property)
 
        
 
        this.model = model;
 
        this.speed = speed;
 
        this.color = color;
 
        
 
        //함수(method)
 
        
 
        this.brake = function(){
 
        
 
            this.speed -= 10;
 
            }
 
        
 
        this.accel = function(){
 
        
 
            this.speed += 10;
 
            
 
            }
 
        
 
        }
 
        
 
        
 
    
 
    
 
    //객체 생성
 
    //자바에서 생성자와 비슷. 초기화 시켜주기
 
    myCar = new Car("520d",60,"red");
 
    document.write("모델"+myCar.model+"속도:"+myCar.speed+"<br>");
 
    
 
        
 
    
 
    myCar.accel();//함수 호출
 
    document.write("모델"+myCar.model+"속도:"+myCar.speed+"<br>")
 
    
 
    
 
        
 
    myCar.brake();
 
    document.write("모델:"+myCar.model+"속도:"+myCar.speed+"<br>");
 
    
 
    
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
 
 
 
 
 
2.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>프로토타입:원형,모델, 객체의 복사본</title>
 
                
 
        <script>
 
 
 
        //객체 선언
 
        
 
        
 
        
 
        function Point(xpos,ypos){
 
        
 
        this.x = xpos;
 
        this.y = ypos;
 
        
 
        }
 
        
 
        
 
        //프로토타입 선언
 
        
 
        Point.prototype.getDistance = function(p){
 
        
 
            return Math.sqrt(this.x * this.x + this.y*this.y);
 
        
 
        }
 
        
 
        var p1=new Point(10,20);
 
        var d1=p1.getDistance();
 
        var p2=new Point(10,30);
 
        var d2=p2.getDistance();
 
        
 
        
 
        document.write(d1+ "<br>");
 
        
 
        document.write(d2+ "<br>");
 
        
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
 
 
 
 
 
3.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>내장객체(date)</title>
 
                
 
        <script>
 
 
 
        
 
        var d1= new Date();
 
        //alert(d1);
 
        
 
        
 
        document.write(d1.getYear()+1900+"<br>");
 
        
 
        document.write(d1.getMonth()+1+"<br>");
 
        
 
        
 
        document.write(d1.getDate()+"<br>");
 
        
 
        document.write(d1.getHours()+"<br>");
 
        
 
        document.write(d1.getMinutes()+"<br>");
 
        
 
        document.write(d1.getSeconds()+"<br>");
 
        
 
        document.write("=======================");
 
    
 
    
 
        document.write(d1.toDateString()+"<br>");
 
    
 
        document.write(d1.toISOString()+"<br>");
 
        
 
        document.write(d1.toJSON()+"<br>");
 
        
 
        
 
        document.write(d1.toLocaleDateString()+"<br>");
 
        
 
        document.write(d1.toLocaleTimeString()+"<br>");
 
        
 
        document.write(d1.toString()+"<br>");
 
    
 
        document.write(d1.toTimeString()+"<br>");
 
        
 
        document.write(d1.toUTCString()+"<br>");
 
        
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
 
 
 
4.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>날짜구하기</title>
 
                
 
        <script>
 
 
 
        
 
        function checkDate(){
 
        
 
        //사용자가 입력한 날짜값
 
        
 
        
 
        var s=document.getElementById("pdate").value;
 
        var pdate=new Date(s); //특정한 날짜 / 시각
 
        var today= new Date();    //시스템의 현재 날짜/시각
 
        
 
        //getTime() 타임스탬프(time stamp, 밀리세컨드)
 
        //    1970.1.1 ~ 현재까지의 밀리세컨드
 
        document.write(today.getTime()+"<br>")
 
 
 
        
 
        var diff= today.getTime()- pdate.getTime();
 
    
 
        document.write(diff+"<br>")
 
        
 
        
 
        // floor() 버림함수(소수 이하를 버림)
 
        
 
        var days=Math.floor(diff/(1000*60*60*24));
 
        
 
        if(days>30){
 
        
 
        alert("교환기간이 지났습니다.");
 
        
 
        }
 
        
 
        }
 
    
 
    
 
 
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    구입날짜 : <input type="date" id="pdate">
 
    <button onclick = "checkDate()">검사</button>
 
    
 
    </body>
 
    
 
</html>    
 
 
 
5.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>날짜계산(내년신정까지)</title>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
<div id = "remaining1"></div>
 
    <div id = "remaining"></div>
 
    
 
        <script>
 
 
 
        
 
        function datesUntilNewYear(){
 
        
 
        var now = new Date();
 
        var newYear = new Date('January 1,'+(now.getFullYear()+1));
 
    
 
        //내년
 
        document.getElementById("remaining1").innerHTML= now.getFullYear()+1;
 
            
 
            var diff=newYear - now;
 
            
 
            var    milliseconds = Math.floor(diff % 1000);
 
            diff = diff/ 1000;
 
            
 
            var seconds = Math.floor(diff % 60);
 
            diff = diff / 60;
 
        
 
            var minutes = Math.floor(diff % 60);
 
        
 
            diff = diff / 60;
 
        
 
            var hours = Math.floor(diff % 24);
 
            
 
            diff = diff / 24;
 
            
 
            var days = Math.floor(diff);
 
            
 
            var outStr = "내년 신정까지" +days+ "일, " +
 
            hours +"시간,"+ minutes+ "분, " +seconds+"초 남았습니다.";
 
        
 
            document.getElementById("remaining").innerHTML = outStr;
 
        
 
            setTimeout("datesUntilNewYear()",1000);
 
        }
 
    datesUntilNewYear();
 
    
 
        </script>
 
    
 
    </body>
 
    
 
</html>    
 
6.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>날짜계산</title>
 
        
 
        
 
        
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    <div id="clock"></div>
 
    
 
    <script>
 
 
 
        function setClock(){
 
    
 
        var now=new Date();
 
        // getFullYear() 4자리 연도
 
        
 
        var s = now.getFullYear()+"-"+(now.getMonth()+1)
 
        +"-"+now.getDate()+" "+now.getHours()+":"+
 
        now.getMinutes()+":"+now.getSeconds();
 
        
 
        document.getElementById("clock").innerHTML = s;
 
        
 
        }
 
        
 
        //setInterval("반복할 함수", 실행 간격)
 
        setInterval("setClock()",1000);
 
    
 
    </script>
 
    
 
    </body>
 
    
 
</html>    
 
 
 
7.
 
 
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>반올림함수</title>
 
                
 
        <script>
 
 
 
 
 
        var count1, count2;
 
        
 
        count1=new Number(1.237);
 
        count2 = 1.233;
 
        // 실수.toFixed(소수이하자리수) 반올림함수
 
        
 
        
 
        document.write(count1.toFixed(2)+"<br>");
 
        document.write(count2.toFixed(2)+"<br>");
 
        
 
        
 
        if(count1.toFixed(2)== count2.toFixed(2)){
 
        
 
            alert("소수 둘 째 자리까지 같습니다")
 
        
 
        }else{
 
        
 
            alert("같지 않습니다.");
 
        
 
        }
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
cs




1.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>



document.write("<h1>구구단표</h1>");

document.write("<table border='1' width='50%'>");

for(var i = 1; i<=9; i++){

document.write("<tr>");

document.write("<td>"+i+"</td>");

for(var j=2; j<=9; j++){

document.write("<td>"+j+"</td>");

}

document.write("</tr>");

}

document.write("</table>");

</script>

</head>

<body>


</body>

</html>


2.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


//자바스크립트 객체 선언

//변수명:값

var myCar = {make:"BMW",model:"X5", year:2013};

var txt="";

for(var x in myCar){

//for (개별변수 in 객체)

txt += myCar[x]+" "; // 객체[인덱스]

}

document.write(txt);

</script>

</head>

<body>


</body>

</html>

3.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


//자바스크립트 객체 선언

//변수명:값

var myCar = {make:"BMW",model:"X5", year:2013};

var txt="";


document.write(myCar["make"]+"<br>");

document.write(myCar["model"]+"<br>");

document.write(myCar["year"]+"<br>");


document.write(myCar.make+"<br>");

document.write(myCar.model+"<br>");

document.write(myCar.year+"<br>");


for(var x in myCar){

txt += myCar[x]+" ";

}

document.write(txt);

</script>

</head>

<body>


</body>

</html>


4.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


var fruits = new Array(); //배열선언

fruits[0] = "Apple";  //배열참조변수 [인덱스]

fruits[1] = "banana";

fruits[2] = "orange";

for(var f in fruits){

document.write(fruits[f]+"<br>");

}

var sports = ["scoccer","baseball","pingpog"]

for (var f in sports){

document.write(sports[f]+"<br>")

}

var fruits1 = new Array(); //배열선언

fruits1["a"] = "Apple";  //배열참조변수 [인덱스]

fruits1["b"] = "banana";

fruits1["c"] = "orange";

for(var f in fruits1){

document.write(fruits1[f]+"<br>");

}

document.write(fruits1["a"]+"<br>")

document.write(fruits1["b"]+"<br>")

document.write(fruits1["c"]+"<br>")

</script>

</head>

<body>


</body>

</html>

5.


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


try{

var array = new Array(999999999999999999);

}

catch(exception){

document.write("에러가 발생했습니다.");

}finally{

document.write("프로그램 종료<br>");

}

</script>

</head>

<body>


</body>

</html>

6..

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

</head>

<body>


<form name="myForm">

필드1 <input type = "text" name="a0"><br>

필드2 <input type = "text" name="a1"><br>

필드3 <input type = "text" name="a2"><br>

<input type="button" value="초기화" onclick="init()">

</form>

<script>


function init(){

for(var i=0; i<3; i++){

document.myForm["a"+i].value=i;

}

document.write(document.myForm[2].value+"<br>")

}

</script>

</body>

</html>



7.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


function greeing(name,position){

alert(name +"님 안녕하세요?")

}

</script>

</head>

<body>


<!-- 버튼클릭하면 자바스크립트 함수 greeting()이 실행됨

-->

<button onclick="greeing('홍길동','부장')">

클릭

</button>

</body>

</html>


8.

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>문자</title>

<script>


function greeing2(name,position){

//document.getElementById("태그의 id")

// 태그.value : 태그에 입력된 값

var name=

document.getElementById("name").value;

var position=

document.getElementById("position").value;

var str = name + " "+ position + "님 안녕하세요?";

alert(str);

}

</script>

</head>


<body>

<!--

id = 자바스크립트에서는 document.getElementById()로

name = jsp에서 request.getParameter()로 조회

-->

<form method="post" action="func_result.jsp">

이름: <input id="name" name="name"><br>

직급 : <input id="position" name="position"><br>

<button onclick = "greeing2()"> 확인 </button>

</form>

</body>

</html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
1.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
 
 
        document.write("<h1>구구단표</h1>");
 
        document.write("<table border='1' width='50%'>");
 
        
 
        for(var i = 1; i<=9; i++){
 
        
 
        
 
            document.write("<tr>");
 
            document.write("<td>"+i+"</td>");
 
        
 
        
 
            for(var j=2; j<=9; j++){
 
            
 
            
 
            document.write("<td>"+j+"</td>");
 
        
 
        }
 
        
 
        document.write("</tr>");
 
        
 
        
 
        }
 
        
 
        document.write("</table>");
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
 
2.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
        //자바스크립트 객체 선언
 
        //변수명:값
 
        
 
        var myCar = {make:"BMW",model:"X5", year:2013};
 
        
 
        var txt="";
 
        
 
        for(var x in myCar){
 
        
 
        //for (개별변수 in 객체)
 
        
 
        txt += myCar[x]+" "// 객체[인덱스]
 
        
 
        }
 
    document.write(txt);
 
    
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
3.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
//자바스크립트 객체 선언
 
        //변수명:값
 
        
 
        var myCar = {make:"BMW",model:"X5", year:2013};
 
        
 
        var txt="";    
 
 
 
    
 
    document.write(myCar["make"]+"<br>");
 
    document.write(myCar["model"]+"<br>");
 
    document.write(myCar["year"]+"<br>");
 
 
 
    document.write(myCar.make+"<br>");
 
    document.write(myCar.model+"<br>");
 
    document.write(myCar.year+"<br>");
 
 
 
    for(var x in myCar){
 
    
 
        txt += myCar[x]+" ";
 
    
 
    }
 
    document.write(txt);
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
 
 
4.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
        
 
        var fruits = new Array(); //배열선언
 
        fruits[0= "Apple";  //배열참조변수 [인덱스]
 
        fruits[1= "banana";
 
        fruits[2= "orange";
 
        
 
        for(var f in fruits){
 
        
 
        document.write(fruits[f]+"<br>");
 
        
 
        }
 
    
 
    
 
    
 
    var sports = ["scoccer","baseball","pingpog"]
 
        
 
        
 
        for (var f in sports){
 
        
 
        document.write(sports[f]+"<br>")
 
        
 
        }
 
        
 
        
 
        var fruits1 = new Array(); //배열선언
 
        fruits1["a"= "Apple";  //배열참조변수 [인덱스]
 
        fruits1["b"= "banana";
 
        fruits1["c"= "orange";
 
        
 
        for(var f in fruits1){
 
        
 
        document.write(fruits1[f]+"<br>");
 
        
 
        }
 
    
 
    document.write(fruits1["a"]+"<br>")
 
    
 
    document.write(fruits1["b"]+"<br>")
 
    
 
    document.write(fruits1["c"]+"<br>")
 
    
 
    
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
5.
 
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
        try{
 
        
 
        var array = new Array(999999999999999999);
 
        
 
        }
 
        catch(exception){
 
        
 
        document.write("에러가 발생했습니다.");
 
        
 
        }finally{
 
        
 
        document.write("프로그램 종료<br>");
 
        
 
        }
 
        
 
        
 
    
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    
 
    </body>
 
    
 
</html>    
 
6..
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    <form name="myForm">
 
    
 
    필드1 <input type = "text" name="a0"><br>
 
    필드2 <input type = "text" name="a1"><br>
 
    필드3 <input type = "text" name="a2"><br>
 
    
 
    
 
    <input type="button" value="초기화" onclick="init()">
 
    
 
    </form>
 
    
 
        <script>
 
 
 
    function init(){
 
    
 
        for(var i=0; i<3; i++){
 
        
 
    document.myForm["a"+i].value=i;
 
        
 
        }
 
    document.write(document.myForm[2].value+"<br>")
 
    }
 
        
 
    
 
        
 
        </script>
 
    
 
    
 
    
 
    </body>
 
    
 
</html>    
 
 
 
 
 
7.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
        function greeing(name,position){
 
        
 
        alert(name +"님 안녕하세요?")
 
        
 
        }
 
        
 
    
 
        </script>
 
                
 
                
 
    </head>
 
    
 
    <body>
 
 
 
    <!-- 버튼클릭하면 자바스크립트 함수 greeting()이 실행됨
 
    -->
 
    <button onclick="greeing('홍길동','부장')">
 
    클릭
 
    
 
    </button>
 
    
 
    </body>
 
    
 
</html>    
 
 
 
8.
 
<!DOCTYPE html>
 
<html lang="ko">
 
    <head>
 
        <meta charset="utf-8">
 
                <title>문자</title>
 
                
 
        <script>
 
 
 
        function greeing2(name,position){
 
        
 
        
 
        //document.getElementById("태그의 id")
 
        // 태그.value : 태그에 입력된 값
 
        
 
    var name=
 
    document.getElementById("name").value;
 
    
 
    var position=
 
    document.getElementById("position").value;
 
    
 
    var str = name + " "+ position + "님 안녕하세요?";
 
        
 
        alert(str);
 
        
 
        }
 
        
 
        </script>
 
                
 
                
 
    </head>
 
    
 
 
 
    <body>
 
<!--
 
id = 자바스크립트에서는 document.getElementById()로
 
name = jsp에서 request.getParameter()로 조회
 
    -->
 
    
 
    <form method="post" action="func_result.jsp">
 
    
 
    이름: <input id="name" name="name"><br>
 
    직급 : <input id="position" name="position"><br>
 
    <button onclick = "greeing2()"> 확인 </button>    
 
    </form>
 
    
 
    </body>
 
    
 
</html>    
cs


+ Recent posts