버튼을 클릭했을 때 배경색 및 글자 색상이 변경되도록 하겠습니다.
예시 기본 코드를 먼저 작성합니다.
<html>
<head>
<title> JavaScript </title>
<meta charset="utf-8">
</head>
<body>
<h1> HEAD TEXT </h1>
<input type="button" value="night">
<input type="button" value="day">
<p> JavaScript is so useful. I really want to know how to use it. </p>
</body>
</html>
html onclick 속성 property를 추가 후 자바스크립트를 작성합니다.
버튼을 클릭하는 동적인 상황을 우선 설정해야 합니다. onclick 속성의 값 value는 자바스크립트 문법에 따라 서식을 적용해야 합니다. 웹 페이지에서 자바스크립트 JavaScript 문법으로 서식을 적용할 부분을 선택합니다. 웹 페이지 전체 본문에 대한 내용에 적용할 것이기 body태그를 선택합니다. 문서에서 지정한 부분을 선택하라는 자바스크립트 명령어는 document.querySelector('지정할 부분')입니다. query는 질의하다는 내용입니다.
Selector는 CSS 문법의 선택자를 의미합니다. Selector를 통해 태그를 지정할 때는 querySelect('태그 이름') 양식을 사용합니다. id를 지정할 때는 querySelector('#id 이름') 양식으로 # 기호를 씁니다. 클래스를 선택할 때는 querySelect('. 클래스 이름') 양식으로 period [. ]을 넣어 코드를 작성합니다.
document.query.Selector('body')에 자바스크립트 문법에 따라 배경색의 서식을 검은색으로 적용하는 명령을 작성합니다.
night 버튼에 우선 서식을 적용하겠습니다. 만약 css에서 body 태그에 배경색을 적용하기 위해 스타일을 추가해 사용한다면 <body style="background-color:black;">으로 적용해야 합니다. 자바스크립트에서는 css와 다른 문법 체계를 갖고 있기 때문에 다음과 같이 작성합니다. querySelector('body'). style.backgroundColor='black'; 자바스크립트는 대문자와 소문자를 확실히 구별하여 작성해야 합니다. 동일한 방식을 사용해 글자색에 대한 서식을 추가하겠습니다. querySelector('body'). style.color='white'; 양식으로 작성합니다. day 버튼에는 night 버튼에 적용한 서식과 반대의 내용으로 배경색은 흰색, 글자색은 검정으로 적용합니다.
<html>
<head>
<title> JavaScript </title>
<meta charset="utf-8">
</head>
<body>
<h1> HEAD TEXT </h1>
<input type="button" value="night" onclick="
document.querySelector('body'). style.backgroundColor='black';
document.querySelector('body'). style.color='white';
">
<input type="button" value="day" onclick=">
document.querySelector('body'). style.backgroundColor='white';
document.querySelector('body'). style.color='black';
">
<p> JavaScript is so useful. I really want to know how to use it. </p>
</body>
</html>
'코딩' 카테고리의 다른 글
| JavaScript 자바스크립트 조건문 if else 기본 원리 (0) | 2020.09.06 |
|---|---|
| Comparison operators 비교연산자와 데이터타입 (Number 숫자열, String 문자열, Boolean 불리언) (0) | 2020.09.05 |
| 자바스크립트 JavaScript alert 이용해 경고창 만들기 (0) | 2020.09.03 |
| html script 스크립트 태그로 자바스크립트 JavaScript 사용하기 (0) | 2020.09.03 |
| html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법 (0) | 2020.09.02 |
댓글