자바스크립트 기초는 HTML, CSS의 선행 지식이 필요합니다. 자바스크립트의 출력 중 간단한 방법은 document.write() 또는 window.alert() 명령어를 사용할 수 있습니다.
자바스크립트 기초 학습 조건
자바스크립트 기초 학습에는 HTML과 CSS 기본 지식이 필요합니다. 왜냐하면 자바스크립트는 HTML 태그나 CSS 선택자에 동적 효과를 주는 것이 목적이기 때문입니다.
자바스크립트 삽입 위치
자바스크립트 코드는 HTML 문서안에서 <script>~</script> 태그 사이에 위치합니다.
<script> 태그는 <head>~</head> 사이 또는 <body>~</body> 사이에 삽입되는 것이 원칙입니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>세상에서 제일 아름다운 거품은?</h1>
<script>
document.write("언블리버블");
</script>
</body>
</html>예시에서는 document.write("언블리버블"); 부분이 자바스크립트 코드입니다. <script>~</script> 는 HTML 태그이고, 해당 영역이 자바스크립트라는 것을 알려주는 기능을 합니다.
자바스크립트 기초 문장 예제
데이터 출력
document.write( ) 는 괄호안의 데이터를 웹 브라우저에 출력합니다. 문자 데이터는 따옴표 " " 를 삽입해야 합니다. 숫자 데이터는 문자 처럼 취급하려면 따옴표를 삽입하고, 숫자 처럼 계산을 하려면 따옴표없이 삽입하면 됩니다.
document.write("자가용의 반대말은 커용");메모장이나 atom 편집기 등에서 파일 확장자를 .html로 저장합니다. 아래 코드를 작성하고 웹브라우저(크롬, 익스플로러, 파이어폭스 등)로 실행해보면 아래 예시와 같은 데이터가 화면에 출력됩니다.
<script>
document.write("자가용의 반대말은 커용");
</script>경고창 출력
window.alert( ) 는 괄호안의 데이터를 경고창으로 표시합니다.
window.alert("세상에서 가장 아름다운 풀은 뷰티풀입니다.");자바스크립트 문장 작성 규칙
세미콜론
자바스크립트는 대부분의 프로그래밍 언어처럼 명령문이 끝나면 세미콜론 ; 으로 문장을 종료합니다.
document.write("세상에서 가장 지루한 중학교는 로딩중입니다.");자바스크립트의 경우 세미콜론을 생략하는 것이 가능합니다. 하지만 여러 가지 경우의 수를 잘 따져봐야 하기 때문에 처음에는 다른 프로그래밍 언어들처럼 세미콜론을 계속 작성하는 것이 좋습니다.
대소문자
자바스크립트는 각종 함수명, 변수명 등의 대소문자 구분을 해야합니다. HTML의 경우 태그가 대소문자를 구분하지 않습니다.
대소문자 정상
두 가지 자바스크립트 명령문은 소문자로 작성되어 정상적으로 출력됩니다.
<script>
document.write("응답하라");
document.write("1988");
</script>대소문자 오류
하지만 document.write( )의 앞 글자를 대문자 D로 변경하면 작동되지 않습니다.
<script>
document.write("응답하라");
Document.write("1988"); //명령어의 대문자 영역은 출력되지않습니다.
</script>HTML 태그 대소문자 정상
HTML 태그의 경우 대소문자 구분을 하지 않습니다. <p> 소문자와 <P> 대문자는 모두 같은 역할을 합니다.
<p>슈퍼맨의 어린 시절을 슈퍼주니어라 부릅니다.</p>
<H1>세상에서 가장 낭비가 심한 동물은 사자입니다.</h1>
<pre>너무 뜨거워 만질 수 없는 전화기는 화상전화입니다.</PRE><H1> 또는 <h1> 및 <pre>와 </PRE>도 모두 동일한 문법입니다.