Web

[jQuery] 선택자

jQuery로 문서 내부의 요소를 다루려면 선택자를 통해 원하는 요소를 가져와야 합니다. 이를 위해서 jQuery에서는 CSS선택자를 사용하고 있습니다. 따라서 CSS선택자를 알면 jQuery에서 그대로 응용이 가능합니다. [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -1 [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -2 [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -3 [HTML5&CSS3] CSS선택자 -3 1. 일반 구조 선택자 CSS3부터 지원하는 선택자로서 다음의 선택자 사용이 가능합니다. first-child 동위 관계에서 첫번째 요소 last-child 동위 관계에서 마지막 요소 nth-child(수열) 동..

[jQuery] 다운로드및 사용

jQuery는 일관되며 좀 더 쉬운 방식으로 다양한 웹브라우저에서 HTML 문서를 다루고자 만들어진 프레임워크입니다. Javascript를 그대로 사용하는 것보다는 jQuery를 사용하는 것이 본래 Javascript를 통해 이루고자 하는 목표에 접근하기 훨씬 쉬운 방법입니다. 다만 근래에는 jQuery를 대체할 수 있는 많은 프레임워크가 등장하고, jQuery에 관한 여러 이슈들이 부각되면서 jQuery를 배제하고자 하는 움직임도 있습니다. jQuery를 사용하려면 아래 사이트에 접속합니다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes thing..

[javascript] 예외 처리

어떠한 이유로 프로그램 실행 중 오류가 발생할 수 있는데 이 오류를 위한 적절한 대책을 세우는 것을 '예외 처리'라고 합니다. 프로그램 실행 중에 발생하는 경우이므로 사용자를 생각해 적절히 대응할 수 있는 방안을 마련해 두는 것입니다. 참고로 예외와 오류는 다른데 오류는 잘못된 문법이나 오타 등으로 인해 아예 프로그램이 실행되지 않는 경우를 말합니다. javascript에서는 예외를 처리하는 방법으로 try ~ catch ~ finally를 사용할 수 있습니다. try 안에는 실행할 구문을 작성하며 catch안에는 예외발생시 실행할 구문을 작성합니다. cliel.com 위 예제에서는 id가 myspan이라는 요소를 가져와 click이벤트에 span_msg메서드를 연결하고자 하는 시도를 하고 있습니다. 하..

[javascript] 이벤트 처리

이벤트는 사용자의 특정 행위나 문서 안에서 발생하는 각종 변화를 말합니다. 버튼을 누르고 input박스에 입력하는 등 상호작용에 필요한 모든 동작은 물론 아래 예제와 같이 문서의 로드가 완료되는 것도 하나의 이벤트에 해당합니다. 위 예제는 window객체에서 문서의 로드완료를 알리는 onload라는 이벤트 속성에 function이라는 이벤트 리스너(또는 이벤트 핸들러) 메서드를 연결한 것입니다. 이 외에 특정 요소에 다음과 같이 임의의 메서드를 이벤트에 연결할 수도 있습니다. 예제는 span요소의 클릭이벤트(onclick 속성)에 span_msg라는 메서드를 연결한 것입니다. 물론 요소는 클릭 이외에도 다른 다양한 이벤트를 연결할 수 있습니다. cliel.com 위와 같이 javascript를 통해 이벤..

[javascript] 문서 객체 다루기

HTML 문서는 다수의 HTML 태그를 이용하고 구성됩니다. 이들 중 어떤 태그를 javascript상에서 다룰 수 있도록 요소로 가져오게 되면 그것을 '문서 객체'라고 할 수 있습니다. document 예제에서는 HTML문서의 span태그를 가져와 내부의 텍스트를 alert으로 표시하고 있습니다. getElementsByTagName은 요소를 배열로 반환하므로 myspan [0]처럼 가져올 요소의 인덱스를 지정해야 하는데 var myspan = document.getElementsByTagName('span'); 처럼 하게되면 이때부터 myspan을 하나의 문서 객체로서 취급하게 되는 것입니다. 참고로 위의 문서를 아래와 같이 도식화 하여 표현할 수 있으며 위와 같이 표현된 문서전체의 구조를 '문서 객..

[javascript] 브라우저 관련 객체

1. window window객체는 브라우저의 최상위 객체를 의미하며 아래 설명된 객체를 포함하는 객체이기도 합니다. 수많은 속성과 메서드가 존재하는데 전체를 다 알 수도 없고 알아보기도 어려워서 몇 가지만 추려서 살펴보고자 합니다. 참고로 alert 같은 기본적인 것도 window의 메서드로 처리되며 var를 통해 생성한 변수도 window의 속성으로 처리됩니다. open 새로운 window객체를 생성합니다. moveBy 윈도우를 지정한 위치로 이동시킵니다. (상대위치) moveTo 윈도우를 지정한 위치로 이동시킵니다. (절대위치) resizeBy 윈도우의 크기를 지정합니다. (상대크기) resizeTo 윈도우의 크기를 지정합니다.(절대크기) scrollBy 윈도우의 스크롤 위치를 이동시킵니다. (상대..

[javascript] 기본 내장 객체 (표준 내장 객체)

자바스크립트(javascript)는 기본적으로 유용하게 사용할 수 있는 몇가지 객체를 내장하고 있습니다. 이들 객체를 '기본 또는 표준 내장 객체'라고 하며 그 중 참고할만한 몇가지를 알아보고자 합니다. 객체를 알아보기 전에 우선 우리가 알지 못하는 사이 객체가 아닌것이 객체로 변환되는 경우가 있다는 것을 말씀드리고자 합니다. 예를 들어 var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue); alert(myvalue2); 예제에서 myvalue는 정수형 데이터이고 myvalue2는 Number에서 생성된 객체입니다. var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue.t..

[javascript] 생성자 함수

1. 개요 생성자 함수는 객체를 만들 때 사용하는 함수라고 말할 수 있습니다. 일반적인 프로그래밍에서 클래스와 비슷한 개념(클래스는 밑에서 별도로 언급하겠습니다.)을 가지고 있습니다. function MyCar(name, color, number) { this.name = name; this.color = color; this.number = number; } var mc = new MyCar('승용차', '파란색', '1234'); 생성자 함수는 일반 함수와 구조가 동일하지만 내부에서 사용할 속성 등은 this키워드를 통해서 구분해줘야 합니다. 예제에서는 MyCar라는 생성자 함수를 통해 mc라는 인스턴스를 생성하였습니다. 생성자 함수의 인스턴스 개체를 생성할때는 new키워드를 사용하며 이는 개체의 개..