반응형
const h1 = document.querySelector("div.hello");




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);

(===) 부등호 부호가 세 개 라면, className이 active와 같은지 확인하는 것이고,

(=)하나라면, 해당 값을  value 자리 값으로 변경해 준다.

const h1 = document.querySelector("div.hello");


function handleTitleClick() {
    const clickedClass = "clicked";
   if (h1.className === clickedClass) {
       h1.className = "";
   } else {
       h1.className = clickedClass;
   }
}
   
h1.addEventListener("click",handleTitleClick);
<body>
    <div class="hello">
       <h1 class="sexy-font">Click me!</h1>
    </div>
    
    <script src="app.js"></script> <!--body 사이에 있고, 반드시, 경로, 이름 확인-->
</body>
body {
    background-color: teal;
}

h1 {
    color: cornflowerblue;
    transition:color .5s ease-in-out;
}
.clicked {
    color: tomato;
}
.sexy-font {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

이 모든 코드를 대체할 .toggle함수 

function handleTitleClick() {
    const clickedClass = "clicked";
   h1.classList.toggle("clicked");
}
토큰을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.

 

'Developer' 카테고리의 다른 글

Python의 인자, return  (0) 2022.01.03
login input value  (0) 2021.12.29
More Events  (0) 2021.12.28
Events  (0) 2021.12.28
serching for element 2  (0) 2021.12.28
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moment</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="hello">
       <h1>Click me!</h1>
    </div>
    
    <script src="app.js"></script> <!--body 사이에 있고, 반드시, 경로, 이름 확인-->
</body>
</html>
const h1 = document.querySelector("div.hello");




function handleTitleClick() {
    //console.log("title was clickedl!");
   h1.style.color="blue";
}

function handleMouseenter() { 
    h1.innerText = "Mouse is here";
}
function handleMouseleave() {
    h1.innerText = "Mouse is gone!";
}

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
    alert("copier!");
}
function  handleWindowOffline() {
    alert("SOS no WIFI");
}
function handleWindowOnline() {
    alert("All Gooood");
}

h1.addEventListener("click",handleTitleClick);
h1.addEventListener("mouseenter",handleMouseenter);
h1.addEventListener("mouseleave",handleMouseleave);

window.addEventListener("resize",handleWindowResize);
window.addEventListener("copy",handleWindowCopy);
window.addEventListener("offline",handleWindowOffline);
window.addEventListener("online",handleWindowOnline);

'Developer' 카테고리의 다른 글

login input value  (0) 2021.12.29
CSS in JavaScript  (0) 2021.12.28
Events  (0) 2021.12.28
serching for element 2  (0) 2021.12.28
Searching For Elements  (0) 2021.12.28
반응형

이번 강의 실습에서 헤멘 이유

: 함수명 오타로 인해   error 발생, 불러올 element 주소를 잘못지정한 경우.

 

 

유저의 행동을 listen 하는 이벤트

 

요소의 스타일 컬러를 바꾸는 이벤트 만들기

js가 html document에서 함수를 이용해 작업을 하는 만큼, 정확한 경로와, 함수명을 입력해야한다.&nbsp;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moment</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="hello">
       <h1>Click me!</h1>
    </div>
    
    <script src="app.js"></script> <!--body 사이에 있고, 반드시, 경로, 이름 확인-->
</body>
</html>

 

const title = document.querySelector("div.hello");




function handleTitleClick() {
    //console.log("title was clickedl!");
   title.style.color="blue";
}

function handleMouseenter() { 
    title.innerText = "Mouse is here";
}
function handleMouseleave() {
    title.innerText = "Mouse is gone!";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseenter);
title.addEventListener("mouseleave", handleMouseleave);

addEventListener -> user의 행동을 tracking&count해서 콘솔에 호출

mouseenter, mouseleave -> document () 로 콘솔에 다 불러온다음, ctrl+F로 찾고자 하는 기능을 드래그한다음에,

코딩할 때 타자로 치지 말고, 주의깊게 본 다음에 붙여넣기 해야, 오류가 생기지 않는다.   ㅠㅜ 

 

'Developer' 카테고리의 다른 글

CSS in JavaScript  (0) 2021.12.28
More Events  (0) 2021.12.28
serching for element 2  (0) 2021.12.28
Searching For Elements  (0) 2021.12.28
HTML in JavaScript (정말*100중요)  (0) 2021.12.28
반응형

위의 const와 아래 const는 동일한 역할을 수행하지만, query~함수가 좀 더 디테일하게  불러오는게 가능하다. 

 

'Developer' 카테고리의 다른 글

More Events  (0) 2021.12.28
Events  (0) 2021.12.28
Searching For Elements  (0) 2021.12.28
HTML in JavaScript (정말*100중요)  (0) 2021.12.28
The document object  (0) 2021.12.28
반응형

app.js:4 Uncaught TypeError: Cannot set properties of null (setting 'innerText')
    at app.js:4

에러발생 

 

 

innerText의 어떤 속성이 'null' 상태 임을 알려주고있다. 

 

여기서 헤멤 ,

const title = document.querySelector(".hello h1");

console.log(title);

app.js 에는 이렇게 적혀있는 상태. 

 

title === html의 element

document

querySelector === array 형태로 css 셀렉터처럼 사용할 수 있음, 간편하고 유용한 함수. 

class,id 전부 사용가능하며, class id를 앞에 쓰고 스페이스바 한번 띈다음에 해당 태그를 쓰면, 호출됨.

동일한 class가 있을 경우 1st element만 리턴함.

-> 해당하는 모든 태그를 호출하기 원하면 "querySelectorAll"함수를 사용한다.

".hello h1"

console.log(title);

 

 

 

 

'Developer' 카테고리의 다른 글

Events  (0) 2021.12.28
serching for element 2  (0) 2021.12.28
HTML in JavaScript (정말*100중요)  (0) 2021.12.28
The document object  (0) 2021.12.28
Contiditonals part Three..  (0) 2021.12.27
반응형
<h1 id= "title">Grab me!</h1>

이 코드를 html의 body태그에 추가한다.

 

js의 페이지에 다음 태그도 추가.

document.getElementById()

autofocus 

 

html에서 지정한 h1의 class네임이 dfdfsddfsdd 로 지정되어있고. id는 title 로 지정되어있다.

js파일에 

title 함수를 document.getElementById("title")

=== "html문서에서 요소 이름을 id에서 가져온다. 그리고 가져올 요소는 'title'이다" 

 지정해 준 뒤에

 console.log(title.id); === "title의 id를 호출"

console.log(title.className) === "title의 className을 호출"

'Developer' 카테고리의 다른 글

serching for element 2  (0) 2021.12.28
Searching For Elements  (0) 2021.12.28
The document object  (0) 2021.12.28
Contiditonals part Three..  (0) 2021.12.27
조건문 (conditionals) if-else  (0) 2021.12.27
반응형

console에서 오직 JS로 명령을 내려 할 수 있는 일은?

콘솔 > document.title 

       > "Momentum"  === 내가 html에 저장했던 이름 그대로 나옴

바꾸기 > document.title = "Hi"  ===> 타이틀을 바꿀수도 있다.

 (1) value 호출

 (2) change the value (document.kkk = 'lll')

(결론) JS에서 HTML을 호출 할 수 있을 뿐만 아니라, 바꾸는 것도 가능하다.

 

'Developer' 카테고리의 다른 글

Searching For Elements  (0) 2021.12.28
HTML in JavaScript (정말*100중요)  (0) 2021.12.28
Contiditonals part Three..  (0) 2021.12.27
조건문 (conditionals) if-else  (0) 2021.12.27
조건문 (conditionals) if-else  (0) 2021.12.27
반응형

연산자를 이용하여 조건을 다르게 지정해보자.

(1) boolean

(2) inNaN

(3) || (or)

(4) &&(and)

 

const age = parseInt(prompt("How old are you?"));


if (isNaN(age)||age<0) {
    console.log("Pleas write a  real positive number");
} else if (age < 18) {
    console.log("You are too young.");
}  else if (age>=18 && age<=50) {
    console.log("You can drink.");
} else if (age>50 && age<=80) {
    console.log("You have to  exercise");
} else if (age>80) {
    console.log("You can do whatever want.");
}

개쩌는 나이계산기...

 

 

const age = parseInt(prompt("How old are you?"));


if (isNaN(age)||age<0) {
    console.log("Pleas write a  real positive number");
} else if (age < 18) {
    console.log("You are too young.");
}  else if (age>=18 && age<=50) {
    console.log("You can drink.");
} else if (age>50 && age<=80) {
    console.log("You have to  exercise");
} else if  (age === 100) {
    console.log("wow, you are wise");
}
 else if (age>80) {
    console.log("You can do whatever want.");
}

'Developer' 카테고리의 다른 글

HTML in JavaScript (정말*100중요)  (0) 2021.12.28
The document object  (0) 2021.12.28
조건문 (conditionals) if-else  (0) 2021.12.27
조건문 (conditionals) if-else  (0) 2021.12.27
조건문 (conditionals) if-else  (0) 2021.12.27

+ Recent posts

티스토리툴바