본문 바로가기
728x90
반응형

javascript, jQuery14

[Vue] Vue 개발을 위한 환경 설치(Node.js, VS Code, Lite server, Git) 1. Nodejs.org로 가서 LTS를 다운로드 한다. (https://nodejs.org/en/) 2. 다운받은 파일 설치를 진행한다. 3. 명령 프롬프트를 띄워서 Node.js가 설치되었는지 확인한다. > node --version 4. 에디터를 설치한다. 에디터는 VS Code를 사용할 것이다.(https://code.visualstudio.com/) 위 링크를 타고 다운을 받는다. 에디터는 본인이 편한 편집기를 사용하면 된다. 5. Lite Server(개발 서버) 설치(https://github.com/johnpapa/lite-server) 위의 깃헙 사이트에서 Global Installation 섹션의 명령어를 실행한다. > npm install --global lite-server 6. 크.. 2021. 10. 7.
[jQuery] 체크박스 전체 선택, 전체 해제, 모든 항목 체크 시 전체 선택 체크박스 선택되게 하기 간만에 하는 jQuery 포스팅. 바로 본론으로 가봅시다. $(document).ready(function() { $("#cbx_chkAll").click(function() { if($("#cbx_chkAll").is(":checked")) $("input[name=chk]").prop("checked", true); else $("input[name=chk]").prop("checked", false); }); $("input[name=chk]").click(function() { var total = $("input[name=chk]").length; var checked = $("input[name=chk]:checked").length; if(total != checked) $("#cbx_chk.. 2021. 5. 27.
[javascript/jQuery] 짝 맞추어 카드 뒤집기 게임 안녕하세요. 이번 포스팅은 재밌는 포스팅을 좀 해보려고 합니다. 초기 게임판 모습입니다. 크게는 화면 구성은 두 영역으로 나뉩니다. (1) 게임판 영역 (2) 게임 참가자 및 스코어 영역 버튼은 두 가지가 있습니다 [시작] : 게임을 시작하는 버튼 [추가] : 참가자를 추가하는 버튼. [추가] 버튼을 누르면 동적으로 참가자 목록을 확장할 수 있습니다. 동시에, [삭제] 버튼도 나옵니다. [삭제] 버튼을 누르면 해당 행의 참가자가 지워집니다. 우선 큰틀을 잡기 위해 html 태그와 css 작성을 해보겠습니다. ※ html 태그 A B C D E 게임판 게임 참가자 등록 (최소 인원 : 2명) 이름 : 이름 : ※ CSS 이제 본격적으로, 게임 구현에 가장 중요한 자바스스크립트를 구현해보도록 하겠습니다. 먼.. 2021. 5. 25.
[jQuery] 제이쿼리로 id값 받기 $(document).ready(function() { $("li").click(function() { var id = $(this).children("a").attr("id"); }); }); 첫번째 두번째 2021. 4. 15.
[API/javascript] 구글 차트 API - jstl 데이터 필터링 안녕하세요. 이번 포스팅은 구글 차트 API를 다뤄보겠습니다. 아래는 구글 차트 사이트인데요 developers.google.com/chart Charts | Google Developers Interactive charts for browsers and mobile devices. developers.google.com 바로 본론으로 넘어가겠습니다. 일단 구글차트를 사용하려면 스크립트를 불러올수 있도록 해야합니다. head 부분에 구글차트를 로드해줍니다. div를 예쁘게 만들어주기 위해서 CSS Style 도 만들어 놓겠습니다. body부분의 div도 만들어 줍니다. body밑에 스크립트를 만들어줍니다. body 밑에 만드는 이유는, 스크립트가 다 불러와지고 그 다음에 div를 만들면 늦더라구요.. 그.. 2021. 4. 13.
[API] Chart.js CDN 붙여넣기/ 다운로드 안녕하세요 이번 포스팅은 Chart.js를 사용하는 내용을 다뤄보겠습니다. Chart JS 홈페이지 : www.chartjs.org/ (1) 사용 준비 - 1. CDN Chart JS를 사용하기 위해서는 다운받거나 jQuery처럼 CDN을 붙여야 합니다. cdnjs.com/libraries/Chart.js △△△ 위 사이트에서 CDN을 복사해서 붙여넣을 수 있는데요 하지만 이걸 여러번 붙여야하니 귀찮을 따름입니다. 어떤 분이 하나만 붙여서 CDN을 사용하던데 좋아보이더라구요. 위의 소스를 붙였습니다. 실행이 잘 되더라구요 :) - 2. 다운로드(npm) 저는 npm을 이용해서 다운받았습니다. npm이란 Node Package Manager 의 줄임말인데요. nvm을 설치하면 npm 명령어를 사용할 수 있.. 2021. 4. 5.
728x90
반응형