Hi

키보드 이벤트이벤트 이름설명keydown키보드를 누를 때 발생합니다.keypress글자가 입력될 때 발생합니다.keyup키보드를 뗄 때 발생합니다. ex) 동적으로 글자 수를 세기$(document).ready(function() { $('textarea').keyup(function() { // 남은 글자 수를 구합니다. var inputlength = $(this).val().length; var remain = 150 - inputLength; // 문서 객체에 입력합니다. $('h1').html(remain); }); }); 1. 사용자가 키보드를 누릅니다. 2. keydown 이벤트가 발생합니다 3. 글자가 입력됩니다 4. keypress 이벤트가 발생합니다 5. 사용자가 키보드에서 손을 뗍니다..

마우스 이벤트이벤트 이름설명click마우스를 클릭할 때 발생합니다.dbclick마우스를 더블 클릭할 때 발생합니다.mousedown마우스 버튼을 누를 때 발생합니다.mouseup마우스 버튼을 뗄 때 발생합니다.mouseenter마우스가 요소의 경계 외부에서 내부로 이동할 때 발생합니다.mouseleave마우스가 요소의 경계 내부에서 외부로 이동할 때 발생합니다.mousemove마우스를 움직일 때 발생합니다.mouseout마우스가 요소를 벗어날 때 발생합니다.mouseover마우스를 요소 안에 들어올 때 발생합니다. ex)$(document).ready(function() { $('outer').mouseover(function() { $('body').append('MOUSEOVER'); }).mouse..

이벤트 연결 범위 한정범위를 한정하는 이벤트 연결 방식-> delegate 방식 "delegate 방식으로 이벤트를 연결합니다!" -> 이벤트 연결 범위를 한정하는 방법 on() 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에, 새로 생긴 태그에는 이벤트가 적용되지 않는다. 이러한 경우, 상위 태그에 이벤트를 연결하고 'h1 태그를 클릭했을 때'를 검출해야 합니다. Header $(document).ready(function() { $('#wrap').on('click', 'h1', function() { var length= $('h1').length; var targetHTML = $(this).html; $('#wrap').append('' + length + ' - ' + targetHT..

기본 이벤트와 이벤트 전달메서드 이름설명preventDefault()기본 이벤트를 제거합니다.stopPropagation()이벤트 전달을 제거합니다.$(document).ready(function() { $('a').click(function event) { $(this).css('background-color', 'blue'); event.stopPropagation(); // h1 클릭까지 되는걸 없애기. event.preventDefault(); // a의 본연의 링크 이벤트 기능을 없애기 }); $('h1').click(function() { $(this).css('background-color', 'red'); }); }); 위의 코드를 간단하게 return false; 로 구현할 수 있다.$(..

이벤트 강제 발생trigger() : 이벤트를 강제로 발생시킵니다. 두가지 형태$(selector).tirgger(eventName); $(selector).tirgger(eventName, data); ex)$(document).ready(function() { // 이벤트를 연결합니다. $('h1').click(function() { $(this).html(function(index, html) { return html + '별' }); }); // 1초마다 함수를 실행합니다. setInterval(function() { $('h1').last().trigger('click'); }); }); 두 번째 매개변수에 배열을 입력하면 데이터가 자동으로 이벤트 리스너에 순서대로 추가 전송됩니다.$(docum..

이벤트 객체이벤트 객체 속성설명event.pageX브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치event.pageY브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치event.preventDefault()기본 이벤트를 제거합니다.event.stopPropagation()이벤트 전달을 제거합니다$(document).ready(function() { // 변수를 선언합니다 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 이벤트를 연결합니다. $(canvas).on({ mousedown: function(event) { // 위치를 얻어냅니다. var position = $(this).of..

이벤트 발생 객체와 이벤트 객체이벤트 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜'를 정의할 수 있습니다. 이벤트를 '누가' 발생시켰을까?-> 이벤트 발생 객체 ex)window.onload = function() { document.getElementById('header').onclick = function() { this.style.color = 'orange'; this.style.backgroundColor = 'red'; }; }; '누가'와 관련된 정보 이외의 정보는 '이벤트 객체' 안에 들어 있습니다. ex)window.onload = function() { document.getElementById('header').onclick = function(e) { // 이벤트..

매개변수 contextjQuery 메서드는 사실 매개변수 두 개 입력할 수도 있습니다.$(selector, context) 매개변수 context는 selector가 적용하는 범위를 한정합니다. 특정 부분에 선택자를 적용하고 싶을 때 사용하는 것 -> 매개변수 context ex)$(document).ready(function(){ // 이벤트를 연결합니다. $('div').click(function() { var header = $('h1', this).text(); var paragraph = $('p', this).text(); //출력합니다. alert(header + '\n' + paragraph); }); }); 다음과 같이 find() 메서드를 사용해도 됩니다.$(document).ready..

간단한 이벤트 연결/제거간단한 이벤트 연결간단한 방식으로 연결할 수 있는 이벤트blurfocusfocusinfocusoutloadresizescrollunloadclickdbclickmousedownmouseupmousemovemouseovermouseoutmouseenterouseleavechangeselectsubmitkeydownkeypresskeyuperrorready 간단한 방식으로 이벤트를 연결할 때 다음과 같은 방법을 사용$(selector).method(function(event) {}); 이벤트 연결 메서드도 제공됨hover : mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결합니다. 다음과 같은 형태로 사용$(selector).hover(function(event) ..

이벤트 연결 기본on() 메서드를 사용하는 것이 jQuery로 이벤트를 연결하는 가장 기본적인 방법on() : 이벤트를 연결합니다. 두가지 형태1. $(selector).on(eventName, function(event){}) 2. $(selector).on(object) 1번 예시) 이벤트 발생 시 이벤트 발생 객체에 '+' 글자를 추가합니다.$(document).ready(function() { // 이벤트를 연결합니다. $('h1').on('click', function() { $(this).html(function(index, html) { return html + '+' }); }); });이벤트 리스너 안에서 this 키워드는 이벤트가 발생한 객체를 의미한다.2번 예시) 이름과 속성 값에, ..

이벤트 개념 잡기이벤트 : 키보드를 이용해 버튼을 입력하거나 마우스 클리과 같이 다른 것에 영향을 미치는 것 이벤트 관련 용어 정리이벤트를 연결한다 : window 객체의 onload 속성에 함수 자료형을 할당하는 것window.onload = function() {};load를 '이벤트 이름' 또는 '이벤트 타입' 이라고 함. onload를 '이벤트 속성' 이라고 함. 이벤트 속성에 할당한 함수를 '이벤트 리스너' 또는 '이벤트 핸들러'라고 합니다. ex)window.onload = function() { // 변수를 선언합니다. var header = document.getElementById('header'); // 이벤트를 연결합니다. function whenClick() { alert('CLIC..

문서 객체 삽입/이동/복제문서 객체 삽입메서드 이름설명$(A).appendTo(B)A를 B의 뒷부분에 추가합니다.$(A).append(B)B를 A의 뒷부분에 추가합니다.$(A).prependTo(B)A를 B의 앞부분에 추가합니다.$(A).prepend(B)B를 A의 앞부분에 추가합니다.$(A).insertAfter(B)A를 B의 뒤에 추가합니다.$(A).after(B)B를 A의 뒤에 추가합니다.$(A).insertBefore(B)A를 B의 앞에 추가합니다.$(A).before(B)B를 A의 앞에 추가합니다. append() 로 예시)1. $(selector).append(content, content, ......, content) 2. $(selector).append(function(index){})..

문서 객체 삽입메서드 이름설명$(A).appendTo(B)A를 B의 뒷부분에 추가합니다.$(A).append(B)B를 A의 뒷부분에 추가합니다.$(A).prependTo(B)A를 B의 앞부분에 추가합니다.$(A).prepend(B)B를 A의 앞부분에 추가합니다.$(A).insertAfter(B)A를 B의 뒤에 추가합니다.$(A).after(B)B를 A의 뒤에 추가합니다.$(A).insertBefore(B)A를 B의 앞에 추가합니다.$(A).before(B)B를 A의 앞에 추가합니다. append() 로 예시)1. $(selector).append(content, content, ......, content) 2. $(selector).append(function(index){}); 1번 예시)$(docu..

문서 객체 생성텍스트 노드를 갖는 문서 객체를 생성하는 방법$() : 문서 객체를 생성합니다. $() 메서드의 매개변수에 HTML 태그를 문자열로 넣기만 하면 문서 객체가 생성됩니다. $(document).ready(function() { $('').html('Hello World .. !').appendTo('body'); }); 내용을 바로 넣을 수도 있다.$(document).ready(function() { $('Hello World .. !').appendTo('body'); });텍스트 노드를 갖지 않는 문서 객체를 생성하는 방법$(document).ready(function() { $('').attr('src', 'Chrysanthemum.jpg').appendTo('body'); }); $..

문서 객체 제거메서드 이름설명remove()문서 객체를 제거합니다.empty()문서 객체 내부를 비웁니다. ex) Header-0 Header-1 remove() 는 한 줄 지우기 처럼 쓰면 되는가 해당 문서 객체를 꼭 집어서 지워버리는 듯하다.$(document).ready(function() { $('h1').first().remove(); });empty() 는 선택한 문서 객체의 '내부'에 들어 있는 모든 문서 객체를 제거한다.$(document).ready(function() { $('div').empty(); });

문서 객체의 내부문서 객체의 내부 검사자바스크립트에서 문서 객체의 innerHTML, textContent 속성과 관련됨메서드 이름설명html()문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다(HTML 태그 인식)text()문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다. (HTML 태그 인식 X) Header-0 Header-1 Header-2 또다른 차이점은 alert()에 나오듯이, 하나가 나오느냐 여러개가 나오느냐$(document).ready(function() { // 변수를 선언합니다. var html = $('h1').html(); // 출력합니다. alert(html); // Header-0 });$(document).ready(function() { // 변수를 선언합니다..

문서 객체의 스타일문서 객체의 스타일 검사css() : 스타일과 관련된 모든 기능을 수행합니다. css() 메서드로 특정 문서 객체의 스타일 속성을 알고 싶을 때 -> 메서드의 매개변수에 스타일 속성 이름을 입력한다.$(document).ready(function() { // 변수를 선언합니다. var color = $('h1').css('color'); // 출력합니다. alert(color); // rgb(255, 0, 0) 같은 값이 나온다. });문서 객체의 스타일 추가세가지 형태1. $(selector).css(name, value); 2. $(selector).css(name, function(index, style){}); 3. $(selector).css(object); 1번 예시)$(do..

문서 객체의 속성문서 객체의 속성 검사attr() : 속성과 관련된 모든 기능을 수행합니다. ex)$(document).ready(function() { //변수를 선언합니다. var src = $('img').attr('src'); //출력합니다. alert(src); });코드를 실행하면 첫 번째 문서 객체의 속성을 출력하는 것을 확인할 수 있다. 대부분의 값을 알아내는 메서드는 여러 개의 문서 객체를 선택 했을 때, 첫 번째에 위치한 문서 객체의 값을 출력한다. 문서 객체의 속성 추가세 가지 형태1. $(selector).attr(name, value); 2. $(selector).attr(name, function(index, attr){}); 3. $(selector).attr(object); ..

문서 객체의 클래스 속성 제거removeClass() : 문서 객체의 클래스 속성을 제거합니다. ex)$(documnet).ready(function() { $('h1').removeClass('select'); }); NOTEtoggleClass() : 매개변수로 입력한 클래스 속성이 이미 지정되어 있으면 -> 제거 지정되어 있지 않으면 -> 추가

문서 객체의 클래스 속성 추가addClass() : 문서 객체의 클래스 속성을 추가합니다 ex 1)$(document).ready(function() { $('h1').addClass('item'); }); ex 2) 함수(index 매개변수가 있는)를 매개변수로 입력할 수도 있습니다.$(document).ready(function() { $('h1').addClass(function(index){ return 'class' + index; }); });

문서 객체 선택과 탐색기본 필터 메서드filter() 문서 객체를 필터링합니다. 1. $(selector).filter(selector); 2. $(selector).filter(function(){}); 1번 예시$(document).ready(function() { $('h3').filter(':even').css({ backgroundColor: 'black', color: 'white' }); }); 2번 예시$(document).ready(function() { $('h3').filter(function (index) { return index % 3 == 0; }).css({ backgroundColor: 'black', color: 'white' }); });문서 객체 탐색 종료end() 문..

var text = $(".test").html().split('

프로토타입자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. (객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특징) 부모 객체를 프로토타입 객체(짧게는 프로토타입) 라고 부른다.var foo = { name: 'foo', age: 30 }; console.log(foo.toString()); // foo의 프로토타입에서 toString() 메서드를 가지고 옴 console.dir(foo); 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다.toString() valueOf() hasOwnProperty() ... Object.prototype 객체 ㅅ ㅣ ㅣ (상속)name: 'foo', ..

참조 타입의 특성객체는 자바스크립트에서 참조타입객체의 모든 연산이 실제 값이 아닌 참조값으로 처리.var objA = { val : 40 }; var objB = objA; console.log(objA.val); // 40 console.log(objB.val); // 40 objB.val = 50; console.log(objA.val); // 50 console.log(objB.val); // 50 객체 비교동등 연산자 (==)를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조값을 비교한다.var a = 100; var b = 100; var objA = { value: 100 }; var objB = { value: 100 }; var objC = objB; console.log(..

자바스크립트 참조 타입(객체 타입)기본 타입을 제외한 모든 값은 객체다.배열, 함수, 정규표현식 모두 결국 자바스크립트 객체로 표현자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너, 해시라는 자료구조와 상당히 유사.참조타입인 객체는 여러개의 프로퍼티드릉ㄹ 포함. 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.프로퍼티를 메소드라 부른다.객체 생성 기존 객체지향 언어에서의 객체 개념과는 약간 다르다. 클래스라는 개념이 없고, 별도의 생성방식.Object() 생성자 함수 이용 내장 Object() 생성자 함수 // Object()를 이용해서 foo 빈 객체 생성 var foo = new Object(); // foo 객체 프로..

기본 타입숫자, 문자열, 불린값, null, undefined// 숫자 타입 var intNum = 10; var floatNum = 0.1; // 문자열 타입 var singleQuoteStr = 'single quote string'; var doubleQuoteStr = "double quote string"; var singleChar = 'a'; // 불린 타입 var boolVar = true; // undefined 타입 var emptyVar; // null 타입 var nullVar = null; console.log( typeof intNum, typeof floatNum, typeof singleQuoteStr, typeof doubleQuoteStr, typeof boolVar, t..

텍스트 길이 넘어가면 밑에 줄로 넘기기! overflow-wrap: break-word https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap

jQuery 충돌 방지 jQuery 충돌 방지 jQuery 이외에도 여러 가지 자바스크립트 프레임워크가 있어. 여러 플러그인을 함께 사용할 때는 플러그인 간의 충돌이 발생할 수 있습니다. $.noConflict() : 충돌을 방지할 때 사용하는 메서드 $.noConflict(); jQuery(document).ready(function() { });

객체 확장 객체 확장 $.extend() 메서드 $(document).ready(function() { var object = {}; object.name = 'RintIanTta'; object.gender = 'Male'; object.part = 'Second Guitar'; }) 빈 객체를 생성하고 이후에 새 속성을 추가할 때, 많은 수의 속성을 추가할 때 쓴다. $(document).ready(function() { // 변수를 선언합니다. var object = { name: '윤인성' }; // $.extend() 메서드를 사용합니다. $.extend(object, { region: '서울특별시 강서구', part: '세컨드 기타' }); // 출력합니다. var output = ''; $...

배열 관리 배열 관리 배열을 관리할 때, each() 메서드를 사용 each() 메서드 : 매개변수로 입력한 함수로 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드 1. $.each(object, function(index, item){}) 2. $(selector).each(function(index, item){}) 자바스크립트 배열 관리 $(document).ready(function() { // 변수를 선언합니다. var array = [ { name: 'Hanbit Media', link: 'http://hanbit.co.kr' }, { name: 'Naver', link: 'http://naver.com' } { name: 'Daum', link: 'http://daum.net' ..