실습1
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="white" onclick="alert('Hello World')"/>
<input type="text" onfocus="alert('focus')" onblur="alert('blur')"/>
</body>
</html>
-onclick이벤트: 클릭시 발생하는 이벤트
-onfocus: 마우스 클릭 했을 때
-onblur: 클릭 전 기본 세팅
실습2
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="user_input"/>
<input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
</body>
</html>
사용자가 onclick을 눌렀을 때, id가 user_input인 element값이 화면에 출력된다.
<결과>
실습3
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
text-decoration:underline;
}
</style>
</head>
<body>
<ol id="target">
<li class="em">html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul class="em">
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
<input type="button" onclick="document.getElementById('target').className='em'" name="" value="강조">
</body>
</html>
id가 target인 값을 가져와서 클래스이름을 em으로 지정해준다. 클릭하게 되면 클래스이름이 em인 속성에 해당하는 디자인인 밑줄효과가 나타나게 된다.
css가 html을 디자인하는것이라면 javascript는 html을 제어하는것이라고 할 수 있다.
'생활코딩 > 웹어플리케이션 만들기' 카테고리의 다른 글
| [생활코딩/웹어플리케이션] 라이브러리 (0) | 2019.03.12 |
|---|---|
| [생활코딩/웹어플리케이션] 데이터베이스(MySQL) 이론 (0) | 2019.03.12 |
| [생활코딩/웹어플리케이션] UI vs API (0) | 2019.03.05 |
| [생활코딩/웹어플리케이션] JavaScript vs PHP 함수 (0) | 2019.03.05 |
| [생활코딩/웹어플리케이션] JavaScript vs PHP 배열과 반복문 (0) | 2019.03.05 |