JavaScript 초기초 처리를 외부 파일에 기재한다

4375 단어 초보자자바스크립트es6초보자용

목적


  • JavaScript 처리를 HTML에 설명하는 대신 다른 파일에 설명하는 방법을 요약합니다.

    실시 조건


  • 아래의 순서로 다이얼로그 박스를 표시하는 소스가 손에 있을 것.
  • JavaScript 슈퍼 기초 대화 상자 표시


    • 개요


  • 준비
  • 자바 스크립트의 위치 변경
  • 확인

    • 상세



  • 준비
  • index.html이 설치된 디렉토리로 이동합니다.

  • 아래 명령을 실행하여 JavaScript 파일을 만듭니다.
    $ touch daialog_box.js
  • index.html과 daialog_box.js가 같은 디렉토리에 있는지 확인한다.


  • 자바스크립트의 위치 변경

  • 아래 명령을 실행하여 html 파일을 엽니다.
    $ vi index.html

  • script 요소 안에 기재되어 있는 처리를 삭제해 JavaScript의 파일을 지정한다.

  • 수정 전

    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>

    <script>
        window.alert('ダウンロードを開始します！');
    </script>
</body>
</html>


  • 수정 후

    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>

    <script src="daialog_box.js">
    </script>
</body>
</html>



  • 아래 명령을 실행하여 JavaScript 파일을 엽니다.
    $ vi daialog_box.js

  • 이하의 내용을 기재한다.

    daialog_box.js
    window.alert('ダウンロードを開始します！');



  • 확인

  • 폴더에서 index.html을 찾아 두 번 클릭하여 엽니다.



  • 브라우저가 시작되고 다음과 같은 대화 상자가 표시되는지 확인합니다.



    • JavaScript 슈퍼 기초 대화 상자 표시
    JavaScript 슈퍼 기초 콘솔에 문자 표시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage