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. 프로페서AW
    완료
  3. 2020 06 27 완료
  4. 혀크크
    20200616, 완료
  5. 준식
    20200606 진행중
  6. yeah_bbeum
    20200602 화 완료
  7. 얼그레이
    20200531 완
  8. 소심이
    20200331 완료
  9. 뿡뿡팡야
    완료
  10. 완료. Atom을 쓰는 중인데 한글 지원 문제 때문에 고민되네요. 일단은 쓰다가 바꿔봐야겠습니다.
  11. 임희철
    서브라임텍스트 라이센스까지 적용했네요! 감사합니다^^
  12. codingㅈㅁ
    ----- BEGIN LICENSE -----
    Member J2TeaM
    Single User License
    EA7E-1011316
    D7DA350E 1B8B0760 972F8B60 F3E64036
    B9B4E234 F356F38F 0AD1E3B7 0E9C5FAD
    FA0A2ABE 25F65BD8 D51458E5 3923CE80
    87428428 79079A01 AA69F319 A1AF29A4
    A684C2DC 0B1583D4 19CBD290 217618CD
    5653E0A0 BACE3948 BB2EE45E 422D2C87
    DD9AF44B 99C49590 D2DBDEE1 75860FD2
    8C8BB2AD B2ECE5A4 EFC08AF2 25A9B864
    ------ END LICENSE ------?
  13. codingㅈㅁ
    여러분 모두에게 도움을 드리고 귀찮니즘을 없애드리겠습니다.
    정식 라이센스을 무료로(원래 이러면 안되긴 하지만) 받을 수 있는 살짝의 양심이 찔리는 방법입니다.
    100%됩니다.
    https://www.youtube.com......3CQ
  14. kevinkim04010@gmail.com
    감사합니다!
  15. 제이
    :D
  16. paulpack
    감사합니다!
    200222
  17. 한강
    감사합니다~^^!
  18. 전서연
    20200205 완료
  19. 박병찬
    20200204 완료
  20. 팬들을위해
    완료
  21. ProgrammerJoon
    2020.01.29 완료 개발자 도구 셋팅 필요.
    좋은 도구를 선택할 것,
    삽 - 배우기 쉬움
    포크레인 - 면허 있어야함, 즉 도구를 익히기 위한 시간 필요,

    즉 좋은 도구도 충분한 시간을 들여 학습해야 그만한 생산성 나온다.
  22. 익진
    완료
  23. 띤띤
    완료
  24. 빠리지앵
    완료
  25. 2020.01.08
  26. 성공을향해
    완료
  27. 이찬준
    완료!
  28. 굼벵이
    완료
  29. 오현주
    2019.12.06 수강
  30. 정동욱
    2019.12.05 완료
  31. 김병건
    완료 !
  32. 사업가
    19-11-21
  33. ByungHo
    19-11-10 완료
  34. galangal
    19.11.09 완료
  35. 마두사랑
    11-11까지
  36. 마두사랑
    11-11까지
  37. 미켈란젤로
    20191107 완료
  38. 한승민
    1107
  39. 홍주호
    20191009 완료
  40. pppiii
    191004 완료
  41. vivianJ
    영상에선 textEdit에서 Plain Text로 선택 후 코드를 넣고 저장하라고 하셨는데,
    글 설명에선 다음과 같이 설명하셨네요???
    "맥 사용자는 textEdit를 사용하면 되는데 파일을 저장 할 때 아래와 같이 Make Rich Text를 선택한다. 그리고 파일을 저장 할 때는 파일명 뒤에 .html 이라는 확장자를 붙인다."
  42. 박창신
    완료
  43. daehan
    자바스크립트 1일차 시작
  44. 하하하
    감사합니다
    대화보기
    • ㅇㅇ
      VSC가 현재 대세인 텍스트에디터입니다.
      웹개발에서는 brackets도 좋았습니다.
      둘 다 무료입니다.

      atom은 비추천합니다. 버그 때문에 VSC로 넘어갔었지요.
    • 7/22완료
    • 고고
      완료
    • 용용
      190708 완료
    • 숩숩이
      19.07.08 완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기