개발자의 끄적끄적

[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기 Scenario: Ajax를 이용하여, 특정 Html 요소 불러오기 그 Html 파일내에 특정 태그 요소만 불러오고자 함 Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게 태그요소만 불러올것인가?? 나는 ajax name:value를 뒤져봤는데 아무리봐도 나오지 않았다. 결국 jquery 메소드를 통해 해결 할 수 있엇다. 총 소스는 (아래) 메뉴 보기 1 메뉴 보기 2 : main 에서 불러올 html 파일 중 식 메 뉴 짜장면 짬뽕 기스면 탕수육 메뉴를 골라주세요. 출처 : https://unordinarydays.tistory.com/90

[javascript] swiper 예제 CSS .swiper-container { width:620px; height:420px; } .swiper-slide { text-align:center; display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */ align-items:center; /* 위아래 기준 중앙정렬 */ justify-content:center; /* 좌우 기준 중앙정렬 */ background-color:#fff; border:5px solid silver; border-radius:5px; box-shadow:0 0 10px silver inset; box-sizing:border-box; /* 이 설정을 하지 않으면 슬라이드드가 틀어짐 */ /* 아래에 있는 실행..

[JavaScript] $(document).on과 $(document).ready의 차이 1. 첫 번째 문제 : click() 이벤트 선언과 소스 불러오기 jQuery 셀렉터를 이용해서 버튼 클릭 이벤트를 만들어 주고 싶었는데 될 때가 있고 안 될 때가 있었다. 이 문제는 간단 했다. html 소스를 두 개의 파일로 분리해서 사용하고 있었는데, 버튼이 있는 파일이 로드가 되기 전에 클릭이벤트를 선언해버리니, 인식을 못하고 있는 것이다. 해결방법: $(document).ready() 그래서 이때 나는 $(document).ready() {} 안에 클릭이벤트를 써서 해결하였다. 근데 이렇게 해서 사용하다보니, 또 문제가 발생하였다. 2. 두 번째 문제 : 동적으로 생성되는 html 소스에 대한 click(..

[제이쿼리/jQuery] 요소 갯수 구하기 .length 요소 갯수 구하기 $("selector").length; 요소 갯수를 구하는 함수는 2가지 ( length 와 size() ) 있습니다. 현재는 3.0 버전부터 size() 함수가 사라졌기때문에 이후버전부터는 length 를 사용합니다. 사용예는 아래와 같습니다. HTML definition (특히 사전에 나오는 단어나 구의) 정의 (어떤 개념의) 의미[정의] 선명도 term 용어,말 (지속되는・정해진) 기간 기한, 만기 JS var length = $("dl").length; $("#cnt").html("정의목록 갯수 : "+ length).css("background-color","yellow"); 결과 출처: https://javacpro.t..

[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제 checked 여부 확인 1 2 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ checked/unchecked 처리 1 2 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제..

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, SetTimeout() [펌] 자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다. # setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다. setTimeout(function() { // Code here }, delay); 위 함수는 보통 두 개의 인자를 설정하여 사용합니다. i. 호출될 콜백함수 i..

[jQuery] Ajax 기초 [펌] Ajax 기초 Ajax란? Asynchronous JavaScript and XML 의 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다. 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미. 선행지식 폼 $.ajax(settings) jQuery를 이용한 ajax통신의 가장 기본적인 API 주요속성 data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타..

[javascript/api] 네이버 지도 api 연동 시작하기 [펌] 회사 프로젝트에서 네이버 맵을 연동하게 되었습니다. 아직은 기획단계인지라 갑 회사님께서 네이버 맵 말고도 다른 맵을 사용하게 될 것 같은 기분도 듭니다. 이번 글에서는 네이버 맵 api의 가격 정책, 연동 과정 등을 정리해보고자 합니다. 네이버 개발자 센터에 맵 api를 사용하려 접속해보니 API 서버도 변경되었고, 가격 정책도 2020년 부터는 어찌될지 모르는 상태인듯 합니다. 그리고, 기존 V2 API를 쓰던 분들은 기존에 쓰던 서비스를 변경하셔야 할듯 해보입니다. https://developers.naver.com/notice/article/10000000000030663434 위 url 을 접속해서 확인해보시면 많은 내용들 중..