JavaScript

실행방법과 실습환경

수업목적

이번 수업에서는 언어의 실행방법과 실습환경에 대해서 알아본다.

설치

자바스크립트는 브라우저에서 동작하는 언어다. 따라서 웹브라우저가 설치되어 있다면 이미 자바스크립트를 사용할 준비가 끝난 것이다. 참고로 각 브라우저마다 개발자 도구라는 것이 있다. 이 도구를 이용하면 자바스크립트 개발을 쉽게 할 수 있다. 아래의 수업을 참고한다.

실행

자바스크립트는 원래 웹브라우저에서 HTML, CSS를 동적으로 제어하기 위해서 만들어진 언어다. 하지만 오늘날 자바스크립트가 웹브라우저를 벗어나서 매우 다양한 용도로 사용되고 있다. 이런 이유로 자바스크립트의 실행환경은 다양하다. 필자는 자바스크립트의 원래 목적이었고, 가장 보편적인 실행환경인 웹브라우저에서 실습을 진행할 것이다. 하지만 본 수업의 내용은 웹브라우저 뿐 아니라 node.js, 구글 크롭 웹브라우저 플러그인, 구글 스크립트, PDF, 각종 데스크탑 위젯에서 사용되는 자바스크립트에서도 적용될 수 있는 내용이다.

a. 웹페이지에서 자바스크립트 작성

브라우저에서 Hello world를 찍어보자. Hello World는 프로그래머들이 처음 어떤 언어나 프로그램을 구동했을 때 화면에 출력시켜보는 내용이다. 시작이 반이라고 했던가? Hello World!를 출력했다면 이미 반이다.

우선 필자는 helloworld.html 파일을 만들었다. 파일의 내용은 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<script>
			alert('Hello world');
		</script>
	</body>
</html>

HTML 파일을 만들고 거기서 자바스크립트를 실행하는데는 특별하게 필요한 것이 없다. 윈도우는 메모장, 맥은 텍스트에디트를 이용해서 파일을 만들면 된다. 하지만 좀 더 편리하게 실습을 하려면 Sublime Text와 같은 에디터의 도입을 고려하자. http://opentutorials.org/course/671/3595

윈도우에서 메모장을 이용한다면 아래에 강조 표시된 부분처럼 설정을 지정하고 저장해야 한다.

맥 사용자는 textEdit를 사용하면 되는데 파일을 저장 할 때 아래와 같이 Make Rich Text를 선택한다. 그리고 파일을 저장 할 때는 파일명 뒤에 .html 이라는 확장자를 붙인다.

 위 코드의 실행 결과는 아래와 같다.

JavaScript를 실습하기 위해서는 생각 보다 많은 작업이 필요하다. 일단 HTML 위에서 동작하기 때문에 HTML에 대한 이해가 조금 필요하다. 특히 프론트 엔드 웹개발을 위해서 JavaScript를 학습한다면 HTML은 꼭 선행해야 할 지식이다. HTML에 대해서 좀 더 많은 정보를 얻고 싶다면 생활코딩의 HTML 수업을 참고하자. 만약 node.js와 같은 기술을 위해서 자바스크립트를 배우려고 한다면 HTML은 전혀 몰라도 된다. 하지만 위의 예제는 실습을 진행하기 위한 기초적인 사항이기 때문에 조금 설명을 하겠다.

위의 코드는 HTML 문서다. 그리고 지금 맥락에서 주목해야 할 부분은 다음 부분이다.

<script>
    alert('hello world');
</script>

코드 <script>는 웹브라우저에게 지금부터는 자바스크립트 코드이기 때문에 이 코드를 해석 할 때는 자바스크립트의 문법에 따라서 해석해서 실행하라고 알려주는 구문(태그)다. alert('Hello world')는 경고창에 Hello world라는 문구를 출력하라는 일종의 명령이다. </script>는 자바스크립트 구간이 끝났기 때문에 이 후부터 나타나는 코드는 HTML의 문법으로 해석하라고 브라우저에게 알려주는 것이다.

실습용 예제에서는 위의 코드를 모두 기술하지 않을 것이다. <script>와 </script> 태그 안쪽에 위치하는 코드만을 언급할 것이기 때문에 실습을 실행할 때는 완전한 html 코드를 만들어서 사용하도록 하자.

b. 크롬 개발자 도구 사용

크롬을 사용한다면 다음과 같은 방법으로 자바스크립트를 간단하게 실행해 볼 수 있다.

1. Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.

2. alert('hello world')를 실행한다. 실행 결과 아래와 같이 경고창이 실행된다.

 

댓글

댓글 본문
작성자
비밀번호
  1. 김진홍
    감사합니다~
  2. 단이
    -
  3. 박인호
    12-05
    수강완료.
  4. 프론트개발자가 되자
    열씨미 들을꼐요...
  5. 고스트프리
    완료했습니다.
  6. 이병학
    애고 공부는 왜 하면 잠이 올까요. ㅋㅋㅋㅋ
    수고하셨습니다.
  7. GoldPenguin
    완료했습니다.
  8. 수복
    잘 보았습니다. 저는 webstorm 도구를 써서 해보려고 합니다. 좋은 말씀 감사합니다.
  9. 송성태
    JavaScript 시작했습니다.
    빨리 보고 실습은 천천히, 확실하게!
  10. 이성준
    잘봐습니다.
  11. 오빠는다르다
    감사합니다
  12. imurmother
    에디터는 꼭 sublime 쓸 필요는 없는거겠죠?
    저는 사실 아톰이 더 편해서 아톰을 쓰고 싶은데
    수업을 들을 때는 sublime으로 하니까 좀 수업듣는 것에 좀 방해가 되지 않을까하는 생각이 들거든요..
    그래도 자신이 편한 에디터 쓰는게 맞는거겠죠?ㅎㅎ
    그럼 앞으로도 열심히 배우고 열심히 공부하겠습니다.
    감사합니다 ㅋ
  13. 오늘시작
    10/3 감사합니다
  14. 이재윤
    감사합니다
  15. 감사합니다d
  16. ㅁㄴㄹ
  17. Kim Sheldon
    정말 초보자에겐 .. 너무 감사해요~
  18. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  19. Byeong Heon Lee
    감사합니다~
  20. 오재호
    파일을 저장할 때, "모든 파일, ex1.html"로 저장하고, 저장된 위치에 가서 그 파일을 우클릭하여, 연결프로그램을 크롬이나 파이어폭스로 선택하면, 정상 작동됩니다.
    대화보기
    • 호기심천국
      케니님, 글 잘 읽었습니다. 저는 코딩 왕초보자로서, 아직 '내가 무엇을 모르는지를 알아가는 단계'에 있는 입장이기때문에, 저의 질문이 다른 분들께 어떤 혼동의 소지가 있는지를 가늠을 못합니다. 케니님께서 답글을 정말 잘 달아주셨습니다. 제 질문이 다른 초보자 분들께 혼동이 되지 않었으면 좋겠고, 케니님의 조언덕분에 나한테 맞는 툴을 찾는것도 중요하다는 사실 깨달았습니다. 감사합니다.
    • 케니
      혹시나 다른 입문하시는 분들이 오해하실까봐 안내 드립니다.

      호기심천국님께서 말씀하신대로 Atom 역시 Sublime Text와 같은 텍스트에디터가 맞으며, 수강시 사용하셔도 단축키 같은게 조금 다를 수 있을뿐 기본적인 기능이 없다거나 하는 문제는 전혀 없을 것입니다.

      다만 강의가 2013도에 나온건 사실이지만 Sublime Text와 Atom을 '무엇이 더 최신툴이냐'로 비교하는것은 의미가 없어 보입니다. Sublime Text가 Atom보다 일찍 등장한 것은 맞지만 현재에도 최신 트렌드에 맞추어 계속 진화중이며, 아직까지도 텍스트에디터 중에서 가장 많은 사용자와 기능을 보유한 툴입니다.
      Atom은 GitHub에서 텍스트에디터로 HTML,CSS, 그리고 이 수업의 주제인 Javascript로 만들어져있습니다. 이 때문에 사용가가 에디터를 커스토마이징 할 수 있는 범위가 무궁무진하다는 차별화된 장점이 있지요.

      개발자에게 있어서 툴을 고르는 것은 굉장히 중요한 문제이지만, '최신'이 아닌, 툴이 가진 '기술과 기능'에 초점을 맞추어 본인께 맞는 툴을 고르는 기준으로 삼아 주셨으면 하는 바램에 적어보았습니다. 즐거운 코딩 되세요~!
      대화보기
      • 호기심천국
        세번째 동영상에서 에디터를 sublime text를 소개해주셔서 찾아서 들어보니 2013년도 강의더군요.
        제가 html, css 수업을 들었을때, atom 과 braket을 소개해주셔서 그것을 다운받아서 잘쓰고있는데 atom 을 사용해도 상관은 없는것이겠죠?
        atom 도 상당히 편리한 도구더라구요. 이것이 sublime text 보다더 더 최신툴인것 같기도 하고 그래서 굳이 새로 깔고 배우고 적응할 필요가 없는것 같아
        확인해보고 계속 진행하려고 여쭈어보는 것입니다. 고수분들 의견 부탁드립니다. 감사합니다.
      • 이지현
        우왕 이제야 듣고 있는데,... 진작에 게을리 하지 말고 들을걸... ㅜㅜ 수업 너무 좋아요!!
      • harukayuki
        강의 감사합니다 저는 노트패드++을 사용하고 있는데 그걸로 수업들어도 어렵진 않을가 해서요 손에 익어서 새로운거 쓰기가 어렵더라구요
      • 은하수
        잘들었습니다~ 감사합니다^^
      • 2017-07-20
        정성스러운 강의, 감사합니다!
      • namimoon
        console.log("hello"); 처음 알았네요
      • 홈페이지를 만들다가 자바스크립트에 갈증을 느꼈는데 정말 감사합니다 :) 열심히 할 거예요.
      • Seo Yun Seok Tudoistube
        전 아톰을 쓸래요ㅋㅋㅋ 감사합니다^_____^!!!
      • sssjunn
        감사합니다.
      • 써니
        감사합니다.
      • 망고
        2017.04.26 PM 5:37 수강
      • 서기
        감사합니다.^^
      • 01097898337
        2017.4.17 새벽 12:05분 완료~
      • 장석규
        2017.04.13 완료~
      • 김진엽
        2017.04.12 수강완ㄹ ㅎ
      • 무중력고양이
        2017/04/11 수강완료~~
      • 최규선
        2017/03/30 수강완료~~
      • 박용훈
        2017/03/27 완료
      • SangHyeok Kim
        2017/03/24 수강완료
      • 임성민
        수강완료~
      • 김세창
        수강완료~!
      • 백화사전~~
      • 강의를 들어야하는데 선생님목소리가 너무좋아요!
      • simplenamu
        감사합니다^^
      • goodcine
        정말정말 감사합니다!
      • uwangg
        16.12.15 끝!
      • good
        감사합니다!
      • 유상빈
        16.11.10 01:20분 끝!
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기