죠노이 노트

[js] jquery로 hover 상태일때 다루기

개발/[언어] JS2016. 11. 23. 00:01 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>
 
</body>
</html>


내가 쓴 예시


1
2
3
4
5
6
7
8
9
      <script>
      
      $("#request_mode_index").hover(function(){
        document.getElementById("request_mode_blur").style.display="inline";
      },function(){
        document.getElementById("request_mode_blur").style.display="none";
      });
      
      </script>
cs

출처 = https://api.jquery.com/hover/

'개발 > [언어] JS' 카테고리의 다른 글

[js] HTML에서 JavaScript 로드하기  (0) 2016.11.05

[js] HTML에서 JavaScript 로드하기

개발/[언어] JS2016. 11. 5. 17:42

HTML에서 JavaScript 로드하기



1) inline 방식


inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.


<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>


onclick="alert('Hello world')" : js의 이벤트를 부른다.


onclick, onchange 등등 값이 변했을때 반응하는 inline의 속성이다.


단점 : 정보 + 제어가 짬봉 되어있다. -> 코딩하는 사람의 입장에서 유지보수가 어렵다.


이문제 해결하는 방법 -> script tag!



2)Script


<script></script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식이다. 장점은 html 태그와 js 코드를 분리할 수 있다는 점이다


<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript"> <- HTML5 부터 text/javascript 없이 사용가능
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>



3)외부 파일로 분리


s를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="script2.js"></script>
</body>
</html>

script2.js

1
2
3
4
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})


장점 : 유비 보수가 용이하다. (여러 html이 사용하는 js 하나만 고칠경우 다 고쳐지기 때문이다.)

캐쉬를 사용하기 때문에 속도 빠르고, 전송량 경량!



4)Script 파일의 위치


script를 head 태그에 위치시킬 수도 있다. 하지만 이 경우는 오류가 발생한다.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<script src="script2.js"></script>
</head>
<body>
<input type="button" id="hw" value="Hello world" />
</body>
</html>

아래와 같이 script2.js의 코드를 수정해야 한다.

1
2
3
4
5
6
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}

window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수다. 이러한 것을 이벤트라고 하는데 이벤트는 뒤에서 배울 것이다.


자바스크립트의 특징 - 발견 시 바로 다운받는다 그 후 나머지내용 쭉 실행한다. 자바스크립트 파일의 코드는 head에서 호출시 hw아이디값을 가지고 있는것을 조회 아직 밑의 hw를 인식하지 못함 그래서 id = "hw" 값을 해석하기 전이다. 그래서 헤드의 hw는 null 값을 가지고 있다.

window.onload = function(){} 를 사용하여 헤드에서 사용해야한다. 


바디 제일 아래에 해줄경우 window.onload를 사용할 필요가 없어진다. 

성능 자체도 바디 제일 아래 하는것이 더 빠르다. 이유는 헤드에 스크립트를 만나게 될 경우 다운될때 까지 지연되기 때문에 사용자들은 웹페이지가 

훨씬 빠르게 로드되는것 처럼 느낀다.

'개발 > [언어] JS' 카테고리의 다른 글

[js] jquery로 hover 상태일때 다루기  (0) 2016.11.23

티스토리툴바