JavaScript는 대화형 웹 애플리케이션을 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS와 함께 사용하여 사용자 입력에 대한 응답, 페이지 내용의 조작 및 서버와의 통신과 같은 동적 동작을 추가할 수 있습니다. JavaScript는 간단한 애니메이션부터 복잡한 웹 애플리케이션까지 모든 것에 사용될 수 있는 강력한 언어입니다.
1. 인라인(Inline) 자바스크립트 코드
태그 내에 직접 자바스크립트 명령어를 작성하는 방법을 인라인 자바스크립트라고 한다.
이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식으로 onclick이 인라인 자바스크립트 방식이다.
<h1 onclick="javascript:alert('제목 클릭');">
인라인 방식 자바스크립트(태그 내에 js 적용)</h1>해당 h1 태그 클릭 시 알림창에 제목 클릭!이라는 텍스트가 보이게 하는 것
2.내부(Internal) 자바스크립트
HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
<script> 태그 내에 작성, <head> 또는 <body> 영역에 작성이 가능하다.
<body>
<h1>인라인 방식 자바스크립트</h1>
<h1 id="internal">내부 자바스크립트</h1>
<script>
var internal = document.getElementById('internal');
internal.onclick = function(){
alert("제목 클릭");
}
</script>
</body>
3. 외부(External) 자바스크립트
HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식, 자바스크립트 파일(확장자 js)로 작성
HTML 문서에 불러올 때 <script> 태그에 src 속성에 자바스크립트 파일의 경로와 파일명을 써준다.
- <script src="func.js"></script>
간단한 코드 작성이 아닌 서비스 애플리케이션 개발이라면 외부로 파일을 분리하는 형태를 일반적으로 사용한다.
외부 자바스크립트가 파일 코드 재사용, 구조, 표현을 파악하기 좋아서 유지보수가 쉽다는 장점이 있다.
<head>
<script src="external.js"></script>
</head>
<body>
<h1>외부 자바스크립트</h1>
</body>
'프론트엔드' 카테고리의 다른 글
| CSS (0) | 2023.04.06 |
|---|---|
| HTML (0) | 2023.04.05 |
| Django 기본 설정하기 (0) | 2023.04.04 |
댓글