자바스크립트, jQuery 의 기초 (변수, 함수, return, 객체, 프로퍼티 등)

 

 자바스크립트로 개발하면 각각 브라우저 별로 코드를 다르게 작성해야하고 결과도 각각 확인해야한다. 이런 크로스브라우징의 어려움 때문에 그 부분이 해결된 jQuery를 사용한다. 제이쿼리 언어는 자바스크립트에서 파생된 언어이기 때문에 자바스크립트를 어느정도는 알아야 jQuery 공부를 할 수 있다. 

변수

변수는 이름을 정하고 그 이름을 통해 값을 저장하거나 읽어들일 수 있다. 선언했던 변수에 다른 값을 저장하면 기존 값은 사라지면서 대체 된다.

 var a ; 

var은 변수를 선언, a는 변수의 이름 이고 ; 세미콜론을 붙여 구문의 끝이라는 표시를 해주어야 한다.

 

 a = 10; 

변수에 값이 할당 된다. 10이라는 값을 할당해 주기 전까지는 undefined라는 초기값을 갖는다. 

 

var b = "april"; 

변수를 선언하며 동시에 값을 할당해주는 형태이다.

 

 

 

기본타입과 참조타입 변수

 

<기본타입 변수>

종류	설명	예시
숫자	기본타입	var a = 10;
문자	따옴표(" ")내부에 삽입	var str="april";
Boolean	ture or false 두개의 값을 가짐	var bool = false;
null	아무것도 가지지 않은 값	var b = null;
undefined	초기값(변수를 정의하고 값 할당하지 않은 상태)	var b;

 

<참조타입 변수>

종류	설명	예시
Object,객체	변수, 메소드를 한 꾸러미에 모아주는 역할	var a = new Object();
Array, 배열	여러개의 데이터를 원소로 가짐	var arr = new Array();
Function, 함	실행할 구문을 미리 정의해놓고 호출해 사용	function sum(a,b){ var c = a + b;} sum(10,20);

 

 

연산자

종류	설명	예시
+, -, *, /	숫자	사칙연산
+	문자	문자열을 이어서 붙임
%	숫자	나누기 후 나머지의 값
+=, -=, *=, /=, %=	숫자	연산 수행과 동시에 값을 할당

 

+는 연산자를 사용해 숫자가 아닌 문자도 이어 붙일 수 있다.

var a = "오늘은"; 
var b = 4; 
var c = "월"; 
var f = 17; 
var g = "일 입니다"; 
var sum = a + b + c + d; 

결과값은 "오늘은4월17일입니다."

 

 

조건문

조건문의 비교 연산자에는 ==, !=, &&, ||, >, <, >=, <= rk dlTek.
&&는 양쪽 조건을 모두 만족해야하고 || 는 양쪽 조건 중 하나라도 만족하면 해당된다.

조건문의 중첩 사용

var a = 10; 
var b = 20; 

if(a != b){ 
    if(a > b){ 
        document.write("a는 b보다 크다."); 
    } else { 
        document.write("a는 b보다 작다.") 
    } 
} 

else if 없이 if 와 else만 사용시에는 '?' 와 ':'으로 좀 더 간결하게 쓸 수 있다.
(a > b) ? docum.net.write("a는 b보다 크다.") : document.write("a는 b보다 작다");

 

함수

함수는 미리 만들어 놓은것을 불러서 사용하고 재사용하는 형태이다. 여러번 쓰일 구문은 미리 작성해두고 필요시에 호출하면서 사용하는것이 효율이 좋다.

 함수 선언 방법

 function send() { 
alert(‎'전송'); 
} 

 함수이름 뒤에는 ()가 들어가며 괄호 안에는 함수가 호출 됐을 때 실행되는 구문이 온다.

 

함수 호출 방법

send(); 

 미리 위에서 send라는 함수가 선언되어 있으면 send();만을 입력하여 호출 할 수 있다.

 

 

인자값과 매개 변수

 함수를 선언할때 () 안에 매개변수를 설정 해서 함수안의 구문에 값을 전달 할 수 있다. 

var i = 1;
var j= 2;

var sum = add(i,j);

function add(v1, v2) {
	var sum = v1 + v2;
	documet.write(sum);
}

Return 반환값

return을 이용하여 함수를 호출한 구문으로 반대로 값을 보내줄 수 도 있다.

var i = 1; 
var j= 2; 

var sum = add(i,j); 

function add(v1, v2) { 
var sum = v1 + v2; 
return sum; 
} 

documet.write(sum); 

 위에서 return sum;으로 값을 반환하지 않으면 documnet에 출력부분에서 오류가 발생한다. 함수 안으로는 접근이 안되기 때문에 변수 sum을 찾을 수 없다는 오류가 발생하므로 return으로 값을 반환해야만 한다.

 

Object, 객체

 빈 객체를 생성해서 그 안에 변수와 함수를 추가할 수 있다. 오브젝트란 변수와 함수가 모여진 꾸러미라고 볼 수 있다. 객체안에 선언된 변수를 property라고 하고 함수를 method라고 한다. 


객체생성하는것에는 두가지 방법이 있다.

var obj = new Object(); 
var obj = {}; 

객체의 프로퍼티 생성은 '.'뒤에 프로퍼티명을 붙인다.

var member = {}; 
member.age = "30살"; 
member.sex = "남자"; 
member.birthday = "4월18일"; 

document.write(member.age); 
document.write(member.birthday); 

객체에 메소드 추가하는법은 프로퍼티를 추가하는 것과 비슷하다.

var member = { 
age:"30살",  
sex:"남자",  
birthday:"4월18일", 
getAge:function(){ //함수의 선언과 동시에 할당한것 
return this.age; //this는 member객체가됨 
} 
}; 

var age = member.getAge(); 
document.write(age); 

member 객체에 getAge() 메스드를 추가한것이다.
this를 통해서 메소드를 가지고 있는 객체가 넘어오기 때문에 this에는 member가 넘어온다. 다음 var age 에 member.age에서 return된 값이 선언되었고 30살이라는 값이 출력된다. 

var member = { 
age:"30살",  
sex:"남자",  
birthday:"4월18일", 
getAge:getAge 
}; 

function getAge() { 
return this.age; 
} 

var age = member.getAge(); 
document.write(age); 

위와 같이 객체에 함수명을 참조해서 메소드로 추가시켜주는 방법이 있으며 결과는 동일하다.