html, CSS, JS의 역할
Visual studio code에서 app.js/ style css/ index.html 생성
js, css는 브라우저에 끌고와는 것을 실행 되는게 아니고, 그냥 코드를 열어보는 것
이 3개의 파일을 실행하는 것은 html 파일. html을 열면 css, js를 가지고 와서 연다.
Html은 css, index를 연결해주는 접작체 같은 존재
- html 파일을 브라우저 에서 연다.
- 모든 코드(js, css) 의 합체는 html 에서 해준다.
- CSS 는 link로 연결, < head > 에서
- JS는 script로 연결, < body > 에서
CSS, html, JS 파일 브라우저에서 확인하는 법
css: Styles
js : Console
html : Elements
javascript 의 변수, 자료형
변수 const, let, var에 관하여
자바 스크립트에서 내가 쓸 변수는 const, let이 있다.
const(상수) : 바뀌지 않는 값
let(Let) : 언제든 업데이트가 될 수 있는 값
Const 이라고 선언하고 업데이트를 하면 에러가 난다
그래서 결론,
일단 const로 변수를 선언하고, 작성하다 업데이트가 될 수 있는 변수는 let을 사용
예전 코드 보면 var이 자주 보이는데 이건 쓸 이유가 없다.
Const나 let은 코드를 보호할 수 있지만 var는 다른 점이 없기 때문이다.
null, undefined, true, false에 관하여
null = "아무것도 없다" 가 있다.
undefined = 메모리 할당은 했는데 값이 정의되지 않았다.
true = 켜져있다.
false = 꺼져있다.
배열
파이썬 배열의 방식과 똑같음. 근데 add 말고 push 사용
여기서 질문?
const 는 변할 수 없는 상수인데 push로 값이 변경되도 오류가 안나나?
내용물을 통채로 수정하는 것은 안돼. 근데 내용물을 추가하거나 삭제를 ok
Objects
자바스크립트는 객체지향 언어이다. 그래서 객체를 선언할 때, 괄호 {} 에 : 를 기준으로 선언함.
객체 생성 법
이렇게 하는 이유는 일일이 player의 이름, 포인트, 유무를 직접 선언해주면
너무 player 단어가 중복되고 이는 너무 불편한 일이기 때문이다
각 특성에 접근하는 법
객체를 수정해 하는 법
객체의 특성(property)를 새로 추가해주는 법
객체 추가됨
Functions
함수 : 계속 사용할 수 있는 코드를 캡슐화해서 재사용 가능하게 한 코드 조각
console.log();xx.log() 에서 log()가 함수
선언하는 법
호출하는 법
함수명();그럼 인자를 넘겨받아야 하는 함수는 어떻게 작성해야 될까?
console.log(); 처럼 하려면, 우선 object 만들어주고, 특성과 함께 function도 정의해주면 됨
javascript 에서 document object 란?
결론 : javascript는 html와 연결되어 있다.
브라우저 console 창에서 javascript로 html 의 요소를 가져올 수 있다.
html의 요소들에 접근 가능.
document.body
document.headdocument: 브라우저에 존재하는 object. (= html을 가리키는 객체)
.html 에서 title = "제목" 과 document.title="제목" 이랑 같다.
Javascript로 html을 접근하고 다루기
console 에서 javascript의 document object를 사용하면, html의 정보를 다룰 수 있다고 공부함.
하지만 작업은 브라우저 console이 아니라 js 파일에서 하는 것이기에, js에서 html에 접근하는 법을 정리해보자.
h1 태그에 "can you see html in" 이라는 문구를 적음. 이때 id 를 할당 해주는데,
id = '이름'
id는 이 h1태그의 이름표이다.
이제 html에 작성한 이 태그를 JS에서 접근하려면 어떻게 해야 할까?
document = html의 객체
document.getElemetById("id이름"); .getElemetById 는 id 태그의 주소를 찾는 함수이다.
console.dir(태그의 객체);를 하면 console에서 해당 태그의 값들을 다 확인 할 수 있다.
console.log(title.innerText);
JS에서 titile이라는 id의 객체를 담고, .innerText를 하면 innerText에 접근 할 수 있다.
getElementsById() : id="" 로 선언시 >> Elements 를 반환
getElementsByClassName() : class="" 로 선언시 >> 배열 반환
getElemtentByTagName("h1") : < h1> 같은 태그로 가져옴 >>배열 반환
querySelectorAll(".hello"): >> 다 가져올 수 있음 , 배열 반환
가장 익숙해져야 할 문법
querySelector(".hello"); class='hello' 내부에 있는 것을 가져옴. class,id 다 가능 >> Elements를 반환 , but 한 개만 가능!
querySelector을 이용하면, Elements를 반환하기 때문에 title.innertext="새로운값" 같이 XX.XX로 변경가능.
Id는 Elements 반환
ClassName 는 배열 반환
TagName 는 배열 반환
QuerySelector 는 Elements 반환
1) class로 호출
2) class > tag 로 호출
QuerySelectorAll 는 배열 반환
Event
이제부터 querySelector로 elements를 가져오기로 했어
Elements 의 구조를 알고 싶으면,
console.dir(element);하면 됨
console 에서 다음과 같이 확인 가능.
event : 어떤 행위를 하거나, 당하는것
모든 event는 js가 들을 수 있음, eventListener
Element 에 이벤트를 다는 법
title.addEventListener();event listener 는 2개를 꼭 인자로 넣어 줘야 됨 : 실행되는 이벤트, 이벤트가 실행될 때 일어나는 이벤트 함수
이때 주의 할 것!
이벤트 함수(콜백 함수) function handleTitleEvent() 를 만들면, handleTitleEvent 라고 event listener에 넣어주면 됨. () 뒤에 붙이지 말 것
더 많은 Event 찾는 방법
1) html의 element 이벤트
Google 에 Mozilla Developer Network MDN에 검색하기 ex) h1 html element mdn을 검색2) Javascript 관점의 html element의 이벤트
htmlheadingelement Web APIs를 찾기
https://developer.mozilla.org/ko/docs/Web/API/Document
위 방법에 문서 읽는 게 싫으면 console.dir(element) 하면 여러 함수 중 onXX로 시작하면 다 이벤트
Event 사용법
두 방식 다 작동하지만 위 의 방식이 선호된다. 왜냐하면 위 방식은 EventListener를 removeEventListener를 통해서 제거 할 수 있기 때문이다.
Window Event
document = html
doucument에서 body, head, title 을 가져올 수 있다. 하지만 하위 요소 div, h1 같은 태그는 접근이 안되서 querySelector, getelementbyId 등으로 접근해야 됨.
Ex) document.querySelector("h1");
document.div 하면 undefined 뜸.
Window 는 기본 제공. 윈도우 창 자체에 이벤트를 감지하는 document처럼 기본 제공되는 object
CSS 사용하는 이유와 사용법
지금까지 js에서 Element style, color를 바꿔줌.
이것은 js보다 css에서 하는 것이 더 좋음.
1) HTML파일은 CSS문서와 JS문서를 임포트 하고있음.
2) CSS에 .active라는 class를 생성해주고
3) addEventListener로 h1을 클릭하면 handleTitleClick 함수가 작동
4) handleTitleClick 함수는 h1의 class name을 "active" 로 바꿈
5) .active의 color는 토마토색이기 때문에 토마토 색이 됨
한번 누르면 tomato색 다시 누르면 검정색 (반복 가능함)
Active이라는 이름 그대로 쓰면 오타가 나도 에러 잡기 어려우니깐 const 변수에 activeClass라고 변수에 String 저장해서 사용할 것
ClassList 사용법
class에 이미 정의된 class가 있는데 h1.className에 또 다른 class(activeClass)를 넣고 빼면,
원래 정의된 'sexy-font' class는 아예 사라짐. 이를 해결하기 위해, 원래 class는 건들지 않아야하는데 그때 classList를 사용함.
ClassList
classList 사용법 두가지 (밑에 방법 사용하기)
1) Sexy-font 그대로 있는 상태.
새로운 class "active" 가 존재하면 remove 로 없애고, 존재하지 않으면 add 로 추가
이렇게 하면 기존 class Sexy-font에 영향 안 줌
2)Toggle 사용하기
Toggle : 클래스 값을 토글링한다. 즉 클래스가 존재한다면 제거하고 false 반환,
존재하지 않으면 클래스를 추가하고 true 를 반환.
