반응형
자바스크립트 기본 구문
- 자바스크립트의 실행문은 세미콜론(;)으로 구분된다.
- 자바스크립트는 대소문자를 구분한다.
var x = 10;
var result = x + 3;
var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 변수로 인식
var JavaScript = 20;
Var Script = 30; // 변수 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음
리터럴(literal)과 식별자
- 리터럴은 직접 표현되는 값 그 자체를 의미하고, 식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다.
- 자바스크립트 식별자로 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있지만, 숫자로는 시작할 수 없다.
- 단어들을 특별한 용도로 사용하기 위해 미리 예약된 단어를 키워드(keyword) 또는 예약어(reserved word)라고 하는데, 이런 예약어들은 식별자로 사용할 수 없다. 하이픈(-)도 뺄셈을 위해 예약된 키워드로 식별자로 사용할 수 없다.
12 // 숫자 리터럴
"JavaScript" // 문자열 리터럴
true // 불리언 리터럴
function myFirstFunc { // function은 함수의 정의를 위해 예약된 키워드로 식별자로 사용 불가
var secondVar = 20; // var는 변수의 정의를 위해 예약된 키워드로 식별자로 사용 불가
}
주석(comment)
- 자바스크립트에서는 여러 줄 주석 내부에 다른 한 줄 주석을 삽입할 수 있지만, 여러 줄 주석은 절대로 중첩해서 사용할 수는 없다.
1. 한 줄 주석: // 주석문
2. 여러 줄 주석: /* 주석문 */
3. 여러 줄 주석 안에 또 다른 주석 삽입
/* 여러 줄
// 이렇게 두 줄 주석 안에 또 다른 한 줄 주석을 삽입할 수 있습니다.
주석입니다. */// var y = 20; 한 줄의 주석문 : 이 부분은 실행되지 않을 것입니다.
/*
x = x + y;
여러 줄의 주석문 :
이 부분 또한 실행되지 않을 것입니다.
*/
자바스크립트 출력 방법들
HTML DOM 요소를 이용한 innerHTML 속성
- document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택하고, innerHTML 속성을 이용하면 선택된 HTML 요소의 내용이나 속성값 등을 손쉽게 변경할 수 있다.
<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>
<p id="text">이 문장을 바꿀 것입니다!</p>
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>window.alert() 메소드
- window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해준다.
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>document.write() 메소드
- document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력하므로 대부분 테스트나 디버깅을 위해 사용된다.
- 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드를 실행하면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하므로 주의가 필요하다.
<script>
document.write(4 * 5); // 20으로 출력
</script>console.log() 메소드
- console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력해 주는데, 주요 웹 브라우저에서 F12를 누른 후 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있다.
<script>
console.log(4 * 5);
</script>
자바스크립트 적용 방법
내부 자바스크립트 코드
- 자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있으며, HTML 문서의 <head>나 <body>태그 또는 양쪽 모두에 위치할 수 있다.
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head>외부 자바스크립트 파일
- .js 확장자를 사용한 자바스크립트 파일을 외부에 생성하여, 해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 된다.
- 외부 자바스크립트 파일을 사용하면 웹의 내용인 HTML 코드로부터 웹의 동작인 자바스크립트 코드를 분리할 수 있기에, 가독성과 유지 보수가 좋아지며 또한 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도도 빨라진다.
/* example.js */
function printDate() {
document.getElementById("date").innerHTML = Date();
}<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script>
</head>
Reference
반응형
'Language > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 조건문 - if, switch (0) | 2023.06.20 |
|---|---|
| [Javascript] 자바스크립트 연산자 - 대입, 증감, 논리 (0) | 2023.06.20 |
| [Javascript] 자바스크립트 타입 - 데이터형, 타입 변환 (0) | 2023.06.20 |
| [Javascript] 자바스크립트 변수 - 초기화, 유효범위 (0) | 2023.06.20 |
| [Javascript] 자바스크립트 개요 - 특징 및 역사, 자바와의 차이 (0) | 2023.06.20 |