#2.16~3.2

Recap

if else 연산자 만들기 예시

const a= parseInt(prompt("enter first number"));
const b= parseInt(prompt("enter 2nd number"));
const operator = prompt('Enter operator to perform the calculation ( either +, -, * , /, ** ): ');
let result;
if(operator=='+'){
result=a+b;
} else if (operator=='-'){
result=a-b;
} else if (operator =='*'){
result=a*b;
} else if (operator=='/'){
result=a/b;
} else if (operator== '**'){
result= a**b;
}
window.alert(" Result is " + result);

JAVASCRIPT ON THE BROWSER

The Document Object

HTML이 CSS와 JS를 가져온다.
JS를 사용하는 이유는 HTML과 상호작용하기 위해서.
→ 즉, 마치 object에서 property를 바꾸는 것 처럼 HTML의 Element들을 JS로 변경하거나 가지고 올 수 있다.
Console에서 HTML 코드를 JS 관점에서 보고있다.

document - 모든 것들의 시작점이다.

HTML in Javescript

GPT선생님이 알려주신 JavaScript을 사용하여 스타일 수정하는 장점.

JavaScript를 사용하여 스타일을 수정하는 것이 CSS를 사용하는 것보다 불편하다는 것은 맞습니다. 그러나 JavaScript를 사용하여 스타일을 수정하는 것에는 몇 가지 장점이 있습니다.

1.동적인 스타일링
CSS는 정적인 스타일링을 제공합니다. 즉, CSS는 웹 페이지가 로드될 때 설정된 스타일을 적용합니다. 그러나 JavaScript를 사용하면 웹 페이지가 로드된 이후에도 동적으로 스타일을 변경할 수 있습니다. 이를 통해 웹 페이지의 상호작용성을 높일 수 있습니다.

2.조건부 스타일링
JavaScript를 사용하면 특정 이벤트(예: 버튼 클릭)가 발생하거나 특정 조건(예: 사용자가 로그인했는지 여부)이 충족될 때 스타일을 변경할 수 있습니다. 이를 통해 조건부 스타일링을 할 수 있으며, 이는 웹 페이지의 사용자 경험을 개선하는 데 도움이 됩니다.

3.동적으로 생성되는 요소 스타일링
JavaScript를 사용하여 동적으로 요소를 생성할 수 있습니다. 이 경우에는 CSS를 사용하여 스타일을 적용할 수 없으므로 JavaScript를 사용하여 동적으로 생성된 요소의 스타일을 변경해야 합니다.

4.JavaScript 코드와 CSS 스타일 코드를 통합할 수 있음
JavaScript를 사용하여 동적으로 스타일을 변경할 때, 스타일 코드와 JavaScript 코드를 통합하여 작성할 수 있습니다. 이 경우에는 스타일 코드와 JavaScript 코드를 별도로 유지보수하는 것보다 코드의 일관성을 높일 수 있습니다.

따라서 JavaScript를 사용하여 스타일을 수정하는 것은 불편하지만, 동적인 스타일링, 조건부 스타일링, 동적으로 생성되는 요소 스타일링, 코드 일관성 향상 등의 장점이 있습니다.

Searching For Elements

getElementById : html과 js에서 id값이 같지 않다면 작동 x
getElementByClassName : classname이 같아야 작동
getElementBytagName : tag(anchor, div, section, button 같은것)

querySelector :element를 css 방식으로 검색 할 수 있다.
무슨 말이냐면 hello란 class 내부에 있는 h1을 가지고 올 수 있다는 것을 의미 (css selector)

ex) querySelector(".hello h1");

같은 h1이 수십개가 있더라도 오직 첫번째것만 가져온다.
querySelectorAll : selector 안의 조건에 부합하는 모든 element를 가져온다.