JAVASCRIPT
-
setTimeoutJAVASCRIPT 2022. 2. 28. 13:38
setTimeout(function() { 실행할코드 }, 몇ms초 /*1000이 1초*/); 이런 식으로, 사용하며, 몇초 후 코드를 실행하게 해주세요 할 때 사용한다. 그리고 function이 들어간 콜백함수자리엔 setTimeout(함수이름,1000); function 함수이름() { console.log('안녕') }; 이런 식으로, 미리 만들어 둔 함수를 사용할 수 있다. 그리고, 몇초 후가 아니라 몇초 마다 코드를 실행할게요 하는 것도 있다. 이럴땐, setInterval을 사용한다. setInterval(function() { 실행할코드 }, 몇ms초); 이렇게 사용하면 몇ms초 마다 코드를 실행해주세요 가 된다. 만약, 타이머를 삭제하고 싶다면, var 타이머이름 = setTimeout(함..
-
TypewritingJAVASCRIPT 2022. 2. 21. 22:07
위처럼 버튼을 누르면 글자가 일정 시간마다 하나하나 나오는 애니메이션을 만들어보자. 버튼 abcde var h1태그 = document.getElementById('text'); var 글자 = document.getElementById('text').innerHTML; 먼저, 편하게 js를 작성하기 위해 h1태그와 안에 글씨를 각각 변수로 만들고, $('#btn').on('click',function() { // $('#text').html(''); h1태그.innerHTML = ''; for (let i = 0; i < 글자.length; i++) { setTimeout(function() { h1태그.innerHTML = h1태그.innerHTML + 글자[i]; }, 500 * i); }; });..
-
hammer.js 또는 js의 터치이벤트JAVASCRIPT 2022. 2. 21. 13:20
터치&드래그에 관련된 라이브러린 hammer.js를 이용한다. 호환성도 좋아서 사용하기 좋다고한다. hammer.js의 CDN이다. hammer를 이용해서 저번에 만든 캐러셀을 드래그해서 넘기는 기능을 구현해보자. ⟨ ⟩ 이 html을 이용한다. 그리고 먼저 js셀렉터로 기능개발할 요소를 찾아준다. var 이미지1 = document.querySelectorAll('.slide-box')[0]; //이미지1은 드래그 할 대상을 담은 변수 var 매니저 = new Hammer.Manager(이미지1); 매니저.add(new Hammer.Pan({ threshold: 0 })); //어떤 이미지를 hammer로 작동할건지 매니저를 만들어(new Hammer.Manager 이용) //add를 이용해 등록한다...
-
Scroll UIJAVASCRIPT 2022. 2. 18. 13:40
스크롤되면서 뒤로 희미하게 없어지는 UI를 만들어보자 먼저, 카드container를 만들면서 시작한다. .card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px; } .card-box img { display: block; margin: auto; max-width: 80%; } .card-box { position: sticky; top: 100px; margin-top: 200px; transition: all 0.2s; } 위처럼 scroll가능하게 card-background에 높이를 3000px만큼 준다. 그리고 margin을 위아래 적당히 준 뒤, img에 display: block를 주고, 넓이를 주고, margi..
-
ajaxJAVASCRIPT 2022. 2. 17. 13:35
ajax란 서버에서 데이터를 요청해서 받아오는데 새로고침 없이 받아오는 것을 말한다. 서버는 접속자가 요청을 하면 데이터를 갖다준다. 요청이란 -- GET요청 : URL을 입력해서 요청함(읽기) POST요청 : 정보들을 숨겨서 요청함(로그인 시, 블로그 글 발행시) (쓰기) 따라서 ajax란 서버에다가 GET/POST 요청을 할 수 있게 도와주는데 새로고침없이 요청할 수 있음을 뜻한다. ajax요청 방법에는 (jQuery 의 $.ajax() / axios의 axios.get() / 쌩자바스크립트의 fetch() ) 이렇게 있다. Ajax 요청은 제이쿼리를 사용해야 편하다. 방법은 $.ajax({ url: 'http://naver.com', type: 'GET' }); 이런 식으로, 사용하면 된다. 위는 ..
-
DOM의 개념과 이벤트리스너 ready, loadJAVASCRIPT 2022. 2. 16. 13:19
DOM은 Document Object Model이다. HTML을 조작하려면 HTML을 자바스크립트가 해석할 수 있는 문법으로 정리하는 작업이 필요하다. 예를 들면, 안녕하세요 이런 div가 있을때 조작하려면 document.querySelector(저div).innerHTML="안녕" 이렇게 조작하는데 자바스크립트가 이 div를 조작하려면 컴퓨터에서 div를 미리 object자료형으로 정리해놓는다. var document = { div태그 : { style : {color : 'red', width : '100%'} innerHTML : '안녕하세요' } } 이렇게 object 자료에 정리를 해놔야 하며, 이걸 document object라고 부르며 뒤에 model을 붙여 DOM 이라고 부른다. 그냥 자..
-
데이터 바인딩 연습과 sort,map,filter등 분류 함수JAVASCRIPT 2022. 2. 15. 01:54
데이터 바인딩 연습을 하기 위해서 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 이런 세개의 박스 컨테이너 html을 짠 후, 여기에 자바스크립트에 있는 데이터를 가져다 박아넣을 수 있다. var products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; $('.title').eq(0).html(products[0].title); $('.price').e..
-
인터렉티브 폼 (input,change이벤트, HTML동적생성, forEach반복문)JAVASCRIPT 2022. 2. 11. 17:05
폼의 기본 형태를 만들어보자. 상품선택 바지 셔츠 사이즈선택 95 100 105 쇼핑몰과 같은 곳에서 어떤 것을 선택하면 사이즈가 나오게 끔 하는 UI이다. 사이즈선택 div박스는 평소엔 안보여야 하므로 .size-select { display: none; } 먼저 display: none을 준다. 이제 자바스크립트로 select 인풋에서 셔츠라는 값이 선택되면 밑에 사이즈 선택 UI를 보여주게 짜야하는데 이럴때 쓰는 input이벤트 change이벤트가 있다. change이벤트는 select가 바뀔 때, input태그는 안에 값을 입력하고 focus를 잃을 때 발동된다. input이벤트는 select가 바뀔 때, input태그는 안에 하나하나 값이 입력될 때 마다 발동된다. $('#option1').on..