Inline JavaScript 인라인 자바스크립트
태그 내에 직접 자바스크립트 명령어를 작성하는 방법을 인라인 자바스크립트라고 한다.
이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식으로 onclick이 인라인 자바스크립트 방식이다.
허나 HTML 문서와 분리하는 것을 권장하기 때문에 onclick을 사용하는 inline JavaScript 방식은 자주 사용하지 않는다.
ㅇ 해당 h1 태그 클릭 시 알림창에 ok!가 텍스트가 보이게 하는 것
<h1 onclick="alert('ok!')">인라인 방식 자바스크립트</h1>
<h1>내부 자바스크립트</h1>
Internal JavaScript 내부 자바스크립트
HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
<script> 태그 내에 작성, <head> 또는 <body> 영역에 작성이 가능하다.
<body>
<h1>인라인 방식 자바스크립트</h1>
<h1 id="internal">내부 자바스크립트</h1>
<script>
var internal = document.getElementById('internal');
internal.onclick = function(){
alert("ok!");
}
</script>
</body>
External JavaScript 외부 자바스크립트
HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식, 자바스크립트 파일(확장자 js)로 작성
HTML 문서에 불러올 때 <script> 태그에 src 속성에 자바스크립트 파일의 경로와 파일명을 써준다.
- <script src="func.js"></script>
간단한 코드 작성이 아닌 서비스 애플리케이션 개발이라면 외부로 파일을 분리하는 형태를 일반적으로 사용한다.
외부 자바스크립트가 파일 코드 재사용, 구조, 표현을 파악하기 좋아서 유지보수가 쉽다는 장점이 있다.
<head>
<script src="external.js"></script>
</head>
<body>
<h1>외부 자바스크립트</h1>
</body>
반응형
'Java Script > Java Script' 카테고리의 다른 글
| JS 예제 : 접근 기기(데스크탑 / 모바일)에 따른 배경 변경 (0) | 2019.05.11 |
|---|---|
| JS 예제 : 시간에 따라 이미지 변경( 낮과 밤) (0) | 2019.05.11 |
| JavaScript 타이머 설정 , setTimer (0) | 2019.05.11 |
| JavaScript 이벤트 ㅣ window.onload (0) | 2019.05.11 |
| JavaScript 함수 만드는 방법 (0) | 2019.05.11 |
댓글