스터디 (17) 썸네일형 리스트형 [노마드코더] 바닐라 JS로 크롬 앱 만들기 #5.0 Intervals - #5.1 Timeouts and Dates #5.0 Intervals 파일 하나에 모든 코드를 넣는 것은 좋지 않다. CSS와 Javascript 두개의 폴더를 만들고, Javascript 폴더에 greetings.js(app.js 파일의 이름을 greetings.js로 바꿈)와 clock.js를 생성. greetings.js 는 앱에서 greeting만 다루도록 하고, clock.js는 clock을 만들도록 한다. - interval interval은 '매번' 일어나야 하는 무언가. 매 2초마다 무슨일이 일어나게 하고 싶을 때, 사용하는 것. [메인 로직] const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } // 5초마다 sa.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #4.6 Loading Username - #4.7 Super Recap #4.6 Loading Username 이번 chapter의 목표 : localStorage에 저장된 user 가 있으면 greeting을 표시하고, 없다면 form을 보여준다. [메인 로직] const savedUsername = localStorage.getItem("username"); if (savedUsername === null) { // show the form } else { // show the greetings } index.html에서는 form, h1 class 모두 hidden class를 갖고 시작하도록하고, app.js의 if else 문을 통해 제어한다. local storage에 유저 정보가 없는 경우 local storage에 유저 정보가 없는 경우 [ index.html.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #4.4 Getting Username - #4.5 Saving Username #4.4 Getting Username 이번 chapter의 목표 : User가 이름을 제출하면, 제출한 form을 없애본다. 방법 1 : html을 요소를 없앤다. 방법 2 : CSS를 이용해서 숨긴다. 'display: none'을 설정해 줄 수 있는 hidden class 를 add & remove form이랑 h1이 있는데 h1에는 hidden이라는 class가 존재하도록한다. (h1 element는 존재하지만 숨겨져 있는 것.) "Hello " + username; 는 `Hello ${username}`; 와 동일. [ index.html 코드 ] [ style.css 코드 ] .hidden { display: none; } [ app.js 코드 ] const loginForm = documen.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #4.2 Events - #4.3 Events part Two #4.2 Events form을 submit 하면 브라우저는 페이지를 새로고침 하는 것이 default 동작. (브라우저는 enter를 누를 때 새로고침을 하고 form을 submit 하도록 되어 있다.) 원하는 동작이 아니기 때문에 preventDefault() 를 추가해 브라우저가 해당 default 동작을 하지 않도록 만들 수 있다. preventDefault() : 어떤 event의 default 동작을 발생하지 않도록 하는 것. onLoginSubmit이라는 function을 만들고, 이 function이 하나의 argument를 받도록 한다. 그리고 그 argument를 JS에 넘겨주고, JS는 방금 일어난 event에 대한 정보를 지닌 argument를 채워 넣게 된다. [ app.js 코드.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #4.0 Input Values - #4.1 Form Submission #4.0 Input Values === index.html === [ index.html 코드] - 내에 input이랑 button이 존재 Log In === app.js === querySelector()로는 classname, tagname 모두 검색하는게 가능하기 때문에, querySelector()를 사용할 때는 대상이 id인지 명확히 해줘야 한다. getElementById()의 경우 JS가 이미 내가 id를 찾고 있다는 걸 알고 있기 때문에, getElementById 로 id 태그를 쓸땐 #를 안써도된다. index.html의 안에서 input이랑 button을 찾는 방법 // 방법 1 const loginForm = document.querySelector("#login-form"); co.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #3.6 CSS in Javascript - #3.8 CSS in Javascript part Three #3.6 -#3.8 CSS in Javascript chapter를 통해 application의 스타일링을 잘할 수 있도록 하는게 목표. #3.6 CSS in Javascript Click event를 통해 blue tomato color가 번갈아 나타나도록 하는 예제 [ app.js 코드 1 ] const h1 = document.querySelector("div.hello:first-child h1"); console.dir(h1); function handleTitleClick() { if (h1.style.color === "blue") { h1.style.color = "tomato"; } else { h1.style.color = "blue" } } h1.addEventListener("cli.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #3.3 Events - #3.5 More Events #3.3 Events app.js 파일이 있기 때문에 app.js를 통해 html의 내용을 가져올 수 있다. HTML이 app.js를 load하기 때문에 document가 존재하고, 그 다음에 browser가 우리가 document에 접근할 수 있게 해준다. console.dir() : element 내부의 object들을 보여준다. h1 의 style을 Javascript에서 설정할 수 있다. const title = document.querySelector("div.hello:first-child h1"); console.dir(title); title.style.color = "blue"; Event Event 예시 click h1 위로 마우스가 올라감 입력을 끝낸다. 내 이름을 적거나, enter.. [노마드코더] 바닐라 JS로 크롬 앱 만들기 #3.0 The Document Object - #3.2 Searching For Elements #3.0 The Document Object document는 브라우저에 이미 존재하는 object 로 우리가 접근할 수 있는 HTML을 가리키는 객체 console에 document를 입력하면, 작성한 HTML을 가져올 수 있다. console.dir(document)로 항목들을 확인할 수 있다. Javascript는 HTML에 접근하고 읽을 수 있게 설정되어 있다. Javascript에서 HTML document Object로 부터 title을 가져올 수 있다. (get) document.title Javascript에서 HTML document Object로 부터 title을 설정할 수 있다. (set) document.title = "Hi" JavaScript가 HTML에 이미 연결되어 있고, J.. 이전 1 2 3 다음
