1. 자바스크립트 정의
-
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어로 HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
HTML과 CSS는 정적인 페이지만 구현할 수 있다면 JS는 정적인 페이지를 동적인 페이지로 구현할 수 있다. -
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
2. 자바스크립트 특징
-
자바스크립트는 객체 기반의 스크립트 언어이다.
-
자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
-
자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
3. 자바스크립트 문법
- 자바스크립트의 실행문은 세미콜론(;)으로 구분된다.
var x = 10;
var result = x + 3;- 자바스크립트는 대소문자를 구분한다.
자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 한다.
var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.- 주석
코드 내에 삽입된 일종의 설명문으로 코드에 영향을 주지 않는다.
1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */4. 자바스크립트 출력
- 자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있다.
(1) window.alert()
- window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 준다.
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>(2) HTML DOM 요소를 이용한 innerHTML 프로퍼티
- 실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법이다.
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>(3) document.write()
- 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다.
<script>
document.write(4 * 5);
</script>- 하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됩니다.
따라서 확인을 잘 하고 사용해야 한다.
(4) console.log()
- 웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>5. 자바스크립트 적용
- HTML 문서에 자바스크립트 코드를 적용하는 방법
(1) 내부 자바스크립트 코드
- 자바스크립트 코드는 < script >태그를 사용하여 HTML 문서 안에 삽입할 수 있다.
<body>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</body>(2) 외부 자바스크립트 파일
- 자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다.
JS파일
function printDate() {
document.getElementById("date").innerHTML = Date();
}html 파일
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script> // js파일을 호출함
</head>※ 참고 자료 : http://www.tcpschool.com/javascript/js_intro_syntax
Web Developer