그동안 백준 문제를 자바로 풀면서
내가 왜 자바로 풀고 있지? 난 프론트로 갈건데!? 라는 생각이 들었습니다.
프론트 쪽으로 가자고 마음을 먹었지만 백엔드의 미련을 버리지 못했던 것 같습니다.
그건 나중 문제고 일단 지금 당장에는 프론트 공부가 급하다는 생각에 JS를 조금 급하게 공부 해볼까 합니다.
일단은 인강이나 책보다는 코드를 이해하면서 공부하는게 효과가 가장 빠를 것 같아서
여기서 공부할 계획입니다. (지금 당장은?)
그럼 지금 당장 시작할게요!!
script 태그
script 태그를 이용하면 자바스크립트 프로그램을 HTML 문서에 삽입할 수 있습니다.
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>외부 스크립트
만약 JS 코드가 너무 길어졌을땐?
HTML파일에 다음과 같은 코드를 추가한 뒤 JS파일을 새로 만들어 작성합니다.
<script src="파일 경로"></script>CSS와 같은 원리죠?
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…복수의 스크립트 삽입도 가능합니다!
무언가 수정하고 싶은 부분이 생겼을때 해당 코드를 잘 찾기 위해서
코드를 잘 분류하는 것도 중요할 것 같습니다. (그냥 제 생각)
과제
- alert 창 띄우기
"자바스크립트!"라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어 보세요.
Sandbox나 본인의 로컬환경 등 원하는 환경에서 제대로 동작하는지만 확인하시면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script>
alert("자바스크립트!");
</script>
</body>
</html>
- 외부 스크립트를 이용해 alert 창 띄우기
이전 과제 alert 창 띄우기의 해답에 있는 스크립트를 alert.js라는 외부 파일로 옮겨보세요.
해당 파일을 문서와 동일한 경로로 옮긴 후, 스크립트가 기존처럼 alert 창을 잘 띄워주는지 확인해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script src="alert.js"></script>
</body>
</html>alert.js 파일 내부를 살펴볼까요?
alert("자바스크립트!");처음에 왜 오류가 나는지 왜 이럴까 찾아봤는데 js 파일엔 script태그가 들어가면 안된다구!!!!!!!!
<script>
alert("자바스크립트!");
</script>원래는 이렇게 적었습니다.
