자바자바스크립트와 자바 비교
| 자바 | 자바스크립트 |
| 컴파일 언어 | 인터프리터 언어 |
| 타입 검사를 엄격하게 함. | 타입을 명시하지 않음. |
| 클래스(class) 기반의 객체 지향 언어 | 프로토타입(prototype) 기반의 객체 지향 언어 |
자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일
1. 자바스크립트는 HTML의 '내용'을 변경할수 있습니다
2. 자바스크립트는 HTML의 '속성'을 변경할수 있습니다.
3. 자바스크립트는 HTML의 '스타일'을 변경할수 있습니다.
식별자(identifier)
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다.
자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있습니다.
자바스크립트에서 식별자는 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없습니다.
자바스크립트는 유니코드(unicode) 문자셋을 사용합니다.
1. 자바스크립트 문법
자바스크립트의 실행문은 세미콜론(;)으로 구분됩니다.
2. 리터럴(literal)
리터럴은 직접 표현되는 값 그 자체를 의미합니다.
12 // 숫자 리터럴
"JavaScript" // 문자열 리터럴
'안녕하세요' // 문자열 리터럴
true // 불리언 리터럴
3. 식별자 작성 방식
자바스크립트에서는 식별자를 작성할 때 다음과 같은 작성 방식을 사용할 수 있습니다.
1. Camel Case 방식
2. Underscore Case 방식
Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식입니다.
Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식입니다.
자바스크립트에서는 식별자를 작성할 때 관행적으로 Camel Case 방식을 많이 사용합니다.
var firstVar = 10; // Camel Case 방식
function my_first_func { // Underscore Case 방식
var firstLocalVar = 20; // Camel Case 방식
}4. 키워드(keyword)
자바스크립트에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있습니다.
이렇게 미리 예약된 단어들을 키워드(keyword) 또는 예약어(reserved word)라고 합니다.
이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없습니다.
ex) var, function
5. 주석(comment)
1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */1. 자바스크립트 출력
자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.
1. window.alert() 메소드
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
3. document.write() 메소드
4. console.log() 메소드0
1. window.alert() 메소드 방법 - 가장 간단한 방법
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>
2. 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>
4. console.log() 메소드
console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.
대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있습니다.
이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 줍니다.
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>자바스크립트를 적용하는 방법
HTML 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있습니다.
1. 내부 자바스크립트 코드로 적용
2. 외부 자바스크립트 파일로 적용
내부 자바스크립트 코드
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있고,
HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있습니다.
자바스크립트 코드를 <head>태그에 삽입하나 <body>태그에 삽입하나 동작상의 차이는 없다.
외부 자바스크립트 파일
자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있습니다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장합니다.
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 됩니다.
외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있습니다.
이렇게 하면 HTML 코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워집니다.
또한, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라집니다.
'Program > java script' 카테고리의 다른 글
| 자바스크립트 06. 문자열 (0) | 2020.12.15 |
|---|---|
| 자바스크립트 03. Java script 조건문 (기초, 문제 정리) (0) | 2020.12.14 |
| 구글링 하는법 , 크롬 개발자 도구 사용법 (0) | 2020.12.09 |
| 자바스크립트 02. JS - 변수, 타입,조건, 반복, 제어 ,함수 (0) | 2020.12.09 |
| js 변수, 문제풀이 (0) | 2019.07.30 |
