노마드 코드 니콜라스와 함꼐하는 바닐라js로 크롬 앱 만들기 :)
바닐라 JS란 JavaScript중 하나이지만 library가 없는 것을 말한다.
날 것의 자바스크립트.
이것을 배우고 나서 나중에 library나 framework처럼 도움을 받아 자바스크립트를 이용할 수 있을 것이다.
JavaScript는 언어, ECMAScript는 Specification이다.
바닐라 자바스크립트는 브라우저를 통해 우리에게 제공된 자바스트립트 이다.
자바스크립트는 생긴 지 오래된 언어이기때문에 만든지 오래된 홈페이지에 대해서
- 어떤 사람들은 자바스크립트를 현대적으로 만드는 것을 배우기도 하고
- 커피스크립트를 배우기도 하고=섹시한 버전의 자바스크립트 :)
- 자바스크립트를 묶는 것을 배우기도 한다.
다른 사람이 만든 소프트웨어를 내가 열고 싶을 때 Haskell이라는 것을 다운받아야 할 수도 있다. 하스켈을 읽기 위해! 하지만 자바스크립트는 그럴 필요가 없다. 브라우져랑 이미 같이 있기 때문이다.
HTML에서 사용하던 ID.
바닐라 javascript에서도 사용하고 싶다면
document.getElementById('test-table');
//jQuery를 쓴다면
$jq('#test-table');
//등등 다른것에는 다르게 쓰면 된다.
을 이용하면 된다.
일단 css가 html에서 링크로 연결해줄 떄 무조건 head안에서 불려졌어야 했다면 js는 body안에서 그것도 맨 마지막에 연결해줘야 한다.
우리가 변수를 생성하고 초기화 해줄 때,
let a = 221;
이라고 쓰면 var a는 변수를 생성하고 221은 초기화 해준 것이다.
우리는 자바스크립트 데이터타입(string, number, boolean, float etc...)을
- 배열
- 객체 를 통해 정렬할 수 있다.
array에 데이터 값들을 넣을 때 string을 변수에 저장해서 변수를 array의 구성으로 넣어도 잘 동작함
자바스크립트는 물론 모든 언어에는 규칙과 문법이 있어.
자바스크립트 배열과 객체에서는 요소와 요소 사이에 반드시 콤마를 넣어줘야해. string은 "" 또는 '' 사이에 들어가야하고.
#2 에서 practice 할 때
function에 대해서 다시 다뤄본다.
-
그냥 따옴표를 써서 다뤘을 경우.
function sayHello(potato, cow) {
console.log("Hello!", potato, " you have ", cow, "years of age.");
}sayHello("aerirang", 10);
//Hello! aerirang you have 10years of age.
-
백틱을 써서 다뤘을 경우
function sayHello(name, age) { console.log(`Hello ${name}! you are ${age} years old.`); } console.log(sayHello("aerirang", 10)); //같은 결과 -
function의 결과를 return을 썼을 경우와 console.log를 썼을 경우. 위에는 console.log를 쓴 경우. 이 밑에가 return 쓴 경우
function sayHello(name,age) { return `Hello ${name}! you are ${age}years old.` } const greetings = sayHello("aerirang", 10); console.log(greetings)
DOM = Document Object Module
자바스크립트는 나의 html에 있는 모든 요소를 가지고 와서 객체로 바꿀 것이다.
우리가 배울 함수들은 (우리가 찾게 될 모든 객체들의 함수들) 모두 DOM형태로 변경 가능하다.js에서 html의 id 부르기
//ex)js 파일에서 const title = document.getElementById("title") // js에서 id가지고 오는 것은 getElementById // html에 h1에 id = "title"을 줬으니까 괄호 안에 title //console.log(title); title.innerHTML = "Hi! From JS" //은 key를 가지고 있다. //html을 DOM객체로 바꿀 수 있다!
내 페이지에서 자바스크립트로 선택하는 것은 객체가 된다.
->html에 있는 h1 태그에 title이라는 id를 부여했고
js파일에서 const title라는 변수에
js방식으로 html에 있는 Id를 불러서 넣었다.
그리고 수 많은 key 중에 innerHTML을 통해 다 무시하고 innerHTML로 넣은 string만 출력되도록 한 것이다.
console.dir
위의 코드를 참고하여 우리가 title로 할 수 있는 모든 것을 알아보자.
이걸 위해 우리는 console.log대신 console.dir
라고 적었을 때
lala.html을 넣은 크롬 화면에서
라고 뜬다.
저 h1#title 왼쪽에 세모 모양을 누르면 내가 무엇을 할 수 있는 지 여러가지를 알 수 있다.
이것들을 event라고 한다.
이것들 모두가 자바스크립트 객체 표기법이다.
시험삼아 자바스크립트로 h1글자색을 바꿔보는 코드를 쳐보자면
js파일에
title.style.color = 'brown';
이라고 써준다.
mit = und '' oder mit ""
document 에서는 무엇을 할 수 있을 까
알고싶다면
console.dir(document);
를 써서 console 창에서 또 세모 눌러 목록 보기.
이 객체들을 통해 내가 무엇을 가지고 무엇을 했으며 내가 쓰지 않은 것들 중에 쓸 수 있는 것들을 알 수 있다.
console.dir(document)
를 통해 보던 것 들 중에
proto: StyleSheetList
밑에 title: "Something"
이라고 적힌것을 바꿔보자.
@@@@@@@@@@@@@@@
마지막 줄 document.title = 'I own u now'; 를 썼을 때
우리가 하고 있는 페이지의 이름이 바뀐 것을 확인할 수 있다.
js파일의 첫 번째 줄에서
const title = document. 뒤에 올 수 있는 목록들을 본다.
querySelector가 올 수 있는데 이것은 노드의 첫 번째 지식을 반환한다고 한다.
여기에서 뒤에 찾고 싶은 것을 쓸 때
id 나 class부르는 법은 css랑 비슷하다
- document.querySelector("#title");--id 부르는 경우
또는 - document.qeurySelector(".title");--class부르는 경우
우리는 지금 어떻게 자바스크립트로 html을 수정하는지,
아마도 class도 추가할 수 있고, 어떻게 애니메이션을 수정할 수 있는지 어떻게 숨기고 드러내고 click을 감지하는지 본 것이다.
자바스크립트는 html과 css를 변경하기 위해 만들어진 언어가 아니다.
반응하기 위해 만들어진 것 이다.
-
events란?
-> 웹사이트에서 발생하는 것들. such as click, resize, submit , input, change, load ,before closing...등등 모두 이벤트이고
우리는 이 이벤트를 가로챌 수 있다. -
window는 조금 다른 event를 가지고 있다.
form이라는 것을 가지면 submit이라는 event를 가지게 되는데
submit은 window에 존재하지 않는다.
window를 제출할 수는 없으니까.
resize로 한번 해보자.//js파일에 const title = document.querySelector("#title"); @@@ window.addEventListener("resize"); //이렇게 적으면 자바스크립트는 이벤트를 받길 기다리게 된다. //event옆에 어떤 함수에서 resize를 다룰 지 알려줘야 한다. 그런데 함수가 없으니까 함수를 만들어서 써주자. function handleResize () { console.log("I have been resized") } window.addEventListener("resize", handleResize ); //라고 써줘야 한다.handleResize()라고 쓰면 event를 기다렸다가 적용되었을 때 나오는게 아니라 바로! 나오게 되기 때문에 handleResize라고 적어줘야 한다.
window가 resize되었을 때 나와야지 그냥 바로 나오면 안되잖나!function handleResize () { console.log("I have been resized") } window.addEventListener("resize", handleResize );이것만 썼는데도, 크롬에 열어둔 파일 윈도우 사이즈를 줄이거나 늘리면 console창에 I have been resized가 뜬다.
넘나 신기해..
/
/
function handleResize(event) {
console.log(event)//를 추가 했다.
\\\\\\\
console.log("I have been resized")
}
window.addEventListener("resize", handleResize); 함수 안에 있는 console.log(event) 의 event는 어디에서 왔나.
자바스크립트에서 왔지!
이벤트를 다룰 함수를 만들 때 마다 자바스크립트는 자동적으로 함수를 객체에 붙인다.
위에 코드를 작성 한 뒤 윈도우 크기를 조절했더니
이렇게 event가 발생할 때마다 이 이벤트 객체가 호출되고 있다.
방금 한 것은 우리가 form을 만들때나 링크를 클릭할 때 유용하다.
이렇게 바꾸면
글씨를 클릭하면 하얀색에서 파란색으로 변한다.
자 이제. 위에 글씨가 blue인지 아닌지 보는거랑 만약 blue라면 어떻게 바꿔주고 blue가 아니라면 어떻게 바꿔볼 지 만들어보자.
if 조건문
js파일에서 if 조건문을 써보자.
if(true) {
block//자바스크립트 표현법
//alert가 와도 되고 , console.log가 나와도 된다.
} else {
block
}
if 의 괄호 조건문에는 &&(and, ~이면서) 와 ||(or, 또는)을 이용할 수 있다.
여기에 20보다 큰 숫자들을 입력하면 you can이 나오고
19이하의 숫자들을 입력하면 you can't 라고 나온다.
위에서는 조건문을 보았다.
이제 click할 때 체크하는 것을 배워보자.
이렇게 적으면 h1의 문구를 클릭할 때마다 색이 변한다.
만약 다른거 다 똑같고 click이 아니라 mouseenter라는 event를 쓰면,
마우스가 h1 문구로 in,들어가기만 하면 색이 바뀐다.
그 많은 events들은 어떻게 찾냐고?
google에 javascript dom event mdn을 검색해라
event의 근원을 알고싶다면 "mdn"을 꼭 검색해라
always use "mdn"
javsscript dom event mdn을 보다가 실험적으로 한것.
online, offline events
라고 js파일에 쓰고
개발자 도구로 가서 console 창 띄운 뒤
와이파이 잡으면 console 창에 Hi there이 뜨고
와이파이 꺼지면 console 창에 see u soon 이 뜬다.
너무너무 신기함........
내 와이파이를 읽을 수가 있다니
.
.
click 했을 때 실행되는 function handleClick에서
currentClass에 title.className을 넣어준다.
여기에 title은 맨 윗줄에
document.querySelector("#title");을 넣은 변수이다.
h1 이라는 의미지..
그래서 h1의 className을 currentclass에 넣었다
DOM조작을 위해 사용되는 class 키워드와의 혼란을 줄이기 위해 className이라는 property를 사용한다.
html과 css와 javascript의 제 기능대로 나눠서 h1클릭했을 때 색 바뀌게 만든 코드
->html
-> css
->javascript
@@@@@@@@
css에
이렇게 트랜지션으로
클릭할 때마다 색이 느리게 변하는 효과를 줄 수 있다
여기에서 생성될 수 있는 실수 및 잘 정리하기
class="btn" 을 주어졌다.
그 class btn에는
h1에 마우스를 올리면 커서가 포인터로 변하는 (클릭할 수 있다고 사용자에게 알려주고 싶을 때 했던거. 기억나지?) css를 줬다.
! 하지만
새로고침하고 처음에는 커서가 포인터로 되지만 한번 클릭하고 나면 class가 clicked로 되거나 사라지거나 하기 때문에 커서를 향한 class는 없어졌다.
- 우리는 이제 classList가 필요하다.
- add
- remove
- contain
- toggle
등등
이것 저것 다 사용해보자.
이렇게 하면 한번 클릭했을 때는 btn과 clicked가 공존할 수 있다.
그러나 한번 더 클릭했을 때는 변하지 않는다.
왜?
class는 더이상 clicked가 아닌 class="btn clicked"가 되어버렸기 때문이다.
- 이제는 classList의 contains를 이용해보자
-> 주석은 보지말고. hasClass가 true라면 clicked를 제거하고 hasClass가 false라면 clicked를 add하는 것으로 만들었다.
-> 이 코드가 우리가 원하던 커서도 있고 클릭했을 때 색도 변하게 만드는 코드이다.
- 너무 기니까 간단하게 만들어보자
toggle
classList의 toggle은 우리가 지금 하고 있는 일과 같은 일을 해주면서 요약한 것이다.
(변수에 저장하고 조건문 쓰고 그랬던게
이 한줄로 끝난다.. 프로그래밍,,.양파같은 존재...)
toggle 옆 () 안에 있는 class가 있으면 remove해주고 없으면 add해주는 역활을 한다. 너무좋은데?
이론 끝
모멘텀 만들기 시작
- 시계 만들기
우선 html에 body 속에
<div class="js-clock">
<h1 class="js-title"></h1>
//또는 다른 방식을 원한다면
<h1>00:00</h1>
</div>라고 h1을 만들어 줬다.
//
두 번째 줄에서 clockTitle을 보면 = 옆에 document라고 써있지 않고 clockContainer라고 써져 있지.
우리는 document로부터 보고싶지 않고 js-clock이라는 class의 자식에서 querySelector를 찾고 싶어서 윗줄의 변수를 가지고 온 것이다.
함수 안에 각각의 변수들로 분, 시를 찾았고
clockTitle.innerText로 객체 안에 텍스트를 넣고자 하기에 쓴다.
그런 후 백틱을 이용해 text를 넣었고.
백틱 안에는
변수를 부르는 ${}를 이용해 시간을 알려줄 수 있도록 했다.
그런데 여기까지 쓴 코드는 새로고침을 하지 않으면 데이터가 바뀌지 않는다.
우리가 원하는건 데이터를 얻고 얻어 시간이 실시단으로 바뀌는 것을 보아야 한다.
그러려면
setInterval-밀리초에 한번씩 함수 호출해줌
이라는 것을 이용하자.
이 함수는 인자(argument)를 2개를 받는데 첫 번째 인자로 실행할 '함수'를 받고,
두 번째로는 그 함수를 실행하고 싶은 시간간격.
여기에서 두번째 인자는 밀리초 단위이기 때문에
!!!3초 간격!!!
으로 데이터를 얻고 싶으면 setInterval(function, 3000) 이라고 적어야 한다.
음. 시계가 매 초마다 잘 흐르게 되었다.
또 다른 문제는 초, 분, 시간 중에 0부터 9 까지는
01,02,03...처럼 나오는게 아니라
1, 2, 3,....처럼 나온다는 것이다.
우리는 첫 번째 것 처럼 나오길 원한다.
그것을 하기 위해 우리는 엄청 섹시한 코드를 배울 것이다.
ternary operator(삼항 연산자) 혹은 mini if
이거는 따로 if를 쓰지 않고 문자열로 나열해도 된다.
->해석을 하자면
clockTitle.innerText = ${hours}:${minutes}:${seconds}에서
{seconds < 10 ? `0{seconds}: seconds} seconds가 10보다 작다면(?가 if역활) 0${seconds}`를 도출한다. 그렇지 않으면(:) 그냥 seconds를 도출한다.(지금 보이는 네모는 백틱으로 인해 생긴 것인데 실제 코드에 백틱이 필요하다.
이것을 hours, minutes, seconds에 모두 넣으면 01,02,03으로 시계가 잘 돈다.
시계 끝
사용자의 이름을 물어보고 컴퓨터에 저장하기
- 일단 이름을 물어봐야하니까
body > div > form > input
form 을 body안에 써주고 js-form이라는 class를 부여한다.
form 안에는 input type="text" placeholder로 부가 설명 적어준다.
=>이거는 아이디 비밀번호 적을 때 배웠던거다!
반복과 반복 중요!
1-element를 불러 찾아오는 방법 1
querySelector로 부르는 것 ("")에는 css 방식으로 모든 것을 부를 수 있다.
querySelector은 찾은 것의 첫 번째 것을 가져오고
querySelectorAll은 해당하는 것의 모든 것을 찾아 element의 array를 줄 것이다.
니콜라스는 All은 잘 안쓴다고 한다. 찾은 모든것을 array에 넣고 이게 꽤 귀찮다고 한다.
1-element를 불러 찾아오는 방법 2
getElementById()이다.
getElementByTagName은 태그로 element를 가져오는 것이다.
input, body, html, div, section...etc.
이미 아는 것이죠.
아주 섹시한 local storage 배우기-작은정보를 나의 유저 컴퓨터에 저장하는 방법
모멘텀 원래 페이지의 개발자 도구에서 application을 보면 정보가 저장되어있는 것을 알 수 있다.
localStorage란 이런 작은 자바스크립트 정보들을 저장한 곳이다.
우리가 만든 모멘텀 페이지 콘솔창에서
localStorage.setItem("aerirang", true);
//1번은 이름 2번은 value라고 치면 application창에
key 는 aerirang
value는 true
가 뜬다.
새로고침을 여러번 해도 데이터는 그대로 저장되어 있다.
저장 되어있는 것을 불러보자면
localStorage.getItem("aerirang");
-> "true" 가 뜬다.
이것을 우리 코드창에 할 것이다.
우선, greeting.js 에 loadName 함수를 만들어보자
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
9. greeting = document.querySelector(".js-greetings")
15. const USER_LS = "currentUser",
SHOWING_CN = "showing";
13. function paintGreeting(text){
17. form.classList.remove(SHOWING_CN);
16. greeting.classList.add(SHOWING_CN);
13-1 greeting.innerText = `Hello ${text}`
}
2. const USER_LS = "currentUser"
function loadName() {
// 이 함수는 localStorage에서 value 값 가지고 오게 할 거다.
1. const currentUser = localStorage.getItem(USER_LS);//value를 준다.
3. if (currentUser === null) {
5. //local Storage에 유저가 없을 때 어떤 행동을 할까
} else {
4. //local Storage에 유저가 있을 때 어떤 행동을 할까
6. //우선,둘 다 경우 모두 form tag는 display none을 하자.
7. //form tag에 form이라는 class를 줘서
//css에 .form{display:none} 을 주자.
12. //local storage에 유저가 있을 때 이름을 색칠하자.
14. paintGreeting(currentUser);
}
}
function init() {
}
init();
-------------
8. html파일 form 태그 밑에 form안에 들어가지 않게
<h4 class="js-greetings greetings"></h1>
10. css에 .form과 같이 .greetings도 넣기
11. css 에 .showing {display:block}추가하기
