개발환경 세팅과 자바스크립트 근본

• IntelliJ 설치

• IntelliJ 실행

• 프로젝트 생성

새 프로젝트 버튼 클릭

프로젝트 이름과 파일경로 선택 후 생성 버튼 클릭

자신이 앞으로 계속 사용할 폴더를 C드라이브에 만들고 아래에 생성 버튼 클릭

• IntelliJ 플러그인 및 테마 세팅 (시작이 반이다!)

• index.html 파일 생성

파일 이름은 js001.html로 생성

• html 및 script 작성

script 작성 전과 후를 비교하세요요.

document.getElementById('hello').innerHTML = '풀스택 개발자 양성과정에 오신것을 환영합니다!';

document : 해당 html 문서

getByElementById('hello') : 아이디가 hello인 요소 (일명element)

innerHTML : 내부 HTML

= : 등호는 프로그래밍에서 오른쪽에 있는 것을 왼쪽에 대입하라는 뜻

'풀스택'개발자 양성과정에 오신것을 환영합니다!' : 해당 문자열로!

즉 풀어서 설명하면 이 문서에 hello 아이디를 가진 element의 내부HTML을 '풀스택'개발자 양성과정에 오신것을 환영합니다!' 이렇게 바꿔라 라고 컴퓨터에 명령을 내리는 것임.

'hello' 부분을 다른것으로 변경하면 다른 요소도 변경이 가능함

innerHTML 부분을 변경하면 html이 아니라 색상 배경색 폰트 정렬 등등 다양하게 제어가 가능함 (ex. style.color)

즉 JavaScript는 첫 시간에서 말한 것 처럼 '웹페이지에 생동감을 불어넣기 위해' 조금 더 개발자스럽게 얘기하면 html을 동적으로 조작, 제어하기 위해서 만들어진 언어

JavaScript를 사용해서 지난 시간에 봤던 것들을 만들 수 있다.

- 사용자가 입력한 데이터를 검사(회원가입)

- 사용자가 버튼 클릭하면 다음 화면으로 넘어감

- 모달, 탭, 아코디언 등등 다양한 이벤트 생성

✨과제. 색상을 빨간색 배경색을 검은색으로 변경해봅시다.

🎈TIP 줄복사 단축키

IntelliJ : Ctrl + D

VSCode : Alt + Shift + ↓

🎈TIP 단어 이동키는 Ctrl + -> / Ctrl + <-