1.학습한 내용
1.Array(배열)
-
배열에 활용하는 많은 속성과 함수가 미리 정의되어 있는 객체
-
둘 이상의 배열을 연결하는 concat()함수
-concat()함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars배열에는 영향을 주지 않음
-
join()함수 : 배열 요소를 연결
-지정한 구분 기호를 사용해 배열 요소 연결
-구분 기호를 지정하지 않으면 쉼표로 구분
-
push()함수 : 배열의 맨 끝에 요소 추가
-
unpush()함수 : 배열의 맨 앞에 요소 추가
-
pop()함수 : 배열의 맨 뒤에 있는 요소 추출
-
shift()함수 : 배열의 맨 앞에 있는 요소 추출
-
추출한 요소가 반환됨
-
splice()함수 : 원하는 위치의 요소를 삭제/추가
-
괄호 안에 들어 있는 인수에 따라 일정 구간의 요소를 삭제하고 새로운 요소를 추가하는 함수
-
splice()함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 결과값으로 표시
-
인수 1개: 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제
-
인수 2개: 첫번째 인수는 인덱스이고 두번째 인수는 삭제할 개수
-
인수 3개: 첫번째 인수는 해당 배열에서 삭제를 시작할 위치, 두 번째 인수는 삭제할 개수, 제한 위치에 새로 추가할 요소. 기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면 삭제할 개수를 지정한 두번째 인수에 0을 넣는다
-
여러 개의 요소를 추출하는 함수
-시작 인덱스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
-시작 인덱스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출
컴퓨팅적 사고를 통한 여행준비물 점검 프로그램
var itemList = [];
var addBtn = document.querySelector("#add"); // 추가 버튼
addBtn.addEventListener("click", addList); // addBtn을 클릭하면 addList 함수 실행function addList(){
var item = document.querySelector("#item").value; //텍스트 필드 내용을 가져오기
if(item != null){
itemList.push(item); // itemList 끝에 item 내용 추가
document.querySelector("#item").value = ""; // id = "item"인 요소의 값을 지움
document.querySelector("#item").focus(); // 텍스트 필드에 focus() 메서드 적용
}
showList(); // 목록을 표시하는 showList()함수 실행
}function showList(){
var list = "<ul>"; //목록을 시작하는 ul태그 저장
for(var i=0; i < itemList.length; i++){ //배열 요소마다 반복
list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>"; //요소를 li로 묶음
}
list += "</ul>"; //목록을 끝내는 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); // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
showList(); // 변경된 itemList 배열을 다시 화면에 표시
}배열에 있는 모든 요소를 더한 결과를 배열의 끝에 추가하는 프로그램
var numbers = [2, 4, 6, 8, 10];
var sum = 0; // 합계를 저장할 변수 선언, 초기화(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);
}좋은 글귀를 배열에 저장해두고 배열에 있는 내용 중 하나를 무작위로 화면에 표시하는 프로그램
var quotes = [
"당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.",
"성공하는 사람은 실패하는데 익숙한 사람이다.",
"후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.",
"가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.",
"성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.",
"인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.",
"'언젠가'라는 날은 영원히 오지 않는다.",
"문제점을 찾지 말고 해결책을 찾으라.",
"착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.",
"자존심은 어리석은 자의 소유물이다"];
var index = Math.floor(Math.random() * quotes.length);
document.write("<p>"" + quotes[index] +""</p>")2. 문서 객체 모델 DOM
-
자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리
-
DOM 트리
-DOM은 웹 문서의 요소를 부모/자식 요소로 구분
-
DOM 트리의 노드
-웹 문서의 태그는 요소(Element)노드로 표현
-태그가 품고있는 텍스트는 해당 요소 노드의 자식 노드인 텍스트노드로 표현
-태그의 속성은 모두 해당 요소 노드의 자식 노드인 속성(Attibute)노드로 표현
-주석은 주석(Comment)노드로 표현 -
getElementById() : id선택자를 사용해 접근
-
getElementsClassName() : class선택자를 사용해 접근
-
getElementsTagName() : tag 이름을 사용해 접근
-
querySelector(), querySelectorAll()
상품 미리보기
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<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>
<div id="desc">
<ul>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2019.06.17</li>
<button>장바구니 담기</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<hr>
<div id="detail">
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
<script src="js/product.js"></script>-
태그 속성에 접근하기 및 수정하기
-
선택한 상품 이미지 표시
-
DOM에서 이벤트 처리
-html태그 안에서 이벤트 처리기 연결
-DOM요소에 이벤트 처리기 연결
-addEventListener()사용하기
① 이벤트 유형 : 처리할 이벤트 유형 지정.“on”을 붙이지 않는다.
② 함수 : 이벤트가 발생했을 때 실행할 명령 또는 함수
③ 캡처 여부 : 이벤트를 캡처링할지 여부. 기본 값 fals
-
이미지 가져오기
var isOpen =false;
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);
}
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;
}
});2. 학습한 내용 중 어려웠던 점
어제 제대로 이해하지 못한 부분들이 있어서 계속 걸렸는데 오늘 강의에서 배울 수 있어서 아주 좋았다. 논리인 사고를 해야하는 부분들이 많아서 아예 제로인 상태에서 만드는게 쉽지 않을 것 같다. 이것도 결국엔 반복, 여러번 해보는 것 말고는 답이 없는 것 같다.
3. 해결방법
코드는 익숙해지고, 반복하는 것 말고는 방법이 없는 것 같다. 그러는 중에 자꾸 자꾸 발전하고 변해가는 좋은 방식들을 습득해서 사용해 나감으로써 실력을 늘리는게 유일한 길인 것 같다.
4. 학습소감
논리에 대해 좀 익숙해지고 편하게 생각할 수 있는 부분들이 필요한 것 같다. 잘 모르겠던것을 배워서 풀어나가는 부분이 갈수록 좋아지는 것 같다. 반복, 숙달을 좀 더 신경써서 해봐야겠다.
괜찮은데라는 생각이 드는 간단한 프로그램들을 하나씩 만들어보는 재미가 있는 것 같다.
