0x.프로그래밍/Web
-
0x04.슬라이드 구현0x.프로그래밍/Web 2017. 7. 26. 18:22
0x04.슬라이드 구현 자바스크립트와 제이쿼리를 활용하여 간단한 슬라이드를 구현해보았다. 절대 코딩은 쉬운편이 아니다.. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 11..
-
0x03.무한 스크롤0x.프로그래밍/Web 2017. 7. 12. 11:20
0x03.무한 스크롤 창을 밑으로 스크롤하면 끝이 나지 않는 무한 스크롤이다.(무슨 말을 하는거야?? ㅋㅋ 쉽게 말해 페이스북같은거임) 첨에 어흥!!!이라는 문자는 내려가는 걸 확인하기 위해 적음. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 $(document).ready(function(){ //스크롤 이벤트 감지 $(window).scroll(function(){ var scrollHeight=$(window).scrollTop() + $(window).height(); var documentHeight=$(document).height(); //창의 크기랑 비교 if(scrollHeight==docu..
-
0x02.간단한 게시판 만들기0x.프로그래밍/Web 2017. 7. 12. 10:53
0x02.간단한 게시판 만들기 제이쿼리를 활용하여 키보드 이벤트를 활용하여 게시판을 작성하였다. 만약 글자수가 100이 넘어가면 파란색으로 글자 수 표시부분이 변경된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 $(document).ready(function(event){ //keyup -> 키보드 뗄 때 이벤트 발생 $('textarea').keyup(function(){ //글자 수 구함 var inputLength=$(this).val().length; var wrote=inputLength; //문서에 입력 $('h1').html(wrote); if(wrote>=100){ ..
-
0x01.J-query 활용하여 캔버스에 그림그리기0x.프로그래밍/Web 2017. 7. 4. 14:42
0x01.J-query 활용하여 캔버스에 그림그리기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 $(document).ready(function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); $(canvas).on({ mousedown: function (event) { var position = $(this).offset(); var x = event.pageX - position.left; var y = event.pageY - position.top; context.beginPath(..
-
0x00.자바스크립트로 화면에서 움직이는 글자 만들기0x.프로그래밍/Web 2017. 6. 13. 16:11
0x00.자바스크립트로 화면에서 움직이는 글자 만들기 아래의 코드를 실행하면 위와 같이 알파벳들이 화면을 마구마구 돌아다니는 풍경을 볼 수 있음.. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 //랜덤 정수 생성 function nextRandomInteger(limit){ return Math.round(Math.random()*limit); } //랜덤 알파벳 리턴 var alphabe..