Be a groovy man by positive thinking

간단정리 1. jQuery - HTML 제어 1) append() - 컨텐츠를 선택된 요소(태그) "내부"의 끝 부분에서 추가 $(selector).append(content,content,content...) $(selector).append(function(index)) - content : 텍스트, 태그..HTML elements,jQuery objects ,DOM elements - function(index) index - 추가되는 요소의 인덱스 $("p").append("Some appended text."); This is a paragraph.여기에 추가 This is another paragraph.여기에 추가 2) prepend() - 콘텐츠를 선택한 요소 "내부"의 시작 부분에서 추가..

간단정리1. jQuery - 애니메이션 효과1) $(selector).animate({속성들},speed,callback); - 속성들 : CSS 속성 중 위치나 크기 관련 속성 - speed : "slow", "fast", or milliseconds - 효과를 실행시킬 객체의 속성 중 position:absolute, relative, fixed 중 하나로 설정 되어 있어야 함 $("button").click(function(){ $("div").animate({left: '250px'}); }) $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' });..

간단정리 [자바스크립트] - 동적 기능 수행 1. 함수필터 선택자1) :eq(n) : n 번째 위치하는 문서객체 0부터 시작2) :gt(n) : n 번째 초과하는 문서객체3) :lt(n) : n 번째 미만에 위치하는 문서객체4) :header : , 문서 객체 모두5) :hidden : hidden 문서객체 모두 2.events1) $("선택자").이벤트명(function(){ // action goes here!!});$(document).ready(function(){ $("p").click(function(){ $("p:first").css("background-color", "yellow"); });}); 2)on() Method: 선택한 요소에 한개 이상의 이벤트 연결$("선택자").on({ 이..

간단정리1. jQuery- 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리- 무료로 사용 가능한 오픈 소스 라이브러리- document 객체 모델과 관련된 처리를 쉽게 구현- jQuery를 내려받으려면 http://jquery.com에 접속- CDN 호스트를 사용하는 방법- $(document).ready(function(){ }); window.onload = function () {} 1) 기본 구조 - $(선택자).메서드() - $ - sign to define/access jQuery $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); 2) 기본 선택자 - element의 태그명 : $("..

1. Inside which HTML element do we put the JavaScript? ① ② ③ ④ 2. What is the correct JavaScript syntax to change the content of the HTML element below? This is a demonstration. ① #demo.innerHTML = "Hello World!"; ② document.getElementByName("p").innerHTML = "Hello World!"; ③ document.getElementById("demo").innerHTML = "Hello World!"; ④ document.getElement("p").innerHTML = "Hello World!"; 3. Whe..

간단정리1. event1)실행했을때 다른 대상에 영향을 줌이벤트대상.on이벤트이름 = function { 이벤트 핸들러 }window.onload=function(){ b.onclick = a;}function a(){ b.style.backgroundColor = "red";} - 이벤트대상 : window 객체 - 이벤트이름 : load - 이벤트속성 : onload - 이벤트핸들러 : function 의 내용 2. script function a(){ b.style.backgroundColor = "red"; } - 이벤트 대상은 id가 "b"인 객체 - 이벤트 이름 : click - 이벤트 속성 : onclick - 이벤트 핸들러 : a() 3. Mouse Events1)onClick - 마우스로..

간단정리1. document 객체 - HTML 페이지와 관련된 객체 - 모든 html 요소(태그)는 요소 노드 - 모든 html 속성은 속성 노드 - html 태그내에 있는 텍스트는 텍스트 노드 2. HTML 요소 가져오기1) document.getElementById(id) - 태그내에서 id 와 일치하는 객체2) document.getElementsByTagName(name) - 태그내에서 태그명과 일치하는 객체를 배열로 반환3) document.getElementsByClassName(name) - 태그내에서 클래스명과 일치하는 객체를 배열로 반환 3. HTML 태그 추가나 제거1) document.createElement(element) - html 요소(태그)를 생성2) document.crea..

간단정리1. 기본 내장 객체1) Number 객체2) String 객체 (1) length 속성 : 문자열의 길이 반환 (2) substring(시작, 종료) ==> 시작위치부터 종료위치앞까지 문자열 반환 (3) substr(시작, 길이) ==> 시작위치부터 길이만큼의 문자열 반환 3) Array 객체 var 배열명 = new Array (배열크기); var 배열명 = new Array (배열값1, 배열값2 ....); (1) 배열명.length 속성 : 배열의 크기 (2) 배열명.push() : 마지막 인덱스에 요소 추가 (3) 배열명.pop() : 마지막 인덱스 요소 삭제 (4) 배열명.sort() : 문자열 오름차순 배열명.sort(function (a, b) {} : 숫자를 정렬할 경우 비교함수 ..

간단정리 1.객체- 데이터와 그 데이터에 관련된 동작을 모두 포함- 객체를 이루는 구성 요소에는 프로퍼티와 메서드 1) 배열을 이용한 생성 var 객체명 = { name: value, 키: 값 (인덱스:요소) }; 2) 속성 : property - 객체 내부의 값(배열의 요소) 3) 객체의 속성에 접근 객체명["키"]; 객체명.키 ; var foo = { // foo 객체 생성. a: 10; }; foo.b = 1; // . 연산자를 이용하여 b 라는 이름의 프로퍼티를 생성하면서 1이라는 값을 할당.==> 속성 추가 var sum = foo.a+foo.b; // . 연산자를 이용하여 foo 객체의 a 프로퍼티에 접근하여 값을 활용가능하다. alert(sum); 4) 매서드- 객체가 가지고 있는 동작- 객..

간단정리 1. 함수 - 특별한 일을 수행하기 위한 코드들의 집합 - 자주쓰는 작업을 함수로 선언해서 필요할때마다 호출해서 쓸수 있음1) 익명함수 - 변수를 선언하고 그 변수에 함수를 할당 - 함수가 호출될 때 마다 해석 - 항상 함수를 생성하고 변수에 할당 한 다음 호출 var variableName = function(parameters) { code to be excuted; } variableName();variableName는 함수 자료형 // 익명함수. var a = function () { var output = prompt("숫자를 입력해주세요.", ""); alert(output); }; // 함수를 호출합니다. a(); 2) 선언적 함수 - 페이지가 로드할 때 단 한번 해석된다. - 한번..