생활코딩 : JS 정리 -4. 이벤트 태그 (by 웹 어플리케이션 만들기)

JS 이벤트 태그                                  -HTML tag                      -JS tag

• prompt("hello world");             
• alert("hello world");                      :알림창 API. <script>태그 안에 있을땐 그냥JS 태그이다.

 

• <input type="button" value="white" onclick="alert('Hello world')">                                           : <input> 태그 안에 들어오면 onclick은 이벤트 태그가 된다. alert은 HTML태그 안에 넣을 수 있다.
• <input type="text" value="white" onfocus="alert('Hello world')" onblur="alert('Hello world')">

 

• onclick : 클릭하는 이벤트
• onfocus : 커셔 갔다대는 이벤트
• onblur : 다른곳에 갔다대는 이벤트

 

• <input type="text" id="user_input">
• <input type="button" value="white" onclick="alert(document.getElementById('user_input').value)">   : text창에 내가 원하는 글을 쓰고, 버튼을 누르면, 알림으로 그 글이 나오는 코드이다.

 

• getElementById : 아이디를 통해 태그를 가져온다 는 뜻.
• document. : 함수 분류 태그
• .value : 값을 표시하는 태그
• id="user_input" : <input type="text">의 아이디를 유저인풋으로 설정한다는 뜻

 

• <style>

      .em{

        text-decoration:underline;

      }

  </style>

 

• <ol id="target">

      <li>html</li>

      <li>css</li>

      <li>javascript</li>

</ol>

• <input type="button" value="강조" onclick="document.getElementById('target').className='em'">
• 버튼을 누르면 지정한 class값에 해당하는 부분에 강조가 되는 코드이다.

 

• .className='em' : (id값이 target인 태그에) 클래스의 값인 em을 적용한다는 태그