자바스크립트 2.5~2.7

if(10 > 5) {
    console.log("hi");
} else {
    console.log("ho");
}

결과
hi

if(10 === 5) {
    console.log("hi");
} else {
    console.log("ho");
}

결과
ho

why?10과 5는 같지 않기 때문에 else값 ho가 출력

if조건은 항상 참이여야됨.

if("10" === 10) {
    console.log("hi");
} else if ("10" === "10") {
    console.log("lalala");
} else {
    console.log("ho");
}

결과
lalala

피연산자 : 다른 조건들을 합치게 하는 것

if(20 > 5 && "hi" === "hi") {
    console.log("yes");
} else {
    console.log("no");
}

결과
yes

&& = and ( 둘 다 참이여야만 실행함 )
|| = or ( 둘중에 하나만 맞아도 실행함 )

const age = prompt("how old are you");

if(age >= 18 && age <=21) {
    console.log("you can drink but you should not");
} else if (age > 21) {
    console.log("go ahed");
} else {
    console.log("too young");
}

참고 : prompt는 진짜 옛날 자바스크립트야 진짜 개구린거임 쓰지마.

html

css

javascript

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";


function handleClick() {
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
        title.style.color == OTHER_COLOR;
    } else {
        title.style.color == BASE_COLOR;
    }
}


function init(){
    title.style.color = "BASE_COLOR";
    title.addEventListener("click", handleClick);
}
init();

이렇게하면 글자 클릭할때마다 색상이 바껴야되는데 나는 안됨........(해결못함)
해결완료!!!!

== 이거를 =이렇게 바꿔야됨....

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";


function handleClick() {
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
        title.style.color = OTHER_COLOR;
    } else {
        title.style.color = BASE_COLOR;
    }
}


function init(){
    title.style.color = "BASE_COLOR";
    title.addEventListener("click", handleClick);
}
init();

이렇게하면 해결완료

결과

click을 mouseenter로 바꾸면 마우스를 올릴때마다 색이 바뀌게됨
이런 효과들은 어디에서 볼 수 있나
html javascript DOM event MDN 검색 고고

난 자바스크립트가 웹사이트의 스타일을 처리하는걸 원하지 않아

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS) {
        title.className = CLICKED_CLASS;
    } else {
        title.className = "";
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

결과

근데! 여기서 실패를 보여줄게

html

<!DOCTYPE html>
<html>
  <head>
    <title>somthing</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="title" class="btn">this works!</h1>
    <script src="script.js"></script>
  </body>
</html>

css

body {
  background-color: #ecf0f1;
}

.btn {
  cursor: pointer;
}
h1 {
  color: #34495e;
  transition: color 0.5s ease-in-out;
}

.clicked {
  color: #7f8c8d;
}

javascript

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS) {
        title.className = CLICKED_CLASS;
    } else {
        title.className = "";
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

결과
클릭하는순간 마우스 포인트가 손모양으로 안나타나고 사라져버려

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS) {
        title.classList.add(CLICKED_CLASS);
    } else {
        title.classList.remove(CLICKED_CLASS);
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

이렇게 변경하면 눌러도 마우스 포인트가 유지되지만 다시 클릭한다고해서 색상이 바뀌진 않음
더이상 뒤로 돌아가지 않아.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(hasClass) {
        title.classList.remove(CLICKED_CLASS);

    } else {
        title.classList.add(CLICKED_CLASS);
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

이러면 잘됨

결과

toggle은 우리가 여기서 했던 모든걸 요약하는 거야

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    //클래스가 없으면 add 있으면 remove
    title.classList.toggle(CLICKED_CLASS);
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

결과는 위와 같아.

Author And Source

이 문제에 관하여(자바스크립트 2.5~2.7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@123cjstj/자바스크립트-2.5

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

자바스크립트 2.5~2.7

Author And Source

좋은 웹페이지 즐겨찾기