Be a groovy man by positive thinking

UI/UX_015 본문

IT/_HTML_CSS_JS

UI/UX_015

KhanSelf 2017. 7. 24. 16:02

간단정리



1.객체

- 데이터와 그 데이터에 관련된 동작을 모두 포함

- 객체를 이루는 구성 요소에는 프로퍼티와 메서드


1)  배열을 이용한 생성

 var 객체명 = {

  name: value,

  키: 값

  (인덱스:요소)

 };


2) 속성 : property

 - 객체 내부의 값(배열의 요소)


3) 객체의 속성에 접근

 객체명["키"];

 객체명.키 ;

 var foo = {  // foo 객체 생성.

  a: 10; 

 }; 

 foo.b = 1; 

 // . 연산자를 이용하여 b 라는 이름의 프로퍼티를 생성하면서 1이라는 값을 할당.==> 속성 추가

 var sum = foo.a+foo.b; 

 // . 연산자를 이용하여 foo 객체의 a 프로퍼티에 접근하여 값을 활용가능하다.

 alert(sum);


4) 매서드

- 객체가 가지고 있는 동작

- 객체의 속성 중 함수 자료형인 속성

 methodName : function() { code lines }


5) this 키워드

- 자기 자신이 가진 속성 표현


6) 객체 반복

   for (var [변수명] in [객체 | 배열]){

      [소스 코드];

   }


   var obj = {name:"홍길동", class:"A반", age:20};

   for (var i in obj){

      document.write(i + " : " + obj[i] + "<br>");

   }


7) in 키워드

- 객체에 키값이 있으면 true를 리턴하고 없으면 false를 리턴합니다.


8) with 키워드

- with(객체명) { }를 이용하면 { }안에서는 객체명을 생략가능

 

 


 

2. 객체 생성 - 생성자 함수 사용

1) 

 function 생성자 함수(매개변수1, 매개변수2) {

  this.속성1 = 값1;

  this.속성2 = 값2;

  this.매서드 = function(매서드매개변수) {}

 }

 var 객체변수1(인스턴스) = new 생성자함수("매개변수1의인수", "매개변수2의인수");

 막 찍어낸 붕어빵  = new 붕어빵틀;


2) prototype : 이미 개발된 객체 자체에 속성이나 메서드 추가









예문


Ex_01

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var Test = {

number: 273,

string: 'RintIanTta',

boolean: true,

array: [52, 273, 103, 32],

method: function () {

document.write("객체생성");

}

};


//document.write(typeof(Test));

document.write(Test.number+"<br />");

document.write(Test["string"]+"<br />");

Test.method();

</script>

</head>

<body>


</body>

</html>












Ex_02 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>사용자 정의 객체</title>

<script>

//name과 address 속성을 갖는 객체 생성

var ob = {

"name" : "홍길동",

"address" : "경남 진주",

"disp" : function() {

alert("나는 매서드");

}

}; //메서드도 넣을 수있다


var ob2 = {

"name" : "이순신",

"address" : "충남 천안"

};


//속성 호출해서 출력

document.write("이름:" + ob["name"] + "<br/>");

document.write("주소:" + ob.address + "<br/>");

document.write("이름:" + ob2.name + "<br/>");

ob.disp();

</script>

</head>

<body>

</body>

</html>















Ex_03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var Person = {

firstName : "John",

lastName : "Doe",

age : 50,

eyeColor : "blue"

};


document.write(Person.firstName + " is " + Person.age + " years old.");

</script>

<body>

</body>

</html>






Ex_04

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var person = {

firstName:"John", 

lastName:"Doe", 

eyeColor:"blue",

fullName : function() {

return this.firstName + " " + this.lastName;

}

};


person.age = Number(prompt("나이",''));

person.getAge = function() {

return this.age;

}

document.write(person.getAge());

</script>

<body>

</body>

</html>






Ex_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 변수를 선언합니다.

var product = {

name : 'Microsoft Visual Studio 2012 Ultimate',

price : '15,000,000원',

language : '한국어',

supportOS : 'Win 32/64',

subscription : true

};


// 출력합니다.

var output = '';

for ( var key in product) {

output += '●' + key + ': ' + product[key] + '<br />';

}

document.write(output);

</script>

</head>

<body>


</body>

</html>







Ex_06 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 변수를 선언합니다.

var output = '';

var student = {

이름 : '연하진',

국어 : 92,

수학 : 98,

영어 : 96,

과학 : 98

};


// in 키워드를 사용합니다.

output += "'이름' in student: " + ('이름' in student) + '\n';

output += "'성별' in student: " + ('성별' in student);


// 출력합니다.

alert(output);

</script>

</head>

<body>


</body>

</html>









Ex_07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 변수를 선언합니다.

var student = {

이름 : "연하진",

국어 : 92,

수학 : 98,

영어 : 96,

과학 : 98

};


// 출력합니다.

var output = "";

with (student) {

output += "이름: " + 이름 + "\n";

output += "국어: " + 국어 + "\n";

output += "수학: " + 수학 + "\n";

output += "영어: " + 영어 + "\n";

output += "과학: " + 과학 + "\n";

output += "총점: " + (국어 + 수학 + 영어 + 과학);

}

alert(output);

</script>

</head>

<body>


</body>

</html>








Ex_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

function Class(no1) {


this.no1 = no1;

this.no2 = 8;


this.printVal = function() {

document.write(this.no1 * this.no2);

}


}


var classObj = new Class(7);

var classObj2 = new Class(5);

classObj.printVal();

</script>

</head>

<body>


</body>

</html>












Ex_09

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

function Dog(n, a) {


this.name = n;

this.age = a;

this.getName = function() {

return this.name;

}

this.getAge = function() {

return this.age;

}


}


//해당 내용이 실행 되도록 속성을 생성


var dog1 = new Dog("바보", 10);

var dog2 = new Dog("멍청이", 5);

document.write(dog1.getName() + "," + dog1.getAge());

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

document.write(dog2.getName() + "," + dog2.getAge());

</script>

</head>

<body>


</body>

</html>








Ex_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

function Car(c, s) {

this.color = c;

this.speed = s;

this.changeColor = function(c2) {

return this.color = c2;

}

}


Car.prototype.speedUp = function(num) {

this.speed += num;

}


var car = new Car("pink", 200);

var car2 = new Car("red", 200);


/*car.speedUp=function(num){

this.speed+=num;

}*/


var output = "";

for ( var key in car) {

output += '●' + key + ': ' + car[key] + '<br />';

}

document.write(output);


document.write(car.color); // pink

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

document.write(car.changeColor("red"));

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

document.write(car.color); // red

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

document.write(car.speed); // 200

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

car.speedUp(100);

document.write(car.speed); // 300*/

</script>

</head>

<body>


</body>

</html>








Ex_11

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

function Dog(n, a) {


this.name = n;

this.age = a;

this.getName = function() {

return this.name;

}

this.getAge = function() {

return this.age;

}


}


/// 프로토타입을 이용해 매서드 추가

var dog1 = new Dog("바보", 10);

var dog2 = new Dog("멍청이", 5);


dog1.changeName("멍멍이");

document.write(dog1.getName() + "," + dog1.getAge());

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

document.write(dog2.getName() + "," + dog2.getAge());

</script>

<body>

</body>

</html>







Ex_12

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

// 변수를 선언합니다.

var primitiveNumber = 273;

var objectNumber = new Number(273);


// 출력합니다.

var output = '';

output += typeof (primitiveNumber) + ' : ' + primitiveNumber + '\n';

output += typeof (objectNumber) + ' : ' + objectNumber;

alert(output);

</script>

</head>

<body>


</body>

</html>







Ex_13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

// 변수를 선언합니다.

var num1 = 273.1234;

var num2 = new Number(273.1237);


document.write(num1.toFixed(1));

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

document.write(num2.toFixed(3)); //반올림 하여 변환*/

// 출력합니다.

</script>

</head>

<body>


</body>

</html>

저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_017  (0) 2017.07.31
UI/UX_016  (0) 2017.07.28
UI/UX_014  (0) 2017.07.20
UI/UX_013  (0) 2017.07.19
UI/UX_012  (0) 2017.07.18
'IT/_HTML_CSS_JS' Related Articles more