1. html과 javascript 차이
html의 경우 1+1을 그대로 출력하지만, javascript의 경우 계산 결과인 2를 출력한다
=> 동적이다
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<h1>javasvript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>
</html>
2. event
2-1. onclick: click하는 경우 실행
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
</html>
2-2. onchange: 변화가 있는 경우 실행
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
</body>
</html>
2-3. onkeydown: 키보드를 누르는 경우 실행
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')"
</body>
</html>
'웹프로그래밍' 카테고리의 다른 글
| 스프링부트3 백엔드개발자되기 자바 편 (0) | 2024.10.24 |
|---|---|
| [javascript] 1~4 (0) | 2023.06.18 |
| [CSS] 다양한 레이아웃의 구성과 기능 (0) | 2023.05.27 |
| [CSS] css 속성 (0) | 2023.05.21 |
| [CSS] 기초 선택자와 단위 (0) | 2023.05.14 |
