오늘은 16일차! JavaScript 실습을 해볼게요!
<-실습1,2>
JavaScript를 실습해보는 시간이었어요!
코딩을 통해 바로 알아보도록 할게요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="white" onclick="alert('Hello World!')">
</body>
</html>
이렇게 코딩을 하게 되면 어떤 결과값이 나오는지 알아보겠습니다!
onclick 이벤트는 버튼을 클릭했을때의 반응을 나타내는 이벤트 입니다!
페이지의 화면은 white라는 value값을 가진 버튼이 생기게 되는데 이 버튼을 누르면
Hello World!라는 경고창이 뜨게 되는 input 태그를 만들어 보았습니다!
이번에는 사용자가 입력한 값을 경고창으로 가져오는 것을 해보도록 할게요!
우선 코딩을 해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="user_input" />
<input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
</body>
</html>
결과값 알아보도록 할게요~
앞에 input태그는 type을 text로 하고 id의 값을 user_input으로 받았습니다.
text로 type을 설정했기 때문에 네모난, 사용자가 무언가를 쓸 수 있는 네모 박스가 나오게 됩니다.
그리고 white 버튼을 클릭하면 어떤 결과가 나오는지 보도록 하겠습니다!
빈칸인 네모 박스에 Hello라고 치고 white 버튼을 누르자
경고창이 나오면서 Hello가 나오게 됩니다.
document.getElementById().value 는 이럴때 쓰는 것이라고 합니다!!
<실습3>
바로 코딩해보도록할게요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li{
color:blue;
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ul>
<li>최재성</li>
<li>Jacob</li>
<li>안녕하세요</li>
</ul>
</body>
</html>
이런 코드에서 시작해 볼텐데요
head태그 안에서 style을 정의 하는데요 li의 모든 스타일을 파란색으로 바꾸었습니다.
그럼 결과화면은 어떻게 나오게 될까요...?
모든 li태그의 값들이 파란색으로 바뀌었습니다!
그럼 이제 버튼을 새로 만들어 다시 검정색으로 만드는 것을 해보도록 하겠습니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<ol id="black">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ul>
<li>최재성</li>
<li>Jacob</li>
<li>안녕하세요</li>
</ul>
<input type="button" value="파랑" onclick="document.getElementById('black').className='blue'">
</body>
</html>
이 코드를 보도록 하겠습니다.
여기선 다시 검정색으로 바꾸고 ol태그의 ID값을 black으로 지정합니다.
그리고 input태그 안에서 id가 black인 것을 클래스의 네임을 blue로 지정하는 제어 버튼을 만듭니다.
결과화면 바로 보도록 할게요
위 그림과 같이 있던것이 '파랑' 이라는 버튼을 누르게 되면 id값을 black으로 지정한 것만 클래스이름이 지정되면서
ol태그만 파란색으로 바뀌게 됩니다~!
댓글