13. 자바스크립트 이벤트(JS Events)

[참고] http://www.w3schools.com/js/js_events.asp

HTML이벤트는 HTML요소에서 발생할 수 있는 상황이다.

자바스크립트가 HTML페이지에서 사용될 때, 자바스크립트는 이런 이벤트에 반응한다.

---

HTML Events(HTML 이벤트)

HTML 이벤트는 브라우저나 사용자가 행하는 어떤 것이 될 수 있다.

아래는 HTML 이벤트의 예제들이다.

• HTML 웹페이지 로딩이 끝났을때
• HTML 입력 필드가 변경됬을 때
• HTML 버튼이 클릭됐을 때

종종 이벤트가 발생할 떄, 당신은 뭔가 하고싶을지도 모른다.

자바스크립트는 이벤트가 감지됐을 때 코드가 실행되도록 한다.

HTML은 자바스크립트 코드와 함께 이벤트 핸들러 속성이 HTML 코드에 추가되도록 해준다.

With single quotes:

<some-HTML-element some-event='some JavaScript'>

With double quotes:

<some-HTML-element some-event="some JavaScript">

다음 예에서, onclick 속성은(코드포함) 버튼요소에 추가된다.

Example

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

Try it Yourself »

위 예에서, 자바스크립트 코드는 id가 demo인 것의 내용을 바꾼다.

다음 예에서, 코드는 자신의 요소의 내용을 바꾼다.

In the next example, the code changes the content of it's own element (this.innerHTML 사용):

Example

<button onclick="this.innerHTML=Date()">The time is?</button>

Try it Yourself »

	자바스크립트 코드는 종종 긴 라인 수를 가진다. 이는 함수를 호출하는 이벤트 속성을 볼일이 더 많다는 것이다.

Example

<button onclick="displayDate()">The time is?</button>

Try it Yourself »

---

Common HTML Events

이것은 몇 일반적인 HTML 이벤트 목록이다.

Event	Description
onchange	HTML요소가 변결될 때 An HTML element has been changed
onclick	사용자가 HTML 요소를 클릭할 때 The user clicks an HTML element
onmouseover	사용자가 HTML요소에 마우스를 올렸을 때 The user moves the mouse over an HTML element
onmouseout	사용자가 HTML 요소에서 마우스를 멀리했을 때 The user moves the mouse away from an HTML element
onkeydown	사용자가 키보드 키를 눌렀을 때 The user pushes a keyboard key
onload	브라우저가 페이지 로딩을 끝냈을 때 The browser has finished loading the page

The list is much longer: W3Schools JavaScript Reference HTML DOM Events.

---

What can JavaScript Do?(자바스크립트가 할 수 있는 것?)

이벤트 핸들러는 사용자 입력, 사용자 동작, 브라우저 동작을 다루거나 확인하는데 사용될 수 있다.

• 페이지 로드마다 수행되어야 하는 것
• 페이지가 닫힐 때 수행되어야 하는 것
• 사용자가 버튼을 클릭했을 때 수행되어야 할 동작
• 사용자가 데이터를 입력했을 때 확인되어야 할 내용
• 등 ...

여러가지 메소드는, 자바스크립트가 이벤트와 같이 작동하도록 사용될 수 있다. 

• HTML 이벤트 속성은 자바스크립트 코드를 직접 실행할 수 있다.
• HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있다.
• 자신의 이벤트 핸들러 기능을 HTML 요소에 할당할 수 있다.
• 이벤트가 전송되거나 처리되는 것을 막을 수 있다.
• 등 ...

	You will learn a lot more about events and event handlers in the HTML DOM chapters.

12. 자바스크립트 범위(JS Scope)

[참고] http://www.w3schools.com/js/js_scope.asp

Scope is the set of variables you have access to.

---

JavaScript Scope(자바스크립트 범위)

자바스크립트에서 객체와 함수 또한 변수이다.

당신이 접근하려는 변수, 객체, 함수의 집합이 자바스크립트에서 범위다.

In JavaScript, scope is the set of variables, objects, and functions you have access to.

자바스크립트 함수 범위를 가지고있다: 범위는 함수안에서 변한다.

JavaScript has function scope: The scope changes inside functions.

---

Local JavaScript Variables(지역 자바스크립트 변수)

함수 안에서 선언된 변수는 함수에서 지역변수가 된다.

지역변수는 지역범위를 가진다: 지역변수들은 함수 오직 함수 안에서만 접근 가능하다.

Example

// code here can not use carName
function myFunction() {
    var carName = "Volvo";

    // code here can use carName
}

Try it Yourself »

지역변수는 오직 그 함수 안에서만 인식이 되기 때문에, 같은 이름을 가진 변수는 다른 함수에서 사용될 수 있다.

지역 변수는 함수가 시작될 때 만들어 지고, 함수가 끝날 때 삭제된다.

---

Global JavaScript Variables(전역 자바스크립트 변수)

변수는 함수밖에서 선언하고, 전역이 된다.

전역 변수는 전역 범위를 가진다: 웹 페이지의 모든 스크립트와 함수가 그것에 접근 가능하다.

Example

var carName = " Volvo";

// code here can use carName
function myFunction() {

    // code here can use carName 
}

Try it Yourself »

---

Automatically Global

만약 선언되지 않은 변수에 값을 할당한다면, 그것은 자동으로 전역 변수가 될 것이다.

비록 변수가 함수안에서 실행될지라도, 이 코드예제는 carName을 전역 변수로 선언할 것이다.

Example

// code here can use carName
function myFunction() {
    carName = "Volvo";

    // code here can use carName
}

Try it Yourself »

---

The Lifetime of JavaScript Variables(자바스크립트 변수 수명)

자바스크립트 변수의 수명은 변수가 선언될 때 시작된다.

지역변수는 함수가 끝나면 삭제된다.

전역 변수는 페이지를 닫을 때 삭제된다.

---

Function Arguments(함수 인수)

함수 인수(매개변수)는 함수안에서 지역변수로 작동한다.

---

Global Variables in HTML(HTML에서 글로벌 변수)

자바스크립트에서 전역범위는 완벽한 자바스크립트 환경에 속한다.

HTML에서 전역 범위는 윈도우 객체(window object)다: 모든 전역 변수는 윈도우 객체(window object)에 속한다.

Example

// code here can use window.carName
function myFunction() {
    carName = "Volvo";
}

Try it Yourself »

---

Did You Know?

	전역 변수나 함수는 윈도우 변수나 함수가 덮어 쓸 수 있다. 윈도우 객체에 포함되는 누구나 전역 변수나 함수를 덮어 쓸 수 있다.

11. 자바스크립트 객체(JS Objects)

[참고] http://www.w3schools.com/js/js_objects.asp

Real Life Objects, Properties, and Methods(실생활의 객체, 속성, 메소드)

실제 생활에서, 자동차는 객체이다.

자동차는 무게와 색상 같은 속성, 출발과 정지 같은 메소드를 가진다.

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

모든 자동차는 같은 속성을 가지지만, 속성 값은 자동차마다 다르다.

모든 자동차는 같은 메소드를 가지지만, 메소드는 매번 다른 시간에 수행된다.

---

JavaScript Objects(자바스크립트 객체)

이미 자바스크립트 변수는 데이터 값을 저장하기 위한 컨테이너라고 배웠다.

이 코드는 간단한 값(Fiat)을 car 변수에 할당한다.

var car = "Fiat";

Try it Yourself »

객체도 변수이다. 하지만 많은 변수를 포함할 수 있다.

이 코드는 여러 값(Fiat, 500, white) 를 car 변수에 할당한다.

var car = {type:"Fiat", model:500, color:"white"};

Try it Yourself »

값은 이름:값 형식으로 쓰여진다(이름과 값은 콜론으로 구분한다).

	자바스크립트 객체는 이름이 부여된 값을 위한 컨테이너이다.

---

Object Properties(객체 속성)

이름:값 형식(자바스크립트 객체에서)은 속성이라 불린다.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue

---

Object Methods(객체 메소드)

메소드는 객체에서 수행될 수 있는 행동이다.

메소드는 함수 정의로서 속성에 저장된다.

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

	자바스크립트 객체는 속성과 메소드라 불리는, 이름지어진 값을 위한 컨테이너다.

---

Object Definition(객체 정의)

자바스크립트 객체는 object literal로 정의(생성)한다.

Example

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Try it Yourself »

공백과 줄바꿈은 중요하지 않다. 객체 정의는 여러 줄이 될 수 있다.

Example

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

Try it Yourself »

---

Accessing Object Properties(객체 속성 접근)

두가지 방식으로 객체 속성을 접근할 수 있다.

objectName.propertyName

or

objectName[propertyName]

Example1

person.lastName;

Try it Yourself »

Example2

person["lastName"];

Try it Yourself »

---

Accessing Object Methods(객체 메소드 접근)

다음 구문으로 객체 메소드에 접근한다.

objectName.methodName()

Example

name = person.fullName();

Try it Yourself »

만약 () 없이 fullName 속성에 접근한다면, 함수 정의가 반환될 것이다.

Example

name = person.fullName;

Try it Yourself »

---

Do Not Declare Strings, Numbers, and Booleans as Objects!(객체로 Strings, Numbers, Booleans을 선언하지 마라)

자바스크립드 변수가 "new" 키워드와 함께 선언된다면, 변수는 객체로 만들어진다.

var x = new String();        // Declares x as a String objectvar y = new Number();        // Declares y as a Number objectvar z = new Boolean();       // Declares z as a Boolean object

String, Number, Boolean 객체를 피하자. 그것들은 코드를 복잡하게하고 실행속도를 느리게한다.

	You will learn more about objects later in this tutorial.

10. 자바스크립트 함수(JS Fucntions)

[참고] http://www.w3schools.com/js/js_functions.asp

자바스크립트 함수는 특정 업무를 수행하기위해 설계된 코드 블록이다.

자바스크립트 함수는 "무언가"가 함수를 호출할 때 실행된다.

---

Example

function myFunction(p1, p2) {
    return p1 * p2;              // The function returns the product of p1 and p2}

Try it Yourself »

---

JavaScript Function Syntax(자바스크립트 함수 구문)

자바스크립트 함수는 function 키워드, 이름, 괄호()와 함께 정의된다.

함수 이름은 문자, 숫자, 밑줄, 달러 기호(변수와 동일한 규칙)를 포함할 수 있다.

삽입문구인 ()는 콤마로 구분된 파라미터 이름들을 포함할 수 있다.(parameter1, parameter2, ...)

다음 함수에 의해 실행되는 코드는 중괄호{}안에 위치한 것들이다.

functionName(parameter1, parameter2, parameter3) {
    code to be executed
}

함수 파라미터는 함수 정의에서 열거된 이름들이다.

함수 인수가 함수가 호출될때 받는 진짜 값이다.]

함수안에서, 인수는 지역 변수로 사용된다.

	다른 프로그래밍 언어에서, 함수는 프로시저 혹은 서브루틴과 동일하다.

---

Function Invocation(함수 호출)

함수안 코드는 "무언가"가 함수를 호출할 때 실행할 것이다.

• 이벤트가 발생할 때(유저가 버튼을 클릭시)
• 자바스크립트 코드로부터 호출 될 때
• 자동으로(자기 호출)

You will learn a lot more about function invocation later in this tutorial.

---

Function Return(함수 반환)

자바스크립트가 return 문에 도달할 때, 함수는 실행을 멈출 것이다.

return 이 문장으로부터 호출되었을 때, 자바스크립트는 호출 후 코드를 실행하기 위해 다시 돌아 갈 것이다.

함수는 종종 리턴 값을 계산한다. 리턴 값은 호출함수에서 반환한다.

Example

Calculate the product of two numbers, and return the result:

var x = myFunction(4, 3);        // Function is called, return value will end up in x
function myFunction(a, b) {
    return a * b;                // Function returns the product of a and b}

The result in x will be:

12

Try it Yourself »

---

Why Functions?(왜 함수인가)

코드를 재사용 할 수 있다. 코드를 한번만 정의하고, 그것을 여러번 사용한다.

다른 결과를 생성하기 위해, 다른 인수들과 함께 여러번 같은 코드를 사용할 수 있다.

Example

섭씨를 화씨로 변환

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(32);

Try it Yourself »

---

The () Operator Invokes the Function( () 연산자는 함수를 호출한다)

위 예에서 사용하는 것처럼 toCelsius는 함수 객체를 참조하고, toCelcius()는 함수 결과를 의미한다.

Example

() 없이 함수에 접근하면 함수 기능을 반환한다.

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Try it Yourself »

---

Functions Used as Variables(함수는 변수로 사용된다)

자바스크립트에서 함수는 변수로 사용될 수 있다.

Example

Instead of:

temp = toCelsius(32);
text = "The temperature is " + temp + " Centigrade";

You can use:

text = "The temperature is " + toCelsius(32) + " Centigrade";

Try it Yourself »

	You will learn a lot more about functions later in this tutorial.