[Javascript] Day1

[작성일: 2023. 02. 18]

자바스크립트(Javascript)

퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장됨.
컴파일 과정 없이 브라우저 내부의 자바스크립트 처리(interpreter)
- 개발의 발전을 통해 컴파일이 가능해졌으며 Node.js로 서버 환경을 구축함.
웹 페이지는 3개의 큰 요소로 구성(html, css, javascript)
자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용됨.

[index.html]             [웹브라우저]
<script>
자바스크립트 코드 → 인터프리터 → 결과 출력
</script>

사용자의 입력 및 계산
- HTML의 폼은 입력 창만 제공함.
- Key, Mouse의 입력 및 계산은 자바스크립트만 가능함.
웹 페이지 내용 및 모양의 동적 제어
- HTML 태그의 속성이나 컨텐츠, CSS의 속성 값을 변경하여 웹 페이지의 동적인 변화를 일으키는데 활용함.
브라우저 제어
- 브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기
- 다른 웹 사이트 접속, 브라우저의 히스토리 제어 등 부라우저 작동 제어
웹 서버와의 통신(Ajax)
- 에이잭스라고 불림.
- 웹 페이지가 웹 서버와 데이터를 주고 받을 때 사용함.
웹 애플리케이션 작성(API)
- 자바스크립트로 활용할 수 있는 많은 API가 제공되므로 다양한 웹 애플리케이션의 개발이 가능함.

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치, 무설치 버전 선택
한글 설정
- Extension - Korean 검색 → Korean(사용법) Language pack for visual studio code 설치
언어 선택
- F1 → Configure Display Language → en, ko 선택 → 프로그램 재시작
테마 변경
- F1 → 테마, theme
기본 단축키
- Ctrl + B : 전체화면
- Alt + 방향키 : 한 줄 이동
- Alt + Shift + 방향키 : 한 줄 복사
- Ctrl + X : 빈 커서에서 사용하면 한 줄 전체 잘라내기
- Ctrl + Alt + 방향키 : 그리드 편집 모드(열 편집) > esc 누르면 취소
- Shift + Del : 한 줄 전체 삭제
HTML 기본 단축키
- div + tab : <div></div>
- div.table + tab : < div class="table"></div>
- div#container + tab : <div id="container"></div>
- div * 4 + tab : <div></div> 4개 생성
- div.wrap * 3 + tab : <div class="wrap"></div> 3개 생성

탐색기에서 HTML을 찾아서 실행
Extension에서 open in browser 설치 → Alt + B로 실행
Extension에서 live server 설치
- 오픈 폴더로 소스 코드 폴더 열기
- 소스코드 저장 시 바로 화면에 반영됨.
- Alt + L + O

HTML 태그 내 이벤트 리스너(Event Listener) 속성에 작성하기
- HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등 이벤트 발생 시 처리하는 코드 등록 리스너 속성이 있고, 여기에 코드를 작성함.
<script></script> 내에 작성하기
- <head></head>, <body></body>, body 밖 어디든 작성해도 괜찮음.
- html 안에만 있으면 가능함.
- 보통은 body 밑에 작성하며 웹 페이지의 여러 곳에 작성할 수도 있음.
자바스크립트 파일에 작성하기
- 자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장
  - 코드가 너무 길 때
  - 코드의 재활용 가능성이 있을 때
URL 부분에 작성하기
1. <a> 태그는 href 속성이 있으며 여기에 자바스크립트 작성 가능
2. href에서 자바스크립트 코드를 사용하려면 javascript라는 키워드를 작성해야 함.

자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있음.
document.write() 또는 document.writeln()
- writeln은 줄바꿈(\n) 문자가 삽입되지만 HTML이 줄바꿈 문자를 인식하지 않으므로 <pre> 태그를 사용하여 줄바꿈 표현이 가능함.

🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.