Today Hailie Learned

클릭하면 글자 색 바뀌게 하기 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ if(h1.style.color === "blue"){ h1.style.color = "tomato"; } else { h1.style.color = "blue"; } } h1.addEventListener("click", handleTitleClick); 더 보기 좋게 바꿔보자. 👇 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ const currentColor = h1.style.color; let ne..

listen하고 싶은 event 찾는 방법! 1. 구글에 찾고 싶은 element의 이름 검색하기 ex) h1 html element mdn(mozilla developer network) 그 중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미) https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement HTMLHeadingElement - Web APIs | MDN The HTMLHeadingElement interface represents the different heading elements, through . It inherits methods and properties from ..

- 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임 - document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌 - element의 내부를 보고 싶으면 console.dir() 기본적으로 object로 표시한 element를 보여줌(전부 js object임) 그 element 중 앞에 on이 붙은 것들은 event임 - event: 어떤 행위를 하는 것 모든 event는 js가 listen할 수 있음 const title = document.querySelector(".hello:first-child h1"); function handleTitleClick(){ console.log("ti..

자바스크립트와 HTML 의 상관관계! 브라우저에서 그냥 사용할 수 있는 'document'라는 object. document의 함수 중에는 getElementById 라는 함수가 있는데, 이 함수가 HTML에서 id를 통해 element를 찾아준다. ex)아래 예제에서는 title 이라는 id를 찾고있는거다. 만약 title 이란 id를 가진 element가 없으면 아무것도 찾지 못하는거다. element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다. ex. element의 innerText를 바꾼다던가 (title.innerText = "Got you!";) id, className 등을 가져 올 수 있음. (cosole.log(title.id);) Grab me! const title..

한국나이를 만드는 function을 만들자. * console.log는 console에 결과를 표시해주는데, 궁극적으로 우리가 원하는 건 결과를 화면에 출력한다든지, 무언가를 변경한다든지, data를 받아서 사용하기를 원한다. * 함수가 그냥 어떤 기능을 수행하는 것이라고 생각하기보단, 어떤 일을 수행하고 그 결과를 알려주는 것이라고 생각하자. *function 안에서 무언가를 return 하면, function을 실행할 때, 그 결과를 return 다음의 것으로 대체한다. const age = 100; function calculaterKrAge (ageOfForeigner){ return ageOfForeigner + 2; } const krAge = calculaterKrAge(age); conso..

const calculator = { add: function(a,b){ console.log(a+b); } minus: function(a,b){ console.log(a-b); } } calculator.add(1,2); calculator.minus(1,2); SyntaxError: Unexpected identifier 'minus'. Expected '}' to end an object literal. 이런 오류가 뜬다. }가 필요하다고 하는데 나는 이상없이 다 닫았다... const calculator = { add: function(a,b){ console.log(a+b); }, minus: function(a,b){ console.log(a-b); }, mul: function(a,b){ ..

function function은 계속 반복해서 사용할 수 있는 코드 조각 function sayHello(){ console.log("Hello my name is C"); } alert(); console.log(); sayHello(); sayHello(); sayHello(); Hello my name is C Hello my name is C Hello my name is C player.points(); 라고 사용하지 않았다. player.points은 function이 아니기 때문. player.points은 숫자다. player에게 function을 주기 전에, 어떻게 function을 만드는지를 배워야 한다. function은 내가 계속 반복해서 사용할 수 있는 코드 조각이다. 어떤 코드..

노마드코더의 크롬 앱 만들기 클론코딩입니다. console.log(12345); console.log("hongsi"); 변수 선언할 때 const - always let - sometimes var - never const 재선언 금지, 재할당 금지 let 재선언 금지, 재할당 가능 var 재선언 가능, 재할당 가능 const a = b; const a = c; //재선언 금지 const a = b; a = c; //재할당 금지 let a = b; let a = c; //재선언 금지 let a = b; a = c; //재할당은 가능 var a = b; var a = c; a = d; //재선언, 재할당 가능 booleans true, false, null = 아무것도 없음(값은 주어짐) (절대 자연적으..