seunghyun Note
3장(자바스크립트 본문
3.1 자바스크립트 실행 환경
- 모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
✓ 브라우저 : html,css,js를 실행해 웹페이지를 브라우저 화면에 렌더링
✓ Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공
3.2 웹 브라우저
3.2.1 개발자 도구
- 크롬, 사파리가 1,2등 나는 brave 사용하지롱
- 개발자 도구 단축키 (이제는 알고 있다)
3.2.2 콘솔
3.2.3 브라우저에서 자바스크립트 실행
- 에러가 콘솔에 나옴!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Counter</title> </head> <body> <div id="counter">0</div> <button id="increase">+</button> <button id="decrease">-</button> <script> // 에러를 발생시키는 코드: 선택자는 'counter-x'가 아니라 'counter'를 지정해야 한다. const $counter = document.getElementById('counter-x'); const $increase = document.getElementById('increase'); const $decrease = document.getElementById('decrease'); let num = 0; const render = function () { $counter.innerHTML = num; }; $increase.onclick = function () { num++; console.log('increase 버튼 클릭', num); render(); }; $decrease.onclick = function () { num--; console.log('decrease 버튼 클릭', num); render(); }; </script> </body> </html>
3.2.4 디버깅
- 디버깅 모드
3.3 Node.js
- 이제 Node.js 야..? (라이언 달?님께서 발표해주셨음) -> 자바스크립트 실행 환경
- 설치! 했다!
- 확인
$node -v
$ npm -v
$ node- 파일 실행
node index.js
3.4 비쥬얼 스튜디오 코드
- 설치 뚜두두두두두 했다!
- 코드도 쳐보고~
// myapp/index.js
const arr = [1, 2, 3];
arr.forEach(console.log);
//1,2,3- 확장 플로그인들도 설치해보자! extensions 맘에드는거 다 설치!
728x90
'스터디 > 모던자바스크립트 deep dive' 카테고리의 다른 글
| 6장 (데이터 타입) (1) | 2024.01.07 |
|---|---|
| 5장 (표현식과 문) (0) | 2024.01.07 |
| 4장 (변수) (0) | 2024.01.07 |
| 2장 (자바스크립트란?) (0) | 2024.01.07 |
| 1장 (프로그래밍) (0) | 2024.01.07 |
'스터디/모던자바스크립트 deep dive' Related Articles
more
