콘솔자바 

서블릿 ,

둘다 자바프로그램

콘솔자바  서블릿 , JSP
프로그램 서버프로그램 HTML 코드안에 Java코드
  분산형, 웹기반 서버프로그램  
  톰캣이 실행환경
class ???extends HttpServlet{ 
public void service(HttpServletRequest request,HttpServletResponse response)
}
 

옛날에는 클라이언트서버형태(CS)

톰캣 : 웹서버역할 + 와스역할

뭘해결하기위해서나왔는지 ? 생각할것

 

사용자의 요청이 있을때

사용자 요청을 수반하다보면, 일반적으로 get요청을 많이 받게된다.

노가다식 문서출력 out.write("html태그") 이작업을 자동으로해주는애 : 제스퍼(JSP)

주소창말고 자바스크립트로도 웹서버를 요청할수있게되었다

JSON이 가장편하다

 

페이지숫자 불러오기

페이지정보불러오기(NoticeList.java에서 연결)

번호누르면 파싱된 제이슨문자열 출력

 

"http://localhost:8080/js/ex1.js"
http://localhost:8080/api/notice/list 
../api/notice/list?p=${page}

1.IF문

2. FOR문자체를 줄이기

1. if문으로함

상세내역만들기

페이지연결

 1번째 게시물의 제목을 누르면 상세내역으로이동

 

컬럼안에서도 헤더역할이있다.<th>

colspan = 3 전체중에 3칸차지해

 

목록으로 돌아갈수있게 하이퍼링크넣기 "list.jsp"
게시글마다 다른 아이디값부여

 

글 목록에 마우스를 대면 하단에 주소값이 바뀌는것이보인다

페이지별 id부여

jsp에서 id요청 , java에서 get(id)메소드만들기

list.jsp에서 실행할것


detail.jsp화면
목록에서클릭한 내용에 콘솔에출력된다

노드객체를 사용할 수 있는 능력
브라우즈가 제공하는 객체
-window
-window.document
--node object
   얻기  /  속성 / 스타일 / 조작하는
-window.XmlHttpRequest : Ajax
-- 원격으로 데이터를 요청해서 그 결과로 화면(노드 객체)를 조작하는 기술

[자바스크립트 (X) ]   ------------------------          [ 자바 on Tomcat ] 
                                                                          (동적)문서를 제공

[자바스크립 on Browser] <----- XmlHttpRequest-------> [자바 on Tomcat] Servlet/JSP
    데이터 "요청"                                                         데이터를 제공(XML/CVS)
    노드 조작


 

Ajax - > web version2 :비동기적으로 데이터를 요청해서 화면을 갱신하는 기술의 집합

Frontend 기술의 가장 꽃

주요 API :

XmlHttpRequest

-open() / send() 

비동기로 처리할때 사용하는이벤트

onreadystatechange

onload

onerror

onabort

onloadend

 

동기적 : 페이지자체를 새로고침, 데이터가 바뀔때마다 업로드를 해야한다.(다른것들이 가동불가)

비동기적 : 부분적으로 바로바로 데이터를 업로드, 다른것도 가동

 

웹브라우저에서 페이지를 보려면 서버를 요청해야한다.

 

ex1.js파일에서

request.open("GET", url, true);

url를 요청한것

out출력도구

컬렉션일경우 알아서 toString을 호출해서 항목들을 [ , , , ] 로 묶어서 출력해준다.

이것을 쪼개써야하는데,,JSON표기가 아니다..이 포멧은 어디서왔을까

Notice누르고 에프3

묵시적으로 투스트링호출됨

NoticeList 클래스 / NoticeService클래스

오버라이드된 toString메소드에 의해 출력된것이다.

JSON형태로 바꾼다면 ? 

key ""떠블따옴표로 감싸져있어야하고, 그러려면 역슬래시가 앞에 들어가야한다.(이스케이프) 이중더블따옴표모양이되니까,,

json형태로 바꾼것
제이슨형태문자

title, writerid의 값도 문자열이므로 따옴표가 되어있어야한다.

"title":"????",

이제 클라이언트에서는 JSON형태의 문자열을 받은거니까 파싱해서쓰면된다


request.responseText은 통으로되어있음

list은 배열로 되어있음

 

파싱이 잘되서 배열이되어있다면 0번 인덱스를 출력해보자

 

JSON.parse() : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.

서버로부터 브라우저로 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체화.

문자열스트링을 JSON객체로 변화시켜준다.

request.responseText은 그냥 문자열이었다.

문자열 키를 큰따옴표로 묶어야한다. ->JSON객체로 쉽고빠르게변환된다.

 

테이블의 내용이 데이터가없을 경우에만 레코드가 존재하지않습니다를 보이고,

데이터가있으면 데이터만 보이게해보자.

4가지 방법이 있다.

1.innderHTML 사용 문자열로넣기

2. DOM을 직접생성해서 추가하는 방법

3. template을 이용한 클론

4. append말고 insertAdjacentElement로 이웃하는곳에넣기

개발자도구를 띄어놓은상태에서 새로고침해야 새로나온다

 

1. innerHTML (바람직x)

 

2.

3.template

4. append말고 insertAdjacentHTML로 이웃하는곳에넣기

템플릿스트링 ?

여러라인 문자열제공 `` 

내려쓰기를마음대로쓸수있다

포멧문자열

es6에서 등장

 

달라기호 데이터를 거기에 꽂아넣을수있다

${ }

문자열을 +로 더할필요없이 ` ${} `로 사용가능

insertAdjacentHTML(위치, 넣을태그)
request를 누르면 10개의 데이터가 불러와서 나열된다

beforeEnd : tbody.insertAdjacentHTML("beforeend",tr);

HTML 문자열 "<tbody>AAA</tbody>"를 개체가 종료되기 전에 tr을  삽입.


레코드가 존재하지않습니다는 데이터가 있을경우 안나오게해보자(if 조건문)

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

웹 서버와 WAS :victorydntmd.tistory.com/121#:~:text=%EC%9B%B9%20%EC%84%9C%EB%B2%84%EB%8A%94%20%EC%A0%95%EC%A0%81%EC%9D%B8,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4.&text=WAS%EB%8A%94%20DB%20%EC%A1%B0%ED%9A%8C%EB%82%98,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4

AJAX란 ?

velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

insertAdjacentHTML

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

 

 

DOM (Document Object Model)

  • 웹문서(HTML,XML,SVG)를 브라우저가 이해할 수있는 구조로 구성하여 메모리에 적재하는것
  • 모든 요소와 요소의  어트리뷰트,텍스트를 각각의 객체로 만들어 부자관계로 표현하는 트리구조로 구성
  • DOM 자바스크립트를 통해 동적으로 변경
  • 메모리상의 DOM을 변경하여 정적인 웹페이지를 동적인 웹페이지로 변경

브라우저는 HTML문서를 로드 한후 해당 문서에 대한 모델을 메모리에 생성. 이때 모델은 객체의 트리로 구성된다.-> DOM tree

HTML 문서내의 각 요소에 접근/수정 : DOM은 모델 내의 각 객체에 접근하고 수정할 수있는 프로퍼티와 메소드를 제공.DOM이 수정되면 브라우저를 통해 사용자가 보게될 내용도 변경

 

DOM tree

브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델

 

노드선택 

document.getElementsByClassName(class)

firstElementChild, lastElementChild: 태그만선택

firstChild, lastChild : 공백,줄바꿈모두 텍스트노드로  취급

previousElementSibling, nextElementSibling :형제 노드 중에서 Element type 요소만을 탐색한다.

 

 

SELECT 구절

SELECT / WHERE/ GROUP BY / HAVING/ ORDER BY

 

내장함수

-문자열관련함수

-변환함수

-날짜함수

-NULL 관련함수

-집계함수

 

SELECT, FROM, WHERE, GROUP BY, HAVING, ORDER BY , ASC ,DESC (무조건외우기)
  • 집계한결과쓸때는 HAVING
  • FROM 에는 격자형태 결과물이오면된다
  • ROWNUM: 결과집합에 대한 가상의 순번
  • 쿼리문 작성순서와 실행순서가 다르다.

WHERE절과 HAVING절의 차이

  • WHERE절은 모든 레코드(행)에 대해서 조건을 적용한다.
  • HAVING절은 GROUP BY절을 통해 만들어진 GROUP들에만 조건을 적용한다.
    WHERE절에 집계함수 못씀.

 

실행순서 :

WHERE절끝나면 ROWNUM생기고 정렬(번호를붙이고 정렬하니까 순서엉망)

 

정렬하고나서 번호를 붙여야 한다. 정렬을 끝내고(안쪽FROM) 로우넘버를 다시붙이자

NOTICE 테이블에서 제목에ㅔ 'a'가 들어간것을 등록일 날짜기준으로 내림차순

조회한것을 n 이라고 명명

n을 ROWNUM으로 1~5개 만 출력

 

결과화면 / 정렬을 먼저하고 ROWNUM붙여 실행


숫자함수

  • ABS(n) : n의 절대값을 반환
  • CEIL(n) , FLOOR(n) : n보다 같거나 큰 정수를 반환한다
  • ROUND(n,i) : n을 소수점 i+1번째 자리에서 반올림
  • TRUNC(n,i) : n을 소수점 i+1번째 자리에서 버림
  • POWER(n1,n2) : n1을 n2번 거듭제곱한 결과
  • MOD(n1,n2) : n1을 n2로 나눈 나머지 값

문자함수

  • INITCAP(char) : char의 첫문자만 대문자 나머지 소문자
  • LOWER(char) : char를 소문자로
  • UPPER(char) : char을 대문자로
  • CONCAT(char1, char2) : char1 char2를 붙인다.
  • SUBSTR(char, pos,len) : char의 pos번째 문자부터 len길이만큼 잘라서 반환.
  • LTRIM: char1의 좌측부터 char2를 찾아서 삭제후 반환 (한번만 삭제한다.)
  • RTRIM: LTRIM과 비슷. 오른쪽부터 검색을 진행
  • LPAD(char1,n,char2) : char1의 왼쪽부터 char2를 채운다. n은 연산후 총 문자열 자릿수를 의미한다.
  • RPAD(char1,n,char2)  : LPAD와 비슷 , 오른쪽부터 진행
  • REPLACE(char1,char2,char3) : char1에서 char2를 찾아 char3을 반환한다. LTRIM과 달리 여러번 진행한다.
  • LENGTH(char) : char의 길이
  • DECODE(input1, search1 , result1, search2, .. ,default) :  input1을 search1과 비교하여 같은 값이면 result1을 반환하고, 같지 않을 경우 search2를 비교하는 방식을 반복한다. 최종적으로 같은 값이 없으면 default를 반환한다.

날짜함수

  • SYSDATE : 현재 시스템 일자 반환
  • ADD_MONTHS(date,int) : date에 int 수 만큼 월을 더한 날짜 반환
  • MONTHS_BETWEEN(date1,date2) : date1을 기준으로 두 날짜 사이의 개월 수 반환 
  • LAST_DAY(date) : date의 월말일 반환
  • ROUND(date, format) : format에 따라 반올림한 날짜 반환
  • TRUNC(date,format) : format에 따라 잘라낸 날짜 반환
  • NEXT_DAY(date,char) : date기준으로 char에 명시한 요일의 날짜를 반환

변환함수

  • TO_CHAR(char or date , format)  : 숫자나 날짜를 format에 맞는 문자로 변환                                                                                  ex) to_char(sysdate , 'YYYY/MM/DD'), to_char(12345, 'L9,999.99')
  • TO_NUMBER(char,format) : data를 format에 맞는 숫자로 변환
  • TO_DATE(char, format) : char를 format에 맞는 날짜로 변환
  • TO_TIMESTAMP(char,format) : char을 format에 맞는 타임스탬프로 변환

NULL 관련 함수

  • NVL(input1,input2) : input1이 null이면 input2를 반환
  • LNNVL(조건식) : 조건식의 결과가 false이거나 unknown이면 true를 , true이면 false를 반환한다.
  • NULLIF(input1, input2) : input1과 input2가 동일한 값이면 null을 아니면 input1을 반환한다.

 

SELECT * FROM NOTICE WHERE ROWNUM BETWEEN 1 AND 5;
SELECT SUBSTR ('HELLO',1,3) FROM DUAL;--인덱스는0부터,3개 HEL
SELECT SUBSTR ('HELLO',3) FROM DUAL; --3부터 나머지 LLO

SELECT * FROM MEMBER ORDER BY NAME DESC;--이름을 기준으로 역순으로 정렬해서조회
SELECT * FROM MEMBER WHERE NAME LIKE '박%' ORDER BY NAME;--회원중에서 박씨성을 가진 회원을 조회하시오, 오름차순으로정렬(ASC생략가능)
--이름이 같을경우 닉네임으로 정렬하자 2차정렬이필요할때
SELECT * FROM MEMBER ORDER BY NAME ASC, NICNAME DESC;--이름오름차순, 이름이같다면 닉네임으로 내림차순정렬
--일별,월별조회수,회원수집계 등 ->집계함수,분석
SELECT COUNT(*) FROM NOTICE; --게시글의 전체수조회. NULL이들어간건 제외된다.되도록 식별자를넣기
SELECT COUNT(ID) FROM NOTICE;
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID;--작성자별 게시글 수 조회
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID ORDER BY COUNT(ID) DESC, writer_id ASC;

UPDATE MEMBER SET GENDER = '여성' WHERE ID =21;
COMMIT;

SELECT COUNT(ID),GENDER FROM MEMBER GROUP BY GENDER;--ID를 통해서 개수를 구한다.성별기반. 성별로 카운트조회

UPDATE MEMBER SET BIRTHDAY = 19881215 WHERE ID = 21;
COMMIT;
--생년월일에서 년도만잘라내서 YEAR이라는 컬럼을만들고 년생을 오름차순으로정렬
SELECT COUNT(ID),SUBSTR(BIRTHDAY, 1, 4) YEAR 
FROM MEMBER 
GROUP BY SUBSTR(BIRTHDAY, 1,4) 
ORDER BY YEAR ASC;

--회원별 게시글수를 조회(단,게시글 수가 2미만 레코드만출력) 집계함수조건 HAVING
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID HAVING COUNT(ID) < 2;
--최신등록순으로 정렬한 결과에서 상위 열명을 원하는 경우조회
SELECT*FROM ( SELECT*FROM MEMBER ORDER BY REGDATE DESC) WHERE ROWNUM BETWEEN 1 AND 10;
--나이가 30이상인 회원목록조회(순서를 바꾸거나 먼저계산해서 실행)
SELECT*FROM MEMBER WHERE AGE > = (SELECT AVG(AGE) FROM MEMBER);
--보조쿼리,서브쿼리 먼저실행 안쪽에별칭만들어 쓰기
SELECT * FROM (SELECT ROWNUM NUM, NOTICE.* FROM NOTICE)
WHERE NUM BETWEEN 6 AND 10;

--등록일자를 기준으로 역정렬, N:결과집합이름, TITLE에 A가들어간것
SELECT * FROM (
    SELECT ROWNUM NUM, N.* 
    FROM (
        SELECT * 
        FROM NOTICE 
        WHERE TITLE LIKE '%a%'
        ORDER BY REGDATE DESC
    ) N
)
WHERE NUM BETWEEN 1 AND 5;
--where title like'%a%'

 

 

더보기

집계한결과쓸때는 HAVING

11:15다시

FROM 에는 격자형태 결과물이오면된다

 

SELECT * FROM NOTICE ORDER BY REGDATE DESC;

전체조회 중 파란색부분만 출력해보자.

SELECT * FROM (SELECT ROWNUM NUM, NOTICE.* FROM NOTICE) WHERE NUM BETWEEN 1 AND 5; 

ROWNUM으로 가상의순번으로 집계되어있다. 

ROWNUM: 결과집합에 대한 가상의 순번


최신등록순으로 정렬한 결과에서 상위 열명을 원하는 경우조회하려면 ?

1.잘못된 쿼리 : ROWNUM이 순차적이지않다.

ROWNUM이 순차적이지않다

2. 순차적이지않은 ROWNUM에서 5개를 뽑은셈

쿼리문 작성순서와 실행순서가 다르다.

 

실행순서 :

WHERE절끝나면 ROWNUM생기고 정렬(번호를붙이고 정렬하니까 순서엉망)

 

정렬하고나서 번호를 붙여야 한다. 정렬을 끝내고 로우넘버를 다시붙이자

SELCT * FROM (SELECT ROWNUM NUM, N.* FROM ( SELECT * FROM NOTICE ORDER BY REGDATE DESC) N) WHERE NUM BETWEEN 1 AND 5;

결과집합 별칭은 AS쓸쑤없음
NOTICE. 생략가능 

roeldowney.tistory.com/332

bloodfinger.tistory.com/46

docs.oracle.com/cd/B19306_01/server.102/b14200/functions001.htm#:~:text=SQL%20functions%20are%20built%20into,functions%20written%20in%20PL%2FSQL.

Ajax란 ?

  • 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수있는 통신 방식.
  • 서버로부터 웹페이지가 반환되면 화면전체를 갱신해야하는데, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수있도록 하는 것이 Ajax.

동기식 처리 : 순차적 작업수행. 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 경우 서버에 데이터를 요청하고 데이터가 전달될 때까지 이후 작업들은 중단.

 

비동기식 처리: 병렬적 작업수행. 작업이 종료되지않은 상태라도 대기하지않고 다음작업 실행.

자바스크립트의 대부분의 DOM이벤트와 Timer함수, Ajax요청은 비동기적으로 동작

 

Ajax 요청 및 응답처리

  • 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax요청을 생성한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.
  • XMLHttpRequest.send() 메소드를 통해 서버에 Request를 전송하면  서버는 Response를 반환하는데, 언제 resonse가 클라이언트에 도달할지 알 수없다.
  • XMLHttpRequest.onreadystatechange는 Response가 클라이언트에 도달하여 발생된 이벤트를  감지하고 콜백함수를 실행하여 준다.
  • XMLHttpRequest.readyState 프로퍼디가 변경될때마다 호출되는 EventHandler이다
  • 만일 XMLHttpRequest.readyState의 값이 4 인경우 정상적으로 Response가 돌아온 경우이다.

 

XMLHttpRequest.readyState

0: open()메소드 호출이전, 1: open메소드 호출완료, 2: send메소드 호출완료, 3: 서버응답중(responseText미완성상태) 4:서버응답완료

 

 

//요청처리 예시
// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

//응답처리 예시
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)
  if (req.readyState === XMLHttpRequest.DONE) {
    // status는 response 상태 코드를 반환 : 200 => 정상 응답
    if(req.status == 200) {
      console.log(req.responseText);
    } else {
      console.log("Error!");
    }
  }
};

// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // 이 함수는 Response가 클라이언트에 도달하면 호출된다.
};

링크클릭 ->새로고침

지금페이지요청1번만

상태값받아서

싱글 페이지 애플리케이션

웹1.0 : 개인이 소비만

웹2.0 ?

개인이 저작자,개인이 소비

스크립트를 써서 저작하기편한 환경

자바스크립트로 페이지로딩없이 비동기처리, (xml,json

 

비동기적데이터처리

 

화면을 갱신하지않고 데이터요청해서 기술들을 통틀어 ajax라고한다

자바스크립트로 데이터요청

초록:원격에있는 xml요청, 비주얼베이직용라이브러리

페이지로딩없이 데이터베이스저장 ?!

브라우저에포함된요청자 사용 ?

액티브 : 모든언어가 사용할수있는 라이브러리

 

 

다른사이트에있는 데이터를 요청할수있다

항상 콘솔에 출력해서 테스트할것

window.XMLHttpRequest(); 윈도우생략가능

 

동기형 비동기형

2개이상있을 경우 관계가 동기형이다,비동기형이라고 표현

동기형 : 내가 말을하고 오바, 저쪽에서 말하고 난 듣기만해야함. 무전기 턴을주고받듯이일함

           일하나를 두고 여러사람이 기다림,false 

비동기형 : 각자 동시에 다 일할 수있는 환경(동시에,같이)

txt파일에있는 내용을 콘솔에 출력

request를누르면 test data가 콘솔에뜬다

A라는 서비스에서받은 문서를 가지고 B라는 서비스문서를 요청하는것이 과거는 가능했다.

악용사례로 A로부터 받은 문서를 가지고 B회사에 서비스요청하는것을 막아놨다. cross request

 

데이터를 전송한게 다른url로 가는경우가있었다.->막음(데이터빼돌리기를 막음)

주소가 다른서버,

서버를 설정해줘야한다

현재 두가지 서버를 사용한다.

VS코드에는 웹서버(라이브서버) , 톰캣서버

한곳에 몰아줘야한다.

톰캣에다가 몰아주자.

동기화시켜서 끝날때까지 계속기다려야한다. 다른작업아무것도못함
자바에 복붙한다음 실행하면 된다 

poiemaweb.com/jquery-ajax-json

패턴을 만들어야하는경우가 생긴다. 

전화번호패턴, 이메일패턴

 

[ ] 감싸져있을때 : 또는

1또는 6 또는 7 또는 ..

\d :숫자 문자에 대응됩니다. [0-9]와 동일합니다. (소문자 d)

\D : 숫자 문자가 아닌 문자에 대응됩니다. [^0-9]와 동일합니다.

\d : [0-9]과 같다

\d{3,4} 숫자3개 또는4개

가운데번호가 3또는 4자리

앞뒤에 다른기호가들어갈때 불일치하게하려면

^01[016789]-\d{3,4}-\d{4}$

번호앞뒤에 알파벳이붙어도 match가 뜬다. 

^ : 시작

$ : 끝

번호앞에 a를쓰면 no match가뜬다


 

[a-zA-Z]\w*: 첫글자가 대소문자,영숫자,0개이상,
\w 밑줄 문자를 포함한 영숫자 문자에 대응됩니다. [A-Za-z0-9_] 와 동일합니다. 
* 앞의기호가 0이상 , 앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응됩니다.
{0,} 와 같은 의미입니다
+ 앞의기호가 1이상, 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. {1,} 와 같은 의미입니다
? 앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. {0,1} 와 같은 의미입니다.

 

[a-zA-Z]\w*@[a-zA-Z]\w*.(com|net|org)

 

Q. 제목에 전화번호가 포함된 게시글을 조회

REGEXP_LIKE (TITLE, '01[016789]-\d{3,4}-\d{4}');


그동안 조회시 전체목록이나왔다. 게시물이 1억개라면 1억개가 조회되는것

->페이징필요

회원목록에서 상위 5명만 조회하시오

생ㄺ됐던것
5개만 뽑아줘

ROWNUM범위를 바꾸면 조회가 되지않는다..

ROWNUM은 실행해야 만들어진다

ROWNUM이 5이상나올수가없다.

BETWEEN 6 AND 10 은 조회가안된다

ROWNUM은 실행해야 만들어진다

developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

www.regextester.com/

lee-mandu.tistory.com/48

 

 

파일을 드래그하면 그린, 드래그를 놓으면 화이트

백종원이 만든 시판소스를 사용하는것이 실력일까 ?

다 만들어져있는, 소스를 버무리는것은 실력이라고하기어렵다.

함수를 만드는것말고 사용하는 방법떄문에 시간을 쓰는것 비효율

 

dataTransfer를 for in문을통해 키를 얻어내면 키가 출력된다. 그중 types, files를 또 밑에서 출력해보자

dataTransfer는 드래그할때 가져온데이터를 가지는 객체이다. 어떤속성인지 알고싶다면 ?

d

이벤트객체의 속성을 알아낼수있다.

갖고있는 기능을 출력해보자. -> for in문을  쓰면 속성을 알아낼수있다.

어떤객체든 속성을 나열 할 수있다. ->

f파일을 드래그해서 놓으면 파일의 속성이 출력된다.

for in 문은 key를 뽑는다.

 

for(var attr in e.dataTransfer.files[0] : 파일속성들출력

ojdbc8.jar 이라는 파일명이 for in문돌리면 각각 키가나온다.(문자열배열)

 

for(var attr in e.dataTransfer.files[0].name){ 

 console.log(e.dataTransfer.files[0].name);

} : 파일명의 글자하나하나가 배열처럼 인덱스로 출력된느것

ojdbc8.jar 이라는 파일명이 for in문돌리면 각각 키가나온다.(문자열배열) 0,1,2,3,...9 =>문자열일가능성이 큼

e.dataTransfer.files[0].name ->파일명이 출력된다.

for in문을 돌리면 문자열이 하나의 컬렉션으로 인식이 되고 각각 의 데이터를 뽑기위한 key가 나온다.

key가나와서 0,1,2,3,.으로나온다

속성명이 나온다는것은 오브젝트란 뜻이고 

0,1,2,..로 나오는것은 배열이란뜻

types를 for in문에 돌리면 ? 0 이나온건 배열이라는뜻 . 배열의 항목이 한개

console.log에 직접출력하면 속성들을 하나씩 확인해볼 수 있다.

e.dataTansfer.types출력 files가나온다.

포인문으로 속성이몇개있는지찾고, 직접출력

사진을 드래그드랍하면 size정보가뜬다

 

남의것에포커스 x

재사용할 수있게 정리해놓기

 

 

햄버거버튼을 다시누르면 슬라이드가 부드럽게되지않는다. 왜그럴까 

초기값이 100%로 안돌아간다. 다시키면 뚝끊기는문제

ul,테이블 : 텍스트를 감싸는블럭, 인라인만 감싸는블럭

li를 박스처럼쓸수없다.

li는 텍스트만 감싸므로 div가 안에들어갈수없다

인라인태그 = 텍스트, 방이아니다 ,내용물 (텍스트취급 a, span, input, img)

블럭태그 : 행을 다 차지

div가 목록이될수도있다.

 

 

MVC 방법론 :

m,v,c를 각 자르는것

 

NoticeService

-getList() retirm getList("title","")

-getList(f,q)

========================
사용자 입력
=========================

GET 요청에 쿼리스트링을 전달하는 예제
검색 : 
-f / q -> 전달 -> request.getParameter("f");

NoticeService
-getList(){ return getList("title", "");}
-getList(f,q){f와 q를 이용한 검색 쿼리를 작성하는 문제0}

ORACLE 2Step
연산자(산술,비교,관계)와 패턴연산자, 정렬, 집계

-산술연산
-- +, -, *, /
- || 

- 비교연산
-관계연산
-패턴연산

 

홑따옴표로 문자열표현 ' '

다르다 : !=, ^=, <>

UPDATE NOTICE SET HIT = 10 WHERE ID = 21;--조회수업데이트
COMMIT;
UPDATE NOTICE SET WRITER_ID ='김영화' WHERE WRITER_ID ='TUE';--사용자ID명을 이름으로바꿈

SELECT 3 || 10 FROM DUAL;--310
SELECT NAME || ID FROM MEMBER;--김영화21
SELECT NAME || '(' || ID || ')' AS NAME FROM MEMBER;--별칭으로조회
SELECT * FROM MEMBER ORDER BY ID;--ID로 정렬하기
--SELECT ID AS MEMBER_ID, NAME, PWD AS PASSWORD FROM MEMBER;--원하는 컬럼을 원하는 별칭으로조회
--SELECT ID "USER ID", NAME, PWD PASSWORD FROM MEMBER;--AS생략가능, 빈공간""로 묶기
SELECT * FROM NOTICE WHERE WRITER_ID = 'newlec';--''안에 대소문자구분
SELECT * FROM MEMBER;
SELECT * FROM NOTICE;

SELECT * FROM NOTICE WHERE HIT > 3;
SELECT * FROM NOTICE WHERE CONTENT IS NULL;--NULL인것조회
SELECT * FROM NOTICE WHERE CONTENT IS NOT NULL;

SELECT * FROM NOTICE WHERE HIT = 0 OR HIT = 1 OR HIT = 2;
SELECT * FROM NOTICE WHERE 0 <= HIT AND HIT <= 2;--조회수 1~2까지

SELECT * FROM NOTICE WHERE HIT BETWEEN 0 AND 2;--조회수 1~2, 암기할것
SELECT * FROM NOTICE WHERE HIT IN (0,2,7);--조회수 0,2,7결과조회

SELECT * FROM NOTICE WHERE HIT NOT IN (0,2,7);--반대,여집합조회 0,2,7이 아닌것찾아라
--패턴연산자
SELECT * FROM MEMBER WHERE name LIKE '박%';--회원중에서 박씨성을 조회,(사용x->NAME = '박%'; 정확한 박%를찾는다.)
SELECT * FROM MEMBER WHERE NAME LIKE '박_';--언더바는 길이제한, 박씨이고 이름이외자인 회원조회

SELECT * FROM NOTICE WHERE TITLE LIKE '%i%';--i가들어간 제목조회, '%I' 로 끝나는

qh5944.tistory.com/41

velog.io/@underlier12/Servlet-JSP-09-%EC%83%81%ED%83%9C-%EC%9C%A0%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95

velog.io/@underlier12/Servlet-JSP-09-%EC%83%81%ED%83%9C-%EC%9C%A0%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95

객체선택

속성,스타일사용 : "-" ->["-"], border-width ->borderWidth

스타일은 미리 만들 수있는것은 미리 만들어서 사용해라

classList,add,remove,toggle

set/get

appendChild/removeChild

이벤트객체이용하기

선택한 것을 변경하기/선택한것을 제거하기

지역적으로 내앞에것,내아래것 찾아서순회하기 

 


파일업로드

스크립트가 자동으로 파일수집할수없다.

사용자가 인식하게끔한다

브라우저마다 input type="file"형태가 다르다

            <button>파일선택</button> <-css적용 , 버튼을 클릭해서 인풋이 실행되게끔할것

            <input type="file">    <-기능을 버튼한테 위임 (파일업로드창팝업), 스타일이안먹는다.

클릭을 전이

파일을 드래그하게하려면 ?

드래그엔터,드개르리브
원하는 폴더에서 파일은선택해서 파란박스안에 파일을 드래그하면 enter, 밖으로벗어나면 leave출력

사진을 읽어버린다.

-브라우저뷰어로서 행동이발생한다. 정상적으로 드래그를작동시키려면 위코드가필요하다

-모두다 디폴트를 비활성화시킨다.

-기존에있는 드래그행위가 방해되는것을 막는다.

드래그: 

포지셔닝이 스테틱이아니면 제트축존재

1.어사이드

2.스크린

3.헤더

 

햄버거버튼을 눌렀을때 검정화면이 먼저뜨고(screen) 어사이드메뉴가 다음에 왼쪽에서 슬라이드되려면 ? 

1.setTimeout의 시간조정 (screen.style.transition = ".5s" ; )이므로 500을 지정해주면 

0.5초기다렸다가 실행된다. (딜레이시키는것)

앞의 애니메이션(검정색)끝난후 흰색어사이드가나온다 / 시간을늦춘것

2. screen.ontransitioned = function(e) { } 앞의 이벤트가 끝난다음에 실행된다.

screen.style.transition = ".5s";
screen.ontransitioned = function(e){  }

에니메이션끝난다음에 실행
aside.style.left = "30%";

 

[자바 백엔드 프로그래밍]

자바언어 + 플랫폼을 이용한 실현

웹 플랫폼
-서블릿
-- HttpServlet을 상속 받아서 service 함수를 구현하는 것이 전부
-- 추가적인 도구로써 입/출력 도구 : request, response
-- 상태저장의 필요성 때문에 준비된 도구 : 상태저장이 안되는 이유는 서블릿간의 생명주기 문제로 ...
   상태저장 도구 : application/session/request/pageContext/queryString
-서블릿의 문제점
--서블릿은 doGet/doPost를 주로 서비스 하는 프로그램인데 대부분은 GET 요청을 처리하는 서비스이다.
--그래서 주로 출력하는 코드가 HTML을 출력하는 코드가 대부분이다. 이런 문제로 단순반복적인 코드가 많아지게 되어서...
   그것을 도와주는 도움자가 필요하게 되었다.
-JSP

 

코드블럭

-기본블럭 <% 자바문법 %>

-정의블럭 <%! %>

-출력블럭 <%= %>

-사전지시자블럭 <%@ %>

 

오라클

오라클이란 ? DBMS 제품 중하나

DBMS 는 ?

DB?

DDL/ DML / DCL

DML 명령어 :INSERT/SELECT/UPDATE/DELETE

 

JDBC

-Native Library ->JDBC

-JDBC의 구성

-connection / statement/resultSet

-Driver 로드하는 방식도..

-데이터 쿼리하는 코드

-데이터 쿼리하는 코드를 재사용하기 위해  클래스로 분리

-MemberService구현

-getList()메소드를 구현

 

WEB(JSP)에서 JDBC 라이브러리 사용하여 DB연동하기


엔티티만들기 

1. entity 패키지에 Notice클래스를 만든다

2. service패키지에 NoticeService클래스를 만든다

3. Notice클래스에 변수를 먼저 넣어준후, 마우스오른쪽-source->기본생성자,매개변수사용하는 생성자, toString메소드, getter and setter를 만든다.

4. NoticeService클래스에서 List<Notice> getList() ~~ 클래스이름을 넣어준다.

   sql :클래스이름을 넣어준다.

5. 멤버변수를 불러온다.

 

 

서비스구현시 : 서버가 동시에 여러명접속하게하는데 한계가있다. 동시접속자를 늘리려면 요청-연결-종료해줘야한다.

자동으로 끊기긴하지만 연결종료, statement와 resultSet을 닫아준다.

마지막엔 연결종료를한다. 기억하기.

연결을 끊어줘야한다. ->성능개선 WRITER_ID

 

사용자가입력한 값을 서버에 출력해보자.

select name=f와 input name q가 주소창에 전달되어있다.

사용자에의해 검색값이 눌려지면 get요청이된다

 

사용자가 옵션을 선택->검색을 입력하면 ->서버창에 뜬다.

 

action = "" 누구한테 요청할 것인지 ,입력받은내용을 누구에게 요청할지를 정함(생략가능)

action =""을 생략하면 자기자신에게 요청할것으로 정함

 

 

getList()함수를 기본함수, 오버로드함수 각각 만든다.

public List<Notice> getList() throws ClassNotFoundException, SQLException{

return getList("title","");//기본값
}
public List<Notice> getList(String field,String query) 

두개의 컬럼을 하나로 합칠수있어야한다

오라클연산자

 

 

UPDATE NOTICE SET NAME ='김영화' WHERE NICNAME ='TUE';

COMMIT;
SELECT * FROM MEMBER;

SELECT HIT + 1 FROM NOTICE;
SELECT 1 + 1 FROM DUAL;--2
SELECT '1' + 1 FROM DUAL;--2
SELECT 'A' + 1 FROM DUAL;--수치가 부적합합니다,A는 숫자변환불가
SELECT '1' + 1 FROM DUAL;--2
SELECT '1' + 1 HIT FROM DUAL;--별칭생성
SELECT 3 || 10 FROM DUAL;

업데이트 후 커밋하기.

grace-go.tistory.com/79

자식태그, 부모태그, 형제태그

querySelector()사용 : p태그 / .클래스명 / #id명


 

각각 클릭이벤트달면안됨

div끼리 붙어있었다면 previousSibling적용
타이틀안에 콘텐트가펼처진다. 리무브가 실행되면서 다시펼쳐진다.

모든노드대상시 - 빈공백도 텍스트로 여긴다
readonly attribute Node    parentNode; 
readonly attribute Node    firstChild; 
readonly attribute Node    lastChild; 
readonly attribute Node    previousSibling; 
readonly attribute Node    nextSibling; 
readonly attribute List<Node> childNodes;

모든노드대상 : 주석,텍스트,빈공백 모두 노드

모든노드가 아니라 element노드만 할때는 nextElementSibling

특정 앨리먼트만
readonly attribute Element    parentElementNode; 
readonly attribute Element    firstElementChild; 
readonly attribute Element    lastElementChild; 
readonly attribute Element    previousElementSibling; 
readonly attribute Element    nextElementSibling; 
readonly attribute List<Element> children;

Node ElementNode는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.

타이틀이 펼쳤다 접혔다한다

 

nextElementSibling

//다음형제태그이름에 d-none을 제거

e.target.nextElementSibling.classList.toggle("d-none");

title를 클릭하면 title의 형제인 content가 출력된다. 

nextElementSibling vs nextSibling 차이

nextSibling은 태그사이의 공란(텍스트)가 출력된다.

온클릭은 부모에게한번만

업버튼을 누르면 숫자가 올라가고 다운을누르면 숫자가 내려간다. 선택을 누르면 각 아이템박스에 dotborder가생긴다

item.parentNode : 위(up)버튼을 눌렀다면 up의 부모 div =" item "

item.parentNode.querySelector("input") : 부모노드중 input을 선택

 

기본행위를 갖고있는 태그가있다

submit은 눌리면 전송하는기능

a태그는 href주소로 페이지전환행위

페이지를 새로고침하게된다

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

e.preventDefault();적용전에는 메뉴버튼을 누르면 click출력이 사라졌지만 적용후 계속 누적출력된다. 

픽셀의원점이 문서다보니까

fixed 하면 화면보이는영역이 까매진다

스크린의 속성으 ㅣ값이바뀔때 0.5초사이에 천천히바뀐다

 

모든것에 2초라는시간이 걸린다.
햄버거버튼을 누르면 오른쪽에서왼쪽으로나타난다. left값 줄임

웹개발

자바 ->서블릿->JSP->오라클->JDBC->JSP->Collection

 

가변길이배열

util import
기능은같은데 내부적으로사용하는방법이 다르다, 운영방법이다르다.

Arraylist : 연결결됨, 배열, 중간데이터삽입,삭제시 전항목에 대해 이동명령이 필요

LinkedList : 끊어져있음.링크

 

자료구조 : 성능을 고려하면 중요할수있다.

구조가 어떤모양, 어떤것을 취하는것이좋은지, 장단점알고있기

 

set은식별자가없다.

자바에서의 모든객체는 부모를두지않아도 (extends 안해도) object를 상속한다.

newlecExam은 3가지 형식으로 참조할수있다.

숫자는 참조될수없다.

object는 참조형식

참조형식은 공간이있나요 ? 

참조 : 주소

건물에 주소가있다. 창고에도 주소가있다.

참조형식에 주소를 기록할수있다.

축구공에 주소가있나? no ,값형식(숫자3)은 축구공과비슷

숫자3 자체가 주소를갖고있지않기때문에 참조변수에 참조시킬 수 없다.

 

값 형식 : 변수가 을 담는 데이터 형식. 참조 형식 : 변수가  대신 이 있는 곳의 위치(참조)를 담는 데이터 형식. ... 이 메모리 영역 중 값 형식과 관련이 있는 것은 스택 메모리 영역이고, 참조 형식과 관련 있는 것은 힙 메모리 영역이다.

 

3에 알맞는 클래스로 감싸줘야한다 (박싱)

wrapper클래스

수많은 다른자료형을 한번에 관리할 수있다.

 

학생데이터 :학생만

사원데이터 : 사원만

자료형 한정
담고자하는것을 자료형에맞게 사용가능 / list.add("hello") 오류
<>쓰면 요즘방식 : 한종류만 담을때 generic형식으로
일괄적으로 값을뽑아낼수있게 foreach등장

 

add를 6개이상했지만 중복된값이있다면 size가 6미만으로나올수있다.

중복제거에 효율적

 

list:가변길이

 

Map :속성,값 (자바스크립트의 오브젝트)

자바 컬렉션과 제네릭 강의 02-정수형 콜렉션 구현하기

-콜렉션 : 가변길이 배열. 저장소내용을 숨기고 값을 담을 수있다. (어디에 얼마나 저장되는지알필요x)

1.데이터관리 직접할필요없다

2.배열의경우 공간크기가 고정, 콜렉션은공간을 늘려준다.

-제네릭

 

 

자바 컬렉션과 제네릭 강의 03 - Object 클래스의 필요성

최상위 추상클래스

모든 클래스는 object이다. 

object가 필요한 이유는 ?

모든 객체를 섭렵할 수있는 범용 자료형이 필요하다.

object는 모든클래스를 참조할 수있지만 ,list배열에 3을 담을 수없다.

값은 참조하는게아니라 담는것이기때문

문제 : 참조변수는 공간을 갖고있지않아서 갑을 담을 수없다

자바 컬렉션과 제네릭 강의 04 - Wrapper 클래스와 Auto Boxing/UnBoxing

정수값을 담을 수있도록 도와주는 클래스가있다.

integer(); <-Boxing이라고한다

나중에 꺼낼때 unboxing : int x= obj.intValue();

integer x =3 ; 박싱 후 참조하는 형식

integer x = new Integer(3);

자바 컬렉션과 제네릭 강의 05 - Object 콜렉션으로 변경하기

범용자료형이다보니 두가지 문제발생

1. get(0)가 어떤값을 가지고있는지 확실하지않다

2. 형변환

자바 컬렉션과 제네릭 강의 06 - Generic 이란

자바는 모든것을 object형으로 만든다

형변환문제, 데이터를 담을떄의 문제점을 해결하기위해서 값을 넣고 빼는 부분에서 형식을 변환한다.

생성된 데이터형식을 자바에서는 object를 만들고 그 object를 가지고 데이터를 담고 빼줄때

사용자가 전달하는 자료형으로 형변환을 한다.

Generic은 무엇이든될 수있다.

두개의 인자를 가질수도있고, 몇가지옵션이있다

자바 컬렉션과 제네릭 강의 08 - 풀이 : 가변크기 컬렉션으로 변경하기

자바 컬렉션과 제네릭 강의 09 - 자바 언어에 포함된 콜렉션 프레임워크

선형데이터구조 : 링크로 연결된데이터, 삽입삭제가 유연

list.add(3) // 인덱스0인덱스로 식별가능

list.add(5) //인덱스 1

추가할수록 인덱스가늘어난다

 

set은 식별자가없다.  값이 곧 식별자다

'2021 Newlecture > JAVA' 카테고리의 다른 글

StringBuffer클래스  (0) 2021.09.19
클래스변수  (0) 2021.09.18
Wrapper class  (0) 2021.08.22
String , StringBuffer, StringBuilder 차이점  (0) 2021.08.20
자바 총 정리  (1) 2021.04.13
Inner class / Anonymous class  (0) 2021.04.12
인터페이스 구현  (0) 2021.04.12
(추가정리) 추상클래스 와 인터페이스  (0) 2021.04.11

header에서 여백을 가져와야함

메뉴들을 오른쪽으로보내자

새로운버튼이들어와도 모두오른쪽으로 
여백을 마진으로 나눠가진다 

텍스트 수직가운데정렬 : line-height

그외 flex인경우 align-itemscenter;으로 수직가운데 정렬

링크해도 리로드되지않게알아내기

햄버거버튼이 a태그되어있어서 누르면 test가출력후 바로 ㅅ ㅏ라진다 a태그는 링크태그니까 바로 리로드된다

 

SQL의 구성3가지 ?

1. 데이터정의 DDL : create / alter/drop

2. 데이터조작 DML : select / insert/update/ delete

3. 데이터제어 DCL : grant/ revoke(허가)

 

기존코드분리

출력을 분리하자.

웹이든,콘솔이든 재사용하기위해 

 

데이터를 가져오는 코드는 재사용이 가능한 코드인 반면 콘솔 출력이나 입력부분은 다른 ui를 구현할 때까지 재사용이 용이하지않으므로 데이터쿼리를 위한 코드를 부닐해서 재사용하도록 하면 어떨까 ?

 

안돼면 오라클에서 검색해볼것

String sql = String.format("SELECT * FROM MEMBER WHERE NICNAME='%s'",nickname);

사용자가 입력한 값 넣기

String sql = "SELECT * FROM MEMBER WHERE NICNAME="+"'"+nickname+"'";
String.format("SELECT * FROM MEMBER WHERE NICNAME='%s'",nickname")

 


가변크기배열

객체를만들고 담아야한다.

Member member = new Member();

member.setId(id);

member.setName(nicName);

member.setPwd(pwd);

이건 0번째만 입력하는것

생성자만들거나 member객체 생성 후 setter에 대입하기

사용자가 요구하는것을 제공

사용자:"업무자

업무자가원하는 데이터를 만들어주는 서비스

클래스를 impot하는것 클래스명에만 빨간줄이생긴다

기존에작업한 list.jsp파일에 자바코드를 넣어주고

import를 해준다. (ctrl + space누르면 자동 import구문이 추가된다)

원래는 패키지명을 적어줘야하지만 import해주면 빠르고 정확하다

배포되는 라이브러리를연결해줘야한다

우리가한것 :이클립스에서한것

기존에 클래스패스가 필요했었다. 

저작업이 톰캣이필요하다.

관련된 jar를 실행되는 톰캣한테 알려줘야하는데 다른컴퓨터에서 실행될것

내 노트북에있는 경로 jar파일이이라 오류

나중에 실행하는 톰캣한데 "C:"를 알려줘야하는데, 다른컴퓨터에 돌아가는톰캣

 

경로만알려주면 내노트북에있는경로니까 컴파일할수없다.

jar파일이 컴퓨터에같이있어야한다.

웹은 라이브러리도 같이배포되어한다

ctrl+c , ctrl+v

 

 

이벤트객체

벨류가아니고 참조라서 이상한일발생

let이용

 

언어(ES5 without OOjavascript / ES6)

플랫폼( window/document/..)

window

-alert /prompt / confirm

-setTimeout/ setinterval/ clear

 

document

-write()

-선택

--getElementById

--querySelectorAll, querySelector

언어(ES5 without OOJavascript/ES6)
플랫폼(window/document/...)
window
-alert/prompt/confirm
-setTimeout/setInterval/clear....
document
-write()
-선택
--getElementById/getElementsByClassName/getElementByName/..
--querySelector/querySelectorAll
-객체의 속성 / 타일 사용 
--set/get
-객체를 조작하는 것
--appendChild/removeChild/...
-이벤트 객체를 이용하기

버블링 : 자식요소에서 발생한 이벤트가 부모요소로 전파되는것

 

 

 

 

모든 윈도우들에 이벤트를 적용하지않는다.

버블시스템을갖고있기때문

컨테이너에다가 하나만적용

div를 눌렀는데 container가 동시에 실행된다

사용자는 이미지를클릭

집중화

어떤것을 클릭하던 이벤트를 ul이 발생할수있게

img를 클릭하면 ul에전달

자식들이 클릭되면 ul이 실행되게끔

 

부가적으로 전달해주는데이터 ?

이벤트로직이 수십개,똑같은함수를 가지고있다면

뒷단에 누가 클릭됐는지알려준다.

타켓을통해 내자식중에 하나가 클릭됐구나

이벤트가발생한위치의 도형을찾는다

맨앞에있는녀석 td를 찾고, td에위ㅣ임되어있던함수 호출

부모한테도 

 

지금까지 이벤트객체를 쓰지않았었어

자바스크립트는 인자의 개수가 일치하지않아도 문제가없다

사건이 발생:  누가,언제,어디서 

이벤트정보를 담아줘서 전달하는객체-이벤트객체

( )가 눌렸대, 어느 키가 눌렸는지,

마우스가클릭됐데 : 어디를 클릭했는지, 무엇을 클릭했는지, 

그런정보알아내주는객체

div태그(파란원)을 클릭하면 div태그 클래스이름에 aaa가 추가된다

2번째 div태그를 클릭하면, 클릭한 div 클래스명에 selected가 추가되고, css style에 만들어놓은 .selected가 연결되서 보더의 색깔이변경된다

 

 

처음은 널값

첫번째 selecte는

selected.classList.remove("selected");만썻으면 오류발생

if조건을넣는다

선택한 3번에 selected 명이 추가되고 삭제버튼을 누르면 삭제된다 

if을넣어서  하나만선택되도록한다 

 

선택취소를 하려면 ?

다시누르면 취소되는엘리베이터, 안되는엘리베이터

한번선택했는데,기존에선택된녀석인지알아야

add는 1한번만, (중복해서 이름이들어가지않음)

 

1선택후 1을누르면 빨간색이 사라지지않는다 /         지우고 채우고 지우고채구 앞선택과 뒤

1선택후 1을누르면 빨간색이 사라지지않는다. if문에 조건이 더필요하다

selected를 삭제후 toggle로 인해 또 들어간다

        //selected != e.target 같은녀석을 select하면 romove가 안되고 다음toggle이 실행

        //selected != null 이전에 선택한값이 있다면,,아직 현재선택한값반영전

 

+ Recent posts