코딩애플

서버란?유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버에 데이터를 요청할 때는 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..

이미지 슬라이드 만드는 순서는 다음과 같다. 1. 먼저 html 과 css로 이미지를 만들어준다. 2. 자바스크립트로 버튼을 누르면 화면이 옮겨지는 기능을 추가한다 참고로, 아래 기능은 화면이 흘러넘칠때 자동으로 생기는 스크롤을 없애준다 -html 1 2 3 -javascript css 에서 클래스를 탈부착하는 방식으로 화면을 이동시킬수도 있지만, 이동시키는 값 ( 'translateX(-100vw)' => 굵은글씨)을 항상 변화시키려고 하기 때문에 자바스크립트를 사용해보겠다 100vw는 현재브라우저 화면이 꽉찬 폭이다. 따라서 -100vw 면 현재 화면 폭만큼 왼쪽으로 이동한다는 의미이다 //1번 버튼 클릭시 1번사진이 보이는 transform 기능을 추가해주세요 $(".slide-1").on('cli..