Web/Javascript

    [javascript] 예외 처리

    어떠한 이유로 프로그램 실행 중 오류가 발생할 수 있는데 이 오류를 위한 적절한 대책을 세우는 것을 '예외 처리'라고 합니다. 프로그램 실행 중에 발생하는 경우이므로 사용자를 생각해 적절히 대응할 수 있는 방안을 마련해 두는 것입니다. 참고로 예외와 오류는 다른데 오류는 잘못된 문법이나 오타 등으로 인해 아예 프로그램이 실행되지 않는 경우를 말합니다. javascript에서는 예외를 처리하는 방법으로 try ~ catch ~ finally를 사용할 수 있습니다. try 안에는 실행할 구문을 작성하며 catch안에는 예외발생시 실행할 구문을 작성합니다. cliel.com 위 예제에서는 id가 myspan이라는 요소를 가져와 click이벤트에 span_msg메서드를 연결하고자 하는 시도를 하고 있습니다. 하..

    [javascript] 이벤트 처리

    [javascript] 이벤트 처리

    이벤트는 사용자의 특정 행위나 문서 안에서 발생하는 각종 변화를 말합니다. 버튼을 누르고 input박스에 입력하는 등 상호작용에 필요한 모든 동작은 물론 아래 예제와 같이 문서의 로드가 완료되는 것도 하나의 이벤트에 해당합니다. 위 예제는 window객체에서 문서의 로드완료를 알리는 onload라는 이벤트 속성에 function이라는 이벤트 리스너(또는 이벤트 핸들러) 메서드를 연결한 것입니다. 이 외에 특정 요소에 다음과 같이 임의의 메서드를 이벤트에 연결할 수도 있습니다. 예제는 span요소의 클릭이벤트(onclick 속성)에 span_msg라는 메서드를 연결한 것입니다. 물론 요소는 클릭 이외에도 다른 다양한 이벤트를 연결할 수 있습니다. cliel.com 위와 같이 javascript를 통해 이벤..

    [javascript] 문서 객체 다루기

    [javascript] 문서 객체 다루기

    HTML 문서는 다수의 HTML 태그를 이용하고 구성됩니다. 이들 중 어떤 태그를 javascript상에서 다룰 수 있도록 요소로 가져오게 되면 그것을 '문서 객체'라고 할 수 있습니다. document 예제에서는 HTML문서의 span태그를 가져와 내부의 텍스트를 alert으로 표시하고 있습니다. getElementsByTagName은 요소를 배열로 반환하므로 myspan [0]처럼 가져올 요소의 인덱스를 지정해야 하는데 var myspan = document.getElementsByTagName('span'); 처럼 하게되면 이때부터 myspan을 하나의 문서 객체로서 취급하게 되는 것입니다. 참고로 위의 문서를 아래와 같이 도식화 하여 표현할 수 있으며 위와 같이 표현된 문서전체의 구조를 '문서 객..

    [javascript] 브라우저 관련 객체

    1. window window객체는 브라우저의 최상위 객체를 의미하며 아래 설명된 객체를 포함하는 객체이기도 합니다. 수많은 속성과 메서드가 존재하는데 전체를 다 알 수도 없고 알아보기도 어려워서 몇 가지만 추려서 살펴보고자 합니다. 참고로 alert 같은 기본적인 것도 window의 메서드로 처리되며 var를 통해 생성한 변수도 window의 속성으로 처리됩니다. open 새로운 window객체를 생성합니다. moveBy 윈도우를 지정한 위치로 이동시킵니다. (상대위치) moveTo 윈도우를 지정한 위치로 이동시킵니다. (절대위치) resizeBy 윈도우의 크기를 지정합니다. (상대크기) resizeTo 윈도우의 크기를 지정합니다.(절대크기) scrollBy 윈도우의 스크롤 위치를 이동시킵니다. (상대..

    [javascript] 기본 내장 객체 (표준 내장 객체)

    자바스크립트(javascript)는 기본적으로 유용하게 사용할 수 있는 몇가지 객체를 내장하고 있습니다. 이들 객체를 '기본 또는 표준 내장 객체'라고 하며 그 중 참고할만한 몇가지를 알아보고자 합니다. 객체를 알아보기 전에 우선 우리가 알지 못하는 사이 객체가 아닌것이 객체로 변환되는 경우가 있다는 것을 말씀드리고자 합니다. 예를 들어 var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue); alert(myvalue2); 예제에서 myvalue는 정수형 데이터이고 myvalue2는 Number에서 생성된 객체입니다. var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue.t..

    [javascript] 생성자 함수

    1. 개요 생성자 함수는 객체를 만들 때 사용하는 함수라고 말할 수 있습니다. 일반적인 프로그래밍에서 클래스와 비슷한 개념(클래스는 밑에서 별도로 언급하겠습니다.)을 가지고 있습니다. function MyCar(name, color, number) { this.name = name; this.color = color; this.number = number; } var mc = new MyCar('승용차', '파란색', '1234'); 생성자 함수는 일반 함수와 구조가 동일하지만 내부에서 사용할 속성 등은 this키워드를 통해서 구분해줘야 합니다. 예제에서는 MyCar라는 생성자 함수를 통해 mc라는 인스턴스를 생성하였습니다. 생성자 함수의 인스턴스 개체를 생성할때는 new키워드를 사용하며 이는 개체의 개..

    [javascript] 객체

    1. 개요 프로그램의 대상이 되는 현실세계의 어떠한 것을 프로그램에 맞게 구체화(추상화) 시켜놓은 것을 객체라고 할 수 있습니다. 예컨대 '자동차'를 자바스크립트에서 객체화한다면 다음과 같이 할 수 있습니다. var myCar = { car_name : '승용차', car_color : '파란색', car_number: '00가0000' }; alert(myCar.car_name); 예제에서 객체는 중괄호를 통해 car_name등의 키와 승용차라는 속성으로 myCar라는 객체를 생성하였습니다. 이때 키는 '문자열' 형태로 표현하거나 특수문자, 공백 등을 포함할 수 있습니다. 그러나 그렇게 그런경우 대괄호로 키값을 묶어줘야 하는 경우도 있으니 주의해야 합니다. 2. 속성 위 예제에서 객체에 키와 속성을 어..

    [javascript] 함수

    1. 개요 일련의 처리과정을 하나의 코드로 묶어 사용하는 것을 함수라고 하며 기본적으로 다음과 같은 형태로 작성됩니다. function 함수명() { 처리내용 } 2. 익명 함수 위에서 처럼 함수를 정의할 때는 함수명이 있는 것이 기본이지만 다음과 같이 함수명이 없는 형태로 선언하는 경우를 익명 함수라고 합니다. var myfunc = function() { var i = 10; var j = 20; alert(i + j); }; myfunc 변수를 사용해 함수 자체를 대입함으로써 함수 데이터형의 변수를 사용하게 됩니다. 혹은 다음과 같은 방법으로 익명 함수를 대체할 수도 있습니다. var myfunc = () => { var i = 10; var j = 20; alert(i + j); }; functi..