안녕하세요. 깊게학습한것을 현업에 써먹고싶은 진쓰입니다.
자바스크립트 객체, 배열 포스팅 시작하겠습니다.
같이 묶은이유는 둘다 객체 개념으로 이해하시면 되기때문입니다.
new라는 예약어를 통해 배열과 객체는 생성하실 수 있습니다.
1. 객체 정의
- 객체를 사용하기 때문에 객체기반언어 입니다.
- 객체는 속성(property)과 methods 를 가집니다.
- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용합니다.
- 생성자함수 안에는 this라는 예약어를 이용해 정의합니다.
2. 객체 사용방법
일반적인 객체지향언어에서의 사용법과 동일합니다.
- 즉 객체이름 다음에 점(.)을 찍고 속성이나 메소드를 써주면 됩니다.
* 객체 선언방법
function grade(Name, kor, eng, mat) { this.name = Name this.kor = kor this.eng = eng this.mat = mat } |
메소드선언에도 사용하는 function이라는 키워드가 사용됨을 보실 수 있습니다.
또한, 파라메터 역시 적어주는데, 개발자 임의로 정할 수 있습니다.
this 라는 예약어를 통해, 객체의 멤버변수와, 함수를 저장할수 있습니다.
<html> <head> <title> 6장 예제 </title> <script language="javascript">
function print(){ document.write(this.name+"<br>"); document.write(this.kor+"<br>"); document.write(this.eng+"<br>"); }
function Score(name, kor, eng) { this.name = name; this.kor = kor; this.eng = eng;
this.print = print; }
</script> </head>
<body>
<script language="javascript">
jinss = new Score("진쓰", 100, 80); park = new Score("영수", 70, 50); jinss.print(); park.print();
</script>
</body> </html> |
|
name, kor, eng 멤버변수를 가지는 Score라는 객체를 정의했습니다.
그리고 print라는 메소드를 정의해서, 객체내의 print 멤버변수가 print 메소드를 가르키도록 했습니다.
또한 객체를 생성할때는 new라는 예약어를 사용하시는것을 볼 수 있습니다.
3. 객체배열 특징
-내장객체 Array 객체를 의미한다. - 접근 방법 배열이름[인덱스] : 인덱스는 0부터 시작 합니다. - 생성방법 배열이름 = new Array(개수) - 예) Arr_Name = new Array(10) |
<html> <head> <title> 6장 예제 </title>
<script language="javascript">
</script>
</head>
<body>
<script language="javascript">
my_array = new Array(5);
my_array[0] = "가"; my_array[1] = "control & instrumentation"; my_array[2] = "유튜브"; my_array[3] = "Jinss"; my_array[4] = "mybuddy";
for(var i=0;i<5;i++){ document.write(my_array[i]+" "); }
</script> </body>
</html> |
|
객체 배열을 선언할때도 new라는 예약어를 사용하여 생성합니다.
예제에서는 다양한 문자열을 넣고 출력하는것을 확인할 수 있습니다.
자료형을 배열로 선언하였기 때문에, 연속적인 인덱싱으로 접근할 수 있습니다.
여기서는 for문을 통해서 접근하는 예제를 보실 수 있습니다.
.
4. array객체 메소드
- join() : 배열을 하나의 문자열로 만들어준다. - sort() : 배열의 값들을 순서대로 정렬한다. - reverse() : 배열안에 값들을 순서대로 재정렬시킨다. - concat() : 두 개배열을 하나의 배열로 만든다. - slice() : 배열의 일부분의 값을 추출 합니다. |
<html> <head> <title> 6장 예제 </title>
<script language="javascript">
</script>
</head>
<body>
<script language="javascript">
my_array = new Array("사과","배","바나나"); for(var i=0;i<3;i++){ document.write(my_array[i]+"<br>"); //배열 전체 출력합니다. } document.write( "<br><br>"); document.write( my_array.join()+"<br>"); //하나로 합칩니다. document.write( "<br><br>"); document.write( my_array.join("와 ")+"<br>"); // 합칠때 "와" 로 합칩니다. document.write( my_array.join("& ")+"<br>"); //합칠때 &로 합칩니다.
array1 = new Array("오징어", "낙지", "문어","꼴뜨기"); //1번 인덱스전껄 자르고, 3번인덱스이상부터 짜릅니다. array2 = array1.slice(1,3); document.write(array2);
</script>
</body>
</html> |
|
힘찬 월요일 시작해봅시다! 감사합니다. :)
'웹 (WEB) > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 String 내장객체 (8장) (2) | 2017.06.14 |
|---|---|
| 자바스크립트 Date 객체 (7장) (0) | 2017.06.13 |
| 자바스크립트 함수의개요 및 내장함수(5장) (0) | 2017.06.11 |
| 자바스크립트 제어문2 반복문(for, while) (4장) (0) | 2017.06.09 |
| 자바스크립트 제어문(1), if, switch (3장) (0) | 2017.06.09 |