JavaScript Onclick Event(온클릭 이벤트) 4년 전 온클릭 이벤트 사용법도 매우 쉽고 의외로 많이 사용하는 온클릭 이벤트(HTML DOM)다. DOM Events 중에서 Click 버튼으로 팝업창을 열거나 모달 창으로 안내하는 방식 등 일반 쇼핑몰에서 아주 많이 사용되는 형식이다. 예시의 경우는 워낙 많아서 그중에 개인적으로 귀여운 버튼을 한번 만들어봤다. What is the time? What is the time? 1. HTML 에서 사용법 2. JavaScript 에서 사용법 object.onclick = function(){myScript}; 3. addEventListener() 를 사용했을 때 object.addEventListener("click", myScript); 참고로 드랍다운 버튼도 onclick으로 구현할 수 있다. 스타일을 지정..

JavaScript 3초마다 모달창으로 "Hello" 구현하기 4년 전 Window setInterval() Method Click the button to wait 3 seconds, then alert "Hello". After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever... setInterval(function(){ alert("Hello"); }, 3000); Try it Parameter Description function Required. The function that will be executed milliseconds Required. The intervals (in milliseconds) on how often to execute ..

JavaScript [JavaScript] 버튼 클릭 제어 4년 전 자바스크립트 마크업 언어 스타트 클릭킹 이를 통해 버튼 클릭을 제어할 수 있으며, 깔끔하게 실행할 수 있다.

JavaScript Simple Slider(JQuery) 심플한 슬라이더 4년 전 Simple Slider 매우 쉽게 슬라이드를 구현할 수 있다. 한글 폰트를 설정하지 않았으므로, 실제로 적용할 때는 한글 폰트 정도 수정해주고 이미지에 텍스트를 작성하고 싶다면 왼쪽 상단의 텍스트를 수정해주면 된다. 아래는 적용된 예시 이미지다. 이미지를 왼쪽에서 오른쪽으로 밀어내는 방식이다. .setInterval로 자동 슬라이드 방식이 구현되었다. Slide #1 Sub-title #1 Slide #2 Sub-title #2 Slide #3 Sub-title #3 Slide #4 Sub-title #4 Slide #5 Sub-title #5 ▶ ◀ /*GLOBALS*/ * { margin: 0; padding: 0; list-style: none; } #slider-wrap { width: 100%..

JavaScript 제이쿼리를 해야하는 이유 4년 전 자바스크립트와 제이쿼리 선택자의 간편함 제이쿼리를 해야 하는 경우가 점점 많아진다. 좋은 걸까 싶으면서도 가끔씩 밀려오는 살인적인 일정에 정말 짜증이 날 때도 많다. 가뜩이나 더운데, 확실히 예전보다 살아가는 것이 더 힘들다는 생각이 든다. 이제는 뭔가 열심히 하더라도 항상 벽이 있는 것 같고, 개미지옥 같은 생활에서 과연 빠져나올 수 있을까 하는 생각이 든다. 그러다 보니, 일이 재밌을 리가 없다. 그래도 공부를 게을리할 수는 없다. 하루에 공부했던 것을 잊지말고 복습하는 시간과 정리하는 시간을 항상 가지려고 노력한다. 아무리 생각해도 왜 이렇게 만들었는지 모를 자바스크립트와 제이쿼리의 문법에 대해서 고민이 많을 수밖에 없다. 알다시피 제이쿼리의 선택자는 $( )이다. 처음엔 몰랐다. 이게 얼마나 간편..

JavaScript 탑버튼(topbtn) DOM 위치값 계산 4년 전 탑버튼(topbtn) DOM 위치값 계산 $(function(){ var thisTopButton = $('.btn_top'); $(window).on('scroll',function(){ var thisScrollTop = $(this).scrollTop(), thisWindowHeight = $(this).height(), thisPageHeight = $('#wrap').height(), thisFooterHeight = $('#footer').height(), btnFixedPoint = 0; btnFixedPoint = thisPageHeight - (thisWindowHeight + (thisFooterHeight)); if (thisScrollTop >= btnFixedPoint) { thi..