TIL 0409

오늘 목표

파이썬 ch.3
javascript 크롬 프로젝트 연습 챕터 완료 🙆‍♀️
javascript 크롬 프로젝트 making 시작
javascript 예제 Comparison with the less than or equal to operator 까지 🙆‍♀️
javascript 예제 Using objects for lookups 까지

오늘 공부한 것

Javascript

typeof 를 이용해 숫자를 문자로 문자를 숫자로 바꿀 수 있다
== 는 타입이 다른 두 값을 비교할때면 같게 바꾸어 비교한다
=== 는 타입이 다르면 == 와는 다르게 값을 변환하지 않는다

function compare(a) {
	if (a == 12) {
    	return "Yes";
    }
    return "No";
}
compare("12");
// "Yes"
function compare(a) {
	if (a === 12) {
    	return "Yes";
    }
    return "No";
}
compare("12");
// "No"

!= 와 !== 는 값을 반대로 나타낸다 하지만 != 는 == 처럼 다른 타입은 변환하여 비교한다 !== 는 타입을 변환하지 않는다
그 외로 >,<,<=,>= 가 있다
&& 는 두 조건 모두 true 여야 하고 || 는 둘 중 한개만 true 이면 된다

// 골프 게임 예제
var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];
function golfScore(par, strokes) {
  // Only change code below this line
  if (strokes === 1) {
    return names[0];
  } else if (strokes <= par - 2) {
    return names[1];
  } else if (strokes == par - 1) {
    return names[2];
  } else if (par == strokes) {
    return names[3];
  } else if (strokes == par + 1) {
    return names[4];
  } else if (strokes == par + 2) {
    return names[5];
  } else {
    return names[6];
  }
  return "Change Me";
}
golfScore(5, 4);

프로젝트

querySelector 로 html 에서 필요한 요소를 찾는다

const title = document.querySelector("#title"); //id 가 title 인 요소
const title = document.querySelector(".title"); //class 가 title 인 요소

contains(string) value 가 존재하는지 체크한다
toggle(string) () 안에 있는 요소가 없으면 add 있으면 remove
.addEventListener("a", 함수) a 라는 이벤트가 생기면 함수를 실행

html 은 html 파일에서 css 는 css 파일에서 javascript 는 javascript 파일에서 하는 게 좋다

**text 클릭 시 color 변경**
const title = document.querySelector("#title");   
// text id 값 가져와서 title 에 담기
const CLICKED = "clicked";   
// 변경 될 style 을 가진 class 명 CLICKED 에 담기
function changeColor() {
    title.classList.toggle(CLICKED);   
    // title 의 class 에 "clicked" 가 없으면 add 있으면 remove
}
function textClick() {
    title.addEventListener("click", changeColor);   
    // title 에 click 이벤트가 실행되면 changeColor  함수 실행 
} 
textClick();

어려웠던 부분

보면 이해할 수 있는데 막상 직접 쳐보려니 헷갈리는 부분이 많았다 class 나 id 를 가져오는 것 등 강의를 듣는것도 중요하지만 직접 많이 해보며 익숙해져야겠다