JavaScript로 "안녕하세요, 자바스크립트!"를 작성해보기 전에 JavaScript의 문장의 규칙들이 있다.
1. 문장의 규칙
1) 문장의 맨 끝에 세미콜론(;)을 붙인다.
: 생략하는 것도 가능하지만 문장의 단락이 불명확해지므로 생략하지 않는 방식으로 작성하면 좋다.
window.alert('안녕하세요, 자바스크립트!');2) 문장 도중에 공백이나 개행, 탭을 포함하는 것 가능
: 하나의 문장이 긴 경우, 적절한 개행이나 탭이나 공백을 넣어서 표현 가능하다.
window.
alert
('안녕하세요, 자바스크립트!'); // 예시일뿐
3) 대문자/소문자 반드시 구별
: [alert]와 [Alert]는 각각 별개의 명령으로 인식되기 때문에 반드시 구별해야한다.
window.Alert('안녕하세요, 자바스크립트!');4) 복수의 문장을 단일행으로 작성하는 것이 가능하지만 비추천
: 디버거 등에 의한 코드의 추적이 어려워지기 때문에 추천하지 않는다.
window.alert('안녕하세요, 자바스크립트!');window.alert('안녕하세요, 자바스크립트!');2. "안녕하세요, 자바스크립트!"를 작성해보기
(1) 코드 작성
사용할 에디터는 어떤 것이든 상관 없다. 나는 Visual Studio Code를 사용하고 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마스터북</title>
</head>
<body>
<script type="text/javascript">
window.alert('안녕하세요, 자바스크립트!'); // 지정된 문자열을 대화상자에 표시하라는 명령어
</script>
<noscript>JavaScript를 이용할 수 없습니다.</noscript>
</body>
</html>
(2) 브라우저에서 동작 확인
2-1 < script > 요소
JavaScript 코드를 HTML 파일에 집어넣으려면 < script > 요소를 사용하면 된다.
<script type="text/javascript"> // 스크립트의 종류(일반적으로 text/javascript 씀)
JavaScript코드
</script>(1) < body > 요소의 안(임의의 위치)
: 실행 결과를 문서 내에 포함시키고 싶을 때 사용 하지만 콘텐츠와 코드가 혼재하는 것은 웹 페이지의 가독성/보수성의 관점에서 바람직하지 않아 현재는 거의 사용하지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마스터북</title>
</head>
<body>
~~~ 임의의 컨텐츠 ~~~
<script type="text/javascript">
~~~ JavaScript 코드 ~~~~
~~~ 임의의 컨텐츠 ~~~
</script>
</body>
</html>(2) < body > 요소의 안(< /body > 직전)
: 일반적으로 브라우저에서는 스크립트의 로딩이나 실행이 완료될 때까지 화면 갱신을 실시하지 않는다. 거대한 스크립트일 때 화면 갱신이 지연 되는 문제점이 생긴다. 이러한 문제점을 개선 할 수 있는 방법은 말미에 < script >태그를 배치를 한다. 즉, 웹 페이지의 화면 갱신을 끝낸 후 스크립트를 로딩/실행 할 수 있으므로 실제로 보이는 화면 갱신 속도가 개선된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마스터북</title>
</head>
<body>
~~~ 임의의 컨텐츠 ~~~
<script type="text/javascript">
~~~ JavaScript 코드 ~~~~
</script>
</body>
</html>(3) < /head > 요소의 안
: < body >요소 안에서 직접 호출하기 위한 함수를 정의하고 싶을 때 사용
: '함수를 호출하기 위한 < script >요소보다 함수 정의를 위한 < script >요소를 먼저 기술해야 한다'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 마스터북</title>
<script type="text/javascript">
~~~ JavaScript 코드 ~~~~
</script>
</head>
<body>
~~~ 임의의 컨텐츠 ~~~
</body>
</html>2-2 외부 스크립트 임포트 하기
: JavaScript 코드는 별도의 외부 파일로도 정의가 가능하며 크게 두가지 장점이 있다.
1) 레이아웃과 스크립트를 분할함으로써 코드를 재이용하기 쉽다.
2) 스크립트를 외부 파일화함으로써 HTML 파일 자체를 파악하기 쉬워진다.
이러한 장점들로 될 수 있는 한 개발에서는 JavaScript를 외부 파일화 해야한다.
<script type="text/javascript" src="path [charset="encoding "]>
</script>
path : 스크립트 파일의 경로
encoding : 스크립트 파일에서 이용하고 있는 문자 코드❗ 외부 스크립트와 인라인 스크립트를 병용할 때 주의할 점 ❗
<script type="text/javascript" src="lib.js">
window.alert('안녕하세요, 자바스크립트!');
</script>src 속성을 지정한 후 < script > 요소 안의 콘텐츠는 무시되기 때문에 병용할 경우는 아래와 같이 < script > 요소를 분리할 필요가 있다.
<script type="text/javascript" src="lib.js"> </script>
<script type="text/javascript">
window.alert('안녕하세요, 자바스크립트!');
</script>2-3 < noscript > JavaScript 기능이 무효인 환경에서 대체 콘텐츠 표시하게 하기
: < noscript > 태그는 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용한다.
: < noscript > 요소에 포함된 콘텐츠는 사용자의 브라우저가 스크립트의 사용을 비활성화하였거나, 스크립트를 지원하지 않는 경우 화면에 표시될 것입니다.
<noscript>JavaScript를 이용할 수 없습니다.</noscript>
[Google Chrome 설정 버튼] - [개인정보 및 보안] - [자바스크립트] - [모든 사이트에서 자바스크립트를 사용하도록 허용하지 않음]
2-4 JavaScript 의사 프로토콜 < Anchor >
: < script > 요소에 기술하는 것 이외에도 Anchor 태그를 이용해서 스크립트를 집어 넣을 수 있다.
<a href="JavaScript:스크립트 코드"> 링크 텍스트</a><예시> '대화 상자를 표시'
<a href="JavaScript:window.alert('안녕하세요, 자바스크립트!');"> 대화 상자를 표시</a>
