들어가기 전에
Javascript는 웹페이지에서 어떤 역할을 할 수 있을까요? Javascript를 이용한 동적인 웹페이지를 직접 살펴보면서 알아봅시다.
학습 목표
웹페이지에서 Javascript의 역할을 이해할 수 있습니다.
핵심 단어
- Javascript
- 동적
강의 듣기
2. 수업의 목적
Javascript의 역할
Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것입니다. 아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 그 예시이죠.
어떻게 이러한 기능이 가능한 것일까요? 직접 이 페이지를 살펴보면서 알아봅시다.
(실습) Javascript 살펴보기
(크롬 기준으로) 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 됩니다. 여기에서 Elements 탭을 보면, 페이지를 구성하는 HTML 태그들이 나와 있습니다.
이제 직접 night/day 버튼을 눌러보세요. 누를 때마다 body 태그의 style 속성이 바뀌는 것을 볼 수 있을 겁니다.
그렇다면 이제 이 버튼을 한 번 살펴봅시다. 버튼은 type이 button인 input 태그로 이루어져 있습니다. value는 버튼의 이름을 나타냅니다. 그리고 onclick이라는 속성에 바로 javascript가 들어가게 됩니다. 즉, 이 버튼을 누르면 이 javascript 코드가 실행되는 것이죠.
적혀있는 코드를 간단히 살펴봅시다. onclick에는 이런 javascript 코드가 적혀있습니다.
document.querySelector('body').style.backgroundColor='black'이 코드를 쉽게 풀어봅시다. 먼저, 문서(document)에서 body라는 태그를 선택(Selector)합니다. 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정한다는 뜻입니다.
이렇게 부여된 속성값은 아까 살펴봤듯이 body 태그의 style 속성으로 들어갑니다. 이 style 속성은 CSS입니다. CSS란 디자인하는 언어입니다. 지금은 CSS에 대해서 몰라도 괜찮으니 걱정마세요.
정리하기
Javascript는 사용자와 상호작용 하는 언어입니다. 그리고 우리는 실습을 통해서 어떻게 이러한 일이 가능한지 살펴보았습니다. 웹 브라우저는 한 번 출력되면 바뀔 수 없지만, Javascript 코드에 따라서 style 속성이 추가되면서 디자인이 바뀌는 것입니다.
이러한 Javascript의 특성을 이용해서 우리는 웹페이지를 더 동적으로 만들 수 있습니다.
생각해보기
1) night 버튼을 눌렀을 때 배경이 검은색이 아닌 회색으로 바뀌도록 만들고 싶다면, 어떻게 하면 될까요?
comment
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.background-color:white;로 Javascript 코드를 수정해주면 된다.
이때 document.querySelector('body')는 어떤 대상을 선택할지에 대한 선언이고,
.style.background-color는 대상의 어떤 속성 중 어떤 특성을 바꿀지에 대한 선언이다.
<input="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='gray'
">
<input type="button" value = "night" onclick="
document.queryselector('body').style.backgroundColor='gray'
">
douument.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.bagroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
document.querySelector('body').style.backgroundColor='gray'
위와 같이 설정한다.
document.querySelector('body').style.backgroundColor='grey'
스타일 배경을 gray로 하면 될까요?
<input type="button" value="night" onClick=
"document.querySelect('body').style.backguroundColor='gray';
document.querySelect('body').style.color='white';
"
>
black -> gray
댓글을 반드시 달아야해서 다들 다는건가요? 아니면 자기 연습을 위해서?
<input type="botton" value= "night"
onclick="document.querySelector('body').style.background='grey';
document.querySelector('body').backgroundColor='white';
">
black 을 찾아서 gray로 수정.
<input type "botton" value "night" onclick="
document.querySelector(‘body’).style.backgroundColor=‘gray’;
document.querySelector(‘body’).style.backgroundColor=‘white’;
">