동적으로 활용
JavaScript를 이용하여 HTML을 동적으로 사용해 보자.
저번에 배웠던 event에서 버튼을 만들어 활성화시키는 것을 배웠다. 그 버튼을 활성화시켜 동적으로 사용할 수 있게 해 보았다.
먼저 <body> 태그 안에서 JavaScript를 통해 버튼을 활성화시켜보자.
<body>
<input type="button" value="1">
<input type="button" value="2">
</body>위와 같은 예제로 버튼 1번과 버튼 2번이 웹브라우저에 만들어지게 된다. 여기서 버튼 1번을 누르면 웹브라우저에 바탕색과 또는 나타나 있는 텍스트의 색상이 변하도록 해보았다. 그럼 먼저 웹브라우저에서 인식을 하도록 하기 위해 저번 시간에 배웠던 CSS의 선택자를 이용해보았다.
<body>
<input type="button" value="1" onclick="
document.querySelector('body').style
">예제의 방법으로 document.queryselector('body')를 적용하게 되면 파일 내에 body라는 태그를 선택한 것으로 인식하게 만들어준 뒤. sytle이라는 속성을 JavaScript로 적용하고 제어가 가능해진다.
그럼 JavaScript로 바탕색을 어떻게 변경시킬 수 있을까?
<body>
<input type="button" value="1" onclick="
document.querySelector('body').style.backgroundColor='gray';
">다음과 같이 . style 속성에 .backgroundColor 즉 CSS에서 background-color였던 속성 값이 JavaScript에서는 backgroundColor로 사용된다는 걸 알 수 있다. 그 뒤에 원하는 색상을 입력하면 버튼을 눌렀을 때 웹브라우저의 바탕색을 제어할 수 있다.
지금은 정말 간단하게 만들어 보았지만 CSS의 선택자와 JavaScript의 속성 값을 사용하므로 차후 웹 개발하는 데에 동적인 제어를 처리할 수 있게 해주는 아주 유용한 기능인 것 같다.
'TIL > Javascript' 카테고리의 다른 글
| /JavaScript/조건문 형식 (0) | 2021.12.23 |
|---|---|
| /JavaScript/비교 연산자,boolean (0) | 2021.12.22 |
| /JavaScript/CSS활용 (0) | 2021.12.20 |
| /JavaScript/웹 브라우저 제어 (0) | 2021.12.19 |
| /JavaScript/변수,대입 연산자 (0) | 2021.12.18 |
