스크래치코딩 스크래치코딩을 시작하기 위해서는 두 가지 접근방법이 있습니다. 첫 번째 방법은 스크래치 홈페이지에 온라인으로 접속한 후 프로젝트를 생성하여 작업을 하는 방법이고요. 두 번째 방법은 오프라인 상태에서도 스크래치코딩을 만들 수 있는 파일을 다운로드 받아 설치하는 방법입니다. 1. 온라인 접속하기 온라인으로 접속하기 위해서 먼저 스크래치 홈페이지로 이동을 합니다. https://scratch.mit.edu/ 온라인에서 스크래치코딩을 하기위해서는 로그인을 해야 하는데요. 간단한 정보를 입력한 후에 회원가입을 할 수 있고, 로그인 역시 할 수 있습니다. 2. 회원가입 스크래치 가입 버튼을 클릭하면 다음과 같은 화면을 볼 수 있는데요. 사용하고 싶은 이름은 실제 이름이 아닌 닉네임이나 별명을 입력합니다..

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

제이쿼리 ajax 예제 Ajax는 Asynchronous JavaScript and XML 의 약자입니다.자바스크립트를 이용하여 서버와의 비동기식 통신을 하기위해 사용하는데요.비동기식이란 서버에 정보를 전송하거나 받기위해 페이지 이동을 하지 않고 통신을 통해 정보를 주고받는걸 의미합니다. 즉 하나의 페이지에 머물면서 여러가지 명령을 실행할 수 있죠. Ajax를 사용하는 이유는 대부분 사용자 입장에서 봤을 경우 깔끔한 정보전달 및 정보표시를 보여주기 위함 입니다.예를 들면 사용자가 A라는 페이지를 보고있는데 B라는 페이지의 정보를 보기위해 굳이 B라는 페이지로 이동을 하지 않고 보여준다면, 사용자 입장에서는 깔끔하고 편하다는 느낌을 받겠죠. 사실 자바스크립트를 사용하여 Ajax 통신을 하기 위해서는 코드가..

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

제이쿼리 setInterval,clearInterval 예제 ※setInterval 이란...간단히 설명하자면 '시간 카운터' 입니다.원하는 단위만큼 시간을 증가시키거나 감소시킬 수 있는 함수이죠.이 함수는 대부분 시간제한이 있는 게임같은 컨텐츠에서 사용하거나, 일정 시간마다 데이터를 업데이트 시킬 경우에 많이 사용합니다.예제를 통해서 setInterval 함수를 활용하는 방법에 대해 알아보도록 하죠. ※setInterval 사용법var timeLimit = setInterval(function(){ 사용자가 정의한 동작}, 시간단위); ※setInterval 예제시간을 1초 단위로 카운트를 하여 0초가 되면 메시지를 띄우는 예제. (1)스크립트 코드 $(window).ready(function(){ v..

제이쿼리 폼 검사 예제폼 속성 text/radio/checkbox/이메일 검사하기 ※폼 유효성 검사란...폼 유효성 검사는 사용자가 입력한 값을 서버사이드로 넘기기 전에 유효한 값인지를 확인하는 과정입니다.사용자가 입력한 값에 문제가 있어서 폼을 다시 작성하는 일이 발생하지 않도록 미리 방지를 하는거죠.폼 검사를 하기위해 다양한 HTML 입력 태그를 사용할텐데요.이번 강좌를 통해 유효성 검사는 물론 다양한 제이쿼리 선택자도 공부할 수 있습니다. 영화동호회에서 설문조사를 한다고 생각하고 폼을 만들어 볼게요~입력항목은 다음과 같이 정의하겠습니다.이름, 나이, 성별, 이메일주소, 좋아하는 장르, 좋아하는 극장 이름, 나이, 이메일주소 항목은 텍스트박스를 사용합니다.성별 항목은 라디오버튼을 사용하고요.좋아하는 ..

라이브러리 파일 다운로드, css 추가/변경이번 강좌에서는 제이쿼리가 무엇인지.. 그리고 선택자는 어떤 종류가 있고 css를 어떻게 제어하는지 알아보겠습니다. ※제이쿼리란? 간단하게 정의를 내리자면 자바스크립트 라이브러리 입니다.그렇다면 라이브러리는 무엇일까요?라이브러리는 자주 사용하는 기능이나 코드들을 재사용 가능하게 만들어 프로그래밍을 하는데 있어 속도를 높히고 개발자에게 편의를 제공하는 기능을 말합니다.즉 제이쿼리를 이용하면 자바스크립트 프로그래밍 작업의 효율성을 극대화 시킬 수 있다는 의미입니다.라이브러리를 호출하는 방법은 아래와 같이 두 가지로 가능합니다.(1)라이브러리 파일을 로컬 디렉터리에서 호출(2)라이브러리 파일을 특정 url 경로에서 호출 라이브러리 파일은 아래 압축파일을 다운로드 받아..

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

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

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