JavaScript 기본

JavaScript가 정말 뭘까요?

JavaScript 는 HTML 문서에 적용할 때 웹사이트에 동적 상호작용성을 제공할 수 있는 충분한 동적인 프로그래밍 언어입니다. 이것은 Mozilla 프로젝트, Mozilla 재단, 그리고 Mozilla 법인의 공동 창설자인 Brendan Eich 에 의해 만들어졌습니다.

JavaScript 로 아주 많은 것을 할 수 있습니다. 여러분은 carousels, 사진첩, 변화하는 레이아웃, 그리고 버튼 클릭에 반응하는 것 같은 간단한 기능과 함께 작은 것부터 시작할 것입니다. 나중에 여러분이 이 언어에 더 많은 경험을 하게되면 게임이나 생기있는 2D 그리고 3D 그래픽, 완전한 데이터 베이스 위주의 앱 등을 만들수도 있을 것입니다!

JavaScript 자체는 상당히 작지만 아주 유연합니다, 그리고 개발자들은 아주 작은 노력으로 많은 추가적인 기능들을 발견하기 위해 핵심 JavaScript 언어위에 놓인 많은 도구들을 개발해왔습니다. 이러한 것들을 포함합니다:

• 응용 프로그래밍 인터페이스 (APIs) 는 동적으로 HTML 을 생성하고 CSS 스타일을 설정거나, 또는 사용자의 웹캠으로부터 비디오 스트림을 얻거나 조작하는것, 또는 3D 그래픽이나 오디오 샘플을 생성하는 것 같은 다양한 기능성을 제공하는 웹 브라우저 안으로 들어갔습니다.
• 외부 API 들은 트위터나 페이스북같은 다른 자원으로부터 그들의 사이트에 기능성을 포함할 수 있도록 허용합니다.
• 여러분이 여러분의 HTML 에 적용할 수 있는 외부 프레임워크와 라이브러리는 사이트와 어플리케이션을 빠르게 생성할 수 있도록 해줍니다.

"hello world" 예시

위의 내용은 정말 흥미롭게 들립니다, 그렇기 때문에 — JavaScript 는 가장 흥미로운 웹 기술 중 하나이고, 이것을 잘할수록 여러분의 웹사이트는 새로운 차원의 힘과 창조성으로 들어갈 것입니다.

하지만, JavaScript 는 HTML 과 CSS 보다 편안해지는 것이 조금 더 어렵습니다. 여러분은 작은 것부터 시작할 것이고 작고 규칙적인 단계로 작업을 해야 할 것입니다. 시작하기 위해, 여러분의 페이지에 "hello world!" 예시를 만들기 위한 아주 기본적인 JavaScript 를 어떻게 추가할 수 있는지 보여드릴 것입니다. (기본 프로그래밍 예제 표준.)

1. 먼저, 여러분의 테스트 사이트로 가서 main.js 라는 새 파일을 생성하세요. scripts 폴더에 저장하시면 됩니다.
2. 다음으로, index.html 파일로 가서 닫는 태그 </body> 바로 전에 다음의 엘리먼트를 입력하세요:

   <script src="scripts/main.js"></script>

3. 이것은 기본적으로 CSS 를 위한 <link> 엘리먼트를 추가할 때와 같은 일을 하는 것입니다 — 페이지에 JavaScript 를 적용하여서 HTML (그리고 CSS, 또 페이지의 다른 것들에도) 에 효과를 주게됩니다.
4. 이제 main.js 파일에 다음 코드를 추가하세요:

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. HTML 과 JavaScript 파일들이 저장되었는지 확인하시고, 브라우저에서 index.html 을 열어보세요. 여러분은 다음과 같은 것을 보게 될 것입니다:

무슨 일이 발생했나요?

그러니까 여러분의 헤딩 문자가 JavaScript 를 사용하여 "Hello world!" 로 변경되었습니다. 우리는 먼저 헤딩에 정보를 얻기 위해 querySelector() 라 불리는 함수를 사용했고, myHeading 이라는 변수에 저장하는 것으로 이것을 해냈습니다. 이것은 우리가 CSS 에 셀렉터를 사용한 것과 아주 유사합니다. 여러분이 엘리먼트에 뭔가를 하길 원할 때, 먼저 그것을 선택할 필요가 있습니다.

그 다음, myHeading 변수의 innerHTML 속성 값 (헤딩의 컨텐트를 나타내는 것) 을 "Hello world!" 로 설정했습니다.

수업으로 들어오는 언어의 기본들

어떻게 이것들이 작동하는지에 대한 좀 더 많은 이해를 드리기 위해, JavaScript 언어의 기본 특징에 대한 약간의 설명을 드리겠습니다.  이러한 특징들은 모든 프로그래밍 언어에서 일반적입니다. 만약 여러분이 이러한 기초들을 이해한다면, 어떤것에 대한 프로그래밍이라도 시작하실 수 있을 것입니다!

변수

Variables 는 여러분이 값을 저장할 수 있는 용기입니다. var 키워드로 변수를 선언하는 것으로 사용할 수 있고, 여러분이 부르길 원하는 어떤 이름이 따라옵니다:

var myVariable;

변수를 선언한 후에, 값을 줄 수 있습니다:

myVariable = 'Bob';

변수의 이름을 부르는 것으로 값을 얻을 수 있습니다:

myVariable;

여러분이 원한다면 같은 줄에서 이러한 연산을 모두 할 수 있습니다:

var myVariable = 'Bob';

변수에 값을 준 후에, 나중에 이것을 선택해 변경할 수 있습니다:

var myVariable = 'Bob';
myVariable = 'Steve';

변수가 여러 자료형 을 갖는다는 것을 기억하세요:

그래서 왜 여러분이 변수가 필요할까요? 글세요, 변수들은 프로그래밍의 흥미로운 것 모든 것을 하기 위해서 필요합니다. 만약 값이 바뀔 수 없다면, 여러분은 안부 메시지를 맞추는 것이나 이미지 갤러리에 전시된 이미지를 변경하는 것 같은 어떠한 동적인 것도 할 수 없습니다.

주석

JavaScript 코드 안에 주석을 넣을 수 있습니다, CSS 에서 한 것 처럼요:

/*
사이에 있는 모든 것은 주석입니다.
*/

만약 여러분의 주석이 줄바꿈을 포함하지 않는다면, 이렇게 두개의 슬래시 뒤에 주석을 놓는 것이 보통 더 쉽습니다:

// 이것은 주석입니다

연산자

operator 는 두 값 (또는 변수) 을 기본으로 한 결과를 생성하는 수학 기호입니다. 다음의 테이블에서 여러분은 몇 개의 가장 간단한 연산자들을 보실 수 있고, 추가로 JavaScript 콘솔에서 확인해 볼 수 있는 몇개의 예시도 있습니다.

살펴볼 아주 많은 연산자들이 더 있지만, 지금은 이걸로 충분합니다. 완벽한 리스트는 수식과 연산자들 에서 확인해보세요.

조건문

조건문은 여러분이 수식의 결과가 true 인지 아닌지 테스트하고, 그 결과에 따라 다른 코드를 실행할 수 있게 해주는 코드 구조입니다. 가장 일반적인 조건문의 형태는 if ... else 명령입니다. 그 예를 들면:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

if ( ... ) 안의 수식은 테스트 입니다 — 이것은 변수 iceCream  과 문자열 chocolate 을 비교하여 둘이 같은지 확인하기 위해 일치 연산자 (위에서 설명드린) 를 사용합니다. 만약 이 비교가 true 를 반환한다면, 첫 번째 코드 블록을 실행합니다. 그렇지 않으면 그 코드를 건너뛰고 else 문장 후의 두 번째 코드 블록을 실행합니다.

함수

Functions 는 여러분이 재사용하기를 원하는 기능들을 담는 방법입니다, 그래서 여러분이 해당 기능을 원할때마다 항상 전체 코드를 다시 작성하는 대신 그 함수 이름을 부를 수 있습니다. 여러분은 몇 개의 함수들을 위에서 봐왔습니다, 예를 들어:

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

이 함수들은 여러분이 사용하길 원할 때마다 브라우저 안으로 만들어집니다.

만약 여러분이 변수 이름인데, 뒤에 괄호 — () — 를 갖고 있는 뭔가를 보게 된다면, 이것은 분명 함수일 것입니다. 함수는 보통 arguments 를 갖습니다 — 그들이 동작하기 위해 필요한 약간의 데이터. 이것들은 괄호 안으로 들어가고, 하나 이상의 항목이라면 콤마로 구분됩니다.

예를 들면, alert() 함수는 브라우저 창안에서 팝업창을 생성합니다, 하지만 팝업창 안에 작성할 것을 인수로써 문자열로 함수에게 줄 필요가 있습니다.

좋은 소식은 여러분은 여러분 고유의 함수를 정의할 수 있다는 것입니다 — 다음 예시에서 우리는 두 수를 인수로 입력받고 그것을 곱하는 간단한 함수를 작성합니다:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

콘솔에 위 함수를 실행해보세요, 그 다음 여러분의 새 함수를 몇 번 사용해보세요, 가령:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

이벤트

웹사이트에 진짜 상호작용적인 것을 생성하기 위해, 여러분은 이벤트가 필요합니다 — 이것들은 브라우저에게 일어나는 것들을 주의깊게 듣고 있다가 그것들에 응답하는 코드를 실행하도록 해주는 코드 구조입니다. 가장 명확한 예시는 무언가에 마우스 클릭을 할 때 브라우저에 의해 시작되는 클릭 이벤트 입니다. 이것을 설명하기 위해, 여러분의 콘솔에 다음을 입력하고, 현재 웹페이지에 클릭을 해보세요:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

엘리먼트에 이벤트를 붙이는 방법은 많습니다. 여기 우리는 HTML 엘리먼트를 선택하고 이것의 onclick 핸들러 속성을 클릭 이벤트가 발생할 때 실행하길 원하는 코드를 포함하는 익명 (이름이 없는) 함수와 같게 설정하고 있습니다.

기억하세요 이것은

document.querySelector('html').onclick = function() {};

이것과 같습니다.

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

그냥 짧을뿐 입니다.

예시 웹사이트 확장하기

이제 우리는 몇 개의 JavaScript 기본을 살펴보았습니다, 여러분에게 가능한 것에 대한 몇 가지 첫번째 아이디어를 드리기 위해 우리의 예시에 몇 개의 멋진 기본 특징들을 추가해봅시다.

이미지 변경자 추가하기

이곳에서는 우리의 사이트에 다른 이미지와, 이미지를 클릭할 때 두 이미지를 바꿀 수 있는 어떤 간단한 JavaScript 를 추가할 것입니다.

1. 먼저, 여러분의 사이트에 나타내길 원하는 다른 이미지를 찾으세요. 여러분의 첫 번째 이미지와 같은 사이즈 또는 가능하면 비슷한 크기임을 확실히 하세요.
2. images  폴더에 이미지를 저장하세요.
3. main.js 파일로 가서, 다음 JavaScript 를 입력하세요 (만약 hello world JavaScript 가 있다면, 지우세요):

   var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

4. 모든 파일을 저장하고 브라우저에서 index.html 를 불러오세요. 이제 여러분이 이미지를 클릭할 때, 이것은 그 다른 이미지로 바뀔 것입니다!

그러니까 여기, 우리는 myImage  변수 안의 이미지 엘리먼트안에 정보를 저장하고 있습니다. 다음으로, 이 변수의 onclick 이벤트 핸들러 속성을 익명 함수와 같게 만들것입니다. 이제, 매번 이미지 엘리먼트가 클릭될 때:

1. 우리는 이미지의 src  속성 값을 얻습니다.
2. src 값이 원본 이미지 경로와 같은지 검사하기 위한 조건문을 사용합니다:
   1. 만약 그렇다면, src  값을 두 번째 이미지 경로로 변경하고, <image> 엘리먼트의 안에서 다른 이미지가 불려질 수 있도록 강제할 것입니다.
   2. 그렇지 않다면 (이미 변경되었다는 것을 의미), src 값을 원본 이미지 경로로 되돌리고, 원래 있던대로 돌려놓습니다.

개인화된 환영 메시지 추가하기

다음으로 유저가 처음으로 사이트에 방문했을 때 개인화된 환영 메시지를 포함하도록 페이지의 타이틀을 변경하기 위해 약간의 또 다른 코드를 추가할 것입니다. 이 환영 메시지는 그 유저가 사이트를 떠나고 다시 돌아올 때까지 유지될 것입니다. 또한 사용자와 그에 따른 환영 메시지가 요청될 때마다 변경되도록 옵션을 추가할 것입니다.

1. index.html 안에, <script> 엘리먼트 전에 다음 코드를 추가하세요:

   Change user

2. main.js 안에, 파일의 마지막에 정확히 쓰여진 그대로 다음의 코드를 추가하세요 — 이것은 우리가 추가했던 새 버튼의 내용을 얻고, 변수에 그값을 저장합니다:

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. 이제 개인화된 인사말을 설정하기 위해 다음 함수를 추가합니다 — 아직 아무 동작도 하지않을 것이지만, 나중에 사용할 것입니다:

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   이 함수는 대화상자를 불러오는 prompt() 함수를 포함합니다. alert() 과 유사하지만 prompt() 는 사용자에게 어떤 데이터를 입력하길 요청하고, 사용자가 OK 를 누른 후에 그 값을 변수에 저장합니다. 이 예시에서는, 사용자에게 그들의 이름을 입력하길 요청하고 있습니다. 다음으로, 브라우저에 데이터를 저장하고 나중에 불러올 수 있도록 해주는 localStorage 라는 API 를 부릅니다. 우리는 'name' 라는 데이터 항목을 생성하고 저장하기 위해 localStorage 의 setItem() 함수를 사용합니다. 그리고 사용자가 입력한 이름을 포함하는 그 값을 myName  변수에 저장합니다. 마지막으로, 헤딩의 innerHTML 을 유저의 이름을 포함한 스트링으로 설정합니다.
4. 다음으로, 이 if ... else 문을 추가합니다 — 처음 불려질 때 앱이 셋업되도록 이 초기화 코드를 불러옵니다:

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   이 구문은 먼저 name 데이터 아이템이 존재하는지 확인하기 위해 부정 연산자 (논리적 NOT) 를 사용합니다. 존재하지 않는다면 값을 생성하기 위해 setUserName() 함수를 실행합니다. 존재한다면 (예로, 이전 방문을 통해 사용자가 세팅되었음), 우리는 getItem() 을 사용해 저장된 이름 값을 얻고, 헤딩의 innerHTML  을 setUserName() 안에서 작업한 것과 같은 사용자의 이름을 포함한 문자열로 세팅합니다.
5. 마지막으로, 아래의 onclick 이벤트 핸들러를 버튼에 추가해서, 클릭될 때 setUserName() 함수가 실행되도록 합니다. 이것은 버튼을 누름으로 인해 유저가 원하는 새 이름을 설정할 수 있도록 해줍니다.

   myButton.onclick = function() {
     setUserName();
   }
   

이제 여러분이 사이트에 처음으로 방문했을 때, 개인화된 메시지를 제공하기 위해 여러분의 이름을 물을 것입니다. 그리고 언제든 버튼을 누름으로 여러분이 원하는 이름으로 변경할 수 있습니다. 추가 선물로써, 이름은 localStorage 에 저장되기 때문에, 사이트가 닫힌 이후에도 이름이 유지됩니다. 그래서 개인화된 메시지는 여러분이 사이트를 다시 열었을 때 그대로 남아있을 것입니다!

마무리

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 즐겁게 배우셨고, 더 깊게 학습하고 싶으시다면, JavaScript 안내서 페이지로 가보세요.