아좌좌

자바스크립트 이벤트 처리 1. 인라인 이벤트 처리 버튼 function handler( ) { 이벤트처리 코드 } 2. 엘리먼트의 이벤트 프로퍼티에 이벤트 핸들러 등록 버튼 var el = document.getElementById("btn-del-user"); el.onclick = function( ) { 이벤트처리 코드 } 3. 엘리먼트의 addEventListener 메소드로 이벤트 핸들러 등록 버튼 var el = document.getElementById("btn-del-user"); el.addEventListener('click', function( ) { 이벤트처리 코드 } ); jQuery의 이벤트 처리 1. .on메소드로 이벤트 핸들러 등록 버튼 $('#btn-del-user').on..

1. jquery - 경량의 자바스크립트 라이브러리 - 크로스 브라우징을 지원 - CSS3 선택자를 지원 * 선택자 document.querySelectorAll("p"); // 태그선택자, 태그명이 p인 엘리먼트 선택 document.querySelectorAll(".btn"); // 클래스선택자, class="btn"이 포함되어 있는 엘리먼트 선택 document.querySelectorAll("#users-table"); // 아이디선택자, id="users-table"인 엘리먼트 선택 document.querySelectorAll("div p"); // 자손선택자, div 안에 있는 p 엘리먼트 선택 document.querySelectorAll("#users-table td"); // 자손선택자..

1. 중단점 : 반응형 레이아웃 2. 컨테이너 "container" - 정중앙에 위치 3. 그리드 (1) 레이아웃 나누기 헤더부 일정관리 메뉴 대기 일정 진행 일정 등록 현황 일정 현황 오늘 일정을 확인하세요. 순번 제목 우선순위 예정일 100 프로젝트 주제 선정 매우 높음 2022년 11월 28일 100 프로젝트 주제 선정 매우 높음 2022년 11월 28일 푸터부 (2) 메뉴부 나누기 헤더부 메뉴부 콘텐츠 콘텐츠 콘텐츠 콘텐츠 빠른 메뉴부 (3) 칸 나누기 전체 너비 사용 전체 너비 사용 1 of 3 사용 2 of 3 사용 3 of 3 사용 1 of 3 사용 2 of 3 사용 3 of 3 사용 1 of 3 사용 2 of 3 사용 3 of 3 사용 1 of 3 사용 2 of 3 사용 3 of 3 사용 ..

1. 회원가입 기능 아이디, 비밀번호, 비밀번호 확인, 이름, 이메일 -> 필수입력 자바스크립트 추가하기 - form.jsp 아이디 비밀번호 비밀번호 확인 이름 이메일 취소 회원가입 2. 로그인 기능 입력값 누락되지 않는 자바스크립트 - login.jsp 입력값 누락 아이디 비밀번호 로그인 회원가입 3. 검색기능 (동적 쿼리) 검색어가 없을 때와 있을 때, 조회순 판매량 순으로 정렬할 때마다 SQL을 각각 작성해야 하면 비효율 -> 다이나믹 쿼리 (동적 쿼리) !! 검색어 포함하는 부분이 어떨 때는 포함되고, 어떨 때는 포함되지 않도록 하고 싶어 -> 다이나믹 쿼리 ( ) -> 언제 포함하고싶은데? -> 조건 삽입 map에서 keyword값을 찾았는데 null이 아닐 때 - list.jsp 비어있는 pa..

Event 객체 프로퍼티 프로퍼티명 설명 target 이벤트가 발생된 엘리먼트객체를 반환한다. type 발생된 이벤트이름을 반환한다. dataTransfer drag & drop에서 값을 전달하기 위한 객체를 반환한다. pageX, pageY 마우스의 현재 좌표를 반환한다. which 입력한 문자의 아스키코드값을 반환한다. Method 메소드명 설명 preventDefault() 해당 엘리먼트에 특정 이벤트 발생시 실행할 기본동작이 지정되어 있는 경우 그 동작의 실행을 취소시킨다. 태그 안에서 button, submit 버튼 클릭시 폼이 전송되는 것 태그 클릭시 지정된 링크로 이동하는 것 stopPropagation() 이벤트 버블링을 중지시킨다. stopImmediatePropagation() 이벤트 ..

1. DOM (Document Object Model) 문서객체 모델 HTML, XML 등의 문서를 엑세스하는 표준을 정의하고 있다. DOM은 w3c에서 HTML, XML 문서를 다루는 표준(인터페이스)를 정의한 것이다. DOM에 정의된 표준에 대한 구현은 브라우저 제조사, 프로그래밍 언어 개발사, 라이브러러 개발자가 담당한다. DOM에서 정의한 표준은 브라우저 종류나, 프로그래밍 언어의 종류에 상관없이 동일한 API로 구현되어 있다. 1-1. DOM의 특징 모든 엘리먼트는 객체다. 모든 엘리먼트의 프로퍼티를 정의하고 있다. 엘리먼트를 엑세스하는 메소드를 정의하고 있다. 모든 엘리먼트의 이벤트를 정의하고 있다. 1-2. DOM의 주요 객체 객체 설명 Document 웹 브라우저 HTML 문서를 로딩했을 ..

1. DAO 클래스에 싱글턴 패턴을 적용함 (Dao, Service 같은 객체는 싱글턴 패턴 적용) - 싱글턴 패턴이 적용된 클래스는 프로그램이 실행되는 동안 오직 한 개의 객체만 생성해서 사용한다. TodoDao 객체를 매 JSP 마다 생성해야 하는데, 한번만 생성하기 - 싱글턴 패턴 public class TodoDao { // TodoDao 클래스가 메모리에 로딩되는 즉시 TodoDao객체를 생성해서 정적변수에 저장한다. (정적변수 -> 메모리에 로딩되는 순간 딱 한번만 객체 생성됨) private static TodoDao instance = new TodoDao(); // 생성자의 접근제한자를 private 설정해서 외부에서 이 객체를 new로 생성할 수 없게 한다. private TodoDao..

자바스크립트 : 프로토타입을 이용해서 객체 생성 1-11. 자바스크립트의 객체 자바스크립트의 객체 클래스(설계도)가 필요없다. 객체의 구성요소는 name:value의 쌍으로 이루어져 있다. 객체 생성 후에도 객체의 구성요소를 추가/변경/삭제 가능하다. 자바스크립트 객체는 자바의 Map과 유사하다. 자바스크립트 객체의 생성 빈 객체의 생성 var obj = { }; 구성요소를 가지고 있는 객체 생성 var obj = {no:100, title:"이것이 자바다", author:"신용권", price:35000, discountRate:0.15, onSell:true}; 생성된 객체에 구성요소 추가하기 var obj = { }; obj.no = 100; // obj -> {no:100} obj["title"]..

1. 자바스크립트 서블릿, JSP의 응답으로 받은 HTML에 대한 차후 조작 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다. java와 문법적 유사성이 많아서 쉽게 배울 수 있다. 인터프리터(Interpret) 프로그래밍 언어다. (컴파일 과정없이 소스가 실행파일로 사용된다.) 1-1. 자바스크립트로 할 수 있는 것 HTML 컨텐츠를 변경할 수 있다. 브라우저를 통해서 현재 보고 있는 웹 페이지를 변경할 수 있다. HTML 태그의 속성을 변경할 수 있다. HTML 컨텐츠의 스타일을 변경할 수 있다. CSS 변경할 수 있다. 사용자 상호작용하는 프로그램을 작성할 수 있다. 이벤트모델을 활용한다. 브라우저의 도움없이 서버와 데이터통신을 할 수 있다. AJAX기술을 활용하면 가능하다. 1..

1. I/O (Input/Output) Stream - 입출력 시 데이터의 흐름 1-1. ByteStream 한 번에 1byte씩 읽거나 쓰는 스트림 텍스트데이터와 바이너리데이터(그림, 영상, 파일)를 읽고 쓸 수 있다. 종류 InputStream 리소스로부터 1byte씩 읽어오는 스트림 주요 메소드 int read() - 1byte씩 읽어서 정수로 반환한다. int read(byte[ ] buf) - 1byte씩 읽어서 byte[ ] 배열에 순서대로 저장하고, 배열에 저장된 개수를 반환한다. void close( ) - 읽기 작업을 위해서 사용했던 컴퓨터의 자원을 반납한다. OutputStream 리소스로 1byte씩 출력하는 스트림 주요 메소드 void write(int value) - 1byte씩 ..