< Conditionals >
prompt
사용자에게 창을 띄울 수 있도록 해주는 함수로, 2개의 인자를 받는데, message(String)와 default이다.
prompt는 사용자에게 message를 보여주고 값을 넣기를 요청한다. 값이 입력되기 전까지 JavaScript는 잠시 멈추게 된다. 사용자가 입력을 하지 않으면 아무 일도 일어나지 않는다. 이것이 prompt function을 잘 사용하지 않는 이유이다. 또한 CSS를 적용시킬 수 없다는 이유도 가지고 있다.
요즘은 HTML, CSS로 만든 자신만의 창을 이용하여 사용자에게 값을 입력 받는다.
parseInt()
JavaScript에서는 입력받은 값은 모두 String타입이다. 만약 숫자를 입력 받아야 하는 상황에서는 parseInt()를 통해 String을 Number형으로 바꿀 수 있다. 자바에서 Integer.parseInt()라고 적는것과 비숫하면서도 다른 부분이 있다.
ex)
const age=parseInt(prompt("How old are you?"));isNaN()
인자가 숫자가 아닌값인지 판별하는 함수이다. 숫자가 아닌 경우에는 true, 숫자인 경우에는 false를 반환한다.
< The Document Object >
document
접근할 수 있는 HTML을 가리키는 object이다. HTML코드를 JavaScript 관점에서 볼 수 있다.
HTML값을 읽어오고, 변경할 수 있다.
HTML이 JavaScript를 load하는 경우에만 사용 가능하다.
- document.body : HTML에서 body 부분을 읽어온다.
< HTML in Javascript >
id 가져오기
우리가 HTML에 접근할 수 있는 방법인 document객체의 getElementById("원하는 아이디")함수를 사용한다. 아이디는 String이어야 한다.
ex)
document.getElementById("title");
//<h1 id="title">Grab me!</h1>아이디를 보여주는 방법으로는 console.log를 사용하는 방법과, element를 더 자세하게 보여주는 console.dir()을 사용하는 방법이 있다. console.dir()에는 innerHTML, id, hidden등등 많은 요소가 있다.
JavaScript는 HTML을 표현하는 object를 통해 element를 가지고 오지만, HTML 자체를 보여주지는 않는다.
JavaScript로 HTML 변경하기
HTML에 접근 후 요소의 값을 변경할 수 있다.
<h1 id="title">Grab me!</h1>const title=document.getElementById("title");
title.innerText = "Got you!";변경 후
<h1 id="title">Got you!</h1>< Searching For Elements
element 가져오기
document.getElementByTagName(태그이름) 이런 방법으로도 요소를 가져올 수 있다.
getElementBy~가 아닌 방법으로는 querySelector, querySelectorAll가 있다.
querySelector
element를 CSS 방식으로 검색할 수 있다.
<div class="hello">
<h1>Grab me!</h1>
</div>이 경우 hello 클래스 내부에 있는 h1을 가지고 올 수 있다.
const title = document.querySelector(".hello h1");
const title2 = document.querySelector(".hello h2");
console.log(title); //<h1>Grab me!</h1>
console.log(title2); //null만약 querySelector를 사용할 때 똑같은 .hello h1가 n개 있다면?
첫번째 요소만 나오게 된다.
querySelectorArr
n개 모두 가져오고 싶다면 뒤에 All을 붙여주면 된다.
<div class="hello">
<h1>Grab me1</h1>
</div>
<div class="hello">
<h1>Grab me2</h1>
</div>
<div class="hello">
<h1>Grab me3</h1>
</div>const title = document.querySelectorAll(".hello h1");
console.log(title); // NodeList(3) [h1, h1, h1]querySelectorAll은 selector안의 조건에 부합하는 모든 element를 가져다준다.
id를 통해서 요소를 불러오는 방법도 가능하다.
const title = document.querySelector("#hello");
//아이디만 가져오는 경우에는 const title = document.getElementById("hello");와 동일하다.
const title = document.querySelector("#hello h1");
//하지만 hello id하위의 요소를 가져오고 싶은 경우에는 getElementById로는 할 수 없다.
document.querySelector(".hello:first-child h1"); // hello클래스를 가진 first-child인 h1을 찾아온다.
//<h1>Hello</h1>< Events >
console.dir()을 실행했을 경우 on으로 시작하는 object 항목들이 많은데, 이것들이 event이다.
style
JavaScript로 색상을 변경해보자.
const title=document.querySelector("div.hello:first-child h1");
title.style.color="blue";JavaScript로 하는 대부분의 일은 event를 listen하는 것이다. 입력을 하거나 enter를 누르거나 마우스를 대는 일, wifi 접속이 해제되는 경우 등이 event이다. JavaScript는 모든 event를 listen 할 수 있다.
click
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){ //클릭이 된 경우에 실행되는 함수이다.
console.log("title was clicked!");
}
title.addEventListener("click", handleTitleClick);//무슨 event를 listen하고 싶은지 알려준다 (click event를 listen한다, handleTitleClick함수를 두번째 인자로 JavaScript에 전해준다. 유저가 click할 경우에 JavaScript가 함수를 실행시키길 원한다.)JavaScript가 조건이 충족되는 경우에만 함수를 실행시키게 하기 위해서 함수(function())가 아닌 function의 이름을 넘겨준다.
< Events part Two >
listen 할 event 찾기
구글링
- 구글에 찾고싶은 element의 이름을 검색 해 본다.
ex) h1 html element mdn - 검색 결과 중 링크에 Web APIs라는 문장이 포함된 페이지를 찾는다.
이는 JavaScript관점의 HTML element를 볼 수 있다.
console.dir
element를 console에 출력시켜준다. 여러 property들이 나오는데, 이름 앞에 on이 붙어있다면 그게 event listener이다. event를 사용하고 싶다면 on을 빼고 사용해야 한다.
oneventname
oneventname property에 event listener를 할당함으로써 event를 listen할 수 있다.
mouseenter
마우스가 위에 올라갈 때 실행되는 event이다.
const title = document.querySelector("div.hello:first-child h1");
function handleMouseEnter(){
console.log("mouse is here");
}
title.addEventListener("mouseenter", handleMouseEnter);mouseleave
마우스가 요소에서 벗어날 때 실행되는 event이다.
function handleMouseLeave(){
title.innerText = "Mouse is gone!";
}
title.addEventListener("mouseleave", handleMouseLeave);위와 같은 방법으로 event를 사용 할수도 있고,
onclick
title.onclick = handleTitleClick;
//title.addEventListener("click", handleTitleClick);과 같은 기능을 수행한다.addEvent Listener는 removeEventListener를 통해서 event listener를 제거할 수 있다는 장점이 있다.
window
위에서 쓰던 title은 HTML element이고, 이번에는 window에 대해 배워보자.
function handleWindowResize(){
document.body.style.backgroundColor = "tomato"; // document 밑( ex)h1태그 )으로 가져올 수 없다. document로는 body, head, title을 찾아올 수 있고,
//다른 요소를 찾아오려면 querySelector을 사용해야 한다.
}
window.addEventListener("resize", handleWindowResize);copy
복사했을 때 일어나는 event이다.
function handleWindowCopy(){
alert("copier!");
}
window.addEventListener("copy", handleWindowCopy)h1이 아니라 window에서 일어나는 event지만, 패턴은 같다.
element를 찾아서 event listener를 추가하고, event가 발생하면 반응을 해준다.
offline, online
와이파이 연결이 해제 되었을 때, 연결되었을 때 일어나는 event이다.
function handleWindowOffline(){
alert("SOS no WIFI");
}
function handleWindowOnline(){
alert("All Good");
}
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);< CSS in JavaScript >
클릭 시 색깔 바꾸기
클릭하면 파랑과 토마토색을 번갈아 입히고 싶다.
이 경우에는 글자의 색이 파랑인이 파랑이 아닌지 검사한 후, 검사 결과에 따라 색을 입혀주면 된다.
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const currentColor = h1.style.color;
let newColor;
if(currentColor ==="blue"){
newColor = "tomato";
}else{
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);CSS 활용하여 색깔 바꾸기
h1{
color:cornflowerblue;
transition:color 0.5s ease-in-out;
}
.active{ /* 이 class가 지정된 element는 tomato색깔을 가지게 된다.*/
color:tomato;
}const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "clicked"; //오타로 인한 에러가 발생할 수 있는 부분을 줄이기 위함. String인 경우 오타가 나도 JavaScript가 인식하지 못하지만, 변수의 경우 선언되지 않은 변수라면 에러가 뜨기 때문에 고쳐야 될 부분을 쉽게 알 수 있다.
if(h1.className === clickedClass){ //h1.className은 getter이면서 setter이다.
h1.className = "";
}else{
h1.className = clickedClass; //JavaScript가 CSS에게 직접 대화하지 않게 되었다.
//JavaScript는 HTML을 변경할것이고, CSS는 HTML을 바라보고 있다.
}
}
h1.addEventListener("click", handleTitleClick);더 적은 JavaScript 코드로 동일한 결과를 얻게 되었다.
기존 class name 변경 없이 class 추가하기
classList를 사용한다.
classList는 class들의 목록으로 작업할 수 있게 해 준다. className은 이전 class들을 상관하지 않고 교체 해버리지만, classList는 교체하지 않는 방법을 사용할 수 있다.
contains, remove, add
function handleTitleClick(){
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){
h1.className.remove(clickedClass);
}else{
h1.className.add(clickedClass);
}
}toggle
class name이 존재하는지 확인 후, 존재한다면 지우고, 존재하지 않는다면 추가한다. 위 코드를 toggle하나로 구현 가능하다.
function handleTitleClick(){
h1.classList.toggle(clickedClass);
//clickedClass가 한 번만 사용되기 때문에 변수를 생성해서 사용할 필요가 없다.
}