본문 바로가기

JS

 (14)
장바구니 기능과 localStorage 변수는 새로고침 할때 마다 값을 초기화 하기때문에 영구적으로 데이터를 저장하기에는 적합하지 않다. 개발자 도구로 들어가면 Application 탭에 들어가보면 브라우저 저장공간이 있다. Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능, object 형태와 비슷) Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법이 좀 더럽) Cookies (유저 로그인정보 저장공간) Cache Storage (html css js img 파일 저장해두는 공간) Local Storage / Session Storage localStorage.setItem('이름','kim') //자료 저장하기 localStorage.removeIt..
DOM이라는 용어 개념정리 & load 이벤트 html 을 제어하는 js 는 html 그대로 쓰면 에러가 남. 안녕하세요 이런 html 을 var document = { div1 : { style : {color : 'red'} innerHTML : '안녕하세요' } } 이런식으로 object로 저장한다. 정리하면 DOM은 js가 html에 대한 정보를 (id,class,name, style 등) object 자료로 정리한것 브라우저는 위에서 부터 읽기 때문에 코드위치에 따른 에러가 발생 할 수 있다. 하지만 js 실행을 미루는 코드로 html을 모두 읽고 js를 실행시키는 방법도 있다. $(document).ready(fuction(){실행코드}) load 이벤트 리스너 DOM 생성뿐만 아니라 이미지, css, js 파일이 로드 됐는지 체크 가능 ..
array에 자주 쓰는 sort, map, filter 함수 var 어레이 = [2,3,1,8,7]; //그냥 sort는 문자를 오름차순으로 해줌, 숫자를 오름차순으로 할려면 다음 같이 해야함 어레이.sort(function(a,b){ return a-b }) // 다음연산이 양수면 a를 오른쪽으로, 음수면 b를 오른쪽으로 // 이렇게 모든 원소를 비교해 오름차순을 만든다 내림차순이면 b-a 를 하면된다. var product = [ {id: 3, price: 15000, title: 'Leather Blazer'}, {id: 4, price: 55000, title: 'Yoga Leggings'}, {id: 5, price: 30000, title: 'Sleeveless Racer'} ] // 다음 데이터를 가격순으로 정렬 product.sort(function..
Ajax 웹툰을 보고 싶다 웹툰서버에 웹툰의 데이터를 요청 데이터의 url 기재함 GET 요청하면 웹툰 데이터줌 (가까운 GET요청으로는 브라우저 위에 주소창이 있음) GET - 데이터를 읽을 때 POST - 데이터를 보낼 때 (form 태그 사용) 다음 요청을 하면 페이지가 새로고침이 된다 ajax - 새로고침 없이 데이터를 주고 받을 수 있음 $.get('https://codingapple1.github.io/hello.txt').done(function(data){ console.log(data) }); 다음같이 GET 요청을 했다 그럼 다음 url 에 있는 데이터를 가져온다 (처음에 계속 오류가 났는데 jquery를 slim 버전이라 발생했다. 아닌 버전으로 다시 깔면됨) $.post('https://co..
array, for 반복문 실력향상 과제 출석부 출석부를 주고 함수에 이름을 입력해서 있으면 있다고 출력 var 출석부 = ['흥만','영희','철수','재석']; function 출석(이름){ 출석부.forEach(function(a){ if (a == 이름){ console.log('있어요') } }) } 함수에 출석을 부를사람을 파라미터로 넣고 출석부를 반복해서 그 입력된 사람을 찾는다. 구구단 출력 for (var i = 2; i b) { console.log('굳') } else { console.log('재수 레츠고') } } 이번 시험점수를 배열로 입력받고, 추가로 저번 시험평균을 입력받아 두 평균을 비교해 답을 출력하는 코드 처음 총합을 forEach내에서 선언하여 오류가 떴음 변수의 범위에 대한 공부좀 해야할듯
Select 상품선택 모자 셔츠 //선택지 옵션선택하면 추가 Select 만들기 모자 셔츠 사이즈 95 100 이렇게 추가로 select를 만들고 선택되는 이벤트를 감지하는 onchange 함수를 이용한다. 그래서 그 함수에 기존에 사이즈함수에 있던 class에 css display:none 을 때어달라고 하면된다. function changeSelect(){ $('.size').eq(0).removeClass('size') } 이 방법은 내가 처음에 생각한 방법인데 이렇게 하면 안된다. 사이즈를 보여준다는게 특정 항목을 선택했을때인데 내가 사용한 onchange 함수는 어떤항목이든 변화를 감지하는것이다. 사이즈가 없는 항목도 선택시 뜨기때문에 잘못된 코드이다. if문을 이용해 사용자가 선택한 항목을 가져와 비교하면..
Array 와 Object 자료형 Array 여러가지 데이터를 한 변수에 저장해 사용할때 사용함 var car = ["포르쉐","전기차",20000000]; car[1] // "전기차" 데이터 접근은 접근은 파이썬이랑 같은 (인덱싱) Object var car2 = {name : '소나타', price:'50000'} car2['name'] //'소나타' key로 value에 접근한다. key와 value 를 가짐 파이썬의 딕셔너리와 비슷한듯 Object 와 Array 자료가 순서대로있는지 아니면 자료에 이름이 있는지 차이 Object는 순서의 개념이 없음(인덱싱 안됨) *데이터 꺼낼때 콘솔 찍으면서 자료형이 무엇인지에 유의 Sever-Side rendering 서버에서 완성된 html 파일은 client에 보냄 서버가 귀찮 Client..
이벤트 버블링과 이벤트관련 함수들, 응용과 dataset 특정이벤트를 사용(class 추가,삭제등) 같은 방식을 사용해야하고 html 위치 아래 코드 작성해야함 이벤트 버블링 이벤트가 상위 html로 퍼지는 현상 로그인하세요 전송 닫기 다음 코드를 예시로 보자 ''black-bg" 클래스를 가진 div 추가로 하위의 div가 있다 만약 "white-bg"에 이벤트가 발생할시에 그 이벤트가 상위 html "black-bg" 까지 퍼지는 것이다. 이벤트관련 함수들 document.querySelector('.black-bg').addEventListener('click',function(e){ e.target; //유저가 실제로 누른거 e.currentTarget //이벤트리스너 달린 곳 this; e.preventDefault(); //이벤트의 기본동작 막아줌 ..

티스토리툴바