javascript_web

Visual Studio Code 설치 및 기본 설정

window.onload : 페이지 로딩시 자동 호출 // document.write() : 기존 문서지우고 새로 작성 // window.alert()/alert() : 알림창 // console.log : 콘솔에서 확인

.value : 값 확인 // typeof : 타입 확인 // .focus() : 커서 주기 // var 특징: 재사용가능, 선언 후 값을 넣어줘도 된다. 여러개의 타입을 가질 수 있다.

백틱은 키보드 숫자 1 옆에 위치 // 백틱 사용 시 엔터를 입력해도 + 을 해주지 않아도 된다. // 백틱 안에 변수 선언 시 ${변수} 해준다.

var : 동일한 변수 정의 가능, 변수 값 할당 가능 // const : 동일한 변수 정의 불가, 변수 값 할당 불가 // let : 동일한 변수 정의 불가, 변수 값 할당 가능

== : 값을 비교 / === : 타입과 값을 비교 // parseFloat : 실수부도 표시 / parseInt : 정수부만 표시(절삭) / Number : 숫자 모두표시

이벤트 소스, 이벤트, 이벤트 핸들러

객체=> .표기법 : 객체명.속성명 / 대괄호 표기법 : 객체명["속성명"] //객체 안의 값 주는 방법 // 함수=> 함수표현식 : const 함수명 = function(){} / const 함수명 = () => {} // 함수선언식 : function 함수명(){}

오리지널 기법 => 함수명 : function(){return ...} // ECMA 6기법 => 함수명(){return ...}

.slice .substring .substr .replace 대소문자, .trim(), .padStart .padEnd .charAt, .indexOf, .lastIndexOf, .search, .includes, .startWith, .endWith

parseInt, parseFloat, Number, String, .toString, toLocaleString, toFixed, toPrecision, Math.floor

아이디 이용, 태그 이용, 클래스명 이용, CSS 선택자 이용(QuerySelector, QuerySelectorAll)

CSS hover 가 아닌 js 로 표현하기 => 이벤트 이용하기

배열요소 추가 : .push() / .unshift() / .splice(start, 0, element) // 배열요소 삭제 : .splice(start, deleteCount) / .pop() / .shift()

For문 종류 => 일반 For 문 // For ~ of 문 / For ~ in 문 // ForEach 문

글자 거꾸로 하기 : .reverse() // 오름차순 정렬 : .sort() // 내림차순 정렬 : .sort().reverse() // 숫자 오름차순 정렬 : .sort(function(a,b) {return a-b;})

.join() / .split() / .slice()

Map() => 배열명.map(function(){}) / 반복문을 돌며 배열 안의 요소들을 1:1 로 짝지어 새로운 배열 생성 // Map 을 이용한 학생 점수 표현

QuerySelector - For 와 QuerySelectorAll - For 비교 // 합격자 명단 보이기

Array.from() : 노드리스트를 실제 배열로 변환

.find() / filter() / .findIndex() / .some / .every

원하는 값을 얻지 못하는 경우가 많아 잘 사용하지 않는다.

Class 생성 문법

Select 태그의 이벤트는 click 이 아니라 change 이다. // 화살표 함수 사용 시 this 를 인식하지 못한다. // selectedIndex : <option> 태그의 index 번호 // dispatchEvent(new Event('이벤트))

현재 날짜에 관한 표현 출력

setTimeout(함수명,밀리초) , setInterval(함수명,밀리초) // 밀리초 후에 함수명 실행 // clearTimeout, clearInterval

disabled : 활성화, 비활성화 설정 // setAttribute : 비활성화

Quiz 배열 선언, Quiz 표현 => forEach(item,index) -> for~in(보기의 개수가 다른 경우), 채점(정답공개, 보기 체크 유무 확인, 선택한 답 기억하기, 선택한 답과 정답 비교, 정답 개수 표시)

div 2개 // 첫번째 div , 한장의 사진만 보이게 하기 위함 / 두번째 div , img 들을 좌우배치할 태그 ( display : flex )

옆으로 이동하는 효과 없이 사진 변경( 숨겼다 보여주기 )

페이지 이동 : location.href = "위치" // Keycode : 키보드 입력값 // encodeURI("문자열") : 컴퓨터 언어로 변환 / decodeURI(값) : 사람 언어로 변환

절대값, 숫자보다 큰 최소의 정수, 숫자보다 작은 최대의 정수, 나열된 숫자 중 가장 큰 수, 나열된 숫자 중 가장 작은 수, 반올림, 소수부 짜르기(절삭), 양수,0,음수 파악, 0 ~ 1 랜덤 수, 정수로 변환, 실수로 변환, 숫자로 변환

1개만 선택 / 전체선택 버튼

팝업창 띄우기 : window.open(URI, name, specs, replace)

다음 API 이용 (우편번호)

checkValidDate(날짜) // 만나이 - 방법1. class 지정 / 방법2. 함수 직접 선언 // 함수구하기

파일 전송 : <form name = "이름" enctype="multipart/form-data">...</form> // Button 의 기본타입 : submit // .action : 데이터 전송위치 잡기 // Button 전송, Submit 전송

문자열을 처리하는 방법 중 한가지 // 대, 소문자 구분공백, 탭, 개행키 구분어떠한 패턴이 몇 번 등장하는지에 따른 정규표현식

정규표현식 응용

jQuery 다운로드 및 주의사항

페이지 로드 시 실행 // HTML에 Text 넣기 // bind // forEach

val : 해당 값 // hide : 감추는 기능 // show : 보여주는 기능 // CSS 꾸미기 : $("선택자").css({"스타일적용"}) / 스타일 적용방법 : "color" : "" // Toggle : show 와 hide 를 현재 상태에 따라 변경

each 의 파라미터 순서(index, elmt) // 체크박스 선택 유무 : prop, is // 마우스우클릭 금지, 드래그 금지, 선택복사 금지 // 키보드 입력 금지 // 이벤트 호출 방

e.target 이 같은지 다른지 알아보는 방법 : is // Math.random : 0 ~ 1 랜덤 실수 // empty : 내용비우기

Mouseover, Mouseout // prop() : form 태그 내에 사용되어지는 disabled, selected, checked 의 속성값 // attr() : 그 나머지 엘리먼트의 속성값 // index : 복수개의 선택자 안의 선택자 index 이용

선택자.eq(index값) // Each 문과 Eq 사용하여 이전 클릭 원복 // eq(index).trigger('이벤트')

jQuery 에서 제공해주는 hover 메소드 // $(document).on("이벤트종류", "선택자", function(){}) // AddClass, RemoveClass - css 설정을 위해 class 지정

초기화 : onclick=location.href='javascript:history.go(0) // 숫자-> 영어 : String.fromCharCode(숫자) // 영어 -> 숫자 : "영어".charCodeAT(0)

eq 이용 : $("내용위치").eq(index) // $(`내용위치:eq(${index})`)

prop - 체크박스 유무 파악, 속성명 파악 // is - 체크박스 유무 파악, 같은지 다른지 확인

next - 바로 다음 형제태그(요소) // prev - 바로 앞 형제태그(요소) // prepend - 위로(앞으로) 쌓는다. // append - 아래로(뒤로) 쌓는다. // empty - 내용물을 모두 비운다. // remove - 선택자를 제거

데이터 저장 - localStorage, sessionStorage

children, parent, siblings, find, class, id, name

fadeIn - 보이게 하기 / fadeOut - 사라지게 하기 // slideDown - (위~아래)보이게 하기 / slideUp - (아래~위)사라지게 하기

JSP : HTML 문서 속에서 JAVA 코드가 들어있는 것 // Servlet : 웹서비스 기능

JSP 지시어 => <%@ 지시어@> // Page, Include

Context path name : 컨텍스트 패스명 // Method 전송방법 : get, post

Filter 생성 방법

JSP 표준액션 : 모든 태그의 이름 앞에 jsp 라는 접두어가 붙는다. // 지시어 include 와 JSP 표준액션 include 차이

DTO 생성방법 // UseBean 객체 생성하고 불러오기

Servlet - Request

Taglib 다운

EL - Expression Language // JSTL - JSP Standard Tag Library

체크사항.form 태그의 action 이 되어있지 않은 경우

Custom - set, if, choose, when, otherwise, forEach, forTokens

배열 / DTO / MAP - List // RequestDispatcher

substring, length, toUpperCase, toLowerCase, trim, replace, indexof, startsWith, endsWith, contains, containsIgnoreCase, split, join

Formatting - 포맷에 관련된 태그 // ParseNumber : 문자열을 숫자형식으로 형변환

jsp name 명, DTO Field 명, DB 컬럼명 모두 일치하여야 한다.

JDBC Connection

SQL 계정 생성하고 권한주기

자바에서 URL 이동 => response.sendRedirect(""); // 자바스크립트에서 URL 이동 => location.href = "이동하고자하는 url주소";

MYDBCP Setting was 폴더 -> conf -> context.xml xml Library ojdbc8.jar Tomcat 10 -> jakarta.servlet.jsp.jstl-2.0.0.jar -> jakarta.servlet.jsp.jstl-api-2.0.0.jar Tomcat 9 다운 : -> taglib-standard-impl-...

common.controller -> FrontController.java

common.controller -> InterCommand.java // common.controller -> AbstractController.java

Data Transfer Object // Value Object

SQL SQL 폴더와 파일 생성 Open With -> Other -> External programs -> Browse.. -> sql실행파일 Use this editor for all 'sql파일명'files 체크 SQL 문 실행 - SYS 로 작업 - @ 로 접속 만들기 설정한 사용자 이름과 비밀번호 테스트 후 저장하기 - @ 로 작업

index.do // error.do

MemberVO Controller JSP ( Get - Register) JSP ( Post - Message ) Security - Sha256 ( 암호화 ) - AES256 ( 암호화 - 복호화 ) - SecretMyKey DAO DAO_imple 기본 세팅 회원가입 메소드

Header head body >### `` 안의 내용은 계속 변경된다. Footer `` 마무리 후 진행

was 폴더 -> conf -> context.xmlxmlojdbc8.jarTomcat 10\-> jakarta.servlet.jsp.jstl-2.0.0.jar\-> jakarta.servlet.jsp.jstl-api-2.0.0.jarTomcat 9다운 : https&