Java Script : 객체 지향 프로그래밍 언어 운영체제에 독립적임.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></<title>
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write('1+1');
</script>
<h2>html</h2>
1+1
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></<title>
</head>
<body>
<h1>JavaScript</h1>
<script> : 자바 스크립트 시작 태그
document.write('1+1');
</script>
<h2>html</h2>
1+1
</body>
</html>
* 자바의 값은 2 , html은 그대로 1+1이다. 여기서 자바스크립트가 더 유연하다는 것을 알수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></<title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></<title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
</html>
*onclick 속성의 속성값 alert('hi')은 반드시 자바스크립트 이어야 한다.
>>웹브라우저가 속성값을 기억하고 있다가 onclick 속성이 위치하고 있는 태그에 사용자가 클릭했을때, 기억하고 있던 자바스크립트 코드를 자바스크립트의 문법에 따라 해석해 웹브로우저가 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</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>
* input type="button" : 버튼생성
input type="text" : 텍스트 입력칸 생성
** onclick, onchange, onkeydown : event
웹페이지 검사기능 이용, 콘솔이용해서 코드를 넣으면 현재의 웹페이지에서도 가능하다.
나의 현실의 문제를 가볍게 해결할수 있는 방법을 찾아보자
'cording > 생활코딩' 카테고리의 다른 글
| [Java Script] 웹브라우저 제어 (0) | 2022.03.03 |
|---|---|
| [Java Script] 자바스크립트 데이터 타입 (0) | 2022.03.03 |
| [CSS] 코드의 간결화 (0) | 2022.03.02 |
| [CSS] 미디어 쿼리 적용해보기 (0) | 2022.03.02 |
| [CSS] Grid 그리드 활용하기 (0) | 2022.03.01 |
