1.Javascript 시작
Javascript 공부를 시작하려 한다...
좀 늦은 감이 있지만 알아야 편하고 좋을거 같아서 빠르게 공부하려 한다.
javascript는 HTML과 CSS와 함께 client side 즉 웹 프론트엔드에서 웹 프로그램을 작성할때 사용하는 언어이다.
만들어진 소스 코드는 웹 브라우저에서 바로 실행이 가능하다.
html 파일 내부에
를 통해 .js 파일을 적용 시킬 수 있다.
Developer Console (개발자 도구)
브라우저 우측 상단메뉴를 찾아보면 개발자 도구라고 있다. 또는 F12 버튼을 누르면 바로 나온다.
탭 중 Console 탭을 사용해 확인 가능하다.
Console 탭을 이용하면 직접 명령어를 입력해 실행하고 결과를 바로 확인이 가능하다.
내가 사용한 환경은 Visual Studio Code 와 크롬 브라우저이다.
VS Code를 사용해 소스코드를 작성하여 파일을 만들고 파일을 크롬 브라우저에 드래그 앤 드롭 하면 바로 실행이 된다.
다음은 간단한 명령어 두가지이다.
alert() 명령어
alert 명령어는 사용하면 괄호 안의 메세지를 브라우저 경고창을 통해 보여주는 명령어이다.
1 | alert("경고 메세지"); |
1 | console.log("콘솔 메세지"); | cs |
다음은 실습한 내용이다.
index.html
1 2 3 4 5 6 7 8 9 | <html> <head> <meta charset="utf-8"> <script src="lecture01.js"></script> </head> <body> This is a basic HTML page </body> </html> | cs |
lecture01.js
1 | alert("Hello Javascript"); |
위의 내용과 같이 html 파일에서 lecture01.js 파일을 참조하고 있다.
이렇게 만들어진 html 파일을 크롬 웹 브라우저에서 실행하였다.
alert 명령어를 통해 경고창이 먼저 출력 되었다.
그 후 웹 페이지에는 html 파일과 같이 문자열이 출력되어 있는 것을 볼 수 있다.
다음은 console.log() 명령어를 확인해 볼 차례다.
index.html
1 2 3 4 5 6 7 8 9 | <html> <head> <meta charset="utf-8"> <script src="lecture02.js"></script> </head> <body> This is a basic HTML page </body> </html> | cs |
1 2 3 | console.log("Hello developer console"); console.log("second line"); console.log("third line"); | cs |
이전과 다르지 않다면 파일을 저장해 주었는지 확인해 볼 필요가 있다.
다음 사진을 보면 콘솔 탭 자체에서 코드를 작성하고 실행하는 것이 가능한 것을 볼 수 있다.
끝.
'Computer Science > Javascript' 카테고리의 다른 글
| Javascript -6- String (0) | 2020.01.23 |
|---|---|
| Javascript -5- 연산자, 함수 (0) | 2020.01.23 |
| Javascript -4- Object (0) | 2020.01.18 |
| Javascript -3- number, string, boolean (0) | 2020.01.18 |
| Javascript -2- 변수, 자료형 (0) | 2020.01.18 |