꿈 많은 사람의 이야기

완성된 코드는 아래 github 주소에 있습니다! 도움이 되셨다면 좋아요와 깃허브 스타를 눌러주세요! 저에게 있어 큰 힘이 됩니다 ㅠㅠhttps://github.com/lsjsj92/django_todo_app 지난 포스팅까지 진행하면서 django에서 Ajax를 활용한 것을 보여드렸습니다. Ajax를 활용해서 checkbox 체크 여부에 따라 일정이 완료 되었는지, 완료되지 않았는지 바로바로 보여질 수 있도록 했죠 그러면 게시판 글쓰기, 수정하기, 삭제도 되고 Ajax를 활용해서 일정 완료 여부 기능까지 만들었는데요 이번 포스팅에서 뭘 할것이냐? 이 Ajax를 다시 사용해봅니다 그래서 일정의 우선순위를 만들어서 우선순위 별로 정렬되어 웹 화면에 출력이 되도록 할 것입니다! 먼저 DB에서 PRIORITY..

완성된 코드는 아래 github 주소에 있습니다! 도움이 되셨다면 좋아요와 깃허브 스타를 눌러주세요! 저에게 있어 큰 힘이 됩니다 ㅠㅠhttps://github.com/lsjsj92/django_todo_app 지난 포스팅까지 진행하면서 파이썬 장고를 활용해 todo 게시판 만들기 틀이 갖추어졌습니다. 게시판 삭제, 수정, 글쓰기, 상세보기와 날짜를 추가하는 과정도 넣었는데요 아무래도 웹 개발을 하다보면 Ajax를 많이 쓰기 마련입니다. AJax는 JavaScript의 라이브러리중 하나이죠~ 이것을 사용하면 자바스크립트를 활용해서 비동기 통신이 가능합니다. 여기서 비동기 방식이라는 것은 웹페이지를 reload(새로고침 등)하지 않고 데이터를 불러오는 과정을 뜻합니다. 즉 새로고침 과정이 필요없고 백단 서..

이번에는 펄을 이용해서 자바스크립트를 사용하는 방법에 대해 알아볼까합니다 펄에 자바스크립트를 적용하려면 당연히 웹 페이지로 제작을 해야겠죠? 간단하게만 사용해보고 넘어가겠습니다 사용 방법만 알면, HTML과 Javascript를 적용하실 줄 아시는 분들은 척척 하실 거라 생각되기 때문입니다~ 아마도 펄을 지금 보고 계신 분들은 기본적인 프로그래밍 지식이 있으신 상태에서 오셨을꺼라 생각하기 때문인데요 (왜냐하면 우리나라에선 perl을 먼저 배우지 않고, C, Java 같은 언어를 먼저 배우고 오고 또, 펄이 익숙한 언어는 아니라고 생각해서 입니다. ) 진짜 간단하게 사용방법만 설명하고 넘어가겠습니다~ 먼저 페이지 숨기기 기능이에요 이렇게 할 겁니다! 제 블로그 순서대로 따라 오셨다면 웹 페이지에 출력하시는..

자바스크립트로 폰트 변경 등의 효과를 넣어보자! 아래 사진 처럼말이다 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 Title var zoom = function(demo){ //함수 호출 -> 인자값으로 아이디를 받는다. demo.style.color = 'red'; demo.style.fontSize = '34pt'; }; window.onload = function () { var h = document.getElementById('hideBtn'); var op = document.getElement..

자바스크립트의 배열은 객체이다. 무늬만 배열이다. 자바스크립트 배열은 2가지가 있다. 1. 일반적 배열 리터럴인 var a = ["aa", 123]; 2. var points = new Array(40, 100) 2가지의 방법이 있고 내부적으로 동일하다. 근데 2번 방법에는 조심해야할 문법이 있다. 위에 써져 있는 2번과 같은 형태는 40, 100이라는 값이 배열에 들어가있다. 하지만 만약 var points = new Array(40); 을 하면 배열 크기가 40인 객체를 생성하는 것이다. 이것을 조금 조심해야 한다! 그리고 자바스크립트에서 배열은 좀 특이한게 자바에서 배열은 String이면 String, int면 int만 가능했다. 하지만 자바스크립트에선 배열 요소가 달라도 상관없다. 문자열, 숫자,..

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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 12..

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 Document var index = 0; //이미지에 접근하는 인덱스 window.onload = function(){ slideShow(); } function slideShow() { var i; var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조 for (i = 0; i x.length) { index = 1; //인덱스가 초과되면 1로 변경 } x[index-1].style.display = "block"; //해당..

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 Document div#area{ font-size: 30px; } 시작단: 종료단: 구구단 출력 var area = document.getElementById("area"); //아이디가 area인 DOM(document object model, 문서 객체 모델) 생성(참조) var gugudan = ""; var btn = document.getElementById("sBtn"); btn.onclick = function(){ var start = Numbe..

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 Document #topMenu ul{ overflow: hidden; } #topMenu li{ width: 200px; height: 40px; border: 1px solid red; floa..

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 이미지갤러리 #imgGallery{ border: 3px solid orange; width: 300px; overflow: hidden } #imgGallery img{ width: 300px; } #smallImgs img{ float:left; width: 100px; } hr{ margin: 0; padding: 0; size:5px; } wi..