JavaScript
-
자바스크립트 Ajax(XMLHttpRequest) 예제 및 정의!JavaScript 2015. 11. 26. 10:17
이글을 쓰게된 계기는 특정 value의 중복체크 같은 기능을 이용시 비동기 처리로 결과값을 노출하고자 할때 Spring의 @ResponseBody 와 Jquery의 Ajax 를 사용하지 않고 순수 자바스크립트 로 구현해보다가 재미있기도 하고 결과값에 만족해서 공유하고자 작성하게 되었습니다 ㅎㅎ 개발환경 ● JDK 1.8 ● 이클립스(version : Mars) 위 사진 처럼 "중복체크" 버튼을 클릭시 Ajax를 통해 결과값을 노출시켜 보도록 하겠습니다 ㅎㅎ xhr 이라는 변수에 XMLHttpRequest() 객체를 할당 후 각종 프로퍼티를 이용하는 방식인데요 ㅎㅎ POST 방식을 이용하지 않고 GET 방식을 이용했다는점 !! (놓치지마세요) GET을 사용했다고 해서 자랑할려고 하는것이 아닙니다.. 유의사..
-
-
자바스크립트 카카오스토리 공유하기!JavaScript 2015. 6. 25. 18:33
https://developers.kakao.com/docs/js 1. 해당 URL 접근 2. JavaScript 개발가이드 - 카카오스토리 공유 이동 ★ 표시한 부분을 기억해주세요!! 검색해보시면 알겠지만 예전에는 복잡한 소스 였지만 카카오톡에서 간편하게 사용할 수 있도록 플러그인을 만들었습니다. ( 키 생성하는 방법은 생략하겠습니다 ) 제 개발 환경에 맞게 다음과 같이 적용후 웹 에서 테스트를 해보았습니다. 3. 웹 밑줄 친 부분은 재미+ 타이틀 태그의 표현입니다. 전 카카오스토리로 공유하기 할 경우 특정 콘텐츠의 제목 및 썸네일 을 링크할 것 입니다. 모바일 웹 + 모바일 앱에서 테스트를 아무리 해도 3.웹 사진 처럼 썸네일 제목에는 아무런 반응이 없을 것입니다. og 의 관한 자세한 설명은 htt..
-
제이쿼리 성능향상을 위한 팁!JavaScript/Jquery(제이쿼리) 2015. 6. 14. 18:40
jQuery Proven Performance Tips And Tricks퍼포먼스 향상 패턴을 사용하는 것이 왜 중요한가요?프로그램 코드는 간단 명료해야지 엉성하게 만들면 안됩니다.좋은 코딩 습관은 문제를 해결하는데 적합한 방법을 제공합니다.퍼포먼스에 좋은 패턴을 사용하지 않고 코딩을 한다면 브라우저가 그 만큼 일을 더 많이 하게 됩니다.더 많은 일 = 더 많은 메모리 사용 = 느린 프로그램..퍼포먼스 향상 Tip 1항상 최신 버전의 jQuery를 사용하세요가능하다면 항상 최신 버전의 jQuery를 사용하세요최신 버전은 이전 버전에 비해 성능이 향상되고 버그가 수정된 경우가 많습니다.jQuery 파일을 최신 버전으로 교체해도 문제가 생기는 경우는 많지 않은편입니다.퍼포먼스 향상 Tip 2셀렉터를 어떻게 ..
-
제이쿼리 toggleClass()JavaScript/Jquery(제이쿼리) 2015. 5. 10. 18:08
toggleClass() 엘리먼트의 CSS 클래스를 확인해서 이미 존재하는 클래스는 제거하고 존재하지 않는 클래스는추가한다. addOrRemove 매개변수의 지정 여부에 따라 서로 추가하기만 하거나 제거만 하게끔 지정할 수 있다. input text를 클릭 시 색깔이 바뀌도록 하는 예제 입니다. 처음 클릭시 normal 이라는 클래스가 h1태그에 생기므로 초록색으로 바뀔것입니다. 다시 한번 클릭 할 경우 normal 이 제거되어 색상이 검정색으로 바뀌게 됩니다. class 추가 혹은 삭제 시 다중으로도 가능하니 이점 알아주시기 바랍니다!!
-
자바스크립트 JSON.parse & JSON.stringify 메소드JavaScript 2015. 5. 8. 18:15
JSON.parse() : JSON형식의 문자열을 자바스크립트 객체로 만든다. JSON.stringify() : 자바스크립트 객체를 JSON형식의 문자열로 만든다. // JSON.stringify / JSON.parse 비교 // Object; var testJSON = { "이름": "홍길동", "직업": "디자이너", "코딩": "공부" }; var stringify = JSON.stringify(testJSON); // 자바스크립트 객체를 JSON 문자열로 변환; var parse = JSON.parse(stringify); // JSON 문자열을 자바스크립트 객체로 변환; console.log(stringify); // => {"이름":"홍길동","직업":"디저이너","코딩":"공부"} conso..
-
자바스크립트 attachEvent & addEventListenerJavaScript 2015. 5. 3. 21:06
빨간줄 addEventListener은 - 표준 브라우저(IE9, 파이어폭스, 오페라, 사파리, 크롬) - 이벤트는 event명파란줄 attachEvent은- IE8 이하 및 오페라 인자 넘길 시 view sourceprint?01function AddEvent(a, b) {02 var div = document.getElementById("div");03 if(div.addEventListener) {04 div.addEventListener("click", function(a, b) { test(a, b); }, false);05 } else {06 div.attachEvent("onclick", function(a, b) { test(a, b); });07 }08}09 10function test(..
-
자바스크립트 Call By Value & Call By ReferenceJavaScript 2015. 4. 30. 16:14
Call By Value자바스크립트에서 함수를 인자를 처림함에 있어문자열, 숫자등과 같은 데이터를 함수에 인자로 넘겨줄 경우 함수내에서 값을 바꾸더라도 호출 프로그램에는 반영되지 않는다. var Global = "global value";function test(a) { a = "local value";console.log(a); // local value 출력}test(Global); // global value 출력 Call By Reference인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달된다. var Global = new Array("one","two"); function test(a) { a[a.length] = "three";} test(Global); // one, two, thre..