📝 과제: "나만의 미니 주소록" 만들기
목표: HTML 화면에 입력창을 만들고, 자바스크립트로 데이터를 관리하여 화면에 보여주는 프로그램을 작성해 보세요.
[단계별 힌트]
1단계: HTML 구성하기
- 이름을 입력할 수 있는 <input> 태그와 '추가하기' <button> 태그를 만드세요.
- 결과가 출력될 빈 <ul id="addressList"> 태그를 하나 만들어 두세요.
2단계: 데이터 저장하기 (배열)
- 전역 변수로 빈 배열 let myAddressBook = [];을 하나 선언하세요.
- 버튼을 클릭했을 때 실행될 함수를 만들고, 그 안에서 input에 적힌 값을 가져와 배열에 추가해 보세요.
3단계: 화면에 그리기 (DOM)
- 배열에 데이터가 추가될 때마다, document.createElement("li")를 사용해서 새로운 목록 태그를 만드세요.
- 만들어진 li 태그의 innerHTML에 배열의 값을 넣고, addressList의 자식 요소로 붙여보세요 (appendChild 사용).
4단계: 객체로 업그레이드 (클래스/JSON)
- 단순히 '이름'만 넣지 말고, name과 age를 묶어서 하나의 객체(또는 클래스)로 배열에 저장해 보세요.
- 화면에 출력할 때도 "이름: 00, 나이: 00" 형태로 예쁘게 나오게 해보세요.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="name" placeholder="이름 입력" size="20">
<input type="number" id="age" placeholder="나이 입력" size="20">
<button type="submit" onclick="btclik()">제출</button>
<!-- 결과 쌓기 -->
<ul id="listArea"></ul>
<script type="text/javascript">
let address =[];
function btclik() {
let name=document.getElementById("name").value;
let age=document.getElementById("age").value;
console.log('name');
let human ={
"humanname":name,
"humanage" :age
}
address.push(human);
let li = document.createElement("li");
li.innerHTML = "이름: " + name + ", 나이: " + age;
document.getElementById("listArea").appendChild(li);
};
function push() {
}
</script>
</body>
</html>