경기도 평생 학습 포털 지식

스킵메뉴

컨텐츠 바로가기

검색 바로가기

전체메뉴 바로가기

유틸메뉴 바로가기

푸터 바로가기

로고

경기도 평생학습 포털 GSEEK 온라인학습

유틸메뉴

뒤로가기

실무 jQuery 제대로 하기 Part 1

실무 jQuery 제대로 하기 Part 1

실무 jQuery 제대로 하기 Part 1

온라인> IT > 프로그래밍

#

강사

김기민

차시 수

27차시

난이도

-

수료기준

진도율 60% 이상

학습기간

2021.1.1~ 2021.12.31

만족도

5점 만점중 4.57점

91% (7명)

실무 jQuery 제대로 하기 Part 1

온라인> IT > 프로그래밍

#

  • 별도의 수강신청 없이 차시 단위로 학습이 진행됩니다.
  • ‘학습하기’를 클릭하여 학습을 시작한 첫 날을 학습 시작일로 인정하며, 학습기간 내에 수료기준을 충족해야 과정을 수료할 수 있습니다.
  • 비회원으로 학습 진행 시, 학습 이력 저장 및 수료가 불가능합니다.
차시명 좋아요 조회수 학습하기
1 jQuery 입문1_1 0 26회 폐강강좌
2 jQuery 입문1_2 0 1회 폐강강좌
3 jQuery 입문2 0 0회 폐강강좌
4 기초 구문 학습1_1 0 0회 폐강강좌
5 기초 구문 학습1_2 0 0회 폐강강좌
6 기초 구문 학습2 0 0회 폐강강좌
7 기초 구문 학습3 0 0회 폐강강좌
8 기초 구문 학습4 0 0회 폐강강좌
9 본격적인 jQuery 학습1(event)_1 0 0회 폐강강좌
10 본격적인 jQuery 학습1(event)_2 0 0회 폐강강좌
11 본격적인 jQuery 학습2(event flow) 0 0회 폐강강좌
12 jQuery 노드 선택 방법의 기본1 0 0회 폐강강좌
13 jQuery 노드 선택 방법의 기본2_1 0 0회 폐강강좌
14 jQuery 노드 선택 방법의 기본2_2 0 0회 폐강강좌
15 jQuery 노드 선택 방법의 기본3 0 0회 폐강강좌
16 jQuery 노드 선택 방법의 기본4 0 0회 폐강강좌
17 jQuery를 활용한 애니메이션1_1 0 0회 폐강강좌
18 jQuery를 활용한 애니메이션1_2 0 0회 폐강강좌
19 jQuery를 활용한 애니메이션2_1 0 0회 폐강강좌
20 jQuery를 활용한 애니메이션2_2 0 0회 폐강강좌
21 jQuery를 활용한 애니메이션3 0 0회 폐강강좌
22 jQuery를 활용한 애니메이션4_1 0 0회 폐강강좌
23 jQuery를 활용한 애니메이션4_2 0 0회 폐강강좌
24 jQuery를 활용한 애니메이션5 0 0회 폐강강좌
25 jQuery를 활용한 애니메이션6 0 0회 폐강강좌
26 jQuery를 활용한 애니메이션7 0 0회 폐강강좌
27 form 요소로의 적용 0 0회 폐강강좌
강좌소개

본 과정은 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리인 jQuery(제이쿼리)릍 통해 사용자가 웹을 보다 효과적으로 이용할 수 있도록 개발할 수 있는 내용으로 구성되어 있습니다. 본 과정의 학습을 통해 Javascript와 jQuery를 활용하여 보다 효과적인 결과물을 만들어 볼 수 있고, 또한 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어에 대해 학습하고 호환성 메소드에 대해서도 학습할 수 있습니다.

강사소개
김기민 사진

김기민

  • [학력]
  • - 건국대학교 산업디자인 전공
  • [경력]
  • - 고려IT직업전문학교 강사
  • - 중앙전산직업전문학교 강사
  • - 삼성전자, LG CNS 개발 업무 프리랜서
  • - 금융투자협회 웹 퍼블리싱 프리랜서
  • - (주)아이티고 콘텐츠 개발팀 강사

이용안내

  • 후기에서는 강좌에 대한 평가와 후기를 등록하고 확인할 수 있습니다.
  • 강좌를 학습한 학습자만 작성할 수 있으며, 재등록 시 이전에 등록한 후기는 삭제됩니다.
  • 욕설, 비방, 광고, 친구 구하는 글, 릴레이 소설, 특정 연예인이나 드라마에 관련된 글 등 강의와 직접적인 관련이 없는 게시물은
    관리자에 의해 삭제됩니다.    test
5점 만점중 4.57점 91% (7명)

별점을 선택하세요.

1점 2점 3점 4점 5점

7개의 후기가 있습니다.

임*구 2018.11.22
5점 만점중 5점
잘 배우고 있습니다. ^^
조*현 2018.8.16
5점 만점중 5점
감사합니다~
김*호 2018.8.9
5점 만점중 4점
도움이 많이 되었습니다.

감사합니다.
황*걸 2018.7.23
5점 만점중 4점
많은 도움이 되었습니다. 감사합니다.
김*정 2017.10.6
5점 만점중 5점
고맙습니다.

더보기

이용안내

  • 욕설, 비방, 광고, 친구 구하는 글, 릴레이 소설, 특정 연예인이나 드라마에 관련된 글 등 강의와 직접적인 관련이 없는 게시물은
    관리자에 의해 삭제됩니다.
  • 학습질문은 로그인 후 이용 가능합니다. 회원가입 및 로그인을 진행해주세요.

※질문하신 내용에 대해 구체적인 답변을 위해 차시정보 등을 입력해주세요.


강좌전반에 대한 질문


6개의 질문이 있습니다.

정*재 2018.11.23

자료 다운로드가 중간에서 끊어집니다.

방법을 알려주시면 감사하겠습니다.

지***자 2018.11.26

안녕하세요. 지식캠퍼스 관리자입니다.

사용중인 인터넷 브라우저 호환 문제일 가능성이 있기 때문에 아래와 같이 타 브라우저를 설치 후 다시 한번 학습진행 부탁드립니다.

- 크롬 최신 버전 https://www.google.com/chrome/browser/desktop/index.html
- 파이어폭스 최신 버전 https://www.mozilla.org
- 엣지 최신 버전(윈도우즈 10의 기본 브라우저)

문제 해결이 어려울 경우 학습지원센터(1600-0999)로 연락해 주시면 신속하게 도움을 드리도록 하겠습니다.
(평일:9시~18시, 토요일:9시~13시, 점심시간:12시~13시, 공휴일/일요일:휴무)

감사합니다.

임*구 2018.9.10

질문이 가능한가요?



0302_함수.html에서 

$(function(){

    $("#fn3").click(function(){

        console.log("세 번째 함수");

    });

    $("#fn4").click(call_fn4);

});

이부분이 있습니다. 여기서 $("#fn4").click(call_fn4); 를 변수를 주면 $("#fn4").click(call_fn4("하하하"));

화면이 로딩될때 바로 실행이됩니다.

혹시 이 두개의 차이가 무엇인지 알수 있을까요?



감사합니다.

지***자 2018.9.11

안녕하세요. 지식캠퍼스 관리자입니다.

문의 하신 내용 확인 후 답변 드립니다.

line4 : $("#fn3").click(call_fn4);
함수 자체를 의미하는 것은 함수 이름입니다.
#fn3을 클릭하면 호출되는 명령어는 바로 call_fn4 이름의 함수입니다.

line5 : $("#fn3").click(call_fn4());
함수() 형식은 함수를 호출하는 형식입니다. 핸들러 자리에 들어있 때 대부분 () 형식이 없습니다.
핸들러 위치에 ()가 있을 경우에는, 자체 함수 호출이 한 번 자동으로 실행되기 때문입니다.

쉽게 설명해 드리면 call_fn4()라고 하면, 화면 실행이 되면 자동 호출됩니다.
하지만 call_fn4라고 하면, 핸들러 위치에서 명령어로의 이름으로 클릭할 때만 명령어가 실행됩니다.

학습에 참고 바랍니다.

감사합니다.

임*구 2018.9.10

질문이 가능한가요?



0302_함수.html에서 

$(function(){

    $("#fn3").click(function(){

        console.log("세 번째 함수");

    });

    $("#fn4").click(call_fn4);

});

이부분이 있습니다. 여기서 $("#fn4").click(call_fn4); 를 변수를 주면 $("#fn4").click(call_fn4("하하하"));

화면이 로딩될때 바로 실행이됩니다.

혹시 이 두개의 차이가 무엇인지 알수 있을까요?



감사합니다.

임*구 2018.9.12

답변 감사합니다.



그러면 클릭 할때만 실행하게 만들어 주는 이벤트 함수에는 만들때는 변수를 미리 줄수 없다는 말인데요

클릭할때라도 변수를 넘겨 줄수 있는 방법이 있나요?

여러개의 버튼으로 하나의 함수를 호출 하고 싶을때 각 버튼의 아이디를 넘겨 주지 않으면

하나의 함수로는 처리가 안되지 싶은데요 ^^;;



감사합니다.

임*구 2018.9.10

질문이 가능한가요?



0302_함수.html에서 

$(function(){

    $("#fn3").click(function(){

        console.log("세 번째 함수");

    });

    $("#fn4").click(call_fn4);

});

이부분이 있습니다. 여기서 $("#fn4").click(call_fn4); 를 변수를 주면 $("#fn4").click(call_fn4("하하하"));

화면이 로딩될때 바로 실행이됩니다.

혹시 이 두개의 차이가 무엇인지 알수 있을까요?



감사합니다.

지***자 2018.9.14

안녕하세요. 지식캠퍼스 운영자입니다.
문의하신 내용에 대한 답변 전달해 드리겠습니다.

jQuery 관련 레퍼런스를 찾아봤지만 뽀쪽한 방법을 찾기가 어려웠습니다.
찾은 답을 드리자면 아래와 같습니다.

- 핸들러를 사용자 함수로 지정하는 경우는 인자 변화가 없는 경우에 가능합니다. 아래는 예시입니다.

$(function(){
var str="basic";
$(".link1").click(log);
$(".link2").click(log);
function log(){
console.log(str);
return false;
}
});

- 인자는 JavaScript 방식으로 넘길 수 없습니다. jQuery는 JavaScript 이벤트 형식을 가지고 왔지만,
JavaScript 이벤트가 완벽히 구현되지는 않는 것 같습니다.

/* 코드 에러입니다. */
$(function(){
var str="basic";
$(".link1").click(log, "link1");
$(".link2").click(log, "link2");
function log(param){
console.log(param);
return false;
}
});

- 결국 jQuery에서 인자를 사용하기 위해서는 핸들러 형식이 아닌 일반 함수를 호출할 수 밖에는 없습니다.

$(function(){
$(".link1").click(function(e){
e.preventDefault();
str="link1";
log(str);
});
$(".link2").click(function(e){
e.preventDefault();
str="link2";
log(str);
});

function log(param){
console.log(param);
}
});

jQuery 이벤트의 한계 때문에 발생된 문제인 것 같습니다.

학습에 참고하시기 바랍니다.
감사합니다.

임*구 2018.9.10

질문이 가능한가요?



0302_함수.html에서 

$(function(){

    $("#fn3").click(function(){

        console.log("세 번째 함수");

    });

    $("#fn4").click(call_fn4);

});

이부분이 있습니다. 여기서 $("#fn4").click(call_fn4); 를 변수를 주면 $("#fn4").click(call_fn4("하하하"));

화면이 로딩될때 바로 실행이됩니다.

혹시 이 두개의 차이가 무엇인지 알수 있을까요?



감사합니다.

임*구 2018.9.14

답변감사합니다 ^^

이벤트를 만들어 주는 것이지 함수를 호출하는게 아니라는 말씀이네요

저는 두개가 한번에 되면 어떨까 생각을 한겁니다.

그래서 함수명 뒤에 파라메터를 넣어 봤던겁니다.

그런용도가 아니라고 하니깐 이해가 됩니다. 감사합니다.

더보기

맨 위로 가기