고정 헤더 영역
상세 컨텐츠
본문
배열
데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납 상자이다.
문자열은 따옴표로 시작해서 따옴표로 끝난다.
배열은 대괄호로 시작해서 대괄호로 끝난고, 값과 값 사이에는 콤마로 구분한다.
아래는 배열을 생성하고 데이터를 꺼내고 배열의 갯수를 보여주는 Html이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
</body>
</html>
자바스크립트에서는 배열을 push를 통해 삽입한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
<h2>push</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
</body>
</html>
반복문
C언어와 같으니 생략
배열과 반복문과 html의 list태그를 가져와서 출력해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while(i < coworkers.length){
document.write('<li>'+ coworkers[i] +'</li>');
i += 1;
}
</script>
</ul>
</body>
</html>
'책 리뷰 > 생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| 17일차 - 객체 1 (0) | 2024.01.18 |
|---|---|
| 16일차 - 함수 (0) | 2024.01.17 |
| 14일차 - 자바스크립트 입문4 (0) | 2024.01.15 |
| 13일차 - CSS 기초 (0) | 2024.01.12 |
| 12일차 - 자바스크립트 입문2 (1) | 2024.01.11 |
댓글 영역