자바스크립트 모바일 접속기기 체크 이번에 소개할 예제는 사용자가 접속한 환경이 모바일인지 PC인지 체크해주는 스크립트 입니다. 사용자의 환경에 따라 보여줘야 할 이미지라든지 처리해야 할 메소드를 설정할 경우 필요한 소스인데요. 웹브라우저의 환경에 맞게 오류를 최소화 하기 위해 이 방법을 많이 사용하기도 합니다. 코드는 그리 길지 않습니다. 그리고 굳이 코드를 외우려고 할 필요도 없습니다. 체크 후 결과값에 따라 어떠한 오퍼레이션을 지정할지만 생각하고 코드를 확인해 보세요. 1. 코드 var browserType = "pc"; var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', ..

자바스크립트 랜덤 숫자 예제 자바스크립트를 통해 랜덤한 숫자를 뽑는 경우가 종종 있습니다.대부분의 경우는 사용자에게 같은 데이터가 아닌 계속 변하는 데이터를 보여주어야 할 경우인데요.예를 들면 뽑기 게임 이라든지, 두더지 게임처럼 임의의 숫자가 필요할 경우에 많이 사용합니다.간단한 예제를 통해서 랜덤한 숫자를 뽑는 알고리즘을 보도록 하죠. 랜덤한 숫자를 뽑기위해 다음과 같은 변수와 공식들이 필요합니다.1. 0과 1사이의 랜덤 숫자의 정수값을 저장할 변수2. 0-20의 숫자를 구하기 위해 변수에 곱하기 20을 합니다. 수의 범위는 원하는 만큼 변경.3. 그런 다음 소수점 이하는 반올림 합니다.4. 결과값이 0이 나올 경우 1로 치환합니다. 자바스크립트 랜덤 숫자 따라해보기. 스크립트 코드) HTML 코드)..

자바스크립트와 제이쿼리의 선택자 - 자바스크립트 강좌 9강 이번 강좌에서는 자바스크립트의 선택자와 제이쿼리의 선택자를 비교해보고, 제이쿼리의 사용법에 대해 알아보겠습니다. ※선택자란?이 강좌를 보기 전에 CSS강좌를 보셨다면 선택자에 대해 알고 있을수도 있는데요.선택자는 HTML 오브젝트를 선택한 값입니다.즉 선택자를 이용해 HTML 오브젝트 속성값을 컨트롤 하고, 속성값을 가져오기도 합니다. CSS 선택자 바로가기CSS 선탁자 조합 바로가기 ※자바스크립트의 선택자우리는 이전강좌인 자바스크립트 폼검증에서 이미 선택자를 사용했습니다.간단한 예제로 자바스크립트 선택자를 이용하여 오브젝트를 컨트롤 해보겠습니다. 자바스크립트 선택자 예제) 1. 본문코드 안녕하세요. 반갑습니다. 코드설명) 첫 번째 버튼을 클릭하..

자바스크립트 이메일 검증 - 자바스크립트 강좌 8강 이번 강좌에서는 사용자가 작성한 폼 값에서 이메일 값을 검증하는 예제를 작성해보겠습니다.이 강좌를 보기위해서는 자바스크립트 폼 검증 관련 사전지식이 있어야 합니다.자바스크립트 폼 검증 강좌는 이전 강좌를 참고하시길 바랍니다. ※이메일 유효성 검증이란?사용자가 입력한 이메일 정보를 서버사이드로 전송을 하기 전에 입력한 값이 이메일 형식에 맞는지 검사하는 과정입니다. 폼검증 예제) 1. 본문코드 1.이메일주소 코드설명)이메일 검증을 위한 최소 입력 폼 코드입니다.완료버튼을 클릭하면 적절한 이메일 주소인지 검사를 하고 폼 전송을 시작합니다. 2. 스크립트 코드 코드설명)(1)regExp 변수에 올바른 이메일 정규식 값을 입력합니다.(2)입력한 이메일 값이 올..

자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강 이번 강좌에서는 사용자가 작성한 폼 값을 검증하고 서버로 넘기는 과정에 대해 공부하겠습니다.이 강좌를 보기위해서는 HTML 폼 관련 사전지식이 있어야 합니다. HTML 폼 강좌 바로가기 ※폼 유효성 검증이란?사용자가 입력한 정보를 서버사이드로 전송을 하기 전에 입력한 값에 문제가 있는지 검사를 하는 과정입니다.예를 들면 DB 서버에서 필수항목으로 전송되어야 할 항목에 어떠한 값도 입력하지 않고 전송이 이루어진다면 에러가 납니다.그러한 에러를 1차적으로 사전에 방지하고자 하는 차원에서 폼 유효성 검증을 사용합니다.먼저 간단한 회원가입 폼을 만들어 보겠습니다. 폼검증 예제) 1. 본문코드 1.이름2.이메일주소3.성별남자여자 결과) 코드설명)위 html ..

자바스크립트 이벤트 - 자바스크립트 강좌 6강 이번 강좌에서는 사용자가 오퍼레이션을 하는 각각의 형태에 따른 이벤트에 대해 공부하겠습니다. ※이벤트(Event)란? 우리가 흔히 생각하는 이벤트란 무엇일까요? 아마도 엄청 많은듯 한데요. 외식사업장에서 진행하는 이벤트, 게임에서 진행하는 이벤트, 여러형태의 가전제품 매장에서 진행하는 이벤트 등등.. 참 다양한 이벤트들이 있습니다. 웹문서에도 마찬가지로 이벤트가 존재합니다. 사용자는 웹문서를 통해 정보를 가져가거나 입력할때 다양한 형태로 키보드나 마우스를 활용하여 오퍼레이션을 하죠. 바로 그때 발생하는것을 웹문서에서 이벤트라고 합니다. 가장 많이 사용하고 간단한 예를 들자면, 마우스 왼쪽클릭 혹은 오른쪽 클릭.. 이러한 것들이 있습니다. 예제) 1. 스크립트..

자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 getElementsByTagName/getElementsByClassName/getElementById 이번 강좌에서는 자바스크립트를 이용하여 문서의 객체를 제어하는 기술에 대해 공부하겠습니다. ※DOM이란? Document Object Model의 약자입니다. 자바스크립트를 이용하여 웹페이지를 제어하기 위한 객체 모델을 의미하죠. window 객체의 document 프로퍼티를 이용하여 통해서 제어가 가능합니다. △getElementsByTagName 문서를 제어하려면, 먼저 제어할 대상을 찾아야 합니다. CSS에서 선택자를 이용하는 방법과 흡사하지만 약간의 차이가 있습니다. getElementsByTagName은 태그명을 이용하여 제어할 대상을 ..

자바스크립트 팝업/window - 자바스크립트 강좌 4강 ※window 객체 window 객체는 새로운 페이지를 열 수 있고, 제어할 수 있습니다. 그리고 그것은 우리가 흔히 사용하고 접하는 팝업으로 응용할 수 있죠. 새 창! 즉 팝업을 새로 열고 컨트롤 하고 응용하는 법을 알아보도록 하겠습니다. △window 객체 기본(팝업) 사용법) window.open(경로, 타이틀, 속성); 예제) 1. 스크립트 코드 2. 본문 코드 3. pop.html Go Learning Popup! 결과) △window 객체 속성 left : 창의 왼쪽 포지션 top : 창의 위쪽 포지션 height : 창의 높이 width : 창의 너비 menubar : 메뉴창 표시 여부 toolbar : 도구모음 표시 여부 locati..

자바스크립트 location/navigator - 자바스크립트 강좌 3강 ※Location 객체 Location 객체는 문서의 주소와 관련된 객체입니다. 이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 습니다. 그리고 문서의 위치와 관련된 다양한 정보를 얻을 수 있죠. △Location 객체를 이용해 주소 알아보기 예제) 문서의 주소를 가져와 보여주는 예제 locationObj라는 변수에 location의 정보를 문자열로 변환하여 저장하였습니다. 그리고 경고 메시지로 출력해보는 예제입니다. 결과) 크롬 브라우저 결과) 익스플로러 브라우저 크롬은 한글 그대로 출력이 되지 않고 변환되어 출력되네요. 익스는 한글 그대로 출력이 되는걸 볼 수 있습니다. △Location 객체를 이용한 페이지 이동 사용법)..

자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else ※What? Object.. 객체란? 객체란 무엇일까요? 프로그램 개발에 대해 공부를 하면 아주 많이 듣는 단어입니다. 객체에 대해 정확히 이해하는것도 중요하고, 어떠한 방식으로 사용하는지도 중요하죠. 사전적인 의미에서의 객체는 사물, 물건, 목표 등의 여러가지 의미를 가지고 있습니다. 우리가 생활하면서 쉽게 접할수 있는 자동차를 예를들어 설명을 해볼게요. 자동차는 하나의 객체.. 즉 사물입니다. 그런데 그 사물을 여러개로 나눌 수 있습니다. 바퀴, 엔진, 도어, 베터리.. 등등 여러가지로 구성되죠. 그것들도 객체입니다. 객체를 쪼개고 나누다 보면 하나의 부품까지 나눌 수 있을거에요. 부품도 객체..