태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
   情  
Front Page
Tag | Location | Media | Guestbook | Admin   
 
'자바스크립트'에 해당하는 글(6)
2008.10.26   자바스크립트 이벤트를 발생시킨 엘리먼트
2008.09.30   자바스크립트 문법3(함수)
2008.09.28   자바스크립트 문법2(객체)
2008.09.26   자바스크립트 문법1(변수~배열)
2008.02.27   자바스크립트 달력 (3)
2008.02.17   IE6에서 자바스크립트 버그.. (2)


자바스크립트 이벤트를 발생시킨 엘리먼트
이벤트를 발생시킨 엘리먼트를 찾는 방법은 세가지로 나누어지지만, 모든 브라우저에서 모든 방법이 통하는 것은 아니다.

1. 이벤트를 실행할 핸들러에서 매개변수로 받은 객체의 target 속성 참조(IE 실행 불가)
2. window객체의 event.srcElement 객체 참조(FF실행 불가)
3. this 키워드로 참조. IE, FF 양쪽 모드 가능, 하지만 this 키워드는 컨텍스트 엘리먼트로서 수시로 바뀔 가능성이 크다.
<input type="button" id="btClcik" />

<script>
    window.onload=function()
    {
        document.getElementById('btClcik').onclick = function(eventArgs)
        {
            var eventElement;
            //이벤트를 발생시킨 엘리먼트 찾기 1 (FF)
            eventElement =  eventArgs.target;
            alert(eventElement.id);
            //이벤트를 발생시킨 엘리먼트 찾기 2 (IE)
            //eventElement = window.event.srcElement;
            //alert(eventElement.id);
            //이벤트를 발생시킨 엘리먼트 찾기 3 (FF, IE)
            var eventElement2 = this;
            alert(eventElement.id);
        }
    }
</script>
따라서 1과 2의 방법을 합쳐 eventElement = eventArgs ? eventArgs.target : window.event.srcElement;로서 사용하는게 가장 권장된다.
신고
Tag : 자바스크립트

name    password    homepage
 hidden


자바스크립트 문법3(함수)

함수와 메서드

함수와 메서드는 반복되는 어떤 동작들을 필요할 때마다 호출하여 사용할 수 있게하는 코드블럭을 말한다. 하지만, 약간의 차이가 있는데, 쉽게 말하자면 객체 내부에 존재하는 함수는 메서드고, 그렇지 않은 것은 함수이다. 하지만 기능상으로 큰 차이가 없기 때문에 일부에서는 혼용하기도 하지만,구분해서 기억해두는 것을 권한다.

자바스크립트에서 함수

자바스크립트에서 함수는 그 자체가 1차 객체이다. 함수를 선언하여 변수에 대입하여 이리 저리 옮길 수 있는 것이 자바스크립트라고 생각할 수 있지만 함수라는 객체를 생성해서 변수에 할당한다고 보는 것이 더 정확할 것이다. 따라서 자바스크립트의 함수는 속성과 메서드를 가지며, 함수 내부에 메서드를 가질 수 있고 속성또한 가질 수 있고, 실제로 자바스크립트의 객체가 가지는 모든 특징을 가진다.

var functionTest = function()
{
    //함수내부 변수 선언
    var arg = "Son";
    //함수내부 메서드 선언
    this.name = function(argument)
    {
        //함수 내부의 내부에서 함수 선언
        var printName = function(strName)
        {
            alert(strName);
        }
        //함수 사용
        printName(argument);
        //지역변수
        var localVariable = "localVariable";
       //속성
        this.attribute += argument;   
        alert(localVariable + " " + attribute);
    }//close name()
    //함수 사용

    name(arg);
}//close functionTest()

위의 예에서 알 수 있듯이, 함수 내부에서는 자바스크립트 클래스 선언에서 사용할 수 있는 모든 것을 할 수 있다.

자바스크립트의 함수는 내장 객체인 function을 상속받고 있으며 function은 object 내장 객체를 상속받고 있다. 따라서 다음과 같은 코드와 같이 비교할 수 있다.

var testFunction = function() { }
if(testFunction instanceof Function)
    alert("function을 상속받고있습니다.");
if(testFunction instanceof Object)
    alert("object를 상속받고있습니다.");

Function과 Object객체를 상속받고 있기에, 해당 객체가 지원하는 속성과 메서드 또한 사용가능하다.

자바스크립트 함수 정의

자바스크립트 함수를 정의하는 방법은 두가지 방법을 제공한다. 하나는 위와 같은 function()을 사용하여 반환되는 함수 객체를 변수에 담는 방법과 function이라는 예약어를 먼저 기술하는 형태다. 둘의 차이점은 없으니 선호하는 것을 사용하면 된다.

//함수 선언 방법1
function functionName() { }
//함수 선언 방법2
var name = function() { }

내부적으로 자바스크립트는 내장 function객체를 상속받은 사용자 정의 function객체를 반환하며, 사용자가 기술한 코드 블럭은 텍스트 형태로 객체 내부에 저장된다.

자바스크립트 함수 호출

자바스크립트 함수를 호출하기 위한 방법은 다른 언어와 다르지 않다. 하지만 위에서 언급했듯이 자바스크립트에서 함수는 하나의 객체이다. 따라서 다음과 같은 여러가지 호출 방법을 제공한다.

//일반적인 호출 형태
functionName();
//메서드를 활용한 형태
functionName.call(Context Object, argument1, argumentN);
functionName.apply(Context Object, argument Array);

function에 내장된 메서드인 call이나 apply를 이용해서 함수를 호출 할 수 있다. call과 apply는 전달받은 첫번째 매개변수를 Context Object로 지정해버린다. function내부에서 this키워드가 가리키는 Object가 Context Object이며, 보통 Context Object는 해당 메서드를 포함하고 있는 객체 또는 Global객체가 된다. 여기서, 이 Context Object를 call이나 apply함수를 이용해서 지정한 Object로 지정한다는 의미이다. call과 apply의 차이점은 두번째부터 시작되는 매개변수의 형태에 따른 차이인데, call은 매개변수들이 나열되는 반면에 apply는 배열형태로 매개변수를 지정받게 된다. call과 apply에서 매개변수를 생략할 경우, Global객체가 Context Object로 지정되며 매개변수는 전달되지 않게 된다. 아래는 Context Object를 사용자가 지정하는 예제이다.

function test()
{
    alert(this.toString());
}
test.call(); //Context Object를 지정하지 않음
test.call("string"); //Context Object를 String 객체로 지정
test.call(new Array(1,2,3)); //Context Object를 Array객체로 지정
test.call(123); //Context Object로 정수를 지정

자바스크립트 매개변수

자바스크립트 함수에서 매개변수에는 제약이 없다. 타입을 지정하지 않아도 되고, 매개변수 개수에 맞추어도 되고, 적게 혹은 많은 매개변수를 전달해도 아무 이상없이 동작한다. 먼저 기초적인 매개변수 사용 방법은 다른 언어와 크게 다르지 않다.

function person(name, age)
{
    alert("name : " + name + "\nage : " + age);
}
person("son", 10);

위의 함수에서는 2개의 매개변수를 지정했지만, 만일 더 많은 매개변수를 지정하면 넘는 매개변수들은 모두 무시되며, 오히려 매개변수가 부족하다면 null로 대체되어 값이 전달된다.

불특정 다수의 매개변수 받기

자바스크립트의 function 객체는 arguments라는 속성을 가지고 있으며, 이 속성에는 이 함수가 받은 모든 속성을 가지고 있다. 따라서 다음과 같은 방법으로 매개변수의 숫자에 제약을 받지 않고 모든 매개변수를 받을 수 있다.

function person()
{
    var text = "";
    for(var i = 0; i < arguments.length; i++)
        text += arguments[i];
    alert(text);
}
person(1,2,3,4,5,6,7,8,9);

arguments는 해당 함수를 정의할 때 지정한 매개변수와 상관없이 함수가 호출 될 때 당시에 받은 모든 인자를 가지게 된다. arguments는 객체이며, 배열처럼 사용할 수 있다.(하지만 배열이 아니다. 'for(a in b)'문장을 통해 모든 인자를 뽑아 낼 수 조차 없다.)

arguments가 가지는 속성으로서 대표적인 것은 length(매개변수의 개수), callee(현재 함수를 가리킨다), caller(현재 함수를 호출한 함수를 가리킨다)

Default 매개변수

자바스크립트에서도 Default 매개변수를 사용할 수 있다.

function person(name, age, gender)
{
    //Default 매개변수 지정
    name = name || "No Name";
    age = age || "Who knows?";
    gender = gender || "No information supplied";
    alert("Name : " + name + "\nAge : " + age + "\nGender" + gender);
}
//Default 매개변수 시험해보기
person("Son","");

신고
Tag : 자바스크립트

name    password    homepage
 hidden


자바스크립트 문법2(객체)

객체

자바스크립트에서도 객체를 사용하는 방법을 제공하고 있다. 하지만, 다양한 객체 관련 기술을 지원하는 듯 흉내내기일 뿐이다. 즉, Java 같은 객체 지향 언어에 있는 다양한 객체 관련 기술들과 권한 제한 등은 지원하지 않고, 객체를 선언해서 작성할 수 있는 기초적인 형태는 제공하고 있다. 실제로 자바스크립트의 객체는 일반적인 배열로서 단순하게 변수나 함수의 연결로 구성되어 있다고 볼 수 있다.

객체의 생성

객체를 바로 생성해서 사용하는 방법은 다음과 같다.

//객체를 생성하기 위한 가장 기초적인 방법
var obj = new Object();
obj.name = "Ivan";
obj.grade = ["A+", "B+", "F"];
obj.birth = new Date(1984,11,04);
obj.print = function()
{
    alert(
        this.name + "\n" +
        this.grade.toString() + "\n" + 
        this.birth.toString());
}
obj.print();

//JSON(Javascript Object Notation)을 이용한 방법
var myObj =
{
    name : "Son",
    grade : [99,87,43,87,56],
    date : new Date(),
    print : function()
    {
        document.write(
            this.name + "<br>" +
            this.grade.toString() + "<br>" +
            this.date.toString());
    }
};
myObj.print();

JSON방법은 좀 더 깔끔하고 구조적으로 표현할 수 있기 때문에 처음 객체를 선언할 때 많이 사용하고, 만들어진 객체를 수정할 때는, 첫번째 방법으로 수정하는 것이 간편하다. 하지만 이것은 정해진 것이 아니기 때문에 프로그래머가 원하는 방향으로 마음대로 선택해 작성할 수 있다.

클래스의 정의

위에서 봤던 같은 방법은, 일반적인 java에서 Class를 생성하고 instance를 선언하는 것과 달리, 바로 Instance에 해당하는 객체를 생성하는 방법이다. 실제로 Java나 C++ 등의 객체 지향 언어를 다룰 때, 클래스를 먼저 정의하고 그 인스턴스를 선언해서 사용하게 된다. 자바스크립트에서도 그런 문법을 지원하는데 다음과 같다.

//클래스 정의
function Person(strName, objBirth)
{
    //속성 정의
    var strBirth = objBirth.toString();
    this.name = strName;
    this.birth = strBirth;
    //메서드 정의
    this.print = function()
    {
         document.write(this.name + "<br>" + this.birth);
         alert("strBirth 변수 존재 여부 : " + strBirth);
    }
}
//인스턴스 선언
var person = new Person("Son", new Date(1984, 11, 04));
//인스턴스 사용
person.print();

하지만 위와 같이 클래스 정의 내부에서 메서드를 정의할 경우, Closure(클로저)를 생성하게 되는데 Closure가 생성될 때 나타나는 특징이 있다. Closure가 생성된 객체 내부에 존재하는 위의 strBirth라는 지역변수는 다른 지역변수 처럼 사용 후 바로 해제되지 않고 메모리에 계속 남아있게되며, 위의 print()라는 메서드에 의해서 계속해서 사용되어 질 수 있다.(하지만 외부에서 참조가능하다거나 다른 prototype메서드에 의해 참조되지 않는다.) 이 점을 이용해야 하는 경우도 있을 수 도 있지만 그렇지 않은 경우, 즉 Closure로 인해 지역변수가 메모리를 지속적으로 차지하는 것을 원하지 않는다면 클래스 내부에서 메서드를 정의하지 않고 다음처럼 외부에 정의하면 된다.

//클래스 정의
function Person(strName, objBirth)
{
    //속성 정의
    var strBirth = objBirth.toString();
    this.name = strName;
    this.birth = strBirth;
}
//메서드 정의
Person.prototype.print = function()

     document.write(this.name + "<br>" + this.birth);
     alert("strBirth 변수 존재 여부 : " + strBirth);
}
//인스턴스 선언
var person = new Person("Son", new Date(1984, 11, 04));
//인스턴스 사용
person.print();

위와 같이 메서드 정의를 외부로 빼버린다면, Closure가 생성되지 않아 지역변수는 지역변수로서의 역할을 하게 된다. 하지만 Closure가 항상 필요없는 존재는 아니며 상황에 따라 필요할 경우도 존재한다.

생성자

클래스를 정의할 때에 생성자를 자주 사용하게 되는데, 자바스크립트에서는 클래스를 정의하는 function 그 자체가 생성자다. 즉 아래의 'function Person(){ ... }' 함수 자체가 생성자이자, 클래스 몸체의 역할까지 하게 된다.

//클래스 정의이자 생성자 정의
function Person()
{
    alert("생성자 코드 작동");
}

var person = new Person();

Prototype

클래스의 속성과 메서드의 정의할 때, 생성자 안에 모두 기입하는 방법과 Prototype을 이용한 방법이 있다. 두가지 방법은 분명한 차이를 가지고 있고, 내부적으로 처리하는 방법도 다르다.

  1. 생성자에서 정의한 메서드와 속성은 인스턴스를 생성할 때마다, 각각 인스턴스의 메모리 공간에 복사된다. 함수라고 할지라도 각 인스턴스마다 복사되므로 메모리 공간을 더 차지하게 된다. Prototype을 이용해서 메서드나 속성을 정의했을 경우에는, 메모리에 단하나의 공간만 잡은채, 각각의 인스턴스에 링크를 걸어두는 방법을 사용한다.
  2. Prototype으로 정의한 속성이나 메서드라 할지라도, 사용자가 해당 속성, 메서드에 값을 할당하는 순간 Prototype과 연결이 끊어지고, 인스턴스의 메모리 공간에 따로 위치하게 된다.
    //클래스 : 정의
    function Person() { ; }
    //Prototype : 속성정의
    Person.prototype.name = "default Name";
    Person.prototype.age = "default Age";
    //Prototype : 메서드 정의

    Person.prototype.printName = function()
    {  
         alert("default Name function!!\n" + this.name );
    }
    Person.prototype.printAge = function()
    {
        alert("default Age function!!\n" + this.age);
    }

    //인스턴스 : 선언
    var person = new Person();
    //인스턴스 : 사용
    person.printName();
    person.printAge();

    //인스턴스 : name 속성과 printName 메서드 할당
    person.name = "Son";
    person.printName = function()
    {
        alert("defined Name function\n" + this.name);
    }

    //Prototype : 모든 속성과 메서드 재정의
    Person.prototype.name = "redefined name";
    Person.prototype.age = "redefined age";
    Person.prototype.printName = function()
    {
        alert("redefine Name function!!\n" + this.name);
    }
    Person.prototype.printAge = function()
    {
        alert("redefine Age fucntion!!\n" + this.age);
    }

    //인스턴스 : 사용
    person.printName();
    person.printAge();
    위의 소스를 실행해보면, 중간에 Prototype으로 변경한 내용이 age속성과 printAge 메서드에만 반영된다는 것을 알 수 있다. 이유인 즉슨, 도중에 인스턴스의 name속성과 printName메서드의 값을 따로 할당 해버렸기 때문이다. 이렇게 인스턴스에서 Prototype으로 지정된 개체의 값을 할당해버리면 Prototype과 연결이 끊어지고 인스턴스 내부에 따로 저장이 된다. 반면에, 인스턴스의 age, printAge()는 할당되지 않았기 때문에 여전히 Prototype과 연결이 되어 있기 때문에, Prototype의 속성과 메서드를 수정 했을때 변경사항이 그대로 인스턴스에 반영된다.
  3. Prototype을 이용하면 어떤 순간에도 속성과 메서드를 정의하고 수정할 수 있다. 심지어 생성자 이전에도 가능하다.(메서드만 가능. 속성은 생성자 이전에 Prototype으로 정의할 수 없다.) 반면에 생성자를 이용하여 정의한 속성과 메서드는 한번 정의되면 수정할 수 있는 방법이 없다.
  4. 생성자에서 정의한 멤버(속성, 메서드)와 Prototype로 정의한 멤버의 이름이 동일 할 경우에는 생성자에서 정의한 것이 우선한다. 따라서 생성자에서 정의된 메서드나 속성의 기본값 등은, Prototype으로 변경할 수 없다.
  5. Prototype으로 할당된 속성은 해당 클래스의 모든 인스턴스들이 공유할 수 있으므로, 객체간의 통신수단으로 활용 될 수 있다.

상속(Inheritance)

자바스크립트에서 상속은 prototype를 이용하며, 메서드 재정의 등 대부분의 기능을 활용할 수 있다.

//Person 클래스 정의
function Person()
{
    this.name = "";
    this.age = 0;
    this.print = function()
    {
        alert("name : " + this.name + "\nage : " + this.age); 
    }
}

//Student 클래스 정의
function Student()
{
    this.school = "";
    //메서드 재정의
    this.print = function()
    {
        alert("name : " +
            this.name + "\nage :" +
            this.age + "\nschool : " +
            this.school);
    }
}

//Others 클래스 정의
function Others()
{
    //다른 특이사항을 정의하지 않고 상속을 받는다.
}

//Person 클래스 상속
Student.prototype = new Person();
Others.prototype = new Person();

//객체 선언
var
person = new Student();
var otherPeople = new Others();

person.name = "Son";
person.age = 12;
person.school = "Buk-gun elementary school";
person.print();

otherPeople.name = "Jung";
otherPeople.age = 14;
otherPeople.print();

솔직히 말하자면, 상속이라는 기능 역시 흉내내기에 불과하다. 자바스크립트에서 제공하는 기능을 활용하여 상속하는 것처럼 보이게 하는 것일 뿐이다. 실제로 자바스크립트를 활용해서 객체 지향 프로그래밍(굳이 객체 지향 프로그래밍이이 아니더라도..)을 하기 위해서는 수많은 위험 인자를 감수하고 진행해야 한다. 중소규모 프로젝트에서는 개발자끼리 규정을 정해두고 서로 확실히 지키는 방법으로 구현할 수 있겠지만, 대규모 프로젝트에서는 이런 것조차 힘들어 진다. 따라서, 설계대로 객체가 생성되었는지, 변수 형 타입은 제대로 되었는지, 원하는 메서드는 존재하는지 검사하는 등의 제약사항을 자바스크립트에 의존하지 않고 스스로 프로그래밍하여 적용하는 방법들도 사용되고있다고 한다.

Static 멤버

Static 멤버 역시 흉내낼 수 있다. 클래스를 정의하기 위해서 만드는 function은 그 자체로 function객체이다. 따라서 function 객체에 사용자가 속성을 추가함으로서 Static 멤버처럼 사용하는 것이다.

//클래스 정의
function Person()
{
    this.name;
    this.age;
    this.number;
}
Person.prototype.set = function(name, age)
{
    this.name = name;
    this.age = age;
    this.number = ++Person.total;
}
Person.prototype.print = function()
{
    alert("Name : " + this.name
        + "\nAge : " + this.age
        + "\nPerson ID : " + this.number
        + "\nTotal : " + Person.total);
}

//클래스 변수 지정
Person.total = 0;

//객체 생성 및 사용
var person1 = new Person();
var person2 = new Person();

person1.set("Ko", 23);
person2.set("Jun", 22);

person1.print();
person2.print();

개인적인 생각을 말하자면, 자바스크립트로 대부분의 객체지향 기능을 흉내낼 수 있지만, 내부적으로 동작하는 방법을 이해한다면 객체지향 프로그래밍을 쉽게 따라할 수 있을 뿐만아니라, 문제 해결에서도 큰 도움이 될것이라 믿는다.

신고
Tag : 자바스크립트

name    password    homepage
 hidden


자바스크립트 문법1(변수~배열)

기초 문법

  1. 대소문자를 구분한다.
  2. HTML파일 내부에서 사용하거나 외부파일로 빼내어 사용할 수 있다.
    //외부 자바스크립트 파일 사용시
    <script
          language="javascript" 
          type="text/javascript" 
          src="filename.js">
    </script>
    //자바스크립트를 사용할 때
    <script language="javascript" type="text/javascript">
        <!--
             //자바스크립트 내용
        //-->

    </script>
    • 외부 자바스크립트를 위한 <script>태그와 내부 자바스크립트를 위한 <script>는 반드시 따로 존재해야한다.
    • 외부 자바스크립트르 위한 <script>태그에는 반드시 닫기 태그가 존재해야하며, XML타입의 간략한 형태의 닫기 태그는 사용할 수 없다.
    • 내부 자바스크립트를 위한 <script>태그에 주석처리(<!-- //-->)를 하는 이유는 자바스크립트를 지원하지 않는 브라우져를 위한 것이며 생략해도 상관없다.
    • src에는 외부 자바스크립트 파일을 지정하면 된다.
    • language를 생략시, 기본 값은 javascript이다.
    • 자바스크립트의 위치는 보통 <head>태그 사이이며, <body>태그 내부에도 위치한다. 어디에 위치하든 큰 차이는 없다.
  3. 주석으로는 //, /* */ 등이 있다.
  4. 자바스크립트를 지원하지 않는 브라우저는 거의 없지만, 만약 자바스크립트를 지원하지 않는 브라우져에서 소스코드가 출력되는 것을 방지하기 위해 <!-- --> 주석안에 자바스크립트를 작성하는 것이 권장된다.
  5. 자바스크립트를 지원하지 않는 브라우저를 위한 태그로는 <noscript>가 있으며, 이 태그 사이에 자바스크립트를 사용하지 못하는 브라우저에서 출력될 내용을 기술하면 된다. 통상적으로 <script>태그 다음으로 사용한다.
    <script language="javascript" type="text/javascript">
       <!--
            자바스크립트 내용
        -->
    </script>
    <noscript>
           <b> 자바스크립트를 지원하지 않습니다.</b>
    </noscript>
  6. 자바와 관련은 없으며, 문법은 자바와 비슷하지만 느슨한 문법을 지원한다. 즉, 엄격한 자바의 문법을 흉내낸 형태로 각 기능을 지원한다.
  7. C++이나 자바로 구현되는 임베디드 환경에서 사용하도록 제작된 언어로서, C++이나 자바로 작성된 일부 객체를 자바스크립트에서 사용할 수 있다.(C++이나 자바에서 해당 객체를 열어둘 경우)
  8. 브라우저에서 자바스크립트가 해석되고 동작할 때, 순차적으로 인터프리트 되어 동작한다.
    • HTML파일이 다운로드가 완료된 후, 브라우저는 HTML, CSS, Javascript등 모든 요소를 순차적으로 읽고 분석한다.
    • 이때 브라우저는, HTML각 엘리먼트를 만나면 해당 엘리먼트를 DOM의 각 요소로 구성하게 시킨다.
    • Javascript를 만나면 한줄 한줄 프로그램을 해석하고 실행하게 된다.
    • 인라인이나 외부 CSS는 해당 엘리먼트를 찾아서 속성에 적용시킨다.
    • Javascript의 최초로 읽히고 동작하는 순간은, 브라우저가 해당 HTML파일을 처음 읽고 분석하는 단계에서 시작되지만, 사용자는 자바스크립트가 window.onload의 이벤트 핸들러를 통해서 처음 동작하되도록 작성해야한다. 즉, 자바 같은 기타 컴파일 언어는 Main함수부터 동작을 시작하듯이, window.onload부터 시작하는 것이 바랍직하다. 왜냐하면, window.onload 이벤트 핸들러가 동작하기 전에는 DOM엘리먼트도 제대로 갖춰지기 전이며 브라우져가 페이지 분석도 끝내기 전이기 때문이다. 따라서 window.onload 이전에 자바스크립트가 동작하도록 할 경우, 예상치 못한 동작이 야기될 수 있으며, 프로그램의 규모가 커질경우 유지 보수도 상당히 힘들어진다.
  9. 자바스크립트는 사용자에게 상당한 자유도를 부여하는 느슨한 문법을 제공하지만, 규칙이나 가이드라인 없이 javascript프로그램을 작성 할 경우 작은 프로그램에서는 상관없지만 규모가 커질 수 록 유지 보수도 힘들어지고, 심한 경우 프로그램을 뒤 엎고 새로 작성해야 하는 경우도 발생한다.

변수

  1. 지역변수와 전역변수로 나뉜다. 함수 외부의 변수는 전역 변수, 함수 내부의 변수는 지역변수가 된다.
  2. 변수의 사용을 위해, 변수의 선언이 필요 없으며 해당 변수가 처음 사용되는 순간이 변수가 생성되는 순간이다.
    하지만 변수의 선언 순간을 명시적으로 알리기 위해서는 var 키워드를 사용하게 되며, 이미 정의된 변수를  var로 선언할 경우 에러가 발생한다.
  3. 변수의 사용을 위해, 변수의 타입을 지정할 필요없다. 변수의 타입은 자동으로 결정되고 형변환된다.
  4. 변수의 타입은 typeof 변수로 알 수 있다.
  5. 변수의 타입으로는 number, string, boolean, object, function, undefined이 존재한다.
  6. 변수를 생성하면 반드시 초기화 한다. 변수를 초기화 하지 않았을 떄 생기는 대표적인 문제는 다음과 같다.

    //초기화된 변수와 그렇지 않은 변수
    var clearedVariable = "";
    var unclearedVariable;

    //변수에 텍스트를 덧붙인다.
    result1 = clearedVariable + "*NewText*";
    result2 = unclearedVariable + "*NewText*";
    result3 = unclearedVariable + 10;

    //실제 출력이 예상한것과 다르다는 것을 알 수 있을 것이다.
    alert("result1 : " + result1 + "\nresult2 : " + result2 + "\nresult3 : " + result3);

    변수를 초기화 하지 않았을 때는, undefined가 할당된다. 반면에, 변수를 ""로 초기화 할 경우 null(또는 0. 여기서 null과 0, false의 의미는 같다.)을 가지게 된다. undifined라는 값이 할 당되고, 이 값은 문자열과 결합 시에 그대로 undefined가 결합되며, 숫자와 계산이 될때는 NaN(Not a Number)로 계산 결과로 NaN을 가지게된다.

배열

  1. 배열을 사용하기 위해서는 반드시 Array객체 할당을 통해서 사용할 수 있다.
    var 변수명 = new Array(매개변수n);
  2. Array 객체의 생성자 매개변수로는 다음과 같다.
    • 하나의 정수값을 지정할 경우, 배열의 크기가 된다.
    • n개의 데이터를 지정할 경우, 배열의 요소가 된다. 첨자값으로 숫자가 사용되며 첨자는 0부터 시작한다.
    • 지정하지 않을 경우, 배열의 크기는 처음 값을 대입하는 순간 결정된다.(즉 배열의 크기는 0으로 시작한다는 말.)
  3. Array객체의 다양한 속성과 함수를 통해 배열의 조작이 가능하다. 대표되는 몇가지는 다음과 같다.
    • length 속성 : 배열요소의 개수를 가지고 있다.
    • prototype 속성 : 함수나 속성을 Array객체에 추가할 수 있다. 단 new로 생성된 객체에서는 prototype를 통해 추가할 수 없다.
    • pop() 함수 : 배열의 마지막 요소를 삭제하고 배열의 크기를 1줄인다. 삭제된 값을 반환한다.
    • sort() 함수 : 매개변수를 생략하면 오름차순으로 정렬되며, 매개변수에 정렬함수를 지정할 수 있는데 다음과 같은 규칙을 따라야한다.
      • 정렬 함수는 두개의 매개변수를 받아들여, 두 매개변수를 비교하여 양수, 음수, 0 중에 하나의 값을 반환해야한다.
      • 다음은 정렬 함수를 지정하는 예제로서, 반환 값을 조정함으로서 오름차순, 내림 차순 등을 지정할 수 있다.

        var myArray = new Array(3,4,5,2,34,5,23,4,1,2,1);
        myArray.sort(
            function(a,b)
            {
                if(a > b)
                    return 1;
                else if(a < b)
                    return -1;
                else
                    return 0;
            }
        );

        alert(myArray.toString());

    • reverse() 함수 : 배열에 포함된 요소의 값을 뒤집어 버린다.
  4. 배열의 크기를 늘이는 것은 매우 간단하다. 배열의 첨자를 크게 지정할 때마다 그 만큼 배열이 자동확장되기 때문이다. 하지만 배열의 크기를 줄이기 위해서는 Array객체의 함수를 사용해야한다.
  5. 배열의 첨자로 정수 뿐만 아니라 문자열 키 값을 지정할 수 있다. 이 경우, 일반 숫자 첨자를 사용한 배열 요소처럼 Array객체의 속성이나 함수로 조작할 수 없다.

    myArray = new Array(1,2,3,4,5);               
    myArray["test"] = 30;
    myArray = {name:son, age:20} ;
    alert(myArray.length); //5 출력
    alert(myArray["test"]); //30 출력
    alert(myArray.toString()); //1,2,3,4,5 출력

    위의 경우 문자열 첨자 'test' 항목은, 숫자첨자를 사용하는 항목과 따로 관리된다는 것을 알 수 있다.
    내부적으로 위의 배열이 동작하는 원리를 알면, 왜 위와 같은 결과가 나타나는지 알 수 있다. 위의 배열 객체에서 숫자 첨자를 이용한 데이터는 Array객체 내부적으로 배열 값으로 정상 처리하지만, 문자열 첨자의 경우 객체의 속성값으로 지정해버린다. 따라서, 문자열 첨자로 지정한 데이터는 Array의 각 종 함수와 속성에 영향을 받지 않게 된다.

    myArray = new Array(1,2,3,4,5);
    //length라는 문자열 첨자로 값을 지정할 경우
    myArray["length"] = 30;
    //Array의 속성 length와 중복된다는 것을 알 수 있다.
    alert(myArray.length); //30 출력
    alert(myArray["length"]); //30 출력

    위의 예에서 볼 수 있듯이, 문자열 키 점자 length로 값을 지정하였더니, 기존의 Array의 length라는 속성의 값으로 할당되는 것으로 알 수 있다. 즉 myArray.length와 myArray["length"]는 같은 표현이며, 같은 데이터를 가리키고 있다.
    이와 같은 자바스크립트의 특징은 객체 단계로 넘어가면 더 잘 알 수 있게 되는데, 자바스크립트에서 객체와 리스트와 배열 사이의 경계는 상당히 모호하다. 자바스크립트는 사용자에게는 다른 Java나 C#과 같은 언어의 문법을 제공함으로서 사용자가 객체 지향 프로그래밍을 쉽게 사용할 수 있도록 하고 있지만, 내부적으로 객체는 배열을 이용해서 구성하고 있을 뿐이다.
  6. Array 객체를 사용하지 않고, 사용하는 방법은 다음과 같다.
    //배열
    myArray = ["값1", "값2", "값3"];
    //키와 값을 이용하는 리스트
    myList = {키1:"값1",  키2:"값2", "키 3" :"값3"};
    myList 부분에서 키 3과 같이 키 값에 공백이 들어간다면 더블쿼테이션(")으로 둘러쳐 주면 된다.
  7. 다차원배열 : 자바스크립트에서 배열은 1차원배열만 지원한다. 따라서, 일차원배열에 다시 배열을 할당함으로서 다차원배열을 구현할 수 있다. 그 값을 참조하기 위해서는 [][][].. 등으로 기존의 다른 언어와 같다.
신고
Tag : 자바스크립트

name    password    homepage
 hidden


자바스크립트 달력
자바스크립트를 이용한 달력 프로그램입니다.

 인터넷에서 구한 소스코드를 이용하여

 무수한 오류와 무수한 불필요한 코드 삭제 등 제가 보수작업한 소스코드이므로 문제는 없으리라 봅니다.

또한 모든 디자인 부분을 CSS코드로 분리함으로서 디자인 변경도 상당히 유용할 것입니다..

(한가지 아쉬운 점은 귀차니즘으로 인해 popup창의 크기와 달력 레이아웃을 div로 나누지 않았기때문에,

 달력 디자인 변경은 색상 이나 폰트, 크기 외에는 불가능하다는 것입니다.. 나중에 수정하여 올릴 예정입니다..)

사용하기 정말 간단하면서도 강력하지만 이 프로그램은 IE전용입니다.(createPopup 사용)

다음 그림과 같습니다.

사용자 삽입 이미지

소스파일입니다.. 혹시라도 문제가 발생한다면 pinerest@naver.com으로 메일주시길 바랍니다.

원작자분께서 보시고 메일로 알려주신다면 그에따른 처리를 하도록 하겠습니다.
신고
Tag : 달력, 자바스크립트
Commented by 김정환 at 2011.05.08 12:33 신고  r x
익스 6,7,8,9 다 되요 ??? ;;;;
Replied by Favicon of http://thankee.tistory.com BlogIcon thankee at 2011.09.15 20:19 신고 x
IE 678 정상동작 확인했습니다~! 다만 createPopup()이라는 메서드가 IE전용이라.. 타 브라우저에서는 정상 동작하지 않네요..

대학생때 간단히 만든거였는데, 꽤나 많이 사용해주셔서 감사하게 생각하고 있습니다.. 모든 브라우저에서 정상동작하게, 몇가지 더 보완해서 올려야하나;;
Commented by 나그네 at 2017.01.18 09:02 신고  r x
힘든 보수과정에 그리고 쿨한 배포에 진심으로 감사드립니다.

name    password    homepage
 hidden


IE6에서 자바스크립트 버그..
 저는 IE7과 FF를 쓰기 때문에, 코드 디버깅도 자연스럽게 IE7과 FF에 초점이 맞춰지게 됩니다.

페이지를 만들고, 다른 페이지 작업을 열심히 하던 중, 제가 만들었던 페이지에서 JavaScript버그가 있다는 말을 들었습니다. IE6에서마나 발생하더군요. 그 날 부터 이틀을 매달렸지만, 버그의 원인은 커녕, 버그의 위치도 알수가 없었습니다..

에러가 발생하는 라인이 들쭉 날쭉하며, 에러 명도 자주 바뀌더군요.. 다음이 에러 명이 였었죠..

 -  '{'가 필요합니다. (에러 위치가 들쭉 날쭉 하더군요..)
 -  개체를 찾을 수 없습니다. (0번째 줄, 0번코드 라더군요..)
 -  함수 밖의 return문 이라는 등.. (전혀 그런 문장이 없었음에도..)

해결방법 : 이상하게 동일문제가 해외사이트에서는 거론되지 않는 다는 데서 착안, 한글 주석을 줄이니까 해결이 되더라구요. 한글 주석을 제거하다보면(또는 영문주석으로 바꾸시던지..) 해결 되실겁니다.


신고
Tag : ie6 자바스크립트 버그, 자바스크립트
Commented by 플랭군 at 2010.07.06 14:51 신고  r x
정말 감사합니다.
그리고 '' 로 싸여진 문자열의 경우에는 한글로 끝나는 경우에도 이런 문제가 발생합니다.

일단 "" 로 싸거나, 한글로 끝나는 문장을 만들지 않으면 문제가 없는것 같습니다.
Replied by Favicon of http://thankee.tistory.com BlogIcon thankee at 2010.09.10 17:50 신고 x
어디서도 듣기 힘든 고급정보를 알려주셔서 감사합니다.^^ 덕분에 제 지식이 한층 업그레이드 되었네요!~^^

name    password    homepage
 hidden


 Category
분류 전체보기 (95)
Netwrok & Security (6)
Web Development (61)
Database (5)
Framework (6)
Others (17)
About (0)
 TAGS
SourceSafe2005 ebnf 영국 인턴쉽 PHP 강좌 ASP.NET ajax 오라클 구조 Silverlight XML linux WCF mantis bug tracker smarty mantis exception UpdateProgress web tier 리눅스 DTD 영국 홈스테이 php data tier Blog API ATRIX MS SQL Server 영국 학원 ASP 자바스크립트 ie6 자바스크립트 버그 오라클 특수문자 class id 차이 application error #401 RFC 4180 SourceSafe Internet id name 차이 maxRecievedMessageSize c#.net LiveMail It's me
 Calendar
«   2017/12   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
 Visitor Statistics
Total : 251,719
Today : 48
Yesterday : 124
rss
 

티스토리 툴바