웹프로그래밍 7

[JavaScript] 자바스크립트 정규표현식 Regexp ② - 날짜 입력 조건 | Yoon's Dev

자바스크립트 정규표현식 Regexp ② - 날짜 입력 조건 TO Do. 목표: 정규식을 활용하여 날짜 입력 조건으로 입사연월일이 올바른 형식이면 입사 축하 메세지를 띄우는 기능을 만들자 [날짜 입력 조건] 1. 연도4자리, 월이나 일은 1자리이거나 2자리로 한다. ex) 2018-05-24 1. html 작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 정규표현식 입사연월일 Colored by Color Scripter cs 2. JavaScript작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const date = document.querySelector("#date") const btn = document.querySelect..

[JavaScript] 자바스크립트 정규표현식 Regexp ① - 아이디 입력 조건 | Yoon's Dev

자바스크립트 정규표현식 Regexp ① - 아이디 입력 조건 TO Do. 목표: 정규식을 활용하여 아이디 입력 조건을 만들자 [아이디 입력 조건] 1. 입력되는 전체 길이는 5~8자이어야 한다. 2. 아이디는 숫자와 영문자로만 사용 가능하다. 1. html 작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 정규표현식 아이디 Colored by Color Scripter cs 2. JavaScript작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const id = document.querySelector("#id") const btn = document.querySelector("#commit") console.log(id) const pat..

[JavaScript] 자바스크립트 이벤트 처리와 DOM의 개념 | Yoon's Dev

자바스크립트 이벤트 처리와 DOM의 개념 이벤트 처리와 DOM의 개념 ■ 이벤트 발생과 처리 ✓ HTML 문서에서 발생하는 특정 상황으로 이벤트 발생은 보통 자바스크립트 코드와 연계됨 ex) 버튼 클릭, 마우스 이동, 마우스 클릭, 키보드 입력, 문서 로드, 창 크기 변경 등 ✓ 자바스크립트에서 이벤트를 처리하는 방법 - HTML 태그에 이벤트 처리 속성을 이용 - 문서 객체 모델 DOM 요소에 속성을 추가 - DOM 요소에 addEventListener()로 콜백 함수를 등록 □ 문서 객체 모델 DOM ✓ 자바스크립트에서는 DOM을 통해 HTML 요소에 접근할 수 있음 ✓ DOM은 텍스트로 된 HTML 문서를 프로그램적으로 처리할 수 있도록 문서 구조 전체를 객체화한 것을 의미함 □ DOM의 체계 ✓ ..

[JavaScript] 자바스크립트(JavaScript)란? | Yoon's Dev

자바스크립트(JavaScript)란? 자바스크립트의 정의 자바스크립트의 역사 자바스크립트의 특징 자바와 자바스크립트의 차이 자바스크립트 표준 주요 라이브러리 자바스크립트(JavaScript)란? ■ 자바스크립트(JavaScript)란? ✓ 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다. ✓ HTML에서 웹 내용을 작성하고, CSS로는 웹을 디자인하고, JavaScript로는 웹의 동작을 구현할 수 있다. ✓ 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js 같은 프레임워크를 사용하면 서버 측에서도 사용 가능하다. 1. 자바스크립트의 역사 ■ 자바스크립트(JavaScript)의 역사 ✓ 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brenden Ei..

[HTML5/CSS] form태그의 전송 방식 GET과 POST의 차이점 | Yoon's Dev

form태그의 전송 방식 GET과 POST의 차이점 HTTP ■ HTTP란? □ HTTP(HyperText Transfer Protocol) ✓ W3 상에서 정보를 주고받을 수 있는 프로토콜이다. ✓ HTTP 메서드에는 GET 방식과 POST 방식으로 정보를 주고받을 수 있다. GET ■ GET □ URL에 파라미터를 포함시켜서 요청하는 방식 ✓ URL에 파라미터를 포함시킨다. ✓ 데이터를 헤더에 포함시켜 전송한다. ✓ 캐싱이 가능하다. ✓ 글자 수의 제한이 있다. 특징 ✓ 전송 속도가 POST 방식보다 빠르다 ✓ 데이터베이스에 대한 질의어 데이터와 같은 요청 자체를 위한 정보를 전송할 때 사용된다. ✓ 데이터가 URL 뒤에 붙기에 보안이 매우 취약하다 1 2 3 4 5 6 7 텍스트를 입력하세요 : c..

[Servlet] Servelt 서블릿 기초 문법, 클래스, 메서드, 라이프 사이클 | Yoon's Dev

Servelt 서블릿 기초 문법, 클래스, 메서드, 라이프 사이클 서블릿에 대해... ■ 서블릿에 대해... ✓ JSP 이전에 동적인 웹페이지 콘텐츠를 생성하는 기술로 제공 ✓ 자바의 많은 장점 사용 가능 ✓ HTML, CSS 및 자바스크립트 그리고 웹 디자인과 연동하기에는 단점이 많음 ✓ 서블릿의 존재 이유 . jsp에는 없는 서버 측 프로그램의 기능 . 대규모 프로젝트에 사용되는 프레임워크의 기술을 사용 1. 서블릿의 주요 클래스와 메서드 ✓ HttpServlet: 서블릿을 만들기 위해 반드시 상속해야 할 필수 클래스 ✓ HttpServletRequest: 클라이언트가 데이터를 입력하거나 클라이언트의 정보에 대한 요청 값을 가지고 있는 클래스 ✓ HttpServletResponse: 클라이언트가 요청..

[JSP] JSP 기초문법 선언문(Declaration), 스크립트릿(Scriptlet), 표현식(Expression) | Yoon's Dev

JSP 기초문법 선언문(Declaration), 스크립트릿(Scriptlet), 표현식(Expression) 학습 목표 JSP의 기본 문법인 선언문, 스크립트릿, 표현식과 주석 JSP의 기본 제어문 스크립트릿(Scriptlet) 표현식(Expression) 선언문(Declaration) 주석(Comment) 태그 ■ 스크립트 태그 ✓ 를 사용 ✓ 사이에 빈 공간 문자가 있으면 안 된다. - 종류 종류 태그 형식 사용 용도 지시어(directives) JSP 페이지의 속성을 지정 선언(declaration) 소속변수 선언과 메서드 정의 표현식(expression) 변수, 계산식, 함수 호출 결과를 문자열 형태로 출력 스크립트릿(scriptlet) 자바 코드를 기술 주석(comments) JSP 페이지의 설..