0615
Array 객체의 주요함수
둘 이상의 배열을 연결하는 concat() 함수
기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
concat() 함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars 배열에는 영향을 주지 않음(원본은 유지하면서 새로운 배열을 만듬)
실습
배열에 있는 모든 요소를 더한 결과를 배열의 끝에 추가하는 프로그램 js: for문, push 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>연습문제</title>
<style>
table, td {border:1px solid #ccc; border-collapse: collapse; margin-bottom:20px;}
td { padding:5px;}
</style>
</head>
<body>
<script src="js/quiz-1.js"></script>
</body>
</html>var numbers = [2, 4, 6, 8, 10];
var sum = 0; //합계를 저장할 변수 선언
for (var i=0; i<numbers.length; i++){
sum = sum + numbers[i]; //sum += numbers[i]
}
numbers.push(sum);
showArray(numbers);
function showArray(arr) {
var str = "<table><tr>";
for (var i=0; i<arr.length; i++) {
str += "<td>" + arr[i] + "</td>";
}
str += "</tr></table>";
document.write(str);
}
좋은 글귀를 배열에 저장해두고 배열에 있는 내용 중 하나를 무작위로 화면에 표시하는 프로그램
```여행 준비물 점검 프로그램
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>To do list</title>
<link rel="stylesheet" href="./css/input.css">
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form>
<input type="text" id="item" autofocus="true">
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div>
</div>
<script src="./js/checklist.js"></script>
</body>
</html>
var itemList = [];
var addBtn = document.querySelector("#add");
addBtn.addEventListener("click", addList); //addBtn.onclick = addList 로도 사용가능
function addList(){
//텍스트 필드 내용을 가져오기
var item = document.querySelector("#item").value;
if(item != null){
itemList.push(item); //itemList 끝에 item 내용 추가
document.querySelector("#item").value = "";
document.querySelector("#item").focus();
}
showList();
}
function showList(){
var list = "<ul>";
for(var i=0; i<itemList.length; i++){
list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";
}
list += "</ul>";
document.querySelector('#itemList').innerHTML = list; //list 내용 표시
//삭제버튼을 변수로 저장
var remove = document.querySelectorAll(".close");
for(var i=0; i<remove.length; i++){
remove[i].addEventListener("click", removeList); //요소를 클릭하면 removeList() 실행
}
}
function removeList(){
var id = this.getAttribute("id"); //클릭한 삭제 버튼의 id값을 가져온다
itemList.splice(id, 1);
showList();
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM에 접근하기</title>
<link rel="stylesheet" href="css/dom.css">
</head>
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
<div id="desc">
<h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
</body>
</html> 어려운점: 양이 너무 많아서 헷갈린다ㅠ
해결방법: 개인시간내서 반복학습
학습소감: 조금 따라가기 벅참
코딩