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. good
    감사합니다!
  2. 유상빈
    16.11.10 01:20분 끝!
  3. 이현정
    감사합니다
  4. alicia
    도구에 대한 잔소리 너무 좋았습니다:)
    정말로 좋은 도구를 찾는 것에 게을리하지 않도록할게요 ~
  5. alicia
    잘안되시는분들은 </html> 하고 뒷자리에 있는 공백들을 없애주세요 ~
    저도 그렇게 해서 성공했습니다~ :)
  6. 완료!
    감사합니다. 완료!
  7. 위에 코드는 html에서 바로 실행하는 모습이고,
    밑에 코드는 html과 자바스크립트 파일을 분리한 후 불러오는 코드입니다.
    즉, 따로 분리된 jacascript > text라는 경로폴더에 있는 js파일을 따로 실행시키는 모습인.
    대화보기
    • 그것이 알고싶다.
      <script>
      alert('Hello world');
      </script>

      이거하고

      <script type="javascript/text">

      </script>

      차이가 뭐죠?
    • 지나가던 공고생
      <html>
      <head> <title> 연습쟁이요</title>
      <script languge="javascript" >

      function str(){
      document.write("이름: "+this.name+"<p>")
      document.write("나이: "+this.age+"<p>")
      }

      function s(name,age){
      this.name=name
      this.age=age
      this.str=str
      }
      </script>

      </head>


      <body>
      생성자 함수 예제<p>
      <script languge="javascript">
      document.write("sum의 인스턴스"+"<p>")
      sum=new s("김민우",20)
      sum.str()
      </script>
      </body>
      </html>

      생성자 함수 예제 글자만 나오네요..........

      왜 안되는걸까요? ㅜㅜ... 툴은 노트패트++ 로 쓰고 있습니다.
    • 가가멜똥
      일단 save as로해서 html로 확장자한다음에 탭키누르면 자동완성되요!
      대화보기
      • LimeTree
        sublime text3을 설치했는데 탭을 눌러도 설명해 주신 것처럼 템플릿이 자동으로 생성이 되지 않습니다. 뭐가 잘못된 것일까요?
      • 꽃마리
        이렇게 좋은 강의를 그냥 보다니요....
        학원 강사님보다 훨 좋습니다. 혹시 대학 교수님????
        정말 지식과 경험이 풍부하지 않고선 이렇게 꼼꼼하고 쉽게 설명하시진 못하실텐데....
        열심히 배우겠습니다.
        감사합니다.
      • 김소현
        목소리 정말 좋아요.
        귀에 쏙쏙~ 감사합니다!
      • 동찜
        감사합니다
      • Rhys Jung
        기대의 만감이 교차됩니다.
        컴퓨터를 사용할줄만 알았지 (웹) 직접 만들어보겠다는
        막연함이 몇개의 토픽을 정주행 (웹어플만들기/ HTML/ CSS) 하고
        또 다시 Javascript 라는 언어를 접하며 이제 웹을 만들어볼수 있는 토대가
        쌓이겠구나 라는 기대가 부풀어 오르네요
        다시한번 이렇게 좋은 강의 만들어주셔서 감사하다는 말씀 드립니다.
      • kimhomework
        잘봤습니다~!
      • 지니212
        잘 봤습니다!!
      • 쌈닭
        해당 브라우저 닫고 다시 열어서 접속하시면 되요~~~
        대화보기
        • JustStudy
          고맙습니다
        • 고맙습니다
        • 부지런한곰탱이
          그리고 목소리 좋습니다 :))
        • 부지런한곰탱이
          경고창뜨는거 설정하는거에 다신 안보겠습니다. 이런 체크박스를 눌러서, 다음부터안뜨는데, 이거 어떻게 해결하나요??
        • Jang Taekwan
          감사합니다.
        • 고맙습니다.
        • Byeong Koo Kang
          정주행중! 저는 윈도우에서는 서브라임 우분투에서는 아톰 쓰는데 확실히 기능은 아톰이 많고.. 좋은거 같긴해요! 근데 서브라임은 뭔가 가벼운 느낌이 좋아서 ㅎㅎ...
        • 화랑
          감사합니다..^^
        • Sungho Steven Cho
          감사합니다.
        • 이고잉님짱
          목소리 넘나 좋은ㄱ ㅓㅅ ㅠㅠ
        • 박찬울
          현재 수업이 올라온 년도는 2013년인데, ATOM 텍스트 편집기는 2014년 2월 26일에 발표되었네요.
          만약 ATOM 텍스트 편집기가 수업을 만들 당시에 있었다면 sublime text 대신 ATOM 텍스트 편집기를 사용하셨을까요? 아직 여러 편집기를 사용해보지 않은 사용자의 입장에서 질문드려봅니다. 잘 아시는 분이시라면 다양한 텍스트 편집기의 종류와 장단점 등을 설명해주시면 참 감사하겠습니다. ^^
        • ghfkdtkwk123@naver.com
          제가처음이여서도전했는데크롬으로실행시켜보니무한로딩되네요...해결책좀주세요
        • ghfkdtkwk123@naver.com
          이고잉님
        • WaterD
          국내에는 goorm ide, 국외에는 cloud9 등 많은 cloud ide가 존재합니다. 물론 무료 서비스도 제공합니다.
          알아보시면 좋을듯하네요
          대화보기
          • 라고 뜨네요
          • 사업장 정책에 따라 붙여넣기를 허용하지 않습니다.
          • gudwns
            이고잉님 코딩프로그램중에서 다른사람이랑 멀리서 동시에 코딩할수있는 프로그램이 있나요?
          • Piyone
            1.5배속!
          • AgainTRY
            HTML CSS를 이어 열심히 해보겠습니다!^^
          • 배우는 중
            1.5배속 강추합니다.
          • Simon Lee
            중요하지 않은 사족이긴 한데,
            "1. Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다."

            에서 "커멘트+Alt+J (OSX) " 부분은

            Command + Option + J (Mac) 정도의 표기가 좋지 않을가요? :-)
          • 박재현
            이고잉님 자료 정말 감사합니다! 그런데 개발자도구중 제가 brackets도구를 쓰고있는데 이거는 좋은 개발도구가 맞는지요?
          • Miamo
            목소리 완존 좋음
          • 85554
            굳굳굳
          • emusictown
            잘 들었습니다.
          • 김대익
            감사합니다
            Html Css에 이어서 열심히 해보겠습니다
          • 박보순
            잘보고 있습니다.
          • 이라기
            차분한 목소리로 잘 설명해주셔서 감사합니다!!
          • 지영
            감사히 잘 봤습니다. ^-^
          • 강구임돠
            감사합니다.
          • kmax95@naver.com
            Console.log를 이용해서
            콘솔창에 hello world가 나와서
            그런것 아닐까요?
            대화보기
            • 감사합니다요
              감사합니다 선생님........ㅠㅠㅠㅠㅠㅠ너무 잘 보고 이쪄용
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기