☑️Console
JavaScript를 다루는 방법: 브라우저의 console 이용하기
html과 css는 'Elements'창에서 볼 수 있고, JavaScript는 'Console'창에서 볼 수 있다.
<Elements 창>
<Console 창>
☑️JavaScript를 작성하는 방법
JavaScript를 작성하는 방법은 두가지가 있는데, 첫번째는 console 창에 직접 입력하는 것이고, 두번째는 VS Code에서 '.js' 형식의 파일을 만들어 파일 내에서 코드를 작성하는 것이다.
1. console 창에 직접 입력하기
브라우저에서 inspect(검사) -> console 창에서 JavaScript 코드를 쳐서 경고 알림 띄웠다.
alert('hi')
하지만 콘솔 창에서는 코드를 한 줄 이상 작성하기 어렵기 때문에 VS Code 상에서 작성하는 것이 좋다.
2. VS Code에서 작성하기
⌨️ Window
1) [C:] -> [사용자] -> [Default] -> [Documents] 안에
2) MOMENTUM이라는 이름의 폴더를 생성
3) VSCode에서 [파일]->[폴더열기]->(미리 생성해놓은) [MOMENTUM] 폴더 열기 하면 된다.
🖥️ MacOS
1) "command + space bar"를 눌러 spotlight를 켠다.
2) "터미널"을 검색하고 실행한다.
3) "cd Documents" 라고 쓰고 엔터를 누른다.
4) "mkdir 디렉토리명" 명령어로 momentum 폴더를 만든다.
5) "code momentum" 명령어로 vscode에서 momentum 폴더를 열 수 있다.
🚩만약 해당 경로에 새 파일 생성시 오류 메세지가 뜬다면
mdkir momentum
zsh: command not found: mdkir이런 경우에는 터미널 창에서 zsh에서 bash로 바꿔야한다.
1) 터미널 창에서 'chsh -s /bin/bash/'를 입력한다.
2) 바뀐걸 확인하고 싶으면 'echo $SHELL'을 입력한다. -> /bin/bash
☑️html는 css, 자바스크립트와 브라우저 사이의 접착제다.
브라우저는 html 파일(index.html)을 열고, html 파일이 css와 자바스크립트 파일을 가져온다.
브라우저는 css나 자바스크립트 파일을 직접 읽지 않는다.
<app.js>
alert('hi')<index.html>
📌 일반적으로 자바스크립트는 body의 맨 끝에서 가져온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html><style.css>
브라우저
