*본 블로그에서는 웹 용 JS를 말함. 일반 JS는 바닐라 JS라고 부르기도 하며, 웹에서와 다른 부분이 존재
1. JS란?
- 객체 지향
- 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
2. HTML에 적용
1. 외부 스크립트 적용
- html 문서 내에 <script>를 사용
- src = "js 파일의 경로"
- <head>나 <body>안 어디나 선언 가능
1) <head>에 작성하면 window.onload = function(){여기 작성} 해야 함.
=> 화면 다 불러온 후에 실행하도록
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title입니다.</title>
<script src="./js/test.js"></script>
</head>//js파일
window.onload = function(){
console.log("test");
}
2) <body>의 끝부분에 작성하는 것을 권장
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title입니다.</title>
</head>
<body>
<div class="block b1">Block1</div>
<script src="./js/test.js"></script>
</body>
</html>//js파일
document.querySelector(".b1").textContent = "바뀜";
2. 내부 스크립트 적용
- html내에 <script></script> 사이에 js 작성
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title입니다.</title>
<script>
//여기 js 코드 작성
</script>
</head>
'Programming > JS' 카테고리의 다른 글
| [JavaScript] 4-1. 화살표 함수 (0) | 2022.05.04 |
|---|---|
| [JavaScript] 5. Window 객체 (0) | 2022.03.20 |
| [JavaScript] 4. JS의 함수 (0) | 2022.03.20 |
| [JavaScript] 3. JS의 객체(Object) (0) | 2022.03.14 |
| [JavaScript] 2. JS 기본 문법 (0) | 2022.03.13 |