파일 생성과 불러오기
자바스크립트 또한 폴더를 만들어 파일을 저장하는데
js란 확장자로 저장을 한다.
scripts란 폴더에 main.js라는 파일명으로 저장을 했다고 가정하자.
불러올 때에는 script태그로 파일을 불러온다.<script src="scripts/main.js"></script>
스크립트를 작동시킬 HTML을 만들고
스크립트의 경로는 body태그 안에 제일 밑에 작성하여 불러온다.<!DOCTYPE html> <html lang=ko> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> </head> <body> <h1></h1> <script src="scripts/main.js"></script> </body> </html>
html, css, js는 모두 계단식으로 로드되며 실행되기 때문에,
js는 html,css가 로드된 후인 body의 맨 끝쪽에 작성한다.
main.js파일에 다음과 같이 작성한다.const titleHello = document.querySelector('h1'); //h1요소 선택하여 변수설정 titleHello.textContent = 'Hello World!';
세미콜론(;)은 둘 이상의 명령문이 있을 때 문장을 나누기 위해 붙인다.
하나의 명령문만 있을 때에는 생략가능하다.
var, let, const로 변수를 선언할 수 있다.
변수를 선언한 후 변수명을 붙여주는데,
이때 변수명은 숫자먼저 표기할 수 없으며,
대소문자를 구분하기 때문에 변수 사용에 있어 유의해야한다.
var, let, const의 사용점이 다른데 그 부분은 다음에 살펴보도록 하자.
다시 되돌아가서 위의 스크립트문을 살펴보면
titleHello라는 변수를 선언하였고 문서안에 요소를 찾아주는 querySelector('요소')
메소드를 사용하여 h1을 변수에 담았다.
textContent 속성으로 h1의 텍스트에 'Hello World!'를 담아줬다.이제 비어있었던 h1태그에 Hello World!가 채워지고 나타난다.
민트초코