버튼을 눌렀을 때 어떤 함수가 작동하게 끔 설정해보자.
함수는 배열의 값을 넣었다 뺏다 하는 함수를 만들것이고
배열에서 값을 앞에 먼저 넣거나 뒤에 먼저 넣는 예제를 만든다.
<html>
<head>
<meta charset="UTF-8">
<title>배열 2</title>
<link rel="icon" href="img/favicon.ico">
<style>
/*css 주석*/
</style>
<!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
</head>
<body>
<!--버튼 역할만 수행-->
<input type="button" value="PUSH" onclick="arrPush()"/>
<!--버튼+submit 역할 수행 : form 안에서 사용시 주의, form에선 누르기만 해도 서버에 전송될 수 있음-->
<button onclick="arrPop()">POP</button>
<br/>
<input type="button" value="unshift" onclick="arrUnshift()"/>
<input type="button" value="shift" onclick="arrShift()"/>
</body>
<script>
var arrNum = [];
var i = 0;
function arrPush(){
i++;
arrNum.push(i);
console.log(arrNum);
}
function arrPop(){
console.log(arrNum.pop()); // 뺀 값을 반환
console.log(arrNum); // 배열에서 하나씩 빠진다.
}
// [] [] [] [] <- push() (값을 넣음)
// [] [] [] pop() -> [] (값을 뺌)
// unshift() -> [][][][] (앞에서부터 집어 넣음)
// [] <- shift() [][][] (앞에 값을 뺌)
/*버튼 추가 후 shift와 unshift 사용 하기*/
function arrUnshift(){
i++;
arrNum.unshift(i);
console.log(arrNum);
}
function arrShift(){
console.log(arrNum.shift()); // 뺀 값을 반환
console.log(arrNum); // 배열에서 하나씩 빠진다.
}
</script>
</html>
버튼의 경우 onclick 이벤트 속성을 선언하고 속성에 Script에 만들어둔
함수()를 입력하면 버튼을 누를 때 마다 적용된다.
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join) (0) | 2018.10.19 |
|---|---|
| [JS]04-05.2차원 배열 생성, 값 조회, 추가 (0) | 2018.10.19 |
| [JS]04-03.함수 생성 및 사용, 배열 생성 및 사용 (0) | 2018.10.18 |
| [JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력 (0) | 2018.10.18 |
| [JS]04-01.기본 뼈대 (0) | 2018.10.18 |
html_css.zip
