킹콩

$(function(){

    $('선택자').keydown(function(e){

        if(e.keyCode == '키값' && e.ctrlKey ){

            '소스코드'

        }
    });

});

(1) Javascript 문법 스타일

기존의 프로그래밍 언어의 엄격한 문법 스타일에 적용되어 있는 사용자라면 분명히 자바스크립트의 자유 분방한 문법 스타일을 보고 적지않게 당황한적이 있을 것이다. 이러한 스타일은 단점이 될 수도 있으나 매우 유연하기 때문에 때에 따라서 매우 강력한 기능을 발휘한다. 그렇다면 가장 많이 사용되는 자바스크립트의 함수와 관련된 문법 스타일에 대해서 알아보도록 하자.

1. 함수를 변수에 설정할 수 있다.

2. 변수에 설정한 함수를 매개 변수로 사용하여 호출 할 수 있다. 

3. 위와 같이 변수에 담지 않고 바로 함수를 매개 변수로 바로 설정 할 수 있다. 

3번의 경우 조금 어렵게 생각할 수도 있는데 자세히 보면 그냥 함수 파라메터 값에 변수가 아닌 함수 그 자체가 들어가 있다고 간단하게 생각하면 된다. 이러한 표현식은 jQuery에서 상당히 많이 쓰이기 때문에 이러한 문법 스타일에 최대한 빨리 익숙해져야 한다.


(2) 셀렉터 요약 정리

셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.

하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.

아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.

아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며 첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로 엘리먼트를 선택해야 하는 경우에 사용하면 된다.
 

CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우 아래 표에 나와 있는 셀렉터를 사용하면 된다.
 

(3) 자주 사용되는 함수 정리

$.유틸리티 함수, Event 관련 함수, Ajax 관련 함수는 이번 장에서 다루지 않을 것이다.

(4) 그 밖에 함수 정리

아래 표에 정리된 함수들은 확장된 엘리먼트 집합을 관리하는 함수들이다.

Event 관련 함수 및 프로퍼티와 $.유틸리티 함수 역시 이번 편과 비슷한 형식으로 정리를 해볼까 합니다. jQuery는 꼭 필요한 기능들만 구현이 되어 있기 때문에 따지고 보면 별로 정리할 내용이 없기 때문에 이를 간단하게 요약하면 jQuery를 사용하실 때, 참고하신다면 분명히 도움이 되리라 생각됩니다.

그럼 이상으로 글을 마치겠습니다.

// 원리 : 현재 테이블복제 -> form에 담기 -> 동적 iframe생성 -> iframe Submit() -> 출력

function getExcelFile(fileName){

var html = $('#테이블 아이디').clone();

var obj = html.find('input').remove();

var html_code = html.html();

$('body').after("<form id='excelForm' action='excelPrint.php' target='excelWindow' method='post'><textarea id='excelTable' name='excelTable' style='display:none;'>"+html_code+"</textarea><input type='text' name='fileName' value='"+fileName+"'></form>");

$('body').after("<iframe src='' name='excelWindow' width='100%' height='100%' style='display:none;'></iframe>");

$('#excelForm')[0].submit();

}

출력구문 페이지(excelPrint.php) ->

<?

extract($_POST);

define('fileName',$fileName);

header( "Content-type: application/vnd.ms-excel; charset=EUC-KR");

header( "Content-Disposition: attachment; filename = ".fileName.date('Y-m-d_His').".xls" );

header( "Content-Description: PHP4 Generated Data" );

?>

<table border='1'><?=$excelTable?></table>

사용법 ->

1. 링크 : <a href="javascript:getExcelFile('파일명')">내용</a>

2. 이벤트 onclick="getExcelFile('파일명')"

<input type="button" value='버튼' onclick="alert('전할 메시지');">

-> button태그를 클릭시 메시지를 띄움

<div style='border: 1px solid red; width: 200px;height: 200px;' onclick="alert('메시지를 입력')">

    영역을 클릭시 메시지!

</div>

각 태그

<span></span>

<table></table>

<ul></ul>

<div></div> 등에도

사용이 가능하다.

간단요약:

1. 선택자 지정

2. 함수 지정

3. 속성 지정

jquery의 문법대로라면 이 문법대로 간략하게 자주 쓰는 함수를 설명함 아래로 ...

1. $('#아이디').css('속성','수치'); // 보이는 외형을 수정 속성은 style 공부를 해야 알 수 있음.

2. $('#아이디').animate('위치값','시간'); // 보이는 객체의 움직임을 지정

3. $('#아이디').text(); // 현재 객체가 가지고 있는 문자열 값

4. $('#아이디').val(); // form 안 input 혹은 selectbox가 가지고 있는 값

5. $('#아이디').toggle(); // 스위치같은 기능. 숨김과 보기를 제어하는 함수

6. $('#아이디').slideToggle(); // 숨김과 보기를 슬라이드로 보여줌.

7. $('#아이디').fadeIn(); 혹은 .fadeOut(); // 숨김과 보기를 밝기변화로 보여줌

8. $('#아이디').show(); 혹은 hide(); // 숨김과 보기를 다이렉트로 보여줌

jquery에서 함수로 일련의 행동을 지정한다면 이제 그 함수가 일어나는 조건을 컨트롤 할 수

있다.

ex) 클릭했을때, 더블클릭했을때, 초점이 생겼을때, 초점이 나갈때, 마우스를 올렸을때~~ 등등..

html 태그에 직접 지정하는 방법과 jquery로만 지정하는 방법이 있다.

1. <div onclick="test();"></div>  // 직접지정

2. $('div').click(function(){}); // 스크립트로 간접 지정

가독성을 위해선 1번이 좋지만 디자인과 기능을 완전분리하고 싶다면 2번이 좋다.

함수로 지정할땐 this라는 키워드를 사용 할 수 있다. this는 자기 자신을 가르킨다.

function test( object ){ // object는 개인이 편한대로 변경해서 사용하면 된다.

    object.css('border','1px solid red'); // 테스트라는 함수를 호출한 객체의 테두리를 준다.

}

<div onclick="test(this)">123</div> // 클릭을 하는순간 붉은 테두리가 생긴다.

/////////////////////////////////////////////////////////////////////////////////////////////////////////여기 까지 다 읽었다면 보이는것은 css와 jquery의 검색으로 다 만들 수 있어야함.

선택자는 익숙치 않은 단어지만 일상생활에서 나, 너, 우리, 그들 처럼 평상시에 쓰고 있는 단어들의 함축어라고 보면 된다.

우선 jquery를 사용하기전에는 문서의 준비상태를 명시적으로 선언해주어야 한다.

<script>

$(document).ready(function(){

함수 기술영역.

});

$(function(){

함수 기술영역

});

</script>

위 두 코드는 같은 의미이다. 우선 기본 문법을 보자면

1. $(달러)는 jquery의 언어로 해석됨을 의미한다.

2. 그 뒤 달러 뒤에 오는 소괄호 안에는 선택자가 오게된다.

3. 현재 온 선택자는 document(문서) 현재 열려진 문서를 선택한 것이다.

4. 선택자 뒤에 오는 것은 함수(행동규약) 이다.

5. 현재는 .ready()라는 함수로 행동을 정하는것이 아닌 document(문서)가 ready(준비)가 되었다면

그안에 정의된 함수를 실행하라는 내용이다.

6. 마찬가지로 

$(function(){

이렇게 표현하는것은 위에서 쓰여진 document.ready의 축소판이라 보면 된다. 편한대로 쓰도록..

});

그럼 간단한 div, span, table태그 등으로 선택자를 연습해보겠다. 현재 이 태그들을 모른다면

이 페이지를 보면 된다.

 그럼 이제 jquery로 각 객체에 외형을 바꿀 수 있는 css()라는 함수로 각 선택자에 border(테두리)를 변경해보겠다.

(제이쿼리를 사용하지 않은 경우)

코드:

<div>    태그연습</div><div>    jquery 연습</div>이미지:

제이쿼리를 사용하였을때

저 위 태그에서  상단 부분에  코드추가

코드:

<script>

$(function(){

    $('div').css('border','1px solid red');

});

</script>

이미지:

해석: document(문서) 안에서 div라는 태그를 찾아 css라는 함수에서 테두리 border에 1px(굵기), solid(실선), red(색상)을 변경.

그럼 여기서 1px을 10px로 변경하고 red를 blue로 바꾼다면?

코드:

$(function(){

    $('div').css('border','10px solid blue');

});

이미지:

그럼이제 table코드에서 특정 id를 가진 객체만 테두리를 줘보기.

코드:

<script>$(function(){    $('#me').css('border','10px solid blue');});</script><table>    <tr>        <td id='me'>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>        <td>6</td>    </tr></table>

이미지:

#이 들어가면 id선택을 의미한다. 

기존 $('div')는 모든 div를 지목하는 반면 $('#div')는 id='div'라는 속성이 들어간 태그만 선택한다.

id는 index를 의미한다. 모든 객체에 id는 중복될 수 없다. 그리하여 여러 객체에 적용하기 위해

사용되는 것이 class라는 것이다. class='border'라는 속성으로 비교해보자

코드:

<script>$(function(){    $('.me').css('border','10px solid blue');});</script><table>    <tr>        <td class='me'>1</td>        <td>2</td>        <td class='me'>3</td>        <td>4</td>        <td class='me'>5</td>        <td>6</td>    </tr></table>
이미지:

클래스의 선택자는 .으로 한다. $('#me') id='me'라는 한개의 객체라면 $('.me')는 class='me'을 가지고있는 모든 객체를 선택한다. class명은 중복되어도 상관이 없으며 오히려 중복해서 여러 객체를 하나의 명칭으로 사용하기 위해 클래스를 사용한다.
여기서 정리하면 선택자가 3개가 나왔다.$('태그명') :: 모든태그$('#아이디') :: id='아이디'를 가지고 있는 태그 ex) <div id='아이디'></div>$('.클래스') :: class='클래스'를 가지고 있는 모든 태그 ex) <div class='클래스></div> <span class='클래스'</span>

전에 설명한 학생으로 한국말로 의역하자면....

$('태그명') :: 같은 반에 속한 너희 모두!

$('#아이디') :: 너!

$('.클래스') :: 같은 반에 속한 김씨성을 가진 너희들!

범위로 보자면

$('태그명') > $('.클래스') > $('#아이디') 순으로 객체를 선택하는 범위가 넓다.

여기 까지 읽었다면 선택자는 이해했으리라 보고 이외에 존재하는 수많은 선택자들은

그냥 한번 눈으로 훑고 나중에 필요할때 검색을 해서 사용하면 된다.

이 이미지는 http://openyou.egloos.com/2851939 라는 주소에서 무단으로 주인의 허락없이 가져왔지만

출처를 밝히니까 용서해줄거 같다.

jquery를 사용하는 방법은 javascript로 작성된 함수목록인 jquery.js라는 파일을 페이지내에 포함해야 사용 할 수있다.

1. 외부링크로 삽입하기

페이지에 이코드를 head태그 사이에 넣거나 head밑에 놓으면 된다.

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

2. 파일로 삽입하기

www.jquery.com 혹은 www.jqueryui.com에 사이트에 접속을 한후에 다운로드를 받아

파일의 경로대로 <script src="파일명"> 해주면 된다.

이때 min이 붙은 js파일과 기본 js파일이 있는데 min이 붙은 파일은 공백을 제거함으로써 용량을 줄였지만 프로그램 가독성이 떨어진다.

보통 웹에서 사용할때는 용량이 작은 min을 사용한다.

공부할때는 저위에 있는 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

이 코드만 간단하게 넣고 연습해도 된다.

파일첨부에 jquery 연습을 위한 초기설정파일

초기 설정파일 설명( 클릭 )

2013-11-19 새벽1시에 말한 내용 이행( 모든 내용은 최대한 짧고 굵게 )

<!-- 시작 -->

1. 자바스크립트란?

- 네이버 의미 : 자바를 응용하여 사용하기 쉽게 만든 자바스크립트는 표준 HTML 문서에 사용되어 인터랙티브 웹페이지를 만들 수 있게 한다.

- 내생각 : html, jsp, php 등으로 코딩된 페이지는 정적인 페이지를 동적인 페이지로 돌아가게 하기 위한 언어.(1) 정적이다 : 정해진, 틀에박힌, 고정된으로 해석하면 된다.(2) 동적이다 : 움직이는, 유연한, 고정되지 않은 으로 해석하면 된다.
정적인 페이지 <-> 동적인 페이지 차이점 생각해보기.
만약 자바스크립트가 없다면...1. 모든페이지는 고정적으로 박혀있으며 회원가입시 새창이 뜰 수 없고 항상 회원가입이라는 새페이지로 이동해야 한다.2. 강조 되는 버튼이나 글을 클릭했을때 색상이나 크기의 변화를 줄 수 없다.3. 인터넷 쇼핑몰에서 흔히 볼 수 있는 스크롤을 따라다니는 배너를 만들 수 없다.4. 네이버에 실시간 검색어를 볼 수 없다.( 화면이 첫 로딩되었을때 랭킹만 볼 수 있고 새로고침을 하지않은 이상 순서는 고정.
이정도로 예를 들 수 있다. 이 반대를 동적이라 보면 된다.
한줄 요약 : 자바스크립트란 웹언어로 작성된 페이지의 동적인 요소를 컨트롤 할 수 있게 자바를 기반하여 만들어진 언어.
2. 선택자란?- 한 객체를 선택 할 수 있는 미리 정의된 명령어를 의미한다.- 한글로 따지면 너,나,너와나,우리,너네,그들 등등...이 자바스크립트의 선택자에 해당한다.- document.getElementById('아이디'); - 이 내용은 몰라도 되지만 뜻은document(문서)에서 getElement( 객체를 얻는다 ) ById( 기술된 아이디와 같은 )그래서 그 객체를 선택하는것이다. 한마디로 너라고 표현할 수 있다.- document.getElementClassName('클래스 명');위에 getElementById가 너라면 ClassName은 너네라고 볼 수 있다.id는 중복되서 사용될수 없지만 <div class='div'></div><div class='div'></div>처럼클래스는 중복사용이 가능하므로 같은 클래스인 너네! 를 가져올 수 있는것이다.

3. 함수란?- function이라고도 부르는 함수는 미리 정해놓은 행동들의 규약이다.- 사람으로 따지면 사람의 함수목록을 살펴보자.(1) 달리다.(2) 걷다.(3) 자다.(4) 옷을 입다.(5) 씻다.(6) 먹다.
우리는 이런 단어들을 국어시간에 배워서 자연스레 알고 있지만 컴퓨터는 저런 단어를 알 수 없기 때문에 개발자가스스로 정해 주어야 한다.ex)1.function run(){

달리기 내용 기술...

}2. function walk(){걷는 내용 기술..}3. function sleep(){자는 내용 기술...}등등. function 이라고 명시적으로 함수를 선언한뒤 뒤에 함수명이 온다. 함수명은 개발자 마음대로 작성하면 된다.단! 마음대로 작성하되 훗날 알아 볼 수 있도록 관계된 뜻으로 함수명을 작성하는게 좋다.
위 내용을 조합해서 예를 들어보자.html과 서버언어인 jsp, php ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 사람이라고 예를들었을때언어로 여러 사람을 만들었다면 이제 자바스크립트라는 언어로 그 사람의 행동규약등을 미리 함수로 정해놓고walk()걸어라, sleep() 잠을자라, eat()먹어라 등으로 함수를 실행하면서 원하는 행동등을 하는 것이다.
다른 예를 들자면학교에서 수업을 생각하면 된다.선생님이 칠판에 문제를 써놓고 학생을 지목해서 풀라는 과정을 생각해보면
1. 반장 누구니( 선택자 )2. 이 문제 풀어봐( 함수 )
컴퓨터도 사람들이 하는 행동과 말을 그저 컴퓨터가 해석 할 수 있도록 문법과 명령어만 정해놓은것이라 생각하면 한층 쉽다.
4. jquery 란?javascript를 사용하기 쉽게 함수들을 묶어서 그룹화한 library라 보면 된다.라이브러리(

library)

 :: 

 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것

학생이 하루에 하는 일들을 자바스크립트의 함수로 생각한다면

아침먹기(), 학교가기(), 수업듣기(), 점심먹기(), 수업듣기(), 야자하기(), 집에가기(), 잠자기()

정말 여러 함수가 필요하다.

하지만 jquery는 이 일련의 과정들을 하나의 함수로 단축시켜놓았다고 이해하면 쉽다

자바스크립트 : 아침먹기(), 학교가기(), 수업듣기(), 점심먹기(), 수업듣기(), 야자하기(), 집에가기(), 잠자기()

제이쿼리 : 하루일과()

여기서 중요한것은 제이쿼리는 커스터마이징이 가능하기 때문에 점심먹기(), 야자하기() 등을 중간에서 뺄 수도 있다는것이 중요하다.

한줄요약: 자바스크립트로 실행하는 일종의 행동규약들을 하나의 함수로 통합해놓은 자바스크립트 파생 언어.