차곡차곡

1. 테이블 생성 create table member_2( id varchar2(15), password varchar2(10), name varchar2(15), age number, addr varchar2(40), gender varchar2(5), email varchar2(30), primary key(id) ) 2. 로그인폼 작성(jsp) 로그인 페이지 아이디 : 비밀번호 : 로그인 회원가입 3. 회원가입을 위한 joinForm.jsp 작성 회원가입 페이지 아이디 비밀번호 이름 나이 주소 성별 남자 여자 이메일 회원가입 다시 작성 4. joinProcess.jsp 작성 5. 아이디와 비밀번호를 확인해서 로그인을 시키는 작업 _ loginProcess.jsp 입력받은 id에 대한 all 정보를 ..

Storage 사용 웹 사이트의 정보를 저장하기 위해서 반드시 서버가 필요한 것은 아니다. 사용 목적에 따라 클라이언트 저장소 역시 좋은 역할을 할 수 있다. 일반적으로 클라이언트 저장소를 생각하면 가장 먼저 쿠키 저장소를 떠올리겠지만 HTML5에는 좀 더 효과적인 클라이언트 저장 공간을 제공한다. localStorage & sessionStorage API :html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘다 저장공간으로 사용 할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다는 점이 다른점이다. 대부분..

addEventListener( ) & removeEventListener( ) addEventListener()는 EventTarget의 주어진 이벤트 유형에 EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다. "click" >> 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열 removeEventListener() 메서드는 이전에 EventTarget.addEventListener()로 EventTarget에 등록했던 이벤트 리스너를 제거한다. addEventListener(1,2,3) 1.이벤트 명 : 이벤트 리스너를등록할 이벤트 타입을 문자열로 전달한다. 2.실행할 이벤트 리스너 : 지정된 이벤트가 발생했을때 실행할 이벤트리스너 전달. 3.이벤트 전파 방..

그라데이션 그래디언트 : 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미 (그라데이션) CSS3에서 제공하는 그래디언트 선형 그래디언트(linear gradients) 원형 그래디언트(radial gradients) 선형 그래디언트 (선형 그래디언트를 만들기 위해서는 최소한 두개 이상의 색상 지정점이 필요) [선형 그라데이션] //방법1 createLinearGradient(시작점 x1,y1 , 끝점x2,y2); >> 선형 그라데이션 지정 //방법2 background : linear-gradient(진행방향, 색상 지정점1, 색지정점2, ...); (예)background:linear-gradient(green, yellow); [원형 그라데이션] createRadialGradient..

[ 웹 페이지 그래픽의 전통적인 방법 ] 사진이나 그림 태그 이용 그래픽은 자바 애플릿이나 플래시 등 플러그인 사용 >> 문제점이 많다. [ 캔버스 도입 ] 플러그인의 도움 없이 자바스크립트 코드로 웹 페이지에서 자유롭게 그래픽을 수행 할 수 있는 캔버스 기능 도입 캔버스 기능은 새로 도입된 태그로 브라우저 화면상에 할당된 공간에서 이루어 진다. 캔버스의 그래픽 그리기는 자바스크립트 코드로만 가능하다. 태그 형식 이태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트 width , height : 캔버스가 만들어지는 영역의 크기(픽셀단위)로 생략가능, 각각 디폴트 300, 150픽셀 브라우저는 태그가 만들어진 영역에 사각혀으이 빈 캔버스 공간을 할당하며, 하나의 웹 페이지에 여러개의 캔버스를 만들 수 ..

JSON 객체 JSON (javascript Object Natation) 객체는 클라이언트와 서버의 통신에서 데이터를 주고 받을때 주로 이용한다. 프로그램 종류에 구애 받지 않고 가벼운 텍스트 형태로 만들어 졌다는 장점이 있어 개발자들이 많이 사용한다. JSON은 lightweight(저중량) 데이터를 교환하는 형식으로 컴퓨터 시스템이 파싱하고 생성하기 쉽게 만들어 졌다. JSON의 특징 JSON은 Javascript를 기반으로 만들어 졌으며 특정 언어에 종속되지 않는 완벽한 독립적인 텍스트 형식을 갖고 있다. JSON 객체의 데이터는 이름(key) / 값(value)의 쌍으로 구성한다. {로 시작해서 }로 끝난다. key와 value 사이는 : 로 구분한다.그리고 각각의 데이터와 데이터 사이에는 ,(..

Navigator : 브라우저에 관한 정보 알려줌 브라우저에 관한 정보 출력 아래에 이 브라우저에 관한 여러 정보를 출력합니다. Screen : 화면에 관한 정보 알려줌 스크린 장치에 관한 정보 산수 문제를 풀어 봅시다. 수식을 계산하여 답을 입력하고 채점 버튼을 누르세요. 5 * 6 7 + 5 * 3 23 * 2 35 - 7 50*3 채점 0 random()을 이용한 산수 계산 만들기 산수 문제를 풀어 봅시다. 자동으로 문제가 만들어 집니다. 답 입력 후 채점 버튼을 누르세요. 다시 버튼을 누르면 새로운 문제가 출력됩니다. 나누기 결과는 정수입니다. 채점 0 다시 HTML 삽입 미리보기할 수 없는 소스 이벤트 리스너 추가하기/ 제거하기 시작 정지 HTML 삽입 미리보기할 수 없는 소스 History H..

screen 객체 : screen은 브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있는 객체이다. screen객체는 다음과 같이 점근한다 window.screen 혹은 screen screen 객체의 프로퍼티 availHeight 작업 펴시줄 등을 제외하고 브라우저가 출력 가능한 영역의 높이 availWidth 작업 표시줄 등을 제외하고 브라우저가 출력가능한 영역의 폭 pixelDepth 한 픽셀의 색을 나타내기 위해 사용되는 비트수 colorDepth 한 픽샐의 색을 나타내기 위해 사용되는 비트 수로서 pixelDepth와 동일. 대부분의 브라우저에서 지원되므로 pixelDepth 보다 colorDepth를 사용할것을 권장 height 스크린의 수직 픽셀수 width 스크린의 수평 픽셀수 hist..

BOM ( Browser Object Model ) : DOM 객체들은 HTML 페이지의 각 HTML 태그들을 객체화 한 것으로 자바스크립트 코드로 화면에 출력된 HTML 태그의 콘텐츠나 모양을 변경하기 위해 설계되었다. BOM은 윈도우, 윈도우에 로드된 문서의 URL, 브라우저가 출력된 스크린장치, 브라우저의 종류와 기능 등 브라우저와 브러우저가 실행되고 있는 환경을 자바스크립트 코드로 접근하고 제어 할 수 있도록 설계된 객체들의 그룹을 일컫는다. BOM의 종류 : 대부분의 브라우저들은 다음의 BOM을 제공하며, 개발자들이 자바스크립트를 이용하여 브라우저와 관련된 정보를 얻고 브라우저와 윈도우를 제어하도록 한다. window 객체는 브라우저가 제어하는 BOM 객채의 최상위에 존재한다. window na..

DOM(Document Object Model) : 문서 객체 모델 문서 객체 모델을 사용해서 HTML 페이지에 태그를 추가, 제거, 수정 할 수 있다. DOM은 반드시 HTML만 가능한 것이 아니다. HTML, XML, 사용자 정의 등 다양하다. 태그를 객체로 본다. [ HTML의 DOM의 구조 ] document 객체의 요소를 추출 하는 메소드 선택자는 크게 2가지로 구분 할 수 있다. 요소 속성 명으로 선택해 오는 원거리 선택자와 가까이에 있는 요소를 선택하는 근거리 선택자가 있다. 메소드 의미 getElementById( "id명" ) 태그의 id명이 일치하는 문서 객체를 가져오는 선택자 getElementByName( "name명" ) 태그의 name명이 일치하는 문서 객체를 가져오는 선택자 g..