본문 바로가기

JavaScript36

Input Values 지금까지 작성한 js와 css의 코드를 모두 지우고 html 코드를 수정했다. 그리고 위에 작성한 것들을 login-form이라는 class를 가진 div 태그 안에 넣어주었다. 이제 이것을 통해 js에서 input 태그와 button을 찾을 수 있다. 먼저 login-form 클래스를 찾아 loginForm 변수에 넣어주고 이렇게 작성한 loginForm에서 input과 button을 찾으면 된다. 더 짧게 코드를 작성하려면 이렇게 수정하면 된다. 이제 전에 배웠던 click event를 loginButton에 연결하여 사용해보자 What is your name? 칸에 입력한 텍스트를 값으로 받아서 콘솔창에 출력하고 싶다면 먼저 console.dir()을 통해 loginInput의 내부를 확인한다. 출.. 2022. 2. 13.
CSS in Javascript part Two 이제는 자바스크립트가 아닌 css 파일에서 직접 스타일을 지정하도록 했다. js 파일에서 h1 태그에 active라는 클래스를 추가하면, css 파일에 의해 클릭했을 때 글자의 색이 tomato색으로 바뀌는 것을 확인할 수 있다. 이전과 달리 css와 js 파일을 구분하면 더 적은 js 코드로 동일한 결과를 얻을 수 있다. 이번에는 다시 클릭하면 active라는 클래스를 제거하도록(다시 cornflowerblue 색이 되도록) 만들어보자 h1태그의 className이 active라면 className을 없애주고 그렇지 않다면 className을 active로 지정하는 함수로 코드를 수정했다. 이제 화면을 실행하면 클릭을 반복함에 따라 글자의 색이 cornflower -> tomato -> cornflow.. 2022. 2. 13.
CSS in Javascript title을 한 번 클릭하면 title의 색이 blue가 되고, 또 한 번 클릭하면 tomato색이 되고 즉, title의 색이 blue가 됐을 때 클릭하면 tomato가 되고 다시 클릭하면 blue가 되도록 만들고 싶다. 일단 코드를 아래와 같이 변경했다. 이 화면을 실행하여 console창을 확인하면 처음에는 아무 것도 출력되지 않고 두 번째 부터는 클릭할 때마다 blue가 출력되는 것을 확인할 수 있다. 이러한 검사를 이용하여 h1.style.color가 blue라면 그것을 tomato로 변경해주고, h1.style.color가 blue가 아니라면 그것을 blue로 변경하도록 코드를 작성하면 된다는 결론을 얻었다. 이렇게 코드를 수정하고 다시 실행해보면 클릭할때마다 title의 색이 바뀌는 것을 확.. 2022. 2. 11.
More Events 이벤트를 작성하는 방법은 두 가지인데, addEventListener을 사용해야 나중에 removeEventListener를 통해서 event listener를 제거할 수 있다. 위의 title은 html element였고, 이제 window에 대해 이야기 해보자 JS에서 document를 기본적으로 제공하듯이, window도 기본적으로 제공한다. 화면을 resize하는 함수를 추가했다. 만약 document에서 body가 아닌 title을 호출했다면, 그것은 아래의 title이 아닌 html의 태그에 해당한다는 점을 알아두자 document.title 에서 title에 해당하는 것은 아래의 것이다. 헷갈림을 방지하기 위해 h1태그를 가리키는 title을 그냥 h1으로 변경했다. 이제 이 화면을 실행해보.. 2022. 2. 9.

티스토리툴바