자바스크립트 - 배열 / 객체 (1)

프로그래밍/JavaScript 자바스크립트 2021. 9. 30.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// 배열 리터널을 이용한 1차원 배열 생성
var a1 = []; // 빈 배열
var a2 = [10,20,30];
var a3 = [10,20,30,];
var a4 = [10,20,,30];

console.log( a1.length ); // 0.  length : 배열 요소의 수 
console.log( a2.length ); // 3
console.log( a3.length ); // 3. 마지막의 ,는 무시
console.log( a4.length ); // 4
  // 10,20,undefined,30(, 다음에 값이 없으면 undefined)

// 배열 요소 접근 
console.log ( a2[0] ); // 10, 첨자는 0부터 시작.  
console.log ( a2[2] ); // 30  
console.log ( a2[4] ); // undefined. 전체요소-1 보다 첨자가 크면 undefined

// Array() 생성자를 이용한 배열 만들기
var b1 = new Array(); // 빈 배열
var b2 = new Array(5); // 크기가 5인 배열. 생성자의 인자가 하나의 숫자인 경우 요소 수를 나타냄.
                       // 요소의 값은 모두 undefined
var b3 = new Array(10, 20); // 생성자의 인수가 2개 이상이면 요소의 초기값

console.log( b1.length ); // 0
console.log( b2.length ); // 5
console.log( b3.length ); // 2

console.log( b2[1] ); // undefined
console.log( b3[1] ); // 20

</script>

</head>
<body>

<h3>내장객체 - Array</h3>

</body>
</html>

1차원 배열 생성 방법

var a1 = []; 빈 배열 만들고

a1[0] = 3; 이렇게 인덱스를 이용해서 추가 하는 방법과

var a2 = [1,2,3,4,5];

이렇게 선언과 동시에 값을 주는 방법이 있다.

Array() 생성자로 배열 만드는 방법.

- var b1 = new Array(); 빈 배열을 만듬.

- var b2 = new Array(5); 배열의 크기가 5인 배열을 만듬.

- var b3 = new Array(1, 2); 하지만 인자가 2개이상 들어가면 값으로 취급함. b3의 배열안에 1과 2가 들어가있음.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// Array() 생성자를 이용한 2차원 배열 만들기
var a1 = new Array(2); // 행수
a1[0] = new Array(3); // 0행의 열수
a1[1] = new Array(3);

console.log( a1.length ); // 행수
console.log( a1[1].length ); // 1행의 열수

// 배열 리터널을 이용한 2차원 배열 만들기
var a2 = [[1,2,3], [4,5,6]];
console.log( a2.length ); // 행수
console.log( a2[0].length ); // 0행의 열수
console.log( a2[1][2] ); // 6

</script>

</head>
<body>

<h3>내장객체 - Array : 2차원 배열</h3>

</body>
</html>

2차원 배열 만들기.

var a1 = new Array(2); 먼저 크기가 2인 배열을 만들고

a1[0] = new Array(3); 첫번째 인덱스 즉 행이 될 놈한테 새로 방을 지어준다. [[3], []]

a1[1] = new Array(3); 두번째 인덱스에 2번째 행일 될 놈한테 다시 방을 지어줌. [[3],[3]]

아니면 한번에 만들 수 도 있음.

var a2 = [[1,2,3],[1,2,3]];


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [10, 20, ,30, 0];

// 배열의 요소를 처음부터 끝까지 순회
for(var i=0; i<arr.length; i++) {
	console.log(arr[i]); // 10 20 undefined 30 0
}
console.log('----------');

for(var i=0; i<arr.length; i++) {
	if(arr[i]) { // '', undefined, NaN, null, 0은 거짓
		console.log(arr[i]); // 10 20 30
	}
}
console.log('----------');

var arr2 = [10, 20, 30];
for(var n of arr2) { // ES6에 추가된 컬렉션 반복 구문
	console.log(n); // 10 20 30
}
console.log('----------');

for(var idx in arr2) { // 첨자만 출력
	console.log(idx); // 0 1 2
}
console.log('----------');

for(var idx in arr2) {
	console.log(arr2[idx]); // 10 20 30
}

</script>
</head>
<body>

<h3>배열 - 순회</h3>

</body>
</html>

배열 출력

자바에서 하던것 처럼 for문을 돌림

자바에서 향상된 for문 비슷한놈이 자바스크립트에도 있음

for(var n of arr2) {

console.log(arr[i]);

}

of를 사용함.

만약 of가 아니라 in을 사용한다면 값이 아니라 해당 배열의 인덱스를 가져옴.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10, 20];

console.log( arr1.length ); // 2
console.log( arr1 ); // [10,20]

// 요소 추가
arr1[2] = 30;
console.log( arr1.length ); // 3
console.log( arr1 ); // [10,20,30]

arr1[4] = 50;
console.log( arr1.length ); // 5
console.log( arr1 ); // [10,20,30,empty,50],  콘솔에서는 undefined는 empty로 표시
console.log( arr1[3] ); // undefined

arr1[arr1.length] = 60; // 가장 뒤에 요소 추가
console.log(arr1.join()); // join() : 배열의 모든 요소를 연결 하나의 문자열로 만듬
            // 10,20,30,,50,60
            
arr1[3] = 30; // 특정 요소의 값 변경
console.log(arr1.join());

// push() : 가장 뒤에 새로운 요소 추가
var arr2 = [10, 20];
arr2.push(30); // 뒤에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log(arr2.join()); // 10,20,30

arr2.push(40, 50);
console.log(arr2.join()); // 10,20,30,40,50

// unshift() : 가장 앞에 새로운 요소 추가
var arr3 = [30, 40];
var len = arr3.unshift(10, 20); // 맨 앞에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log("길이:"+len);
console.log(arr3.join());

</script>
</head>
<body>

<h3>배열 - 요소 추가(가장 앞, 가장 뒤)</h3>

</body>
</html>

요소 추가는 인덱스 활용해서 넣어주면 되고

가장 마지막에 요소를 추가할 때는 길이 구하는 함수를 이용한다.

arr1[arr1.length] = 60; 이러면 arr1 배열의 가장 마지막에 요소를 넣는다.

아니면 push()를 사용해서 맨 마지막에 값을 추가 할 수 있다.

arr2.push(30); / arr2.push(30,40) 여러개 값도 가능

반대로 맨 처음에 값을 추가하는 방법은 unshift()사용

arr2.unshift(10, 20); 특이한 점은 unshift는 배열에 요소를 추가 해주는데

정작 본인은 길이를 반환한다는 점.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
/*
  - splice(start [,deleteCount[,item1, item2, ...]])
       start : 변경을 시작할 배열 위치
       deleteCount : start 부터 deleteCount 갯수 만큼 원소 삭제
       item1, item2, ... : start 인덱스에 item을 추가
*/

// 가장 앞에 추가
var arr1 = [10,20,30];
arr1.splice(0, 0, 'a', 'b');
console.log(arr1.join()); // a,b,10,20,30

// 뒤에 추가
var arr2 = [10,20,30];
arr2.splice(arr2.length, 0, 'a', 'b');
console.log(arr2.join());  // 10,20,30,a,b

// 중간에 추가
var arr3 = [10,20,30];
arr3.splice(1, 0, 'a', 'b'); 
console.log(arr3.join()); // 10,a,b,20,30

// 삭제하고 중간에 추가
var arr4 = [10,20,30,40,50];
arr4.splice(1, 2, 'a', 'b'); 
console.log(arr4.join()); // 10,a,b,40,50

</script>

</head>
<body>

<h3>배열 : 요소 추가(중간)</h3>

</body>
</html>

splice를 사용하면 배열 중간에 끼워 넣을 수 있다.

arr3.splice(1,0,'a','b'); => 1번째 인덱스에서 부터 끼워 넣을건데 1번째 인덱스부터 0개의 원소를 지우고 끼워 넣을거다. 라는 뜻

arr4.splice(1, 2, 'a', 'b'); => 1번째 인덱스부터 2개의 원소를 지우고 1번째 인덱스에 a,b를 끼워 넣겠다.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30,40,50];
console.log(arr1.join());

// length 속성을 이용한 마지막 요소 삭제
arr1.length = arr1.length - 1;
console.log(arr1.join());

// length 속성을 이용한 모든 요소 삭제
arr1.length = 0;
console.log(arr1.length);
console.log(arr1.join());

// pop() 메소드를 이용한 마지막 요소 삭제
var arr2 = [10,20,30,40,50];
var a = arr2.pop(); // 마지막 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬
console.log(arr2.length); // 4
console.log(arr2.join()); // 10,20,30,40
console.log(a); // 50

// shift() 메소드를 이용한 처음 요소 삭제
var arr3 = [10,20,30,40,50];
var b = arr3.shift(); // 처음 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬
console.log(arr3.length); // 4
console.log(arr3.join()); // 20,30,40,50
console.log(b); // 10

// delete() 메소드를 이용한 요소 값 없애기
var arr4 = [10,20,30,40,50];
delete(arr4[1]); // arr4[1]의 요소의 값을 없애고 undefined를 할당. 배열의 길이는 줄지 않음
console.log(arr4.length); // 5
console.log(arr4[1]); // undefined

</script>
</head>
<body>

<h3>배열-삭제</h3>

</body>
</html>

배열 안에 있는 요소를 삭제하는 방법들.

arr1.length = arr1.length - 1; 이렇게 길이 자체를 하나 줄여버리면 원소도 삭제 된다.

그러면 배열 길이를 0으로 만들어 버리면 모든 요소가 삭제 된다.

다른 삭제 메소드는 pop() / shift() / delete()가 있다.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10, 20, 30, 20, 40];
var n;

n = arr1.indexOf(20);
console.log("20의 인덱스 : " + n); // 1

n = arr1.lastIndexOf(20); 
console.log("뒤에서 부터 검색한 20의 인덱스 : " + n); // 3

n = arr1.indexOf(50);
console.log("50의 인덱스 : " + n); // 없으면 -1

// join() : 배열의 요소를 연결해 하나의 문자열로 만든다.
n = arr1.join();
console.log(n);

var arr2 = [10, 20, 30, 40, 50];
var a = arr2.reverse(); // 배열의 순서를 반전 시킴
console.log( arr2.join() ); // 50 40 30 20 10
console.log( a.join() ); // 50 40 30 20 10

</script>
</head>
<body>

<h3>배열 - 메소드</h3>

</body>
</html>

배열의 위치 검색하는 여러 방법들

인덱스를 활용 한다.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// sort() : 기본적으로 문자의 유니코드 코드 포인터값에 따라 정렬 함 
var arr1 = ["BBA", "BC", "CC", "ABC"];
arr1.sort(); // 유니코드 값의 사전식 배열
console.log(arr1.join()); // ABC,BBA,BC,CC

// 숫자는 이상한 결과가 나온다.
var arr2 = [55, 7, 10, 35, 40];
arr2.sort(); // 각 요소를 문자열로 변환하여 유니코드 값의 사전식 배열
console.log( arr2.join() ); // 10,35,40,55,7

var arr3 = ["BBA", "BC", "CC", "ABC"];
arr3.sort(function(a, b){ // 오름차순 정렬 : 문자열은 arr3.sort(); 만 해도 오름차순 정렬
	if(a > b) return 1;
	else if(a < b) return -1;
	else return 0;
});
console.log( arr3.join() );  // ABC,BBA,BC,CC

var arr4 = ["BBA", "BC", "CC", "ABC"];
arr4.sort(function(a, b){ // 내림차순 정렬
	if(a > b) return -1;
	else if(a < b) return 1;
	else return 0;
});
console.log( arr4.join() );  // CC, BC, BBA, ABC

var arr5 = [55, 7, 10, 35, 40];
arr5.sort(function(a, b){ // 오름차순
	return a - b;
});
console.log( arr5.join() ); // 7 10 35 40 55

var arr6 = [55, 7, 10, 35, 40];
arr6.sort(function(a, b){ // 내림차순
	return -(a - b);
});
console.log( arr6.join() ); // 55,40,35,10,7

</script>

</head>
<body>
<h3>배열 : 정렬</h3>
</body>
</html>

배열의 정렬 방법

sort() 방법은 문자열만 가능하다.

숫자를 넣어서 하게되면 숫자를 문자열로 바꾼다음에 유니코드 값의 사전식으로 순서가 바뀌기 때문에 뒤죽박죽이 된다.

sort()는 문자열로만 사용하고 숫자는 다른 방법을 써야 한다.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [1,2,3,4,5];
var s = 0;

arr.forEach(function(item){
	s += item;
});
console.log(s);

var arr2 = [10,20,30,40,50];
arr2.forEach(function(item, index){  // item:각요소값, index:첨자
    console.log(index+":"+item);	
});

</script>
</head>
<body>

<h3>forEach</h3>

</body>
</html>

forEach()문과 function 함수를 이용하면 배열의 첫번째 요소부터 마지막 요소까지 반복하면서 item을 꺼낼 수 있다.

s += item을 했으니 1~5까지 돌면서 전부 더한 15가 나온다.

function에 2번째 매개변수를 주게되면 이건 index를 구하는데 사용 할 수 있다.

해당 배열을 처음부터 끝까지 돌면서 인덱스도 알려준다는 뜻


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr = [1,2,3,4,5,6,7,8,9,10];

// arr의 배열 내용중 홀수 값을 갖는 새로운 배열 작성
var arr2 = [];
/*
for(var i=0; i<arr.length; i++) {
	if(arr[i] % 2) {
		arr2.push(arr[i]);
	}
}
*/
arr.forEach(function(item){
	if(item % 2) {
		arr2.push(item);
	}
});
console.log(arr2);

// filter() : 조건에 만족한 요소만으로 새로운 배열 작성
var arr3 = arr.filter(function(item, index){
	return item%2; // 조건이 참인 경우에만 해당 item을 배열에 추가
});
console.log(arr3);


// 인덱스가 5이상인 요소만 arr4라는 이름의 배열에 추가
var arr4 = arr.filter(function(item, index){
	return index>=5;
});
console.log(arr4);
console.log('--------------------')

// map() : 배열의 각 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값으로 새로운 배열을 반환
var a = [1,2,3,4,5];
var a2 = [];
for(let i = 0; i<a.length; i++) {
	a2.push(a[i] * 2);
}
console.log( a2.join() ); // 2 4 6 8 10

var a3 = a.map(function(item){
	return item * 2;
});
console.log( a3.join() ); // 2 4 6 8 10

var a4 = a.map( (item) => item * 2 );
console.log( a4.join() ); // 2 4 6 8 10

var a5 = a.map( (item, index) => index%2==0 ? item : item * 2 );
console.log( a4.join() ); // 1 4 3 8 5

</script>
</head>
<body>

<h3>map, filter</h3>

</body>
</html>

filter()는 배열에서 내가 정한 조건에 만족한 요소들만을 뽑아 올 수 있다.

map(function(item)) 메소드는 배열의 각 요소에 대해서 순차적으로 함수를 실행한 반환 값으로

새로운 배열을 만들 수 있다.

var a3 = a.map(function(item){
return item * 2;
});

새로운 a3 배열을 선언하는데 이 곳에는 a의 요소들을 하나씩 function의 item 인자에 넣어서

계산을 한 결과를 a3에 하나씩 넣는다.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
/*
 - Set
   값들의 집합
   입력된 순서에 따라 지정된 요소를 반복 처리 할 수 있다.
   Set은 중복 값을 허용하지 않는다.
*/

var set = new Set();
set.add(100);
set.add("java");
set.add("oracle");
set.add("html");
set.add("css");
set.add("oracle");

// 요소의 수
console.log( set.size ); // 5

// item 존재 여부
console.log( set.has('java') ); // true. 배열의 indexOf보다 빠름

// 특정 요소 삭제
set.delete('css');
console.log( set.size ); // 4

// 처음부터 순회
for(let item of set) {
	console.log(item);
}
console.log('----------------');

// forEach로 순회
set.forEach(function(value){
	console.log(value);
});
console.log('----------------');

// Set을 배열로 변환
var arr = Array.from(set);
console.log( arr.join() ); // 100,java,oracle,html

// []를 이용한 Set 객체 생성
var set2 = new Set([10, 20, 30]);
console.log(set2);

// Set 객체의 모든 요소 제거
set2.clear();
console.log( set2.size ); // 0

var set3 = new Set();
var obj = { subject:'java', score:100 }; // 객체
console.log(obj.subject, obj.score); // java 100

set3.add( obj ); // 객체는 주소가 저장됨
set3.add( { subject:'java', score:100 } ); // 속성 및 값은 같지만 obj와는 다른 객체
set3.add( { subject:'java', score:100 } ); // 위와는 다른 객체
set3.add( obj );
console.log( set3.size ); // 3

set3.forEach(function(item){
	console.log(item.subject + ":" + item.score);
});

</script>
</head>
<body>

<h3>내장객체 - Set</h3>

</body>
</html>

Set() 메소드는 자바 처럼 값들의 집합을 의미하는데 자바랑은 개념이 좀 다르다.

var obj = {subject:'java', score:100};

이런식으로 객체를 만들었을때

var obj2 = {subject:'java', score:100};

우리가 봤을때 똑같은 내용물을 가지고 있는 애를 만든다고 했을때

이걸 Set()안에다 넣으면 원래는 Set()은 중복 값을 허용하지 않는데 이놈들은 안에 들어간다.

왜냐하면 객체는 값이 아니라 그 객체의 주소가 저장되기 때문이다.

Set에 객체가 들어갈 때는 값이 아니라 주소가 저장이 됨.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
/*
  - Map 객체
    키와 값을 서로 매핑 시켜 저장하며, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.
    키가 같으면 덮어 쓴다.
*/

var map = new Map();
map.set("java", 100);
map.set("oracle", 90);
map.set("html", 100);
map.set("spring", 90);
map.set("oracle", 80);

console.log( map.size ); // 4

console.log( map.has('css') ); // false. 키 존재 여부
console.log( map.get('css') ); // 키에 대한 값 반환. 없으면 unefined
console.log( map.get('oracle') ); // 80
map.delete('spring'); // 삭제
console.log('----------------');

// 처음부터 순회
for(var [key, value] of map) {
	console.log(key+":"+value);
}
console.log('----------------');

map.forEach(function(value, key){
	console.log(key+","+value);
});
console.log('----------------');

map.forEach( (value,key) => console.log(key+' , '+value) );

console.log('----------------');

// 모든 엔트리 삭제
map.clear();
console.log( map.size );

// 대괄호(배열)를 이용한 Map 객체 만들기
var map2 = new Map(
	[
		["java", 100],
		["html", 95],
		["oracle", 90]
	]
);

for(var [key, value] of map2) {
	console.log( key + ":" + value );	
}
</script>
</head>
<body>

<h3>내장객체 - Map</h3>

</body>
</html>

Map 객체는 키와 값을 서로 연결 시켜서 저장된 순서대로 각 요소들을 접근 할 수 있다.

map.set("html", 100); => html은 키 / 100은 값

배열을 이용해서 로또 프로그램 만들어 보기


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function lotto() {
	var objBox = document.getElementById("box");
	var objCount = document.getElementById("count");
	
	var cnt = objCount.value;
	if( ! /^[1-5]{1}$/.test(cnt)) {
		alert("구매 개수는 1~5사이만 가능 합니다.");
		objCount.focus();
		return;
	}
	
	cnt = parseInt(cnt);
	var num = [];
	// Math.floor( Math.random()*45 )+1 : 1~45까지의 난수
	
	var s = "";
	for(var n=1; n<=cnt; n++) {
		for(var i=0; i<6; i++) {
			num[i] = Math.floor( Math.random()*45 )+1;
			for(var j=0; j<i; j++) {
				if(num[i] == num[j]) {
					i--;
					break;
				}
			}
			
		}
		
		// 정렬
		num.sort(function(a, b){
			return a-b;
		});
		
		s += n+" 번째 : " + num.join() + "<br>";
	}
	objBox.innerHTML = s;
	
}
</script>

</head>
<body>

<div style="margin: 30px auto; width: 300px; text-align: center;">
	<input type="text" id="count" placeholder="구매갯수" class="boxTF">
	<button type="button" onclick="lotto();" class="btn">구매</button>
</div>
<hr>

<div id="box"></div>

</body>
</html>

Set() 함수를 이용해서 로또 프로그램 만들기


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function lotto() {
	var objBox = document.getElementById("box");
	var objCount = document.getElementById("count");
	
	var cnt = objCount.value;
	if( ! /^[1-5]{1}$/.test(cnt)) {
		alert("구매 개수는 1~5사이만 가능 합니다.");
		objCount.focus();
		return;
	}
	
	cnt = parseInt(cnt);
	
	var set = new Set();
	var a;
	var out = "";
	
	for(var n=1; n<=cnt; n++) {
		set.clear();
		
		while(set.size < 6) {
			 a = Math.floor( Math.random() * 45) + 1;
			 set.add(a);
		}
		 
		var nums = Array.from( set );
		nums.sort(function(a, b){
			return a-b; 
		});

		out += n +"번째 : " + nums.join() + "<br>";
	}

	objBox.innerHTML = out;	
}
</script>

</head>
<body>

<div style="margin: 30px auto; width: 300px; text-align: center;">
	<input type="text" id="count" placeholder="구매갯수" class="boxTF">
	<button type="button" onclick="lotto();" class="btn">구매</button>
</div>
<hr>

<div id="box"></div>

</body>
</html>

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 객체(3) (0)	2021.09.30
자바스크립트 - 배열 / 객체 (2) (0)	2021.09.30
자바스크립트 - 달력 (0)	2021.09.28
자바스크립트 - Math 함수 (0)	2021.09.28
자바스크립트 - 시간 관련 함수 (Date) (0)	2021.09.28

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기 포스트

최근 댓글

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역