프로그래밍376 JavaScript 타이밍 제어, Timing 이벤트 JavaScript Timing Events JavaScript는 간단한 코드로 시간 간격을 조절할 수 있다. 이것을 timing 이벤트라고 한다.두가지 함수를 제공하며 사용법은 아주 간단하다.setInterval() - 지정한 함수를 지정한 시간 간격으로 호출한다.setTimeout() - 지정한 시간 후에 지정한 함수를 호출한다.Note: setInterval() 와 setTimeout() 는 모두 HTML DOM Window 객체의 함수이다.The setInterval() MethodsetInterval() method의 시간 단위는 milliseconds 이다. 이 함수는 주어진 함수를 주기적으로 계속 호출한다. Syntaxwindow.setInterval("javascript function",.. 2013. 1. 5. JavaScript Number 객체 JavaScript Number ObjectJavaScript 단 하나의 숫자 타입을 가지고 있다.Numbers 는 소수점을 쓰거나 생략할 수 있다.JavaScript NumbersJavaScript numbers 는 소수점을 쓰거나 생략할 수 있다. Examplevar pi=3.14; // 소수점과 같이 쓰기 var x=34; // 소수점 없이 쓰기 예외적으로 아주 크거나 작은값을 표현할 때는 지수표현을 사용한다. Examplevar y=123e5; // 12300000 var z=123e-5; // 0.00123 All JavaScript Numbers are 64-bitJavaScript 다른 프로그램 언어와 다르게 number에 integers, short, long, floating-point .. 2013. 1. 5. JavaScript Date 객체 JavaScript Date Object Date 오브젝트는 date와 time 에 대한 내용들을 다룰 수 있습니다. Try it Yourself - ExamplesReturn today's date and time : Date() 함수를 이용하여 오늘 날짜를 알아내기getFullYear() : 년도 얻기getTime() : 1970년 1월 1일 이후 부터 지금까지의 시간을 밀리세컨드 단위의 숫자로 얻기setFullYear() : 년도를 세팅하기toUTCString() : 오늘의 날짜를 UTC 기준으로 얻기getDay() : Use getDay() and an array to write a weekday, and not just a number.Display a clock : 시계 구현 예제 Create.. 2013. 1. 5. JavaScript 배열 객체, Array JavaScript Array Object Array object 는 하나의 변수에 여러개의 값을 저장할 수 있다. Try it Yourself - Examples 배열을 생성하고, 값을 할당해 보자. Examplevar mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; Try it yourself »아래 쪽에 연결되는 예제들이 더 있다.배열은 무엇인가? What is an Array?array는 특수한 변수이다. 하나의 값 이상을 담아놓을 수 있다.만약 아이템의 목록(자동차 목록)을 가지고 있다면, 자동차 명을 담을 변수를 각각 생성할 수 있다.var car1="Saab"; var car2="Volvo"; .. 2013. 1. 5. JavaScript History 객체 JavaScript Window History window.history 객체는 브라우저의 히스토리 정보를 가지고 있습니다.Window Historywindow.history 객체는 window prefix를 생략하고 사용할 수 있습니다.To protect the privacy of the users, there are limitations to how JavaScript can access this object.Some methods:history.back() - 브라우저의 백버튼 누른 효과history.forward() - 브라우저의 앞으로 번튼 누른 효과Window History Backhistory.back() 함수는 히스토리 목록에서 바로 이전 URL로 돌아가는 함수이다.브라우저의 Back 버튼.. 2013. 1. 5. JavaScript Location 객체 JavaScript Window Locationwindow.location 객체는 현재 페이지의 URL을 얻어낼 수 있고 새로운 페이지로 이동시킬 수 있다. Window Locationwindow.location 객체는 window prefix를 생략하고 사용할 수 있다. location.hostname : 도메인명 반환location.path : 현재 페이지의 경로(path)와 파일명을 반환location.port : 웹 호스트의 포트 반환 (80 or 443)location protocol : 웹 프로토콜 반환 (http:// or https://)Window Location Hreflocation.href 프로퍼티는 현재 페이지 URL 을 반환합니다. Example 위 코드의 결과 (결과값은 사용자.. 2013. 1. 5. JavaScript 스크린 객체 JavaScript Window Screen window.screen object 는 사용자 화면에 대한 정보를 포함하고 있다.Window Screenwindow.screen 객체는 window 를 붙이지 않고 사용할 수 있다. 아래 예제처럼 사용이 가능하다는 얘기이다. screen.availWidth - 가용한 스크린 넓이 (해상도 넓이) available screen widthscreen.availHeight - 가용한 스크린 높이 (해상도 높이) available screen height 윈도우 스크린 해상도의 넓이 Window Screen Available Widthscreen.availWidth 속성은 Windows의 태스크바(작업표시줄) 영역을 뺀 해상도의 넓이 정보를 픽셀 단위로 넘겨 줍니다.. 2013. 1. 5. JavaScript Navigator 객체 JavaScript Window Navigatorwindow.navigator 객체는 방문자의 브라우져 정보들을 포함하고 있다.Window Navigator window.navigator 객체는 window 접두어(prefix)를 생략하고 사용할 수 있다. Example Try it yourself » Navigator Object PropertiesPropertyDescriptionappCodeName브라우져의 code name 반환appName브라우져의 name 반환appVersion브라우져의 version 반환cookieEnabled브라우져가 cookie 사용이 가능한지 반환onLinebrowser가 온라인이면 true, 아니면 false.platformbrowser 가 컴파일된 플랫폼 반환user.. 2013. 1. 5. JavaScript 브라우저 객체 모델 BOM 브라우저 객체 모델 The Browser Object Model (BOM)BOM은 공식적인 표준모델은 아니다.하지만 대부분의 브라우저에서 같은 함수와 속성들을 사용할 수 있는 점 때문에 종종 언급된다.윈도우 객체 The Window Objectwindow 객체는 모든 브라우저에서 사용할 수 있다. 이 객체는 브라우저 자체를 의미한다.모든 전역 JavaScript 객체(objects), 함수(functions), 변수(variables)들은 자동적으로 window 객체의 멤버(하위요소 또는 자식요소)가 된다.전역 변수(Global variables)는 window object의 속성(properties)에 해당한다.전역 함수(Global functions)는 window object의 함수(methods).. 2013. 1. 5. JavaScript 수학 객체 Math JavaScript Math Object Math object 는 수학 작업을 위해 내용들을 지원한다.Math ObjectMath object 여러가지 수학적 상수와 함수들을 가지고 있다. Syntax for using properties/methods of Math:var x=Math.PI; var y=Math.sqrt(16);Note: Math 객체는 생성자가 없다. 모든 properties 과 methods 들은 Math라는 키워드를 이용해서 사용해야 한다.Mathematical ConstantsJavaScript는 8개의 수학 상수를 Math 객체를 통해 지원한다. E, PI, 2제곱근, 1/2 제곱근, 2의 자연로그, 10의 자연로그, 2를 밑으로 한 자연로그, 10을 밑으로 한 자연로그.Jav.. 2013. 1. 5. JavaScript 논리 객체, boolean JavaScript Boolean Object Boolean object는 "true" 또는 "false" 로 표현된다.아래 코드는 Boolean object 로 myBoolean라는 객체를 생성하는 것이다.var myBoolean=new Boolean();Boolean object를 초기화 하지 않거나 아래 값들 중 하나를 할당하면 false가 자동 세팅된다.0-0null""falseundefinedNaN 2013. 1. 5. JavaScript 문자열 객체 JavaScript Stringsstring은 "John Doe"와 같은 단어들의 조합이다. Examplevar carname="Volvo XC60"; var carname='Volvo XC60'; index를 이용해서 각 문자들에 접근할 수 있다.Examplevar character=carname[7];String 인덱스는 zero-based이다. 이 뜻은 [0] 이 첫번째 문자, [1] 이 두번째 문자라는 것을 뜻한다. 따옴표 표현은 아래와 같이 할 수 있다.Examplevar answer="It's alright"; var answer="He is called 'Johnny'"; var answer='He is called "Johnny"'; 또는 \ escape 문자를 이용하여 표현할 수도 있다... 2013. 1. 4. JavaScript 반복문 For For Loop 반복문이라고 한다. 특정한 횟수만큼 블럭을 반복해서 실행할 수 있다. for (variable=startvalue;variable 2013. 1. 4. JavaScript 에러 던지기 Throw JavaScript Throw Statement 예외 상황을 던지다. throw는 던진다는 사전적인 정의가 있다. 즉, 예외상황이 발생했을 경우 catch문 쪽으로 코드 권한을 넘기게 되는 것이다. 위 예제는 특정 조건일 때 catch문으로 throw하고 있다. 각각 throw 때마다 특정한 문자열을 넘기고 catch 문에서는 그 에러 문자열을 분기하여 각각에 맞는 메시지를 뿌리는 작업을 하고 있는 것이다. 2013. 1. 4. JavaScript 런타임 에러 제어 Try Catch Try...Catch Statement JavaScript - Catching Errors 에러메시지는 개발자에게는 필요하지만 사용자에게는 필요하지 않다. 사용자가 에러메시지를 보게 된다면 웹 페이지를 떠나갈 확률이 높아지게 된다. 즉, 에러메시지 처리를 잘하여 당신에게 온 방문자를 잃지 않아야 한다. 개발중에 개발자는 에러테스트를 진행한다. 디버깅 작업을 통해 모든 에러를 잡았다고 생각하지만 미쳐 생각치 못한 곳에서 실행중 오류(runtime error)가 발생하곤 한다. 그런 경우 의도치 않게 그 이외의 작업이 모두 멈추게 되는 것을 막기 위해 이 구문을 사용해야 한다. The try...catch Statement try 문에는 개발자가 실행시키고 싶은 일반 코드를 작성한다. 만약 코드가 실행중에 .. 2013. 1. 4. JavaScript 이벤트 JavaScript Events 이벤트란 JavaScript에 의해 감지되는 액션이다. Events 자바스크립트를 사용하는 목적 중에 웹 페이지를 동적으로 보이게 하기 위한 것이 있다.모든 엘리먼트(요소)들은 자바스크립트에 의해 실행되는 이벤트들을 가지고 있다. 예를 들어, 클릭하면 발생하는 onclick 이벤트를 이용하여 특정 함수를 호출할 수 있는 것이다. 사용자가 버튼을 클릭하는 것 말이다. 이벤트의 종류에는 아래와 같은 것들이 있다.버튼 클릭 (혹은 HTML element 클릭)페이지 로딩이 끝났을 때특정 이미지 로딩이 끝났을 때마우스 커서가 특정 엘리먼트 위에 위치했을 때input 필드에 진입했을 때폼을 제출,전송(서브밋) 할 때키보드를 누를 때 이벤트에 대한 정의는 http://w3school.. 2013. 1. 4. JavaScript 반복문 For .. in For...In Statement 기본적인 for 루프와는 다르다.for (variable in object) { code to be executed } 루프를 돌리는데 object의 속성의 개수만큼 루프가 돌아간다. 아래 예제를 보도록 하자. var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } 이전에 했던 person 이라는 object를 기억할 것이다. for 루프는 person 객체의 속성의 수, 즉 3 만큼 루프를 돌리게 되는 것이다. fname, lname, age 와 같이 3개의 속성값으로 person 객체가 구성되어 있기 때문이다. 위 루프를 가상으로 생각해 보면 아래와 같은 것이다.t.. 2013. 1. 4. JavaScript 반복문 중단하기 Break and Continue 루프를 빠져 나오는 방법인 break반복문 중간에 사용되면 바로 조건절로 올라가게 하는 continue : 예제에서 상세히 설명한다. The break Statement break는 단어 뜻 자체로 멈춤이다. 아래 예제는 i값이 3이 되는 순간 for 루프를 빠져나가게 된다.for (i=0;i 2013. 1. 4. JavaScript 반복문 While While Loop 특정 조건이 참인 경우 블럭을 반복한다. while (variable 2013. 1. 4. JavaScript 팝업박스 Popup Boxes Alert Box버튼이 하나만 있는 알림창을 띄우기alert("sometext"); Confirm Box확인/취소 버튼이 있는 선택창을 띄우기confirm("sometext"); confirm은 Boolean값을 반환한다. 확인을 누르면 true, 취소를 누르면 false가 반환된다. Prompt Box 값을 넘겨받을 수 있는 창 띄우기prompt("sometext","defaultvalue"); Line Breaks\n이들 알림창에서 줄바꿈을 하기 위해 Line Break 키워드를 사용한다. alert("Hello\nHow are you?"); 2013. 1. 4. 이전 1 2 3 4 5 6 7 ··· 19 다음