만들 웹 페이지.
while를 누르면 화면이 하얗게
black을 누르면 화면이 검게
실습 1. 버튼넣기
버튼을 넣기 위해 필요한 코드
<input type="button" value="while" />
- 여기서 마지막 / => 끝나는 태그가 없는 태그에서는 닫는 괄호에 /를 붙여도 되고 안 붙여도 된다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="white" />
</body>
</html>
type을 text로 바꾸면
type을 checkbox로 바꾸면
prompt와 alert
<script>
alert("hello world");
</script>
prompt는 입력을 받는 것 까지 포함이지만 alert는 창만 보여준다.
prompt와 alert는 script 코드 안에서 사용되지만 HTML 코드에서 사용할 수도 있다.
<input type="button" value="white" onclick="alert('Hello world')/>
==> white를 누르면 Hello world가 나온다.
text 타입에서 활용
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="white" onclick="alert('Hello world')"/>
<input type="text" onfocus="alert('focus')" onblur="alert('blur')"/>
</body>
</html>
text창을 눌러 입력이 시작되기 전에 focus 라고 나오고 입력이 끝나면 blur 라고 나온다 .
실습 2. 왼쪽 빈칸에 입력한 내용이 white 버튼을 누르면 alert 창으로 나오게 하기
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" />
<input type="button" value="white" onclick="alert('Hello world')"/>
</body>
</html>
alert 괄호 안에 들어가야 할 내용은 ?
위의 input에 id 값을 정해주고
괄호 안에는 id값을 나타내는 태그를 입력하면 된다.
=> getElementById 이용 (Element == 태그와 같은 의미로 사용된다)
getElementById => document안에 들어가 있다.
작성해야 하는 코드
<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'))"/>
</body>
</html>
이렇게 나온다.
끝에 .value를 추가하면
추가한 코드
<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>
제대로 출력된다.
- Ctrl + Alt + 우 화살표 => 편집하는 곳으로 바로 이동한다.
복습겸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
</style>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
</body>
</html>
여기서 html과 최유빈 에만 밑줄을 긋고 싶다면?
=> 그 두 개의 것을 그룹핑(class로 지정하는 것) 하면 된다.
<ol>
<li class="em">html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li class="em">최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
여기서 em은 임의로 지정한 것이다.
CSS에서 설정은
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
text-decoration:underline;
}
</style>
.은 class를 선택할 수 있게 해주는 것.
실습 3. 강조 버튼을 가장 아래에 만들어서 강조 버튼을 누르면 ol부분에 밑줄이 그어지게 만들기
- ol에 id값을 준다.
- input에서 이전에 배웠던 것처럼 document.getElementById('id값')을 작성한다.
- 그 바로 뒤에 .classname='em'을 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
text-decoration:underline;
}
</style>
</head>
<body>
<ol id="target">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
<input type="button" value="강조" onclick="document.getElementById('target').className"/>
</body>
</html>
- 개발자도구는 F12
'웹 프로그래밍' 카테고리의 다른 글
| PHP 실습 (0) | 2017.12.22 |
|---|---|
| JavaScript 실습 (0) | 2017.12.21 |
| UI vs API (0) | 2017.12.19 |
| 함수 (0) | 2017.12.19 |
| 자바스크립트, PHP로 로그인 기능 구현하기 (0) | 2017.12.19 |