데브코스에서 스터디로 타입스크립트 학습을 하기로 했다!
하지만, 자바스크립트도 모르는 상황이라 2주 동안 기본 문법을 학습하기로 했다.
내가 하기 나름이겠지만, 끝까지 잘 마무리할 수 있기를...
자바 스크립트를 학습하기 위해 기본적으로 이 문서를 이용했다.
자바스크립트
: 웹 페이지에 생동감을 넣기 위해 만들어진 프로그래밍 언어
- 스크립트(script)
- 자바스크립트로 작성한 프로그램
- html 파일 내부에 작성 가능
- 웹 페이지를 불러올 때 스크립트 자동 실행
<script></script>
: 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>전</p>
<script>
alert("hello world!");
</script>
<p>후</p>
</body>
</html>
결과
- html 파일 실행 시 바로 alert 메세지
- 닫기를 누르면 화면 표시
모던 마크업
- <script> 태그에 여러 속성 존재
- type, language는 이제 사용하지 않음
- 과거 javascript 외의 언어도 많이 사용했지만, html5 부터는 javascript가 디폴트
- 문서에는 안 쓰인다고 적혀있지만, 어느 블로그에서 하위 호환성을 위해 type = "text/javascript"를 사용하는게 좋다는 글을 봄
- 의미: 브라우저가 javascript를 인식하도록 명시, text를 통해 스크립트 구현
- type, language는 이제 사용하지 않음
외부 스크립트
: 별도의 파일에 스크립트 작성
- <script src="js 파일 경로"></script>
- 위와 같이 src 속성을 갖는 script 태그 안에 코드를 작성해도 내부에 작성한 코드는 실행되지 않는다.
- 장점
- 브라우자는 스크립트를 다운 받아 캐시에 저장 -> 스크립트가 겹칠 경우 캐시에서 가져와 사용
- 트래픽 감소, 속도 증가
<script> 태그의 위치
- <head> 안 (옵션 없음)
- 딱히 좋은 방법은 아님
- js 파일이 무거울 경우 시간 지연
- <body></body>: 내부의 가장 끝, 즉 </body>의 바로 앞
- 가장 많이 사용
- 사용자가 빠르게 볼 수 있음(속도 빠름)
- html이 js에 의존적인 경우 느릴 수 있음
과제
1. "자바스크립트!"라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어 보세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
alert("자바스크립트!");
</script>
</body>
</html>
2.
1번 과제의 스크립트를 alert.js라는 외부 파일로 옮겨 보세요.
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script src="./alert.js"></script>
</body>
</html>
- js
alert("자바스크립트!");
'javascript' 카테고리의 다른 글
| 기본 6. alert, prompt, confirm을 이용한 상호작용 (0) | 2024.08.30 |
|---|---|
| 기본 5. 자료형 (0) | 2024.08.30 |
| 기본 4. 변수와 상수 (0) | 2024.08.30 |
| 기본 3. 엄격 모드 (strict mode) (0) | 2024.08.28 |
| 기본 2. 코드 구조 (0) | 2024.08.28 |