JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

.push(), .pop(), unshift(), shift()

  • .push()는 배열의 맨 끝에, .unshift()는 배열의 맨 앞에 원소를 추가합니다.
  • .pop()은 마지막 원소를, .shift()는 맨 앞의 원소를 제거합니다.

예제

네 가지 속성을 비교하는 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var jbAry1 = [ 'one', 'two', 'three' ];
      jbAry1.push( 'four' );
      document.write( '<p>' + jbAry1.join( ' / ' ) + '</p>' );
      var jbAry2 = [ 'one', 'two', 'three' ];
      jbAry2.pop();
      document.write( '<p>' + jbAry2.join( ' / ' ) + '</p>' );
      var jbAry3 = [ 'one', 'two', 'three' ];
      jbAry3.unshift( 'zero' );
      document.write( '<p>' + jbAry3.join( ' / ' ) + '</p>' );
      var jbAry4 = [ 'one', 'two', 'three' ];
      jbAry4.shift();
      document.write( '<p>' + jbAry4.join( ' / ' ) + '</p>' );
    </script>
  </body>
</html>

같은 카테고리의 다른 글
JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Library

JavaScript / Library

Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다. 자세한 사용법은 아래 링크에 있다. https://postcode.map.daum.net/guide 너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다. 기본 예제와 작동 방식 아래는 최소한의 코드로 작성한 것이다. ...

JavaScript / 함수 / 함수 선언하고 호출하기

JavaScript / 함수 / 함수 선언하고 호출하기

함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...

JavaScript / Object / Screen / 화면 정보 가져오는 객체

JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

.replace() .replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다. 문법 string.replace( 'string1', 'string2' ) string에서 string1을 찾아 string2로 바꿉니다. 예제 jbStr 문자열에서 Lorem을 찾아 Amet으로 바꾼 후 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | .replace()</title> </head> <body> <script> ...

JavaScript / 배열(Array) / 선언하기

JavaScript / 배열(Array) / 선언하기

배열 선언하는 방법 방법 1 jbAry라는 배열을 만듭니다. var jbAry = new Array(); 값을 배정합니다. jbAry = 'Lorem'; jbAry = 'Ipsum'; jbAry = 'Dolor'; 방법 2 var jbAry = ; 방법 3 var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' ); 예제 배열에 값을 배정한 후 차례대로 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / String.split() / 문자열 분할하는 메서드

JavaScript / Object / String.split() / 문자열 분할하는 메서드

.split() .split()은 문자열을 분할하는 메서드입니다. 문법 string.split( separator, limit ) separator에는 분할의 기준을 넣습니다. 예를 들어 쉼표를 기준으로 분할할 때는 ',' 와 같이 합니다. limit로 최대 분할 개수를 정합니다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할합니다. 예제 1 쉼표를 기준으로 문자열을 분할하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> ...

JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기

JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기

window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다. 부모 창이 parent.html, 자식 창이 child.html이다. 새 창 띄우기 문법은 다음과 같다. window.open( url, windowName, windowFeatures ); url : 새 창에 들어갈 문서 주소 windowName : 윈도우 이름 windowFeatures : 새 창의 특성 예를 들어 다음은... window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...