3.22 자바스크립트2

카테고리 없음

3.22 자바스크립트2

문앵 2021. 3. 22. 11:45

<body>

ele= document.querySelector('#root');

ele.innerHTML= "Hello, World!";

</script>

</body>

------------------------------------------------------

document.querySelector('#root');

root에 해당하는 div값을 ele라는 변수에 넣어라.

같은 말로

document.getElementById('root')'

가 있음.

------------------------------------------------------

*객체

()= 함수, 다른말로 매서드

'=' = 속성

'.'의 의미는 안에 있는 엘리먼트라는 뜻. 예를 들어

document.querySelector 가 있으면 document 안에 querySelector가 있는것임.

이걸 HTML 로 표현 하자면

</querySelector>

</document>

어떤 엘리먼트 안에 어떤 속성값이 있는지를 많이 알수록 좋다.

---------------------------------------------------------

console.log(str.length); 라고 하면

str라는 변수의 글자 길이를 알려줌

str = 안녕하세요; 라고 하면

console.log(str.length);는 5가 나옴 ( 5글자)

---------------------------------------------------------

<body>

<div id= "root">Hello, world!</div>

ele = document.querySelector('#root');

ele.style.color='red';

</script>

</body>

버튼을 클릭했을 때 버튼 글자 색을 파란색으로 바꿔라.

원래 색은 빨간색임. 왜냐면

ele = document.querySelector('#root');

ele.style.color='red';

로 전체 div안에 있는 color를 빨간색으로 줬기 때문..

------------------------------------------------------------

함수는 쓴다고 바로 실행되는게 아니라 호출해야 실행된다. 함수를 저장해놨다가 나중에 호출시키면 그때서야 실행시킬 수 있음.

호출은

해당 함수를 한번 더 쓰고 세미콜론

changecolor();

==>체인지 컬러 함수를 호출해라는 뜻.

<body>

<div id= "root">Hello, world!</div>

ele = document.querySelector('#root');

ele.style.color='red'

function changeColor(){

ele= doument.querySelector('#root');

ele.style.color='blue'

}

changeColor();

</script>

버튼을 클릭했을때 체인지컬러 함수를 호출(파란색으로 바꿔)해라.