학원에서...정말 살짝 배우고..프로젝트에서 맨땅에 헤딩으로 어렵게 느껴졌던 기술 中 하나.. 아무것도 모르고 베이스가 없는 나ㅡ 찬찬히 해보겠습니다!
자바스크립트란? (간단)
자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어.
자바스크립트로 작성한 프로그램: 스크립트(script)
스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행!
자바스크립트는 HTML 조작을 위해 사용합니다.
즉, "html 조작과 변경" 을 담당하는 언어입니다.
그래서 자바스크립트 코드를 잘 짜면 html을 원하는대로 마구마구 조작이 가능하다고 한다!
마구마구 조작하면,
-
탭, 모달 등 웹페이지 UI 만들 수 있음
-
유저가 입력한 데이터를 검사할 수도 있음
-
유저가 버튼누르면 서버로 데이터 요청할 수도 있음
JS로 HTML를 다루는 방법
- html안에
<script>태그 작성.
💡영어처럼 해석하라!
document.getElementById('hello').innerHTML = '안녕';
- document: 문서. 여기선 html 웹문서.
- getElementById('어쩌구'): id가 '어쩌구'인 html 요소 (일명 element) 를 찾으셈 = 셀렉터(selector)
- innerHTML: 내부 HTML
=> html의 모든 요소들을 바꿀 수 있음
document.getElementById('hello').style.color = 'red'; document.getElementById('hello').style.fontSize = '16pt';
(참고)
.getElementById()는 셀렉터. html 요소를 찾기 위해 사용
.innerHTML / .style / .color 이렇게 점찍는데 괄호없는건 메소드(또는 함수). html 요소의 어떤 속성을 변경할지 결정하기 위해 사용합니다. 무수히 많으니 그때 그때마다 검색해서 사용할 것!
검색 tip : 영어로 검색하기(참고. 가볍게 ..유우머)
프로그래밍 하는 법
프로그래밍은 별거 아니고 컴퓨터에게 일시키는게 프로그래밍이라고 함. 코드를 막 짜서 컴퓨터에게 저거해라 이거해라 시키는 것.
(중요) 컴퓨터와 사람처럼 대화하면 안된다고 함.
사람은 "너 저기가서 저것 좀 바꿔와" 하면 잘 알아들음.
컴퓨터는 "너 저기가서 저것좀 바꿔와" 하면 절대 못알아듣습니다.
"저거가 뭐임?"
사람처럼 유추, 상상을 할 수가 없어서 정말 정확히 설명해줘야 알아듣는다고 함.
"너 저기가서 저것좀 바꿔" 이게 아니라 "너 id가 hello인 html요소 있지 그거 찾아서 안의 내용을 안녕으로 바꿔"
해야지 알아듣는다고 함.
그래서 document부터 시작해서 코드를 길게 상세히 짜는 것이라고 한다~
