어쩌다보니 자바스크립트를 공부하게 되었다. 나중에 써먹을 일이 있겠지! 사실 웹사이트 한 번 제대로 만들어본적이 없어서 이번 졸프때 써보려고 공부를 시작했다. 파이팅
자바스크립트는 어디에 작성하는 것일까
- HTML 파일 내에 입력
반드시<script> ~ </script>사이에 코드를 입력해야 자바스크립트 코드로 인식된다.
HTML 파일의 태그 안이나 태그 밖이라도 어떤 위치에 입력해도 상관없다.
다만, 해당 방법을 사용하면 동일한 자바스크립트를 적용하고 싶은 페이지가 여러 개 있을 때 모든 HTML 파일에 같은 코드를 입력해야 한다. - 자바스크립트 파일을 만들어서 코드 작성
같은 코드를 여러 페이지에 이용하고 싶을 때 사용하는 방법이다.
확장자가.js인 파일을 만들고 그 안에 코드를 작성한다.
자바스크립트 파일 내에서는<script>태그가 필요 없으며, HTML 파일에서 이를 사용할 때<script>태그를 이용하고 불러올 파일을src속성으로 지정한다.
수정이 필요한 경우 자바스크립트 파일 하나만 수정하면 되므로 간편하다.
HTML 파일에 자바스크립트 코드를 작성해보자.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<title>HTML 안에 자바스크립트 작성하기</title>
</head>
<body>
<script> window.alert('자바스크립트를 공부해보자!');</script>
</body>
</html>
index.html 파일을 더블클릭하여 브라우저에서 확인해보면 경고창으로 해당 스트링이 뜬다.
HTML 파일과 독립적인 js 코드를 만들어보자.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<title>HTML 안에 자바스크립트 작성하기</title>
</head>
<body>
<script src = "first.js"></script>
</body>
</html>window.alert('자바스크립트를 공부해보자!');
이제 브라우저를 열어보면 첫번째와 같은 결과가 나온다.
first.js에서 window를 생략해도 무방하다.
자바스크립트 기본 문법
1. 객체
객체는 동작하게끔 하려는 대상을 의미한다. window는 사용자가 보고 있는 브라우저 창을 의미하며 경고창은 화면 전체에 표시되므로 window를 대상으로 지정한 것이다. window 외에도 history, document 등 여러 종류가 있다. 객체 중에서 window는 특별히 생략가능한 특징이 있다.
2. 매서드
동작, 명령을 의미한다. alert는 빌트인 객체로 처음부터 브라우저에서 제공하는 프로그램 중 일부이다. 이 외에도 다양한 내장 객체가 존재한다.
3. 파라미터
매서드를 보충하기 위한 정보를 파라미터로 입력한다. 문자열을 사용할 때 텍스트 부분을 작은따옴표나 큰따옴표로 감싸준다. 어느 것이든 상관없다.
4. 세미콜론
기본적으로 세미콜론을 붙이지만 생략해도 동작하는 경우가 많다. 다만, 그렇지 않은 경우를 구별하기 어렵기 때문에 기본적으로 붙여주는 것이 좋다.
콘솔 사용하기
개발자 도구에서 콘솔을 통해 자바스크립트 코드를 직접 입력할 수 있다.
console.log('hihi');를 입력하면 바로 밑에 hihi 가 출력됨을 확인할 수 있다. 이때 log()는 출력해달라는 print와 동일하게 작동한다.
console.log를 개발자 도구의 콘솔이 아니라 html 파일에 입력해도 동일하게 작동한다.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<title>콘솔에 출력하기</title>
</head>
<body>
<script>console.log('hihi');</script>
</body>
</html>이렇게 파일을 작성하고 index.html 파일을 통해 브라우저에 들어가 F12를 눌러 콘솔 창을 확인해보자.
위와 같이 찍혀있음을 확인할 수 있다.
콘솔을 사용하면 오류가 어디서 발생했는지 쉽게 확인을 할 수 있고 왜 발생했는지도 오류 메시지를 통해 확인할 수 있다. 또한 프로그램 작성 도중이라도 해당 시점에서 데이터를 출력할 수 있다.