시작 전, 폴더와 파일을 정리해주도록 합니다.서로 다른 기능들에 대해서 하나씩 다른 파일로 분리 시켜줍니다.이렇게하면 코드가 더 짧아지게 됩니다.html파일을 보면 greetings.js와 clock.js를 import하고 있습니다.파일 하나로 해도 상관은 없습니다!먼

local storage에서 dukin을 지우고 다시 실행해보기보다시피 local storage에 username이 없으면 null 값을 결과로 받고 있습니다.이게 우리가 원하는 local storage에 유저정보의 유무를 확인하는 것입니다.코드를 작성하고 새로고침을

localStorage에 뭐가 들어있는지 보고싶다면 개발자도구를 이용하면 됩니다.사진 속에 "응용 프로그램"이 없다면 +버튼을 눌러 찾으면, LocalStorage가 나옵니다.한국어라 로컬 저장소라고 뜨지만 그게 LocalStorage..지금은 LocalStorage가

1.HTML 요소 자체를 없애는 것입니다.2.CSS를 이용해서 숨기는 것입니다.CSS에 어떤 요소에게든 이 classname을 주면, 그 요소를 숨기게 됩니다.form class에 hidden을 추가하고 새로고침을 하면,완전히 사라지게 됩니다.일단 나중에 하기위해 cl

가끔은 뭐가 클릭되었는지, 어디가 클릭되었는지 등 정보를 알고 싶을 때가 있습니다. 그럴 때 JS는 단순히 함수를 실행시키기만 하는 것이 아니라, JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어줍니다. 그리고 이 object에는 방금 일어난

지난 시간에 이어서!클릭이 아닌 submit 감지하도록 코드를 작성해보겠습니다.결과를 보면 입력한 값이 콘솔창에 잠깐 떴다가 사라지는 것을 확인해볼 수 있습니다. 이것은 우리가 목표한 것의 50%를 완료한 것입니다!미션1은 form을 submit할 때 입력값을 받아내는

username 뒤에 .length를 더해주는 것입니다.콘솔에서도 확인해보도록 합시다.string 다음에 .length만 입력해주면 되는 것입니다.(코드 수정..)실행해보겠습니다.그리고 페이지가 새로고침되고, 값이 사라지게 됩니다. 이렇게 되는 이유는 form이 su

input 생성button 생성이 앱에는 input과 button이 매우 많을 것입니다. input과 button 끌어오기이렇듯 document 또는 하나의 element를 통해서 검색이 가능합니다.이 코드는 onLoginBtnClick()이 실행되면서 loginInp

className을 바꾸는 다른 방법, 그 방법은 classList를 사용하는 방법이다.참고 사이트https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList 이제 여기서 우리는 classList가 clicke

style 작업에 적합한 도구는 CSS이다.animation에 적합한 도구가 JavaScript이고,css에 h1의 기본색을 파란색으로 해줍니다.active는 색을 토마토로 설정해줍니다.결과는 어제와 동일하게 잘 작동되는 것을 확인해볼 수 있습니다.

참고하실 사이트를 이제 올려드리네요!!위 사이트에는 많은 event들을 찾아볼 수 있고, 많은 정보를 제공하고 있습니다.event listener들을 지우겠습니다.이제는 handle TitleClick function에 초점을 맞출 것이기 때문이죠이 말은 무언가가 tr

title.addEventListener()을 해주고, click을 넘겨주는 것, 하지만 이걸 title.onClick() 이런식으로 바꿀 수 있습니다.addEventListener을 더 선호하는 이유는, 나중에 removeEventListener를 통해서 event

마우스가 title 위에 올라갈 때, click은 하지 않고 그냥 위에 위치할 때의 event.JavaScript가 두 event를 listen하고 있습니다.하나는 click이고, 하나는 onmouse입니다.이번에는 onmouse를 onmouseleave로 바꿔보도록

CSS color를 바꾸기h1의 style을 javascript에서 변경할 수 있습니다.event : 예를 들어, 사용자가 click을 하면 그게 event입니다. h1 위로 마우스가 올라가도 event입니다. eventListener은 말 그대로 event를 list

className 사용하기이것은 우리의 코드 내에 어떤 값이 null이라는 뜻입니다.아무것도 없는 것(null)의 innerText를 접근하려고 한 것입니다. 이 title이 null이라는 말이죠.이 null variable의 innerText property는 변경할

보다시피 javascript로 id="title"을 가진 h1 태그를 가져왔습니다.이것을 콘솔에서 하지말고 js파일에서 해봅시다.이렇게 js에서 하면 동일하게 나옵니다.앞으로 우리가 사용할 수 있는 많은 것들이 뜹니다.이 모든 것들은 HTML에 포함되어 있는 것이죠.코

(저번 시간에 이어서)한 개의 = 는 value를 할당하는 것이다.age === 100 는 age가 100이라면? 을 확인하는 것이다.age !== 100 은 age가 100이 아니라면? 이라는 것이다.콘솔에 document를 입력하면 내가 작성한 HTML을 가져올 수

else if는 else에 if를 더한 것입니다. 즉, 이 if가 false일 때 한가지 condition을 추가해줍니다.if문이 true이면 console.log("Plase write a number");가 실행되고, 이 condition(age < 18)이

사용하는 법은 이렇습니다!이 방법을 if문을 사용해서 응용해보겠습니다.사용자가 만약 number를 입력하지 않으면 어떻게 될까요?number가 아닌 string을 text에 입력하였을 때는 코드에 적었던 것처럼 number를 입력해달라고 나오게 됩니다.이번에는 else

오랜만에 올리는 벨로그..건강 조심하시고.. 저도 또한 그래야겠습니다..그런데 실제적인 계산은 그 값을 바로 얻을 수가 없습니다. 잘 작동하는 것처럼 보이지만 정의가 되지 않은 것으로 나오죠..console에는 보일지 몰라도..hello는 출력 되지만 return후의