코딩물고기

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 28.jQuery 기본 문법 $(제어대상).method1().method2(); - $은 jQuery에 access한다는 뜻 - metho1()은 (제어대상)에 대해서 수행될 작업 - '$(제어대상)'은 주어, 'method1().method2()'은 서술어로 대치됨 * jQuery 선택자 - 페이지 내의 요소들에 접근하는 역할 $(document).ready(function(){ $('*').css('color','red'); $('h2').css('color','blue'); $('h1#header1').css('color','purple'); $('.item1,.item2').css('color','orange'); $('h1...

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 27. jQuery - 모든 브라우저에서 동일하게 동작하는 클라이언트 JavaScript 라이브러리 - 모든 객체 모델과 관련된 처리, 일관된 이벤트 연결, 시각적 효과를 쉽게 구현할 수 있다. - Ajax 애플리케이션을 쉽게 개발 할 수 있다 - 독립된 언어가 아니라 JavaScript에서 사용 할 수 있는 라이브러리 - jQuery 라이브러리의 큰 용량 때문에, 작은 규모의 프로젝트에서는 속도 저하 문제를 야기시킬 수 있다. * CDN 호스트를 사용하는 방법 - CDN은 Content Delivery Network의 약자로, 온라인상의 대용량 콘텐츠를 빠르게 전송하는 기술이다 - jQuery 라이브러리를 직접 내려 받아 사용하는 ..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 26. 이벤트 - 이벤트 처리 * 이벤트(event) - 사용자가 문언가를 클릭하거나 혹은 대상 위에 마우스를 가져가거나 특정 키를 누를 때 상호작용이 발생하는 것 등 브라우저에서 일어나는 모든 동작을 의미한다 - 이벤트 핸들러를 통해 이벤트에 대한 특정 작업 처리를 할 수 있다 * 캡처링(capturing) - 이벤트를 이벤트가 발생한 요소의 자식 노드들로 전파함 * 버블링(bubbling) - 캡처링과는 반대로, 이벤트가 일어난 요소에서 이벤트 요소를 포함하고 있는 부모 요소까지 올라가며 이벤트를 검사한다. * 고전 이벤트 모델 - 문서 객체의 이벤트 속성으로 이벤트를 연결하는 방법 - 이벤트 하나에 이벤트 리스너 하나만 연결 가..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 25. DOM 객체 다루기 - 문서 객체 생성 * 문서 객체의 구분 : 기본적으로 텍스트 노드를 가지는 객체와 갖지 않는 개체로 구분함 * 텍스트 노드를 가지는 문서 객체 생성 - 생성 순서 1. 요소 노드와 텍스트 노드를 생성함 2. 텍스트 노드를 요소 노드에 연결함 - 관련 메소드 1. createElement(tagName) - 요소 노드 생성 2. createTextNode(text) - 텍스트 노드 생성 3. appendChild(node) - 객체에 노드 추가 window.onload = function(){ // 변수 선언 var element = document.createElement('h1'); var text = ..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 24. DOM * DOM(Document Object Model) - 브라우저 HTML 문서에 접근할 수 있게 정의된 문서 객체 모델 - 동적으로 문서의 내용, 구조, 스타일에 접근하는 방법을 정의한 API - DOM은 스크립트나 프로그래밍 언어들을 통해 웹 페이지를 다룰 수 있게 연결시켜주는 역할을 한다 - DOM은 문서를 나뭇가지형 구조로 표시함 html, head, body 가 부모/자식 관계로 이루어져 있음 - DOM은 프로그래밍 언어와 독립적임 * DOM 관련 주요 용어 - 태그(Tag) : HTML 페이지 내에 존재하는 구성요소 > p 태그, table 태그, div 태그 등 - 문서 객체(Document Object) :..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 20. Array 객체 생성과 속성 * Array 객체 - JavaScript에서 배열을 다루는 객체 - 배열 객체에 저장되는 요소들은 데이터 타입이 달라도 됨 * Array 객체 생성 방법 - var arr1 = [배열 요소1, 배열 요소2, 배열 요소3 ...] - var arr2 = new Array(); > 배열의 크기를 지정하지 않음 - var arr3 = new Array(배열 요소1, 배열 요소2, 배열 요소3) > 배열 요소 값을 초기화하면서 배열 객체 생성 > 초기화한 배열 요소 개수가 배열의 크기가 됨 - var arr4 = new Array(배열의 크기); > 인자로 지정된 크기로 배열 객체 생성 * Array 객..