웹 애플리케이션 만들기 실습

JavaScript

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688

JavaScript란?

자바스크립트란 HTML을 조작하거나, 브라우저를 제어하는데 사용되는 언어다. 생활코딩의 맥락에서 자바스크립트가 중요한 이유는 이 언어가 본격적인 프로그래밍 언어라는 점 때문이다. 이 언어를 익히면 프로그래밍 언어에 대한 기본적인 소양을 갖출 수 있다. 자세한 내용은 생활코딩의 자바스크립트 수업으로 위임하고, 이번 시간에는 자바스크립트의 '문법'이 아니라, '역할'을 전달하는데 집중할 것이다.

한줄의 코드가 백줄의 설명 보다 낫다. 아래의 코드를 보자. <script> 태그는 브라우저에게 닫히는 태그인 </script> 태그가 등장하기 전까지 나타나는 코드는 자바스크립트이기 때문에 HTML로 해석하지 말고, 자바스크립트의 문법대로 해석하라고 알려주는 것이다.

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			alert('생활코딩');
		</script>
	</body>
</html>

이걸 실행하면 아래와 같이 경고창이 뜨면서 '생활코딩'이라는 메시지가 출력된다. alert() 의 괄호 안에 '생활코딩'이라는 문자를 입력하고 이걸 실행했더니 경고창이 뜨는 것이다. 자바스크립트를 이용해서 브라우저를 제어한다는 것은 이런 의미다. 브라우저는 경고창이라는 기능을 가지고 있고, 여러분이 이 기능을 사용하려면 브라우저가 제공하는 alert 명령에 '생활코딩'이라는 값을 전달한다. 그럼 브라우저는 '경고음'을 내면서 '생활코딩'이라는 메시지를 화면에 출력하는 것이다.

opentutorials의 JavaScript 실습

지금까지 HTML과 CSS를 이용해서 정보를 만들고, 거기에 디자인을 입혔다. 이번에는 사용자와 상호작용하는 기능을 부가함으로서 자바스크립트의 쓰임을 부각시켜보자.

결과

자바스크립트를 시켜서 black 버튼과 white 버튼을 감시하고 있다가 사용자가 해당 버튼을 클릭하면 id 속성의 값이 body인 엘리먼트의 class 속성을 black나 white로 변경한다. 그에 따라 웹페이지에 적용되는 CSS가 달라지면서 아래와 같이 디자인이 반전된다.

전체코드

index.html 파일을 열고 아래의 코드로 교체한 후에 실행시켜본다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                font-size: 0.8em;
                font-family: dotum;
                line-height: 1.6em;
            }
            body.black {
                background-color: black;
                color: white;
            }
            body.black a {
                color: white;
            }
            body.black a:hover {
                color: #f60;
            }
            body.black header {
                border-bottom: 1px solid #333;
            }
            body.black nav {
                border-right: 1px solid #333;
            }
            header {
                border-bottom: 1px solid #ccc;
                padding: 20px 0;
            }
            #toolbar {
                padding: 10px;
                float: right;
            }
            nav {
                float: left;
                margin-right: 20px;
                min-height: 500px;
                border-right: 1px solid #ccc;
            }
            nav ul {
                list-style: none;
                padding-left: 0;
                padding-right: 20px;
            }
            article {
                float: left;
            }
            footer {
                clear: both;
            }
            a {
                text-decoration: none;
            }
            a:link, a:visited {
                color: #333;
            }
            a:hover {
                color: #f60;
            }
            h1 {
                font-size: 1.4em;
            }
        </style>
    </head>

    <body id="body">
        <div>
            <header>
                <h1>JavaScript</h1>
            </header>
            <div id="toolbar">
                <input type="button" value="black" onclick="document.getElementById('body').className='black'" />
                <input type="button" value="white" onclick="document.getElementById('body').className='white'" />
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="http://opentutorials.org/course/49/16">JavaScript</a>
                    </li>
                    <li>
                        <a href="http://opentutorials.org/course/49/17">변수와 상수</a>
                    </li>
                    <li>
                        <a href="http://opentutorials.org/course/49/18">연산자</a>
                    </li>
                    <li>
                        <a href="http://opentutorials.org/course/49/19">함수</a>
                    </li>
                    <li>
                        <a href="http://opentutorials.org/course/49/20">이벤트</a>
                    </li>
                    <li>
                        <a href="http://opentutorials.org/course/49/21">객체</a>
                    </li>
                </ul>
            </nav>
            <article>
                <h2>변수와 상수</h2>
                <div>
                    <p>
                        변수란
                    </p>
                    <ul>
                        <li>
                            변하는 값
                        </li>
                        <li>
                            x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
                        </li>
                    </ul>
                    <p>
                        상수란
                    </p>
                    <ul>
                        <li>
                            변하지 않는 값
                        </li>
                        <li>
                            x = 10 일 때 오른쪽항인 10이 상수가 된다.
                        </li>
                    </ul>
                </div>
            </article>
        </div>
    </body>
</html>

위의 코드 중에서 이전 수업 대비 변경된 부분은 아래와 같다.

CSS

body.black{
	background-color: black;
	color:white;
}
body.black a{
	color:white;
}
body.black a:hover{
	color:#f60;
}
body.black header{
	border-bottom:1px solid #333;
}
body.black nav {
	border-right: 1px solid #333;
}

위의 코드는 웹페이지의 배경을 검은색, 글씨를 흰색으로 표시할 것을 골자로 하는 CSS다. 그런데 새로운 선택자가 등장했다. body.black은 body 태그 중에 class 속성의 값이 black 인 엘리먼트를 의미한다. 우리가 필요한 것은 사용자가 black 버튼을 눌렀을 때 위의 CSS 효과가 웹페이지에 적용되는 것이다. 이를 위해서는 body 태그의 class 속성이 black이 되어야 한다. 그런데 HTML은 한번 화면에 표시된 웹페이지를 표시된 이후에 동적으로 변경시킬 수 있는 능력이 없다. 이 때 자바스크립트가 사용된다. 이것이 이번 수업의 핵심이다. 필자는 이 말을 하기 위해서 이 단원을 만들었다.

HTML

body 태그는 매우 중요하다. 이 태그의 class 속성 값을 어떻게 변경하느냐에 따라서 디자인이 반전되기 때문이다. id 값으로 body를 준 이유는 자바스크립트가 이 태그에 class 속성 값을 부여하기 위해서다. 곧 알게 된다.

<body id="body">

JavaScript

드디어 자바스크립트가 등장했다. 이번 수업 초입에서 <script> 태그에 대해서 알아봤다. 이번에는 인라인(inline) 방식으로 자바스크립트를 사용할 것이다.  우선 아래의 HTML 코드를 보자.

<input type="button" value="black" onclick="document.getElementById('body').className='black'" />
<input type="button" value="white" onclick="document.getElementById('body').className='white'" />

이제 정말 중요한 이야기를 할 때가 됐다. 자바스크립트와 같은 언어를 이벤트 주도 프로그래밍 (event-driven programming) 이라고 부른다. 이벤트는 영어로 사건을 의미한다. 프로그래밍의 세계에서 사건이란 이런 것이다.

  • 웹페이지의 로딩이 끝났다.
  • 사용자가 마우스를 움직인다.
  • 사용자가 버튼을 눌렀다.

이 사건들을 감시하고 있다가 그 사건이 일어났을 때 어떤 작업을 수행하도록 프로그래밍하는 것이 이벤트 프로그래밍이다. onclick 속성 값은 이 속성을 포함하고 있는 엘리먼트(예제에서는 input 태그)를 사용자가 클릭했을 때 속성 값의 코드를 실행하라는 의미다. 웹브라우저에는 다양한 이벤트가 준비되어 있는데 다음 링크를 통해서 확인해보자. http://opentutorials.org/course/49/21#eventlist

이제 구체적인 코드를 보자. 이벤트가 발생하면 아래의 순서에 따라서 자바스크립트가 실행된다.

  1. 사용자가 버튼을 클릭
  2. 브라우저는 사용자가 버튼을 클릭했다는 것을 감지하고 ,이 버튼에 onclick 속성 값이 있는지 확인
  3. onclick 속성의 값이 있으면 이것을 자바스크립트 코드로 해석. 아래는 자바스크립트에 대한 해설
  4. document.getElementById('body') : id 값이 body인 엘리먼트를 찾아주는 명령
  5. .className  =  'black' : 4번에서 찾은 엘리먼트의 class 속성 값으로 black를 지정하는 명령
  6. id 값이 body인 엘리먼트의 class 속성 값을 black로 변경
  7. body의 class 값이 black로 변경된 것을 감지한 브라우저는 body.black 선택자에 해당되는 효과들로 웹페이지의 디자인을 변경
white 버튼을 눌렀을 때 원래의 색상으로 돌아가는 것은 클래스 네임이 black을 white로 교체했기 때문이다. 그런데 white 클래스에서의 디자인이 CSS 상에서 기술되어 있지 않기 때문에 기본 디자인으로 돌아간 것이다.

정리

지금까지 자바스크립트에 대해서 알아봤다. 이 수업을 시작하면서 자바스크립트가 브라우저와 HTML을 제어하는 언어라고 정의 했다. 그 뜻만 이해했다면 이 번 수업은 대성공이다. 자바스크립트에 대한 구체적인 문법은 이번 수업의 주안점이 아니다. 만약 자바스크립트가 왜 필요한지 이해되지 않는다면 수업을 한번 더 보자. 중요하다! 할 수 있다!

다음 시간부터는 서버측 기술들에 대해서 알아본다. 클라이언트 측의 기술이 사용자에게 편리한 경험을 선사한다면, 서버측 기술은 시스템이 존재하는 기반이면서 목적이라고 할 수 있다.

버전관리


 연습방법

필자가 권장하는 연습방법은 자신의 블로그에 대한 스킨을 직접 만들거나 사용하고 있는 스킨을 변경해서 자신의 입맛에 맞게 수정해보는 것이다. 아래 URL에서 leezche님이 각종 서비스 별 스킨 메뉴얼을 만들고 계신다. 

http://opentutorials.org/course/761

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
  1. chetjju
    목소리가 정말 너무 좋으시네요, 귀에 쏙쏙 들어옵니다
    무엇보다 설명을 정말 쉽게 잘해주시는것 같아요 감사합니다 > <
  2. ssal
    감사합니다! 정말 쉽게 설명해주셔서 좋습니다.
  3. egoing
    아 그건 컴퓨터에 있는 파일을 열어서 실행을 시키면 보안의 문제 때문에 익스의 경우는 사용자에게 사용할 것인지를 물어보는 거예요. 웹서버에 파일을 올려서 그것을 열었을 때는 그렇게 동작하지 않을꺼예요.
    대화보기
    • 궁금해요..
      강의 잘 듣고 있습니다! 감사합니다. 목소리 짱 좋으세요!

      그런데 8강에 자바스크립트 배울 때 white 버튼 누를때 배경 흰색,글자 검정색되고 black버튼 누를 때 배경 검정색, 글자 흰색되고 이 기능이 인터넷 익스플로어에서 배경은 둘다 검정색에 글자 색만 바뀌길래 왜 그런지 계속 찾아보다가 구글크롬에서 해보니 되더라구요, 인터넷 익스플로어에서는 뭔가 차단됐다면서 글자색만 바뀌던데 그게 왜 그런건가요?
    • 하루
      감사합니다.
    • 런드블릭
      아 그거는 그냥 파일을 javascript.html이라는 파일로 이고잉님이 만드신거 같아요 저는 sample2.html이라고 만들어서 그거를 버전관리때 저장소로 넣었구 님이 index.html 혹은 새로운 파일로 만드셨으면 그 파일로 그냥 하시면 될거같아요
      대화보기
      • alexmoon
        궁금한 점이 있습니다. 첫번째 예제에서는

        <script type="text/javascript">
        alert('생활코딩');
        </script>

        를 사용하여 alert의 기능을 활성화 하였습니다.

        하지만 두번째 예제에서 자바스크립트를 이용한 부분을 보면

        <div id="toolbar">
        <input type="button" value="black" onclick="document.getElementById('body').className='black'" />
        <input type="button" value="white" onclick="document.getElementById('body').className='white'" />
        </div>

        이 부분의 onclick 부분인데 onclick 명령어를 사용하기 전에 <script type="text/javascript"> 같은 태그가 없더라구요. 첫번째 예제에서는 <script type="text/javascript">을 없애면 body부분에 달랑 alert "~~~"만 나올텐데
        두번째 예제에서는 왜 <script type="text/javascript"> 태그 없이 바로 자바스크립트를 이용할 수 있는건가요??
      • 영이공
        안녕하십니까
      • 니콜라
        저는 javascript.html 이라는 파일이 따로 생성이 안되는데요. 뭐가 잘못 되었을까요..
      • 오동통통나무
        http://www.youtube.com.......be
        여기에 1:40짜리 녹화본 올렸습니다~~
        대화보기
        • 오동통통나무
          더블클릭해서 편집모드로 한다음에 전체선택해서 복사하는 방법으로 계속 하고 있었습니다 ^^
          대화보기
          • egoing
            더빌킬릭해서 복사 한번 해보시겠어요?
            대화보기
            • 오동통통나무
              OS : Mac 10.8.5 (mountain lion)
              browser : chrome ver.36
              code editor : sublime text2

              강의 잘 보았습니다. 헌데, 오픈튜토리얼 사이트 코드 에디터에 문제가 있는 것 같아서 댓글 답니다.

              본 강의에 나오는 샘플 코드는, 앞서 강의의 css코드에서, style부분과 버튼 부분의 태그를 추가한 내용인데요,
              여기 나오는 코드를 복사하여 코드 에디터(SublimeText2)에 붙여넣기 한 후, 브라우저에서 보면 전혀 다른 모양으로 나옵니다.

              앞 강의 CSS에서 한 거랑 비교하면 몇부분 추가한 것밖에 없는데, 아예 표시되는 것이 달라지는 것을 이상하게 생각해서, 개발자 도구로 element를 확인해 봤는데요

              여기서 복/붙 한 코드는 태그 앞부분에 있는 공백 처리가 전혀 되질 않더군요.(새로운 줄 시작할 때 tab으로 들여쓰기 하는 부분 있죠?) 모두 다 "&nbsp"  로 처리되어서 코드가 이상하게 나오더군요.

              들여쓰기 부분에 있는 공백을 모두 지우고 열어보니, 그제서야 제대로 열리구요.


              screenr로 동영상 녹화해서 보여드릴려고 했는데;;; 녹화를 다 하고 업로드를 하려고 하니 업로드가 되질 않네요. 맥이라서 안되는건지, 구글에 검색해도 저처럼 업로드 안된다는 사람 하도 많길래 그냥 포기 ㅎㅎ

              어쨌든 문제는, 본 사이트의 코드 에디터가 문제인 것 같습니다. 들여쓰기 부분의 공백 처리가 안되는 듯 하네요.
            • 삼다도소년
              재미있습니다^^
            • manta
              copy & paste 가 안 돼, 어렵게 따라하고 있습니다. 또 한 편 끝냈네요.
              고맙습니다.^^
            • sunlightk
              우선 정주행 후에 HTML부터 세부강좌를 자세히 봐야겠어요....
              개념만 대강대강 알고있던건데... 비록 copy&paste라도 따라하다보니 개념이 확 잡히네요
              좋은강좌 제공해주신 이고잉님께 감사드립니다.
            • egoing
              ㅎㅎ 그 책을 출판하는데 어떠한 노력도 하지 않겠다고 약속을 하고 진행했거든요 :)
              대화보기
              • 또치
                친구의 facebook에서 생활코딩 관련 글을 읽고 즐겨찾기만 해놓고 있다가
                지난주부터 보기 시작했는데 정말 컨텐츠도 대단하고 설명도 잘해주셔서 정말 좋습니다! 감사드립니다.

                혹시 저서가 있을까 해서 찾아봤는데 수업 내용과 커리큘럼이 다르지 않네요.
                우선 사이트에서 열심히 공부하고 널리 알리는걸 목적삼아야겠습니다.

                덧) 인상적인 문구(이고잉님 정말 대단하신듯 ㅠ.ㅠ 응원합니다!)
                * 이 책은 저자의 요청으로 인세를 받지 않는 대신 책 가격을 낮추어 출간하였습니다.
              • egoing
                어깨가 으쓱해지네요. 저는 칭찬을 먹고 삽니다~ 감사해요 :)
                대화보기
                • MisticStar
                  이곳을 소개받고 공부하기 시작하면서, 하면할수록 이 사이트의 컨텐츠가 얼마나 대단한 것인지 실감하게 되네요.
                  HTML, CSS, JavaScript 까지 수업을 쭉 따라오면서 이고잉님의 설명도 너무나 이해가 잘되고, 핵심적인 것이 이해가 되면서 제가 앞으로 어떻게 공부를 해나가야하는지 조금씩 머릿속에 그려지기 시작합니다.

                  감사합니다! 전 다음 수업으로~!
                • egoing
                  자바와 자바스크립트는 다른 언어랍니다. ^^
                  대화보기
                  • 말짱황
                    오호~ 자바가 이런 것이군요.
                  • Lee, Junghoon
                    처음으로 java script 적용해 봅니다. 잘되네요. 신기해요.
                    감사합니다. ^^
                  • 착한마왕
                    간단히 말씀드리자면 html 문서는 동적인 페이지가 아니기 때문에 페이지가 새로고침이 되지 않는 이상은 다시 해석하지는 않는 걸루 알고 있구요 처음 로딩될때 버튼을 클릭했을때 변경될 부분까지 한번에 해석해서 브라우저가 가지고 있다고 생각하시면 될것 같습니다. ^^

                    ps. html에서도 ajax 를 사용 해서 동적인 동작을 할 수 있습니다. 이부분은 한번 찾아 보시면 될 것 같습니다.
                    대화보기
                    • 차뽕
                      감사합니다
                    • 오호라
                      수업 감사히 잘 듣고 있습니다. 한가지 궁금한 것이 있습니다. 버튼 클릭에 의한 이벤트를 인식하는 것은 이해가 되는데 그렇다면 브라우저가 주기적으로 body의 클래스 속서이 변한 것을 모니터링 하다가 바뀐순간에 CSS 코드 속성을 다시 가져오고 즉 코드 위서부터 쭉 다시 재해석하면서 다시 화면을 뿌려주는 것인가요? 시간적인 개념이 없어서요.
                    • 보문
                      스크란알닷컴

                      자바로도 이런 기능이 가능함에 감탄하고 있습니다.
                      대화보기
                      • 보문
                        http://124.0.119.136/document 동영상을 보아주세요.

                        생코님 덕분에 한달만에 많은 발전을 하였습니다.


                        그런데 목소리가 같은 것 같군요.
                      • hhi5933
                        공부 잘 하구 갑니다.
                      • 누노
                        재미있어요. 야매로 배운 코딩, 머릿속에서 멋대로 날아다니던 개념들이 하나씩 안착하고 있다는... 감사합니다!
                      • 앗, 제가 동영상을 보지 않고 텍스트만으로 넘어갔던 터라 확인하지 못한 부분이 있었군요... 앞으로 동영상도 꼼꼼히 챙겨봐야겠습니다.감사합니다!
                        대화보기
                        • egoing
                          동영상 9:50 지점부터 다시 재생해보시면 제가 추가한 도움말을 보실 수 있습니다. white 클래스가 CSS 상에는 없지만 black 클래스가 사라졌기 때문에 기본 디자인이 적용된 것입니다. 좋은 지적을 해주셨구요. 제 예제가 사려깊지 못했네요. 동영상을 다시 인코딩할려고 했지만 처음부터 다시 만드는 것도 부담이고 일부를 수정해보니까 보는 분들이 더 헷갈릴 것 같아서 도움말을 첨부했습니다. 고맙습니다 :)
                          대화보기
                          • 잘 배우고 갑니다. 궁금한게 하나 있어서 댓글 남깁니다.input 부분에서, onclick="document.getElementById('body').className='black' 이 부분의 자바스크립트 해석을 하는 부분에 대하여 이해가 안되는 바람에 여러번 읽어 잘 이해하게 되었는데, 중요한 것은 className='white' 의 부분입니다. 이 부분에서 black클래스의 경우엔 style을 정해주는 css부분에서 body.black등의 부분이 있지만, body.white는 없지 않나요? 그렇다면 white클래스가 어떻게 페이지의 배경을 바꿔줄 수 있는지가 궁금해서 여쭤봅니다.답변 부탁드리겠습니다...!
                          • Rubber
                            URL 뒤에 한글이 있어서 URL을 클릭할 경우 잘못된 페이지로 이동이 되네요. 출처는 http://myubuntu.tistory.com/70... 입니다.
                            대화보기
                            • Rubber
                              URL 뒤에 한글을 적어 URL에 접속할 경우 오류가 나네요. 리플로 다시 출처를 밝히겠습니다. http://myubuntu.tistory.com/70...
                              대화보기
                              • Rubber
                                저도 구글 검색으로 알아낸 정보입니다. 먼저 우분투 '설정'을 열어 주시고 '키보드' 설정에 들어가주세요. 그리고 '바로 가기' 탭을 누루시고 '허드를 표시할 키'를 보시면 Alt로 설정되어 있습니다. 이것을 backspace를 눌러주시면 '사용 안 함'으로 변경이 됩니다. 자세한 정보는 http://myubuntu.tistory.com/70... 참고해주세요.
                                대화보기
                                • 오종면
                                  그렇군요... 감사합니다. 새해 복 많이 받으세요.
                                  대화보기
                                  • Starmomo
                                    [한/영 전환키 - Ctrl+spc] 우분투에서 우측 한/영키를 누르면 대시홈 창이 뜨지요. 한글 입력도 한 타씩 늦게 나옵니다. 한/영 전환키는 Ctrl+space 사용합니다. 잘 되죠? ^^새해 복 많이...
                                    [우분투 왼쪽 Alt 키 "무효화" 설정] 우분투 '설정'을 열어 주시고 '키보드' 클릭, 그리고 '바로 가기' 탭을 누루시고 아래 부분에 '실행 아이콘'를 누른 후, 오른쪽 창 아래 부분에 '허드를 표시할 키'를 보시면 Alt로 설정되어 있습니다. 이것을 클릭한 후, backspace를 눌러주시면 '사용 안 함'으로 변경이 됩니다.
                                    대화보기
                                    • 오종면
                                      오늘도 열심히 배우고 갑니다. 감사합니다.
                                      이어서 질문 하나만요... 제가 노트북을 사용 중인데요... 한/영 전환키만 누르면 대시홈 창이 열려 매번 esc 키를 한번 더 눌러야만 텍스트 입력이 가능합니다. 이거 어떻게 하는 방법도 좀 가르쳐 주십시오. 감사합니다.
                                    • chan
                                      좋은 자료 너무 감사합니다.
                                    • gramicci@nate.com
                                      감사합니다.초보인데 하나하나 알아가는 재미가 있네요^^
                                    • 감사합니다.
                                    버전 관리
                                    egoing@gmail.com
                                    현재 버전
                                    선택 버전
                                    graphittie 자세히 보기