├── WWW
    ├── Chap02
    │   ├── 02-01.js
    │   └── 02-01.html
    ├── ResponsibleWeb
    │   ├── style_portrait.css
    │   ├── style_landscape.css
    │   ├── mediaquery_orientation.html
    │   ├── mediaquery_type.html
    │   ├── mediaquery_import.html
    │   ├── mediaquery_width.html
    │   ├── viewport.html
    │   ├── mediaquery_web.html
    │   └── mediaquery.html
    ├── resource
    │   ├── cat.png
    │   ├── chrome.png
    │   └── nanum.ttf
    ├── HTML
    │   ├── header.html
    │   ├── plain.txt
    │   ├── text.html
    │   ├── textInput.html
    │   ├── av.html
    │   ├── html5-form.html
    │   ├── select.html
    │   ├── noriben1.html
    │   ├── todayInfo2.html
    │   ├── table.html
    │   ├── noriben3.html
    │   ├── noriben2.html
    │   └── form.html
    ├── CSS
    │   ├── transform.html
    │   ├── css.html
    │   ├── style_spacing.html
    │   ├── selector_typeStruct.html
    │   ├── layout_position.html
    │   ├── style_color.html
    │   ├── selector_child.html
    │   ├── selector_class.html
    │   ├── style_background.html
    │   ├── style_visibility.html
    │   ├── style_text.html
    │   ├── style_border.html
    │   ├── animation.html
    │   ├── layout_overflow.html
    │   ├── selector_attribute.html
    │   ├── layout_display.html
    │   └── layout_float.html
    ├── JavaScriptInHtml.html
    ├── jQuery
    │   ├── first.html
    │   ├── selector.html
    │   ├── myMusic.html
    │   ├── todo.html
    │   ├── event.html
    │   └── jquery.min.js
    └── ch08
    │   ├── 08-02.html
    │   ├── 08-04.html
    │   └── 08-01.html
├── Keynote
    ├── 1.Data.pdf
    ├── 2.OpAndControls.pdf
    ├── 4.ClassAndObject.pdf
    └── 3.FunctionAndClosure.pdf
├── .gitignore
├── 06.Closure
    ├── README.md
    ├── closure_context.js
    └── closure.js
├── 10.Promise
    ├── syncTask.js
    ├── asyncCallback.js
    ├── promise_all.js
    ├── asyncTask.js
    ├── asyncTask_promise.js
    ├── custom_task.js
    └── promise.js
├── 07.Class
    ├── README.md
    ├── staticMethod.js
    ├── inheritance.js
    └── class.js
├── 03.Collections
    ├── README.md
    ├── array_loop.js
    ├── array_destructuring.js
    ├── array_cloning.js
    ├── map_type.js
    └── array.js
├── 01.Data
    ├── boolean.js
    ├── naming.js
    ├── string_backquote.js
    ├── README.md
    ├── let.js
    ├── var.js
    ├── nan.js
    ├── infinity.js
    ├── null.js
    ├── const.js
    ├── dataType.js
    ├── typeConvert.js
    ├── undefined.js
    ├── numbers.js
    └── string.js
├── 04.OperatorAndControls
    ├── README.md
    ├── switch_case.js
    ├── equal.js
    ├── in_delete.js
    ├── forloop.js
    ├── and_or.js
    └── instanceof.js
├── 05.Function
    ├── callee.js
    ├── README.md
    ├── parameter.js
    ├── overloading.js
    ├── arrow_function.js
    ├── arrow_shortform.js
    ├── inner_function.js
    ├── iife.js
    ├── variadic_parameters.js
    ├── function.js
    ├── arrowInFunction.js
    ├── callback.js
    └── destructuring_function.js
├── 09.ErrorHandling
    ├── finally.js
    ├── error_catch.js
    ├── try_catch.js
    ├── custom_error.js
    └── throw.js
├── 99.Draft
    ├── scope_chain.js
    ├── generator.js
    └── scope.js
├── 02.Object
    ├── README.md
    ├── object_shorthand.js
    ├── object_loop.js
    ├── referenceType.js
    ├── object_destructuring.js
    ├── object_property.js
    ├── object_cloning.js
    └── object.js
├── .editorconfig
├── 11.BasicObject
    ├── number.js
    ├── math.js
    └── date.js
├── 08.MapFilterReduce
    ├── pipe.js
    ├── map.js
    ├── reduce.js
    └── filter.js
└── README.md


/WWW/Chap02/02-01.js:
--------------------------------------------------------------------------------
1 | document.writeln('Hello JavaScript');


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/style_portrait.css:
--------------------------------------------------------------------------------
1 | div {
2 |    clear:both;
3 |    background-color: red;
4 | }


--------------------------------------------------------------------------------
/Keynote/1.Data.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/Keynote/1.Data.pdf


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/style_landscape.css:
--------------------------------------------------------------------------------
1 | div {
2 |    float:left;
3 |    background-color: blue;
4 | }


--------------------------------------------------------------------------------
/WWW/resource/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/WWW/resource/cat.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | .eslintrs.js
3 | Draft
4 | .idea
5 | .DS_Store
6 | 


--------------------------------------------------------------------------------
/WWW/resource/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/WWW/resource/chrome.png


--------------------------------------------------------------------------------
/WWW/resource/nanum.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/WWW/resource/nanum.ttf


--------------------------------------------------------------------------------
/06.Closure/README.md:
--------------------------------------------------------------------------------
1 | # 클로저
2 | 
3 | * closure : 함수 객체, 함수를 파라미터로 입력, 반환값으로 사용
4 | * closure_context : 클로저 콘텍스트
5 | 


--------------------------------------------------------------------------------
/Keynote/2.OpAndControls.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/Keynote/2.OpAndControls.pdf


--------------------------------------------------------------------------------
/Keynote/4.ClassAndObject.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/Keynote/4.ClassAndObject.pdf


--------------------------------------------------------------------------------
/Keynote/3.FunctionAndClosure.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wannabewize/javascript-samples/HEAD/Keynote/3.FunctionAndClosure.pdf


--------------------------------------------------------------------------------
/10.Promise/syncTask.js:
--------------------------------------------------------------------------------
1 | function justDoIt() {
2 |   console.log('just do it');
3 | }
4 | 
5 | justDoIt();
6 | console.log('== After justDoIt');


--------------------------------------------------------------------------------
/07.Class/README.md:
--------------------------------------------------------------------------------
1 | # 클래스와 객체
2 | 
3 | JavaScript ES6의 클래스 문법
4 | 
5 | * class : class를 이용한 클래스 정의와 사용
6 | * inheritance : 클래스 상속
7 | * staticMethod : 인스턴스 메소드와 정적 메소드
8 | 


--------------------------------------------------------------------------------
/03.Collections/README.md:
--------------------------------------------------------------------------------
1 | # 콜렉션 타입
2 | 
3 | * array : 배열
4 | * array_cloning : 배열 복제
5 | * array_loop : 배열 원소 순회하기
6 | * array_destructuring : 배열 구조 분해 할당
7 | 
8 | * map_type : 맵 타입


--------------------------------------------------------------------------------
/01.Data/boolean.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 부울 타입
 3 |  */
 4 | 
 5 | var val = true
 6 | var val2 = (1 == 1)
 7 | 
 8 | console.log('typeof :', typeof val) // ‘boolean’
 9 | 
10 | // 값 비교
11 | if (val) {
12 |   console.log('참');
13 | }


--------------------------------------------------------------------------------
/04.OperatorAndControls/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript의 연산자
2 | 
3 | * equal : 동등 비교 연산자, ==, ===
4 | * in_delete : 객체의 프로퍼티 존재 확인(in), 프로퍼티 제거(delete) 연산자
5 | * instanceof : 객체의 타입 확인 instanceof 연산자   
6 | * and_or : and, or 연산자


--------------------------------------------------------------------------------
/05.Function/callee.js:
--------------------------------------------------------------------------------
 1 | function func1(arg) {
 2 |   console.log(arguments);
 3 |   console.log('callee', arguments.callee);
 4 |   //arguments.callee();
 5 | }
 6 | 
 7 | function func2() {
 8 |   func1(1);
 9 | }
10 | 
11 | func2();


--------------------------------------------------------------------------------
/09.ErrorHandling/finally.js:
--------------------------------------------------------------------------------
 1 | try {
 2 |   doIt();
 3 |   console.log('Success');
 4 | }
 5 | catch (error) {
 6 |   console.log('Fail');
 7 | }
 8 | finally {
 9 |   console.log('Finally!');
10 | }
11 | 
12 | // function doIt() {}


--------------------------------------------------------------------------------
/01.Data/naming.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 변수/상수 이름 규칙
 3 |  */
 4 | 
 5 | let name
 6 | let $val
 7 | let _value
 8 | 
 9 | // 숫자로 시작 불가
10 | // let 3value 
11 | 
12 | // 대쉬 사용 불가
13 | // let kor-score
14 | 
15 | // 예약어 사용 불가
16 | // let default
17 | 
18 | 


--------------------------------------------------------------------------------
/09.ErrorHandling/error_catch.js:
--------------------------------------------------------------------------------
 1 | // 정의되지 않은 함수 호출 - 에러 상황
 2 | // doIt();
 3 | 
 4 | try {
 5 |   doIt();
 6 | }
 7 | catch (error) {
 8 |   const message = error.message;
 9 |   console.error(message);
10 | }
11 | 
12 | console.log('== END ==');


--------------------------------------------------------------------------------
/99.Draft/scope_chain.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Scope Chain
 3 |  */
 4 | 
 5 | function outFn() {
 6 |   var value = 2;
 7 | 
 8 |   function inFn() {
 9 |     console.log('value : ', value++);
10 |   }
11 | 
12 |   inFn();
13 | }
14 | 
15 | outFn();
16 | outFn();


--------------------------------------------------------------------------------
/05.Function/README.md:
--------------------------------------------------------------------------------
1 | # 함수
2 | 
3 | * function : 함수 선언과 호출
4 | * arrow_function : Arrow Function
5 | * parameter : 파라미터 
6 | * overloading : 함수 오버로딩
7 | * variadic_parameters : 가변길이 파라미터
8 | * innser_function : 함수 내 함수 정의
9 | * iife : Immediately Invoked Function Expression


--------------------------------------------------------------------------------
/02.Object/README.md:
--------------------------------------------------------------------------------
 1 | # 객체 타입
 2 | 
 3 |   * object : 객체 생성과 접근
 4 |   * object_property : 객체의 프로퍼티
 5 |   * object_cloning : 객체 복제
 6 |   * object_destructuring : 객체 구조 분해 할당
 7 |   * object_loop : 객체 프로퍼티 순회
 8 |   * object_shorthand : 객체 프로퍼티 축약 표현
 9 |   * referenceType : 밸류 타입과 레퍼런스 타입
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = false
12 | insert_final_newline = false


--------------------------------------------------------------------------------
/05.Function/parameter.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 함수 파라미터
 3 |  */
 4 | 
 5 | function func(arg1, arg2) {
 6 |   console.log('arg1:', arg1, 'arg2:', arg2);
 7 | }
 8 | 
 9 | console.log('func(2, 3)');
10 | func(2, 3)
11 | 
12 | console.log('func(4)');
13 | func(4)
14 | 
15 | console.log('func(5, 6, 7)');
16 | func(5, 6, 7)


--------------------------------------------------------------------------------
/04.OperatorAndControls/switch_case.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Switch - case
 3 |  */
 4 | 
 5 | var value = 2;
 6 | 
 7 | switch (value) {
 8 | case 1:
 9 |    console.log('switch-case value=1');
10 |    break;
11 | case 2, 3, 4:
12 |    console.log('switch-case 2, 3, 4');
13 |    break;
14 | default:
15 |    console.log('default:');
16 | }


--------------------------------------------------------------------------------
/99.Draft/generator.js:
--------------------------------------------------------------------------------
 1 | function* gen() {
 2 |   yield 1;
 3 |   yield 2;
 4 |   yield 3;
 5 | }
 6 | 
 7 | const g = gen();
 8 | 
 9 | 
10 | for (const item of g) {
11 |   console.log(item);
12 | }
13 | 
14 | const k = gen();
15 | 
16 | console.log(k);
17 | console.log(k.next());
18 | console.log(k.next());
19 | console.log(k.next());


--------------------------------------------------------------------------------
/WWW/HTML/header.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta charset="UTF8">
 6 | </head>
 7 | 
 8 | <body>
 9 |    <h1>가장 높은 단계의 제목</h1>
10 |    <h2>두 번재 단계의 제목</h2>
11 |    <h3>세 번째 단계의 제목</h3>
12 |    <h4>네 번째 단계의 제목</h4>
13 |    <h5>다섯 번째의 단계의 제목</h5>
14 |    <h6>가장 낮은 단계의 제목</h6>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/05.Function/overloading.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 오버로딩. 마지막 함수가 실행된다.
 3 |  */
 4 | 
 5 | function add(i) {
 6 |    console.log('add(i)');
 7 | }
 8 | 
 9 | function add(i, j) {
10 |    console.log('add(i, j)');
11 | }
12 | 
13 | function add(i, j, k) {
14 |    console.log('add(i, j, k)');
15 | }
16 | 
17 | add(1);
18 | add(1, 2);
19 | add(1, 2, 3);


--------------------------------------------------------------------------------
/WWW/HTML/plain.txt:
--------------------------------------------------------------------------------
1 | 노리벤 논짱 도시락 일자리도 찾지 못하고 돈도 없는 변두리 출신의 서른한 살 여성이 딸 논짱을 데리고 친정으로 돌아옵니다.
2 | 그리고 딸을 위해 만든 노리벤이 유명해져 도시락 가게를 엽니다. 참고로, 전날 먹은 반찬들을 갖고도 층을 쌓으면 영양가 만점인 도시락이 된답니다. 아이디어를 낸 요리도 제안했지요. 재료(1인분) 밥(도시락 1통 분량), 후리카케, 김, 간장 적당량, 달걀 소보로, 시금치 무침, 무말랭이 멸치 볶음. 만드는 법 1. 밥 1/3 양에는 무말랭이 멸치 볶음 적당량을, 1/3 양에는 후리카게를 섞는다. 2. 무말랭이 멸치 볶음을 섞은 밥은 얹고 간장을 뿌린다.


--------------------------------------------------------------------------------
/02.Object/object_shorthand.js:
--------------------------------------------------------------------------------
 1 | const title = 'Star Wars';
 2 | const director = 'George Lucas';
 3 | 
 4 | const movie = {
 5 |   title: title,
 6 |   director: director
 7 | };
 8 | 
 9 | // Object shorthand notation
10 | // 키 이름과 밸류(변수/상수) 이름이 같은 경우 - 
11 | const starwars = {
12 |   title,
13 |   director
14 | };
15 | 
16 | console.log(starwars);


--------------------------------------------------------------------------------
/05.Function/arrow_function.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Arrow Function
 3 |  */
 4 | 
 5 | 
 6 | // Arrow Function 정의와 사용
 7 | const greet = (who) => {
 8 |   console.log('Hello' + who);
 9 | }
10 | 
11 | greet(' ArrowFunction');
12 | 
13 | 
14 | // Arrow Function과 파라미터
15 | const doIt = (what) => {
16 |   console.log('Do', what)
17 | };
18 | 
19 | doIt('coding');
20 | 


--------------------------------------------------------------------------------
/WWW/Chap02/02-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" >
 5 |     <title>02-01</title>
 6 | </head>
 7 | <body>
 8 | <script type="text/javascript" src="02-01.js">
 9 | 
10 | </script>
11 | 
12 | <script type="text/javascript">
13 |     document.writeln('&lt;script&gt; 태그 아래의 인라인 스크립트에 의한 출력입니다.<br/>');
14 | </script>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/06.Closure/closure_context.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 클로저와 컨텍스트
 3 |  */
 4 | 
 5 | function makeId() {
 6 |   var lastId = 0;
 7 | 
 8 |   return function () {
 9 |     return ++lastId
10 |   };
11 | }
12 | 
13 | var idFunc = makeId();
14 | 
15 | console.log(idFunc());
16 | console.log(idFunc());
17 | console.log(idFunc());
18 | 
19 | var idFund2 = makeId();
20 | console.log(idFund2());
21 | console.log(idFund2());


--------------------------------------------------------------------------------
/05.Function/arrow_shortform.js:
--------------------------------------------------------------------------------
 1 | function doIt( runner ) {
 2 |     runner();
 3 | }
 4 | 
 5 | doIt( () => { console.log('hahaha'); } );
 6 | 
 7 | // 1 sentence는 {} 생략 가능
 8 | doIt( () => console.log('hahaha') );
 9 | 
10 | 
11 | function doIt2( runner ) {
12 |     const ret = runner();
13 |     console.log('Do It2 :', ret);
14 | }
15 | 
16 | 
17 | doIt2( () => { return 10; } );
18 | 
19 | // 1줄 return 코드의 경우 {}, return 생략 가능
20 | doIt2( () => 10 );


--------------------------------------------------------------------------------
/01.Data/string_backquote.js:
--------------------------------------------------------------------------------
 1 | //
 2 | // backquote(`)를 이용한 문자열
 3 | //
 4 | 
 5 | const a = 5;
 6 | const b = 10;
 7 | 
 8 | const str1 = a + ' + ' + b + ' = ' + (a + b);
 9 | const str2 = `${a} + ${b} = ${a + b}`;
10 | console.log(str1);
11 | console.log(str2);
12 | 
13 | 
14 | const str3 = 'Hello \nJavascript';
15 | 
16 | // `를 이용한 문자열은 엔터 적용 가능
17 | const str4 = `Hello 
18 | Multi-line
19 | String`;
20 | 
21 | console.log(str3);
22 | console.log(str4);


--------------------------------------------------------------------------------
/05.Function/inner_function.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Inner Function
 3 |  */
 4 | 
 5 |  function goodNight() {
 6 |     function say() {
 7 |         console.log('good night');        
 8 |     }
 9 | 
10 |     say();
11 | }
12 | 
13 | goodNight();
14 | // Error
15 | //say();
16 | 
17 | 
18 | function circle(radius) {
19 |     var pi = 3.14;
20 |     function area(r) {
21 |         return r * r * pi;
22 |     }
23 |     return area(radius);
24 | }
25 | var ret = circle(3);
26 | console.log(ret);


--------------------------------------------------------------------------------
/11.BasicObject/number.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Number
 3 |  */
 4 | 
 5 | var num1 = 255;
 6 | 
 7 | var newNum;
 8 | 
 9 | newNum = num1.toExponential(3);
10 | // 2.550e+2
11 | console.log(newNum);
12 | 
13 | var num2 = 123.456789;
14 | 
15 | newNum = num2.toFixed(0);
16 | // 123.456789 123 123.46
17 | console.log('toFixed : ', num2, newNum, num2.toFixed(2));
18 | 
19 | newNum = num2.toPrecision(2);
20 | // 123.456789 1.2e+2 123.5
21 | console.log('toPrecision : ', num2, newNum, num2.toPrecision(4));


--------------------------------------------------------------------------------
/WWW/HTML/text.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <meta charset="UTF8">
 5 | </head>
 6 | <body>
 7 |    <p>
 8 |       일자리도 찾지 못하고 돈도 없는 변두리 출신 서른한 살 여성이
 9 |       <br> 딸 <strong>논짱을 데리고</strong> 친정으로 돌아옵니다.
10 |    </p>
11 |    <p>
12 |       참고로, <del>전날 먹은</del> 반찬들을 갖고도 층을 쌓으면 영양가 만점인 도시락이 된답니다.
13 |    </p>
14 | 
15 |    <code>
16 |     &lt;p&gt;Paragraphs&lt;/p&gt;
17 | </code>
18 | 
19 |    <p>맛있는 <a href="dosirak.html">도시락!</a></p>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/10.Promise/asyncCallback.js:
--------------------------------------------------------------------------------
 1 | function justDoIt(callback) {
 2 |     setTimeout(() => {
 3 |         callback();
 4 |     }, 1000);
 5 | }
 6 | 
 7 | function add(i, j, callback) {
 8 |     setTimeout(() => {
 9 |         const sum = i + i;
10 |         callback(sum);
11 |     }, 1000);
12 | }
13 | 
14 | justDoIt(() => {
15 |     console.log('just do it');
16 | });
17 | 
18 | add(3, 4, (sum) => {
19 |     console.log(`3 + 4 = ${sum}`);
20 | })
21 | console.log('== The End');
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/WWW/CSS/transform.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 | </head>
 6 | <div>
 7 |     <p style="transform:rotate(30deg)">Rotate</p>
 8 |     <p style="transform:translate(200px, 200px)">Translate</p>
 9 |     <p style="transform:scale(2.0, 0.8)">Scale</p>
10 |     <p style="transform:skew(45deg)">Skew</p>
11 | </div>
12 | <style>
13 |    div {width:300px; height:300px; text-align: center; position:relative; top:100px; border:solid 1px black;}   
14 | </style>
15 | </html>


--------------------------------------------------------------------------------
/WWW/HTML/textInput.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |     <head>
 4 |         <style>
 5 |             h2 {background-color:#F6F6F6};
 6 |         </style>
 7 |     </head>
 8 |     <body>
 9 |         <h2>TextArea</h2>
10 |         <textarea cols="40" rows="5" size=40>
11 |         </textarea>
12 |         <hr>
13 |         <h2>Input Text</h2>        
14 |         <input type='text' size=20 maxlength=10> <br/>       
15 |         <input type='password' size=20 maxlength="10">        
16 |     </body>
17 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/css.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ko">   
 3 | <head>
 4 |    <meta charset="utf-8">
 5 |    <title>같은 속성이 있을 경우, 나중에 작성한 내용이 적용된다.</title>
 6 |    <style>
 7 |       p {
 8 |          font-weight: bold;
 9 |          color: blue;
10 |          text-decoration: none;
11 |       }
12 |       
13 |       p {
14 |          color: red;
15 |          text-decoration: underline;
16 |       }
17 |    </style>
18 | </head>
19 | 
20 | <body>
21 | 
22 |    <p>어떤 스타일이 적용될까요?</p>
23 | 
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/WWW/HTML/av.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | <h1>Video</h1>
 5 | <video width="320" height="240" controls src="=http://media.w3.org/2010/05/bunny/movhttp://2107.co.kr/tacademy/html5_video_source.htmlie.ogv">
 6 | Your browser does not support the video tag.
 7 | </video>
 8 | <h1>Audio</h1>
 9 | <audio controls>
10 |   <source src="horse.ogg" type="audio/ogg">
11 |   <source src="horse.mp3" type="audio/mpeg">
12 | Your browser does not support the audio element.
13 | </audio>   
14 | </body>   
15 | </html>


--------------------------------------------------------------------------------
/WWW/JavaScriptInHtml.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>JavaScript in HTML</title>
 6 |     <script>
 7 |         function buttonClicked() {
 8 |             window.alert('Hello');
 9 |         }
10 |     </script>
11 | </head>
12 | <body>
13 | <h1>Java Script Example</h1>
14 | 
15 | <script>
16 |     document.write('<div>Hello Java Script</div>');
17 | </script>
18 | 
19 | <input type="button" onclick="buttonClicked()" value="Click"/>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/10.Promise/promise_all.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Step 4 - Promise.all
 3 |  */
 4 |  var task1 = new Promise(function (resolve) {
 5 |     setTimeout(function () {
 6 |         console.log('Task1 done');
 7 |         resolve();
 8 |     }, 2000);
 9 | });
10 | 
11 | var task2 = new Promise(function (resolve) {
12 |     setTimeout(function () {
13 |         console.log('Task2 done');
14 |         resolve();
15 |     }, 1000);
16 | });
17 | 
18 | Promise.all([task1, task2]).then(function () {
19 |     console.log('All Task done');
20 | });
21 | 


--------------------------------------------------------------------------------
/03.Collections/array_loop.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 배열 내 원소 순회
 3 |  */
 4 | 
 5 | const array = ['one', 'two', 'three', 'four'];
 6 | 
 7 | // 인덱스를 이용한 순회
 8 | console.log('C style For loop');
 9 | for (let i = 0; i < array.length; i++) {
10 |   const item = array[i];
11 |   console.log(item)
12 | }
13 | 
14 | // for-of
15 | console.log('For of');
16 | for (const item of array) {
17 |   console.log(item);
18 | }
19 | 
20 | console.log('For-Each');
21 | array.forEach((value, index, array) => {
22 |   console.log(`forEach ${value} = ${index}`);
23 | });
24 | 


--------------------------------------------------------------------------------
/09.ErrorHandling/try_catch.js:
--------------------------------------------------------------------------------
 1 | function throwStringError(arg) {
 2 |   if (arg < 0)
 3 |     throw '0보다 작은 값 입력 에러';
 4 | }
 5 | 
 6 | function inputPositive(arg) {
 7 |   if (arg < 0)
 8 |     throw new Error('0보다 작은 값 입력');
 9 | }
10 | 
11 | try {
12 |   throwStringError(-1);
13 | }
14 | catch (error) {
15 |   console.error(error);
16 | }
17 | 
18 | try {
19 |   inputPositive(-1);
20 | }
21 | catch (error) {
22 |   const message = error.message;
23 |   console.error(message);
24 | }
25 | 
26 | // throwError(-1);
27 | console.log('== END ==');


--------------------------------------------------------------------------------
/02.Object/object_loop.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 객체 내 프로퍼티 순회하기
 3 |  */
 4 | 
 5 | const starwars = {
 6 |   title: '새로운 희망',
 7 |   year: 1977,
 8 |   director: '조지 루카스'
 9 | }
10 | 
11 | // 객체 내 모든 키 배열 : Object.keys
12 | const keys = Object.keys(starwars);
13 | for (const key of keys) {
14 |   const value = starwars[key];
15 |   console.log('prop : ', key, ' value :', value);
16 | }
17 | 
18 | // 객체 내 키를 이용한 순회 : for-in
19 | console.log('For in');
20 | for (const prop in starwars) {
21 |   console.log('prop : ', prop, ' value : ', starwars[prop]);
22 | }
23 | 


--------------------------------------------------------------------------------
/05.Function/iife.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 이름없는 함수 정의하자 마자 호출하기.
 3 |  * IIFE : Immediately Invoked Function Expression
 4 |  */
 5 | 
 6 | // 파라미터 없는 함수 정의와 호출
 7 | (function(){
 8 |    console.log('IIFE Test1');
 9 | })();
10 | 
11 | // with Parameter
12 | (function(arg){
13 |    console.log('IIFE Test2 - argumanet : ', arg.name);
14 | })({'name':'value'});
15 | 
16 | // Arrow Function
17 | (() => {
18 |    console.log("IIFE Test - Arrow Function");
19 | })();
20 | 
21 | ((arg1, arg2) => {
22 |    console.log(`${arg1} + ${arg2} = ${arg1 + arg2}`)
23 | })(1, 2);


--------------------------------------------------------------------------------
/WWW/CSS/style_spacing.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 | <div id="outer" class="block">
 8 |    <div id="inner" class="block">
 9 |       
10 |    </div>
11 |    
12 | </div>   
13 | </body>
14 | <style>
15 |    .block { border : solid 1px black; }
16 |    #outer { width:400px; height:400px; }
17 |    #inner { width:100px; height:100px;
18 |    margin-left: 20px; margin-top:10px;
19 |    padding-right: 10px; padding-top:20px;
20 |    background: yellowgreen;}
21 | </style>
22 | </html>


--------------------------------------------------------------------------------
/02.Object/referenceType.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 밸류 타입과 레퍼런스 타입
 3 |  */
 4 | 
 5 | // Primitive Type
 6 | var a = 10;
 7 | var b = a;
 8 | a = 20;
 9 | 
10 | console.log('a =', a);
11 | console.log('b =', b);
12 | 
13 | // Object는 Reference type
14 | var obj1 = { foo : 10 };
15 | var obj2 = obj1;
16 | obj1.foo = 20;
17 | 
18 | console.log('obj1 =', obj1);
19 | console.log('obj2 =', obj2);
20 | 
21 | // 배열은 Reference Type
22 | var array1 = [1, 2, 3];
23 | var array2 = array1;
24 | array1.push(4);
25 | 
26 | console.log('array1 =', array1);
27 | console.log('array2 =', array2);


--------------------------------------------------------------------------------
/WWW/CSS/selector_typeStruct.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |    <meta charset="UTF8">
 5 | </head>
 6 | 
 7 | <body>
 8 |    <h1>타입 구조</h1>
 9 |    <div class='byType'>
10 |       <h1>첫번째 H1</h1>
11 |       <h1>두번째 H1</h1>
12 |       <h2>첫번째 H2</h2>
13 |       <h1>세번째 H1</h1>
14 |       <h2>두번째 H2</h2>
15 |       <h2>세번째 H2</h2>
16 |    </div>
17 | 
18 |    <style>
19 |       h1:first-of-type {
20 |          color: red;
21 |       }
22 |       
23 |       h2:nth-of-type(2) {
24 |          color: blue;
25 |       }
26 |    </style>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/WWW/jQuery/first.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <script src="jquery.min.js"></script>
 5 |    <script>
 6 |       $(document).ready(function() {
 7 |          console.log('Ready!');
 8 |          
 9 |          $('#target').addClass('border');
10 |          $('div').addClass('size100');
11 |       });
12 |       
13 |    </script>
14 |    <style>
15 |       .border { border : solid 1px black; }
16 |       .size100 { width:100px; height:100px; }
17 |    </style>
18 | </head>   
19 | <body>
20 |    <div id="target"></div>
21 |    
22 | </body>   
23 | </html>


--------------------------------------------------------------------------------
/04.OperatorAndControls/equal.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 동등 연산
 3 |  */
 4 | 
 5 | console.log('== Primitive Type ==');
 6 | console.log(1 == 1);    // true
 7 | console.log(1 == '1');  // true, 자동 형변환
 8 | 
 9 | console.log(1 === 1);   // true
10 | console.log(1 === '1'); // false
11 | 
12 | console.log('== Reference Type ==');
13 | var obj1 = { value : 10 };
14 | var obj2 = obj1;
15 | var obj3 = { value : 10 };
16 | 
17 | console.log(obj1 == obj2 ); // true
18 | console.log(obj1 == obj3 ); // false
19 | 
20 | console.log(obj1 === obj2 ); // true
21 | console.log(obj1 === obj3 ); // false
22 | 


--------------------------------------------------------------------------------
/01.Data/README.md:
--------------------------------------------------------------------------------
 1 | # 데이터 다루기
 2 | 
 3 | ## 변수와 상수
 4 |   * var : var 변수
 5 |   * let : let 변수
 6 |   * const : 상수
 7 |   * naming : 이름 규칙
 8 | 
 9 | ## 주요 데이타 타입
10 |   * boolean : 부울 타입
11 |   * numbers : 숫자 타입
12 |   * nan : Not a Number
13 |   * object : object 타입
14 |   * string : 문자열 다루기
15 |   * string_backquote : backquote(`)를 이용한 문자열
16 |   
17 | ## 타입 정보, 변환
18 |   * dataType : 데이터 타입, 타입 체크
19 |   * typeConvert : 암시적 타입 변환   
20 |   
21 | ## null, undefined
22 |   * undefined : undefined
23 |   * null : null과 undefined
24 |   * nan : NaN. 숫자 판단하기
25 |   * infinity : Infinity
26 | 


--------------------------------------------------------------------------------
/07.Class/staticMethod.js:
--------------------------------------------------------------------------------
 1 | class Cat {
 2 |     constructor(name) {
 3 |         this.name = name;
 4 |     }
 5 | 
 6 |     sayHello() {
 7 |         console.log(`${this.name} says mew mew`);
 8 |     }
 9 | 
10 |     static saySpecies() {
11 |         console.log('나는 고양이!');
12 |     }
13 | }
14 | 
15 | Cat.isCute = function() {
16 |     console.log('Absolutely!');
17 | }
18 | 
19 | // instance method
20 | const cat1 = new Cat('kitty');
21 | cat1.sayHello();
22 | 
23 | const cat2 = new Cat('tom');
24 | cat2.sayHello();
25 | 
26 | // static method
27 | Cat.saySpecies();
28 | Cat.isCute();
29 | 
30 | 


--------------------------------------------------------------------------------
/WWW/HTML/html5-form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | <h1>HTML5 Form attribute</h1>
 5 | <form>
 6 | <label>AUTOCOMPLETE</label>
 7 | <br>
 8 | <input type="text" autocomplete="off">
 9 | <br>
10 | <br>
11 | <label>AUTOFOCUS</label>
12 | <br>
13 | <input type="text" autofocus="autofocus">
14 | <br>
15 | <br>
16 | <label>PLACEHOLDER</label>
17 | <br>
18 | <input type="text" placeholder="내용을 입력하세요.">
19 | <br>
20 | <label>REQUIRED</label>
21 | <br>
22 | <input type="text" required="required">
23 | <br>
24 | <br>
25 | <input type="submit">
26 | <br>
27 | </form>
28 | </body>
29 | </html>
30 |    


--------------------------------------------------------------------------------
/03.Collections/array_destructuring.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 구조 분해 할당(Destructuring)
 3 |  */
 4 | 
 5 | // 배열
 6 | const months = ['Jan', 'Feb', 'March', 'April', 'May'];
 7 | 
 8 | // 배열 내 1, 2번째 원소 대입
 9 | const [first, second] = months;
10 | 
11 | console.log('one :', first);
12 | console.log('two :', second);
13 | 
14 | // 나머지 원소 바인딩
15 | const [jan, feb, ...afterFeb] = months;
16 | console.log('after Feb :', afterFeb);
17 | 
18 | // 원소 바인딩 안하기
19 | const [ , , third] = months;
20 | console.log('third :', third);
21 | 
22 | // 범위 벗어난 원소 접근 - 6번째
23 | const [, , , , , sixth] = months;
24 | console.log('sixth :', sixth);


--------------------------------------------------------------------------------
/99.Draft/scope.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 변수 스코프
 3 |  */
 4 | 
 5 | console.log('== Example1 ==');
 6 | var value1 = 0;
 7 | {
 8 |   var value1 = 1;
 9 | }
10 | console.log('value1 = ', value1);
11 | 
12 | 
13 | console.log('== Example2 ==');
14 | 
15 | for (var value2 = 0; value2 < 10; value2++) {
16 | 
17 | }
18 | 
19 | console.log('value2 = ', value2);
20 | 
21 | 
22 | console.log('== Example3 ==');
23 | 
24 | var value3 = 1;
25 | function fn() {
26 |   var value3 = 2;
27 |   console.log('value3 = ', value3);
28 | }
29 | 
30 | console.log('value3 = ', value3); // 1
31 | fn(); // 2
32 | console.log('value3 = ', value3); // 1


--------------------------------------------------------------------------------
/01.Data/let.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * let을 이용한 변수 다루기. var 대신 let 사용할 것
 3 |  * - 중복 선언
 4 |  * - Hoisting
 5 |  */
 6 | 
 7 | console.log('== Redeclaration');
 8 | 
 9 | // 같은 이름으로 중복 정의시 에러 발생 - Redeclaration Error on let
10 | let letVal1 = 1;
11 | // Error
12 | // let letVal1 = 2; 
13 | 
14 | 
15 | console.log('== Hoisting');
16 | 
17 | // 먼저 사용하고 나중에 정의하기 - let 에서는 에러 - ReferenceError: Cannot access 'letValue2' before initialization
18 | // console.log('letVal2 = ', letValue2); // Error
19 | let letValue2 = 10;
20 | 
21 | 
22 | // 블록 스코프.
23 | let scope = 0;
24 | {
25 |   let scope = 1;
26 | }
27 | console.log('scope = ', scope);


--------------------------------------------------------------------------------
/02.Object/object_destructuring.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 구조 분해 할당(Destructuring)
 3 |  * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 4 |  */
 5 | 
 6 | const counting = { one: '일', two: '이', three: '삼', four: '사'};
 7 | 
 8 | // 객체 내 원소 대입
 9 | const one = counting.one;
10 | 
11 | // 객체 내 two, three 원소 대입
12 | const {two, three} = counting;
13 | console.log(`two : ${two}, three : ${three}`);
14 | 
15 | // 없는 원소 접근
16 | const {four, nine} = counting;
17 | console.log(`four : ${four}, nine : ${nine}`);
18 | 
19 | // 이름 변경
20 | const {two: item} = counting;
21 | console.log('item :', item);


--------------------------------------------------------------------------------
/05.Function/variadic_parameters.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 가변길이 파라미터
 3 |  */
 4 | 
 5 | function wantToBuy(...things) {
 6 |    console.log('things : ', things, 'Instance of array?', things instanceof Array);
 7 | 
 8 |    for(item of things) {
 9 |       console.log('I want to buy ' + item);
10 |    }
11 | }
12 | 
13 | wantToBuy('iMac', 'iPhone', 'New Macbook');
14 | 
15 | // 가변길이 파라미터는 1개만 사용 가능 - SyntaxError: Rest parameter must be last formal parameter
16 | // function chaos1(...arg1, ...arg2) {
17 | // }
18 | 
19 | // 가변길이 파라미터는 마지막에만 사용 - SyntaxError: Rest parameter must be last formal parameter
20 | // function chaos2(...arg1, arg2) {
21 | // }


--------------------------------------------------------------------------------
/11.BasicObject/math.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Math 내장 객체
 3 |  */
 4 | 
 5 | console.log('ceil(3.14) : ',Math.ceil(3.14));
 6 | console.log('floor(3.14) : ',Math.floor(3.14));
 7 | console.log('round(3.4) : ', Math.round(3.4), ' round(3.5) : ', Math.round(3.5));
 8 | console.log('abs(-1) : ', Math.abs(-1));
 9 | 
10 | console.log('random() : ', Math.random());
11 | console.log('random 1-10 : ', Math.floor( Math.random()*10 ));
12 | 
13 | 
14 | console.log('max(1, 3, 5, 0, 2, 4)', Math.max(1, 3, 5, 0, 2, 4));
15 | console.log('min(1, 3, 5, 0, 2, 4)', Math.min(1, 3, 5, 0, 2, 4));
16 | 
17 | console.log('pow(2, 3) : ', Math.pow(2, 3));
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/WWW/CSS/layout_position.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta charset="utf-8">
 6 | </head>
 7 | 
 8 | <body>
 9 | 
10 |    <h1>Position</h1>
11 |    <div>Default</div>
12 |    <!--Default 박스 하단 위치 대비 - 왼쪽10, 위10-->
13 |    <div style="position:relative; left:10px; top:10px;">Relative</div>
14 |    <div style="position:absolute; left:200px; top:200px;">Absolute</div>
15 | 
16 | </body>
17 | <style>
18 |    div {
19 |       border: solid 1px black;
20 |       width: 100px;
21 |       height: 100px;
22 |       background-color: lightsteelblue;
23 |       text-align: center;
24 |    }
25 | </style>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/01.Data/var.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * var를 이용한 변수 다루기 - var 대신 let 사용할 것
 3 |  */
 4 | 
 5 | //
 6 | // 같은 이름으로 중복 정의 - 에러 발생 안함
 7 | console.log("== Duplicate Definition ==");
 8 | var val1 = 1;
 9 | console.log('val1 =', val1);
10 | 
11 | var val1 = 2;
12 | console.log('val1 =', val1);
13 | 
14 | //
15 | // 블록 스코프.
16 | console.log("== Scope ==");
17 | var val2 = 0;
18 | console.log('val2 = ', val2);
19 | {
20 |   var val2 = 1;
21 | }
22 | console.log('val2 = ', val2);
23 | 
24 | // Hoisting : 선언 이전에 사용하기 - 에러 발생 안함
25 | console.log("== Hoisting ==");
26 | // 변수 사용
27 | console.log('val3 = ', val3);
28 | // 변수 선언
29 | var val3 = 'val3 is not defined Error';


--------------------------------------------------------------------------------
/WWW/CSS/style_color.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>   
 3 | <head>
 4 |    <meta charset="utf-8">
 5 |    <style>
 6 |       p {
 7 |          /* 이름으로 색상 지정 */
 8 |          color: red;
 9 |       }
10 |       
11 |       div {
12 |          width:200px;
13 |          height:200px;
14 |          border-width: 5px;
15 |          border-style: solid;
16 |          /* HEX로 색상 지정 */         
17 |          border-color: #000000;
18 |          /* rgb로 색상 지정 */
19 |          background-color: rgb(123,234,012);
20 |       }
21 |    </style>
22 | </head>
23 | <body>
24 |    <div>
25 |       <p>색상 적용하기</p>
26 |    </div>
27 | 
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/selector_child.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="UTF-8">
 4 | </head>
 5 | <body>
 6 |    <h1>Child</h1>
 7 |    <div class="child">
 8 |       <ul>
 9 |          <li>첫 번째</li>
10 |          <li>두 번째</li>
11 |          <li>세 번째</li>
12 |          <li>네 번째</li>
13 |          <li>다섯 번째</li>
14 |       </ul>
15 |    </div>
16 |    <style>
17 |       .child li:first-child {
18 |          color: red;
19 |       }
20 |       
21 |       .child li:nth-child(3) {
22 |          color: blue;
23 |       }
24 |       
25 |       .child li:nth-child(2n) {
26 |          background-color: lightgrey;
27 |       }
28 |    </style>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/02.Object/object_property.js:
--------------------------------------------------------------------------------
 1 | let starwars = {
 2 |   title: 'Star Wars',
 3 |   director: 'George Lucas'
 4 | }
 5 | 
 6 | // 프로퍼티 접근
 7 | console.log(starwars.title);
 8 | console.log(starwars['title']);
 9 | 
10 | 
11 | // computed property
12 | 
13 | let starwarsSeries = {};
14 | 
15 | starwarsSeries['title1'] = '보이지 않는 위험';
16 | starwarsSeries['title2'] = '클론의 습격';
17 | starwarsSeries['title3'] = '시스의 복수';
18 | 
19 | console.log(starwarsSeries);
20 | 
21 | let number = 4;
22 | starwarsSeries['title' + number++] = '새로운 희망';
23 | starwarsSeries['title' + number++] = '제국의 역습';
24 | starwarsSeries['title' + number++] = '제다이의 귀환';
25 | 
26 | console.log(starwarsSeries);


--------------------------------------------------------------------------------
/09.ErrorHandling/custom_error.js:
--------------------------------------------------------------------------------
 1 | class BelowZeroError extends Error {
 2 |   constructor(message, code) {
 3 |     super(message);
 4 |     this.code = code;
 5 |   }
 6 | }
 7 | 
 8 | function inputPositive(arg) {
 9 |   if (arg < 0)
10 |     throw new BelowZeroError('0보다 작은 값 입력', 10001);
11 | }
12 | 
13 | 
14 | try {
15 |   inputPositive(-1);
16 | }
17 | catch (error) {
18 |   if (error instanceof BelowZeroError) {
19 |     const message = error.message;
20 |     const code = error.code;
21 |     console.error('BelowZeroError!', message, code);
22 |   }
23 |   else {
24 |     console.error('그외 에러 발생')
25 |   }
26 | }
27 | 
28 | // throwError(-1);
29 | console.log('== END ==');


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery_orientation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta name='viewport' content="user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=1">
 6 |    <style>
 7 |       div {
 8 |          width: 300px;
 9 |          height: 300px;
10 |          border: solid 1px black;
11 |          text-align: center;
12 |       }
13 |       
14 |       @media (orientation:landscape) {
15 |          div { display: inline-block; }
16 |       }
17 |       
18 |    </style>
19 | 
20 | </head>
21 | 
22 | <body>
23 |    <div>
24 |       <p>A</p>
25 |    </div>
26 |    <div>
27 |       <p>B</p>
28 |    </div>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery_type.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <style>
 6 |       div {
 7 |          width: 300px;
 8 |          height: 300px;
 9 |          border: solid 1px black;
10 |          text-align: center;
11 |       }
12 |       
13 |       @media print {
14 |          div { background-color: blue; display: inline-block; }
15 |       }
16 |       
17 |       @media screen {
18 |          div { background-color: red; display:block; }                  
19 |       }
20 |    </style>
21 | 
22 | </head>
23 | 
24 | <body>
25 |    <div>
26 |       <p>A</p>
27 |    </div>
28 |    <div>
29 |       <p>B</p>
30 |    </div>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery_import.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta name='viewport' content="user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=1">
 6 |    <style>
 7 |       div {
 8 |          width: 300px;
 9 |          height: 300px;
10 |          border: solid 1px black;
11 |          text-align: center;
12 |       }
13 |    </style>
14 |    
15 |    <style>
16 |       @import url("style_portrait.css") screen and (orientation:portrait);
17 |       @import url("style_landscape.css") screen and (orientation:landscape);
18 |    </style>
19 | </head>
20 | 
21 | <body>
22 |    <div>A</div>
23 |    <div>B</div>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/01.Data/nan.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 숫자 판단하기 : isNaN
 3 |  */
 4 | 
 5 | console.log('== Sample codes for NaN==\n\n');
 6 | 
 7 | console.log('typeof NaN :', typeof NaN);
 8 | 
 9 | console.log('isNaN(1) :', isNaN(1));
10 | console.log(`isNaN('1') :`, isNaN('1'));
11 | console.log(`isNaN('Hello') :`, isNaN('Hello'));
12 | console.log(`isNaN(0/0) :`, isNaN(0/0));
13 | console.log(`0/0 == NaN :`, 0/0 == NaN);
14 | 
15 | console.log('\n== using undefined variable ==\n')
16 | 
17 | let x;
18 | console.log('x :', x);
19 | console.log(`x == undefined:`, x == undefined);
20 | console.log('isNaN(x) :', isNaN(x));
21 | console.log('x == NaN :', x == NaN);
22 | console.log('x === NaN :', x === NaN);
23 | 
24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/06.Closure/closure.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 클로저
 3 |  */
 4 | 
 5 | // 함수를 객체처럼 사용하기
 6 | var hello = function () {
 7 |   console.log('Hello');
 8 | }
 9 | 
10 | function sayHello() {
11 |   // 함수를 반환
12 |   return hello;
13 | }
14 | 
15 | // 호출의 결과는 함수
16 | var ret = sayHello();
17 | ret();
18 | 
19 | 
20 | // with inner function
21 | function sayHi() {
22 |   function hi() {
23 |     console.log('hi');
24 |   }
25 |   return hi;
26 | }
27 | 
28 | var ret2 = sayHi();
29 | ret2();
30 | 
31 | 
32 | // with inline arrow-function
33 | //
34 | function sayThankyou() {
35 |   return () => {
36 |     console.log('Thank you');
37 |   };
38 | }
39 | 
40 | var ret3 = sayThankyou();
41 | ret3();
42 | 
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/08.MapFilterReduce/pipe.js:
--------------------------------------------------------------------------------
 1 | const movies = [
 2 |     {title: "새로운 희망", year: 1977, us_gross: 460, ww_gross: 312},
 3 |     {title: "제국의 역습", year: 1980, us_gross: 290, ww_gross: 257},
 4 |     {title: "제다이의 귀환", year: 1983, us_gross: 166, ww_gross: 166},
 5 |     {title: "깨어난 포스", year: 2015, us_gross: 936, ww_gross: 1132},
 6 |     {title: "로그 원", year: 2016, us_gross: 532, ww_gross: 524},
 7 |     {title: "라스트 제다이", year: 2017, us_gross: 620, ww_gross: 713},
 8 | ]
 9 | 
10 | const totalGrossAfter2000 = movies
11 |     .filter( item => item.year > 2000)
12 |     .map( item => item.us_gross + item.ww_gross )
13 |     .reduce( (prev, cur) => prev + cur );
14 | 
15 | console.log(totalGrossAfter2000);
16 | 
17 | 


--------------------------------------------------------------------------------
/WWW/jQuery/selector.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <script src="jquery.min.js"></script>
 5 |    <script>
 6 |       $(document).ready(function() {
 7 |          $('div').addClass('size100');
 8 |          
 9 |          // jQuery 노드 변수. $를 앞에 붙이는 규칙
10 |          var $target = $('#target');
11 |          console.log('$var : ', $target);
12 |          $target.addClass('border');
13 |       });
14 |       
15 |    </script>
16 |    <style>
17 |       .border { border : solid 1px black; }
18 |       .size100 { width:100px; height:100px; }
19 |       .redBG { background-color: red; }
20 |    </style>
21 | </head>   
22 | <body>
23 |    <div id="target"></div>
24 |    
25 | </body>   
26 | </html>


--------------------------------------------------------------------------------
/10.Promise/asyncTask.js:
--------------------------------------------------------------------------------
 1 | function asyncTask(success, callback) {
 2 |     setTimeout(function () {
 3 |         console.log('asyncTask done');
 4 |         if (success) {
 5 |             callback(null, 'Success');
 6 |         }
 7 |         else {
 8 |             callback('Error');
 9 |         }
10 |     }, 2000);   
11 | }
12 | 
13 | console.log('== Before Async Task call');
14 | 
15 | asyncTask(true, (err, ret) => {
16 |     console.log('Async Task 성공 :', ret);
17 | });
18 | 
19 | asyncTask(false, (err, ret) => {
20 |     if ( err ) {
21 |         console.log('Async Task 실패', err);
22 |         return;
23 |     }
24 |     console.log('Async Task 성공 :', ret);
25 | });
26 | 
27 | console.log('== After Async Task Call');


--------------------------------------------------------------------------------
/02.Object/object_cloning.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 객체 복제하기
 3 |  */
 4 | 
 5 | const obj1 = { one: "1", two: "2" };
 6 | 
 7 | // 객체 대입
 8 | const obj2 = obj1;
 9 | 
10 | // 객체 복제
11 | const obj3 = {...obj1};
12 | 
13 | // 객체 복제하며 프로퍼티 추가
14 | const obj4 = {...obj1, hundred: "100" };
15 | 
16 | // 객체 복제하며 프로퍼티 추가
17 | const obj5 = {...obj1, hundred: "100", thousand: "1000" };
18 | 
19 | // 원본 객체 수정
20 | obj1.three = "3";
21 | 
22 | console.log('obj1 :', obj1);
23 | console.log('obj2 :', obj2, "obj2는 obj1 같은 객체인가?", obj2 === obj1);
24 | console.log('obj3 :', obj3, "obj3는 obj1 같은 객체인가?", obj3 === obj1);
25 | console.log('obj4 :', obj4, "obj4는 obj1 같은 객체인가?", obj4 === obj1);
26 | console.log('obj5 :', obj5, "obj5는 obj1 같은 객체인가?", obj5 === obj1);
27 | 


--------------------------------------------------------------------------------
/WWW/CSS/selector_class.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |    <meta charset="UTF-8">
 5 | </head>
 6 | 
 7 | <body>
 8 |    <div id='pet_section'>
 9 |       <h1>ID and Class</h1>
10 |       <div class="pet">
11 |          <h1 class="pet_name">Dog</h1>
12 |       </div>
13 | 
14 |       <div class="pet">
15 |          <h1 class="pet_name">Cat</h1>
16 |       </div>
17 |    </div>
18 | 
19 |    <style>
20 |       #pet_section h1 {
21 |          color: blue;
22 |       }
23 |       
24 |       div.pet {
25 |          background-color: lightyellow;
26 |          border: 1px solid black;
27 |       }
28 |       
29 |       .pet_name {
30 |          font-size: 24px;
31 |          text-align: center;
32 |       }
33 |    </style>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/03.Collections/array_cloning.js:
--------------------------------------------------------------------------------
 1 | // Reference Type
 2 | const array1 = [1, 2];
 3 | 
 4 | // 새로운 변수/상수에 대입
 5 | const array2 = array1;
 6 | 
 7 | // 배열 복제
 8 | const array3 = [...array1];
 9 | 
10 | // 배열 복제와 함께 원소 추가
11 | const array4 = [...array1, 100];
12 | 
13 | // 배열 복제와 함께 원소 추가
14 | const array5 = [...array1, 100, 101];
15 | 
16 | // 원 배열 수정
17 | array1.push(3);
18 | 
19 | console.log('array1 :', array1);
20 | console.log('array2 :', array2, "array2는 array1 같은 배열(객체)인가?", array2 === array1);
21 | console.log('array3 :', array3, "array3는 array1 같은 배열(객체)인가?", array3 === array1);
22 | console.log('array4 :', array4, "array4는 array1 같은 배열(객체)인가?", array4 === array1);
23 | console.log('array5 :', array5, "array5는 array1 같은 배열(객체)인가?", array5 === array1);
24 | 


--------------------------------------------------------------------------------
/01.Data/infinity.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Infinity Number
 3 |  */
 4 | console.log('== Infinity ==\n');
 5 | 
 6 | console.log('typeof(Infinity) :',typeof(Infinity))
 7 | 
 8 | var val = 1 / 0;
 9 | console.log('val = 1 / 0 : ', val);
10 | console.log('val == Infinity :', val == Infinity);
11 | 
12 | console.log('Infinity + 1 =', val + 1);
13 | console.log('Infinity - 1 =', val - 1);
14 | 
15 | console.log('isNaN(Infinity) :', isNaN(val));
16 | 
17 | 
18 | //
19 | // -Infinity 
20 | //
21 | console.log('\n== -Infinity==\n');
22 | var val2 = -1 / 0;
23 | console.log('val2 = -1  / 0 :', (-1 / 0));
24 | console.log('val2 == Infinity :', val2 == Infinity);
25 | console.log('val2 == -Infinity :', val2 == -Infinity);
26 | 
27 | console.log('Infinity + -Infinity =', val + val2)
28 | 


--------------------------------------------------------------------------------
/08.MapFilterReduce/map.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Map
 3 |  * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
 4 |  */
 5 | 
 6 | const array = [1, 2, 3, 4];
 7 | 
 8 | // Callback 함수 파라미터 : element, index, array
 9 | const mappedArray = array.map((element, index, array) => {
10 |   return element * 2;
11 | });
12 | 
13 | console.log(mappedArray);
14 | // map의 결과는 배열, 원 배열과 원소의 개수가 같다.
15 | console.log('length equality :', array.length === mappedArray.length);
16 | 
17 | 
18 | // 객체의 배열 -> 문자열 배열로 변환
19 | const movies = [
20 |   { title: "새로운 희망", year: 1977 },
21 |   { title: "제국의 역습", year: 1980 },
22 |   { title: "제다이의 귀환", year: 1983 }
23 | ]
24 | 
25 | const titles = movies.map(item => item.title);
26 | console.log('titles :', titles);


--------------------------------------------------------------------------------
/WWW/HTML/select.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <meta charset="UTF8">
 5 | </head>
 6 | <body>
 7 | <h2>Select 태그</h2>
 8 | <select>
 9 |     <option>없음</option>
10 |     <option>010</option>
11 |     <option>011</option>
12 |     <option>016</option>
13 |     <option selected>018</option>        
14 |     <option>019</option>        
15 | </select>
16 | 
17 | <h2>Checkbox</h2>    
18 | <div>
19 |     <input type="checkbox" name="testCheck" checked>빨강
20 |     <input type="checkbox" name="testCheck">노랑
21 |     <input type="checkbox" name="testCheck">파랑
22 | </div>
23 | 
24 | <h2>Radio</h2>        
25 | <div>
26 |     <input type="radio" name="gender">남
27 |     <input type="radio" name="gender" checked>여 
28 | </div>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery_width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <style>
 6 |       div {
 7 |          width: 300px;
 8 |          height: 300px;
 9 |          border: solid 1px black;
10 |          text-align: center;
11 |       }
12 | 
13 |       @media all and (min-width:320px) {
14 |          div { width:300px; background-color: lightyellow; }
15 |       }
16 |       
17 |       @media all and (min-width:480px) {
18 |          div { width:460px; background-color: yellow; }
19 |       }
20 | 
21 |       @media all and (min-width:640px) {
22 |          div { width:600px; background-color: greenyellow; }
23 |       }
24 |       
25 |    </style>
26 | 
27 | </head>
28 | 
29 | <body>
30 |    <div>
31 |    </div>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/WWW/ch08/08-02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <style>
 4 |    div { width:100px; height:100px; background-color:red; }
 5 | </style>
 6 | <script>
 7 |    window.onload = function() {
 8 |       console.log('onload event');      
 9 |       console.log(document.getElementById('target')); 
10 |    }
11 | </script>     
12 | <body>
13 |    <div id="target">
14 |    </div>
15 |    
16 |    <script>
17 |       var count = 0;
18 |       var target = document.getElementById('target');
19 |       target.addEventListener('click', function clickHandler() {
20 |          console.log('Click ', count++);
21 |          
22 |          if ( count > 10 ) {
23 |             target.removeEventListener('click', clickHandler);
24 |          }
25 |       });
26 |       
27 |    </script>
28 | </body>   
29 | </html>


--------------------------------------------------------------------------------
/WWW/HTML/noriben1.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ko">
 3 | 
 4 | <head>
 5 |    <meta charset="utf-8">
 6 |    <title>노리벤 만드는 방법</title>
 7 | </head>
 8 | 
 9 | <body>
10 |     <h1>노리벤</h1>
11 |     <h2>논짱 도시락</h2>
12 |     <p>일자리도 찾지 못하고 돈도 없는 변두리 출신의 서른한 살 여성이 딸 논짱을 데리고 친정으로 돌아옵니다.</p>
13 |     <p>그리고 딸을 위해 만든 노리벤이 유명해져 도시락 가게를 엽니다. 참고로, 전날 먹은 반찬들을 갖고도 층을 쌓으면 영양가 만점인 도시락이 된답니다. 아이디어를 낸 요리도 제안했지요.</p>
14 |     
15 |     <h2>재료(1인분)</h2>        
16 |     <ul>
17 |         <li>밥(도시락 1통 분량)</li>
18 |         <li>후리카케, 김, 간장 적당량</li>
19 |         <li>달걀 소보로, 시금치 무침, 무말랭이 멸치 볶음</li>
20 |     </ul>
21 |     
22 |     <h2>만드는 법</h2>
23 |     <ol>
24 |         <li>밥 1/3 양에는 무말랭이 멸치 볶음 적당량을, 1/3 양에는 후리카게를 섞는다.</li>
25 |         <li>무말랭이 멸치 볶음을 섞은 밥은 얹고 간장을 뿌린다.</li>
26 |     </ol>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/04.OperatorAndControls/in_delete.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * in, delete 연산자
 3 |  */
 4 | 
 5 | var iu = {
 6 |     name: 'IU',
 7 |     best: '좋은날'
 8 | };
 9 | 
10 | console.log('object : ', iu);
11 | console.log('name property in Obj :', 'name' in iu);			// true
12 | console.log('friend property in Obj :', 'friend' in iu); 		// false
13 | 
14 | var propName = 'name';
15 | console.log('name property in Obj :',propName in iu);		// true
16 | 
17 | // 프로퍼티 제거
18 | delete iu.best;
19 | console.log('After delete "best"', iu);
20 | console.log('best property in Obj :','best' in iu);       // false
21 | 
22 | // 객체 자체 삭제 - 안된다.
23 | delete iu;
24 | console.log('After delete Obj :', iu);
25 | 
26 | // 원시 타입 삭제 - 안된다.
27 | var bar = '1234';
28 | delete bar;				
29 | console.log('After delete String :', bar);                // 1234
30 | 


--------------------------------------------------------------------------------
/10.Promise/asyncTask_promise.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * 프라미스를 사용하는 비동기 태스크
 3 |  */
 4 | 
 5 | function asyncTask(success) {
 6 |     return new Promise((resolve, reject) => {
 7 |         setTimeout(function () {
 8 |             console.log('asyncTask done');
 9 |             if (success) {
10 |                 resolve('Success');
11 |             }
12 |             else {
13 |                 reject('Error');
14 |             }
15 |         }, 2000);        
16 |     });
17 | }
18 | 
19 | console.log('== Before Async Task call');
20 | asyncTask(true).then( ret => {
21 |     console.log('Async Task 성공 :', ret);
22 | });
23 | 
24 | asyncTask(false).then( ret => {
25 |     console.log('Async Task 성공 :', ret);
26 | }).catch( err => {
27 |     console.log('Async Task 실패', err);
28 | })
29 | 
30 | console.log('== After Async Task call')
31 | 


--------------------------------------------------------------------------------
/05.Function/function.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 함수
 3 |  */
 4 | 
 5 | // 함수 정의와 사용
 6 | function sayHello() {
 7 |     console.log('hello');
 8 | }
 9 | sayHello();
10 | 
11 | // function expression
12 | const hello = function() {
13 |     console.log('Hi~');
14 | }
15 | hello();
16 | 
17 | // 반환값
18 | function thankYou() {
19 |     return 'and you?';
20 | }
21 | const ret = thankYou(); 
22 | 
23 | // Parameter
24 | function say(what) {
25 |     console.log('say ' + what);
26 | }
27 | 
28 | say('How are you');
29 | 
30 | const sayHelloTo = function(who) {
31 |     console.log('Hello ' + who);
32 | } 
33 | 
34 | const ret2 = sayHello();
35 | console.log('return value of Non-return function :', ret2); // undefined
36 | 
37 | const sayGiveMeMoney = (amount) => {
38 |     console.log('give me money ', amount);
39 | }
40 | sayGiveMeMoney('all');


--------------------------------------------------------------------------------
/01.Data/null.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * null
 3 |  * undefined과의 비교
 4 |  */
 5 | 
 6 | console.log('== Sample codes for null ==\n');
 7 | 
 8 | // 변수를 null로 선언
 9 | let x = null;
10 | console.log('x의 값 :', x);
11 | 
12 | // null과 비교하기
13 | console.log('x == null :', x == null);
14 | console.log('x === null :', x === null);
15 | // undefined와 비교하기
16 | console.log('x == undefined :', x == undefined);
17 | console.log('x === undefined :', x === undefined);
18 | 
19 | 
20 | if (x) {
21 |   console.log('if (x) 참');
22 | }
23 | else {
24 |   console.log('if (x) 거짓');
25 | }
26 | 
27 | if (!x) {
28 |   console.log('if (!x) 참');
29 | }
30 | else {
31 |   console.log('if (!x) 거짓');
32 | }
33 | 
34 | 
35 | // 타입 비교
36 | console.log('typeof undefined : ', typeof undefined);
37 | // null은 객체 타입(object)
38 | console.log('typeof null : ', typeof null);
39 | 


--------------------------------------------------------------------------------
/WWW/CSS/style_background.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 |   
 8 | <h3>Background</h3>
 9 | <div style="background:#ABC">
10 |    background:#ABC
11 | </div>
12 | <div style="background:url('../resource/chrome.png')">
13 |    background-image, repeat
14 | </div>
15 | <div style="background:url('../resource/chrome.png') no-repeat center">
16 |    background-image, no-repeat, center
17 | </div>
18 | 
19 | <!-- linear-gradient(direction, color-stop1, color-stop2, ...); -->
20 | <!-- http://www.w3schools.com/css/css3_gradients.asp -->
21 | <div style="background:linear-gradient(red, yellow)">
22 |    gradient
23 | </div>
24 | 
25 | </body>
26 | <style>
27 |    div { width:200px; height:100px; text-align: center; margin:3px; border:solid 1px black; }
28 | </style>
29 | </html>


--------------------------------------------------------------------------------
/10.Promise/custom_task.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * 프라미스를 사용하는 태스크
 3 |  */
 4 | function myTask(success) {
 5 |     return new Promise((resolve, reject) => {
 6 |         if (success) {
 7 |             resolve('Promise Function task done');
 8 |         }
 9 |         else {
10 |             reject('Promise Function task failure');
11 |         }
12 |     });
13 | }
14 | 
15 | // 성공
16 | myTask(true).then(ret => {
17 |     console.log('myTask 성공. 결과:', ret);
18 | }, err => {
19 |     console.log('myTask 실패. 에러:', err);
20 | });
21 | 
22 | // 실패
23 | myTask(false).then(ret => {
24 |     console.log('myTask 성공. 결과:', ret);
25 | }, err => {
26 |     console.log('myTask 실패. 에러:', err);
27 | });
28 | 
29 | // catch로 에러 처리
30 | myTask(false).then(ret => {
31 |     console.log('myTask 성공. 결과:', ret);
32 | }).catch(err => {
33 |     console.log('myTask 실패. 에러:', err);
34 | });
35 | 
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript Examples
 2 | 
 3 | ### Usage
 4 |   - node 와 함께 동작   
 5 |   `node SOURCE-FILE.JS`
 6 | 
 7 | ## 01.Data : 데이터 다루기
 8 | * 변수와 상수
 9 | * 데이터 타입
10 | * 주요 데이타 타입
11 | * 밸류 타입과 레퍼런스 타입
12 | 
13 | ## 02.Object
14 |   * 객체 타입
15 |   * 객체 구조 분해 할당(object destructuring)
16 | 
17 | ## 03.Collection
18 |   * 배열
19 |   * 맵
20 |   * 구조분해할당(array destructuring)
21 | 
22 | ## 04.Operator, Control
23 |   * 연산자
24 |   * 반복문
25 |   * 조건문
26 | 
27 | ## 05.Function
28 |   * 함수 정의와 사용
29 | 
30 | ## 06.Closure
31 |   * 클로저
32 | 
33 | ## 07.Class
34 |   * 클래스 정의와 객체 생성
35 |   * 프로퍼티와 메소드
36 |   * 상속
37 | 
38 | ## 08.MapFilterReduce
39 |   * map
40 |   * filter
41 |   * reduce
42 | 
43 | ## 09.ErrorHandling
44 |   * try_catch : 에러 처리
45 |   * throw : 에러 발생   
46 | 
47 | ## 10.Promise
48 |   * 콜백
49 |   * 프라미스
50 | 
51 | ## 11.BasicObject
52 |   * 기본 객체
53 | 
54 |    
55 | 


--------------------------------------------------------------------------------
/09.ErrorHandling/throw.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 에러 발생
 3 |  */
 4 | function throwStringError() {
 5 |   throw 'a';
 6 | }
 7 | 
 8 | function throwNumberError() {
 9 |   throw 1;
10 | }
11 | 
12 | function throwObjectError() {
13 |   throw { value: '1234' };
14 | }
15 | 
16 | function throwError() {
17 |   throw new Error('Error Message');
18 | }
19 | 
20 | try {
21 |   throwStringError();
22 | } catch (error) {
23 |   console.log('문자열 에러 발생:', error);
24 | }
25 | 
26 | try {
27 |   throwNumberError();
28 | } catch (error) {
29 |   console.log('Number 타입 에러 발생:', error);
30 | }
31 | 
32 | try {
33 |   throwObjectError();
34 | } catch (error) {
35 |   console.log('객체형 타입 에러 발생:', error.value);
36 | }
37 | 
38 | try {
39 |   throwError();
40 | } catch (error) {
41 |   console.log('Error 타입 에러 발생', error.message);
42 |   console.log('stack trace');
43 |   console.log(error);
44 | }
45 | console.log('== END ==');


--------------------------------------------------------------------------------
/WWW/HTML/todayInfo2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ko">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>오늘의 정보</title>
 6 | </head>
 7 | <body>
 8 | 
 9 |     <header>
10 |         <h1>오늘의 정보</h1>
11 |         <button type="button">통화</button>
12 |     </header>
13 | 
14 |     <nav>
15 |         <ul>
16 |             <li><a href="#news">뉴스</a></li>
17 |             <li><a href="#stock">증권</a></li>
18 |             <li><a href="#join">회원가입</a></li>
19 |         </ul>
20 |     </nav>
21 | 
22 |     <section id="news">
23 |         <h1>뉴스</h1>
24 |         (내용생략)
25 |     </section>
26 | 
27 |     <section id="stock">
28 |         <h1>증권</h1>
29 |         (내용생략)
30 |     </section>
31 | 
32 |     <section id="join">
33 |         <h1>회원가입</h1>
34 |         (내용생략)
35 |     </section>
36 | 
37 |     <footer>
38 |         &copy; moonjiae
39 |     </footer>
40 | 
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/11.BasicObject/date.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 날짜 다루기
 3 |  */
 4 | var d = new Date();
 5 | console.log(d);
 6 | 
 7 | console.log('timezone offset : ', d.getTimezoneOffset()/60);
 8 | 
 9 | // 0, 15
10 | console.log('hour : ', d.getHours(), d.getUTCHours());
11 | 
12 | console.log('GMT : ', d.toGMTString());
13 | console.log('UTC : ', d.toUTCString());
14 | console.log('Local : ', d.toLocaleString());
15 | console.log(d.toLocaleDateString());
16 | console.log(d.toLocaleTimeString());
17 | 
18 | 
19 | var d2 = new Date(2016, 11, 24, 23, 59, 59);
20 | console.log('GMT : ', d2.toGMTString());
21 | console.log('GMT : ', d2.toLocaleString());
22 | 
23 | 
24 | var interval = Date.parse('2015/12/24 12:23:34');
25 | var d3 = new Date(interval);
26 | console.log(d3.toLocaleString());
27 | 
28 | var interval2 = Date.parse('2016-05-01 15-10-10');
29 | var d4 = new Date(interval2);
30 | console.log(d4.toLocaleString()); // Invalid Date
31 | 


--------------------------------------------------------------------------------
/WWW/HTML/table.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf8">
 5 |     <title>테이블 예제</title>
 6 | </head>
 7 | <body>
 8 |     <table border="1">
 9 |         <thead>
10 |             <td>1</td>
11 |             <td>2</td>
12 |             <td>3</td>
13 |         </thead>
14 |         <tbody>
15 |             <tr>
16 |                 <td>a</td>
17 |                 <td>b</td>
18 |                 <td>c</td>
19 |             </tr>
20 |             <tr>
21 |                 <td colspan="2">d</td>
22 |                 <td>f</td>
23 |             </tr>
24 |             <tr>
25 |                 <td rowspan="2">h</td>
26 |                 <td>i</td>
27 |                 <td>j</td>
28 |             </tr>
29 |             <tr>
30 |                 <td>k</td>
31 |                 <td>l</td>
32 |             </tr>
33 |         </tbody>
34 |     
35 |     </table>
36 | </body>    
37 | </html>
38 | 


--------------------------------------------------------------------------------
/07.Class/inheritance.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Class 상속
 3 |  */
 4 | 
 5 | // 부모 클래스
 6 | class Person {
 7 |    // constructor는 1개만
 8 |    constructor(name) {
 9 |       // 프로퍼티 선언
10 |       this.name = name;
11 |    }
12 | 
13 |    greeting = () => {
14 |       console.log('Hello');
15 |    }
16 | 
17 |    // 메소드
18 |    introduce() {
19 |       console.log(`I am ${this.name}.`);
20 |    }
21 | }
22 | 
23 | const luke = new Person('Luke');
24 | luke.greeting();
25 | luke.introduce();
26 | 
27 | // 상속
28 | class Jedi extends Person {
29 |    constructor(name, color) {
30 |       // 부모 클래스의 생성자 호출 - name 초기화
31 |       super(name);
32 |       this.color = color;
33 |    }
34 | 
35 |    // 재정의
36 |    introduce() {
37 |       console.log(`I am ${this.name}. My light savor's color is ${this.color}.`);
38 |    }
39 | }
40 | 
41 | const obiwan = new Jedi('Obiwan', 'blue');
42 | obiwan.greeting();
43 | obiwan.introduce();
44 | 
45 | 


--------------------------------------------------------------------------------
/05.Function/arrowInFunction.js:
--------------------------------------------------------------------------------
 1 | // 클래스
 2 | class Person {
 3 |   sayHello = () => {
 4 |     console.log('Hi there~');
 5 |   }
 6 | }
 7 | 
 8 | const obj = new Person();
 9 | obj.sayHello();
10 | 
11 | // 파라미터 - inline
12 | 
13 | function doIt(what) {
14 |   what();
15 | }
16 | 
17 | const run = () => {
18 |   console.log('Run Run!');
19 | }
20 | 
21 | doIt(run);
22 | 
23 | doIt(() => {
24 |   console.log('Jump!');
25 | });
26 | 
27 | 
28 | // 반환값
29 | 
30 | function sayIt() {
31 |   const sing = () => {
32 |     console.log('let it go');
33 |   }
34 |   return sing;
35 | }
36 | 
37 | const singAsong = sayIt();
38 | singAsong();
39 | 
40 | function danceIt() {
41 |   return () => {
42 |     console.log('shall we dance?');
43 |   }
44 | }
45 | 
46 | danceIt()();
47 | 
48 | // inline, with parameter
49 | const doYouWanna = (it) => {
50 |   return () => {
51 |     console.log(`do you wanna build ${it}`);
52 |   }
53 | }
54 | 
55 | doYouWanna('snowman')();


--------------------------------------------------------------------------------
/08.MapFilterReduce/reduce.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Reduce
 3 |  * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
 4 |  */
 5 | const array = [1, 2, 3, 4, 5];
 6 | 
 7 | // reduce 파라미터 : 콜백, 초기값
 8 | // Callback 함수 파라미터 : previous-value, current-value, index, array
 9 | // 초기값 입력하지 않으면 배열의 1번째 값을 사용
10 | const sum = array.reduce((prevValue, curValue, index, array) => {
11 |   return prevValue + curValue;
12 | });
13 | console.log(`sum of ${array} is ${sum}`)
14 | 
15 | const movies = [
16 |   { title: "새로운 희망", gross: 775 },
17 |   { title: "제국의 역습", gross: 547 },
18 |   { title: "제다이의 귀환", gross: 475 },
19 |   { title: "깨어난 포스", gross: 2068 },
20 |   { title: "로그 원", gross: 1056 },
21 |   { title: "라스트 제다이", gross: 1333 }
22 | ]
23 | 
24 | // 초기값을 0으로 설정.
25 | const totalGross = movies.reduce((prevValue, curValue) => {
26 |   return prevValue + curValue.gross;
27 | }, 0);
28 | 
29 | console.log('Total gross :', totalGross);
30 | 


--------------------------------------------------------------------------------
/02.Object/object.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Object 타입
 3 |  */
 4 | 
 5 | var iu = {
 6 |   name: 'IU',
 7 |   age: 20
 8 | };
 9 | 
10 | console.log('typeof iu :', typeof iu); // Object
11 | console.log('iu == object 타입 :', typeof iu == 'object'); // true
12 | 
13 | // 객체의 프로퍼티 변경
14 | iu.name = '아이유';
15 | // 객체의 프로퍼티 값 얻기
16 | var age = iu.age;
17 | var name = iu['age'];
18 | console.log('프로퍼티 접근 :', age, name);
19 | 
20 | // 같은 값을 가진 객체
21 | var clone = {
22 |   name: '아이유',
23 |   age: 20
24 | }
25 | 
26 | console.log('iu == clone :', iu == clone); // false
27 | console.log('iu === clone :', iu === clone); // false
28 | 
29 | // 같은 객체 참조
30 | var same = iu;
31 | 
32 | console.log('iu == same :', iu == same); // true
33 | console.log('iu === same :', iu === same); // true
34 | 
35 | //
36 | // Object 타입의 객체로 작성하기
37 | //
38 | console.log('\n== Object 타입의 객체 ==')
39 | var ty = new Object();
40 | ty.name = '태연';
41 | ty["age"] = 20;
42 | 
43 | console.log('typeof ty :', typeof ty);


--------------------------------------------------------------------------------
/04.OperatorAndControls/forloop.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * For 반복문
 3 |  */
 4 | var array = ['IU', 'YuInna', 'Taeyon', 'Sulhyun'];
 5 | var obj = {
 6 |    cute: 'IU',
 7 |    adorable: 'YuInna',
 8 |    charm: 'Taeyon',
 9 |    shine: 'Sulhyun'
10 | };
11 | 
12 | 
13 | console.log('== C style For Loop');
14 | for (var i = 0 ; i < array.length ; i++) {
15 |    var item = array[i];
16 |    console.log(i, item);
17 | }
18 | 
19 | //
20 | // For-In
21 | //
22 | 
23 | // 배열과 For-In
24 | console.log('== For-in with Array');
25 | 
26 | for (var index in array) {
27 |    console.log('index : ', index, ' element : ',array[index]);
28 | }
29 | 
30 | // 객체와 For-In
31 | console.log('== For-in with Object');
32 | for (var prop in obj) {
33 |    console.log('property name : ', prop + ' value : ' + obj[prop]);
34 | }
35 | 
36 | //
37 | // For Each
38 | //
39 | console.log('== For Each with Array');
40 | array.forEach( (value, index, array) => {
41 |    console.log(index, value);
42 | });
43 | 
44 | 


--------------------------------------------------------------------------------
/WWW/CSS/style_visibility.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 |   
 8 | <h3>hidden</h3>
 9 | <div class="border outer">
10 |    <div class="border inner">A</div>   
11 |    <div class="border inner" style="visibility:hidden;">B</div>
12 |    <div class="border inner">C</div>   
13 | </div>
14 | 
15 | <h3>visible</h3>
16 | <div class="border outer">
17 |    <div class="border inner">A</div>   
18 |    <div class="border inner" style="visibility:visible;">B</div>
19 |    <div class="border inner">C</div>   
20 | </div>
21 | 
22 | <h3>none</h3>
23 | <div class="border outer">
24 |    <div class="border inner">A</div>   
25 |    <div class="border inner" style="display:none;">B</div>
26 |    <div class="border inner">C</div>   
27 | </div>
28 | </body>
29 | <style>
30 |    .border { border : solid 1px black; margin:1px; }
31 |    .outer { width:200px; height:200px; }
32 |    .inner { width:50px; height:50px; }
33 | </style>
34 | </html>


--------------------------------------------------------------------------------
/01.Data/const.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * 변수와 상수
 3 |  */
 4 | 
 5 | // 변수 선언
 6 | let varVal = 1
 7 | 
 8 | // 변수는 값 변경이 가능하다
 9 | varVal = 2
10 | 
11 | // 변수 선언과 대입을 별도로 하기
12 | let valVal2
13 | varVal2 = 'JavaScript'
14 | console.log(varVal2)
15 | 
16 | 
17 | // 상수 선언
18 | const constVal = 1
19 | 
20 | // 상수에 값 변경시 에러
21 | // Error : TypeError: Assignment to constant variable.
22 | // constVal = 2;   
23 | 
24 | // const는 선언과 대입 분리 불가
25 | // Error : SyntaxError: Missing initializer in const declaration
26 | // const constVal2
27 | // console.log(constVal2);
28 | // constVal2 = 'hello'
29 | 
30 | // Const - 객체 타입인 경우 속성 변경 가능
31 | const constArray = [1, 2, 3];
32 | constArray.push(4);
33 | console.log(constArray);
34 | 
35 | // Const - 객체 타입인 경우 속성 변경 가능
36 | const constObj = {num: 1, kor: '일'};
37 | constObj.eng = 'one';
38 | console.log(constObj);
39 | 
40 | // 새로운 객체 대입은 불가능 - TypeError: Assignment to constant variable.
41 | // constArray = ['one', 'two', 'three'];
42 | // constObj = {one: '1', two: '2'};
43 | 


--------------------------------------------------------------------------------
/08.MapFilterReduce/filter.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Filter
 3 |  * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
 4 |  */
 5 | 
 6 | const array = [1, 2, 3, 4, 5, 6];
 7 | 
 8 | // Callback 함수 파라미터 : element, index, array
 9 | 
10 | const filtered = array.filter((element, index, array) => {
11 |   if (element % 2 == 0) {
12 |     return true;
13 |   }
14 |   else {
15 |     return false;
16 |   }
17 | });
18 | console.log('even numbers :', filtered);
19 | const filtered2 = array.filter(element => element % 2 != 0);
20 | console.log('odd numbers :', filtered2);
21 | 
22 | // 객체 배열과 filter
23 | 
24 | const movies = [
25 |   { title: "새로운 희망", year: 1977 },
26 |   { title: "제국의 역습", year: 1980 },
27 |   { title: "제다이의 귀환", year: 1983 },
28 |   { title: "깨어난 포스", year: 2015 },
29 |   { title: "로그 원", year: 2016 },
30 |   { title: "라스트 제다이", year: 2017 },
31 | ]
32 | 
33 | const moviesAfter2000 = movies.filter(item => item.year > 2000);
34 | console.log('2000년 이후의 영화 목록 :', moviesAfter2000);
35 | 


--------------------------------------------------------------------------------
/07.Class/class.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Class 정의와 객체 생성, 프로퍼티 접근과 메소드 호출
 3 |  */
 4 | 
 5 |  class Movie {
 6 |    // constructor는 1개만
 7 |    constructor(title, director) {
 8 |       // 프로퍼티 선언
 9 |       this.title = title;
10 |       this.director = director;
11 |    }
12 | 
13 |    // 메소드
14 |    describe() {
15 |       console.log(`title: ${this.title} - diretor: ${this.director}`);
16 |    }
17 | 
18 |    // arrow function으로 메소드
19 |    howMade = () => {
20 |       console.log(`${this.director} direct ${this.title}`);
21 |    }
22 | }
23 | 
24 | // Object Literal
25 | const movie1 = {title: "보이지 않는 위험", director: "조지 루카스"};
26 | console.log(movie1.title, movie1.director);
27 | 
28 | // 클래스에서 객체 생성
29 | const movie2 = new Movie("클론의 습격", "조지 루카스");
30 | // 프로퍼티 접근
31 | console.log(movie2.title, movie2.director);
32 | movie2.describe();
33 | 
34 | const movie3 = new Movie("시스의 복수", "조지 루카스");
35 | movie3.describe();
36 | movie3.howMade();
37 | 
38 | // 객체에 프로퍼티 추가
39 | movie3.year = 2005;
40 | console.log('movie3.year:', movie3.year);


--------------------------------------------------------------------------------
/WWW/HTML/noriben3.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf8">
 5 |     <title>노리벤 만드는 방법</title>
 6 |     <style>
 7 |         h1 {border-bottom:3px solid #693e1d; font-size:24px; font-family:바탕;}
 8 |         h2 {font-size:18px; color:#db7e2c;}
 9 |         p {margin:0 0 0 20px; }
10 |         ul {margin-top:0;}
11 |         ol {margin-top:0;}
12 |     </style>    
13 | </head>
14 | <body>
15 |     <h1>노리벤</h1>
16 |     <h2>논짱 도시락</h2>
17 |     <p>일자리도 찾지 못하고 돈도 없는 변두리 출신의 서른한 살 여성이 딸 논짱을 데리고 친정으로 돌아옵니다.</p>
18 |     <p>그리고 딸을 위해 만든 노리벤이 유명해져 도시락 가게를 엽니다. 참고로, 전날 먹은 반찬들을 갖고도 층을 쌓으면 영양가 만점인 도시락이 된답니다. 아이디어를 낸 요리도 제안했지요.</p>
19 |     
20 |     <h2>재료(1인분)</h2>        
21 |     <ul>
22 |         <li>밥(도시락 1통 분량)</li>
23 |         <li>후리카케, 김, 간장 적당량</li>
24 |         <li>달걀 소보로, 시금치 무침, 무말랭이 멸치 볶음</li>
25 |     </ul>
26 |     
27 |     <h2>만드는 법</h2>
28 |     <ol>
29 |         <li>밥 1/3 양에는 무말랭이 멸치 볶음 적당량을, 1/3 양에는 후리카게를 섞는다.</li>
30 |         <li>무말랭이 멸치 볶음을 섞은 밥은 얹고 간장을 뿌린다.</li>
31 |     </ol>
32 | </body>    
33 | </html>
34 | 


--------------------------------------------------------------------------------
/10.Promise/promise.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Step1
 3 | */
 4 | function task1(resolve) {
 5 |   console.log('Task1 종료. 성공');
 6 |   // 작성
 7 |   resolve('Task1 결과!');
 8 | }
 9 | 
10 | function task1_success(result) {
11 |   console.log('태스크1 종료, 결과:', result);
12 | }
13 | 
14 | new Promise(task1).then(task1_success);
15 | // inline
16 | new Promise(task1).then(result => {
17 |   console.log('태스크1 종료, 결과:', result);
18 | });
19 | 
20 | /*
21 |  * Step 2 
22 |  */
23 | // Promise with Reject
24 | function task2(resolve, reject) {
25 |   console.log('Task2 종료. 에러 발생');
26 |   // reject 콜백으로 에러 전달
27 |   reject('Task2 에러');
28 | }
29 | 
30 | function onResolved(result) {
31 |   // Fullfilled 상태
32 |   console.log('태스크2 성공. 결과', result);
33 | }
34 | 
35 | function onRejected(error) {
36 |   // Rejected 상태
37 |   console.log('태스크2 성공. 실패', error);
38 | }
39 | 
40 | new Promise(task2).then(onResolved, onRejected);
41 | 
42 | new Promise(task2).then(ret => {
43 |   console.log('Task2 성공. 결과 :', ret);
44 | }, err => {
45 |   console.log('Task2 실패. 에러 :', err);
46 | })
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/WWW/CSS/style_text.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta charset="utf-8">
 6 | </head>
 7 | 
 8 | <h1>Font Family</h1>
 9 | <p style="font-family:'Times New Roman'">Serif</p>
10 | <p style="font-family:Arial">San-Serif</p>
11 | <p>기본 폰트</p>
12 | <p class="custom">나눔 폰트</p>
13 | 
14 | <h1>Font size</h1>
15 | <p>Default Size</p>
16 | <p style="font-size:20px;">Font size : 20px</p>
17 | <p style="font-size:1.5em">Font size : 1.5em</p>
18 | 
19 | <h1>Text Decoration</h1>
20 | <p style="text-decoration:underline">Underline</p>
21 | <a href="#" style="text-decoration:none">Link with Underline</a>
22 | 
23 | <h1>Text Align</h1>
24 | <div>
25 |    <p>Normal</p>
26 |    <p style="text-align:center">Center</p>
27 |    <p style="text-align:right">Right</p>         
28 | </div>
29 | 
30 | 
31 | <style>
32 |    div { width : 300px; border:solid 1px black; }
33 |    
34 |    @font-face {
35 |       font-family: myFont;
36 |       src: url(../resource/nanum.ttf);
37 |    }
38 |    
39 |    p.custom {
40 |       font-family: myFont
41 |    }
42 | </style>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/01.Data/dataType.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 데이터 타입
 3 |  * 변수(상수)는 타입 선언이 없고, 동적으로 할당되는 값에 의해서 타입이 정해진다.
 4 |  * 변수의 타입 알기 : typeof
 5 |  */
 6 | 
 7 | let val = 10;
 8 | console.log('10 type : ', typeof val); // number
 9 | 
10 | val = '10';
11 | console.log('"10" type : ', typeof val); // string
12 | 
13 | val = true
14 | console.log('true type : ', typeof val); // boolean
15 | 
16 | val = [1, 2, 3];
17 | console.log('[1, 2, 3] type : ', typeof val); // object
18 | 
19 | val = { one: 1, two: 2 }
20 | console.log('{one:1, two:2} type : ', typeof val); // object
21 | 
22 | 
23 | //
24 | // type 비교하기
25 | //
26 | 
27 | let x = 10;
28 | 
29 | if ((typeof x) == 'number') {
30 |   console.log('x는 Number 타입');
31 | }
32 | else {
33 |   console.log('x는 Number 타입이 아니다.');
34 | }
35 | 
36 | var y = '10';
37 | 
38 | if (typeof (x) == typeof (y)) {
39 |   console.log('10, "10" 두 타입은 같다.');
40 | }
41 | else {
42 |   console.log('10, "10" 두 타입은 다르다.');
43 | }
44 | 
45 | x = '20';
46 | if (typeof (x) == typeof (y)) {
47 |   console.log('"20", "10" 두 타입은 같다.');
48 | }
49 | else {
50 |   console.log('"20", "10" 두 타입은 다르다.');
51 | }


--------------------------------------------------------------------------------
/WWW/CSS/style_border.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 |   
 8 | <h3>border</h3>
 9 | <div style="border:solid 2px red">
10 |    Solid 2px Red
11 | </div>
12 | <div style="border:dotted 2px rgb(100,100,100)">
13 |    dotted 2px (100,100,100)
14 | </div>
15 | <div style="border:dashed 2px #F0F">
16 |    dashed 2px #F0F
17 | </div>
18 | <div style="border:dashed 2px #F0F">
19 |    dashed 2px #F0F
20 | </div>
21 | <div class="myborder">
22 |    개별
23 | </div>
24 | <div style="border:solid 2px black; border-radius:10px;">
25 |    Round
26 | </div>
27 | 
28 | 
29 | </body>
30 | <style>
31 |    div { width:200px; height:100px; text-align: center; margin:3px; }
32 |    div.myborder {
33 |       border-left-style: solid;
34 |       border-left-width: 2px;
35 |       border-left-color: blue;
36 |       
37 |       border-top-style: dotted;
38 |       border-top-width: 5px;
39 |       border-top-color: rgb(200,200,200);
40 |       
41 |       border-right-style: dashed;
42 |       border-right-width: 2px;
43 |       border-right-color: #F00;
44 |    }
45 | </style>
46 | </html>


--------------------------------------------------------------------------------
/WWW/HTML/noriben2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |     <head>
 4 |     </head>
 5 |     <body>        
 6 |         <nav>
 7 |             <a href='#'>오늘의 요리</a>
 8 |             <a href='#'>지난 요리</a>
 9 |         </nav>
10 |         <header>
11 |             <h1>노리벤</h1>
12 |         </header>
13 |         <section>
14 |             <h2>논짱 도시락</h2>
15 |             <p>일자리도 찾지 못하고 돈도 없는 변두리 출신의 서른한 살 여성이 딸 논짱을 데리고 친정으로 돌아옵니다.</p>
16 |             <p>그리고 딸을 위해 만든 노리벤이 유명해져 도시락 가게를 엽니다. 참고로, 전날 먹은 반찬들을 갖고도 층을 쌓으면 영양가 만점인 도시락이 된답니다. 아이디어를 낸 요리도 제안했지요.</p>
17 |             
18 |         </section>
19 |         <section>
20 |             <h2>재료(1인분)</h2>        
21 |             <ul>
22 |                 <li>밥(도시락 1통 분량)</li>
23 |                 <li>후리카케, 김, 간장 적당량</li>
24 |                 <li>달걀 소보로, 시금치 무침, 무말랭이 멸치 볶음</li>
25 |             </ul>
26 |         </section>
27 |         <section>
28 |             <h2>만드는 법</h2>
29 |             <ol>
30 |                 <li>밥 1/3 양에는 무말랭이 멸치 볶음 적당량을, 1/3 양에는 후리카게를 섞는다.</li>
31 |                 <li>무말랭이 멸치 볶음을 섞은 밥은 얹고 간장을 뿌린다.</li>
32 |             </ol>
33 |         </section>
34 |     </body>
35 | </html>


--------------------------------------------------------------------------------
/05.Function/callback.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 콜백(Callback) 함수
 3 |  */
 4 | 
 5 | 
 6 | // 콜백을 사용하지 않는 일반 함수
 7 | function add(i, j) {
 8 |   return i + j;
 9 | }
10 | 
11 | const result1 = add(1, 2);
12 | console.log("1 + 2 = " + result1);
13 | 
14 | // 콜백을 사용하는 함수
15 | function add2(i, j, callback) {
16 |   callback(i + j);
17 | }
18 | 
19 | // 함수 파라미터에 함수를 대입한다.
20 | function addResultHandler(result) {
21 |   console.log("3 + 4 = " + result);
22 | }
23 | 
24 | add2(3, 4, addResultHandler);
25 | 
26 | // inline 방식으로 사용하기
27 | add2(5, 6, function (result) {
28 |   console.log("5 + 6 = " + result);
29 | });
30 | 
31 | // inline - arrow function 으로 사용
32 | add2(7, 8, (result) => {
33 |   console.log("7 + 8 = " + result);
34 | });
35 | 
36 | // 콜백이 2개인 함수
37 | function devide(i, j, success, fail) {
38 |   if (isNaN(i) || isNaN(j) || j == 0) {
39 |     fail('에러!');
40 |   }
41 |   else {
42 |     success(i / j);
43 |   }
44 | }
45 | 
46 | devide(1, 2,
47 |   (ret) => {
48 |     console.log('1 / 2 =', ret)
49 |   },
50 |   (err) => {
51 |     console.log('1 / 2 =', err)
52 |   }
53 | );
54 | 
55 | devide(1, 0,
56 |   (ret) => {
57 |     console.log('1 / 0 =', ret)
58 |   },
59 |   (err) => {
60 |     console.log('1 / 0 =', err)
61 |   }
62 | );


--------------------------------------------------------------------------------
/WWW/jQuery/myMusic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <script src="jquery.min.js"></script>
 5 |    <script>
 6 |       var musicList = [
 7 |          { title:'좋은날', singer:'iU'}
 8 |       ];
 9 |       
10 |       $(document).ready(function() {
11 |          musicList.forEach(function(item) {
12 |             console.log('append music : ', item.title);
13 |             
14 |             $('#musics').append( '<li>' + item.title + '</li>' );   
15 |          });
16 |          
17 |          $('#songInput').submit(function() {
18 |             console.log('submit');
19 |             $('form');
20 |             return false;
21 |          });
22 |          
23 |       });
24 |       
25 |    </script>
26 |    <style>
27 |       .border { border : solid 1px black; }
28 |       .size100 { width:100px; height:100px; }
29 |       .redBG { background-color: red; }
30 |    </style>
31 | </head>   
32 | <body>
33 |    <h1>My Music</h1>
34 |    <div>
35 |    <ul id="musics">
36 |    </ul>
37 |    </div>
38 |    
39 |    <form id="songInput">
40 |       <input type="text" name="title"><br>
41 |       <input type="text" name="singer"><br>
42 |       <input type="submit">      
43 |    </form>
44 |    
45 | </body>   
46 | </html>


--------------------------------------------------------------------------------
/04.OperatorAndControls/and_or.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * OR, AND 연산자
 3 |  */
 4 | 
 5 | console.log('\n== || 연산자==');
 6 | const orRet1 = true || 'b';
 7 | console.log("true || 'b' =", orRet1); // true
 8 | 
 9 | const orRet2 = false || 'b';
10 | console.log("false || 'b' =", orRet2); // b
11 | 
12 | const orRet3 = undefined || 'b';
13 | console.log("undefined || 'b' =", orRet3);
14 | 
15 | const input = {one: '1', two: '2', zero: 0};
16 | 
17 | // null검사 와 초기값 설정
18 | const orRet4 = input.three || 'nothing';
19 | console.log("input || 'nothing' =", orRet4);
20 | 
21 | // null 검사와 실행
22 | input.two || console.log('input.two의 값이 없습니다.'); // 실행 안됨
23 | input.three || console.log('input.three의 값이 없습니다.'); // 실행
24 | 
25 | 
26 | console.log('\n== && 연산자==');
27 | 
28 | const andRet1 = true && 'b';
29 | console.log("true && 'b' =", andRet1); // b
30 | 
31 | const andRet2 = false && 'b';
32 | console.log("false && 'b' =", andRet2); // false
33 | 
34 | const andRet4 = undefined && 'b';
35 | console.log("undefined && 'b' =", andRet4); // undefined
36 | 
37 | // null 검사와 실행
38 | input.two && console.log('input.two = ', input.two); // 실행
39 | input.three && console.log('input.three = ', input.three); // 실행 안됨
40 | input.zero && console.log('input.zero = ', input.zero); // 주의 - 0은 false로 취급
41 | 


--------------------------------------------------------------------------------
/05.Function/destructuring_function.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 구조 분해 할당, Object Shorthand
 3 |  */
 4 | 
 5 | // 일반 파라미터
 6 | function showIt1(title, director) {
 7 |     console.log(`showIt1 - 제목 : ${title}, 감독 : ${director}`);
 8 | }
 9 | 
10 | showIt1('새로운 희망', '조지 루카스');
11 | 
12 | // 객체가 파라미터인 경우
13 | function showIt2(movie) {
14 |     console.log(`showIt2 - 제목 : ${movie.title}, 감독 : ${movie.director}`);
15 | }
16 | 
17 | const movie1 = {title: '제국의 역습', director: '어빈 커슈너'};
18 | showIt2(movie1);
19 | // 파라미터에 객체 리터럴
20 | showIt2({title: '제국의 역습', director: '어빈 커슈너'});
21 | 
22 | 
23 | // 파라미터에 object - destructuring
24 | function showIt3({title, director}) {
25 |     console.log(`showIt3 - 제목 : ${title}, 감독 : ${director}`);
26 | }
27 | 
28 | // 객체 생성 후 호출
29 | const movie2 = {title: '제다이의 귀환', director: '리처드 마퀸드'};
30 | showIt3(movie2);
31 | 
32 | // Object shorthand로 호출
33 | const title = '제다이의 귀환';
34 | const director = '리처드 마퀸드';
35 | showIt3({title, director});
36 | 
37 | 
38 | // 객체 반환
39 | function getCharactorInfo() {
40 |     const character = '아나킨 스카이워커';
41 |     const actor = '헤이든 크리스텐슨';
42 |     return {character, actor}
43 | }
44 | 
45 | // 함수 반환값을 destructuring
46 | const {character, actor} = getCharactorInfo();
47 | console.log(`character: ${character}, actor: ${actor}`);


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/viewport.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta name='viewport' content="user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=1">
 5 |     <title></title>
 6 |     <style type='text/css'>
 7 |         div.color-box {display: inline-block; width:50px; height:50px;}
 8 |         div.center { left:auto; right:auto;}
 9 |         
10 |     </style>
11 | </head>
12 | <body>
13 | 
14 | <div style="width:100%; background-color:yellow">
15 |     <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
16 | </div>
17 | 
18 | <div class='center width:50px; height:50px;'><p>BBB</p></div>
19 | 
20 | <div class='color-box' style='background-color:red'></div>
21 | <div class='color-box' style='background-color:green'></div>
22 | <div class='color-box' style='background-color:blue'></div>
23 | <div class='color-box' style='background-color:purple'></div>
24 | <div class='color-box' style='background-color:#808080'></div>
25 | 
26 | <div class='color-box' style='background-color:red'></div>
27 | <div class='color-box' style='background-color:green'></div>
28 | <div class='color-box' style='background-color:blue'></div>
29 | <div class='color-box' style='background-color:purple'></div>
30 | <div class='color-box' style='background-color:#808080'></div>
31 | 
32 | 
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/animation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | </head>
 6 | 
 7 | <body>
 8 |    <div id='ani' style='width:200px; height:200px;'>
 9 |       <p>Animation</p>
10 |    </div>
11 |    <style>
12 |       @keyframes changeColorAndPosition {
13 |          0% {
14 |             background: red;
15 |             left: 0px;
16 |             top: 0px;
17 |          }
18 |          25% {
19 |             background: yellow;
20 |             left: 200px;
21 |             top: 0px;
22 |          }
23 |          50% {
24 |             background: blue;
25 |             left: 200px;
26 |             top: 200px;
27 |          }
28 |          75% {
29 |             background: green;
30 |             left: 0px;
31 |             top: 200px;
32 |          }
33 |          100% {
34 |             background: red;
35 |             left: 0px;
36 |             top: 0px;
37 |          }
38 |       }
39 |       
40 |       div {
41 |          position: absolute;
42 |          animation-name: changeColorAndPosition;
43 |          animation-duration: 5s;
44 |          animation-timing-function: linear;
45 |          animation-delay: 2s;
46 |          animation-iteration-count: infinite;
47 |          animation-direction: alternate;
48 |          animation-play-state: running;
49 |       }
50 |    </style>
51 | </body>
52 | 
53 | </html>


--------------------------------------------------------------------------------
/01.Data/typeConvert.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 암시점 타입 변환
 3 |  */
 4 | 
 5 | console.log('== undefined ==');
 6 | console.log(undefined);
 7 | console.log(undefined + '1'); 'undefined1'
 8 | console.log(undefined + 1); // NaN
 9 | console.log(!undefined); // true
10 | 
11 | console.log('== null ==');
12 | console.log(null);
13 | console.log(null + '1'); // 'null1'
14 | console.log(null + 1); // 1
15 | console.log(!null); // true
16 | 
17 | console.log('== "123" ==');
18 | console.log('123');
19 | console.log('123' + '1');
20 | console.log('123' + 1); // '1231'
21 | console.log(!'123'); // false
22 | 
23 | console.log('== "" ==');
24 | console.log('');
25 | console.log('' + '1');
26 | console.log('' + 1);
27 | console.log(!''); // true
28 | 
29 | console.log('== 0 ==');
30 | console.log(0);
31 | console.log(0 + '1');
32 | console.log(0 + 1);
33 | console.log(!0); // true
34 | 
35 | console.log('== NaN ==');
36 | console.log(NaN);
37 | console.log(NaN + '1'); // 'NaN1'
38 | console.log(NaN + 1); // NaN
39 | console.log(!NaN); // true
40 | 
41 | console.log('== true ==');
42 | console.log(true);
43 | console.log(true + '1'); // 'true1'
44 | console.log(true + 1); // 2
45 | console.log(!true); // false
46 | 
47 | console.log('== {} ==');
48 | console.log({});
49 | console.log({} + '1'); // '[object Object]1'
50 | console.log({} + 1); // '[object Object]1'
51 | console.log(!{}); // false


--------------------------------------------------------------------------------
/WWW/ch08/08-04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <style>
 4 |    .border { border:solid 1px black; display: block; }
 5 |    #outer { width:300px; height:300px; background-color: lightskyblue; }
 6 |    #inner { width:150px; height:150px; background-color: darkblue; margin: 50px auto; }
 7 | </style>
 8 | <script>
 9 |    window.onload = function() {
10 |       var outer = document.getElementById('outer');
11 |       var inner = document.getElementById('inner');
12 |       
13 |       var propagation = true;
14 |       
15 |       outer.addEventListener('click', function(event) {
16 |          console.log('outer click');
17 |       });     
18 |       
19 |       inner.addEventListener('click', function(event) {
20 |          console.log('inner click');
21 |          if ( !propagation )
22 |             event.stopPropagation();
23 |       });
24 |       
25 |       var check = document.getElementById('check');
26 |       check.addEventListener('change', function(e) {
27 |          console.log('change ', check.checked);
28 |          propagation = check.checked;
29 |       });
30 |    }
31 | </script>     
32 | <body>
33 |    <div>
34 |       <input type="checkbox" id="check" checked>Propagation</input>
35 |    </div>
36 | 
37 |    <div id="outer" class="border">
38 |       <div id="inner" class="border">         
39 |       </div>
40 |    </div>
41 |    
42 |    
43 | </body>   
44 | </html>


--------------------------------------------------------------------------------
/01.Data/undefined.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * undefined
 3 |  * null
 4 |  */
 5 | 
 6 | console.log('== Sample codes for undefined ==\n');
 7 | 
 8 | // 선언만 하면 undefined다
 9 | let x;
10 | console.log('초기화하지 않은 변수x의 값 :', x);
11 | 
12 | console.log('x == undefined :', x == undefined);
13 | console.log('x === undefined :', x === undefined);
14 | 
15 | // undefine 비교하기
16 | if (x) {
17 |     console.log('if (x) 로 undefined 판단 성공');
18 | }
19 | else {
20 |     console.log('if (x) 로 undefined 판단 실패 ');
21 | }
22 | 
23 | if (!x) {
24 |     console.log('if (!x) 로 undefined 판단 성공');
25 | }
26 | else {
27 |     console.log('if (!x) 로 undefined 판단 실패');
28 | }
29 | 
30 | 
31 | // typeof
32 | console.log('typeof x :', typeof(x));
33 | console.log('typeof(x) == "undefined":', typeof(x) == 'undefined');
34 | 
35 | // 주의! 값이 false인 경우
36 | console.log('y = false 인 경우')
37 | let y = false
38 | if (y) {
39 |     console.log('if (y) 결과 : 참');
40 | }
41 | else {
42 |     console.log('if (y) 결과 : 거짓');
43 | }
44 | 
45 | if (!y) {
46 |     console.log('if (!y) 결과 참');
47 | }
48 | else {
49 |     console.log('if (!y) 결과 거진');
50 | }
51 | 
52 | // 주의! 값이 0인 경우
53 | console.log('z = 0 인 경우');
54 | let z = 0;
55 | if (z) {
56 |     console.log('if (z) 결과 : 참');
57 | }
58 | else {
59 |     console.log('if (z) 결과 : 거짓');
60 | }
61 | 
62 | if (!z) {
63 |     console.log('if (!z) 결과 참');
64 | }
65 | else {
66 |     console.log('if (!z) 결과 거짓');
67 | }


--------------------------------------------------------------------------------
/03.Collections/map_type.js:
--------------------------------------------------------------------------------
 1 | // Keyed Collections
 2 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections
 3 | 
 4 | let months = new Map();
 5 | 
 6 | months.set('January', '1월');
 7 | months.set('Febrary', '2월');
 8 | months.set('March', '3월');
 9 | 
10 | console.log('months :', months);
11 | console.log('size :', months.size);
12 | 
13 | let jan = months.get('January');
14 | console.log('January :', jan);
15 | 
16 | let april = months.get('April');
17 | console.log('April :', april);
18 | 
19 | for (let [key, value] of months) {
20 |     console.log(`key : ${key}, value : ${value}`);
21 | }
22 | 
23 | let deleteResult = months.delete('March');
24 | console.log(`delete result : ${deleteResult}, March : ${months.get('March')}`);
25 | console.log(`has('Febrary') : ${months.has('Febrary')} has('March') : ${months.has('March')}`)
26 | 
27 | 
28 | // Key type!
29 | 
30 | let numbers = new Map();
31 | numbers.set(1, 'one');
32 | numbers.set(2, 'two');
33 | 
34 | console.log(`1 : ${numbers.get(1)}, 2 : ${numbers.get(2)}`)
35 | 
36 | 
37 | let mixed = new Map();
38 | 
39 | mixed.set(1, 'one');
40 | mixed.set('one', '일');
41 | mixed.set({num:1}, 'One');
42 | 
43 | const obj = {num:2};
44 | mixed.set(obj, 'Two');
45 | 
46 | console.log(`1 : ${mixed.get(1)}`);
47 | console.log(`'one' : ${mixed.get('one')}`);
48 | console.log(`{num:1} : ${mixed.get({num:1})}`);
49 | console.log(`object : ${mixed.get(obj)}`);
50 | 


--------------------------------------------------------------------------------
/WWW/ch08/08-01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <style>
 5 |    div { width:100px; height:100px; background-color:red; }
 6 |    </style>   
 7 | </head>   
 8 | <body>
 9 |    <h1>Java Script Example</h1>
10 |    <h2>getElementById</h2>      
11 |    <script>
12 |       var element = document.getElementById("div1");
13 |       console.log(element);
14 |    </script>
15 |    
16 |    <div id="div1">
17 |    </div>
18 |    
19 |    <script>      
20 |       console.log(element);
21 |       var element2 = document.getElementById("div1");
22 |       console.log(element2);
23 |    </script>
24 |    
25 |    <h2>appendChild</h2>
26 |    <script>
27 |       var newNode = document.createElement('p');      
28 |       var newTextNode = document.createTextNode('Hello');
29 |       
30 |       element2.appendChild(newNode);
31 |       newNode.appendChild(newTextNode);
32 |    </script>
33 |    
34 |    
35 |    <h2>delete child</h2>
36 |    <div id="div2">
37 |       <p>Delete</p>
38 |    </div>
39 |    <script>
40 |       // 삭제 대상 구하기
41 |       var nodeList = document.getElementsByTagName("div");
42 |       var node = nodeList[1];
43 |       
44 |       // 부모 노드에서 자식 노드 삭제
45 |       var parent = node.parentElement;
46 |       console.log(parent);
47 |       // 3초뒤
48 |       setTimeout(function() {
49 |          parent.removeChild(node);   
50 |       }, 3000);
51 |             
52 |    </script>
53 | </body>   
54 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/layout_overflow.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 |   
 8 | <h3>visible</h3>
 9 | <div class="border outer" style="overflow:visible">
10 |    <div class="border inner">A</div>   
11 |    <div class="border inner">B</div>
12 |    <div class="border inner">C</div>
13 |    <div class="border inner">D</div>         
14 | </div>
15 | 
16 | <h3>hidden</h3>
17 | <div class="border outer" style="overflow:hidden">
18 |    <div class="border inner">A</div>   
19 |    <div class="border inner">B</div>
20 |    <div class="border inner">C</div>
21 |    <div class="border inner">D</div>         
22 | </div>
23 | 
24 | <h3>scroll</h3>
25 | <div class="border outer" style="overflow:scroll">
26 |    <div class="border inner">A</div>   
27 |    <div class="border inner">B</div>
28 |    <div class="border inner">C</div>
29 |    <div class="border inner">D</div>
30 |    <div class="border inner">E</div>                  
31 | </div>
32 | 
33 | <h3>auto</h3>
34 | <div class="border outer" style="auto">
35 |    <div class="border inner">A</div>   
36 |    <div class="border inner">B</div>
37 |    <div class="border inner">C</div>
38 |    <div class="border inner">D</div>         
39 |    <div class="border inner">E</div>
40 | </div>
41 | 
42 | </body>
43 | <style>
44 |    .border { border : solid 1px black; margin:1px; }
45 |    .outer { width:200px; height:200px; }
46 |    .inner { width:50px; height:50px; background-color: lightsteelblue; }
47 | </style>
48 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/selector_attribute.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="UTF-8">
 4 | </head>
 5 | <body>
 6 |    <h1>Attribute</h1>
 7 |    <div>
 8 |       <p myAttr="first">Custom Attribute : first</p>
 9 |       <p myAttr="first second">Custom Attribute : first, second</p>
10 |    </div>
11 |    <div class="sample">
12 |       <input type="button" value="그냥 버튼">
13 |       <br>
14 |       <input type="reset" value="초기화">
15 |       <br>
16 |       <input type="submit" value="완료">
17 |    </div>
18 |    <div class="sample">      
19 |       <input type="checkbox" name="Bus" checked>Bus
20 |       <br>
21 |       <input type="checkbox" name="Metro">Metro
22 |       <br>
23 |       <input type="checkbox" name="Walk">Walk
24 |    </div>
25 |    <style>
26 |       p[myAttr] {
27 |          color: red;
28 |       }
29 |       
30 |       /* myAttr에 */
31 |       p[myAttr ~="second"] {
32 |          font-size: 20px;
33 |       }
34 |       
35 |       /* 타입이 reset인 input */
36 |       input[type="reset"] {
37 |          color: blue
38 |       }
39 |       
40 |       /* 마우스 오버된 input */
41 |       input:hover {
42 |          color: red;
43 |       }
44 |       
45 |       /* type 속성값에 tt가 포함된 input */
46 |       input[type*="tt"] {
47 |          color: purple;
48 |       }
49 |       
50 |       /* 체크된 인풋 항목 */
51 |       input:checked {
52 |          margin-left: 20px;                           
53 |       }
54 |       
55 |       /* sample 클래스가 없는 div */
56 |       div:not(.sample) {
57 |          background-color: yellow;
58 |       }
59 |    </style>
60 | </body>
61 | 
62 | </html>


--------------------------------------------------------------------------------
/01.Data/numbers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Number 타입 
 3 |  */
 4 | 
 5 | // 16진수형, 10진수형, 8진수형
 6 | console.log('== Number ==\n');
 7 | console.log(15);   // 10진수
 8 | console.log(0x0F); // 16진수
 9 | console.log(0o17);  // 8진수
10 | 
11 | let val = 1;
12 | console.log('typeof(val) =', typeof(val) );
13 | console.log('val은 숫자 타입인가?', typeof val == 'number');
14 | 
15 | // 정수로 변환
16 | console.log('\n== parseInt ==')
17 | const num1 = parseInt("123")
18 | console.log('parseInt(123) =', num1, ', Type: ',typeof num1);  // number
19 | const num2 = parseInt("123px")
20 | console.log('parserInt("123px") =', num2, ', Type: ', typeof num2); // number
21 | const num3 = parseInt("123.45")
22 | console.log('parseInt(123.45) =', num3, ', Type: ',typeof num3);  // number
23 | const num4 = parseInt('Hello')
24 | console.log('parserInt("Hello") =', num4, ', Type: ', typeof num4);
25 | 
26 | // 실수로 변환
27 | console.log('\n== parseFloat ==')
28 | const num5 = parseFloat("123.45")
29 | console.log('parseFloat("123.45") =', num5, ', Type:', typeof num5);     // 123.45
30 | 
31 | // 정수와 실수 비교
32 | console.log('\n== Int, Float 비교 ==')
33 | console.log('123 == 123.0 :',123 == 123.0);   // true
34 | console.log('123 === 123.0 :',123 === 123.0);   // true
35 | 
36 | // 실수를 정수로 : 반올림, 올림, 내림. 내장객체 Math
37 | console.log('\n== 반올림,올림,내림 ==')
38 | console.log('반올림(round) : round(3.15) =', Math.round(3.14), ', round(3.56) =', Math.round(3.56))
39 | console.log('올림(ceil) : ceil(3.15) =', Math.ceil(3.14),', ceil(3.56) =', Math.ceil(3.56))
40 | console.log('내림(floor): floor(3.15) =', Math.floor(3.14),', floor(3.56) =', Math.floor(3.56))


--------------------------------------------------------------------------------
/WWW/CSS/layout_display.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 | <h3>Block</h3>
 8 | <div class="border outer">
 9 |    <div class="border inner"></div>   
10 |    <div class="border inner"></div>
11 |    <div class="border inner"></div>
12 | </div>   
13 | <h3>Inline</h3>
14 | <div class="border outer">
15 |    <div class="border inner inline">A</div>   
16 |    <div class="border inner inline">B</div>
17 |    <div class="border inner inline">C</div>   
18 | </div>
19 | <h3>Inline-Block</h3>
20 | <div class="border outer">
21 |    <div class="border inner inline-block">A</div>   
22 |    <div class="border inner inline-block">B</div>
23 |    <div class="border inner inline-block">C</div>   
24 | </div>
25 | <h3>Table</h3>
26 | <div class="border outer" style="display:table;">
27 |    <div class="border inner" style="display:table-row;">   
28 |       <div class="border inner table">Cell1</div>
29 |       <div class="border inner table">Cell2</div>   
30 |    </div>
31 |    <div class="border inner" style="display:table-row;">   
32 |       <div class="border inner table">Cell1</div>
33 |       <div class="border inner table">Cell2</div>   
34 |       <div class="border inner table">Cell3</div>   
35 |    </div>
36 | </div>
37 | </body>
38 | <style>
39 |    .border { border : solid 1px black; margin:1px; }
40 |    .outer { width:200px; height:200px; }
41 |    .inner { width:50px; height:50px; }
42 |    .inline { display:inline; }
43 |    .inline-block { display: inline-block; }
44 |    .table { display:table-cell; }   
45 | </style>
46 | </html>


--------------------------------------------------------------------------------
/WWW/jQuery/todo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |    <meta charset="UTF-8">
 5 |    <script src="jquery.min.js"></script>
 6 |    <script>
 7 |       var todos = [
 8 |          { todo:'좋은날', date:new Date(), done:false}
 9 |       ];
10 |       
11 |       function showTodos() {
12 |          var $todos = $('#todos');
13 |          $todos.empty();
14 |          
15 |          todos.forEach(function(todo) {
16 |             $('#todos').append( '<li>' + todo.todo + '</li>' );
17 |          });
18 |       }
19 |       
20 |       $(document).ready(function() {
21 |          todos.forEach(function(item) {
22 |             $('#todos').append( '<li>' + item.todo  + ' ( ' + item.date + ')</li>' );   
23 |          });
24 |          
25 |          $('#todoForm').submit(function() {
26 |             
27 |             var todo = $('[name="todo"').val();
28 |             var date = $('[name="dueDate"]').val();
29 |             
30 |             console.log('submit ', date);
31 |             
32 |             todos.push({todo:todo, date:date});
33 |             // var $todoNode = $('li').text(todo);
34 |             // $todoNode.appendTo('#todos');
35 |             // $('#todos').append( $('li').text(todo) );
36 |             $('#todos').append( '<li>' + todo + '</li>' );
37 |             
38 | 
39 |             return false;
40 |          });
41 |       });            
42 |    </script>
43 | </head>
44 | <body>
45 | <h1>Todo</h1>
46 | <div>
47 | <ul id="todos">
48 | </ul>
49 | </div>
50 | 
51 | <form id="todoForm">
52 |    <input type="text" name="todo"><br>
53 |    <input type="date" name="dueDate"><br>   
54 |    <input type="submit" value="입력">      
55 | </form>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/WWW/CSS/layout_float.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | </head>
 6 | <body>
 7 |   
 8 | <h3>float</h3>
 9 | <div class="outer border">
10 |    <div class="inner border" style="float:left"><p>A</p></div>
11 |    <div class="inner border"><p>Default</p></div>   
12 |    <div class="inner border" style="float:left"><p>B</p></div>
13 |    <div class="inner border" style="float:right">RIGHT</div>   
14 | </div>
15 | 
16 | <h3>clear:both</h3>
17 | <div class="border outer">
18 |    <div class="inner border" style="float:left"><p>A</p></div>   
19 |    <div class="inner border" style="clear:both;"><p>Clear</p></div>         
20 |    <div class="inner border" style="float:left"><p>B</p></div>
21 |    <div class="inner border" style="float:right">RIGHT</div>
22 | </div>
23 | 
24 | <h3>clear:left</h3>
25 | <div class="border outer">
26 |    <div class="inner border" style="float:left"><p>A</p></div>   
27 |    <div class="inner border" style="clear:left;"><p>Clear</p></div>   
28 |    <div class="inner border" style="float:left"><p>B</p></div>       
29 |    <div class="inner border" style="float:right">RIGHT</div>
30 | </div>
31 | 
32 | <h3>clear:right</h3>
33 | <div class="border outer">
34 |    <div class="inner border" style="float:left"><p>A</p></div>   
35 |    <div class="inner border" style="clear:right;"><p>Clear</p></div>   
36 |    <div class="inner border" style="float:left"><p>B</p></div>
37 |    <div class="inner border" style="float:right"><p>RIGHT</p></div>
38 | </div>
39 |    <img style="clear:right;" src="../resource/cat.png">   
40 | 
41 | </body>
42 | <style>   
43 |    div.border { border : solid 1px black; margin:1px; }
44 |    div.outer { width:300px; height:200px; }
45 |    div.inner { width:50px; height:50px; text-align: center;}
46 |    p { font-size: 14pt; vertical-align: middle;}
47 |    img { width:100px; height:100px; }
48 | </style>
49 | </html>


--------------------------------------------------------------------------------
/WWW/jQuery/event.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <style>
 4 |    .border { border:solid 1px black; display: block; }
 5 |    #outer { width:300px; height:300px; background-color: lightskyblue; }
 6 |    #inner { width:150px; height:150px; background-color: darkblue; margin: 50px auto; }
 7 | </style>
 8 | <script src="jquery.min.js"></script>
 9 | <script>
10 |    $(document).ready(function() {
11 |       var propagation = true;
12 |       
13 |       $('#outer').on('click', function() {
14 |          console.log('outer click');
15 |       });
16 |       
17 |       $('#inner').on('click', function(event) {
18 |          console.log('inner click');
19 |          if ( !propagation )
20 |             event.stopPropagation();
21 |       });
22 |       $('#check').on('change', function() {
23 |            propagation = $('#check').checked;           
24 |       });
25 |    });
26 |    // window.onload = function() {
27 |    //    var outer = document.getElementById('outer');
28 |    //    var inner = document.getElementById('inner');
29 |       
30 |    //    var propagation = true;
31 |       
32 |    //    outer.addEventListener('click', function(event) {
33 |    //       console.log('outer click');
34 |    //    });     
35 |       
36 |    //    inner.addEventListener('click', function(event) {
37 |    //       console.log('inner click');
38 |    //       if ( !propagation )
39 |    //          event.stopPropagation();
40 |    //    });
41 |       
42 |    //    var check = document.getElementById('check');
43 |    //    check.addEventListener('change', function(e) {
44 |    //       console.log('change ', check.checked);
45 |    //       propagation = check.checked;
46 |    //    });
47 |    // }
48 | </script>     
49 | <body>
50 |    <div>
51 |       <input type="checkbox" id="check" checked>Propagation</input>
52 |    </div>
53 | 
54 |    <div id="outer" class="border">
55 |       <div id="inner" class="border">         
56 |       </div>
57 |    </div>
58 |    
59 |    
60 | </body>   
61 | </html>


--------------------------------------------------------------------------------
/WWW/HTML/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | </head>
 6 | <body>
 7 | <h1>회원가입</h1>
 8 | <form action="send.php">
 9 | 
10 |     <fieldset>
11 |         <legend>필수 사항</legend>
12 |         <ul>
13 |             <li>
14 |                 구분
15 |                 <input type="radio" name="userType" id="userType_local" checked> 
16 |                 <label for="userType_local">내국인</label>
17 |                 <input type="radio" name="userType" id="userType_foreigner"> 
18 |                 <label for="userType_foreigner">외국인</label>
19 |             </li>
20 |             <li>
21 |                 <label for="userId">아이디</label>
22 |                 <input type="text" id="userId" value="영문, 숫자">
23 |             </li>
24 |             <li>
25 |                 <label for="userPass">비밀번호</label>
26 |                 <input type="password" id="userPass" value="영문, 숫자, 특수문자">
27 |             </li>
28 |         </ul>
29 |     </fieldset>
30 | 
31 |     <fieldset>
32 |         <legend>추가 사항</legend>
33 |         <ul>
34 |             <li>
35 |                 <label for="userEmail">이메일</label>
36 |                 <input type="text" id="userEmail">
37 |             </li>
38 |             <li>
39 |                 <label for="userPhone">휴대폰 번호</label>
40 |                 <input type="text" id="userPhone">
41 |             </li>
42 |             <li>
43 |                 <label for="userAge">나이</label>
44 |                 <input type="text" id="userAge">
45 |             </li>
46 |             <li>
47 |                 <label for="userSite">홈페이지</label>
48 |                 <input type="text" id="userSite">
49 |             </li>
50 |             <li>
51 |                 <label for="userInfo">소개글</label>
52 |                 <textarea id="userInfo" cols="30" rows="10">간단한 소개글을 입력하세요.</textarea>
53 |             </li>
54 |         </ul>
55 |     </fieldset>
56 | 
57 |     <button type="reset">취소</button> 
58 |     <button type="submit">등록</button>
59 | 
60 | </form>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/01.Data/string.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 문자열 다루기
 3 |  */
 4 | 
 5 | var str = 'Hello JavaScript';
 6 | console.log('typeof str :', typeof str); // 'string'
 7 | 
 8 | // 문자열 덧붙이기
 9 | var str2 = 'Hello' + ' JavaScript';
10 | console.log('+ : ',str2);
11 | var str3 = 'Hello'.concat(' JavaScript');
12 | console.log('concat : ', str3)
13 | 
14 | // 문자열 비교
15 | console.log('str == str2 :', str == str2); // true
16 | console.log('str === str3 :', str === str3); // true
17 | 
18 | var newStr, ret;
19 | 
20 | // 문자열 내 위치 찾기
21 | console.log('indexof : ', str.indexOf('Sc'), str.indexOf('sc')); // 10, -1
22 | console.log('lastIndexOf : ', str.lastIndexOf('ri')); // 12
23 | 
24 | // char 타입은 없으니, string
25 | var ch = str.charAt(2);
26 | console.log('charAt : ', ch, typeof ch); // l, string
27 | 
28 | // 원 문자열은 그대로
29 | newStr = str.slice(1, 4);
30 | console.log('slice(1, 4) : ', newStr); // ell
31 | 
32 | // 부분 문자열
33 | newStr = str.substring(1, 4);
34 | console.log('substring(1, 4) : ',newStr); // ell
35 | 
36 | // start, length
37 | newStr = str.substr(1, 4);
38 | console.log('substr : ', newStr); // ello
39 | 
40 | // 특정 문자로 분리
41 | newStr = str.split('a');
42 | console.log('split : ', newStr); // [ 'Hello J', 'v', 'Script' ]
43 | 
44 | // 정규식
45 | ret = str.match(/a/g);
46 | // [ 'a', index: 7, input: 'Hello JavaScript' ]
47 | console.log('match : ', ret);
48 | 
49 | // 정규식을 이용한 변환
50 | newStr = str.replace(/a/g, 'A');
51 | // Hello JAvAScript
52 | console.log('replace : ', newStr);
53 | 
54 | 
55 | //
56 | // String 타입
57 | //
58 | var strObj = new String('Hello JavaScript');
59 | console.log('String Object Type :', typeof strObj);
60 | 
61 | var strObj2 = new String('Hello JavaScript');
62 | 
63 | console.log('str == strObj1 :',str == strObj); // true
64 | console.log('str === strObj1 :',str === strObj); // false
65 | 
66 | console.log('strObj1 == strObj2 :',strObj == strObj2); // false
67 | console.log('strObj1 === strObj2 :',strObj === strObj2); // false
68 | console.log('strObj1.toString() === strObj2.toString() :',strObj.toString() === strObj2.toString()); // true
69 | 


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery_web.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |    <meta charset="UTF-8">
 6 | 
 7 |    <style>
 8 |       nav h1 {
 9 |          position: absolute;
10 |          font-size: 1px;
11 |       }
12 |       
13 |       nav ul,
14 |       nav li {
15 |          margin: 0;
16 |          padding: 0;
17 |       }
18 |       
19 |       nav li {
20 |          display: inline;
21 |          margin-right: 10px;
22 |       }
23 |       
24 |       section {
25 |          border: 1px dashed #f33;
26 |          margin-bottom: 10px;
27 |          display: block;
28 |       }
29 |       
30 |       nav {
31 |          margin-bottom: 10px;
32 |          padding: 10px;
33 |          background-color: #9ee6db
34 |       }
35 |       
36 |       @media all and (min-width:480px) {
37 |          nav {
38 |             float: left;
39 |             margin-right: 10px;
40 |          }
41 |          .content {
42 |             overflow: hidden;
43 |          }
44 |       }
45 |    </style>
46 | </head>
47 | 
48 | <body>
49 |    <nav>
50 |       <h1>메뉴</h1>
51 |       <ul>
52 |          <li><a href="#music">뮤직</a></li>
53 |          <li><a href="#movie">영화</a></li>
54 |          <li><a href="#game">게임</a></li>
55 |       </ul>
56 |    </nav>
57 | 
58 |    <div class='content'>
59 |       <section id='music'>
60 |          <h1>뮤직</h1>
61 |          <ul>
62 |             <li>'나는 가수다'의 노래</li>
63 |             <li>타마엔 베가본드</li>
64 |             <li>김진의 추천 앨범</li>
65 |          </ul>
66 |       </section>
67 |       <section id='movie'>
68 |          <h1>영화</h1>
69 |          <ul>
70 |             <li>여름 미드 추천</li>
71 |             <li>슈퍼맨과 배트맨의 고향 DC코믹스 무비</li>
72 |             <li>장점과 단점이 공존하는 영화, 윤계상의 '풍산개'</li>
73 |          </ul>
74 |       </section>
75 |       <section id='game'>
76 |          <h1>게임</h1>
77 |          <ul>
78 |             <li>MMORPG 유저라면 솔깃한 이야기</li>
79 |             <li>순간 판단력이 중요해요, 미로찾기</li>
80 |             <li>귀엽고 사랑스러운 내 양들과 함께!</li>
81 |          </ul>
82 |       </section>
83 |    </div>
84 | 
85 | </body>
86 | 
87 | </html>


--------------------------------------------------------------------------------
/04.OperatorAndControls/instanceof.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * instanceof
 3 |  */
 4 | 
 5 | // 넘버
 6 | console.log('== Number');
 7 | console.log('num1 = 1, num2 = new Number(1)');
 8 | var num1 = 1;
 9 | var num2 = new Number(1);
10 | console.log('num1 typeof :', typeof num1);
11 | console.log('num2 typeof :', typeof num2);
12 | console.log('num1 == num2 :', num1 == num2);
13 | console.log('num1 === num2 :', num1 === num2);
14 | console.log('num1 instanceof Number :', num1 instanceof Number); // false
15 | console.log('num2 instanceof Number :', num2 instanceof Number); // true
16 | 
17 | // 문자열
18 | console.log('\n== String');
19 | console.log("str1 = 'Hello', str2 = new String('Hello')");
20 | var str1 = 'Hello';
21 | var str2 = new String('Hello');
22 | console.log('str1 typeof :', typeof str1); // string
23 | console.log('str2 typeof :', typeof str2); // object
24 | console.log('str1 instanceof String :', str1 instanceof String); // false
25 | console.log('str2 instanceof String :', str2 instanceof String); // true
26 | 
27 | // 배열
28 | console.log('\n== Array');
29 | console.log('array1 = [1, 2, 3], array2 = new Array(1, 2, 3)');
30 | var array1 = [1, 2, 3];
31 | var array2 = new Array(1, 2, 3);
32 | console.log('array1 typeof :', typeof array1); // object
33 | console.log('array2 typeof :', typeof array2); // object
34 | console.log('array1 == array2 :', array1 == array2); // false
35 | console.log('array1 instanceof Array :', array1 instanceof Array); // true
36 | console.log('array2 instanceof Array :', array2 instanceof Array); // true
37 | 
38 | // 생성자 함수
39 | console.log('\n== Function Class');
40 | function Clazz(name) {
41 |    this.name = name;
42 | }
43 | 
44 | function Klazz(name) {
45 |    this.name = name;
46 | }
47 | 
48 | var c = new Clazz("instance1");
49 | var k = new Klazz("instance2");
50 | 
51 | console.log('Clazz instanceof Clazz :',c instanceof Clazz);		//true
52 | console.log('Clazz instanceof Klazz :',c instanceof Klazz);		//false
53 | console.log('Klazz instanceof Object :',k instanceof Object);	//true
54 | 
55 | // 클래스
56 | console.log('\n== Class');
57 | class MyClass {   
58 | }
59 | 
60 | var obj = new MyClass();
61 | console.log('obj typeof :', typeof obj); // object
62 | console.log('ob instanceof MyClass :', obj instanceof MyClass); // true
63 | console.log('ob instanceof Object :', obj instanceof Object); // true


--------------------------------------------------------------------------------
/WWW/ResponsibleWeb/mediaquery.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="ko">
  3 | 
  4 | <head>
  5 |    <meta charset="utf-8">
  6 |    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  7 |    <title>CSS Media Query 실습</title>
  8 |    <style>
  9 |       nav {
 10 |          margin-bottom: 10px;
 11 |          padding: 10px;
 12 |          background: #9ee6db;
 13 |       }
 14 |       
 15 |       nav h1 {
 16 |          position: absolute;
 17 |          z-index: -1;
 18 |          font-size: 1px;
 19 |       }
 20 |       
 21 |       nav ul,
 22 |       nav li {
 23 |          margin: 0;
 24 |          padding: 0;
 25 |          list-style: none;
 26 |       }
 27 |       
 28 |       nav li {
 29 |          display: inline;
 30 |          margin-right: 10px;
 31 |       }
 32 |       
 33 |       @media all and (min-width:560px) {
 34 |          nav {
 35 |             float: left;
 36 |             margin-right: 10px;
 37 |          }
 38 |          .content {
 39 |             overflow: hidden
 40 |          }
 41 |       }
 42 |       
 43 |       section {
 44 |          display: block;
 45 |          margin-bottom: 10px;
 46 |          border: 1px dashed #f33;
 47 |       }
 48 |       
 49 |       section:target {
 50 |          background: #ff9
 51 |       }
 52 |       
 53 |       section h1 {
 54 |          margin: 10px;
 55 |          font-size: 20px;
 56 |       }
 57 |    </style>
 58 | </head>
 59 | 
 60 | <body>
 61 |    <h1>CSS Media Query 실습</h1>
 62 | 
 63 |    <nav>
 64 |       <h1>메뉴</h1>
 65 |       <ul>
 66 |          <li><a href="#music">뮤직</a></li>
 67 |          <li><a href="#movie">영화</a></li>
 68 |          <li><a href="#game">게임</a></li>
 69 |       </ul>
 70 |    </nav>
 71 | 
 72 |    <div class="content">
 73 | 
 74 |       <section id="music">
 75 |          <h1>뮤직</h1>
 76 |          <ul>
 77 |             <li>'나는 가수다'의 노래</li>
 78 |             <li>타마엔 베가본드</li>
 79 |             <li>김진의 추천 앨범</li>
 80 |          </ul>
 81 |       </section>
 82 | 
 83 |       <section id="movie">
 84 |          <h1>영화</h1>
 85 |          <ul>
 86 |             <li>여름 미드 추천</li>
 87 |             <li>슈퍼맨과 배트맨의 고향 DC 코믹스 무비</li>
 88 |             <li>장점과 단점이 공존하는 영화, 윤계상의'풍산개'</li>
 89 |          </ul>
 90 |       </section>
 91 | 
 92 |       <section id="game">
 93 |          <h1>게임</h1>
 94 |          <ul>
 95 |             <li>MMORPG 유저라면 솔깃한 이야기</li>
 96 |             <li>순간 판단력이 중요해요, 미로찾기</li>
 97 |             <li>귀엽고 사랑스러운 내 양들과 함께!</li>
 98 |          </ul>
 99 |       </section>
100 | 
101 |    </div>
102 | 
103 | </body>
104 | 
105 | </html>


--------------------------------------------------------------------------------
/03.Collections/array.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 배열
  3 |  */
  4 | let array = ['Porche', 'BMW', 'Mercedes Benz'];
  5 | let ret;
  6 | let newArray;
  7 | 
  8 | console.log('== 배열 다루기 ==');
  9 | console.log('array : ', array);
 10 | console.log('typeof : ', typeof array); // object
 11 | 
 12 | // length
 13 | console.log('== length')
 14 | console.log('array : ', array);
 15 | console.log('length : ', array.length);
 16 | 
 17 | // 배열에 원소 추가
 18 | console.log('== push');
 19 | console.log('Before :', array);
 20 | ret = array.push('Toyota'); // [ 'Porche', 'BMW', 'Mercedes Benz', 'Toyota' ]
 21 | console.log('After :', array);
 22 | console.log('push result :', ret);
 23 | 
 24 | // 배열의 마지막 원소를 제거. 제거된 원소 반환
 25 | console.log('== pop');
 26 | console.log('Before :', array);
 27 | const popped = array.pop(); // [ 'Porche', 'BMW', 'Mercedes Benz' ]
 28 | console.log('After :', array);
 29 | console.log('pop Result : ', popped);
 30 | 
 31 | // 새로운 배열이 생성된다.
 32 | console.log('== concat')
 33 | const concattedArray = array.concat(['Audi']);
 34 | console.log('origin array : ', array);
 35 | console.log('concatted array : ', concattedArray);
 36 | 
 37 | // 배열에 원소 제거.
 38 | console.log('== delete');
 39 | let deletedArray = [...array];
 40 | console.log('Before : ', deletedArray);
 41 | const deleted = delete deletedArray[2];
 42 | console.log('delete ret :', deleted);
 43 | console.log('After :', deletedArray, 'count :', deletedArray.length);
 44 | 
 45 | // slice : 배열의 일부로 새로운 배열 만들기
 46 | console.log('== slice')
 47 | console.log('Before : ', array);
 48 | // 새로운 배열이 생성된다.
 49 | const slicedArray = array.slice(0, 2)
 50 | console.log('after origin array : ', array);
 51 | console.log('slice(0,2) result : ', newArray);
 52 | 
 53 | // splice : 배열의 일부를 치환하기
 54 | console.log('== splice');
 55 | console.log('Before : ', array);
 56 | // 치환 - array1이 변경됨
 57 | const splicedArray = array.splice(3, 1, 'Ferrari', 'Ford');
 58 | console.log('After origin array : ', array);
 59 | console.log('splice(3, 1, Ferrari, Ford) result : ', splicedArray);
 60 | 
 61 | // splice를 이용한 원소 제거
 62 | console.log('== splice for delete');
 63 | console.log('Before : ', array);
 64 | const splicedArray2 = array.splice(4, 1);
 65 | console.log('After : ', array);
 66 | console.log('splice(4, 1) Result : ', splicedArray2);
 67 | 
 68 | console.log('== shift');
 69 | console.log('Before :', array);
 70 | ret = array.shift();
 71 | console.log('After :', array);
 72 | console.log('shift result :', ret);
 73 | 
 74 | console.log('== unshift');
 75 | console.log('Before :', array);
 76 | ret = array.unshift('Lamborghini');
 77 | console.log('After :', array);
 78 | console.log('unshift(Lamborghini) result : ', ret);
 79 | 
 80 | // reverse : 역순으로 변경
 81 | console.log('== reverse');
 82 | console.log('Before :', array);
 83 | ret = array.reverse();
 84 | console.log('After :', array);
 85 | console.log('reverse result : ', ret);
 86 | 
 87 | console.log('== sort');
 88 | console.log('Before :', array);
 89 | newArray = array.sort();
 90 | console.log('After :', array);
 91 | console.log('sort result : ', newArray);
 92 | 
 93 | console.log('== sort2');
 94 | console.log('Before :', array);
 95 | array.sort(function sortFunc(item1, item2) {
 96 |   return item1.length > item2.length;
 97 | });
 98 | console.log('After :', array);
 99 | 
100 | // 문자열로 변환
101 | console.log('== join');
102 | console.log('array : ', array)
103 | ret = array.join(' or ');
104 | console.log('join : ', ret);
105 | 
106 | // 문자열로
107 | console.log('== toString');
108 | console.log('array : ', array);
109 | console.log('toString result :', array.toString());
110 | 
111 | 
112 | //
113 | // Array 타입
114 | //
115 | var array2 = new Array(3);
116 | var array3 = new Array('Bus', 'Metro', 'Walk');
117 | 
118 | console.log('new Array(3) :', array2);
119 | console.log('new Array("item") :', array3);
120 | 


--------------------------------------------------------------------------------
/WWW/jQuery/jquery.min.js:
--------------------------------------------------------------------------------
1 | /*! jQuery v2.2.0 | (c) jQuery Foundation | jquery.org/license */
2 | !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="2.2.0",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!k.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=d.createElement("script"),b.text=a,d.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:h.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(d=e.call(arguments,2),f=function(){return a.apply(b||this,d.concat(e.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=la(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=ma(b);function pa(){}pa.prototype=d.filters=d.pseudos,d.setFilters=new pa,g=fa.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=R.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=S.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(Q," ")}),h=h.slice(c.length));for(g in d.filter)!(e=W[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fa.error(a):z(a,i).slice(0)};function qa(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return h.call(b,a)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&f.parentNode&&(this.length=1,this[0]=f),this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?void 0!==c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?h.call(n(a),this[0]):h.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||n.uniqueSort(e),D.test(a)&&e.reverse()),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){n.each(b,function(b,c){n.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==n.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return n.each(arguments,function(a,b){var c;while((c=n.inArray(b,f,c))>-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.removeEventListener("DOMContentLoaded",J),a.removeEventListener("load",J),n.ready()}n.ready.promise=function(b){return I||(I=n.Deferred(),"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(n.ready):(d.addEventListener("DOMContentLoaded",J),a.addEventListener("load",J))),I.promise(b)},n.ready.promise();var K=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)K(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},L=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function M(){this.expando=n.expando+M.uid++}M.uid=1,M.prototype={register:function(a,b){var c=b||{};return a.nodeType?a[this.expando]=c:Object.defineProperty(a,this.expando,{value:c,writable:!0,configurable:!0}),a[this.expando]},cache:function(a){if(!L(a))return{};var b=a[this.expando];return b||(b={},L(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[b]=c;else for(d in b)e[d]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=a[this.expando];if(void 0!==f){if(void 0===b)this.register(a);else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in f?d=[b,e]:(d=e,d=d in f?[d]:d.match(G)||[])),c=d.length;while(c--)delete f[d[c]]}(void 0===b||n.isEmptyObject(f))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!n.isEmptyObject(b)}};var N=new M,O=new M,P=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Q=/[A-Z]/g;function R(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Q,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:P.test(c)?n.parseJSON(c):c}catch(e){}O.set(a,b,c);
3 | }else c=void 0;return c}n.extend({hasData:function(a){return O.hasData(a)||N.hasData(a)},data:function(a,b,c){return O.access(a,b,c)},removeData:function(a,b){O.remove(a,b)},_data:function(a,b,c){return N.access(a,b,c)},_removeData:function(a,b){N.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=O.get(f),1===f.nodeType&&!N.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),R(f,d,e[d])));N.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){O.set(this,a)}):K(this,function(b){var c,d;if(f&&void 0===b){if(c=O.get(f,a)||O.get(f,a.replace(Q,"-$&").toLowerCase()),void 0!==c)return c;if(d=n.camelCase(a),c=O.get(f,d),void 0!==c)return c;if(c=R(f,d,void 0),void 0!==c)return c}else d=n.camelCase(a),this.each(function(){var c=O.get(this,d);O.set(this,d,b),a.indexOf("-")>-1&&void 0!==c&&O.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){O.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=N.get(a,b),c&&(!d||n.isArray(c)?d=N.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return N.get(a,c)||N.access(a,c,{empty:n.Callbacks("once memory").add(function(){N.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=N.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var S=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=new RegExp("^(?:([+-])=|)("+S+")([a-z%]*)$","i"),U=["Top","Right","Bottom","Left"],V=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)};function W(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return n.css(a,b,"")},i=h(),j=c&&c[3]||(n.cssNumber[b]?"":"px"),k=(n.cssNumber[b]||"px"!==j&&+i)&&T.exec(n.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,n.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var X=/^(?:checkbox|radio)$/i,Y=/<([\w:-]+)/,Z=/^$|\/(?:java|ecma)script/i,$={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};$.optgroup=$.option,$.tbody=$.tfoot=$.colgroup=$.caption=$.thead,$.th=$.td;function _(a,b){var c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function aa(a,b){for(var c=0,d=a.length;d>c;c++)N.set(a[c],"globalEval",!b||N.get(b[c],"globalEval"))}var ba=/<|&#?\w+;/;function ca(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],o=0,p=a.length;p>o;o++)if(f=a[o],f||0===f)if("object"===n.type(f))n.merge(m,f.nodeType?[f]:f);else if(ba.test(f)){g=g||l.appendChild(b.createElement("div")),h=(Y.exec(f)||["",""])[1].toLowerCase(),i=$[h]||$._default,g.innerHTML=i[1]+n.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;n.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",o=0;while(f=m[o++])if(d&&n.inArray(f,d)>-1)e&&e.push(f);else if(j=n.contains(f.ownerDocument,f),g=_(l.appendChild(f),"script"),j&&aa(g),c){k=0;while(f=g[k++])Z.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),l.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",l.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var da=/^key/,ea=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,fa=/^([^.]*)(?:\.(.+)|)/;function ga(){return!0}function ha(){return!1}function ia(){try{return d.activeElement}catch(a){}}function ja(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ja(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=ha;else if(!e)return this;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return"undefined"!=typeof n&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(G)||[""],j=b.length;while(j--)h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.hasData(a)&&N.get(a);if(r&&(i=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&N.remove(a,"handle events")}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(N.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.rnamespace||a.rnamespace.test(g.namespace))&&(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!==this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget detail eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,e,f,g=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||d,e=c.documentElement,f=c.body,a.pageX=b.clientX+(e&&e.scrollLeft||f&&f.scrollLeft||0)-(e&&e.clientLeft||f&&f.clientLeft||0),a.pageY=b.clientY+(e&&e.scrollTop||f&&f.scrollTop||0)-(e&&e.clientTop||f&&f.clientTop||0)),a.which||void 0===g||(a.which=1&g?1:2&g?3:4&g?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,e,f=a.type,g=a,h=this.fixHooks[f];h||(this.fixHooks[f]=h=ea.test(f)?this.mouseHooks:da.test(f)?this.keyHooks:{}),e=h.props?this.props.concat(h.props):this.props,a=new n.Event(g),b=e.length;while(b--)c=e[b],a[c]=g[c];return a.target||(a.target=d),3===a.target.nodeType&&(a.target=a.target.parentNode),h.filter?h.filter(a,g):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==ia()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===ia()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?ga:ha):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={constructor:n.Event,isDefaultPrevented:ha,isPropagationStopped:ha,isImmediatePropagationStopped:ha,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ga,a&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ga,a&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ga,a&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),n.fn.extend({on:function(a,b,c,d){return ja(this,a,b,c,d)},one:function(a,b,c,d){return ja(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=ha),this.each(function(){n.event.remove(this,a,c,b)})}});var ka=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,la=/<script|<style|<link/i,ma=/checked\s*(?:[^=]|=\s*.checked.)/i,na=/^true\/(.*)/,oa=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function pa(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a:a}function qa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function ra(a){var b=na.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function sa(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(N.hasData(a)&&(f=N.access(a),g=N.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}O.hasData(a)&&(h=O.access(a),i=n.extend({},h),O.set(b,i))}}function ta(a,b){var c=b.nodeName.toLowerCase();"input"===c&&X.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}function ua(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&ma.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),ua(f,b,c,d)});if(o&&(e=ca(b,a[0].ownerDocument,!1,a,d),g=e.firstChild,1===e.childNodes.length&&(e=g),g||d)){for(h=n.map(_(e,"script"),qa),i=h.length;o>m;m++)j=e,m!==p&&(j=n.clone(j,!0,!0),i&&n.merge(h,_(j,"script"))),c.call(a[m],j,m);if(i)for(k=h[h.length-1].ownerDocument,n.map(h,ra),m=0;i>m;m++)j=h[m],Z.test(j.type||"")&&!N.access(j,"globalEval")&&n.contains(k,j)&&(j.src?n._evalUrl&&n._evalUrl(j.src):n.globalEval(j.textContent.replace(oa,"")))}return a}function va(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(_(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&aa(_(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(ka,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=_(h),f=_(a),d=0,e=f.length;e>d;d++)ta(f[d],g[d]);if(b)if(c)for(f=f||_(a),g=g||_(h),d=0,e=f.length;e>d;d++)sa(f[d],g[d]);else sa(a,h);return g=_(h,"script"),g.length>0&&aa(g,!i&&_(a,"script")),h},cleanData:function(a){for(var b,c,d,e=n.event.special,f=0;void 0!==(c=a[f]);f++)if(L(c)){if(b=c[N.expando]){if(b.events)for(d in b.events)e[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);c[N.expando]=void 0}c[O.expando]&&(c[O.expando]=void 0)}}}),n.fn.extend({domManip:ua,detach:function(a){return va(this,a,!0)},remove:function(a){return va(this,a)},text:function(a){return K(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.appendChild(a)}})},prepend:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(_(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return K(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!la.test(a)&&!$[(Y.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(_(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return ua(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(_(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),f=e.length-1,h=0;f>=h;h++)c=h===f?this:this.clone(!0),n(e[h])[b](c),g.apply(d,c.get());return this.pushStack(d)}});var wa,xa={HTML:"block",BODY:"block"};function ya(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function za(a){var b=d,c=xa[a];return c||(c=ya(a,b),"none"!==c&&c||(wa=(wa||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=wa[0].contentDocument,b.write(),b.close(),c=ya(a,b),wa.detach()),xa[a]=c),c}var Aa=/^margin/,Ba=new RegExp("^("+S+")(?!px)[a-z%]+$","i"),Ca=function(b){var c=b.ownerDocument.defaultView;return c.opener||(c=a),c.getComputedStyle(b)},Da=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e},Ea=d.documentElement;!function(){var b,c,e,f,g=d.createElement("div"),h=d.createElement("div");if(h.style){h.style.backgroundClip="content-box",h.cloneNode(!0).style.backgroundClip="",l.clearCloneStyle="content-box"===h.style.backgroundClip,g.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",g.appendChild(h);function i(){h.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",h.innerHTML="",Ea.appendChild(g);var d=a.getComputedStyle(h);b="1%"!==d.top,f="2px"===d.marginLeft,c="4px"===d.width,h.style.marginRight="50%",e="4px"===d.marginRight,Ea.removeChild(g)}n.extend(l,{pixelPosition:function(){return i(),b},boxSizingReliable:function(){return null==c&&i(),c},pixelMarginRight:function(){return null==c&&i(),e},reliableMarginLeft:function(){return null==c&&i(),f},reliableMarginRight:function(){var b,c=h.appendChild(d.createElement("div"));return c.style.cssText=h.style.cssText="-webkit-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",h.style.width="1px",Ea.appendChild(g),b=!parseFloat(a.getComputedStyle(c).marginRight),Ea.removeChild(g),h.removeChild(c),b}})}}();function Fa(a,b,c){var d,e,f,g,h=a.style;return c=c||Ca(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),!l.pixelMarginRight()&&Ba.test(g)&&Aa.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Ga(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Ha=/^(none|table(?!-c[ea]).+)/,Ia={position:"absolute",visibility:"hidden",display:"block"},Ja={letterSpacing:"0",fontWeight:"400"},Ka=["Webkit","O","Moz","ms"],La=d.createElement("div").style;function Ma(a){if(a in La)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ka.length;while(c--)if(a=Ka[c]+b,a in La)return a}function Na(a,b,c){var d=T.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Oa(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+U[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+U[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+U[f]+"Width",!0,e))):(g+=n.css(a,"padding"+U[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+U[f]+"Width",!0,e)));return g}function Pa(b,c,e){var f=!0,g="width"===c?b.offsetWidth:b.offsetHeight,h=Ca(b),i="border-box"===n.css(b,"boxSizing",!1,h);if(d.msFullscreenElement&&a.top!==a&&b.getClientRects().length&&(g=Math.round(100*b.getBoundingClientRect()[c])),0>=g||null==g){if(g=Fa(b,c,h),(0>g||null==g)&&(g=b.style[c]),Ba.test(g))return g;f=i&&(l.boxSizingReliable()||g===b.style[c]),g=parseFloat(g)||0}return g+Oa(b,c,e||(i?"border":"content"),f,h)+"px"}function Qa(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=N.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&V(d)&&(f[g]=N.access(d,"olddisplay",za(d.nodeName)))):(e=V(d),"none"===c&&e||N.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Fa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=T.exec(c))&&e[1]&&(c=W(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(n.cssNumber[h]?"":"px")),l.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Fa(a,b,d)),"normal"===e&&b in Ja&&(e=Ja[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?Ha.test(n.css(a,"display"))&&0===a.offsetWidth?Da(a,Ia,function(){return Pa(a,b,d)}):Pa(a,b,d):void 0},set:function(a,c,d){var e,f=d&&Ca(a),g=d&&Oa(a,b,d,"border-box"===n.css(a,"boxSizing",!1,f),f);return g&&(e=T.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=n.css(a,b)),Na(a,c,g)}}}),n.cssHooks.marginLeft=Ga(l.reliableMarginLeft,function(a,b){return b?(parseFloat(Fa(a,"marginLeft"))||a.getBoundingClientRect().left-Da(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px":void 0}),n.cssHooks.marginRight=Ga(l.reliableMarginRight,function(a,b){return b?Da(a,{display:"inline-block"},Fa,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+U[d]+b]=f[d]||f[d-2]||f[0];return e}},Aa.test(a)||(n.cssHooks[a+b].set=Na)}),n.fn.extend({css:function(a,b){return K(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=Ca(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Qa(this,!0)},hide:function(){return Qa(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){V(this)?n(this).show():n(this).hide()})}});function Ra(a,b,c,d,e){return new Ra.prototype.init(a,b,c,d,e)}n.Tween=Ra,Ra.prototype={constructor:Ra,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||n.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Ra.propHooks[this.prop];return a&&a.get?a.get(this):Ra.propHooks._default.get(this)},run:function(a){var b,c=Ra.propHooks[this.prop];return this.options.duration?this.pos=b=n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ra.propHooks._default.set(this),this}},Ra.prototype.init.prototype=Ra.prototype,Ra.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[n.cssProps[a.prop]]&&!n.cssHooks[a.prop]?a.elem[a.prop]=a.now:n.style(a.elem,a.prop,a.now+a.unit)}}},Ra.propHooks.scrollTop=Ra.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},n.fx=Ra.prototype.init,n.fx.step={};var Sa,Ta,Ua=/^(?:toggle|show|hide)$/,Va=/queueHooks$/;function Wa(){return a.setTimeout(function(){Sa=void 0}),Sa=n.now()}function Xa(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=U[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ya(a,b,c){for(var d,e=(_a.tweeners[b]||[]).concat(_a.tweeners["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Za(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&V(a),q=N.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?N.get(a,"olddisplay")||za(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Ua.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?za(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=N.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;N.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ya(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function $a(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function _a(a,b,c){var d,e,f=0,g=_a.prefilters.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Sa||Wa(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{},easing:n.easing._default},c),originalProperties:b,originalOptions:c,startTime:Sa||Wa(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for($a(k,j.opts.specialEasing);g>f;f++)if(d=_a.prefilters[f].call(j,a,k,j.opts))return n.isFunction(d.stop)&&(n._queueHooks(j.elem,j.opts.queue).stop=n.proxy(d.stop,d)),d;return n.map(k,Ya,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(_a,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return W(c.elem,a,T.exec(b),c),c}]},tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.match(G);for(var c,d=0,e=a.length;e>d;d++)c=a[d],_a.tweeners[c]=_a.tweeners[c]||[],_a.tweeners[c].unshift(b)},prefilters:[Za],prefilter:function(a,b){b?_a.prefilters.unshift(a):_a.prefilters.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(V).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=_a(this,n.extend({},a),f);(e||N.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=N.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Va.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=N.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Xa(b,!0),a,d,e)}}),n.each({slideDown:Xa("show"),slideUp:Xa("hide"),slideToggle:Xa("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(Sa=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),Sa=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Ta||(Ta=a.setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){a.clearInterval(Ta),Ta=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(b,c){return b=n.fx?n.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",l.checkOn=""!==a.value,l.optSelected=c.selected,b.disabled=!0,l.optDisabled=!c.disabled,a=d.createElement("input"),a.value="t",a.type="radio",l.radioValue="t"===a.value}();var ab,bb=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return K(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),e=n.attrHooks[b]||(n.expr.match.bool.test(b)?ab:void 0)),void 0!==c?null===c?void n.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=n.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!l.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(G);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)}}),ab={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=bb[b]||n.find.attr;bb[b]=function(a,b,d){var e,f;return d||(f=bb[b],bb[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,bb[b]=f),e}});var cb=/^(?:input|select|textarea|button)$/i,db=/^(?:a|area)$/i;n.fn.extend({prop:function(a,b){return K(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&n.isXMLDoc(a)||(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b];
4 | },propHooks:{tabIndex:{get:function(a){var b=n.find.attr(a,"tabindex");return b?parseInt(b,10):cb.test(a.nodeName)||db.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),l.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var eb=/[\t\r\n\f]/g;function fb(a){return a.getAttribute&&a.getAttribute("class")||""}n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,fb(this)))});if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,fb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):n.isFunction(a)?this.each(function(c){n(this).toggleClass(a.call(this,c,fb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=n(this),f=a.match(G)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(void 0===a||"boolean"===c)&&(b=fb(this),b&&N.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":N.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+fb(c)+" ").replace(eb," ").indexOf(b)>-1)return!0;return!1}});var gb=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(gb,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){return n.trim(a.value)}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],(c.selected||i===e)&&(l.optDisabled?!c.disabled:null===c.getAttribute("disabled"))&&(!c.parentNode.disabled||!n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(n.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>-1:void 0}},l.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var hb=/^(?:focusinfocus|focusoutblur)$/;n.extend(n.event,{trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!hb.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),l=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},f||!o.trigger||o.trigger.apply(e,c)!==!1)){if(!f&&!o.noBubble&&!n.isWindow(e)){for(j=o.delegateType||q,hb.test(j+q)||(h=h.parentNode);h;h=h.parentNode)p.push(h),i=h;i===(e.ownerDocument||d)&&p.push(i.defaultView||i.parentWindow||a)}g=0;while((h=p[g++])&&!b.isPropagationStopped())b.type=g>1?j:o.bindType||q,m=(N.get(h,"events")||{})[b.type]&&N.get(h,"handle"),m&&m.apply(h,c),m=l&&h[l],m&&m.apply&&L(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=q,f||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!L(e)||l&&n.isFunction(e[q])&&!n.isWindow(e)&&(i=e[l],i&&(e[l]=null),n.event.triggered=q,e[q](),n.event.triggered=void 0,i&&(e[l]=i)),b.result}},simulate:function(a,b,c){var d=n.extend(new n.Event,c,{type:a,isSimulated:!0});n.event.trigger(d,null,b),d.isDefaultPrevented()&&c.preventDefault()}}),n.fn.extend({trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),l.focusin="onfocusin"in a,l.focusin||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a))};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=N.access(d,b);e||d.addEventListener(a,c,!0),N.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=N.access(d,b)-1;e?N.access(d,b,e):(d.removeEventListener(a,c,!0),N.remove(d,b))}}});var ib=a.location,jb=n.now(),kb=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return(!c||c.getElementsByTagName("parsererror").length)&&n.error("Invalid XML: "+b),c};var lb=/#.*$/,mb=/([?&])_=[^&]*/,nb=/^(.*?):[ \t]*([^\r\n]*)$/gm,ob=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,pb=/^(?:GET|HEAD)$/,qb=/^\/\//,rb={},sb={},tb="*/".concat("*"),ub=d.createElement("a");ub.href=ib.href;function vb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(G)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function wb(a,b,c,d){var e={},f=a===sb;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function xb(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function yb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function zb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:ib.href,type:"GET",isLocal:ob.test(ib.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":tb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?xb(xb(a,n.ajaxSettings),b):xb(n.ajaxSettings,a)},ajaxPrefilter:vb(rb),ajaxTransport:vb(sb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m=n.ajaxSetup({},c),o=m.context||m,p=m.context&&(o.nodeType||o.jquery)?n(o):n.event,q=n.Deferred(),r=n.Callbacks("once memory"),s=m.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,getResponseHeader:function(a){var b;if(2===v){if(!h){h={};while(b=nb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===v?g:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return v||(a=u[c]=u[c]||a,t[a]=b),this},overrideMimeType:function(a){return v||(m.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>v)for(b in a)s[b]=[s[b],a[b]];else x.always(a[x.status]);return this},abort:function(a){var b=a||w;return e&&e.abort(b),z(0,b),this}};if(q.promise(x).complete=r.add,x.success=x.done,x.error=x.fail,m.url=((b||m.url||ib.href)+"").replace(lb,"").replace(qb,ib.protocol+"//"),m.type=c.method||c.type||m.method||m.type,m.dataTypes=n.trim(m.dataType||"*").toLowerCase().match(G)||[""],null==m.crossDomain){j=d.createElement("a");try{j.href=m.url,j.href=j.href,m.crossDomain=ub.protocol+"//"+ub.host!=j.protocol+"//"+j.host}catch(y){m.crossDomain=!0}}if(m.data&&m.processData&&"string"!=typeof m.data&&(m.data=n.param(m.data,m.traditional)),wb(rb,m,c,x),2===v)return x;k=n.event&&m.global,k&&0===n.active++&&n.event.trigger("ajaxStart"),m.type=m.type.toUpperCase(),m.hasContent=!pb.test(m.type),f=m.url,m.hasContent||(m.data&&(f=m.url+=(kb.test(f)?"&":"?")+m.data,delete m.data),m.cache===!1&&(m.url=mb.test(f)?f.replace(mb,"$1_="+jb++):f+(kb.test(f)?"&":"?")+"_="+jb++)),m.ifModified&&(n.lastModified[f]&&x.setRequestHeader("If-Modified-Since",n.lastModified[f]),n.etag[f]&&x.setRequestHeader("If-None-Match",n.etag[f])),(m.data&&m.hasContent&&m.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",m.contentType),x.setRequestHeader("Accept",m.dataTypes[0]&&m.accepts[m.dataTypes[0]]?m.accepts[m.dataTypes[0]]+("*"!==m.dataTypes[0]?", "+tb+"; q=0.01":""):m.accepts["*"]);for(l in m.headers)x.setRequestHeader(l,m.headers[l]);if(m.beforeSend&&(m.beforeSend.call(o,x,m)===!1||2===v))return x.abort();w="abort";for(l in{success:1,error:1,complete:1})x[l](m[l]);if(e=wb(sb,m,c,x)){if(x.readyState=1,k&&p.trigger("ajaxSend",[x,m]),2===v)return x;m.async&&m.timeout>0&&(i=a.setTimeout(function(){x.abort("timeout")},m.timeout));try{v=1,e.send(t,z)}catch(y){if(!(2>v))throw y;z(-1,y)}}else z(-1,"No Transport");function z(b,c,d,h){var j,l,t,u,w,y=c;2!==v&&(v=2,i&&a.clearTimeout(i),e=void 0,g=h||"",x.readyState=b>0?4:0,j=b>=200&&300>b||304===b,d&&(u=yb(m,x,d)),u=zb(m,u,x,j),j?(m.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(n.lastModified[f]=w),w=x.getResponseHeader("etag"),w&&(n.etag[f]=w)),204===b||"HEAD"===m.type?y="nocontent":304===b?y="notmodified":(y=u.state,l=u.data,t=u.error,j=!t)):(t=y,(b||!y)&&(y="error",0>b&&(b=0))),x.status=b,x.statusText=(c||y)+"",j?q.resolveWith(o,[l,y,x]):q.rejectWith(o,[x,y,t]),x.statusCode(s),s=void 0,k&&p.trigger(j?"ajaxSuccess":"ajaxError",[x,m,j?l:t]),r.fireWith(o,[x,y]),k&&(p.trigger("ajaxComplete",[x,m]),--n.active||n.event.trigger("ajaxStop")))}return x},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax(n.extend({url:a,type:b,dataType:e,data:c,success:d},n.isPlainObject(a)&&a))}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return n.isFunction(a)?this.each(function(b){n(this).wrapInner(a.call(this,b))}):this.each(function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return!n.expr.filters.visible(a)},n.expr.filters.visible=function(a){return a.offsetWidth>0||a.offsetHeight>0||a.getClientRects().length>0};var Ab=/%20/g,Bb=/\[\]$/,Cb=/\r?\n/g,Db=/^(?:submit|button|image|reset|file)$/i,Eb=/^(?:input|select|textarea|keygen)/i;function Fb(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||Bb.test(a)?d(a,e):Fb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Fb(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Fb(c,a[c],b,e);return d.join("&").replace(Ab,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Eb.test(this.nodeName)&&!Db.test(a)&&(this.checked||!X.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(Cb,"\r\n")}}):{name:b.name,value:c.replace(Cb,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Gb={0:200,1223:204},Hb=n.ajaxSettings.xhr();l.cors=!!Hb&&"withCredentials"in Hb,l.ajax=Hb=!!Hb,n.ajaxTransport(function(b){var c,d;return l.cors||Hb&&!b.crossDomain?{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Gb[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=n("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Ib=[],Jb=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Ib.pop()||n.expando+"_"+jb++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Jb.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Jb.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Jb,"$1"+e):b.jsonp!==!1&&(b.url+=(kb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?n(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Ib.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),l.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||(l.createHTMLDocument?d.implementation.createHTMLDocument(""):d);var e=x.exec(a),f=!c&&[];return e?[b.createElement(e[1])]:(e=ca([a],b,f),f&&f.length&&n(f).remove(),n.merge([],e.childNodes))};var Kb=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Kb)return Kb.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(g,f||[a.responseText,b,a])})}),this},n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};function Lb(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,n.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(e=d.getBoundingClientRect(),c=Lb(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0)-a.scrollTop(),d.left+=n.css(a[0],"borderLeftWidth",!0)-a.scrollLeft()),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Ea})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;n.fn[a]=function(d){return K(this,function(a,d,e){var f=Lb(a);return void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=Ga(l.pixelPosition,function(a,c){return c?(c=Fa(a,b),Ba.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return K(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)},size:function(){return this.length}}),n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Mb=a.jQuery,Nb=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Nb),b&&a.jQuery===n&&(a.jQuery=Mb),n},b||(a.jQuery=a.$=n),n});
5 | 


--------------------------------------------------------------------------------