'자바스크립트' 태그의 글 목록

JAVA 2020. 12. 4. 22:10

🎯 서블릿&JSP 게시판에 카카오 지도 API를 사용한 글쓰기 기능을 구현해본다. 카카오 지도 API를 사용하여 지도 정보를 포함한 게시글 작성 기능을 구현했습니다. 지도 검색창에 키워드로 위치 검색 후 나타나는 마커를 클릭하면 지도 아래에 선택된 좌표가 표시됩니다. [저장]버튼 클릭시 게시물 내용과 함께 선택된 좌표가 DB에 저장됩니다. 개발환경: 서블릿&JSP, 마이바티스, 오라클DB 준비사항: 게시판 DB, 게시판 모델 DTO 1. 카카오 App Key 발급받기 카카오 지도 API 가이드 👉 https://apis.map.kakao.com/web/guide/ [준비하기] 영역을 읽어보고 카카오 개발자 사이트에서 자바스크립트 App Key를 발급받으세요. 2. 사용할 지도 샘플 선택 https://a..

jQuery 제이쿼리 이벤트, Ajax 비동기 처리

JavaScript 2020. 9. 25. 23:58

🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax 비동기 처리 방법을 알아본다. jQuery 기본 Event .ready(function) HTML문서의 모든 DOM요소들이 완벽하게 사용할 준비가 되면 호출되어 function함수가 실행된다. 파라미터 안에 이벤트 핸들러나 jQuery 코드를 추가한다. 외부 리소스나 이미지와 상관없이 모든 돔 요소들이 준비되면 바로 호출되기 때문에 window.onload보다 빠르다. .on(events[,selector][,data],function) .on() 메서드는 .bind() 메서드와 마찬가지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. .on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다. new $(functio..

이클립스 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..

자바스크립트 이벤트 핸들링 연습2

JavaScript 2020. 9. 13. 23:11

🎯 자바스크립트의 다양한 이벤트 핸들링 문제를 연습해본다. 이벤트 처리 문제 연습 1. 증감 버튼 +버튼을 클릭하면 값이 1씩 증가하고 –버튼을 클릭하면 값이 1씩 감소하 도록 구현. 만약 값이 1인 상태에서 –버튼을 클릭하면 값이 감소되지 않고 1인 상태로 유지. 갯수 + - 2. 체크박스 선택 결과 출력 취미에 해당하는 체크박스를 선택하고 [결과보기]버튼을 클릭하면 선택 된 값들을 출력하는 예제이다. 취미 야구 농구 게임 결과보기 결과값: 3. 글자수 세기 textarea에 입력한 글자의 개수를 출력하는 예제이다. 글자를 입력할 때 마다 동시에 입력 문자수에 입력한 글자 개수가 출력된다. 글자수 세기 입력문자수: 4. 전체선택 체크박스 전체선택을체크하면모든체크박스가선택이되고,전체선택을해제 하면 모든 ..

자바스크립트 이벤트 핸들링 연습1

JavaScript 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..

자바스크립트 Built-In 내장객체

JavaScript 2020. 9. 8. 18:31

🎯 자바스크립트 빌트인 객체를 알아본다. 객체의 프로퍼티와 메소드 객체는 프로퍼티와 메소드를 사용해서 표현한다. 프로퍼티는 객체의 상태를 저장하는 변수를 뜻하며 메소드는 객체의 동작을 지정하는 함수를 의미한다. 자바스크립트는 객체 생성시 생성자 함수를 사용하며 런타임시 객체에 멤버를 동적으로 추가할 수 있다. 내장객체란? 내장(built-in)객체는 자바스크립트 시스템에서 정의된 객체로 그냥 불러서 사용할 수 있다. 데이터 관련 객체와 브라우저 관련 객체, HTML 관련 객체(DOM)가 있다. 데이터 관련 객체 String 객체 문자열과 관련된 데이터를 관리하는 객체로 new를 이용해 객체를 생성하거나 var str = new String(“hello”); 리터럴을 이용해 객체생성을 할 수 있다. var..

ABOUT ME

미현 개발 TIL 미현 개발 TIL

티스토리툴바