이번 피드에서는 Ajax를 사용하면서 사용하는 옵션값 2개를 정리해보겠습니다. 이번 피드를 확인하기전에 간단한 Ajax에 대한 기본적인 정리가 필요하신 분은 아래의 URL을 참고해주세요. 2020/10/11 - [노빠꾸 개발일지/JQUERY & JAVASCRIPT] - [Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post) [Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post) 1. Ajax란? Ajax(Asynchronous Javascript and XML)는 비동기 방식으로(페이지의 전환 없이)..

체크박스 체크박스는 공통된 카테고리의 값들 중 여러개의 값을 선택해야 할때 주로 사용됩니다. 이번 피드에서는 체크박스의 기본 폼과 선택, 해제, 체크된 값을 가져오는 방법을 알아보겠습니다. 1. 체크박스 기본 폼 1 2 3 4 5 6 1 2 3 4 Colored by Color Scripter cs 위의 코드는 체크박스의 기본 형태코드입니다. 그리고 코드 밑에 이미지는 실행결과 화면 입니다. 태그에 type값을 checkbox로 입력해주면 체크박스가 생성되게 됩니다. 체크박스를 생성해 name, value값을 컨트롤하여 사용하면 되겠습니다. 2. 체크박스 체크(선택) / 체크박스 해제 1 2 3 4 5 6 7 8 9 10 1 2 3 4 $("input:checkbox[id='one']").prop("ch..

라디오 버튼 라디오버튼의 기본 폼과 선택, 해제, 선택된값 불러오기 등을 정리해보겠습니다. 1) 라디오버튼 기본 폼 1 2 3 4 5 6 One Two Three Four Colored by Color Scripter cs 위의 코드는 라디오 버튼의 기본 폼과 코드 실행 결과입니다. 태그에 type값을 radio로 설정해주면 라디오버튼이 생성되게 됩니다. 그 다음 name값을 지정해주고 value값을 지정해주어 radio버튼을 컨트롤 해줄 수 있습니다. 2) 라디오 버튼 선택/해제 이제 라디오 버튼의 기본 폼을 알아봤으니, 선택/해제 동작을 알아보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 One Two Three Four // 라디오버튼 Three 체크 $("#three").prop..

1. Ajax란? Ajax(Asynchronous Javascript and XML)는 비동기 방식으로(페이지의 전환 없이) http통신을 통해 데이터를 주고받으며, http통신을 통해 데이터를 업데이트 시켜 주며, 화면의 일부분을 최신의 데이터로 리프레쉬 시켜줄 수 있는 개발방식입니다. 2. Ajax 기본 형태 1 2 3 4 5 6 7 8 9 $.ajax({ type: "get", // http 타입 url: "/ajaxTest", // 호출 URL data: "", // URL호출시 보낼 파라미터 데이터 dataType: "json", // http 통신 후 응답 데이터 타입 success: function(res){ // Ajax통신 성공 후 실행 함수 console.log("success :: "..

이번 피드에서는 Json데이터에 대해 알아보겠습니다. 우선 간단히 Json데이터가 무엇인지 살펴보겠습니다. Json데이터는 key-value 쌍으로 이루어진 데이터입니다. Json데이터의 기본 포멧은 아래와 같습니다. 1 2 3 4 5 { "name": "Kim", "age": 25, "address": "Seoul" } cs 살펴보면 데이터가 {} 괄호로 쌓여있고, 데이터는 "key 값" : "value 값" 이런식으로 표현되게 됩니다. Json데이터는 대표적으로 Ajax서버통신에 많이 사용되기 때문에, 자주 사용하게되는 데이터입니다. 이제 본격적으로 사용방법에 대해 알아보겠습니다. 1. Json데이터 파싱 Json데이터를 파싱에 관련된 함수는 2가지가 있습니다. 각각, 데이터를 Json데이터로 파싱해..

이번 피드에서는 배열의 기본 사용방법을 알아보겠습니다. 배열생성, 배열 초기화, 배열을 0으로 초기화, 배열에 특정값을 넣어 초기화, 배열에 값을 입력, 삭제하는 방법입니다. 1. 배열 생성(배열초기화) 배열을 생성, 초기화하는 방법은 매우 간단합니다. 우선 코드로 확인해 보겠습니다. 1 2 3 4 5 6 7 8 // 배열 기본 선언 var arr1 = []; var arr2 = new Array(); // 배열 값을 넣어 초기화 var arr3 = [1,2,3,4,5]; // 결과값 : [1,2,3,4,5] var arr4 = new Array(5); // 결과값 : [] => length가 5인 배열 생성 var arr5 = new Array(1,2,3,4,5); // 결과값 : [1,2,3,4,5]..

프로젝트를 진행하다보면 날짜타입의 값을 거의 빼먹지않고 사용하게 됩니다. 이렇듯 많이 쓰이는 날짜함수를 정리해보겠습니다. 1. 초기화 날짜함수의 초기화 방법은 간단합니다. 아래 코드와 같이 new Date(); 를 사용해 주면 됩니다. 그런데, 결과값으로 오늘 날짜가 노출되기는 하는데 직관적으로 알아보기 힘든 값입니다. "Wed Oct 07 2020 23:31:20 GMT+0900 (대한민국 표준시)" 이 값을 그대로 사용하기는 보다는 보기 쉽게 바꿔서 표현해 주는게 좋겠습니다. 그럼 다음단계에서 형변환에 대해서 알아보겠습니다. 1 var today = new Date(); // Wed Oct 07 2020 23:31:20 GMT+0900 (대한민국 표준시) cs 2. 형변환(타입변환) 날짜를 필요한 용..

프로젝트 진행 중 css, js파일을 수정하게 되는 일이 많습니다. 이때 코드 수정을 완료하고, 화면을 확인할때, 브라우저가 수정하기 전 css/js파일을 캐싱하고 있으면, 코드를 아무리 수정해도 변경된 코드가 반영이 되지 않을때가 있다. 이때 코드에는 문제가 없지만 화면에 적용이 안된 상황을 보고, 괜히 코드를 수정하는 불상사가 발생할 수 있습니다. 이를 방지하기 위한 방법이 여러가지가 있는데, 1. 수동으로 브라우저 캐시를 삭제한다. 2. 크롬 시크릿모드로 테스트 한다. 3. jsp파일에서 스크립트 사용시 뒤에 version이나 날짜를 붙여준다. ex) 해당 방법은 css, js, img파일 모두 동일하게 적용이 가능한 방법입니다. 개인적으로 혼자만 테스트를 진행하는 경우는 1, 2번 방법으로 하더라..

D3.js는 데이터를 기반으로 문서를 조작하기위한 Javascript 라이브러리입니다. D3는 HTML, SVG, CSS를 사용하여 데이터에 생명을 불어 넣는데 도움이 됩니다. 웹 표준에 대한 D3의 강조는 강력한 시각화 구성요소와 DOM(문서 개체 모델) 조작에 대한 데이터 기반 접근방식을 결합하여 독점 프레임워크에 묶이지 않고도 최신 브라우저의 모든 기능을 제공합니다. D3를 사용하는 방법은 2가지가 있습니다. 라이브러리 파일을 직접 다운로드 받거나, CDN을 이용하는 것입니다. 1. 직접다운로드 직접 다운로드는 d3메인페이지에서 최신 d3라이브러리 파일을 다운받을 수 있습니다. d3js.org D3.js - Data-Driven Documents D3 is a JavaScript library fo..

jQuery의 .ready()함수에 대해 포스팅해 보겠습니다. .ready() 함수는 Dom이 완전히 로드되었을 때 실행 할 함수를 지정합니다. 즉, html화면이 다 그려진 후 실행할 함수를 입력하는 부분입니다. 이 함수에서 주로 화면에 필요한 초기화작업을 진행하게 됩니다. .ready() 함수는 아래 두가지 방법으로 사용할 수 있습니다. 1 2 3 $( document ).ready(function() { // Handler for .ready() called. }); cs 1 2 3 $(function() { // Handler for .ready() called. }); cs 더욱 자세한 내용을 참고하시고 싶으시면, 아래 jQuery 공식 문서를 참고해주세요! 출처 - api.jquery.com/..