'홈페이지제작/JQuery'에 해당되는 글 3건

JSON(제이슨, JavaScript Object Notation)이란 ?(제이슨, JavaScript Object Notation)이란 ?

SON이란? JSON 규칙JSON이란 자바스크립트 언어에서 객체를 표현하는 표기법입니다.

그러나 JSON은 자바스크립트에서만 사용하는것은 아닙니다. JSON은 자바스크립트 구문을 따르기는 하지만 자바스크립트에서 파생되었기 때문에 JSON으로 불리울 뿐 XML이나 CSV처럼 어디서나 사용 가능한 개방형 표준 데이터 포맷(형식) 입니다.

앞서 말했듯 JSON은 개방형 표준 포맷으로 RFC 7159와 ECMA-404라는 두 개의 표준에 의해 기술되고 있으며, 공식 MIME 타입으로는 application/json을, 파일로 저장하게 되는경우 .json의 확장자를 가지게 됩니다.

기존 서버나 클라이언트간의 통신에는 XML 포맷을 사용하는것이 대세를 이루었지만 최근에는 여러가지 장점으로 인하여 JSON 포맷을 이용하는것이 대세가 되었습니다.

JSON은 key와 value를 가진 객체 표기법 이므로 자바, 파이썬, C#등의 객체지향 패러다임 언어에서 이용하는데 용이합니다.

JSON의 장점

•단순 텍스트이며 표기가 직관적이므로 사람이 이해하기 쉽습니다.
•속성과 값 쌍으로 이루어지므로 CSV와 다르게 특정 값이 어떤 의미를 지니는지 이해하기 쉽습니다.
•XML의 요소는 <name>Kim</name> 과 같이 여는 태그가 있으면 닫는 태그가 있기 때문에 데이터 자원 소모가 상대적으로 크지만 JSON은 key : value 방식이므로 상대적으로 데이터 자원 소모가 적습니다.
•거의 대부분이 HTTP를 이용한 웹 환경에서 데이터 교환이 이루어 지므로 데이터의 크기가 적다는 것은 매우 큰 의미를 지닙니다.
•특정한 언어나 플랫폼에 독릭접이므로, 규칙만 지켜주면 어떤 시스템간이든 교환이 가능합니다.
•대부분의 언어 및 플랫폼에서 JSON을 더욱 정교하게 다루기 위한 api를 제공하며, 브라우저에서도 json 파서를 내장하고 있습니다.

JSON 문법

자바 스크립트 언어에 익숙한 사람이라면 다음의 규칙은 매우 익숙할 것 입니다.

•JSON 객체는 중괄호 블록 "{", "}" 으로 표기합니다.
•JSON 배열은 대괄호 블록 "[", "]" 으로 표기합니다.
•속성(Key)과 값(Value) 쌍으로 이룹니다.
•속성과 값이 쌍을 이룰 때 콜론으로 구분하며 속성 : 값 형태로 표기합니다.
•속성은 쌍따옴표(")로 묶어 표기하며, 값은 자료형에 따라 표기 방법이 달라집니다. ex) "age" : 3
•속성이 여러개인 경우 ,(콤마)로 구분합니다.

 
[
    {
         "name" : "kim",
         "age"  : 19,
         "isAgree" : true,
         "hobby" : null
    },
    {
         "name" : "lee",
         "age"  : 18,
         "isAgree" : false,
         "hobby" : "cycle"
    }
]

자료형

정수 표기법

정수는 단순히 숫자로 표기하며, 언어에서 지원하는 2진수, 8진수, 16진수 등의 표현은 지원하지 않습니다.

만약 다른 진법 표기가 필요한 경우 문자열 표기를 이용하도록 합니다.

13
1224
-223
0
-21

실수(고정 소수점)

1.556
-33.5

실수(부동 소수점)

1e4
2.5e12
6.78E-5

Boolean 표기법

true
false

문자열

문자열은 쌍따옴표(") 로 묶여야 하며, 0개 이상의 유니코드 문자로 이루어집니다.

만약 줄바꿈(개행)이나 쌍따옴표, 슬래시 등의 표기가 필요한 경우 이스케이프 문법을 지원합니다.

"1234"
"Kim"
"김철수"
"\"안녕\""
"hello \n world"
 

문자열 데이터에 사용되는 이스케이프 문법

문자열 데이터는 쌍따옴표로 묶여야 하며 쌍따옴표 안에 사용되는 따옴표 역슬래시 등은 이스케이프 문법으로 처리해 주어야 합니다.

•\" 따옴표
•\t 탭
•\n 개행
•\f 폼 피드
•\r 캐리지 리턴
•\b 백스페이스
•\/ 슬래시
•\\ 역슬래시
•\uHHHH 16진수 네자리로되어 있는 유니코드 문자

배열

배열은 대괄호 "[", "]" 로 나타내며, 하나의 배열에는 C나 자바 언어와 같이 한 가지 자료형만을 가지는것이 아닌 여러가지 자료형을 요소로 가질 수 있습니다. 또한 배열의 각 요소는 콤마(,) 로 구분됩니다.

[10, "AA", {"a" : 3, "b" : "bb"}, true]
{"a" : 33, "b" : [30, 20, "사십"]}
 cs

[jQuery 기초] jQuery 선택자 (Selector) 목록 정리

jQuery 선택자(Selector) 목록 정리

jQuery는 DOM 요소를 탐색할때 CSS 선택자 표현식을 지원합니다. 이번글에서는 여러가지 선택자를 간단하게 정리합니다.

기본 선택자

가장 많이 사용하는 기본 선택자들입니다.

전체 선택자

document객체가 관리하는 문서내의 모든 요소를 선택합니다. * (Asterisk)를 사용합니다.

$('*') //모든 요소를 선택합니다.                                                               
$('body > *') //body 하위에 모든 요소를 선택합니다.

id 선택자

HTML 태그의 ID속성값을 기준으로 하는 선택자입니다. ID값 앞에 #을 붙여 사용합니다. ID값을 중복되지 않는게 원칙이므로 가장 처음에 선택된 요소만 리턴됩니다.

$('#userinput') //id속성값이 userinput인 요소를 선택합니다.                                   

태그 선택자

HTML 태그의 태그명을 기준으로 하는 선택자입니다. 태그명을 그대로 사용하며, 동일한 태그가 여러개인 경우 배열 형태로 리턴됩니다.

$('table') //문서 내에 table 요소들을 선택합니다.                                               

클래스 선택자

HTML 태그의 class 속성값을 기준으로 하는 선택자입니다. class 속성값 앞에 .(점)을 붙여 사용합니다. 해당 클래스를 가진 모든 요소들을 반환합니다.

$('.account') //class 속성의 값이 account인 요소들을 선택합니다.
$('.account.money') //class 속성의 값이 account와 money 둘 다 포함되는 요소들을 선택합니다.(class="account money")

계층 구조에 따른 선택자

DOM 구조에서 자식이나 후손 요소에 대해 선택할 수 있습니다.

자식(Child) 선택자

parent 요소의 자식 요소 child 를 구하려면 > 를 사이에 넣어 표현합니다. 단 바로 하위의 자식들 중에서만 요소를 선택하며, 그 하위 자손 요소들은 선택하지 않습니다.

$('.parent > .child') //class 속성값이 parent 인 요소의 자식중에 class 속성값이 .child인 요소들을 선택합니다.

자식(Child) 및 후손 선택자

만약 바로 하위 자손뿐만 아니라 모든 후손들을 대상으로 선택하고 싶은 경우에는 공백을 넣어 표현합니다.

$('.parent .child') //class 속성값이 parent 인 요소의 하위에 있는 class 속성값이 .child인 모든 요소들을 선택합니다.

다음에 오는 요소 선택

특정 요소 바로 다음에 오는 요소 하나만을 선택하는 경우에는 + 를 사용합니다. 주의할점으로는 바로 다음요소 하나만을 선택한다는 점입니다.

$('#prev + *') //id속성값이 prev인 요소의 바로 다음으로 요소 하나만 선택                       

다음에 오는 모든 형제 요소

특정 요소 다음으로 오는 모든 형제(siblings) 요소들을 선택할 때에는 ~ 를 사용합니다. 단 형제들만을 선택하며 형제들의 하위 요소까지는 선택하지 않습니다.

$('#first ~ *') //id 값이 first인 요소의 다음으로 존재하는 모든 형제 요소들을 선택                
 

먼저 JQury 사이트에 접속하셔서 여러가지 정보를 알아 보시는 것도 좋을 듯합니다.

바로기기 여기를 클릭하세요

jQuery 기본 구조

제이쿼리란?

우리가 웹에서 여러가지 효과를 나타낼때 자바스크립트를 활용해 아주 어렵고 복잡하게 기능 구현 하는것을 제이쿼리는 아주 간단하게 구현하게 도와주는 자바스크립트 라이브러리 입니다.

제이쿼리의 소스는 <head></head> 사이에 위치 하게 됩니다. 그냥 사용해서는 안되며

<script type="text/javascript"></script>사이에 써 넣게 됩니다.

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript">

// 이곳에 작성

</script>

</head>

<body>

</body>

</html>

그럼 script태그 안에 제이쿼리의 소스 기본형을 써넣어 봅시다.

<script type="text/javascript">

$(function(){

});

</script>

위의 소스가 기본형입니다.

html기본 문서형에 합쳐본다면

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript">

$(function(){

});

</script>

</head>

<body>

</body>

</html>

위와 같이 작성을 하면 됩니다. 하지만 저곳 안에 제이쿼리소스를 작성하는것만으로는 아직 제이쿼리는 작동할 준비가 끝나지 않았습니다. 자바스크립트를 쉽게 표현하기 위해 바꿔놓은 제이쿼리 라이브러리 파일을 같이 불러와야 합니다. 현재 작성중에 있는 제이쿼리 라이브러리 소스의 버젼은 최신버젼이 3.2.0 이네요 시간이 흐름에 따라 버젼은 더 올라갈 것입니다. 가급적 최신버젼을 사용해 주시는게 좋습니다. 현재 최신버젼의 제이쿼리 라이브러리 파일의 경로는 http://code.jquery.com/jquery-3.2.0.min.js 입니다.

이 주소는 제이쿼리 홈페이지에 들어가셔서 다운로드에 들어가시면 보실 수 있습니다. 그 소스를 복사해서 자신만의 서버에 보관하고 사용하셔도 무관합니다. 이 소스도 스크립트 태그를 이용해서 불러 오면 됩니다.

사용방법은

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>

위와 같습니다.

전체 소스로 본다면

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>

<script type="text/javascript">

$(function(){

});

</script>

</head>

<body>

</body>

</html>

위 예제 실행 하며  아직은 아무것도 나타나지 않음이 정상입니다.

그럼 다음 강좌에서는 셀렉터 선택에 대해서 배워보겠습니다.