[6/15 일반] JavaScript 기초/ 실습 - (실습) 유용한 JS 기능 구현하기 1

박재준·2022년 6월 15일
0
post-thumbnail
  1. 학습한 내용

1) 필기 내용

  • 자바스크립트에서 배열은 리스트의 특징을 갖고 잇다
    배열 vs 리스트
    배열 : 연속된 공간을 다룸. 변수를 각각 선언하게 되면, 메모리(ram)상에 임의의 위치에 저장됨(마음대로 저장할 수 없음). 어느 한 공간에 어느 크기가 필요하면 연속된 공간에 배열 형태를 받음(중간에 사라지더라도 배열은 존재) → 효율적 측면에서는 낭비적, 편리한 점은 배열의 각 저장공간은 번지 수이므로, 데이터들이 어디있는지 알 수 있음 / ex) 초콜릿 상자
    리스트 : ex) 맛집을 기다리는 줄 / 메모리 공간이 줄였다가 늘렸다가

  • for문은 반복할 개수가 정해져 있음, 하지만 리스트는 계속 변할 수 있으므로 for문에서 신중하게 정해야함

  • concat : 추가적으로 배열에 붙이는 형태 → 원본에 영향을 미치지는 않음
    .join() : 나뉘어져있던 배열들이 합쳐져서 나오게하는데, 그 사이에 특징을 만들 수 있음
    unshift: 앞에 추가
    push: 끝에 추가

  • live dom viewer : 관련 홈페이지(https://software.hixie.ch/utilities/js/live-dom-viewer/)
    실시간으로 dom 작성된 것을 볼 수 있는 페이지

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0615 / 배포 / DOM / 01.dom.html ~ 02.acessDom.html 관련 결과 이미지

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0615 / 배포 / DOM / 03.showBig.html

<!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/product.css">
</head>
<body>
	<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>
			
			<div id="detail">									
					<hr>
					<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/showBig.js"></script>
</body>
</html>

0615 / 배포 / DOM / js / showBig.js

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);
}

→ 결과(아래 그림)

→ 그림을 선택할 경우 위에 나타나게 됨

→ bigPic와 smallPics의 변수를 html(#cup(아이디), .small(클래스)를 호출하여 저장하고

→ changePic 함수를 설정 : newPic은 this(여기에) src 속성이고, bigPic에 setAttribute를 통해 속성을 바꿈(새로 설정함)(src → newPic 으로)

→ for문을 통해서 click하면, changePic을 실행시키는 addEventListener 기능을 사용

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0615 / 배포 / DOM / 04.product.html

<!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/product.css">
</head>
<body>
	<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>
</body>
</html>

0615 / 배포 / DOM / js / product.js

		var isOpen = false;
		var bigPic = document.querySelector("#cup");  
		var smallPics = document.querySelectorAll(".small");  

		for(i=0; i<smallPics.length; i++) {
			smallPics[i].addEventListener("click", function() {
				newPic = this.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;
			}
		});

→ 결과(아래 그림)

→ 상세 설명 보기 버튼을 누르면, 아래의 상품 상세 정보들이 나옴
→ addEvenetListener를 통해 click을 하면, function이 작동하게 만듬
→ function의 내용으로서, if문(isOpen이 false이면 → #detail의 style.display를 block으로 설정 & innerHTML를 통해 상세 설명 보기를 상세 설명 닫기로 변경 & isOpen을 true로 설정) / else면 그 반대(= 상세 설명 닫기 버튼을 누르면, 아래의 상품 상세 정보들이 다시 없어짐)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0615 / 배포 / 배열 / index.html

<!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>

0615 / 배포 / 배열 / checklist.js

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();
}

→ 결과(아래 그림)

→ function addList중, item 변수를 #item의 value값으로 설정
→ 만약 item이 null값이 아니면, itemList 끝에 item 내용을 추가
→ 그래서 위의 addBtn 변수를 #add(button 타입) 호출하는 것으로 저장하고,
→ addBtn의 추가라는 글을 누르게 되면(click) addlist를 작동시키는 addEventListener 기능 사용

→ showList 함수식 : list 변수를 ul태그로 저장 & for문을 통해 li태그로서 itemList를 순차적으로 불러오고, 그 옆에 close라는 클래스를 span태그에 붙이면서 .close 클래스 불러옴(css파일인, list.css)
→ 관련 list.css 내용 :

.close {
  position:absolute;
  right:0;
  top:0;
  padding:12px 16px;
  border:none;
  background:rgba(255,255,255,0)
}
.close:hover {
  background-color:#007acc;
  color:white;
}

→ 밑의 remove(삭제)하는 과정도 위와 비슷함

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0615 / 배포 / 배열 / quiz-2.html

<!-- 좋은 글귀를 배열에 저장해두고 배열에 있는 내용 중 하나를 무작위로 화면에 표시하는 프로그램  -->
<!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>
	<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script" rel="stylesheet">
	<style>
			body {
				font-family:'Nanum Pen Script', "맑은 고딕";
				padding-top:20px;
				font-size:2.5em;
				text-align: center;
			}
		</style>
</head>
<body>
	<script src="js/quiz-2.js"></script>
</body>
</html>

0615 / 배포 / 배열 / js / quiz-2.js

// 배열에 추가할 글귀 목록 
// 배열이름: quotes
// 랜덤표시: Math.floor, Math.random() 활용

var quotes = ["당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.",
            "성공하는 사람은 실패하는데 익숙한 사람이다.",
            "후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.",
            "가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.",
            "성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.",
            "인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.",
            "'언젠가'라는 날은 영원히 오지 않는다.",
            "문제점을 찾지 말고 해결책을 찾으라.",
            "착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.",
            "자존심은 어리석은 자의 소유물이다"];


var index = Math.floor(Math.random() * quotes.length);
document.write("<p>&quot;" + quotes[index] + "&quot;</p>")

→ 결과(아래 그림)

→ console창에 quotes를 입력하게 된다면, 랜덤으로 글귀를 가져옴

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  1. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) quiz-1... 계속보고, 영상 다시 봐도, 뭐 어케 작동하는지 도대체 모르겠다..
2) 다른 것들도 너무 복잡해서... 점차 멘붕 오는듯

  1. 해결방법 작성

1) 김희연 강사님께서 말씀하셨다... "계속 복습하면서 친해지는 것 & 내가 스스로 작성해보면서 기억에 많이 남기는 것..." → 복습 그리고 복습이 답...!

  1. 학습 소감

1) ... 이런 표현이 맞는지는 모르겠지만, TO할 것 같음

profile
초급 개발자

0개의 댓글