2016. 11. 18. (Fri)
L15JavaScript
L04Array
Array에 대해 알아보자
ex) L04Array.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array에 대해 알아보자</title>
</head>
<body>
<h1>Array 관련 함수들을 사용해보자</h1>
<h3 id="fruitsList"></h3>
<h3 id="fruitsType"></h3>
<h3 id="isArrayFruits"></h3>
<h3 id="instanceOfFruits"></h3>
<script>
var points = new Array(1,2,3,4,5); //not good
var points = [1,2,3,4,5]; //good
typeof points; //object
Array.isArray(points); //true
var fruits = ["Apple","Banana","Orange","Durian","melon"];
//배열에 값을 추가하고 삭제하고 정렬할 계획이다.
console.log(fruits);
//Array는 클래스이고 자바스크립트에서 기본ㄴ데이터 타입으로 사용중이다.
//만약 자바였다면 List를 기본데이터 타입으로 사용하는 꼴
//window = this 생략가능
console.log(window.document.getElementById("fruitsList"));
document.getElementById("fruitsList").innerHTML = fruits;
var fruitsType = document.getElementById("fruitsType");
console.log(fruitsType);
fruitsType.innerHTML = "typeof fruits : "+typeof fruits;
document.getElementById("isArrayFruits").innerHTML
= "Array.isArray(fruits) : "+Array.isArray(fruits);
document.getElementById("instanceOfFruits").innerHTML
= "fruits instanceof Array : "+(fruits instanceof Array);
console.log(window);
console.log(this.document);
console.log(window.document);
document.write("<hr/>");
document.write("<h2>배열 출력방법</h2>");
document.write("<h3>fruits: "+fruits+"</h3>");
document.write("<h3>fruits.toString(): "+fruits.toString()+"</h3>");
document.write("<h3>fruits.valueOf(): "+fruits.valueOf()+"</h3>");
document.write("<hr/>");
document.write("<h2>join('') 배열을 특정문자열 기준으로 문자열로 변경</h2>");
document.write("<h3>fruits.join('-'): "+fruits.join('-')+"</h3>");
document.write("<hr/>");
document.write("<h2>pop() 배열의 마지막 인덱스에 있는 값을 빼낸다.</h2>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.pop(): "+fruits.pop()+" //fruits: "+fruits+"</h3>");
document.write("<hr/>");
document.write("<h2>push('') 배열의 마지막 인덱스 뒤에 값을 추가</h2>");
document.write("<h3>fruits.push('Banana'): "+fruits.push('Banana')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.push('Orange'): "+fruits.push('Orange')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.push('Apple'): "+fruits.push('Apple')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.push('Durian'): "+fruits.push('Durian')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.push('Melon'): "+fruits.push('Melon')+" //fruits: "+fruits+"</h3>");
document.write("<hr/>");
document.write("<h2>shift() 배열의 첫 인덱스에 있는 값을 빼낸다.</h2>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.shift(): "+fruits.shift()+" //fruits: "+fruits+"</h3>");
document.write("<hr/>");
document.write("<h2>unshift('') 배열의 첫 인덱스 값을 추가</h2>");
document.write("<h3>fruits.unshift('Banana'): "+fruits.unshift('Banana')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.unshift('Orange'): "+fruits.unshift('Orange')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.unshift('Apple'): "+fruits.unshift('Apple')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.unshift('Durian'): "+fruits.unshift('Durian')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.unshift('Melon'): "+fruits.unshift('Melon')+" //fruits: "+fruits+"</h3>");
document.write("<hr/>");
document.write("<h2>splice() 배열의 원하는 위치에 값을 추가하거나 변경한다.</h2>");
document.write("<h3>fruits.splice(2,0,'Lemon','kiwi'): "+fruits.splice(2,0,'Lemon','kiwi')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.splice(2,2): "+fruits.splice(2,2)+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.splice(2,2,'Lemon','kiwi'): "+fruits.splice(2,2,'Lemon','kiwi')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.splice(2,2,'Apple','Durian'): "+fruits.splice(2,2,'Apple','Durian')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.splice(5,0,'Lemon','kiwi'): "+fruits.splice(5,0,'Lemon','kiwi')+" //fruits: "+fruits+"</h3>");
document.write("<h3>fruits.splice(5): "+fruits.splice(5)+" //fruits: "+fruits+"</h3>");
document.write("<hr/>");
document.write("<h2>sort(), reverse()로 배열을 정렬해보자</h2>");
document.write("<h3>fruits.sort(): "+fruits.sort()+"</h3>");
document.write("<h3>fruits.reverse(): "+fruits.reverse()+"</h3>");
document.write("<hr/>");
var points = [25,100,1,5,34,2];
document.write("<h2>points :"+points+"</h2>");
document.write("<h2>함수(Compare Function)를 이용해서 배열을 정렬해보자</h2>");
document.write("<h3> points.sort(function(a,b){return b-a}) :"+points.sort(function(a,b){return b-a})+"</h3>");
document.write("<h3> points.sort(function(a,b){return 0.5-math.random()}) :"+points.sort(function(a,b){return 0.5 - Math.random()})+"</h3>");
</script>
</body>
</html>
※출력내용
'IT story > JSP' 카테고리의 다른 글
| [JSP 강의] L15JavaScript (L06JSON.html) (0) | 2016.11.18 |
|---|---|
| [JSP 강의] L15JavaScript (L05Function.html) (0) | 2016.11.18 |
| [JSP 강의] L15JavaScript (L03Number.html) (0) | 2016.11.17 |
| [JSP 강의] L15JavaScript (L02String.html) (0) | 2016.11.17 |
| [JSP 강의] L15JavaScript (L01Variable.html) (0) | 2016.11.17 |