주니어 기초 코딩공부/Javascript & jQuery 14

[JSP] 전화번호 입력시 자동 하이픈 넣기

안녕하세요~ jju_developer입니다~~ 오늘은 보호자 전화번호를 서버에서 받아서 처리하는 로직중 전화번호를 01000000000 이렇게 입력하더라도, jsp 에서 자동으로 010-0000-0000 이렇게 변환을 하고 싶어서 기능을 추가해보았는데용 공유드리겠습니다~!! 기존 코드는 아래와 같았습니다.   굉장히 기초적이고 빈약한 모습이죠? 이제 숫자만 입력하더라도 자동으로 하이픈이 들어가도록 해보겠습니다! 현재의 전화번호 입력 필드에 하이픈 자동 추가 기능을 적용하는 방법은 다음과 같습니다. UI는 그대로 유지하면서, 전화번호 입력 시 하이픈을 자동으로 추가하는 자바스크립트 기능을 포함시켜 보겠습니다.1. JSP 코드 수정전화번호 입력 필드의 oninput 이벤트 핸들러를 수정하여 autoHyph..

자바스크립트(JavaScript) 사용자 환경 개발 예제

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 자바스크립트 사용자 환경 개발 예제에 대해 알아보겠습니다. 간단하게 자바스크립트는 이렇게 쓰는구나?라고 볼 수 있습니다. HTML의 구조 및 구성 요소 동적인 페이지를 만들기 위해서는 자바스크립트를 써야 합니다. 만들어볼 페이지의 프로젝트 폴더 및 파일 구성은 아래와 같습니다. 프로젝트 파일과 폴더 설명 **js 폴더는 두 가지로 나뉘어 있습니다.common.js에는 모든 페이지에 공통으로 적용되는 스크립트 코드가 작성되어있습니다. main.js는 페인페이지에만 적용되는 스크립트만 포함하였습니다. **css 폴더도 많이 나뉘어져 있습니다. 모든 스타일을 초기화시키거나, 공통으로 적용되는 스타일이 있거나, 메인에만, 터치 시 필요한 CSS를 각각 나..

제이쿼리(jQuery) 비동기 방식 연동, Apache Tomcat설명 및 Ajax 중요 메서드 설명

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 제이쿼리 비동기 방식 연동에 대해 알아보겠습니다. 제이쿼리에서 많이 쓰이는 부분으로 잘 알아보도록 하겠습니다~! 우리는 자바라는 랭귀지를 이용해서 WAS를 구현하고 DataBase 오라클을 사용하여 웹사이트를 구현할 것입니다. 1. 이클립스 설치 2. apache-tomcat-9.0.41 을 다운로드 3. 이클립스의 포트와 오라클의 포트가 같은지 확인하여 8080으로 오라클에서 사용하고 있으면 오라클의 포트 번호를 다른것으로 변경! 0. 서버 클라이언트 이 둘을 이어주는 그대...★ 우선 아래 내용을 설명하기 전에 서버를 먼저 이해를 해보겠습니다. 수업에서 제이쿼리 비동기 방식 연동과 웹서버를 설치를 했는데...? 우선 기초가 없어서 왜..

⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단점, 구성요소 총정리!!!

안녕하세요 jju_developer입니다. 오늘은 제이쿼리 비동기 방식 연동에 대해 설명하다가 따로 설명을 드려야 할 것 같은 정보가 있어서!! 글을 정리하여 적어봅니다~ 책을 읽다보면 서버사이드와 클라이언트 사이드를 많이 접하실텐데요? 웹 프로그래밍에서 서버 사이드 / 클라이언트 사이드가 나뉘고, 어느 쪽에 중심을 두느냐에 따라 프로젝트의 방향이 달라지게 됩니다. 그렇다면 클라이언트 사이드와 서버 사이드는 무엇일까요? 1. 클라이언트 사이드(Client-Side) - 클라이언트(사용자) 측에서 처리하는 것. 클라이언트(사용자)가 입력한 것을 수신해서 HTML로 만들어서 크롬과 같은 애플리케이션에 해석해서 표시합니다. 대표적으로 자바스크립트(Javascript)가 있습니다. 2. 서버 사이드(Server..

제이쿼리(jQuery) 이벤트 등록 메서드, 마우스, 키보드, 포커스 이벤트 개념 및 종류 설명!!

안녕하세요 jju_developer입니다. 이번시간에는 제이쿼리(jQuery)에서의 이벤트 등록 메서드 및 키보드와 이벤트의 개념에 대한 설명입니다~! 1. 이벤트 등록 메서드 이벤트 등록 메서드란?  앞서 자바스크립트 이벤트에서 보았다시피 사이트에 방문자가 취하는 모든 행위를 이벤트라 하며, 이벤트가 발생했을 때 실행하는 실행문을 이벤트 핸들러라고 합니다. 이벤트 등록 메서드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 실행문을 실행시킬 수 있습니다. 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생 ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 error() 이벤트 대..

제이쿼리(jQuery) 객체 조작, 속성 조작 메서드

안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 객체 조작, 속성조작 메서드에 대해서 알아보도록 하겠습니다😆 ▼▼▼제이쿼리 직접 선택자?▼▼▼ https://jju240.tistory.com/146 제이쿼리(jQuery)란? + 선택자 상세 설명 안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼ jju240.tistory.com ▼▼▼제이쿼리 탐색 선택자?▼▼▼ 제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명 안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 탐색 선택자에 대해서 알아보도..

제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드들

안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드들에 대해서 알아보도록 하겠습니다😆 ▼▼▼제이쿼리 직접 선택자?▼▼▼ https://jju240.tistory.com/146 제이쿼리(jQuery)란? + 선택자 상세 설명 안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼ jju240.tistory.com ▼▼▼제이쿼리 탐색 선택자?▼▼▼ 제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명 안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 탐색 선택자에 대해..

제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명

안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 탐색 선택자에 대해서 알아보도록 하겠습니다😆 ▼▼▼제이쿼리 직접선택자?▼▼▼ https://jju240.tistory.com/146 제이쿼리(jQuery)란? + 선택자 상세 설명 안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼ jju240.tistory.com 1. 제이쿼리 탐색 선택자란?  탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있습니다. 1-1 위치 탐색 선택자 위치 탐색 선택자 종류 설명 $("요소"..

제이쿼리(jQuery)란? + 선택자 상세 설명

안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼▼▼ 자바스크립트(JavaScript) 기초 용어설명 및 소스 작성 규칙 설명 안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 자바스크립트에 대한 기초 설명입니다~! 기초를 탄탄하게 배워봅시다~😊 목차 13-1 자바스크립트로 무엇을 할까요~? 13-2 웹 브라우저와 자바스크립트 jju240.tistory.com 1. 제이쿼리(jQuery)란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 기존 JavaScript에서 쉽고 적게, 다양한 일을 수행할 수 있도록 고안하여 만든 함수들의 ..

자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 자바스크립트 문서 객체 모델(DOM)에 대해 알아보겠습니다. 자바스크립트는 웹 문서와 그 안에서 사용한 텍스트, 이미지, 표 등의 모든 요소를 각각 다른 객체로 인지하여 처리합니다. 이렇게 자바스크립트에서 웹 문서의 객체를 다루는 시스템을 문서객체 모델이라고 합니다. 17-1 문서 객체 모델 알아보기 17-2 DOM 요소에 접근하고 속성 가져오기 17-3 DOM에서 이벤트 처리하기 17-4 DOM에서 노드 추가, 삭제하기 ▼▼▼[지난 시간]▼▼▼ 자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기 안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 javascript 에서 말하는 객체 대한 설명입니다~! 목차 16-1 객..