My Space

반응형

Development/JSP, JS, JQUERY → (28)건

  1. 함수 선언식 표현식(&화살표 함수) 2
    2023.09.08
  2. 안드로이드 아이폰 구분
    2022.08.01
  3. url 뒤에 붙는 파라미터 제거
    2022.07.24
  4. var은 함수 스코프!!
    2022.04.29
  5. form serialize
    2022.04.03
  6. 모달 팝업등에서 자식데이터 부모한테 가져오기
    2022.04.01
  7. textarea에서 엔터로 줄바꿈, 글자수 체크
    2022.02.19
  8. scroll 제어(현재 위치, 위치 이동 등)
    2022.02.19
  9. a태그의 텍스트 가져오기
    2022.02.19
  10. JQUERY 자동완성(autocomplete)
    2022.01.23
  11. 선택자에 클래스 존재 여부 확인
    2022.01.04
  12. 몇 초 후에 이벤트 발생(setTimeout)
    2021.10.27
  13. 전화번호 중간에 - 추가
    2021.10.06
  14. checkbox 관련
    2021.10.04
  15. 스크립트 날짜계산
    2021.09.30
  16. classList(속성 변경)
    2021.09.20
  17. 웹 스토리지(web storage)
    2021.09.13
  18. e.preventDefault(기본 동작을 중단)
    2021.09.13
  19. toggle(on/off)
    2021.09.13
  20. console.log(), console.dir() 차이 2
    2021.09.12
  21. getElementBy~ , querySelector 차이 (링크)
    2021.09.12
  22. 모바일기기 진동울리기(feat. javascript)
    2021.09.12
  23. jsp 내장객체(참고 링크)
    2021.08.16
  24. SPA와 여러 방식
    2021.04.29
  25. use strict(바닐라 js)
    2021.04.19
  26. script의 async와 defer 옵션의 차이
    2021.04.18
  27. JSON 개념 및 활용법(with Visual Studio Code)
    2021.04.18
  28. ajax로 받아온 데이터 jstl에서 사용하고 싶을때 4
    2021.04.10

함수 선언식 표현식(&화살표 함수)

함수 선언식 & 표현식 // 함수 선언식 function main() { } // 함수 표현식 const main = function() { } 함수 선언식의 경우 var 키워드와 마찬가지로 최상단으로 끌어올려져 호이스팅 현상이 발생한다. 즉, 아래의 코드가 정상적으로 동작한다는 것. main(); function main() { } 하지만, 함수 표현식의 경우 인터프리터가 해당 코드의 줄에 도달하였을때만 로드되어 호이스팅이 일어나지 않는다. 화살표 함수 화살표 함수는 es6에서 추가된 것으로, 함수 표현식을 더 간결하게 만들어준다. // 함수 표현식 const main = function() { console.log("hello"); } // 화살표 함수 const main = () => { conso..
Development/JSP, JS, JQUERY 2023. 9. 8. 20:37

안드로이드 아이폰 구분

자바스크립트에서 접속자의 브라우저 정보와 디바이스 정보를 가지고 있는 User-Agent 객체 사용. var varUA = navigator.userAgent.toLowerCase(); if (varUA.indexOf("android") > -1) { alert("aos"); } else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) { alert("ios"); } 추가로 모바일인지 아닌지도 구분 가능 deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Sil..
Development/JSP, JS, JQUERY 2022. 8. 1. 12:03

url 뒤에 붙는 파라미터 제거

ex) http://localhost:8080/notice?id=111&title=test 위의 스크립트를 추가하고 새로고침 해보면 아래와 같이 나타난다 http://localhost:8080/notice html5에서 추가된 기능이다. - history.pushState({데이터 객체}, 페이지 제목 변경, 바꿀 주소); : 새로운 주소목록을 추가 하기 때문에 이전 url의 주소가 남아있어 브라우저의 뒤로가기 버튼이 활성화 된다. - history.replaceState({데이터 객체}, 페이지 제목 변경, 바꿀 주소); : 동일한 기능을 하지만 주소목록에 추가하지 않기 때문에 뒤로가기 버튼이 활성화 되지 않는다.
Development/JSP, JS, JQUERY 2022. 7. 24. 15:24

var은 함수 스코프!!

var 사용시 블록 스코프 안에서 변수를 선언하지 않는다. var로 선언한 변수는 함수 스코프이기 때문에, 블록안에서 사용해도 의미없다. 더 헷갈릴뿐... 즉, // 나쁜 방법 var length = 100; for (var i=0; i
Development/JSP, JS, JQUERY 2022. 4. 29. 17:43

form serialize

form태그로 감싸져있는 데이터들을 전송할때, $('#form').serialize(); 를 사용하면 일일이 url뒤에 ?key=value&key=value 이런식으로 만들어주지 않아도 된다. serialize()가 자동으로 생성해줌. ※ form태그 내의 데이터중 전송하고 싶지 않은 데이터가 있을 경우. 위의 rating, point를 전송하고 싶지 않을 경우. 아래와 같이 사용 location.href = "/board?" + $('#form :not(input[name="rating"],input[name="point"])').serialize(); serialize 예제 //serialize 사용X //serialize 사용O
Development/JSP, JS, JQUERY 2022. 4. 3. 15:55

모달 팝업등에서 자식데이터 부모한테 가져오기

window.open : 새로운창 오픈 - window.open('페이지 URL', target, 옵션); window.opener : 자신을 오픈한 부모창 제어 $(document).ready(function() { var parent = window.opener; }); 1. 자식창에서 부모의 id가 test인 개체 값 가져오기 //javaScript parent.document.getElementById('test').value; //jquery $('#test', parent.docuemnt).val(); 2. 자식창의 id에 해당하는 값을 부모한테 넣어주기 //javaScript var test = document.getElementById('test').value; parent.document..
Development/JSP, JS, JQUERY 2022. 4. 1. 17:15

textarea에서 엔터로 줄바꿈, 글자수 체크

(0 / 200)
Development/JSP, JS, JQUERY 2022. 2. 19. 23:48

scroll 제어(현재 위치, 위치 이동 등)

ex) 스크롤이 특정위치 도달하면 내용필드 숨기거나 보여주기 // 특정 id값의 offset를 구한다. var titleOffset = $("#title").offset(); $(window).scroll(function() { if( $(window).scrollTop() "+$(window).s..
Development/JSP, JS, JQUERY 2022. 2. 19. 23:43

a태그의 텍스트 가져오기

보기 onclick의 함수에 this를 넣어준다. ※ 추가 사항 a태그에서 함수 바인딩은 href안에 javascript:test(); 를 사용하는 방법과 onclick 이벤트를 사용하는 방법이있는데, href는 기본 html 속성이며 uri 정보가 들어가야 한다. 되도록이면 a는 링크를 의미하는 태그라 어디로 이동하는지를 보여주는게 좋다. 추가로 onclick 이벤트를 이용하면 tab키로 버튼이 선택안된다.
Development/JSP, JS, JQUERY 2022. 2. 19. 23:36

JQUERY 자동완성(autocomplete)

입력필드에 타이핑시 자동으로 데이터에 일치하는 값들을 가져와서 완성시킬 수 있게 해주는 기능. 사용 코드 $("#title").autocomplete({ source: function(request, response) { $.ajax({ url: "/apiUrl"), success: function(data) { // 서버에서 json 데이터 response response($.map(data.items, function (item) { return { label: "["+item.id+"] " + item.title + " ("+item.type+")", baseCodeId: item.id, type: item.type }; })); } }); }, minLength: 2,// autocomplete로..
Development/JSP, JS, JQUERY 2022. 1. 23. 19:21

선택자에 클래스 존재 여부 확인

상황 => 클래스가 존재하는지에 따라 분기 처리 해야할 경우가 생겼다. 코드 // 클래스 1개만을 확인하고 싶을때 (div태그에 btn 클래스가 있는지 확인) if( $("div").hasClass("btn")===true ) { alert('존재'); } // 클래스 여러개를 확인하고 싶을때 (div태그에 btn, wrap 태그가 모두 있는지 확인) if( $("div").is(".btn, .wrap")===true ) { alert('존재'); } hasClass는 하나의 클래스명만 확인이 가능 is는 ' , ' 구분자로 여러개의 클래스 확인 가능. 속한 것들이 모두 포함되어야 true 반환
Development/JSP, JS, JQUERY 2022. 1. 4. 17:22

몇 초 후에 이벤트 발생(setTimeout)

스크립트에서 바로 이벤트가 발생하는 것이 아닌, 딜레이를 주고 발생시키고 싶을때 setTimeout를 사용하면 된다. ex) toast문구를 보여주고 1.5초후에 페이지 전환 toast.success("등록되었습니다.") setTimeout(function() { location.href = "/index"; }, 1500);
Development/JSP, JS, JQUERY 2021. 10. 27. 14:11

전화번호 중간에 - 추가

var tel = "01011111111"; tel.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/, "$1 - $2 - $3"); //결과=> 010 - 1111 - 1111
Development/JSP, JS, JQUERY 2021. 10. 6. 16:39

checkbox 관련

https://cocosoft.kr/397 [jQuery]html 체크박스 체크시 이벤트 동작 발생 예전에도 input type="checkbox" 의 이벤트 실행해 대해서 포스팅 한 적 있습니다. 개인적으로 체크박스로 만들어 진 것은 제어하기가 편해서 많이 사용 하는 것 같네요. 오늘은 간단하게 체크박스 클 cocosoft.kr https://openlife.tistory.com/381 갯수 구하기 checkbox 갯수 구하기 $("input[type='checkbox']").length checkbox 체크 갯수 구하기 $("input[type='checkbox']:checked").length checkbox에 이미지 입히기 // jsp // input태그의 id와 label의 for을 매핑시킨다...
Development/JSP, JS, JQUERY 2021. 10. 4. 12:05

스크립트 날짜계산

사용할 일이 있을 때 마다 찾아보기 번거로워서 정리... //현재 날짜 var currDay = new Date(); var year = currDay.getFullYear(); var month = (currDay.getMonth() + 1); var day = currDay.getDate(); //7일 후 currDay.setDate(currDay.getDate()+7); var day7 = currDay.getDate(); //7일 후의 날짜 //요일 계산 var week = ['일', '월', '화', '수', '목', '금', '토']; var dayOfWeek = week[new Date(currDay).getDay()]; console.log("요일 => " + dayOfWeek); //추가..
Development/JSP, JS, JQUERY 2021. 9. 30. 16:56

classList(속성 변경)

예를 들어 해당 클래스에 hidden 속성을 추가해 주고 싶을때, 기존에 추가로 들어있는 다른 속성들은 건드리지 않은채 hidden 만 추가 하려고 한다. //index.html// ... ... ///////////// ///////////// js /////////////////////////////////////// const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; console.dir(greeting); function onLoginSubmit(event) { event.preventDefault(); const username = loginInput.value; loginForm.clas..
Development/JSP, JS, JQUERY 2021. 9. 20. 15:56

웹 스토리지(web storage)

API https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org 웹 스토리지(web storage)에는 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage)가 있다. 두개의 차이는 데이터가 어떤 범위 내에서 얼마나 보존되느냐의 차이이다. 세션 스토리지 : 웹페이지의 세션이 끝날 때 저장된 데이터가 소멸 - 브라우저에서 여러 탭이나 창을 띄우면, 여러 ..
Development/JSP, JS, JQUERY 2021. 9. 13. 16:57

e.preventDefault(기본 동작을 중단)

기본적으로 a태그의 href 이벤트, form태그의 submit은 페이지를 전환하거나 리로드 된다. 이와 같은 기본 이벤트 동작들을 중단할 수 있다. a태그를 눌렀을때 링크이동을 시키지 않을 경우, form 태그의 submit를 눌렀을때 새로 실행하지 않고 싶을 경우 사용 const loginForm = document.querySelector("#login-form"); function onLoginSubmit(event) { event.preventDefault(); } loginForm.addEventListener("submit", onLoginSubmit); 위와 같은 코드가 있을때, event.preventDefault(); 가 없으면 Log In 버튼을 클릭 했을시 페이지가 리로드되어 "남아..
Development/JSP, JS, JQUERY 2021. 9. 13. 10:27

toggle(on/off)

클릭을 했을 경우 on / off 상태를 번갈아가며 액션을 취해주는 이벤트/ 버튼을 클릭할 때마다 색상을 변경하고 싶을 경우 const h1 = document.querySelector("div.hello:first-child h1") function handleTitleClick() { h1.classList.toggle("active"); } h1.addEventListener("click", handleTitleClick); ////////////////////////////////////////////////////// toggle의 내부 동작은 아래와 동일하다. const clickedClass = "active" if(h1.classList.contains(clickedClass)) { h1...
Development/JSP, JS, JQUERY 2021. 9. 13. 09:28

console.log(), console.dir() 차이

console.log는 요소를 HTML과 같은 트리 구조로 출력 하고, DOM 요소에 대해 특별한 처리를 제공. console.dir은 요소를 JSON과 같은 트리 구조로 출력 하고, DOM JS 객체의 전체 표현을 보려고 할 때 유용. 객체는 dir, 나머지는 log로 로깅하면 편하다. 아래를 참고하면 console.log의 경우 해당 body의 요소가 출력 되고, console.dir의 경우 전체 요소가 출력된다. 함수(객체)도 마찬가지로 출력된다. console.log( a() ); console.dir( a() ); 를 사용할 경우 ()로 인해 함수를 실행하게 되는 것이므로 둘다 true가 출력되게 된다.
Development/JSP, JS, JQUERY 2021. 9. 12. 23:14

getElementBy~ , querySelector 차이 (링크)

https://velog.io/@chloeee/getElementById-%EA%B7%B8%EB%A6%AC%EA%B3%A0-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90 ❣️getElementById 그리고 querySelector 차이점 한번도 getElementById와 querySelector의 차이점에 대해 크게 생각해본 적이 없다. 이번에 클론코딩으로 자바스크립트를 작성하는데 지금 정리해서 알아두면 좋겠다는 생각에 기록해 본다! velog.io
Development/JSP, JS, JQUERY 2021. 9. 12. 22:49

모바일기기 진동울리기(feat. javascript)

소스 코드 .... 진동 시작 SOS 진동 시작 진동 중지
Development/JSP, JS, JQUERY 2021. 9. 12. 21:43

jsp 내장객체(참고 링크)

https://devinside.tistory.com/71 JSP #11 EL-3 EL의 내장객체 EL의 내장객체 EL의 내장객체는 EL 표현식(${})에서만 사용할 수 있다. 구 분 내 장 객 체 설 명 Scope pageScope page 영역에 존재하는 객체의 참조 requestScope request 영역에 존재하는 객체의 참조.. devinside.tistory.com
Development/JSP, JS, JQUERY 2021. 8. 16. 00:45

SPA와 여러 방식

참고링크 poiemaweb.com/js-spa SPA & Routing | PoiemaWeb 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 poiemaweb.com
Development/JSP, JS, JQUERY 2021. 4. 29. 09:23

use strict(바닐라 js)

ECMAScript 5에서 바닐라js로 코딩 할 경우 'use strict';로 선언하는 것이 추가가 되었다. 이는, 더 js를 안정성 있게 실행하게 해주고 기존에 말도 안되는 문법을 막아주게 된다. 사용 예를 들면 a의 타입이 선언도 되지 않았는데 에러가 출력되지 않는 현상을 막아준다.
Development/JSP, JS, JQUERY 2021. 4. 19. 00:10

script의 async와 defer 옵션의 차이

일반적으로 위와 같은 html이 있을 경우 브라우저는 한줄 한줄 읽다가 의 경우 html을 읽으면서 병렬로 동시에 처리하는 방식이다. 때문에 script를 처리하는 도중에 DOM생성이 멈추지 않아 속도가 빠르다. 문제점으로는 위와 같이 스크립트가 여러개 있을 경우 순서에 상관없이 병렬로 동시에 처리되지만, json1.js, json2.js, json3.js간에 의존경우가 있을 경우에는 이상이 생길 수 있다. ex) json2.js에서 json1.js를 참조하는게 있어 json1.js가 먼저 실행 되어야 하는 경우. defer 옵션 defer 옵션은 html문을 읽고 마지막에 태그를 실행하는 방식으로 html을 먼저 그려주고 스크립트를 호출한다. 때문에 화면에 그려지는 속도도 빠르며 async은 순서에 상..
Development/JSP, JS, JQUERY 2021. 4. 18. 23:51

JSON 개념 및 활용법(with Visual Studio Code)

VS Code 셋팅 VSC툴의 Extensions탭에서 Live Server을 설치한다. 우측 하단의 Go Live를 통해 서버 기동후 크롬 콘솔 확인 가능 JSON(JavaScript Object Notation) 클라이언트와 서버간에 요청, 응답 통신 방법으론 AJAX(Asynchronous JavaScript And XML), XHR(XMLHttpRequest)오브젝트 등이 있다. XML은 html과 같은 markup언어 중 하나(태그로 데이터를 표현함). XML은 불필요한 태그로 파일의 사이즈가 커지고 가독성이 떨어져서 JSON을 더 많이 사용한다. {"key" : "value"} 형태로 존재. JONS은 프로그램 언어, 플랫폼에 상관이 없이 쓰일 수 있다. 즉, C/C#/JAVA/Kotlin/G..
Development/JSP, JS, JQUERY 2021. 4. 18. 21:00

ajax로 받아온 데이터 jstl에서 사용하고 싶을때

결론부터 말하면 ajax로 받아온 데이터를 jstl에서 사용하는 것은 불가능하다. 기본적으로 서버의 작업 순서가 JAVA>JSTL>HTML>JavaScript 이기 때문에 에러가 뜬다. 이렇듯 직접적으로 받아와서 사용을 할 순 없고, ajax에서 받아온 데이터를 다른 jsp에 그려서 그 그려진 jsp를 뿌려주는 방식으로 사용 할 수 있다. 요약하면 1. ajax를 사용하는 jsp에서 post방식으로 java에 요청 2. Controller딴에서 ajax요청을 받은 뒤 Service를 통해 비지니스 로직 값을 호출하고 결과 값을 model.addAttribute("", )에 저장 하고 데이터를 그려줄 jsp로 리턴 3. ajax에서 2번에서 그려준 jsp를 결과 값으로 리턴하여 뿌려준다. 구현 ajax로 ..
Development/JSP, JS, JQUERY 2021. 4. 10. 15:46
◀ 1 ▶
반응형
loading

티스토리툴바