1. JavaScript의 기초
1.1. 자바스크립트란?
- HTML, CSS를 프로그래밍적으로 제어
- 데이터를 처리
- 데이터 저장 : 다양한 형태의 값을 저장하고 사용
- 연산을 통해 값을 계산하여 처리
- 사용자와 상호작용
- 이벤트 감지: 사용자의 동작을 감지
- 브라우저에서 제공하는 기능을 이용
- 화면 조작
- HTML과 CSS를 조작하여 결과값을 화면에 반영
- 다른 컴퓨터와 통신
- AJAX, Fetch
- 필요한 부분만 통신하여 사용자 경험을 향상
2. JavaScript 실행
- 개발자도구:
F12또는Ctrl + Shift + i/Cmd + Opt + i또는우클릭 → 검사(Inspect)
코드 작성하기
- HTML내에 javascript를 포함하고 로드.
-
HTML 태그 내 삽입
<button onclick="window.alert('hello world');">Click me!</button> -
script 태그를 통해 삽입
<!DOCTYPE html> <html lang="ko"> <head> </head> <body> <!-- script 태그는 body 하단에 위치합니다 --> <script> console.log('hello world!'); </script> </body> </html>
-
- 외부 파일로 저장을 하고 파일 로드.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
**<script src="./script.js"></script>**
</body>
</html>
꾸준한 열정으로 나아가는 프론트엔드 개발자