Hjin Blog

switch문은 주어진 표현식을 평가해 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case 문은 상활을 의미하는 표현식을 지정하고 콜론으로 마친후 그 뒤에 실행할 문들을 위치시킨다. switch 문의 표현식과 일치하는 case 문이 없다면 실행 순서는 default 문으로 이동한다. (선택사항으로 사용할 수도 있고 사용하지 않을 수도 있음) 응용) document.querySelector('#quiz').addEventListener('click',function(e){ e.target.innerHTML switch(e.target.innerHTML){ case '와이프': alert('와이프를 사랑하시네요') break case '부모님': alert('부모님을 사랑하시네요'..

다음과 같이 구매버튼을 만들고 구매 버튼을 눌렀을때 해당 상품명이 로컬스토리지에 담기도록 기능을 구현해보자 $('.buy').click(function(e){ var title = $(e.target).siblings('h5').text(); if(localStorage.getItem('cart') != null){ var 꺼낸거 = JSON.parse(localStorage.cart); 꺼낸거.push(title); localStorage.setItem('cart',JSON.stringify(꺼낸거)); } else { localStorage.setItem('cart',JSON.stringify([title])); } }); 위 코드에서 siblings란 해당 요소의 형제요소를 찾아주는 기능을 한다. ..

크롬 개발자도구의 Application 탭에 들어가면 위 화면과 같이 Storage탭을 볼수있다. Local Storage 와 Session Storage는 key : value 형태로 문자, 숫자 데이터를 저장할 수 있고 5MB까지만 저장이 가능하다 Local Storage 는 브라우저 재접속 하더라도 데이터가 영구적으로 남지만 Session Storage는 브라우저를 끄면 데이터가 날라간다. (휘발성) Indexed DB : 크고 많은 구조화된 데이터를 DB처럼 저장가능, Cookeies : 유저 로그인정보 저장공간 Cache Storage : html, css, js, img 파일을 저장해두는 공간 로컬스토리지 사용법 localStorage.setItem('name', 'ha') //저장 local..

먼저 DOM 이란 Document Object Model 이라는 뜻이다. 자바스크립트는 HTML 조작에 특화된 언어이다. HTML과 자바스크립트는 다른언어인데,자바스크립트가 HTML을 조작할 수 있는 원리는 무엇일까. 다음과 같이 자바스크립트는 태그를 알아듣지 못한다. 자바스크립트가 HTML 조작을 하기위해서는 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환하여야 한다. (HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아 사용) 브라우저는 HTML 페이지를 열어줄 때, HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아준다. ex) var document = { div1 : { style : {color : 'red'} innerHTML..

array 자료를 정렬할때 또는 원하는 값만 필터할수 있는 기능을 살펴보자. sort() var 어레이 = [7,3,5,2,40]; 어레이.sort(function(a, b){ return a - b }); console.log(어레이); return 옆에 있는 a - b는 array안의 자료들이다. return 오른쪽 값이 양수면 a를 오른쪽으로 정렬 return 오른쪽 값이 음수면 b를 왼쪽으로 정렬 그리고 array 안의 자료들을 계속 돌려 a,b에 넣어준다. ex) a와 b가 7과 3일 경우 7 - 3 = 4 이다 4는 양수이기 때문에 7(a)를 3(b)보다 오른쪽으로 보내준다. 그래서 숫자 오름차순 정렬이 완성되는 것이다. sort() (내림차순) var 어레이 = [7,3,5,2,40]; 어레..

더보기 버튼을 눌렀을때 get요청을 해서 상품 3개를 array로 보내 상품을 추가하는 기능을 만들어 보자. 더보기 // html 생성 함수 function tempcode(getdata){ getdata.forEach((a, i)=>{ var temp = ` ${a.title} 가격 :${a.price} 구매 `; $('.row').append(temp) }); } var countmore = 0; $('#more').on('click',()=>{ countmore++; // 2회 이상 누르면 더보기 버튼이 사라짐 if(countmore { tempcode(data); }) } if(countmore >= 2){ $('#mor..