전체 글

우리가 쇼핑몰에서 검색을 할때, 낮은 가격 순으로 정렬할때가 있다. → sort 또는, 3만원 이하의 상품만 보고 싶으면 3만원 이하를 필터로 걸때가 있다. → filter 혹은 글로벌 쇼핑몰에서 물건을 살때 (달러=>원화) 로 바뀌어서 가격을 등록해야 할때가 있다. →map sort var 어레이 = [7,3,5,2,40]; 어레이.sort(function(a, b){ return a - b }); console.log(어레이) sort 함수는 문자열을 기준으로 정렬한다. 따라서, 수를 기준으로 정렬하고 싶다면, 위의 코드처럼 짜야 한다 참고로, sort 함수는 원본을 변형시키는 함수다. 1. a, b는 array 안의 자료들입니다. 2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다. 3...

서버란?유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버에 데이터를 요청할 때는 1. 어떤 데이터인지 url로 잘 기재해야하고 2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내야함 (GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용, POST요청은 서버로 데이터를 보내고 싶을 때 사용) AJAX란?서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX $.get('https://codingapple1.github.io/hello.txt') .done(function(data){ console.log(data) }) .fail(function(error){ console.log('실패함')..

저번 게시물에서 일일이 html 을 수정할 수 없다고 했다. 이번에는 자바스크립트로 html 다루는 방법을 알아보겠다. 자스로 html 만드는 방법은 두가지가 있다. 1. document.createElement() - document.createElement() 쓰면 html 자료를 하나 생성해줍니다. - 그걸 맘대로 조작한 다음 appendChild() 써서 아무데나 넣으면 html이 생성됨 2. 문자자료로 html을 만든 다음, insertAdjacentHTML() 안에 넣기 이게 좀더 편리함. 번외편으로 제이쿼리 버전도 있슴 제이쿼리가 제일 쉬운듯? 상품선택 모자 셔츠 바지 95 100 이건 html이고, 이 위에다가 자바스크립트로 element를 생성, 삭제, 변경 등을 해보겠다. //자바스크립..

원래는 셔츠와 모자가 있는데, 그중 셔츠를 선택하면 사이즈 옵션이 나오도록 만들거임. 부트스트랩은 기본 설치래 0. 먼저 html, css를 만들어둔다 1. 셔츠를 선택하면 사이즈 옵션이 뜨도록 만든다 (반대로, 미리 form-hide 클래스를 부착해둔뒤, 클릭하면 떼버리는 형식으로 만들기) 상품선택 모자 셔츠 95 100 하지만, 이런식으로 미리 html, css를 만들어놓으면 확장성이 부족하다. 실제 쇼핑몰에서는 재고가 사이즈별, 상품별 다르게 들어오는데, 날마다 html 코드를 수정하는 것은 불가능. 따라서, 자바스크립트를 이용하여 html 코드를 만들어보겠다~~ 다음게시물 클릭해주새여

0. 부트스트랩틀을 가져온다. 1. 데이터에 해당하는 키값을 (가격,상품명등)을 자바스크립트로 조작해줌 2. 배열안에 객체가 있는 경우에는, 배열안에서 그 객체의 순서를 먼저 찾고, 키를 찾는다 products[i]['title'] Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기

이벤트 버블링이란? 이벤트 전파 라고도 하며, 하위태그를 누르면 상위태그까지 이벤트가 전파되는 현상 마치, 겹친 종이의 가장 가운데를 누른것처럼 1. 이벤트 버블링은 항상 일어남 2. 이벤트 관련 기능들을 사용해서 해결할 수 있음 다양한 이벤트함수들 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; //실제 클릭한 요소 알려줌 (이벤트 발생한 곳) e.currentTarget; //지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음) e.preventDefault(); //실행하면 이벤트 기본 동작을 막아줌 e.stopPropagation(); //실행하면 내 상위요소로의 이벤트 버블링..

헤드 안에 스크립트로 부트스트랩 깔아주고, 적당하게 탭기능 틀을 만들어주었다 원하는 것은 탭버튼을 눌렀을때 그에 해당하는 콘텐츠div가 등장하는것 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 차곡차곡 한글로 쓴뒤 코드로 번역해준다 //0번째 tab-button부터 기능개발 해보자 /*버튼 0 누르면 (코드를 한줄한줄 읽으니까 제거먼저 하고 추가해주는 센스~) - 모든버튼에 붙은 orange 클래스명 제거 - 버튼 0에 orange 클래스명 추가 - 모든 div에 붙은 show 클래스명 제거 - div0에 show 클래스명 추가 */ $('.tab-button').eq(0).on('click',fu..

//스크롤바 100px 이상 내리면 로고폰트사이즈 줄이기, 단 100px 미만이면 다시 키우기 window.addEventListener('scroll',function(){ if(window.scrollY > 100){ $('.navbar-brand').css('font-size','15px'); }else{ $('.navbar-brand').css('font-size','25px'); } }); 상자박스의 스크롤을 다 내렸을때, 알림을 띄우려면? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque place..