for Web Browser - Html에서 로드하는 작성방식

8773 단어 JavaScriptJavaScript

Html에서 JavaScript 로드하기

Inline 방식

  • 태그 내에 직접 자바스크립트 명령어를 작성하는 방법
  • html 코드와 javascript 코드가 같이 있기 때문에 분명하게 드러난다.
  • html 코드와 javascript 코드가 같이 있기때문에 유지보수가 어렵고 코드가 짬뽕이 된다.
<!DOCTYPE html>
<html>
<body>
  <input type="button" onclick="alert('hi')" value='hi'/> 
</body>
</html>

<!-- onclick은 html의 속성의 문법이다. alert는 웹 브라우저의 속성이다.  -->

Internal 방식

  • HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
  • html 코드와 javascript 코드가 분리되어 있어 필요한 부분만 수정하면 된다.
<!DOCTYPE html>
<html>
<body>
  <input type="button" onclick="alert('hi')" value='hi' id='btn'/> 
  <script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      alert('hi')
    })
  </script>
</body>
</html>

External 방식

  • HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식, 자바스크립트 파일(확장자 js)로 작성
  • HTML 문서에 불러올 때 script 태그에 src 속성에 자바스크립트 파일의 경로와 파일명을 써준다.
<!-- html 파일 !-->
<!DOCTYPE html>
<html>
<body>
  <input type="button" onclick="alert('hi')" value='hi' id='btn'/> 
  <script src=./script.js></script> <!-- script.js 파일을 불러온다. !-->
</body>
</html>
// script.js
  <script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      alert('hi')
    })
  </script>
계속 헷갈려서 정리하는 시리즈 3탄] retchQueries
jpa 공부 - 1일차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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