cording/생활코딩

[Java Script] HTML 과 JS 태그, 이벤트

효기롭다 2022. 3. 2. 22:06

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

 


웹페이지 검사기능 이용, 콘솔이용해서 코드를 넣으면 현재의 웹페이지에서도 가능하다.

나의 현실의 문제를 가볍게 해결할수 있는 방법을 찾아보자