인생 디벨로퍼

[기초 JAVA Script] 3-10강 배열 (항목 리스트 표시) 본문

JAVA Script

[기초 JAVA Script] 3-10강 배열 (항목 리스트 표시)

뫄뫙뫄 2023. 10. 8. 15:42
728x90
Index
   1. 인덱스틑 0 부터 시작!
   2. 배열 항목 읽어오기
   3. 항목추가
   4.<li> 생성
더보기

배열이란?

배열 : 여러 데이터를 하나로 모아 관리. -> 한개의 변수만 있으면 되서, 데이터 관리가 쉬워짐.

var 배열명 = [] ; 

 

1. 인덱스는 0 부터 시작!

	<script>
		var todo = ['디자인 샘플 작성', '데이터 정리', '스터디 신청', '우유 사기'];
		console.log(todo[0]);
		console.log(todo[4]);
	</script>

index 4 는 존재하지 않기때문에, undefined 가 뜬다.

 

2. 배열 항목 읽어오기

<script>
	var todo = ['디자인 샘플 작성', '데이터 정리', '스터디 신청', '우유 사기'];
	for (var i = 0; i < todo.length; i++) {
		console.log(todo[i]);
	}
 </script>

 for 문을 사용해서, i 를 0 부터 시작해 1씩 증가하며 반복시킨다.

3. 항목 추가

배열에 항목을 추가하기

<script>
	var todo = ['디자인 샘플 작성', '데이터 정리', '스터디 신청', '우유 사기'];
	todo.push('치과 가기');
	for (var i = 0; i < todo.length; i++) {
		console.log(todo[i]);
	}
</script>

배열 => 객체 이다. 따라서, 메소드와 프로퍼티를 가짐

메소드명 의미
변수명.pop() 배열 마지막 데이터 삭제
변수명.push(데이터) 배열 마지막 데이터 추가
변수명.shift() 배열 첫번째 삭제
변수명.unshift(데이터1,데이터2,...) 배열 앞부분 추가

 

4. <li> 생성

<body>
	<header>
		<div class="header-contents">
			<h1>항목을 리스트로 표시</h1>
			<h2>항목을 HTML에 출력하기</h2>
		</div><!-- /.header-contents -->
	</header>
	<div class="main-wrapper">
		<section>
			<h1>해야 할 일 목록</h1>
			<ul id="list">
			</ul>
		</section>
	</div><!-- /.main-wrapper -->
	<footer>JavaScript Samples</footer>
	<script>
		var todo = ['디자인 샘플 작성', '데이터 정리', '스터디 신청', '우유 사기'];
		todo.push('치과 가기');
		for (var i = 0; i < todo.length; i++) {
			var li = document.createElement('li');
			li.textContent = todo[i];
			document.getElementById('list').appendChild(li);
		}
	</script>
</body>
  • 태그 생성
document.createElement(태그명)
  • <li></li> 에 배열 tode i 인덱스 대입
li.textContent = todo[i];
  • id 속성이 list 인 요소를 가져옴
document.getElementById('list')
  • 요소에, 대입해둔 <li></li> 가져오기
document.getElementById('list').appendChild(li);

 

(참고)

처음 만나는 자바스크립트 - 가노 스케하루 저자(글) · 김완섭 번역

728x90

'JAVA Script' 카테고리의 다른 글

[기초 JAVA Script] 3-11강 객체  (0) 2023.10.08
[JAVA Script] 화면전환 효과  (0) 2023.09.07
[기초 JAVA Script] 3-4강 함수 / 사칙연산  (0) 2023.07.16
[기초 JAVA Script] 3-3강 반복문 for문 / while 문  (0) 2023.07.16
[기초 JAVA Script] 3-2강 비교 연산자 / 논리 연산자  (0) 2023.07.16
'JAVA Script' Related Articles more