jsp 의 영역정리
jsp의 자바영역(<% %>)은 서버가 하는 영역
jsp의 html, 자바스크립트는 웹브라우저가 하는 영역
jquery
- 라이브러리를 이용해서 동작을 하게한다.
https://jquery.com/
https://jsonplaceholder.typicode.com/
-
jquery 설치
-
스크립트 코드 복사해서 붙이기 = 스크립트 소스를 붙힌다.
-
Vanilla JavaScrip
선택자와 jquery의 명령어 아는 게 핵심이다.
1. 요소 선택자(복습)
기본 : 요소명
클래스 : .
아이디 : #
2. jquery 의 작업 연결성
한줄로 jquery 실행하기
R의 파이프 연산자처럼 작성 가능함 "그 다음 작업은?" 물음을 던지면서 작성하자
웹프로그래밍
지금은 내가 웹브라우저(javascript)와 서버(jsp) 모두 만들고 있다.
하지만 나중에는 서버와 웹브라우저를 따로 코딩하지 않을까?1. fetch
데이터를 요청하고 갖고와!
1-1. fetch 의 표현방법(눈에 익히기)
1-2. 자바스크립트의 input요소 에서 데이터 불러오기
자바스크립트
요소의 아이디를 통해 .value 라는 명령어로 입력한 내용 가져오기 = 자바 스크립트 영역
자바영역(서버영역)
request.getParameter 는 입력한 데이터의 이름표로 데이터를 가져옴
.value는 자바스크립트의 입력한 내용 가져올 때
request.getParameter은 자바(서버)에서 데이터를 받아올 때
1-3. request.getParameter("name")
서버에게 "name"이라는 이름표를 가진 데이터를 찾아줘!
주로 html의 폼(name="")이나 URL 쿼리 스트링("?msg=" + msg)
1-4. ?msg
서버에 보내는 데이터의 이름을 붙일 때 사용
?붙일 데이터의 이름
2. json으로 데이터 받아오기
<서버의 content의 내용이 json이라는 걸로 설정해야 함>
데이터를 자바스크립트나 html에서 이용할 때 fetch .then(res=> res.json()) 으로 받아온다.
3. 폼에 입력한 내용을 페이지 전환 없이 전송하기
3-1. 사용한 코드 분석
- e.preventDefault() : 함수의 기본 동작을 제지
- FormData(e.target) : name 속성을 기준으로 가져옴 => id=user1234 pwd=1234
- e.target : 매개변수 e가 되는 대상의 참조값(여기서는 form 요소)
- URLSearchParams(data) : id=user123&pwd=mypassword 으로 데이터 타입을 변경
- e.target.action : form의 참조값의 action인 목적지를 가져옴
e.preventDefault()은 폼 제출시 자바스크립트로 결과를 내가 원하는대로 하고싶을 때
FormData()은 Form요소의 데이터를 한꺼번에 갖고오고 싶을 때
URLSearchParams()은 여러개의 데이터를 URL 에 키1=값1&키2=값2로 붙일 때 사용함(=서버에 데이터를 전송할 때 사용)
3-2. fetch의 post 방식
method: POST, headers, body : 서버에 보낼 데이터 를 작성
영역구분
콘솔창에 request가 먼저 나오고 다음으로 OK가 나옴
절대로 먼저 OK 가 나올 수 없음
3. Cookie
쿠키는 서버가 굽고 만들었지만 웹브라우저 자신의 정보를 뭍혀서 소유를 하고 있다. 결국 주인의 웹브라우저이다.
3-1. 서버에서 쿠키 생성 및 허용
response.addCookie() 웹브라우저가 특유의 쿠키를 가질 수 있게 허용한다.
request와 response 에대한 해석
response.addCookie() : 서버의 응답에... 쿠키를 더한다.
request.getParameter() : 웹브라우저의 요청의 파라미터를 가지고 온다.
3-2. 쿠키는 key(=>name)와 value 으로 저장되어 있다.
나의 뇌피셜로 웹브라우저에는 여러 개의 쿠키의 객체가 존재하고 관리를 용이하기 위해서는 키값이 필요할 듯 싶음.
3-3. 여러개의 쿠키를 List 에 넣기
쿠키의 value를 응답할 때 사용하기 위해서는 서버의 영역에 외부변수로 작성하고 null값으로 설정!
3-4. 쿠키를 삭제하고 싶으면...
유지시간을 0으로 설정하기
3-5. 아이디 저장 기능(아이디/비밀번호 저장 기능)
https://jsonplaceholder.typicode.com/
fetch로 갖고와서
보완
-
웹프로그래밍에서 다음에 이용하기 위해서는 변수든 상수든 담아야 한다.
다음에 이용하고 싶으면 변수든 상수든 그릇에 담아야 함시
-
Vanilla JavaScript 의 동작 한번 정리 css에 추가된다.
-
vs code p요소 안에 연속된 컨텐츠 작성 방법
p{p$}*5
<P>p1</P>
<P>p2</P>
<P>p3</P>
<P>p4</P>
<P>p5</P>
{들어가는 내용}
- 자바스크립트의 append
ul에 li추가할려면?
li요를 생성하고 변수에 담기 -> li요소의 text 설정하기 -> ul에 추가하기
