JavaScript/JQuery

자식 이벤트 실행할 때 부모 이벤트 실행 무시하기

기본적으로 jQuery 마우스 이벤트를 등록하면 자식 엘리먼트에게 이벤트를 전파한다. 이벤트가 전파된 자식 엘리먼트에서 이벤트를 등록하여 실행하면 부모 엘리먼트의 이벤트가 실행되는 현상이 일어난다. 이것을 막고, 자식이벤트만 실행하게 하려면 event.stopPropagation() 함수를 사용하면 더이상 부모이벤트의 함수는 실행되지 않는다.

2022. 10. 12. 10:15

JavaScript/JQuery

[jQuery] checkbox 다중 체크값 가져오기

var receiverArr = []; // 체크박스의 name을 잡아 체크된 element의 value 값을 가져옴 $("input[name=receiver]:checked").each(function() { var chkReceiver = $(this).val(); receiverArr.push(chkReceiver); }); console.log("receiver : " + receiverArr);

2022. 9. 26. 14:57

JavaScript/JQuery

[jQuery] .load() 메서드

웹페이지의 내용을 동적으로 교체할 수 있는 메서드이다. 서버에서 json 데이터를 받아 Ajax로 HTML 요소를 생성하여 페이지 내부의 원하는 위치에 내용을 변경할 때 사용한다. 주어진 URL로부터 HTML 데이터를 받아 선택한 공간에 넣어줌으로써 동적인 변화를 나타낸다. load 메서드의 3가지 매개변수 .load(url [, data] [, compleat]) 1) url : 데이터를 받을 url 2) data URL 요청을 보낼 때 같이 보낼 데이터로써 자바스크립트 객체 또는 문자열을 말한다. data가 주어진다면 POST 메서드로 전송되고 이외의 경우에는 GET 방식으로 보내진다. 3) complete : 요청 완료 후 호출 될 콜백함수 콜백이 제공되었을 경우 후처리와 HTML 삽입이 수행된 후..

2022. 9. 14. 14:20

JavaScript/JSTL

jstl 다중 조건문

내부에 또 를 사용하니까 에러가 뜬다. 다중 조건문 사용하는 방법이 다른갑다. name 변수 값은 홍길동입니다. name 변수 값은 ${name }입니다. index 값 : ${index } name 변수 값은 홍길동입니다. name 변수 값은 홍길동1입니다. name 변수 값은 ${name }입니다. index 값 : ${index }

2022. 9. 1. 15:47

JavaScript

node.js 설치

https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 현재 버전을 설치하지 않고 LTS를 받아준다. LTS(Long Term Support) : 일반적인 경우보다 장기간에 걸쳐 지원하도록 특별히 고안된 소프트웨어의 버전 오랫동안 사용되어 안정화 되어있는 버전을 말한다. next만 눌러 설치해준다. 커맨드 창을 열어 node -v라고 입력해본다. 제대로 버전이 뜬다면 자동으로 환경변수 설정이 된 것이다. 원래 자바스크립트는 브라우저가 해석기이기 때문에 html 파일에서 그림을 그리는데 node.js를 사용하면 독립적으로 실행이 ..

2022. 3. 24. 21:41

JavaScript

자바스크립트 7강. JQuery

바닐라 자바스크립트 문법 : 라이브러리 도움 없이 순수한 자바스크립트 이때까지 라이브러리의 도움 없이 순수한 자바스크립트 문법을 배웠다. 라이브러리의 도움을 받아 좀 더 편하게 코드를 짜보자. 자바스크립트는 브라우저가 인식하는 언어이다. 자바스크립트로 뭘 할 수 있나? 기본적으로 http프로토콜은 html 파일을 돌려주는데 이때마다 새로고침이 일어난다. 나무는 다시 그릴 필요가 없었는데 다 다시 그려진 것이다. 이는 낭비가 너무 심하다. 그래서 나온 통신이 AJAX 통신이다. AJAX 통신을 해서 fetch 요청을 하면 JSON 데이터가 응답이 오는데 그러면 해 부분만 지우고 달로 다시 그려준다. 부분 리로드가 가능해진 것이다. 통신도 경량화되고 부분만 다시 그릴 수 있다. AJAX 통신을 할 때 뭐가 ..

2022. 3. 15. 20:55

JavaScript

자바스크립트 6강. CORS 정책

해당 id의 포인트를 10만점 올려주는 메서드가 있다. @GetMapping(/point/{id}) 실제 실행될 쿼리 : update 인증이 필요한 요청이다. 아무나 update 할 수 있으면 안되기 때문에 관리자 아이디인지 확인해야한다! 로그인했으면 세션에 오브젝트가 하나 들어있을 텐데 이 세션에 아이디가 admin이면 update가 가능하게 하고 세션에 아무 값도 없거나, username이 admin이 아니면 튕겨내야 한다! id가 23번인 사람을 admin이 아닌데도 10만점을 올릴 수 있는 방법이 있다. 어떻게? GET:/point/23 1. postman 이용 2. 브라우저 주소창 이용 3. 하이퍼링크 a 태그 4. form 태그 요청 데이터베이스의 데이터에 영향을 미치는 write 메서드를 사..

2022. 3. 15. 16:13

JavaScript

자바스크립트 5강. promise

pending은 대기하다 라는 뜻이다. Prototype은 원형이라고 생각하면 된다. Promise는 버퍼가 끝까지 다운로드할 때까지 pending중인 것이다. 이게 fulfilled이다. 우리가 받을 데이터가 1, 2, 3, 4이니까 모든 데이터가 버퍼를 꽉 채울때까지 pending상태인 것이다. 4가 끝이라는 건 어떻게 알까? 데이터가 끝이라는 자기들만의 프로토콜이 있을 것이다. 우린 몰라도 된다. 결과의 타입이 Response라는 타입이다. 결과를 Response 타입으로 받을 수 있다는 말인데 자바스크립트는 타입이 따로 없으니 신경 쓰지 않아도 된다. pending 상태에 데이터를 던지면 어음을 준다. 데이터는 나중에 줄테니까 일단 이거부터 받아! 인 것이다. 빈 박스를 먼저 준다. 이게 prom..

2022. 3. 15. 00:11

JavaScript

자바스크립트 4강. fetch 함수

자바스크립트 공부하기 - 4단계 첫번째글 첫번째글 DOM을 제어하여 박스 안에 데이터를 추가해보자. 내가 찾은 타겟 뒤에 값을 넣을 건데 글자(p태그)를 찾는 게 아닌 박스를 찾아줘야 한다. 부모에게 자식을 추가해주는 것이다. 이때 중요한 것은 데이터를 추가해주는 게 아닌 dom을 추가해줘야 한다. 자바스크립트 공부하기 - 4단계 첫번째글 첫번째박스 값 채우기 첫번째글 통신으로 데이터를 받아서 그림을 그려줄 수 있다. 두 번째 박스 값 채우기 버튼을 클릭하면 list 데이터가 그려질 수 있게 만들어보자. 자바스크립트 공부하기 - 4단계 첫번째글 첫번째박스 값 채우기 첫번째글 두번째박스 값 채우기 자바스크립트로 html에 그림 그리는 방법이다!! 이렇게 사용하면 내가 원하는 부분만 리로드 된다. AJAX!..

2022. 3. 14. 22:54

JavaScript

자바스크립트 3강. 람다 함수

특정 element를 찾을 때 . 이나 #을 사용하지 않고 메서드를 이용해 바로 찾을 수 있는 방법이 있다. document.getElementById("아이디명"); document.getElementsByClassName("클래스명"); document.getElementsByTagName("태그명"); 하지만 이렇게 사용하면 3가지의 메서드를 알아야 하기 때문에 추천하지 않는 방법이다. querySelector를 사용하자! 클릭 위 코드와 같이 사용하면 add 메서드에 인수를 넘겨줄 수 없다. 클릭 이벤트 리스너의 function 자리에 의미없는 이름의 hello 함수를 넣어주면 함수가 실행되지 않고 버튼이 클릭이 될 때 hello 함수가 호출된다. 클릭하면 무조건 실행될 중괄호 내부이지 hello..

2022. 3. 14. 21:59