본문 바로가기

Javascript/javascirpt

Javascript 정의와 외부로 연결하기

반응형

자바스크립트는 웹페이지의 동작을 담당합니다. 예를 들어 자바스크립트를 이용하면 ‘우측 하단에 보이는 화살표를 누르면 맨위로 가기'라는 식의 명령을 내릴 수 있습니다.

 

자바스크립트 선언문

선언문은 자바스크립트 코드를 작성할 영역을 선언하는것이라고 이해하면 됩니다. <script>라는 태그로 선언문이 시작된 곳부터 </script>라는 태그로 종료된 곳까지 스크립트 영역이라고 부릅니다.

ex)

<script>
 자바스크립트 코드;
</script>

선언문은 <head>태그 영역 또는 <body> 태그 영역에 선언하면 됩니다. 우리나라 개발자의 대대분은 <head> 태그 영역에 선언하고 있습니다.

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-cale=1.0">
    <title>Document</title>
    <script>
        document.write("환영합니다"); /*document는 문서 객체이며 문서 출력메서드인 write()를 이용하여 데이터를 문서에
                                                  출력
할 때 사용*/
    </script>
</head>
<body>
</body>
</html>

자바스크립트 주석은 //내용, /*내용*/ 두가지가 있는데 "//한 줄 설명글", "/* 여러 줄 설명글 */"로 작성하면 됩니다.

 

출력화면

자바스크립트를 사용할 때에는 CSS와 마찬가지로 외부로 분리해서 사용하는게 효과적입니다.

 

내부스크립트 외부로 분리하는 방법

<script src="JS 파일 경로"></script>

적용법

먼저 index.html 파일에서 코드 <script src="JS 파일 경로"></script> 를 <head>라인에 추가합니다.

같은 폴더일 경우 index.js 만 쳐도 연결이 가능하지만 다른폴더일 경우 폴더경로와 파일명을 함께 적어주셔야 합니다.

예를 들면 C:\Users\PC\Desktop\티스토리\index.js  라는 형식으로 해주면 됩니다.

왼쪽에 파일 생성을 한뒤 index.js 파일을 만들어 코드를 입력해줍니다. 

외부로 script 파일을 연결해줬을때는 <script></script>를 따로 연결할 필요가 없습니다.

 

코드 입력시 주의 사항

코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋습니다. 세미콜론을 쓰지 않으면 다음 예제처럼 한줄에 2개의 코드를 작성할 경우 오류가 발생합니다.

ex)

document.write("hi") document.write("bye")    ( X )
document.write("hi"); document.write("bye")    ( O )

하지만 코드를 작성할 때는 한줄에 한문장만 작성하는 것이 가독성을 위해 좋습니다.

 

문자형 데이터를 작성할 때는 큰따옴표(" ")와 작은따옴표(' ')의 겹침 오류를 주의해야 합니다.

ex)

document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다."라고 나와 있다.");    ( X )
document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다."라고 나와 있다.');     ( O )
document.write("책에 \"자바스크립트는 대소문자를 구분해야 합니다.\"라고 나와 있다.");   ( O )

 

반응형

'Javascript > javascirpt' 카테고리의 다른 글

배열  (0) 2020.07.25
반복문  (0) 2020.07.20
조건문(if문, else if 문)  (0) 2020.06.18
연산자  (0) 2020.06.17
변수  (0) 2020.06.13
Javascript 정의와 외부로 연결하기  (0) 2020.05.23