수업내용/Javascript & jQuery 14

[2022.12.12.월] 복습1 프로젝트 준비, 회원가입

* 처음 해야할 단계 1. 사용자 정보가 담긴 테이블을 표현하는 클래스(객체) -> VO 객체 2. db액세스를 전담(CRUD 작업)하는 객체 -> DAO 객체 - 환경설정 필요 - 라이브러리 (jdbc드라이브, ibatis드라이브) - 소스폴더 (resources / META-INF / ibatis / mappers) -> 파일(ibatis-config.xml, users.xml) * insert 구문 작성시 - default 값이 설정되어있지 않은 애들을 채워줌 * 입력값을 전달하는 방법 1) jsp?보낼값 action=register.jsp?name=value&name=value 2) 폼태그 안의 내용들 action=register.jsp * 이벤트 핸들러 return false -> 기본이벤트 실..

[2022.12.08.목] 자바스크립트 관련

* 자바스크립트 안에서 list를 for문 돌면서 꺼내기 let contactList = map.contactList; for(let index in contactList){ let contact = contactList[index]; 자바스크립트의 변수 var 변수의 범위가 함수다. - 변수 yz가 { } 블록 안에서만이 아니라 블록 밖의 함수안에서도 유효 변수 호이스팅(변수 끌어올리기)이 적용된다. - 자바스크립트 특징: 변수 내에 선언된 변수들을 젤 위로 끌어올림 -> 그래서 블록 밖에서도 유효한 것 - 변수들을 젤 위에서 콘솔에 찍어도 오류 X -> undefined가 출력 변수명이 중복되어도 오류가 발생하지 않는다. let 변수의 범위가 블록이다. - 변수 yz가 블록 안에서만 유효, 블록 밖에..

[2022.12.07.수] 소스트리 이용해서 깃 commit, push, pull 하기

원격저장소에서 메인이라는 브랜치를 각 사용자들이 로컬저장소로 내려받음 -> 동시에 수정하면 충돌 -> 각자 자기만의 가지를 만듦 -> 메인에 영향이 안감 -> 각자 개발을 하고 -> 다시 메인에 합침 -> merge -> 그걸 다시 내려받음 (새로운 브랜치를 딸 때마다 내려받음) 1. 일단 main 브랜치에서 시작 2. main 브랜치에서 원격 저장소의 최신 내용을 내려받는다 (소스트리에서 main 상태에서 pull) (main 상태에서는 절대로 코딩 x ) 3. 새 브랜치를 생성한다. --- 본격적인 작업 시작 4. 새 브랜치에서 코딩을 시작한다. 5. 코딩이 완료되면 변경된 내용을 로컬 저장소에 저장한다. 소스트리에서 commit 커밋하지 않은 변경사항 -> 모두 스테이지에 올리기 커밋 6. 원격 저..

[2022.12.5.월] jQuery를 이용한 AJAX

1. AJAX(Asynchronous JavaScript and XML) 자바스크립트와 XML(JSON)을 활용한 서버와의 비동기 데이터 통신 XMLHttpRequest 객체를 활용해서 서버와 데이터 통신을 한다. 1-1. 특징 자바스크립트로 서버와 데이터 통신이 가능해졌다. 페이지의 리로딩없이 화면을 일부분을 갱신하는게 가능해졌다. (서버로부터 데이터를 가져와서.) 대표적인 기능 - 구글 맵 - 포털사이트 검색필터 기능 등 1-2. AJAX $.get(url, data, 콜백함수); - url : 요청 URL. ajax 요청을 처리하는 jsp의 경로 - data : jsp로 보내는 요청파라미터 정보 - 쿼리스트링 형식 "name=value&name=value" - 자바스크립트 객체 형식 {name:va..

[2022.12.02.금] jQuery DOM 돌아다니기

1. HTML DOM 돌아다니기 : 현재 선택된 엘리먼트를 기준으로 다른 엘리먼트와의 관계를 활용해서 특정 엘리먼트를 검색하는 것이다. 부모, 조상 검색 메소드 $(selector).parent() selector로 검색된 엘리먼트의 부모 엘리먼트를 선택 $(selector).parents() selector로 검색된 엘리먼트의 모든 조상 엘리먼트를 선택 $(selector1).parents(selector2) selector1으로 검색된 엘리먼트 조상중에서 selector2에 해당하는 모든 조상 엘리먼트들 선택 $(selector1).closest(selector2) selector1으로 검색된 엘리먼의 조상중에서 selector2에 해당되는 가장 가까운 조상 엘리먼트 선택 -sample15-dom j..

[2022.12.1.목] jQuery HTML DOM 조작 (조회, 변경, 추가, 삭제)

1. HTML DOM 조작 (텍스트 콘텐츠/html 콘텐츠/폼입력값/속성/프로퍼티 조회, 변경) 엘리먼트, 엘리먼트의 속성, 엘리먼트의 컨텐츠를 조회/변경/추가/삭제 작업과 관련된 기능을 제공한다. 조회기능 $(selector).text() 엘리먼트의 텍스트컨텐츠를 반환(태그가 제외된) $(selector).html() 엘리먼트의 HTML컨텐츠를 반환(태그가 포함된) $(selector).val() 폼입력요소의 값을 반환 $(selector).prop(name) 엘리먼트의 프로퍼티값을 반환(checked, disabled, readOnly 등) $(selector).attr(name) 엘리먼트의 속성값을 반환(name, id, class, type, src, href, alt, title ... 등) *..

[세미프로젝트] * 엔티티 도출

게시판 프로젝트 1. 엔티티 도출 과정 - 게시글 정보 저장/관리 - 게시글의 리뷰 정보 저장/관리 - 사용자 정보 저장/관리 2. 각 엔티티의 속성 도출 과정 - 게시글 엔티티의 속성 : 번호, 제목, 작성자, 내용, 리뷰개수, 조회수, 삭제여부, 등록일, 수정일, 첨부파일명 3. 엔티티간의 관계 도출 과정 일대다에서 다에 해당하는 쪽에 foreign키가 있음

[2022.11.30.수] jQuery 이벤트

자바스크립트 이벤트 처리 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..

[2022.11.29.화] jQuery 선택자

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"); // 자손선택자..

[2022.11.25.금] web-board 에 자바스크립트 기능 (입력값 누락방지, 검색)

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