728x90
반응형
1. WRITE
먼저 html과 js의 쓰기 법이 차이이다.
아래의 코드를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML, JS WRITE</title>
</head>
<body>
<h1>HHJ</h1>
<script>
document.write(5+5);
</script>
<h1>JS</h1>
5+5
</body>
</html>글자를 쓰면 html, js가 둘다 비슷하다.
만약 x+y처럼 산수를 하면 두 결과가 다르다.
위를 보면 js에서는 document.write(5+5);를 하면 동적이라서 5+5를 한 값 즉 10이 나온다.
하지만 html은 정적이라서 5+5를 쓰면 '5+5'라고 그대로 나온다.
2. event
js에는 event라는 것이 있다. 무언가를 동작하면 어떤걸 동작하게 하는 것이다.
이벤트는 대략 10~20개 정도의 이벤트가 정의 되어있다.
예를 들면 onclick(), onchange(), oninput()등이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event</title>
</head>
<body>
<input type="button" value="HHJ" onclick="alert(1)">
<input type="text" onchange="alert('change')">
<input type="text" oninput="alert('input')">
</body>
</html>event안에는 무조건 js가 들어가야 한다.
위를 실행하고 버튼을 누르면 1를 알람, 첫번째 text에 무언가를 넣고 다른 데를 클릭하면 change알람, 두번째 박스에 무언가를 쓰면 input이 뜬다.
3. console
웹페이지에 가서 개발자도구를 열면 콘솔이 있을것이다.
그걸 이용하여 자기가 개발하지 않은 사이트에서도 여러가지로 자료를 정리하거나 손쉽게 확인할 수 있다.
728x90
반응형
'Web' 카테고리의 다른 글
| SQL injection이란? (with Dreamhack) (0) | 2022.02.28 |
|---|---|
| Dreamhack - Flask-Dev (write-up) (0) | 2022.01.01 |
| Dreamhack - file-csp-1 (write-up) (0) | 2022.01.01 |
| Dreamhack(Wargame.kr) - Login filtering (0) | 2022.01.01 |
| Dreamhack - simple-ssti(Write-up) (0) | 2021.12.29 |