제이쿼리 기본
4) 제이쿼리 문법
제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.
제이쿼리의 기본 문법은 다음과 같습니다.
문법
$(선택자).동작함수();
달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 입니다.
선택자를 이용하여 원하는 HTML요소를 선택하고, 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.
$()함수
$() 함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해주는 역할을 합니다.
$() 함수의 인수로는 HTML태그 이름뿐만 아니라, CSS 선택자를 특종 HTML요소를 선택할 수 있습니다.
이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(Jquery object)라고 합니다.
제이쿼리는 이렇게 생성된 제이쿼리 메소드를 사용하여 여러 동작을 설정할 수 있습니다.
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다.
보통은 별다른 문제가 발생되지 않지만, 다음과 같은 경우에 오류가 발생합니다.
- 아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제입니다.
예제
<script>
function func(){
addAttribute();
createElement();
};
function creatElement(){
var criteriaNode = document.getElementById("text");
var newNode = document.createElement("p")newNode.innetHTML = "새로운 단락입니다."
newNode.setAttribute("id", "para");
document.body.insertBefore(newNode,criteriaNode);
};
};
function addAttribute(){
document.getElementById("para").setAttribute("style","color:red");
}
</script>5) 자바스크립트 기초 지식
제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초지식이 있으면 제이쿼리를 배우는데 많은 도움이 됩니다.
하지만 제이쿼리만을 배우고자 하는 학생드를 위해 수업을 진행하는 데 꼭 필요한 자바스크립트 수업만을 소개하고자 합니다.
변수
변수란 데이터를 저장할수 있는 메모리 공간을 의미라며, 그 값은 변경될 수 있습니다.
배열
자바스크립트에서 배열은 1개 이상의 값들로 이루어진 집합으로 정의합니다.
배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스 라고 합니다.
연산자
자바스크립트는 여러 종류의 연산을 위한 다양한 연산자를 제공합니다.
제어문
프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 명령문을 제어문이라고 합니다.
이러한 제어문에는 조건문, 반복문 등이 포함됩니다.
함수
함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
함수를 사용하는 가장 큰 이유는 반복적인 코드의 작성을 피할 수 있기 때문입니다.
또한, 프로그램을 여러 개의 함수로 나누어 작성하면, 모듈화로 인해 전체적인 코드의 가독성이 좋아집니다.
그리고 프로그램에 문제가 발생하거나 기능의 변경이 필요할때에도 손쉽게 유지보수를 할 수 있습니다.
유효범위
변수의 유효 범위란 해당 변수가 접근할 수 있는 변수, 객체 그리고 집합을 의미합니다.
객체
자바스크립트에서 객체란 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합입니다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드라고 합니다.
함수내에서 값은 프로퍼티
함수내에서 함수가 값인경우 메소드
