본문 바로가기
[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) 고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이지용, 개인정보 입력 후, 자바스크립트를 이용하여 유효성 검사를 한 후 ajax의 json type으로 데이터를 넘겨주는 작업을 하겠습니다. 구현내용: · UI: html 태그를 사용 · getElementById 를 이용한 객체 접근 방식 사용 · 올드한 방법인, form을 이용한 객체 접근 방식 사용 · 자바스크립트를 이용한 유효성 검사 · ajax json 타입으로 데이터 전송 유의사항: · ajax url 연결 안 됨 · 주소검색은 api 연결 안 됨 · 먼저 제이쿼리 스크립트 연결 getEleme..
[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기 팝업창 코드 .box { text-align: center; margin-bottom: 10px; } .bgColor { width: 200px; height: 200px; margin: 0 auto; background-color: #f9b514; } 한번에 보기
[js] 자바스크립트 모달창(팝업창) 구현 자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달창 open · 모달창을 제외한 배경(background)는 어두운 검은 배경 · X 버튼 클릭시 모달창 close · 검은 배경 클릭시 모달창 close 모달창(팝업창, 다이얼로그)창 띄우기 예제 html, javascript 모달창 open Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus cons..
[js] DOM과 BOM의 차이점 자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미지 등)으로 구조화 합니다. 이 요소들은 상,하위 구조나 병렬구조로 체계화 되는데 이 웹문서(document)에 대한 모든 내용을 담고있는 객체를 DOM 이라고 합니다. document는 window의 document (html 문서) 입니다. document object model(돔 객체)는 html과 javascript를 연결해주는 통역사 같은 역할입니다. 웹페이지 구조는 이 모든 태그들을 감싸고 있으며, 그내부는 다시 와 로 나누에 집니다. 태그에는 의 구조로 나뉘고, ..
[js] let vs const vs var (ft. var의 문제점, 호이스팅) 변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담고 있는 값을 의미합니다. ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다. 더 이상 var 키워드는 사용하지 않는 것을 추천합니다. var의 문제점 ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다. 왜 더이상 사용하면 안 될까요? 변수는 선언하고 나서 값을 할당하는 것이 정상입니다. 하지만 var를 사용할 때는 이상하게도 선언하기 전에 변수의 값을 할당해도 작동이 됩니다. 예제 - var : 호이스팅 발생 ..
[js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를..
[js] input option 값 출력하기(ft. onchange onfocus) 홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용 -> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜 onchange, innerHTML 이용 · 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때) -> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때 1. 아래 label값이 탐구 1/탐구 2로 자동 리셋 2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋 if( value == "" ..
[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라고 생각하시면 됩니다. 이전 포스트가 궁금하신 분은 아래 링크로 이동해주세요. https://goddino.tistory.com/20 [js/jQuery] 카운트업 숫자 올라가는 효과 구현하기 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. 이 효과를 javascript, jQuery를 이용하여 간단하게 구현하도록 해보겠습니다. 아래 소스를 확인해 주세요. 1. html 99 2. css .n goddino.tistory.com setInterval() / clear..
[js] 홈페이지 배너 팝업창 띄우기, 창닫기 홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에 띄울 배너를 만들어야겠지요? 저는 아래의 이벤트 배너를 사용하겠습니다. (사이즈: 500X500 px) window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 ..
[js] 개인정보 이메일 유효성 검사 후 출력하기 문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이메일 주소안에 @, 도메인 주소가 포함되어 있으면 정상 · 정상일 경우, 정상 메시지 출력 · 비정상일 경우, 비정상 메시지 출력 · 여기서 핸드폰 번호 뒤 4자리는 정보가 노출되지 않도록 '*'로 출력 문자열 객체 메서드 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 indexOf("찾을 문자") 문자열 왼쪽에서 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 (만일 찾는 문자가 없으면 -1을 반환) match 문자열에서 왼쪽부터 ..
[js] 디데이 시간 날짜 카운트 계산하기 (ft. 자동 날짜 구하기) javascript를 이용하여 현재 날짜와 특정 날짜, 디데이를 구현합니다. 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다. 날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수 있습니다. 자바스크립트 날짜 메소드 getFullYear() : 연도 정보를 가져옴 getMonth() : 월 정보를 가져옴(현재 월 -1) getDate() : 일 정보를 가져옴 getDay() : 요일 정보를 가져옴(일:0~토:6) getDay/getHours/getMinutes/getSeconds() : 시/분/초 정보를 가져옴 getTime : 1970년 1월 1일부터 경과된 시간을밀리초로 표기함 디데이 계산기 만드는 방법 날짜 정보 객체를 이용하여 현재 날짜 정보와 특정 날짜 정보를 가..
[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) 숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다. setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고, setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다. setInterval() : - 코드를 일정 시간 간격으로 반복 실행 - 기본형: setInterval(functi..
[js/jQuery] 탭메뉴 구현하기 javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태 · 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감 · 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈 · addclass, removeclass, hide, show 메소드 이용 아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다. html tab1 tab2 tab3 tab1_content tab2_content tab3_content css .container { width: 500p..
반응형