쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.
JSONArray
- JSONObject을 배열에 넣고 사용
- [ { 이름:값...}, {이름:값...}, {이름:값...}...]
- 배열 안에 JSONObject 객체가 여러 개 정의
//1. JSONArray 생성
var jsonArr
=[ { name:"김경태",age:24}, { name:"김규미",age:25}, { name:"윤상준",age:26} ];
//2. 반복
var jsonObj;
for( var i =0; i < jsonArr.length; i++ ){
//3. 반복중인 방의 값을 변수 저장
jsonObj=jsonArr[i];
//4. 값 얻기
jsonObj.이름
}
* 복합형태
- JSONObject 안에 값으로 JSONArray가 들어있는 경우
이름 : 값... // 단일 값에 대한 저장( 검색 결과에 대한 부가적인 정보를 저장 )
이름 : [ {이름:값...}, {이름:값...}, {이름:값...}... ]
// 중복 값에 대한 저장 ( 검색결과에 대한 데이터를 저장 )
* closure
- 접근제한을 변경할 때 사용( 함수 안에서 선언된 변수나 함수를 함수 외부에서 사용하기 위해 )
- ( ) 사용, { } 사용 두 가지 형태로 사용할 수 있다.
- ( )를 이용한 closure
선언)
var 변수명=( {이름:값,,, 이름 :function(){ 코드,,,,} ,,,} );
사용)
변수명.이름
변수명.함수명();
- { } 사용한 closure ( 함수 안에 변수나 함수를 외부에서 접근 하기 위해 사용)
function(매개변수, ...){
var 변수명=값;
function 함수명(매개변수... ){
}
}
// 정의된 함수 외부에서 사용할 수 없다.
// 사용하려면 아래처럼 closure로 변수와 함수를 연결하고 closure를 반환한다.
////closure 사용
var 변수명= function(매개변수, ...){
var 변수명=값;
function 함수명(매개변수,,, ){
}
return {이름:변수명, 이름: 함수명, ... };
};
- closure 예시
//매개변수 없음
var closure=function(){
var name="홍길동"
function test( msg ){
return "메시지 : " + msg;
}
// 함수외부에서 사용할 이름과 내부의 이름 묶어주는 JSONObject을
// closure라고 한다.
return { na : name, fun : test};
};
// 사용
// 무기명함수를 호출하여 closure를 얻고, closure의 이름으로
// 함수 안의 변수나 함수를 사용한다.
var name = closure().na;
var msg = closure().fun("헬로");
jQuery
- 2006년 John Resig가 제작하여 발표
- write less, do more – 적게 쓰고 많은 일을 하기 위해 개발된 JavaScript Library
- 단순화 – 가독성 향상, 개발효율성이 향상
- 웹 표준을 기반으로 개발되었음( 모든 웹 브라우저에서 동작- cross browsing )
- CSS의 selector를 그대로 사용할 수 있다.
- AJAX를 단순화
- jquery.com에서 배포( compressed version, uncompressed version )
- 다양한 CDN(Content Delivery Network)을 통해 배포
( 사용자가 있는 위치와 지리적으로 가장 가까운 복제서버에서 파일을 다운로드하는 기술 )
- ajax, event, effect, DOM, plug in 제공
( plug in : 자바스크립트 개발자가 자주 사용되는 기술들을 미리 구현해 놓은 것 )
* compressed version
- 압축버전- 기계중심
- 프로그램에 반드시 필요한 공백만 남기고, 필요없는 주석, 엔터, 탭을
삭제한 소스파일 => 파일의 크기가 축소
- 단점 : 코드읽기가 어렵다.
- 장점 : 파일이 가볍다.( 다운로드를 빠르게 수행 )
- 파일명에 min이 들어간다.
* uncompressed version
- 비압축버전 –사람중심
- 주석, 엔터, 탭을 가지고 있는 소스파일
- 장점 : 코드를 읽기가 편하다.( 수정 편함 )
- 단점 : 파일이 용량 크다.
//1. 배포된 .js 를 HTML 에 외부파일방식으로 로딩( 또는 CDN 사용 )
<script type="text/javascript" src="URL"></script>
//2. <script> 새로 열어 코드 작성
<script type="text/javascript">
// 자바스크립트 문법 사용
// 외부파일 방식으로 연결된 .js 에서 제공하는 기능 => jQuery코드
</script>
// 문법
// $ - jQueryObject
$("selector").jquery함수( function (){
// first class function : 함수가 데이터 형으로 사용되기 때문에
코딩 문장
});
// $ : jQuery Object
// ("selector") : selector에 해당하는 태그를 찾고
// jquery함수명 : 제공되는 기능을 적용
// function() : 개발자가 제공하는 기능으로 일 처리
$("selector").jquery함수명( function(){
});
* jQuery 로딩
- document 로딩 : HTML <body> 태그에 태그 정보가 로딩되면 jQuery 실행
// (document).ready 생략 가능
$(document).ready(function(){
});
- window로딩 : HTML 문서에 <body> 태그에서 사용되는 모든 객체가 로딩되면 실행
load는 ready보다 로딩속도가 느리다.
$(window).load(function(){
});
* jQuery Selector
- CSS의 selector와 같다.
- id selector사용
$("#id명").기능( function (){
//구현할 기능
});- class select사용
$(".class명").기능( function (){
//구현할 기능
});
- tag selector
$("태그명").함수명( ... );
- multiple selector
$( "태그명, ..." ).함수명( ... );
- attribute selector
$("[속성명='값']").함수명( ... );
- sub selector
$("부모태그명 > 자식태그명").함수명( ... );
- behavior selector는 지원하지 않고 hover() 함수로 사용할 수 있다.
$("대상:hover").함수명( ... ); => $("selector").hover( ... );
// :odd – 홀수에 적용
// :even – 짝수에 적용
$("대상:odd").함수명( ... );
$("대상:even").함수명( ... );
'성장 일기 > 쌍용교육센터' 카테고리의 다른 글
| 0306/jQuery event (0) | 2023.03.06 |
|---|---|
| 0303/jQueryObject 함수 (0) | 2023.03.06 |
| 0228/Storage, JSON (0) | 2023.03.06 |
| 0227/JavaScript (0) | 2023.02.27 |
| 0224/JavaScript (0) | 2023.02.24 |
