오리엔테이션
JavaScript란? Java와 JavaScript의 차이는 햄과 햄스터의 차이
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.
이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.
JavaScript의 프로그래밍 툴은 어떤 것이 있을까?
- 텍스트(txt)파일로 작성한 뒤 확장자를 html로 변경해 웹 브라우저로 실행 시켜도 상관이 없다.
- Chrome 기준 F12를 누른뒤 “Console” 탭에 들어가 JavaScript를 Python처럼 코드를 작성과 동시에 실행 할 수 있다.
- 본 강의에서 사용되는 도구인 Sublime Text를 사용하여 코딩 할 수 있다.
그 외에도 Vim, Atom, VS code, Brackets등등.. 어마어마한 종류의 에디터들이 있습니다.
JavaScript의 실행과 실습
Sublime Text 홈페이지[링크]에 들어가 Sublime Text 3를 다운받아 설치한다.
현재 상태에서도 JavaScript를 작성할 수 있지만
편한 작업 환경을 위해 몇가지 더 작업 해보자.
먼저 JavaScript를 작성할 새 파일을 생성한다.
그러면 Untitled 라는 문서가 생긴다.
다음으로는 적당한 위치에 적당한 이름으로 파일을 저장한다.
다만, 반드시 .html 파일로 저장 되어야한다!
JavaScript를 작성할 준비가 완료 되었다.
자동완성 기능
위 이미지 처럼 “html”을 입력한 뒤 Tab을 눌르게 되면,
이 처럼 html의 가장 기본적으로 입력해야 하는 것들이 자동으로 입력된다.
실습
예전 XSS 강의 중에서 ” <script> alert(1) </script> “로 XSS의 존재 여부를 판단한 적이 있다.
이번 실습에서 사용할 함수가 바로 ” alert” 함수이다.
위 html과 마찬가지로 script를 입력한 후 Tab을 누르면 자동으로
” <script type=”text/javascript”></script> “
입력 되는데 ” <script ~ > </script> ” 사이에 사용할 함수를 입력하면 된다.
위와 같이 입력했다면, 아까 파일을 저장한 위치로 가서
방금 작성한 html파일을 실행 시켜보자.
브라우저가 실행되고 위와 같은 경고창이 나온다면 잘 작동 한다는 것이다.
Console를 이용한 JavaScript작성
브라우저 상에서 콘솔 창을 실행 하게 된다면 위와 같이 표시된다.
아까와 같이 Hello Wordl!를 띄워보자.
콘솔 창에 alert(‘Hello World!’)를 치고 엔터를 누르게 되면
따로 파일을 실해하는 과정 없이 바로 창이 뜨는 것을 볼 수 있다.
이 처럼 간단한 JavaScript코드는 콘솔창을 이용하고, 복잡한 코드는 파일로 직접 코딩할 수 있다.
다음 글에서는…
숫자와 문자의 표현과 수의 연산, 그
리고 문자에 대한 명령어 + α 에 대해서 알아보도록 하겠다.
생활 코딩에서 제공해 주는 무료 인강을 보고 공부했습니다.