자바 스크립트 문법
var x = 10;
var result = x + 5;
자바 스크립트는 대소문자를 구분한다. 변수나 함수 이름, 예약어 등을 작성할 때는 대소문자 구별에 유의해야 한다.
var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.
- 리터럴
리터럴은 직접 표현되는 값 그 자체를 의미한다.
12 // 숫자 리터럴
"JavaScript" // 문자열 리터럴
'안녕하세요' // 문자열 리터럴
true // 불리언 리터럴
- 식별자
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다. 영문자, 숫자, 언더바, $만을 사용한다.
숫자와 하이픈('-')은 사용할 수 없다.
식별자 작성은 카멜 케이스 방식과 스네이크 케이스 방식이 있다. 관행적으로 카멜 케이스 방식을 많이 사용한다.
- 키워드
미리 예약된 단어를 키워드 혹은 예약어라고 한다. 이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없다.
예를 들면, var 나 function는 예약어이므로 식별자로 사용할 수 없다.
- 주석
코드 내에 삽입된 일종의 설명문이다. 주석 문은 나중에 작성자나 다른 개발자가 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에도 도움이 된다. 어느 곳에서도 작성될 수 있고 웹 브라우저가 동작하는데 전혀 영향을 미치지 않는다.
자바와 동일하게 한 줄 주석 문은 // 로 표현하고 두 줄이 넘어가는 주석 문은 /* */ 로 표현한다.
자바 스크립트 출력
1. window.alert() 메서드
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
3. document.write() 메서드
4. console.log() 메서드
- window.alert() 메서드
브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해준다.
<script>
function alertDialogBox() {
alert("알림 ! ");
}
</script>
- HTML DOM 요소를 이용한 innerHTML 프로퍼티
getElementByID()나 getElementsByTagName() 등의 메서드를 사용하여 HTML 요소를 선택한다.
<script>
var str = document.getElementById("text");
str.innerHTML = "change";
</script>
- document.write() 메서드
웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다. 그래서 대부분 테스트나 디버깅을 할 때 사용한다.
<script>
document.write(4 * 5);
</script>
- console.log() 메서드
웹 브라우저의 콘솔을 통해 데이터를 출력해준다.
개발자 모드를 열고 콘솔 버튼을 클릭하면 콘솔 화면을 사용할 수 있는데 디버깅에 도움을 준다.
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>
자바 스크립트 적용
자바 스크립트를 적용하는 방법은 아래와 같이 두 가지 방법이 있다.
1. 내부 자바스크립트 코드로 적용
2. 외부 자바스크립트 파일로 적용
내부에서 코드로 적용하는 방법은 <script> 태그를 활용해서 HTML 문서 안에서 코드를 작성하는 것이다. 이렇게 작성한 코드는 <head> 태그나 <body> 태그 둘 중 어느 곳에 위치해도 상관없다.
외부에서 파일로 적용하는 방법은 HTML 문서 외부에 .js라는 확장자를 가진 파일을 만들고 그 파일에 코드를 작성한다.
그리고 HTML 문서에서 해당 js 파일을 사용할 수 있도록 경로를 적어주면 된다.
2번 방법이 HTML과 자바 스크립트를 분리하기 때문에 가독성과 유지보수 측면에서 유리한 점을 보여준다. 그리고 웹 페이지의 로딩 속도 또한 빠르다는 장점이 있다.
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 제어문과 배열 (0) | 2022.07.25 |
|---|---|
| [JavaScript] 타입 (0) | 2022.06.03 |