[ Jquery ] Jquery , Javascript 관련 정보 모음

Web Dev/Javascript 2011. 5. 27. 10:24 Posted by ditus

AJAX 가 웹 기술의 대세로 떠오르면서, Javascript 언어에 대해 새로운 접근들이 시도되고
다양한 AJAX 및 자바스크립트 라이브러리들이 출시되었습니다.
많이 쓰이니까 쉽게 쓸 수 있도록 하는 방법들이 나오는 건 당연하겠죠.

Script.aculo.us, Prototype.js , MooTools , jQuery, YUI ( Yahoo UI Library ) 등등..

수 많은 Javascript 라이브러리중 최근의 대세는 jQuery – http://jquery.com/ 입니다.

Google Trends를 통해서 위의 Script 라이브러리들을 비교해보면 이렇습니다.

http://google.com/trends?q=jquery+%2C+script.aculo.us+%2C+prototype.js+%2C+yui+%2C+mootools&ctab=0&geo=all&date=all&sort=0

자바스크립트 비교
그래프만 봐도 딱 보이시죠. 이렇게 jQuery 가 인기를 끌어가는데.. Microsoft 가 강펀치를 하나 날려줍니다.
위에 E 부분에 보면.. Microsoft 가 jQuery 를 Visual Studio 에 내장하겠다고 발표한게 보이실겁니다.
이제 ASP.NET 의 AJAX 프레임워크에서 jQuery 를 기본으로 내장하고 활용하게 되었습니다. – Microsoft to ship jQuery with Visual Studio

또한 Nokia 역시, 그들이 만들고 있는 Web Kit 기반의 Web-Runtime에서 jQuery를 사용할 것이라고 발표하였습니다.
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/

Javascript 와 jQuery 공부하기


이제 Javascript 를 이용한 AJAX개발은 모든 웹 기반 개발의 기본기술이 되었습니다. 모바일 환경에서도 사용되는건 물론이구요.
한번 Javascript, AJAX와 jQuery 를 익혀보지 않으시겠습니까 ?
공부하시는데 도움이 될만한 강의 문서들을 링크해 드립니다.

다소 좀 때늦은 포스팅이긴 하지만, 사내 메일링리스트에 보내느라 정리해둔게 있어서 늦게나마 기록차원에서 올려둡니다.


[ Jquery ] Table 핸들링

Web Dev/Javascript 2011. 3. 23. 14:18 Posted by ditus


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!--script type="text/javascript" src="temp.js"></script-->
<style type="text/css">
body,html {margin:10px; padding:0; font-family:Dotum; font-size:12px; line-height:normal; color:#333;}
table  {border:0 none; border-collapse:collapse; table-layout:fixed; border-spacing:0;}
table.basic {border-top:2px solid #FF6600;}
table.basic th, table.basic td {border:0 none; border-bottom:1px solid #FF6600; border-right:1px solid #FF6600;}
table.basic .end td {border-bottom:2px solid #993333;}
table.basic .bg1 td {background:#00FF66;}
table.basic .bg2 td {background:#FFCC66;}
table.basic .bg3 td {background:#fff;}
table.basic .over td {background:#000; color:#fff;}
table.basic th.right, table.basic td.right {border-right:0 none !important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $(".basic tr:odd").addClass("bg1"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 홀수번째에 bg1클래스 부여
 $(".basic tr:even").addClass("bg2"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 짝수번째에 bg2클래스 부여
 $(".basic tr:last").addClass("end"); //basic이라는 클래스네임을 가진 요소의 tr 요소중 마지막 요소에 end 클래스 부여
 $(".basic td:nth-child(3)").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 3번째 요소들에 right 클래스 부여
 $(".basic tr:even td:nth-child(4)").addClass("right"); //응용
 $(".basic th:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 th 요소중 마지막 요소(들)에 right 클래스 부여
 $(".basic td:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 마지막 요소(들)에 right 클래스 부여
 $(".basic tr").mouseover(function() {$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
});
</script>
</head>

<body>
<table width="100%" border="1" class="basic">
 <tr>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
 </tr>
 <tr>
  <td>dddd</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td> 
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
</table>

</body>
</html>

[ ORACLE / Toad ] 토드 유용한 단축키

Database/Oracle 2011. 3. 5. 12:33 Posted by ditus

SQL EDITOR상에서의 편리한 단축키

ESC: 열린 윈도우 닫기
F1: 모든 단축키를 보여준다.
F2: FULL SCREEN
F4: Table, View, Proc, Funct, Package를 DESC(테이블명에 커서를 둔 상태에
서 해야함)
F6: SQL Editor와 결과창간의 전환
F7: 화면을 모두 CLEAR
F8: 실행했던 SQL들의 HISTORY
F9: 모든 쿼리 실행(Ctrl+Enter는 현재 쿼리만 실행)
Ctrl+F9: 실제 쿼리를 실행하지 않고 validate함
Ctrl+. : table Completion                (매칭되는 테이블목록 출력)
Ctrl+T : Columns Dropdown                (해당테이블의 컬럼목록 표시)
Alt+Up  : History Up                        (리눅스 bash의 UP키와 같다.)
Alt+Down: History Down                (리눅스 bash의 DOWN키와 같다.)
Ctrl+Tab: MDI Child윈도간 전환

그냥 'desc 테이블명' 을 치면, 팝업윈도로 해당 테이블의 컬럼목록윈도가 표
시된다.
이때, 해당 컬럼을 double-click하면 SQL Editor로 반영된다.

"테이블명."까지 입력하고 좀 있으면, 해당 테이블의 컬럼목록이 표시된다.
마치 프로그래밍툴에서 클래스내 멤버들의 목록을 표시하듯이..
Ctrl+T는 출력된 목록을 취소했을 경우, 다시 불러낼때 쓰인다.

test, member 2개의 테이블이 있다고 하자.
select * from t까지 입력하고 Ctrl+.를 치면 select * from test로 테이블명
을 완성시켜준다.
system계정에서는 안되더군.. 일반계정만 가능했다.

SQL문을 실행시

Ctrl+Enter
현재 커서의 SQL문 실행
여러개의 SQL문이 있을때, SQL문들을 개행문자로 분리해주면 된다.
해당 커서에서 개행문자가 있는 곳까지만 하나의 SQL문으로 간주한다.

F9
SQL Editor의 SQL문 실행하여 Grid에 출력.
여러 SQL문들을 개행문자로 구분하지 않는다는 것을 제외하면, 위의
Ctrl+Enter와 동일하다.
에디터내의 모든 SQL문은 하나로 취급하므로, 여러 개의 SQL문이 있으면 실행
할 SQL문만 Selection하여 실행(F9)해준다.

F5
SQL Editor내의 모든 SQL문 실행. 여러개의 SQL문들을 모두 실행하여 SQL*PLUS
와 같이 출력해준다.
이것은 출력이 Grid로 표시되지 않고 Editor윈도에 표시되므로, SQL*PLUS의 출
력과 같이,
다른 편집기로의 복사/붙여넣기 할때 사용하면 유용하다.


 

티스토리툴바