자바스크립트-7일차
학습한 내용
JavaScript 기초/ 실습 - (실습) 유용한 JS 기능 구현하기 1
1. 배열 array
- 비슷한게 list, 큰 차이는 없다
- 배열은 각 변수를 선언하면, 메모리 상의 임의의 공간(연속된 공간)에 저장이 됨
- 중간 자리에 데이터가 사라졌다해도 빈 형태로 공간이 남아있음
- 따라서 메모리 측면에서는 낭비가 될 수도 있음.
- 시작 번지를 알고 있다면 다음 데이터가 어디있는지 알 수 있는 장점은 있다
- 길이 length는 1부터 시작, 인덱스는 0부터 시작
- 배열은 for문하고 잘 맞고, true와 false는 while과 if문에 잘 맞다
리스트
중간 자리가 빈 다면, 크기가 줄어 듬
데이터가 늘어났다 줄었다가 가능, 메모리가 동적으로 늘었다 줄었다 가능
성질의 차이는 있지만, 자바스크립트에서는 배열이라고 부른다.
array 객체
- 배열에 활용하는 많은 속성과 함수가 미리 정의되어 있는 객체
- 소괄호를 이용해 만듬
Array 객체의 주요 함수
- 둘 이상의 배열을 연결하는 concat( ) 함수
- 뒤에 연결되어 이어 붙음
- 앞에 나와있는 것이 기준
- 연결되었다고 해서 데이터가 연결하기 전 데이터가 바뀌는 것은 아님 (원본에 영향을 미치지 않음)
- 배열 요소를 연결하는 join( ) 함수
- 하나로 연결이 됨/ 데이터를 하나로 모음
- '-'을 가지고 연결하면 중간에 넣을 수도 있음( 다른 표기도 가능)
- 새로운 요소를 추가하는 push( ) 함수와 unshift( ) 함수
- push( ) 함수 : 배열의 맨 끝에 요소 추가
- unshift( ) 함수 : 배열의 맨 앞에 요소 추가
- 배열에서 요소를 추출하는 pop( ) 함수와 shift( ) 함수
- pop( ) 함수 : 배열의 맨 뒤에 있는 요소 추출
- shift( ) 함수 : 배열의 맨 앞에 있는 요소 추출
- 원본에 영향을 미침
-
원하는 위치의 요소를 삭제/추가하는 splice( ) 함수
-
원하는 위치의 요소들을 추출하는 slice( ) 함수
- 여러 개의 요소를 추출하는 함수
- 원래 배열에는 영향 없음
1) 시작 인덱스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
2) 시작 인덱스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출
실습1. 배열에 있는 모든 요소를 더한 결과를 배열의 끝에 추가
for문, push 활용
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);
}
실습2. 좋은 글귀를 배열에 저장해두고 배열에 있는 내용 중 하나를 무작위로 화면에 표시
Math.floor, Math.random() 활용
Math.floor(버림)/
quotes.length(10) - 확장 고려, 변화가 예상되면 리터널보다는 length활용하는 것이 좋음
새로고침하면 계속 바뀜
// 배열에 추가할 글귀 목록
// 배열이름: quotes
// 랜덤표시: Math.floor, Math.random() 활용
var quotes = ["당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.",
"성공하는 사람은 실패하는데 익숙한 사람이다.",
"후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.",
"가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.",
"성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.",
"인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.",
"'언젠가'라는 날은 영원히 오지 않는다.",
"문제점을 찾지 말고 해결책을 찾으라.",
"착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.",
"자존심은 어리석은 자의 소유물이다"];
var index = Math.floor(Math.random() * quotes.length ); // 확장 고려하여 quotes.length
document.write("<p>"" + quotes[index] + ""</p>")
실습3. 여행 준비물 점검 목록
html파일
<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> 자바스크립트 구성
1. 물건들이 들어갈 배열 만들기
2. 이벤트 만들기
3. 챙길 물건을 배열에 추가 - 텍스트 필드 사용
4. 추가한 물건을 목록 형태로 표시 - for문
5. x를 누르면 삭제하기
// 1. 배열 만들기
var itemList = [];
// 2. 클릭 이벤트 만들기
var addBtn = document.querySelector("#add");
addBtn.addEventListener("click", addList); //addBtn.onclick = addList
// 3. 추가하는 작업
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();
}
// 4. 목록 보여주기
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()실행
}
}
// 5. 삭제하는 작업
function removeList(){
var id = this.getAttribute("id"); //클릭한 삭제 버튼의 id값을 가져온다 .
itemList.splice(id, 1);
showList();
}
원하는 목록 삭제 가능
2. DOM 문서 객체 모델
- 자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것
DOM 트리
- DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분
- 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 DOM 트리
- dom 트리 구조 파악할 수 있는 곳
https://software.hixie.ch/utilities/js/live-dom-viewer/
실습4.
getElementById()
- id 선택자를 사용해 접근하기
- id는 하나만 사용 가능하니 Element
getElementsClassName()
- class 선택자를 사용해 접근하기
- class는 여러 개 사용 가능하니 Elements
배열에서 인덱스를 불러오듯이 여러개 있을 때도 []를 사용하여 적용가능 - 이런 부분은 for문을 활용할 수도 있음
getElementsByTagName()
- 태그 이름을 사용해 접근하기
querySelector(), querySelectorAll()
- id, class, tag 다 써도 됨
- id는 #, class는 . , 태그 이름은 기호 없음
- id 는 하나만 사용 가능하니 querySelector()
- 이미지 경로를 가져오고, 바꾸기도 가능
실습5. 선택한 이미지 표시
html파일 구조
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div> 자바스크립트를 통해 클릭 시 이미지 바꾸기
var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small"); //작은 이미지를 노드리스트로 가져옴
for (var i= 0; i< smallPics.length; i++){
smallPics[i].addEventListener("click", changePic);
}
function changePic(){
var newPic = this.src; //click이벤트가 발생한 대상의 src 속성
bigPic.setAttribute("src", newPic); // src바꾸기
}
아래 작은 이미지 클릭 시, 맞는 이미지로 변경
실습6. 상세 설명 보기/닫기 버튼
<a href="#" id="view">상세 설명 보기</a>위와 같은 html의 a 태그의 id를 생각하여 자바스크립트 작성
var isOpen = false;
var view = document.querySelector("#view");
view.addEventListener("click", function(){
if (isOpen == false){ //상세정보가 안 보임 -> 보이게 처리
document.querySelector("#detail").style.display = "block";
view.innerHTML = "상세 설명 닫기";
isOpen = true;
}
else{ //상세정보가 보임 -> 안 보이게 처리
document.querySelector("#detail").style.display = "none";
view.innerHTML = "상세 설명 보기";
isOpen = false;
}
});- 안 보이고 있다면 보기에 처리하기 위해 display를 block으로 변환.
- 여기서 끝내는 것이 아닌, 보이고 있기에 isOpen = true로 변경
- 보이고 있을 때는 안 보이게 처리하기 위해 display를 none으로, isOpen 도 다시 false로 변환해 준다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
해결방법 작성
학습 소감
아직 기초 부분의 기능들을 접하고 있지만, 코딩을 많이 해보지 않아서, 언제 어떻게 써야할지 감이 잘 안 잡힌다. 학습한 예제와 실습, 과제만이 아닌 다른 사람이 한 코드나 예제들을 많이 접해봐야 자연스럽게 코딩이 될 것 같다.
또한, 자바스크립트에서만 고민하는 것이 아닌 html구조에서도 id값이나 class를 어떻게 두고 div로 어떤 영역을 어떻게 만들어 줄지도 중요한 것 같다.
예비 프론트엔드 개발자