Java Script20 jQuery, 제이쿼리 기본 메소드 총정리 이벤트 발생 마우스 클릭 이벤트 : $(선택자).click( function( ){ }); 마우스 더블 클릭 이벤트 : $(선택자).dblclick( function( ){ }); this 자신을 지칭하는 것 $(this).html() 이라고 쓰면, 자신의 html 값을 가져오라는 것. 선택자 전체선택자 : * $(function( ) { $( ' * ' ).css('color','blue'); }); 태그선택자 : '태그명' $( ' h1' ).css('color','blue'); 클래스선택자 : '.클래스명' $( ' .j' ).css('color','blue'); 두가지 클래스를 모두 가지는 태그 선택 $( ' .j.select' ).css('color','blue'); 아이디선택자 : '#아이디명.. 2019. 5. 14. jQuery, 제이쿼리가 무엇인가? jQuery는? 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리이며, 무료로 사용 가능한 오픈소스 라이브러리이다. JavaScript가 동적 페이지 기능 구현이 가능하지만, 사용하다 보니 구현이 복잡한 부분이 있어서 jQuery라는 라이브러리를 활용하여 조금 더 간단하고 쉽게 자바스크립트를 구현할 수 있게 도와주는 고마운 라이브러리이다. 혹시, 자바스크립트가 무엇인지 궁금하다면 아래 링크 클릭! [JavaScript] - 자바스크립트 기본, JavaScript란? (+ jQuery) 자바스크립트 기본, JavaScript란? (+ jQuery) 웹프로그래밍 웹에서 동작하는 프로그래밍 동적인 HTML 생성 (back) jsp, 서블릿, 스프링, back (front) javascript 서버 .. 2019. 5. 11. JS 예제 : 접근 기기(데스크탑 / 모바일)에 따른 배경 변경 자바스크립트에서는 해당 웹 서비스에 접근하는 사용자 브라우저에 대한 정보를 가지고 있는 객체가 있다. navigator 객체 navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지고 있음 객체 대표적인 속성 appName 브라우저의 이름 appVersion 브라우저 버전 userAgent 브라우저 전체적인 정보 navigator JS 예제 start.html에 접근하는 브라우저의 상태에 따라 페이지를 이동하게 하는 자바스크립트 예제 만약 접근 브라우저가 데스크탑이면 해당 페이지에 머무르고, 모바일 페이지의 경우 mobileStart.html 페이지로 이동하게 되는 웹 서비스 navigator 객체의 .uwerAgent 속성으로 브라우저의 전체 정보를 확인하여 처리. ㅇ start.. 2019. 5. 11. JS 예제 : 시간에 따라 이미지 변경( 낮과 밤) 자바 스크립트를 활용하여 시간에 따라 다른 이미지가 나오게 변경이 가능하다. 웹 사이트의 낮과 밤의 아이콘이나 배경을 다르게 설정할 수도 있다. 자바스크립트에는 현재의 날짜와 관련된 정보를 주는 객체가 있다. Date( ) 이것을 new로 생성해서 시간을 가져오고 해당 시간을 활용하여 조건문으로 코드를 작성하면 된다. 날짜 관련 클래스 Date( ) 날짜객체.getHours( ) 만들어진 객체의 시간을 가져오는 메소드 2019. 5. 11. JavaScript 타이머 설정 , setTimer 자바스크립트로 웹페이지를 구현하다 보면 시간에 따라 동작하는 효과를 만들게 되는 경우가 있다. 그런 경우에 사용하게 되는 타이머 설정 함수가 setTimer이다. setTimer 지금부터 지정한 시간 뒤에 딱 한번 동작 setTimer setTimer(동작 시킬 함수, 시간); setTimer(pro, 5000); 5초 뒤에 pro 함수를 1번 동작하라는 것 setTimer(function( ) { 함수내용 } , 5000); 안에 이름 없는 함수를 넣어서 할 수 있다. ㅁ 지정한 시간마다 반복하여 계속 동작 setInterval setInterval(동작 시킬 함수, 시간); setInterval(pro, 5000); 5초 마다 pro 함수를 동작하라는 것\ 적용하는 방법 직접 주는 것, 별도의 함수를.. 2019. 5. 11. JavaScript 이벤트 ㅣ window.onload 자바스크립트 이벤트 종류 마우스 이벤트 키보드 이벤트 HTML 프레임 이벤트 HTML 입력 양식 이벤트 유저 인터페이스 이벤트 구조 변화 이벤트 터치 이벤트 ㅇ 고전이벤트 모델 자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법 이벤트 하나에 이벤트 핸들러 하나만 연결 가능 ㅇ 이벤트 발생 객체와 이벤트 객체 이벤트 핸들러 안에서 This 키워드를 사용하면 이벤트가 발생할 객체를 찾을 수 있음 스크립트 위치에 따른 구현 시작 문서 내에 여행지 추천 추천 2019. 5. 11. JavaScript 함수 만드는 방법 Java Script 함수 함수란 반복 사용하는 코드를 재사용하기 위해 하나의 단위로 묶어 놓은 코드의 집합을 말한다. 자바스크립트 내에 정의된 함수를 "내장 함수"라고 하고, 직접 정의한 함수는 '사용자 정의 함수'라고 한다. 함수 처리가 끝나면 return 문을 통해 결과를 돌려 받을 수 있다. function sum(a, b){ var result = a+ b; return result; } ㅇ 콜백함수 자바스크립트에서는 함수를 매개 변수로 전달할 수 있는데, 이를 콜백 함수라고 한다. 콜백함수는 다른 함수의 인자로써 이용되는 함수나 어떤 이벤트에 의해 호출되어지는 함수를 말한다. 함수 생성하는 방식 2가지 funtion 함수명(매개변수) { 함수내용 }; var 함수명 = function( 매개변.. 2019. 5. 11. JavaScript DOM : 문서 동적화 기존 HTML만 으로 구성된 웹페이지의 경우 사용자의 동작에 따라 변경되거나 하는 부분이 불가능 한 정적인 페이지였다. 허나 사람들의 요구사항이 늘어나고, 사용자들이 조금 더 편리 하게 사용할 수 있도록 웹 페이지를 동적으로 변화하고 변경하는 기능이 필요했고, 그것을 가능하게 하는 것이 자바스크립이다. 기본적으로 JS에서 DOM을 다루려면 HTML과 CSS에 대한 이해가 있어야 한다. 요소를 선택하기 위해서는 태그에 부여한 id 또는 class로 접근해야 하기 때문에 기본적인 이해가 선행되어야 한다. 웹브라우저에서 HTML 문서 내용을 추가하거나 변경하는 것은 자바스크립만 가능 CSS 속성과 HTML5의 다양한 API 기능 제어 DOM : Document Object Model, HTML 문서 내에 객체.. 2019. 5. 11. JavaScript 배열 / 객체 기본 JS 배열 자바스크립트의 배열은 유연하게 작동한다. 사이즈가 고정되지 않아서 기존 배열 인덱스를 입력하면 수정이 되고, 새로운 인덱스를 넣으면 값이 추가 된다. ㅇ 배열의 크기 메소드 배열명.length ㅇ 배열메서드 메서드 설명 reverse( ) 배열을 역순으로 정렬 sort( ) 배열 정렬 slice( ) 배열의 일부 선택 concat( ) 배열을 하나로 합침 shift( ) 첫 번째 배열 제거(값을 반환함) unshift( ) 첫 번째 배열 추가 pop( ) 마지막 배열 제거(값을 반환함) join( ) 배열 사이에 지정된 문자열로 구분자 표시 sort( ) 메서드는 함수 안에 매개변수를 전달하지 않으면 알파벳 순으로 정렬 번호순 정렬은 매개변수에 함수식 적용 번호순으로 정렬 : 배열명.sort(.. 2019. 5. 11. 이전 1 2 3 다음 반응형
