분류 전체보기
-
jQeury 제이쿼리 기본문법, 선택자, 필터JavaScript 2020. 9. 24. 15:55
🎯 자바스크립트 라이브러리 제이쿼리를 알아본다. 제이쿼리(jQuery) 모든 브라우저에서 동작하는(크로스 브라우징) 자바스크립트 라이브러리 무료로 사용 가능한 오픈소스 라이브러리 돔 접근, 이벤트 연결, Ajax 애플리케이션 쉽게 구현 가능 css 선택자를 그대로 사용해서 동적 화면처리 가능 세팅방법 홈페이지에서 라이브러리를 다운받거나 cdn을 사용한다. CDN 사용방법 html에 제이쿼리 cdn 스크립트를 삽입한다. 제이쿼리 다운로드 후 이클립스 ee 다이내믹 프로젝트에서 사용방법 제이쿼리 홈페이지 접속 : https://jquery.com/ compressed는 압축버전이고 uncompressed는 비압축 버전이다. slim은 비동기통신이 빠진거라 안쓸거다. 용량이 다섯 배 이상 차이난다. 원하는 파..
-
Servlet 서블릿 객체와 요청-응답처리JAVA 2020. 9. 20. 23:48
🎯서블릿 객체의 라이프사이클, 요청처리와 응답처리 방법을 알아본다. HttpServlet API 서블릿을 구현하기 위한 핵심 API로서 일반 클래스가 아닌 추상클래스가 제공된다. extends Servlet 상위 인터페이스 Servlet을 상속받는다. 서블릿으로 동작하려면 이걸 상속받아야한다. HttpServletRequest API HTTP 요청정보 처리작업을 담당하는 API이다. 클라이언트가 보낸 정보는 요청정보에 담겨 전달되고 서버에서는 그 요청정보 값을 추출하기 위해 이 객체에서 제공하는 메소드를 사용한다. -주요 핵심 기능 사용자 입력 데이터 처리 ( 폼 데이터 ) 한글 인코딩 요청 header 얻기 세션 처리 쿠키 처리 요청 scope에 데이터 저장 forward 처리 HttpServletRe..
-
클라이언트-서버 구조와 서블릿 ServletJAVA 2020. 9. 18. 23:59
🎯 웹서비스의 작동원리와 MVC 패턴에서 서블릿의 역할과 특징을 알아본다. 클라이언트 - 서버 구조 사용자(Client)가 웹 브라우저에서 url 주소를 입력하면 서버(Server)에 페이지를 요청(Request)하게 된다. 서버는 사용자가 요청한 HTML, JSP, 서블릿 파일을 검색해서 클라이언트의 요청에 응답(Response)한다. 서버에 클라이언트가 요청한 파일이 없을 경우 404 Not Found 에러를 표시한다. URL 구조 URL(Uniform Resource Locator)이란 웹 서버가 인터넷에 존재하는 자원을 검색하고 해석하는데 필요한 네트워크 서비스의 표현식을 의미한다. 주소창에 www.naver.com만 입력해도 뒤에 이런 구조가 만들어진다. 주소창에서 엔터치는 순간 웹 애플리케이션..
-
이클립스 tern 자바스크립트 자동완성 플러그인 설정JAVA 2020. 9. 17. 23:58
🎯 이클립스에서 편하게 자바스크립트 코드를 작성하기 위해 자동완성 플러그인 tern을 설치한다. 1. tern zip 파일 다운받기 먼저 아래 깃허브 링크로 접속해서 Realeses 영역에 있는 tern-java 태그를 클릭한다. https://github.com/angelozerr/tern.java/ tern zip파일을 다운받고 압축을 푼다. 2. 이클립스에서 tern 설치 help-install new software를 클릭한다. tern폴더 경로를 지정한다. 전체선택하고 Next를 클릭한다. 설치가 진행된다. 설치 완료 후 next를 클릭한다. 동의하고 finish를 클릭한다. 완료 후 경고창이 뜨면 install anyway를 클릭하고 이클립스를 다시 시작한다. 3. 프로젝트에 Tern 설정 t..
-
자바스크립트 이벤트 핸들링 연습2JavaScript 2020. 9. 13. 23:11
🎯 자바스크립트의 다양한 이벤트 핸들링 문제를 연습해본다. 이벤트 처리 문제 연습 1. 증감 버튼 +버튼을 클릭하면 값이 1씩 증가하고 –버튼을 클릭하면 값이 1씩 감소하 도록 구현. 만약 값이 1인 상태에서 –버튼을 클릭하면 값이 감소되지 않고 1인 상태로 유지. 갯수 + - 2. 체크박스 선택 결과 출력 취미에 해당하는 체크박스를 선택하고 [결과보기]버튼을 클릭하면 선택 된 값들을 출력하는 예제이다. 취미 야구 농구 게임 결과보기 결과값: 3. 글자수 세기 textarea에 입력한 글자의 개수를 출력하는 예제이다. 글자를 입력할 때 마다 동시에 입력 문자수에 입력한 글자 개수가 출력된다. 글자수 세기 입력문자수: 4. 전체선택 체크박스 전체선택을체크하면모든체크박스가선택이되고,전체선택을해제 하면 모든 ..
-
자바스크립트 이벤트 핸들링 연습1JavaScript 2020. 9. 11. 21:14
🎯 자바스크립트 DOM level0 이벤트 핸들링 문제를 연습해본다. 이벤트 핸들링 문제연습 1. 사용중인 웹 브라우저 정보 출력하기 [보기]버튼을 클릭하면 브라우저 이름,브라우저 버전, 브라우저 온라인 여부를 출력한다. 사용중인 웹 브라우저 정보 보기 보기 브라우저 이름: 브라우저 버전: 브라우저 온라인 여부: 보기 버튼은 클릭이벤트로 info()함수를 호출한다. 자바스크립트의 info 함수는 span영역과 input 값을 셀렉해서 브라우저 정보를 입력한다. 브라우저 정보는 브라우저 관련 Navigator 객체를 사용하면 된다. 2. 특정 URL 접속하기 태그를 사용하지 않고 자바스크립트 코드를 사용하여 특정 URL로 접속해야 한다. [구글 사이트로 가기]버튼을 클릭하면 구글 홈페이지로 접속되고 사이트..
-
자바스크립트 form 객체, 이벤트 핸들링JavaScript 2020. 9. 10. 21:29
🎯 자바스크립트 폼 객체, 이벤트 핸들링, 이벤트 버블링을알아본다. Form 객체 폼은 클라이언트에서 서버에 입력 데이터를 전송하는 역할을 담당한다. 자바스크립트에서는 HTML폼에 form객체가 상호작용할 수 있도록 지원되며 document 객체의 속성으로 설정된다. 접근은 document.forms[] 배열을 통해 접근할 수 있다. 폼 이벤트 핸들러 onSubmit() : 사용자가 데이터를 전송했을 때 발생하는 이벤트 핸들러 onReset() : 리셋 버튼을 클릭했을 때 발생하는 이벤트 핸들러 action과 onSubmit 전송 버튼이 폼 태그 내에 위치하고 있다. 브라우저에서 전송 버튼을 누르면 폼 태그의 onsubmit 이벤트 핸들러가 자바스크립트의 test() 함수를 호출한다. 폼 태그의 액션은 ..
-
자바스크립트 DOM 객체 제어JavaScript 2020. 9. 9. 07:48
🎯 자바스크립트 DOM 구조, 노드 객체 접근방법을 알아본다. DOM( Document Object Model ) 웹페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조이며 문서를 나타내는 최상위 객체는 document 객체이다. 자바스크립트를 사용하여 html 태그에 접근할 수 있다. 웹페이지가 로드될 때, 웹브라우저는 페이지의 DOM을 생성하고 트리구조로 관리한다. 각 객체를 노드라고 한다. 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다. 노드 속성과 메소드 자바스크립트를 이용해 페에지의 모든 태그, 속성, CSS스타일을 변경할 수 있고 이벤트 처리가 가능하다. 부모와 자식노드 관계 DOM 객체에 직접 접근하기 getElementById() - id 값으로 접근한다. document.getEl..