과제를 하다가 정리하는 JS 문법 😉
1. HTML에 JS 추가하는 방법
1.1. 인라인 스크립트
<button onclick="alert('Hello, World!')">Click me</button>: <button> 태그의 Attribute 속성으로 JS 코드를 주입/작성 -> 버틀을 클릭하면 JS 코드가 실행된다
- 이 방식은 HTML과 CSS가 섞여있어 가독성이 좋지 않고, 유지보수가 어렵다는 단점이 존재
1.2. 내부 스크립트
<body>
<button onclick="greeting(event)">Click me</button>
</body>
<script type="text/javascript">
function greeting(event) {
alert('Hello, World!');
}
</script>: HTML 파일 내부의 <style> 태그 내 Contents 내용에 직접 JS 코드를 주입/작성
- 외부 파일로 분리하지 않아 다른 HTML 파일에서 재사용 할 수 없다.
1.3. 외부 스크립트
<body>
<button onclick="greeting(event)">Click me</button>
</body>
<script type="text/javascript" src="./greeting-script.js"></script>: HTML 파일 내부의 <script> 태스의 Attribute 속성으로 JS 코드를 임포트한다.(참조)
- 한 파일 내에서 여러 일을 하지 않는 장점과, 재사용성도 다른 방법들 보다 높기 때문에 권장하는 방법
function greeting(event) {
alert('Hello, World!');
}- 파일명 : greeting-script.js
1.4 외부 스크립트 + 모듈 시스템을 활용
<body>
<button onclick="hello(event)">Click me</button>
</body>
<script type="module">
import { greeting } from "./script.js";
window.hello = greeting;
</script>: HTML 파일 내부의 <script> 태그 내 Contents 내용에 JS 코드를 임포트(참조)
- window 글로벌 변수 등록하여야 import 한 greeting 함수를 사용할 수 있다.
export function greeting(event) {
alert('Hello, World!');
}- 파일명 : greeting-script.js
2. HTML에 CSS 추가하는 방법
2.1. 인라인 스크립트
<button style="background-color: white">Click me</button>: <button> 태그의 Attribute 속성으로 JS 코드를 주입/작성 -> 버틀을 클릭하면 JS 코드가 실행된다
- 이 방식은 HTML과 CSS가 섞여있어 가독성이 좋지 않고, 유지보수가 어렵다는 단점이 존재
2.2. 내부 스크립트
<body>
<button class="example-button">Click me</button>
</body>
<style>
.example-button {
background-color: white;
}
</style>: HTML 파일 내부의 <style> 태그 내 Contents 내용에 직접 CSS 코드를 주입/작성
- 외부 파일로 분리하지 않아 다른 HTML 파일에서 재사용 할 수 없다.
2.3 외부 스크립트
<head>
<link rel="stylesheet" text="text/css" href="./styles.css" />
</head>
<body>
<button class="example-button">Click me</button>
</body>: HTML 파일 내부의 태그의 Attribute 속성으로 CSS 코드를 임포트(참조)
- 한 파일 내에서 여러 일을 하지 않는 장점과, 재사용성도 다른 방법들보다 높기 때문에 권장된다.
.example-button {
background-color: white;
}- 파일명 : styles.css
[ASAC 6기 강의자료를 참고하였습니다.]
내가 보려고 정리하는 블로그📝