JavaScript 기초
- JavaScript는 객체(object) 기반의 스크립트 언어
- HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현
- JavaScript는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용
JavaScript 특징
1. JavaScript는 객체 기반의 스크립트 언어
2. JavaScript는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
3. JavaScript는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
Java와 JavaScript 특징
| Java | JavaScript |
| 컴파일 언어 | 인터프리티 언어 |
| 타입 검사를 엄격하게 함. | 타입을 명시하지 않음. |
| 클래스(class) 기반의 객체 지향 언어 | 프로토타입(prototype) 기반의 객체 지향 언어 |
JavaScript는 HTML의
1. JavaScript는 HTML의 '내용'을 변경할수 있다.
2. JavaScript는 HTML의 '속성'을 변경할수 있다.
3. JavaScript는 HTML의 '스타일'을 변경할수 있다.
JavaScript 문법
JavaScript의 실행문은 세미콜론으로 구분
var x = 8;
var result = x + 4;JavaScript는 대소문자를 구분하며, JavaScript에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분하여야한다!
var javascript = 5; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식
var JavaScript = 10;
Var Script = 15; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음
Literal
리터럴은 직접 표현되는 값 그 자체를 의미한다.
12 // 숫자 리터럴
"JavaScript" // 문자열 리터럴
'안녕하세요' // 문자열 리터럴
true // 불리언 리터럴
identifier
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미
JavaScript 에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있다.
식별자 작성 방식
1. Camel Case 방식
2. Underscore Case 방식
var firstVar = 5; // Camel Case 방식
function my_first_func { // Underscore Case 방식
var firstLocalVar = 10; // Camel Case 방식
}
Keyword
JavaScript에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있다.
이렇게 미리 예약된 단어들을 키워드(keyword) 또는 예약어(reserved word)라고 한다.
var firstVar = 5; // var는 변수의 정의를 위해 예약된 키워드입니다.
function myFirstFunc { // function은 함수의 정의를 위해 예약된 키워드입니다.
var secondVar = 10; // var는 변수의 정의를 위해 예약된 키워드입니다.
}JavaScript 출력
여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있다.
1. window.alert() 메소드
→ window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법
우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택 그리고 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있다.
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>
3. document.write() 메소드
document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력
따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용
<script>
document.write(4 * 5);
</script>하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력
document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용
<button onclick="document.write(4 * 5)">버튼을 눌러보세요!</button>
4. console.log() 메소드
웹 브라우저의 콘솔을 통해 데이터를 출력
대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있다.
이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 준다.
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>JavaScript 적용
HTML 문서에 자바스크립트 코드를 적용하는 방법에는 두가지 방법이 있다.
1. 내부 JavaScript 코드로 적용
JavaScript 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있습니다.
<script>
document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>이렇게 삽입된 자바스크립트 코드는 HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있다.
HTML 문서의 <head>태그에 자바스크립트 코드를 삽입한 예제
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head>HTML 문서의 <body>태그에 자바스크립트 코드를 삽입한 예제
<body>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</body>JavaScript 코드를 <head>태그에 삽입하나 <body>태그에 삽입하나 동작상의 차이는 없다.
2. 외부 JavaScript 파일로 적용
외부에 작성된 JavaScript 파일은 .js 확장자를 사용하여 저장합니다.
해당 JavaScript 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 JavaScript 파일을 포함하면 된다.
/* 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>외부 JavaScript 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 JavaScript 코드를 분리할 수 있다.
이렇게 하면 HTML 코드와 JavaScript 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워진다.
또한, 외부 JavaScript 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라진다.
'Programming > JavaScript' 카테고리의 다른 글
| JavaScript ② (0) | 2022.01.04 |
|---|