├── chapter-7
    ├── Korean.png
    ├── flags.png
    ├── Chinese.png
    ├── English.png
    ├── Japanese.png
    ├── loading.gif
    ├── large_image.jpg
    ├── my_important_image.jpg
    ├── not_important_image.jpg
    ├── sleep.js
    ├── 7-316_script_at_bottom.html
    ├── 7-312_script_in_head.html
    ├── 7-352_separated_flags.html
    ├── 7-353_image_sprite.html
    ├── 7-320_img_lazy_load.html
    ├── 7-317_script_lazy_load.html
    └── 7-323_img_lazy_load_background.html
├── chapter-6
    ├── notice_list.json
    ├── 6-297_dom_reflow_inside_loop.js
    ├── 6-297_inefficient_dom_reflow.js
    ├── 6-304_web_worker.html
    ├── worker.js
    ├── 6-269_nesting_level_test.html
    ├── 6-307_shared_workder.html
    ├── sharedWorker.js
    ├── 6-266_requestanimationframe_shim.js
    ├── 6-279_position_relative_absolute.html
    ├── 6-249_settimeout_2_seconds.html
    ├── 6-272_dom_repaint.html
    ├── 6-300_memoization_dom_search.html
    ├── 6-275_dom_reflow.html
    ├── 6-252_same_settimeout.html
    ├── 6-301_cache_dom_variable.html
    ├── 6-255_setinterval_thread_queue.html
    ├── 6-295_change_background.html
    ├── 6-293_changing_display.html
    ├── 6-290_dom_clone.html
    ├── 6-281_reflow_minimized_notice.html
    ├── 6-258_clock_with_setinterval.html
    ├── 6-286_documentfragment.html
    └── 6-261_setinterval_time_difference.html
├── chapter-4
    ├── 4-146_original_object_create.js
    ├── 4-114_new_with_function.html
    ├── 4-115_new_with_class.html
    ├── 4-155_object_create_shim.js
    ├── 4-147_object_create_inheritance.html
    ├── 4-149_object_create_initialize.html
    ├── 4-135_avoiding_prototype.html
    ├── 4-116_calling_function.html
    ├── 4-140_prototype_inheritance.html
    ├── 4-140_object_inheritance.html
    ├── 4-154_class_extends.html
    ├── 4-153_object_create_with_new.html
    ├── 4-114_new_with_java.java
    ├── 4-150_object_create_configure.html
    ├── 4-139_early_inheritance.html
    ├── 4-118_this.html
    ├── 4-133_printing_all_properties.html
    ├── 4-132_prototype_chain.html
    ├── 4-148_object_create_object.html
    ├── 4-130_circular_reference.html
    ├── 4-151_accessor.html
    └── 4-124_prototype.html
├── chapter-2
    ├── 2-26_testing_function_scope.html
    ├── 2-39_obscure_with.html
    ├── 2-27_testing_with_scope.html
    ├── 2-26_testing_catch_scope.html
    ├── 2-40_alternative_style_settings.html
    ├── 2-41_closer_example.html
    ├── 2-25_testing_block_scope.html
    ├── 2-45_closer_easy_example.html
    ├── 2-22_scope_issue.html
    ├── 2-35_understanding_with.html
    ├── 2-28_resolve_with_with.html
    ├── 2-32_resolve_with_IIFE.html
    ├── 2-42_closer_example.html
    ├── 2-31_resolve_with_function.html
    ├── 2-37_using_with.html
    ├── 2-44_static_with_closer.html
    ├── 2-49_setInterval_closer.html
    └── 2-51_closer_practical_example.html
├── chapter-3
    ├── 3-84_how_to_use_global.html
    ├── 3-80_access_global_through_window.html
    ├── 3-76_global_variables.html
    ├── 3-69_add_function_prototype.html
    ├── 3-83_access_global_function.html
    ├── 3-96_checking_uninitialized.html
    ├── 3-83_set_global_function.html
    ├── 3-69_global_variable.html
    ├── 3-72_xhr2.js
    ├── 3-81_accessing_global.html
    ├── 3-66_how_to_generate_a_string.html
    ├── 3-77_issue_from_global.html
    ├── 3-61_branch_variable_type.html
    ├── 3-63_create_object_with_new.html
    ├── 3-68_additional_property_on_strings.html
    ├── 3-91_var_inside_if.html
    ├── 3-93_collecting_var_definitions.html
    ├── 3-86_var_vs_no_var.html
    ├── 3-72_xhr1.js
    ├── 3-70_global_event_handler.html
    ├── 3-97_no_var_mistake.html
    ├── 3-78_variable_without_var.html
    ├── 3-84_redefining_window.html
    ├── 3-67_difference_between_strings.html
    ├── 3-99_collecting_var_minification.html
    ├── 3-98_multiple_var_minification.html
    ├── 3-100_avoiding_global.js
    ├── 3-70_global_xmlhttprequest.html
    ├── 3-74_async_request_issue.html
    ├── 3-64_instanceof_primitive_type.html
    ├── 3-102_javascript_inside_html.html
    ├── 3-103_split_javascript_and_html.html
    ├── 3-94_multiple_vars.html
    ├── 3-94_collecting_vars.html
    ├── 3-105_scope_chain.html
    ├── 3-82_how_to_loop_global.html
    ├── 3-110_set_style_variable.html
    ├── 3-108_shifting_scope_chain_to_local.html
    └── 3-73_local_with_closer.html
├── chapter-9
    ├── 9-416_app.js
    ├── 9-400_destructuring_default_value.html
    ├── 9-384_let_const.js
    ├── 9-387_arrow_expression_context.js
    ├── 9-423_exponential.html
    ├── 9-420_promise.html
    ├── 9-413_binary_octal.html
    ├── 9-404_function_parameter_default.html
    ├── module.js
    ├── 9-408_yield_examples.html
    ├── 9-386_arrow_expression.js
    ├── 9-395_template_string_expression.html
    ├── 9-397_template_string_expression_analyze.html
    ├── 9-411_map_set.html
    ├── 9-412_weakmap_weakset.html
    ├── 9-385_let_and_var.js
    ├── 9-403_function_parameter.html
    ├── 9-406_yield.html
    ├── 9-417_proxy.html
    ├── 9-422_array_includes.html
    ├── 9-388_class.js
    ├── 9-405_fibonacci_for_of.html
    ├── 9-407_iterator.html
    ├── 9-418_symbol.html
    ├── 9-396_template_string_expression_multiline.html
    ├── 9-420_promise_flow_control.html
    ├── 9-409_iterator_flow_control.html
    ├── 9-415_typed_array.js
    ├── 9-401_destructuring_example.html
    ├── 9-399_destructuring.html
    └── 9-390_object_expression.html
├── README.md
├── chapter-5
    ├── 5-240_adder_with_currying.html
    ├── 5-164_generating_module.js
    ├── 5-236_self_invoking_constructor.html
    ├── 5-221_compatibility_for_xmlhttprequest.html
    ├── 5-162_simple_module.html
    ├── 5-215_check_ie_version.html
    ├── 5-179_setting_listener_separately.js
    ├── 5-222_compatibility_with_init_time_branching.html
    ├── 5-241_adding_currying_function_prototype.html
    ├── 5-237_callback_pattern.html
    ├── 5-224_xmlhttprequest_with_self_defining_function.html
    ├── 5-180_setting_listener_delegate.js
    ├── 5-200_backup_wrapped_function_with_proxy.html
    ├── 5-220_compatibility_for_standard.html
    ├── 5-230_cache_with_memoization.html
    ├── 5-197_wrapper_with_proxy.html
    ├── 5-227_prevent_duplicate_request.html
    ├── 5-219_compatibility_with_function.html
    ├── 5-242_unit_translate_with_currying.html
    ├── 5-243_xmlhttprequest_currying.html
    ├── 5-202_log_with_proxy.html
    ├── 5-232_fibbonacci_wth_memoization.html
    ├── 5-229_adding_cache.html
    ├── 5-199_same_name_wrapper_with_proxy.html
    ├── 5-217_compatibility_with_browser.html
    ├── 5-233_memoization_with_function_prototype.html
    ├── 5-181_event_delegate_with_id.html
    ├── 5-187_proxy_with_event_delegation.html
    ├── 5-184_event_delegate_test_bubbling.html
    ├── 5-194_aggregating_requests_with_proxy.html
    ├── 5-225_initialization_with_self_defining_function.html
    ├── 5-212_decorator_with_proxy_for_monitoring.html
    ├── 5-208_decorator_for_object.html
    ├── 5-188_data_collection_with_proxy.html
    ├── 5-191_cache_with_proxy.html
    ├── 5-204_form_validate_decorator.html
    ├── 5-168_event_bubbling_capturing.html
    └── 5-174_modify_dom_propagation_path.html
└── chapter-8
    ├── 8-365_open_bracket_newline.html
    └── 8-379_makefile


/chapter-7/Korean.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/Korean.png


--------------------------------------------------------------------------------
/chapter-7/flags.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/flags.png


--------------------------------------------------------------------------------
/chapter-7/Chinese.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/Chinese.png


--------------------------------------------------------------------------------
/chapter-7/English.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/English.png


--------------------------------------------------------------------------------
/chapter-7/Japanese.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/Japanese.png


--------------------------------------------------------------------------------
/chapter-7/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/loading.gif


--------------------------------------------------------------------------------
/chapter-7/large_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/large_image.jpg


--------------------------------------------------------------------------------
/chapter-7/my_important_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/my_important_image.jpg


--------------------------------------------------------------------------------
/chapter-7/not_important_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikys/javascript_in_depth/HEAD/chapter-7/not_important_image.jpg


--------------------------------------------------------------------------------
/chapter-6/notice_list.json:
--------------------------------------------------------------------------------
1 | ["Link to the first article", "Link to the second article", "Link to the third article", "Link to the last article"]
2 | 


--------------------------------------------------------------------------------
/chapter-4/4-146_original_object_create.js:
--------------------------------------------------------------------------------
1 | 
2 | Object.create = function (o) {
3 |     function F() {}
4 |     F.prototype = o;
5 |     return new F();
6 | }
7 | 
8 | 


--------------------------------------------------------------------------------
/chapter-2/2-26_testing_function_scope.html:
--------------------------------------------------------------------------------
1 | <script>
2 | function foo() {
3 |     var b = "Can you access me?";
4 | }
5 | console.log(typeof b === "undefined");
6 | </script>
7 | 


--------------------------------------------------------------------------------
/chapter-3/3-84_how_to_use_global.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var myGlobal = "global";
 4 | 
 5 | (function () {
 6 |     myGlobal = "global";
 7 | }());
 8 | 
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/chapter-3/3-80_access_global_through_window.html:
--------------------------------------------------------------------------------
1 | <script>
2 | 
3 | var myGlobal = "am i in window?";
4 | 
5 | console.log(myGlobal);
6 | console.log(window.myGlobal);
7 | 
8 | </script>
9 | 


--------------------------------------------------------------------------------
/chapter-3/3-76_global_variables.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var myGlobal = "This is a global variable";
 4 | 
 5 | for (var i = 0 ; i < 10 ; i++) {
 6 |     var isGlobal = true;
 7 | }
 8 | 
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/chapter-9/9-416_app.js:
--------------------------------------------------------------------------------
1 | import getURL, * from "module.js"
2 | getJSON("/getJSON", function (json) {
3 |     console.log(json);
4 | });
5 | getURL("/getURL", function (data) {
6 |     console.log(data);
7 | });
8 | 
9 | 


--------------------------------------------------------------------------------
/chapter-3/3-69_add_function_prototype.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | String.prototype.trim = function () {
 4 |     return this.replace(/^\s+|\s+$/g, "");
 5 | };
 6 | 
 7 | console.log(" unikys ".trim() === "unikys"); // === true
 8 | 
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/chapter-3/3-83_access_global_function.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function myGlobalFunction() {
 4 |     alert("Global function invoked");
 5 | }
 6 | 
 7 | window["myGlobalFunction"]();
 8 | window["myGlobalFunction"].call();
 9 | 
10 | </script>
11 | 


--------------------------------------------------------------------------------
/chapter-3/3-96_checking_uninitialized.html:
--------------------------------------------------------------------------------
1 | <script>
2 | 
3 | console.log("선언을 안한 경우 검사: " + (typeof notExists === "undefined"));
4 | var notInitialized;
5 | console.log("초기화를 안한 경우 검사: " + (typeof notInitialized === "undefined"));
6 | 
7 | </script>
8 | 


--------------------------------------------------------------------------------
/chapter-9/9-400_destructuring_default_value.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (() => {
 4 |     var myArray = [1 , 2];
 5 |     var [a = 10, b = 9, c = 8, d = 7] = myArray;
 6 |     console.log(a + " , " + b + " , " + c + " , " + d);
 7 | })();
 8 | </script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/chapter-6/6-297_dom_reflow_inside_loop.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | var i,
 4 |     tags = document.getElementByTagName("div"),
 5 |     length = tags.length;
 6 | 
 7 | for (i = 0 ; i < length ; i++) {
 8 |     console.log(tags[i].offsetWidth + " , " tags[i].clientHeight);
 9 | }
10 | 


--------------------------------------------------------------------------------
/chapter-7/sleep.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     sleep(5000);
 3 | 
 4 |     function sleep(waitMilliseconds) {
 5 |         var waitUntil = Date.now() + waitMilliseconds;
 6 |         while(Date.now() < waitUntil) {
 7 |             ;
 8 |         }
 9 |     }
10 | }());
11 | 


--------------------------------------------------------------------------------
/chapter-3/3-83_set_global_function.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | 
 4 | (function () {
 5 |     window.myGlobalFunction = function () {
 6 |         alert("Global function");
 7 |     };
 8 | }());
 9 | 
10 | myGlobalFunction();
11 | myGlobalFunction.call();
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/chapter-4/4-114_new_with_function.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name, blog) {
 4 |     this.name = name;
 5 |     this.blog = blog;
 6 | }
 7 | var unikys = new Person("unikys", "unikys.tistory.com");
 8 | alert(unikys.name); // === "unikys"
 9 | 
10 | </script>
11 | 


--------------------------------------------------------------------------------
/chapter-9/9-384_let_const.js:
--------------------------------------------------------------------------------
 1 | let myObject = {
 2 |     name: "unikys",
 3 |     say() {
 4 |         alert("My name is " + this.name);
 5 |     }
 6 | };
 7 | 
 8 | myObject.say();
 9 | const constString = "This is a constant";
10 | constString = "This will raise an error"; // Error!
11 | 
12 | 


--------------------------------------------------------------------------------
/chapter-2/2-39_obscure_with.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function doSomething(value, obj) {
 3 |     with (obj) {
 4 |         console.log(value);
 5 |         value = "which scope is this?";
 6 |     }
 7 | }
 8 | 
 9 | doSomething("value", {"value": "objValue"});
10 | doSomething("value", {});
11 | </script>
12 | 


--------------------------------------------------------------------------------
/chapter-4/4-115_new_with_class.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | class Person {
 4 |     constructor(name, blog) {
 5 |         this.name = name;
 6 |         this.blog = blog;
 7 |     }
 8 | }
 9 | 
10 | var unikys = new Person("unikys", "unikys.tistory.com");
11 | alert(unikys.name);
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/chapter-3/3-69_global_variable.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="div"></div>
 4 |     <script>
 5 | 
 6 |     var element = document.getElementById("div"),
 7 |         insertHTML = "<b>Hello world</b>";
 8 |     element.innerHTML = insertHTML;
 9 | 
10 |     </script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/chapter-2/2-27_testing_with_scope.html:
--------------------------------------------------------------------------------
1 | <script>
2 | with ({inScope: "You can't see me"}) {
3 |     var notInScope = "but you can see me";
4 |     console.log(inScope === "You can't see me");
5 | }
6 | console.log(typeof inScope === "undefined");
7 | console.log(notInScope === "but you can see me");
8 | </script>
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # javascript_in_depth
 2 | 속깊은 자바스크립트 예제 소스
 3 | <br/>
 4 | <br/>
 5 | * 1장 웹과 자바스크립트
 6 | * 2장 자바스크립트의 스코프와 클로저
 7 | * 3장 자바스크립트의 변수
 8 | * 4장 프로토타입과 객체지향, 그리고 상속
 9 | * 5장 디자인 패턴 실용
10 | * 6장 브라우저 환경에서의 자바스크립트
11 | * 7장 자바스크립트 성능과 사용자 경험 개선
12 | * 8장 자바스크립트 코딩과 개발 환경
13 | * 9장 자바스크립트 표준
14 | * 10장 자바스크립트 프레임워크
15 | 


--------------------------------------------------------------------------------
/chapter-7/7-316_script_at_bottom.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <img src="./my_important_image.jpg" width="300" height="200"></img>
 5 |     <div>I need to show this important information as fast as possible</div> 
 6 | 
 7 |     <script src="./sleep.js" type="text/javascript"></script>
 8 | </body>
 9 | </html>
10 | 
11 | 


--------------------------------------------------------------------------------
/chapter-3/3-72_xhr2.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     xhr = new XMLHttpRequest();
 3 |     xhr.open("GET", "http://unikys.tistory.com/api");
 4 |     xhr.onreadystatechange = function () {
 5 |         if (xhr.readyState === 4 && xhr.status === 200) {
 6 |             console.log(xhr.responseText);
 7 |         }
 8 |     };
 9 | }());
10 | 


--------------------------------------------------------------------------------
/chapter-9/9-387_arrow_expression_context.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var name = "Global"; function Person() {
 3 |     this.name = "Unikys"
 4 |     setTimeout(() => alert("My name is " + this.name), 100);
 5 |     setTimeout(function () {
 6 |         alert("Global name is " + this.name);
 7 |     }, 100);
 8 | }
 9 | var person = new Person();
10 | 


--------------------------------------------------------------------------------
/chapter-3/3-81_accessing_global.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var myGlobal = "am i in window?";
 4 | var myVariableName = "myGlobal";
 5 | 
 6 | console.log("1. " + myGlobal);
 7 | console.log("2. " + window.myGlobal);
 8 | console.log("3. " + window["myGlobal"]);
 9 | console.log("4. " + window[myVariableName]);
10 | 
11 | </script>
12 | 
13 | 


--------------------------------------------------------------------------------
/chapter-4/4-155_object_create_shim.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     if (!Object.create) {
 3 |         Object.create = (function () {
 4 |             function F() {}
 5 |             return function (o) {
 6 |                 F.prototype = o;
 7 |                 return new F();
 8 |             }
 9 |         }());
10 |     }
11 | }());
12 | 


--------------------------------------------------------------------------------
/chapter-2/2-26_testing_catch_scope.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | try {
 3 |     throw new exception("fake exception");
 4 | } catch (err) {
 5 |     var test = "can you see me";
 6 |     console.log(err instanceof ReferenceError === true);
 7 | }
 8 | console.log(test === "can you see me");
 9 | console.log(typeof err === "undefined");
10 | </script>
11 | 


--------------------------------------------------------------------------------
/chapter-2/2-40_alternative_style_settings.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="myDiv">Alternative style settings</div>
 4 |     <script>
 5 |     var s = document.getElementById("myDiv").style;
 6 |     s.background = "yellow";
 7 |     s.color = "red";
 8 |     s.border = "1px solid black";
 9 |     </script>
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/chapter-3/3-66_how_to_generate_a_string.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var color1 = new String("red");
 4 | var color2 = "red";
 5 | var color3 = String("red");
 6 | 
 7 | console.log(color1.toUpperCase()); // === "RED"
 8 | console.log(color2.toUpperCase()); // === "RED"
 9 | console.log(color3.toUpperCase()); // === "RED"
10 | 
11 | </script>
12 | 


--------------------------------------------------------------------------------
/chapter-3/3-77_issue_from_global.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function addOneToTen() {
 3 |     sum = 0;
 4 |     for (i = 1 ; i < 11 ; i++) {
 5 |         sum = sum + i;
 6 |     }
 7 |     return sum;
 8 | }
 9 | 
10 | sum = 0;
11 | for (i = 0 ; i < 10 ; i++) {
12 |     sum = sum + addOneToTen();
13 | }
14 | console.log(sum);
15 | 
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-2/2-41_closer_example.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function outer () {
 4 |     var count = 0;
 5 |     var inner = function () {
 6 |         return ++count;
 7 |     };
 8 |     return inner; 
 9 | }
10 | 
11 | var increase = outer();
12 | console.log(increase());    // === 1
13 | console.log(increase());    // === 2
14 | 
15 | </script>
16 | 


--------------------------------------------------------------------------------
/chapter-3/3-61_branch_variable_type.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | var myVariable = "This is a string variable";
 3 | 
 4 | if (typeof myVariable === "function") {
 5 |     alert("Variable is function");
 6 |     myVariable.call(this);
 7 | } else if (typeof myVariable === "string") {
 8 |     alert("Variable is string: " + myVariable);
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/chapter-9/9-423_exponential.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | 
 4 | // >= ECMAScript 2016
 5 | var squareRootOfTwo = 2 ** 0.5; // === 1.4142135623730951
 6 | var cubeTwo = 2 ** 3; // === 8
 7 | 
 8 | 
 9 | // <= ES6
10 | var squareRootOfTwoES6 = Math.pow(2, 0.5); // === 1.4142135623730951
11 | var cubeTwoES6 = Math.pow(2, 3); // === 8
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/chapter-6/6-297_inefficient_dom_reflow.js:
--------------------------------------------------------------------------------
 1 | <div id="spanningDiv" style="background-color:#EEEEEE; width: 100px"> This div will be increased
 2 | </div>
 3 | <script>
 4 | (function () {
 5 | var i,
 6 | element = document.getElementById("spanningDiv");
 7 | while (element.offsetWidth < 200) {
 8 |     element.style.width = (element.offsetWidth + 2) + "px";
 9 | }
10 | }());
11 | </script>
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/chapter-3/3-63_create_object_with_new.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function Person(name, blog) {
 3 |     this.name = name;
 4 |     this.blog = blog;
 5 | }
 6 | 
 7 | var unikys = new Person("unikys", "http://unikys.tistory.com");
 8 | 
 9 | console.log(unikys instanceof Person); // === true
10 | console.log(unikys instanceof Object); // === true
11 | console.log(typeof unikys); // === "object"
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/chapter-7/7-312_script_in_head.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <script src="./sleep.js" type="text/javascript"></script>
 5 |     <title>This title will not show during the sleep</title>
 6 | </head>
 7 | <body>
 8 |     <img src="./my_important_image.jpg" width="300" height="200"></img>
 9 |     <div>I need to show this important information as fast as possible</div>
10 | </body>
11 | </html>
12 | 
13 | 


--------------------------------------------------------------------------------
/chapter-9/9-420_promise.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function sendMsg(msg, timeout) {
 4 |     return new Promise((resolve, reject) => {
 5 |         setTimeout((() => {
 6 |             resolve(msg);
 7 |         }), timeout);
 8 |     });
 9 | }
10 | 
11 | sendMsg("Hello, ", 1000).then((msg) => sendMsg(`${msg} World`, 1000)).then((msg) => {
12 |     console.log(`${msg}! All done`);
13 | });
14 | </script>
15 | 
16 | 


--------------------------------------------------------------------------------
/chapter-9/9-413_binary_octal.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | // >= ES6
 4 | console.log(0b1001101010 === 618); // binary
 5 | console.log(0o1152 === 618); // octal
 6 | console.log(0x26A === 618); // hex
 7 | 
 8 | // < ES6
 9 | console.log(parseInt("1001101010", 2) === 618); // binary
10 | console.log(parseInt("1152", 8) === 618); // octal
11 | console.log(parseInt("26A", 16) === 618); // hex
12 | 
13 | </script>
14 | 
15 | 


--------------------------------------------------------------------------------
/chapter-3/3-68_additional_property_on_strings.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var constructString = new String("unikys");
 4 | constructString.blog = "http://unikys.tistory.com";
 5 | console.log(constructString.blog === "http://unikys.tistory.com");
 6 | 
 7 | var primitiveString = "unikys";
 8 | primitiveString.blog = "http://unikys.tistory.com";
 9 | console.log(primitiveString.blog === undefined);
10 | 
11 | </script>
12 | 


--------------------------------------------------------------------------------
/chapter-3/3-91_var_inside_if.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function optimizedFunc(flag) {
 4 |     if (flag) {
 5 |         var lotsOfVariables1, lotsOfVariables2, lotsOfVariables3;
 6 |         console.log("1: " + lessVariables);
 7 |     } else {
 8 |         var lessVariables;
 9 |         console.log("2: " + lotsOfVariables1);
10 |     }
11 | }
12 | 
13 | optimizedFunc(true);
14 | optimizedFunc(false);
15 | 
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-3/3-93_collecting_var_definitions.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function optimizedFunc(flag) {
 4 |     var lotsOfVariables1, lotsOfVariables2, lotsOfVariables3, lessVariables;
 5 | 
 6 |     if (flag) {
 7 |         console.log("1: " + lessVariables);
 8 |     } else {
 9 |         console.log("2: " + lotsOfVariables1);
10 |     }
11 | }
12 | 
13 | optimizedFunc(true);
14 | optimizedFunc(false);
15 | 
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-2/2-25_testing_block_scope.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | for(var i = 0; i < 10; i++) {
 3 |     var total = (total || 0) + i;
 4 |     var last = i;
 5 |     if (total > 16) {
 6 |         break;
 7 |     }
 8 | }
 9 | console.log(typeof total !== "undefined");
10 | console.log(typeof last !== "undefined");
11 | console.log(typeof i !== "undefined");
12 | console.log("total === " + total + " , last === " + last);
13 | </script>
14 | 


--------------------------------------------------------------------------------
/chapter-2/2-45_closer_easy_example.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function sum(base) {
 4 |     var inClosure = base;
 5 |     return function (adder) {
 6 |     return inClosure + adder; };
 7 | };
 8 | var fiveAdder = sum(5);     // inClosure = 5 and return function
 9 | console.log(fiveAdder(3));  // === inClosure(5) + adder(3) === 8
10 | var threeAdder = sum(3);    // inClosure = 3 and return a new function
11 | 
12 | </script>
13 | 


--------------------------------------------------------------------------------
/chapter-5/5-240_adder_with_currying.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function sum(x, y) {
 5 |         return x + y;
 6 |     }
 7 |     var makeAdder = function (x) {
 8 |         return function (y) {
 9 |             return sum(x, y);
10 |         };
11 |     };
12 |     var adderFour = makeAdder(4);
13 |     console.log(adderFour(1)); // === 5
14 |     console.log(adderFour(5)); // === 9
15 | }());
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-3/3-86_var_vs_no_var.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | console.log("1: " + varExists + " , " + window.hasOwnProperty("varExists"));
 4 | var varExists = "Define a global variable with var keyword";
 5 | console.log("2: " + varExists);
 6 | 
 7 | console.log("Exists?: " + window.hasOwnProperty("noVar"));
 8 | console.log("1: " + noVar);
 9 | noVar = "Define a global variable without var keyword";
10 | console.log("2: " + noVar);
11 | 
12 | </script>
13 | 


--------------------------------------------------------------------------------
/chapter-3/3-72_xhr1.js:
--------------------------------------------------------------------------------
 1 | var element = document.getElementById("div"),
 2 |     button = document.getElementById("button"),
 3 | 
 4 | xhr = new XMLHttpRequest();
 5 | button.onclick = function () {
 6 |     xhr.open("GET", "http://unikys.tistory.com/");
 7 |     xhr.onreadystatechange = function () {
 8 |         if (xhr.readyState === 4 && xhr.status === 200) {
 9 |             element.innerHTML = xhr.responseText;
10 |         }
11 |     };
12 |     xhr.send();
13 | };
14 | 


--------------------------------------------------------------------------------
/chapter-5/5-164_generating_module.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (function (windows, undefined) {
 3 | 
 4 |     var _myLibrary = window.myLibrary;
 5 | 
 6 |     if (!_myLibrary) {
 7 |         _myLibrary = {};
 8 |     }
 9 |     if (!_myLibrary.unikys) {
10 |         _myLibrary.unikys = {};
11 |     }
12 | 
13 |     _myLibrary.unikys.sayHello = function () {
14 |         alert("Hello, my name is Unikys"); 
15 |     };
16 | 
17 |     window.myLibrary = _myLibrary;
18 | 
19 | }(window));
20 | 
21 | 


--------------------------------------------------------------------------------
/chapter-4/4-147_object_create_inheritance.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name) {
 4 |     this.name = name;
 5 | }
 6 | Person.prototype = {
 7 |     yell: function () {
 8 |         alert("My name is " + this.name);
 9 |     }
10 | };
11 | var unikys = Object.create(Person.prototype);
12 | unikys.name = "Unikys";
13 | unikys.yell(); // === "My name is Unikys"
14 | 
15 | // Check inheritance
16 | console.log(unikys instanceof Person); // === true
17 | 
18 | </script>
19 | 


--------------------------------------------------------------------------------
/chapter-3/3-70_global_event_handler.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="div">Global event handler example</div>
 4 |     <button id="button">Click</button>
 5 |     <script>
 6 |     var element = document.getElementById("div"),
 7 |         button = document.getElementById("button"),
 8 | 
 9 |     insertHTML = "<b>Hello world</b>";
10 |     button.onclick = function () {
11 |         element.innerHTML = insertHTML;
12 |     };
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/chapter-4/4-149_object_create_initialize.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name) {
 4 |     this.name = name;
 5 | }
 6 | Person.prototype = {
 7 |     yell: function () {
 8 |         alert("My name is " + this.name);
 9 |     }
10 | };
11 | 
12 | var unikys = Object.create(Person.prototype, {
13 |     name: {
14 |         value: "Unikys"
15 |     }
16 | });
17 | unikys.yell(); // === "My name is Unikys"
18 | unikys.name = "Suniky"; unikys.yell(); // === ?
19 | 
20 | </script>
21 | 


--------------------------------------------------------------------------------
/chapter-7/7-352_separated_flags.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     .flag {
 6 |         width: 20px;
 7 |         height: 13px;
 8 |     }
 9 |     </style>
10 | </head>
11 | <body>
12 |     <a><img class="flag" src="Korean.png"></img>Korean</a>
13 |     <a><img class="flag" src="English.png"></img>English</a>
14 |     <a><img class="flag" src="Chinese.png"></img>Chinese</a>
15 |     <a><img class="flag" src="Japanese.png"></img>Japanese</a>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/chapter-3/3-97_no_var_mistake.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (function () {
 4 |     var xhr, i;
 5 |     for (i = 0 ; i < 10 ; i++) {
 6 |         xhr = new XMLHttpRequest();
 7 |         xhr.open("GET", "http://unikys.tistory.com/" + i);
 8 |         xhr.onload = function () {
 9 |             var json = JSON.parse(xhr.responseText);
10 |             for (i = 0 ; i < 5 ; i++) {
11 |                 alert(i + " = " + json[i]);
12 |             }
13 |         };
14 |     }
15 | }());
16 | 
17 | </script>
18 | 


--------------------------------------------------------------------------------
/chapter-5/5-236_self_invoking_constructor.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function Employee(name, manMonth) {
 5 |         if (!(this instanceof Employee)) {
 6 |             return new Employee(name, manMonth);
 7 |         }
 8 |         this.name = name;
 9 |         this.manMonth = manMonth;
10 |     }
11 | 
12 |     var unikys = Employee("Unikys", 1),
13 |         world = new Employee("World", 2);
14 |     console.log(unikys);
15 |     console.log(world);
16 | }());
17 | </script>
18 | 


--------------------------------------------------------------------------------
/chapter-2/2-22_scope_issue.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="div0">Click me! DIV 0</div>
 4 |     <div id="div1">Click me! DIV 1</div>
 5 |     <div id="div2">Click me! DIV 2</div>
 6 |     <script>
 7 |         var i, len = 3;
 8 |         for (i = 0; i < len; i++) {
 9 |             document.getElementById("div" + i).addEventListener("click", function (){ 
10 |                 alert("You clicked div #" + i);
11 |             }, false); 
12 |         }
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/chapter-3/3-78_variable_without_var.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var getVariable = "global";
 4 | 
 5 | (function () {
 6 |     var getVariable = "immediate function";
 7 |     insideFunction();
 8 | 
 9 |     console.log("2. Immediate function: " + getVariable);
10 | 
11 |     function insideFunction() {
12 |         console.log("1. Inside function: " + getVariable);
13 |         getVariable = "will I be global?";
14 |     }
15 | }());
16 | 
17 | console.log("3. Global: " + getVariable);
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/chapter-9/9-404_function_parameter_default.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | 
 4 | function defaultValue(color="black", isNull="Nullable") {
 5 |     console.log("color=" + color + " , isNull=" + isNull );
 6 | }
 7 | defaultValue(undefined, null);
 8 | 
 9 | function previousDefaultValue(color, isNull) {
10 |     color = color || "black";
11 |     isNull = isNull || "Nullable";
12 |     console.log("color=" + color + " , isNull=" + isNull );
13 | }
14 | previousDefaultValue(undefined, null);
15 | 
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-3/3-84_redefining_window.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (function () {
 4 |     var window = {
 5 |         popup: function () {
 6 |             window.open("http://unikys.tistory.com");
 7 |         },
 8 |         alert: function () {
 9 |             alert("I'm not the true alert!");
10 |         },
11 |         open: function (url) {
12 |             alert("I know where you are going... " + url);
13 |         }
14 |     };
15 |     window.alert();
16 |     window.popup();
17 | }());
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/chapter-9/module.js:
--------------------------------------------------------------------------------
 1 | export function getJSON(url, callback) {
 2 |     var xhr = new XMLHttpRequest();
 3 |     xhr.open("GET", url, true);
 4 |     xhr.onload = function () {
 5 |         callback(JSON.parse(this.responseText));
 6 |     };
 7 |     xhr.send();
 8 | }
 9 | 
10 | export default function (url, callback) {
11 |     var xhr = new XMLHttpRequest();
12 |     xhr.open("GET", url, true);
13 |     xhr.onload = function () {
14 |         callback(this.responseText);
15 |     };
16 |     xhr.send();
17 | }
18 | 


--------------------------------------------------------------------------------
/chapter-2/2-35_understanding_with.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | var user = {
 3 |     name: "Sung-ihk",
 4 |     homepage: "unikys.tistory.com",
 5 |     language: "Korean"
 6 | }
 7 | with (user) {
 8 |     console.log(name === "Sung-ihk");
 9 |     console.log(homepage === "unikys.tistory.com");
10 |     console.log(language === "Korean");
11 |     language = "javascript";
12 |     nickname = "unikys";
13 | }
14 | console.log(user.language === "javascript");
15 | console.log(user.nickname === "unikys"); //??
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-4/4-135_avoiding_prototype.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name, blog) {
 4 |     this.name = name;
 5 |     this.blog = blog;
 6 |     this.getName = function () {
 7 |         return this.name;
 8 |     };
 9 |     this.getBlog = function () {
10 |         return this.blog;
11 |     };
12 | }
13 | 
14 | var unikys = new Person("unikys", "unikys.tistory.com");
15 | console.log(unikys.getName()); // === "unikys"
16 | console.log(unikys.getBlog()); // === "unikys.tistory.com"
17 | 
18 | </script>
19 | 
20 | 


--------------------------------------------------------------------------------
/chapter-4/4-116_calling_function.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | // General way to call a function
 4 | function say(something) {
 5 |     alert(something);
 6 | }
 7 | say("Hello world!");
 8 | 
 9 | // Calling a member function
10 | var unikys = {
11 |     say: function (something) {
12 |         alert(something);
13 |     }
14 | };
15 | unikys.say("Hello world!");
16 | 
17 | 
18 | // Calling with call() and apply() function
19 | say.call(undefined, "Hello world!");
20 | say.apply(undefined, ["Hello world!"]);
21 | 
22 | </script>
23 | 


--------------------------------------------------------------------------------
/chapter-4/4-140_prototype_inheritance.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function Person() {
 3 |     this.name = "anonymous";
 4 |     this.sayHello = function () {
 5 |         alert("Hello, my name is " + this.name);
 6 |     };
 7 | }
 8 | 
 9 | function Unikys() {
10 |     this.name = "Unikys";
11 | }
12 | Unikys.prototype = new Person();
13 | 
14 | var unikys = new Unikys();
15 | 
16 | unikys.sayHello();
17 | console.log(unikys instanceof Unikys); // === true
18 | console.log(unikys instanceof Person); // === true
19 | 
20 | </script>
21 | 


--------------------------------------------------------------------------------
/chapter-5/5-221_compatibility_for_xmlhttprequest.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | function getXHR() {
 4 |     if (window.XMLHttpRequest) {
 5 |         return new XMLHttpRequest();
 6 |     }
 7 |     try {
 8 |         return new ActiveXObject("MSXML2.XMLHTTP.6.0");
 9 |     } catch (e) {
10 |         try {
11 |             return new ActiveXObject("MSXML2.XMLHTTP.3.0");
12 |         } catch (e) {
13 |             alert("This browser does not support XMLHttpRequest."); return null;
14 |         }
15 |     }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/chapter-9/9-408_yield_examples.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (() => {
 3 |     var myObject = {};
 4 |     myObject[Symbol.iterator] = function* () {
 5 |         yield "1";
 6 |         yield* [2, 3];
 7 |         yield* "45";
 8 |         yield* innerGenerator();
 9 |         yield "9";
10 |     };
11 | 
12 |     function* innerGenerator() {
13 |         yield 6;
14 |         yield* new Set(["7", "8"]);
15 |     }
16 | 
17 |     console.log([...myObject]); // === ["1", 2, 3, "4", "5", 6, "7", "8", 9]
18 | })();
19 | </script>
20 | 
21 | 


--------------------------------------------------------------------------------
/chapter-4/4-140_object_inheritance.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var person = {
 4 |     name: "anonymous",
 5 |     sayHello: function () {
 6 |         alert("Hello, my name is " + this.name);
 7 |     }
 8 | };
 9 | function Unikys() {
10 |     this.name = "Unikys";
11 | }
12 | Unikys.prototype = person;
13 | 
14 | var unikys = new Unikys();
15 | unikys.sayHello(); // === "Hello, my name is Unikys"
16 | person.sayHello(); // === "Hello, my name is anonymous"
17 | console.log(unikys instanceof Unikys); // === true
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/chapter-4/4-154_class_extends.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | class Person {
 4 |     constructor() {
 5 |         this.name = "anonymous";
 6 |     }
 7 | }
 8 | 
 9 | class Unikys extends Person {
10 |     constructor() {
11 |         super();
12 |         this.name = "Unikys";
13 |     }
14 | }
15 | 
16 | var unikys = new Unikys();
17 | console.log(unikys instanceof Unikys); // === true
18 | console.log(unikys instanceof Person); // === true
19 | console.log(unikys.constructor); // === class Unikys extends Person
20 | 
21 | </script>
22 | 


--------------------------------------------------------------------------------
/chapter-5/5-162_simple_module.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (function (window) {
 4 |     var myLibrary = {
 5 |         helloWorld: function () {
 6 |             alert("Hello World!");
 7 |         },
 8 |         hello: {
 9 |             world: function () {
10 |                 alert("Hello Module!!");
11 |             }
12 |         }
13 |     };
14 |     window.myLibrary = myLibrary;
15 | }(window));
16 | 
17 | myLibrary.helloWorld(); // === Hello World!
18 | myLibrary.hello.world(); // === Hello Module!!
19 | 
20 | </script>
21 | 


--------------------------------------------------------------------------------
/chapter-2/2-28_resolve_with_with.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="divWith0">Click me! DIV 0</div>
 4 |     <div id="divWith1">Click me! DIV 1</div>
 5 |     <div id="divWith2">Click me! DIV 2</div>
 6 |     <script>
 7 |     var i, len = 3;
 8 |     for (i = 0; i < len; i++) {
 9 |     with ({num: i}) {
10 |         document.getElementById("divWith" + num).addEventListener(
11 |             "click", function () { alert("You clicked div #" + num);
12 |         }, false); }
13 |     }
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/chapter-9/9-386_arrow_expression.js:
--------------------------------------------------------------------------------
 1 | let myFunc = () => alert("This is a new function literal");
 2 | myFunc();
 3 | 
 4 | var myFuncES5 = function () {
 5 |     alert("This is a new function literal");
 6 | };
 7 | myFuncES5();
 8 | 
 9 | 
10 | 
11 | let paramFunc = (greetings, name) => {
12 |     alert(greetings + " , " + name);
13 | }
14 | paramFunc("Hello", "World");
15 | 
16 | 
17 | var paramFuncES5 = function (greetings, name) {
18 |     alert(greetings + " , " + name);
19 | }
20 | paramFuncES5("Hello", "World");
21 | 
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/chapter-9/9-395_template_string_expression.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <lable>Name: <input id="name"></label>
 5 |     <div id="greetings"></div>
 6 |     <script>
 7 |     (() => {
 8 |         let inputName = document.getElementById("name"),
 9 |             divGreetings = document.getElementById("greetings");
10 | 
11 |         inputName.addEventListener("change", () => {
12 |             divGreetings.innerHTML = `Hello, ${inputName.value.toUpperCase()}`;
13 |         });
14 |     })();
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/chapter-2/2-32_resolve_with_IIFE.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 | <div id="divScope0">Click me! DIV 0</div>
 4 | <div id="divScope1">Click me! DIV 1</div>
 5 | <div id="divScope2">Click me! DIV 2</div>
 6 | <script>
 7 | var i, len = 3;
 8 | for (i = 0; i < len; i++) {
 9 |     document.getElementById("divScope" + i).addEventListener(
10 |         "click",
11 |         (function (index) { return function () {
12 |             alert("You clicked div #" + index); };
13 |         }(i)),
14 |         false);
15 | }
16 | </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/chapter-4/4-153_object_create_with_new.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person() {
 4 |     this.name = "anonymous";
 5 | }
 6 | function Unikys() {
 7 |     this.name = "Unikys";
 8 | }
 9 | Unikys.prototype = Object.create(Person.prototype, {
10 |     constructor: {
11 |         value: Unikys
12 |     }
13 | });
14 | var unikys = new Unikys();
15 | 
16 | console.log(unikys instanceof Unikys); // === true
17 | console.log(unikys instanceof Person); // === true
18 | console.log(unikys.constructor); // === function Unikys()
19 | 
20 | </script>
21 | 
22 | 


--------------------------------------------------------------------------------
/chapter-9/9-397_template_string_expression_analyze.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (() => {
 4 |     function analyze(strings, ...values) {
 5 |         console.log(strings); console.log(values);
 6 |         console.log(strings.raw[1] === "!\\nECMAScript"); // === true
 7 |         return "Conditional string";
 8 |     }
 9 | 
10 |     var name = "World";
11 |     console.log(analyze `Hello, ${name}!\nECMAScript${2 * 2 + 2} is easy`);
12 | 
13 | 
14 |     console.log(String.raw `Hello, ${name}!\nECMAScript${2 * 2 + 2} is easy`);
15 | })();
16 | </script>
17 | 


--------------------------------------------------------------------------------
/chapter-3/3-67_difference_between_strings.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var color1 = new String("red");
 4 | var color2 = "red";
 5 | var color3 = String("red");
 6 | 
 7 | console.log(color1 instanceof String); // === true
 8 | console.log(color2 instanceof String); // === false
 9 | console.log(color3 instanceof String); // === false
10 | 
11 | console.log(typeof color1); // === "object"
12 | console.log(typeof color2); // === "string"
13 | console.log(typeof color3); // === "string"
14 | 
15 | console.log(color3 === color2); // === true
16 | 
17 | </script>
18 | 


--------------------------------------------------------------------------------
/chapter-4/4-114_new_with_java.java:
--------------------------------------------------------------------------------
 1 | class Person { String name; String blog;
 2 |     public Person(String name, String blog) {
 3 |         this.name = name;
 4 |         this.blog = blog;
 5 |     }
 6 | 
 7 |     public String getName(String name) {
 8 |         this.name = name;
 9 |     }
10 |     public String getBlog(String blog) {
11 |         this.blog = blog;
12 |     }
13 | 
14 |     public void main(String [] args) {
15 |         Person unikys = new Person("unikys", "unikys.tistory.com");
16 |         System.out.println(unikys.getName());
17 |     }
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/chapter-2/2-42_closer_example.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function outer () {
 4 |     var count = 0;
 5 |     return {
 6 |         increase: function () {
 7 |             return ++count; },
 8 |         decrease: function () {
 9 |             return --count;
10 |         }
11 |     };
12 | }
13 | 
14 | var counter = outer();
15 | console.log(counter.increase());    // === 1
16 | console.log(counter.increase());    // === 2
17 | console.log(counter.decrease());    // === 1
18 | 
19 | var counter2 = outer();
20 | console.log(counter2.increase());   // === ?
21 | 
22 | </script>
23 | 


--------------------------------------------------------------------------------
/chapter-9/9-411_map_set.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (() => {
 3 |     var map = new Map(),
 4 |         key = {name: "Unikys"};
 5 | 
 6 |     map.set("Hello", "World").set("ECMAScript", 6).set(key, "javascript");
 7 | 
 8 |     for (let [ key, val ] of map.entries()) {
 9 |         console.log(key + " = " + val);
10 |     }
11 | 
12 |     var set = new Set();
13 |     set.add("Hello").add("World").add("ECMAScript").add("6");
14 | 
15 |     console.log(set.has("ECMAScript")); // === true
16 |     for (let key of set.values()) {
17 |         console.log(key);
18 |     }
19 | })();
20 | </script>
21 | 


--------------------------------------------------------------------------------
/chapter-9/9-412_weakmap_weakset.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (() => {
 4 |     var weakSet = new WeakSet(),
 5 |         weakMap = new WeakMap(),
 6 |         obj = {
 7 |             name: "Unikys"
 8 |         },
 9 |         val = {
10 |             language: "javascript"
11 |         };
12 | 
13 |     weakSet.add(obj);
14 |     weakMap.set(obj, val);
15 | 
16 |     console.log(weakSet.has(obj));
17 |     console.log(weakMap.has(obj));
18 | 
19 |     obj = null;
20 | 
21 |     console.log(weakSet.has(obj));
22 |     console.log(weakMap.has(obj));
23 | 
24 | })();
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-4/4-150_object_create_configure.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | 
 4 | function Person(name) {
 5 |     this.name = name;
 6 | }
 7 | Person.prototype = {
 8 |     yell: function () {
 9 |         alert("My name is " + this.name);
10 |     }
11 | };
12 | 
13 | var unikys = Object.create(Person.prototype, {
14 |     name : {
15 |         value: "Unikys",
16 |         configurable: true,
17 |         enumerable: true,
18 |         writable: true
19 |     }
20 | });
21 | 
22 | unikys.yell(); // === "My name is Unikys"
23 | unikys.name = "Suniky";
24 | unikys.yell(); // === ?
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-2/2-31_resolve_with_function.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 | <div id="divScope0">Click me! DIV 0</div>
 4 | <div id="divScope1">Click me! DIV 1</div>
 5 | <div id="divScope2">Click me! DIV 2</div>
 6 | <script>
 7 | function setDivClick(index) {
 8 |     document.getElementById("divScope" + index).addEventListener(
 9 |         "click",
10 |         function () {
11 |             alert("You clicked div #" + index);
12 |         },
13 |         false
14 |     );
15 | }
16 | var i, len = 3;
17 | for (i = 0; i < len; i++) {
18 |     setDivClick(i);
19 | }
20 | </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chapter-9/9-385_let_and_var.js:
--------------------------------------------------------------------------------
 1 | if (true) {
 2 |     var varVariable = 1;
 3 |     let letVariable = 2;
 4 | }
 5 | 
 6 | console.log(varVariable); // === 1
 7 | console.log(letVariable); // Uncaught Reference Error
 8 | 
 9 | let myArray = [0,1,2,3,4,5],
10 |     length = myArray.length;
11 | 
12 | for (let i = 0 ; i < length ; i++) {
13 |     if (myArray[i] > 3) {
14 |         break;
15 |     }
16 | }
17 | console.log(myArray[i]);
18 | 
19 | 
20 | var duplicatedName = "This is with var";
21 | var duplicatedName = "No problem";
22 | let duplicatedName = "Syntax error will be raised"; // Error
23 | 
24 | 


--------------------------------------------------------------------------------
/chapter-9/9-403_function_parameter.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | function dynamicArguments(arg1, ...rest) {
 4 |     console.log(arg1);
 5 |     console.log(rest);
 6 | }
 7 | dynamicArguments(1,2,3,4);
 8 | 
 9 | 
10 | var spread = ["P", "R", "E", "A"];
11 | dynamicArguments("S", ...spread, "D");
12 | 
13 | function previousDynamicArguments(arg1) {
14 |     var rest = Array.prototype.slice.call(arguments, 1);
15 |     console.log(arg1);
16 |     console.log(rest);
17 | }
18 | 
19 | previousDynamicArguments(1,2,3,4);
20 | previousDynamicArguments.apply(this, ["S"].concat(spread).concat(["D"]));
21 | </script>
22 | 
23 | 


--------------------------------------------------------------------------------
/chapter-9/9-406_yield.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (() => {
 4 |     var fibonacci = {
 5 |         maxStep: 20,
 6 |         *[Symbol.iterator]() {
 7 |             var previous = 0,
 8 |                 current = 1,
 9 |                 step = 0,
10 |                 maxStep = this.maxStep;
11 | 
12 |             while(step++ < maxStep) {
13 |                 [previous, current] = [current, previous + current];
14 |                 yield current;
15 |             }
16 |         }
17 |     };
18 | 
19 |     for (var fibonacciNumber of fibonacci) {
20 |         console.log(fibonacciNumber);
21 |     }
22 | })();
23 | 
24 | </script>
25 | 


--------------------------------------------------------------------------------
/chapter-5/5-215_check_ie_version.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (function () {
 3 |     var IEVersion = getIEVersion();
 4 |     if (IEVersion === -1) {
 5 |         alert("Not IE");
 6 |     } else if(IEVersion < 9) {
 7 |         alert("IE 8 or lower, need to upgrade");
 8 |     } else {
 9 |         alert("IE 9 or higher");
10 |     }
11 | 
12 |     function getIEVersion() {
13 |         if (navigator.appName == "Microsoft Internet Explorer" && /MSIE ([0-9]{1,}[\.0-9]{0,})/.exec(navigator.userAgent) != null) {
14 |             return parseFloat(RegExp.$1);
15 |         } else {
16 |             return -1;
17 |         }
18 |     }
19 | }());
20 | </script>
21 | 


--------------------------------------------------------------------------------
/chapter-7/7-353_image_sprite.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <style>
 4 | .flag {
 5 |     background-image: url("flags.png");
 6 |     background-size: 20px auto;
 7 |     width: 20px;
 8 |     height: 13px;
 9 | }
10 | .en {
11 |     background-position: 0px -12px;
12 | }
13 | .cn {
14 |     background-position: 0px -23px;
15 | }
16 | .jp {
17 |     background-position: 0px -38px;
18 | }
19 | </style>
20 | </head>
21 | <body>
22 |     <a><img class="flag ko"></img>Korean</a>
23 |     <a><img class="flag en"></img>English</a>
24 |     <a><img class="flag cn"></img>Chinese</a>
25 |     <a><img class="flag jp"></img>Japanese</a>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/chapter-4/4-139_early_inheritance.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person() {
 4 |     this.name = "anonymous";
 5 |     this.job = "none";
 6 |     this.sayHello = function () {
 7 |         alert("Hello, my name is " + this.name);
 8 |     };
 9 | }
10 | 
11 | function Unikys() {
12 |     var obj = new Person();
13 |     obj.name = "Unikys";
14 |     obj.job = "Programmer";
15 |     return obj;
16 | }
17 | 
18 | var unikys = new Unikys();
19 | unikys.sayHello(); // === "Hello, my name is Unikys"
20 | 
21 | // Problem with this method
22 | console.log(unikys instanceof Unikys); // === false
23 | console.log(unikys instanceof Person); // === true
24 | 
25 | </script>
26 | 


--------------------------------------------------------------------------------
/chapter-9/9-417_proxy.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | var target = {
 3 |     unikys: "Hello, Unikys"
 4 | };
 5 | 
 6 | var proxy = new Proxy(target, {
 7 |     get (target, name) {
 8 |         return name in target ? target[name] : `Nice to meet you, ${name}`
 9 |     },
10 |     set (target, name, value) {
11 |         if (name === "age") {
12 |             if (typeof value === "number") {
13 |                 target[name] = value
14 |             } else {
15 |                 console.log("Wrong type, must be number");
16 |             }
17 |         }
18 |     }
19 | });
20 | 
21 | console.log(proxy.unikys);
22 | console.log(proxy.stranger);
23 | proxy.age = "4";
24 | 
25 | </script>
26 | 


--------------------------------------------------------------------------------
/chapter-9/9-422_array_includes.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // >= ECMAScript 2016
 3 | var array = ["a", "b", 1, 2, NaN];
 4 | 
 5 | console.log(array.includes("a")); // === true
 6 | console.log(array.includes(2)); // === true
 7 | console.log(array.includes(NaN)); // === true
 8 | 
 9 | 
10 | // <= ES6
11 | console.log(array.indexOf("a") >= 0); // === true
12 | console.log(array.indexOf(2) !== -1); // === true
13 | console.log(array.indexOf(NaN) !== -1); // === false ? var includesNaN = false;
14 | 
15 | for (var i = 0 ; i < array.length ; ++i) {
16 |     if (isNaN(array[i])) {
17 |         includesNaN = true;
18 |     }
19 | }
20 | 
21 | console.log(includesNaN);
22 | 
23 | </script>
24 | 


--------------------------------------------------------------------------------
/chapter-3/3-99_collecting_var_minification.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="subject0"></div>
 4 |     <div id="subject1"></div>
 5 |     <div id="subject2"></div>
 6 | 
 7 |     <script>
 8 | !function(){var e,t,n,s=["1st subject","2nd subject","3rd subject"];for(t=0;t<s.length;t++)e=document.getElementById("subject"+t),e.innerHTML=e.value=s[t],e.addEventListener("click",function(){alert(this.value+" pressed!")});n=new XMLHttpRequest,n.open("GET","http://unikys.tistory.com/list/"),n.onload=function(){var e,t,s=JSON.parse(n.responseText);for(t=0;t<s.length;t++)e=document.getElementById("content"+t),e.innerHTML=s[t]},n.send()}();
 9 |     </script>
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/chapter-5/5-179_setting_listener_separately.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (function () {
 3 |     var x, y, cell;
 4 |     for (x = 0; x < 100; x++) {
 5 |         for (y = 0; y < 100; y++) {
 6 |             cell = document.getElementById("cell" + ("0" + x).substr(-2) + ("0" + y).substr(-2));
 7 |             cell.onmouseover = function () {
 8 |                 this.style.backgroundColor = "#EEEEEE";
 9 |             };
10 |             cell.onmouseover = function () {
11 |                 this.sytle.backgroundColor = "#FFFFFF";
12 |             };
13 |             cell.onclick = function () {
14 |                 alert(this.innerHTML);
15 |             };
16 |         }
17 |     }
18 | }());
19 | 
20 | 


--------------------------------------------------------------------------------
/chapter-3/3-98_multiple_var_minification.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="subject0"></div>
 4 |     <div id="subject1"></div>
 5 |     <div id="subject2"></div>
 6 | 
 7 |     <script>
 8 | !function(){for(var e=["1st subject","2nd subject","3rd subject"],t=0;t<e.length;t++) {var n=document.getElementById("subject"+t);n.innerHTML=n.value=e[t],n.addEventListener("click",function(){alert(this.value+" pressed!")})}var s=new XMLHttpRequest;s.open ("GET","http://unikys.tistory.com/list/"),s.onload=function(){for(var e=JSON.parse(s. responseText),t=0;t<e.length;t++){var n=document.getElementById("content"+t);n.innerHTML=e[t]}},s.send()}();
 9 |     </script>
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/chapter-9/9-388_class.js:
--------------------------------------------------------------------------------
 1 | 
 2 | class Car {
 3 |     constructor(name) {
 4 |         this.name = name;
 5 |         this.type = "Car";
 6 |     }
 7 |     getName() {
 8 |         return this.name;
 9 |     }
10 | }
11 | let car = new Car("My car");
12 | console.log("car.getName(): " + car.getName());
13 | 
14 | 
15 | class SUV extends Car {
16 |     constructor(name) {
17 |         super(name);
18 |         this.type = "SUV";
19 |     }
20 | }
21 | 
22 | let suv = new SUV("My SUV");
23 | console.log("suv instanceof SUV: " + (suv instanceof SUV));
24 | console.log("suv instanceof Car: " + (suv instanceof Car));
25 | console.log("suv.getName(): " + suv.getName());
26 | console.log(SUV);
27 | 
28 | 


--------------------------------------------------------------------------------
/chapter-3/3-100_avoiding_global.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // With IIFE / Closure
 3 | (function () {
 4 |     var localVariable = "I'm not global";
 5 | }());
 6 | 
 7 | 
 8 | // With module
 9 | var myModule = (function () {
10 |     var localVariable = "I'm an inside local variable";
11 |     return {
12 |         show: function () {
13 |             alert(localVariable);
14 |         }
15 |     };
16 | }());
17 | 
18 | myModule.show();
19 | 
20 | 
21 | 
22 | (function (window) {
23 |     var localVariable = "I'm an inside local variable";
24 | 
25 |     window.myModule = {
26 |         show: function () {
27 |             alert(localVariable);
28 |         }
29 |     };
30 | }(window));
31 | 
32 | myModule.show();
33 | 


--------------------------------------------------------------------------------
/chapter-2/2-37_using_with.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="myDiv">Using with</div>
 4 |     <script>
 5 |     with (document.getElementById("myDiv").style) {
 6 |         background = "yellow";
 7 |         color = "red";
 8 |         border = "1px solid black";
 9 |     }
10 | 
11 |     var r = 10, a, x, y;
12 |     with (Math) {
13 |         a = PI * r * r;
14 |         x = r * cos(PI);
15 |         y = r * sin(PI / 2);
16 |     }
17 | 
18 |     function toString(string) {
19 |         console.log(string);
20 |     }
21 |     with({nickname: "unikys"}) {
22 |         with(window) {
23 |             toString("Hello, " + nickname);
24 |         }
25 |     }
26 |     </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter-6/6-304_web_worker.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <select id="doWorker">
 5 |         <option>-- SELECT --</option>
 6 |         <option>doLargeLoop</option>
 7 |     </select>
 8 | 
 9 |     <script>
10 | (function () {
11 |     var worker = new Worker("worker.js"),
12 |         selectWorker = document.getElementById("doWorker");
13 |     selectWorker.addEventListener("change", function () {
14 |         console.log("Main thread: sending message - " + this.value);
15 |         worker.postMessage(this.value);
16 |      });
17 | 
18 |     worker.onmessage = function (msg) {
19 |         console.log("Main thread: " + msg.data);
20 |     }
21 | }());
22 | </script>
23 | </body>
24 | </html>
25 | 
26 | 


--------------------------------------------------------------------------------
/chapter-9/9-405_fibonacci_for_of.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (() => {
 3 |     var fibonacci = {
 4 |         maxStep: 20,
 5 |         [Symbol.iterator]() {
 6 |             var previous = 0,
 7 |                 current = 1,
 8 |                 step = 0,
 9 |                 maxStep = this.maxStep;
10 |             return {
11 |                 next () {
12 |                     [previous, current] = [current, previous + current];
13 |                     return {done: step++ >= maxStep, value: current};
14 |                 }
15 |             };
16 |         }
17 |     };
18 | 
19 |     for (var fibonacciNumber of fibonacci) {
20 |         console.log(fibonacciNumber);
21 |     }
22 | })();
23 | 
24 | </script>
25 | 
26 | 


--------------------------------------------------------------------------------
/chapter-3/3-70_global_xmlhttprequest.html:
--------------------------------------------------------------------------------
 1 | <html
 2 | <body>
 3 |     <div id="div">Global XMLHttpRequest example</div>
 4 |     <button id="button">Click</button>
 5 |     <script>
 6 |     var element = document.getElementById("div"),
 7 |         button = document.getElementById("button"),
 8 | 
 9 |     xhr = new XMLHttpRequest();
10 |     button.onclick = function () {
11 |         xhr.open("GET", "http://unikys.tistory.com/");
12 |         xhr.onreadystatechange = function () {
13 |             if (xhr.readyState === 4 && xhr.status === 200) {
14 |                 element.innerHTML = xhr.responseText;
15 |             }
16 |         };
17 |         xhr.send();
18 |     };
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/chapter-6/worker.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     var messages = {
 3 |         "doLargeLoop": function () {
 4 |             var i,
 5 |                 sum = 0,
 6 |                 start, end;
 7 | 
 8 |             console.log("Worker thread: Starting large loop");
 9 |             start = Date.now();
10 | 
11 |             for (i = 0 ; i < 10000000000 ; i++) {
12 |                 sum += i;
13 |             }
14 |             end = Date.now(); postMessage(`Elapsed time(${((end - start) / 1000).toFixed(2)} sec, sum=${sum})`);
15 |         }
16 |     };
17 | 
18 |     onmessage = function (msg) {
19 |         if (messages.hasOwnProperty(msg.data)) {
20 |             messages[msg.data]();
21 |         }
22 |     }
23 | }());
24 | 


--------------------------------------------------------------------------------
/chapter-4/4-118_this.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function whatsThis() {
 3 |     return this.toString();
 4 | }
 5 | var unikys = {
 6 |     what: whatsThis,
 7 |     toString: function () {
 8 |         return "[object unikys]";
 9 |     }
10 | };
11 | 
12 | console.log(whatsThis());                   //#1
13 | console.log(unikys.what());                 //#2
14 | console.log(whatsThis.call());              //#3
15 | console.log(whatsThis.apply(unikys));       //#4
16 | console.log(unikys.what.call(undefined));   //#5
17 | console.log(unikys.what.call(unikys));      //#6
18 | 
19 | 
20 | // Calling a member function set to a local
21 | var newWhat = unikys.what;
22 | console.log(newWhat()); // === "[object Window]"
23 | 
24 | </script>
25 | 


--------------------------------------------------------------------------------
/chapter-4/4-133_printing_all_properties.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name, blog) {
 4 |     this.name = name;
 5 |     this.blog = blog;
 6 | };
 7 | Person.prototype.getName = function () {
 8 |     return this.name;
 9 | };
10 | Person.prototype.getBlog = function () {
11 |     return this.blog;
12 | };
13 | 
14 | var unikys = new Person("unikys", "unikys.tistory.com"),
15 |     prop;
16 | 
17 | for(prop in unikys) {
18 |     console.log("unikys[" + prop + "] = " + unikys[prop]);
19 | }
20 | 
21 | 
22 | // Using hasOwnProperty function
23 | for(prop in unikys) {
24 |     if (unikys.hasOwnProperty(prop)) {
25 |         console.log("unikys[" + prop + "] = " + unikys[prop]);
26 |     }
27 | }
28 | 
29 | </script>
30 | 


--------------------------------------------------------------------------------
/chapter-3/3-74_async_request_issue.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <button id="buttonCheckId">Click</button>
 4 |     <script>
 5 | 
 6 |     var xhr = new XMLHttpRequest();
 7 |     document.getElementById("buttonCheckId").addEventListener("click", function () {
 8 |         var id = document.getElementById("inputId").value;
 9 |         xhr.open("GET", "http://unikys.tistory.com/api/checkId?id=" + id);
10 |         xhr.onreadystatechange = function () {
11 |             if (xhr.readyStatus === 4 && xhr.status === 200) {
12 |                 if (xhr.responseText === "1") {
13 |                     alert("ID exists!");
14 |                 }
15 |             }
16 |         };
17 |     });
18 | 
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/chapter-4/4-132_prototype_chain.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Car() {
 4 |     this.wheel = 4;
 5 |     this.beep = "BEEP!";
 6 | };
 7 | 
 8 | Car.prototype.go = function () {
 9 |     alert(this.beep);
10 | };
11 | 
12 | function Truck() {
13 |     this.wheel = 6;
14 |     this.beep = "HONK!";
15 | };
16 | Truck.prototype = new Car();
17 | 
18 | function SUV() {
19 |     this.beep = "WANK!";
20 | };
21 | SUV.prototype = new Car();
22 | 
23 | var truck = new Truck(),
24 |     suv = new SUV();
25 | 
26 | console.log(truck.wheel); // === 6
27 | console.log(suv.wheel); // === 4
28 | console.log(truck.beep); // === "HONK!"
29 | console.log(suv.beep); // === "WANK!"
30 | truck.go(); // === "HONK!"
31 | suv.go(); // === "WANK!"
32 | 
33 | </script>
34 | 


--------------------------------------------------------------------------------
/chapter-8/8-365_open_bracket_newline.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (function ()
 3 | {
 4 |     var user = 
 5 |     {
 6 |         "getName": function ()
 7 |         {
 8 |             return
 9 |             {
10 |                 name: "Unikys"
11 |             };
12 |         },
13 |         "getLanguages": function ()
14 |         {
15 |             return
16 |             [
17 |                 "Javscript",
18 |                 "C",
19 |                 "C++",
20 |                 "JAVA"
21 |             ]
22 |         }
23 |     },
24 |     whoami = function ()
25 |     {
26 |         console.log(user);
27 |         console.log(user.getName());
28 |         console.log(user.getLanguages());
29 |     }
30 |     whoami();
31 | }());
32 | 
33 | </script>
34 | 


--------------------------------------------------------------------------------
/chapter-4/4-148_object_create_object.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var person = {
 4 |     yell: function () {
 5 |         alert("My name is " + this.name);
 6 |     }
 7 | };
 8 | 
 9 | var unikys = Object.create(person);
10 | unikys.name = "Unikys";
11 | unikys.yell(); // === "My name is Unikys"
12 | 
13 | console.log(unikys instanceof person); // === TypeError!
14 | 
15 | // Check Object.create object prototype
16 | console.log(Object.getPrototypeOf(unikys) === person); // === true
17 | console.log(Object.getPrototypeOf(person)); // === Object {}
18 | 
19 | 
20 | // Check Object.create object inheritance
21 | console.log(person.isPrototypeOf(unikys)); // === true
22 | console.log(Object.prototype.isPrototypeOf(unikys)); // === true
23 | 
24 | </script>
25 | 
26 | 


--------------------------------------------------------------------------------
/chapter-9/9-407_iterator.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | (() => {
 4 |     var iterFibonacci = function* (maxStep) {
 5 |         var previous = 0,
 6 |             current = 1,
 7 |             step = 0;
 8 | 
 9 |         while (step++ < maxStep) {
10 |             [previous, current] = [current, previous + current];
11 |             yield current;
12 |         }
13 |     };
14 | 
15 |     for (var fibonacciNumber of iterFibonacci(20)) {
16 |         console.log(fibonacciNumber);
17 |     }
18 | 
19 |     var fibonacciResult = [...iterFibonacci(20)];
20 |     console.log(fibonacciResult);
21 |     var [n1, n2, n3, n4, n5, ...rest] = iterFibonacci(20);
22 |     console.log(n1 + " , " +  n2 + " , " +  n4 + " , " + n5 + " , " + rest);
23 | 
24 | })();
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-6/6-269_nesting_level_test.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 |     <input type="button" id="buttonStart" value="Start"/>
 4 |     <script>
 5 | 
 6 |     (function () {
 7 |         var lastTime,
 8 |             i = 0;
 9 |         document.getElementById("buttonStart").onclick = function () {
10 |             lastTime = Date.now();
11 |             repeatedTimeout();
12 |         };
13 | 
14 |         function repeatedTimeout() {
15 |             var currentTime = Date.now();
16 |             console.log("NestingLevel[" + ++i + "]: " + (currentTime - lastTime) + "ms");
17 |             if (i < 10) {
18 |                 setTimeout(repeatedTimeout);
19 |             }
20 |             lastTime = Date.now();
21 |         }
22 |     }());
23 | 
24 |     </script>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/chapter-9/9-418_symbol.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (() => {
 3 |     var myObject = {
 4 |         [Symbol()]: "First symbol",
 5 |         [Symbol()]: "Second symbol"
 6 |     };
 7 | 
 8 |     console.log(myObject);
 9 | 
10 |     const key = Symbol();
11 | 
12 |     console.log("typeof key : " + typeof key);
13 | 
14 |     myObject[key] = "New symbol";
15 | 
16 |     console.log(Object.keys(myObject)); // === []
17 |     console.log(Object.getOwnPropertyNames(myObject)); // === []
18 |     console.log(Object.getOwnPropertySymbols(myObject)); // === [Symbol(), Symbol(), Symbol()]
19 | })();
20 | 
21 | (() => {
22 |     console.log(Symbol("unikys") === Symbol("unikys")); // === false
23 |     console.log(Symbol.for("unikys") === Symbol.for("unikys")); // === true
24 | })();
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-9/9-396_template_string_expression_multiline.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <lable>Name: <input id="name"></label>
 4 |     <pre id="greetings"></pre>
 5 |     <pre id="greetingsES5"></pre>
 6 |     <script>
 7 |     (() => {
 8 |         let inputName = document.getElementById("name"),
 9 |             preGreetings = document.getElementById("greetings"),
10 |             preGreetingsES5 = document.getElementById("greetingsES5");
11 | 
12 |         inputName.addEventListener("change", () => { preGreetings.innerHTML = `Hello,
13 | ${inputName.value.toUpperCase()}\nWelcome to ES6`;
14 | 
15 |         preGreetingsES5.innerHTML = "Hello,\n" +
16 |             inputName.value.toUpperCase() +
17 |             "\nI'm using ES5";
18 |         });
19 |     })();
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chapter-3/3-64_instanceof_primitive_type.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | console.log(true instanceof Boolean);   // === false
 4 | console.log(true instanceof Object);    // === false
 5 | 
 6 | console.log([0,1] instanceof Array);            // === true
 7 | console.log({name:"unikys"} instanceof Object); // === true;
 8 | 
 9 | var color1 = new String("red");
10 | var color2 = "red";
11 | 
12 | console.log(color1 == color2);              // === true
13 | console.log(color1 instanceof String);      // === true
14 | console.log(color2 instanceof String);      // === false ?!
15 | console.log(color2 instanceof Object);      // === false
16 | console.log(color1 === color2);             // === false
17 | console.log(color1.constructor === String); // === true
18 | console.log(color2.constructor === String); // === true ?!
19 | </script>
20 | 


--------------------------------------------------------------------------------
/chapter-6/6-307_shared_workder.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <select id="doWorker">
 5 |         <option>-- SELECT --</option>
 6 |         <option>doLargeLoop</option>
 7 |         <option>getConnection</option>
 8 |     </select>
 9 |     <script>
10 | (function () {
11 |     var sharedWorker = new SharedWorker("sharedWorker.js"),
12 |         selectWorker = document.getElementById("doWorker");
13 |     sharedWorker.port.start();
14 |     sharedWorker.port.onmessage = function (msg) {
15 |         console.log("Main thread: " + msg.data);
16 |     }
17 | 
18 |     selectWorker.addEventListener("change", function () {
19 |         console.log("Main thread: sending message - " + this.value);
20 |         sharedWorker.port.postMessage(this.value);
21 |     });
22 | }());
23 | 
24 | </script>
25 | </body>
26 | </html>
27 | 
28 | 


--------------------------------------------------------------------------------
/chapter-5/5-222_compatibility_with_init_time_branching.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | var getXHR = (function () {
 4 |     var xhr;
 5 |     if (window.XMLHttpRequest) {
 6 |         return function () {
 7 |             return new XMLHttpRequest();
 8 |         }
 9 |     }
10 |     try {
11 |         xhr = new ActiveXObject("MSXML2.XMLHTTP.6.0");
12 |         return function () {
13 |             return new new ActiveXObject("MSXML2.XMLHTTP.6.0");
14 |         }
15 |     } catch (e) {
16 |         try {
17 |             xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
18 |             return function () {
19 |                 return new ActiveXObject("MSXML2.XMLHTTP.3.0");
20 |             }
21 |         } catch (e) {
22 |             alert("This browser does not support XMLHttpRequest")
23 |         }
24 |     }
25 | }());
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-9/9-420_promise_flow_control.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (() => {
 4 |     var promise = new Promise(function (resolve, reject) {
 5 |         var xhr = new XMLHttpRequest();
 6 |         xhr.open("GET", "/longLoad");
 7 |         xhr.onload = function () {
 8 |             if (this.status >= 200 && this.status < 300) {
 9 |                 resolve(this.responseText);
10 |             } else {
11 |                 reject(this.statusText);
12 |             }
13 |         };
14 |         xhr.onerror = function () {
15 |             reject(this.statusText);
16 |         }
17 |         xhr.send();
18 |     });
19 | 
20 |     promise.then(function (responseText) {
21 |         console.log(responseText);
22 |     }).catch(function (statusText) {
23 |         alert("Error! " + statusText);
24 |     });
25 | })();
26 | </script>
27 | 
28 | 


--------------------------------------------------------------------------------
/chapter-4/4-130_circular_reference.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person() {
 4 | }
 5 | 
 6 | var unikys = new Person(),
 7 |     stranger = new Person();
 8 | 
 9 | console.log(unikys.constructor === Person); // === true
10 | console.log(unikys.constructor.prototype === Person.prototype); // === true
11 | console.log(unikys.constructor === unikys.constructor.prototype.constructor); // === true
12 | 
13 | 
14 | // Changing variable from object
15 | Person.prototype.gender = "male";
16 | 
17 | stranger.gender = "female";
18 | 
19 | 
20 | // Changing variable from prototype
21 | console.log(unikys.gender); // === "male"
22 | console.log(stranger.gender); // === "male"
23 | 
24 | Person.prototype.gender = "female";
25 | 
26 | console.log(unikys.gender); // === "female"
27 | console.log(stranger.gender); // === "female"
28 | 
29 | 
30 | </script>
31 | 


--------------------------------------------------------------------------------
/chapter-3/3-102_javascript_inside_html.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <form id="formWrite" onsubmit="return validate()">
 4 |         <input type="text" id="name" name="name"/>
 5 |         <input type="text" id="age" name="age"/>
 6 |         <input type="submit" value="Submit"/>
 7 |     </form>
 8 |     <script>
 9 |     function validate() {
10 |         var inputName = document.getElementById("name"),
11 |             inputAge;
12 |         if (inputName.value === "") {
13 |             alert("Input name");
14 |             inputName.focus();
15 |             return false;
16 |         }
17 |         inputAge = document.getElementById("age");
18 | 
19 |         if (inputAge.value === "") {
20 |             alert("Input age"); inputAge.focus();
21 |             return false;
22 |         }
23 |     }
24 |     </script>
25 | </body>
26 | </html>
27 | 
28 | 


--------------------------------------------------------------------------------
/chapter-9/9-409_iterator_flow_control.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | (() => {
 3 |     function getDOM() {
 4 |         var xhr = new XMLHttpRequest();
 5 |         xhr.open("/fetchDOM");
 6 |         xhr.onload = function () {
 7 |             xhrRequests.next(xhr.responseText);
 8 |         }
 9 |         xhr.send();
10 |     }
11 | 
12 |     function getData() {
13 |         var xhr = new XMLHttpRequest();
14 |         xhr.open("/fetchData");
15 |         xhr.onload = function () {
16 |             xhrRequests.next(xhr.responseText);
17 |         }
18 |         xhr.send();
19 |     }
20 | 
21 |     function manipulateDOM(dom, data) {
22 |         // Fix DOM
23 |     }
24 | 
25 |     var xhrRequests = function* () {
26 |         var dom, data;
27 |         dom = yield getDOM();
28 |         data = yield getData();
29 |         yield manipulateDOM(dom, data);
30 |     };
31 | })();
32 | </script>
33 | 
34 | 


--------------------------------------------------------------------------------
/chapter-2/2-44_static_with_closer.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var countFactory = (function () {
 4 |     var staticCount = 0;
 5 |     return function () {
 6 |         var localCount = 0;
 7 |         return {
 8 |             increase: function () {
 9 |                 return {
10 |                     static: ++staticCount,
11 |                     local: ++localCount
12 |                 };
13 |             },
14 |             decrease: function () {
15 |                 return {
16 |                     static: --staticCount,
17 |                     local: --localCount
18 |                 };
19 |             }
20 |         };
21 |     };
22 | }());
23 | 
24 | var counter = countFactory(),
25 |     counter2 = countFactory();
26 | 
27 | console.log(counter.increase());
28 | console.log(counter.increase());
29 | console.log(counter2.decrease());
30 | console.log(counter.increase());
31 | 
32 | </script>
33 | 


--------------------------------------------------------------------------------
/chapter-5/5-241_adding_currying_function_prototype.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     Function.prototype.curry = function() {
 5 |         if (arguments.length<1) {
 6 |             return this;
 7 |         }
 8 |         var _this = this,
 9 |             args = Array.prototype.slice.apply(arguments);
10 |         return function() {
11 |             return _this.apply(this, args.concat(Array.prototype.slice.apply(arguments)));
12 |         }
13 |     }
14 | 
15 |     function sum(x, y) {
16 |         return x + y;
17 |     }
18 | 
19 |     var adderFourCurry = sum.curry(4);
20 |     console.log(adderFourCurry(5)); // === 9
21 |     console.log(adderFourCurry(10)); // === 14
22 | 
23 | 
24 |     function sum4(x, y, z, w) {
25 |         return x + y + z + w;
26 |     }
27 | 
28 |     var adderCurry = sum4.curry(5, 1);
29 |     console.log(adderCurry(2, 3)); // === 11
30 | }());
31 | </script>
32 | 


--------------------------------------------------------------------------------
/chapter-5/5-237_callback_pattern.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function ajax(method, url, data, callback) {
 5 |         var xhr = new XMLHttpRequest();
 6 |         xhr.open(method, url);
 7 |         xhr.onload = function () {
 8 |             if (xhr.status === 200) {
 9 |                 callback.call(this, xhr.responseText);
10 |             }
11 |         }
12 |         xhr.send(data);
13 |     }
14 |     ajax("POST", "/login", "id=hello&password=world", function (responseText) {
15 |         if (responseText === "Success") {
16 |             alert("Success to login!");
17 |             ajax("GET", "/userInfo", "id=hello", displayUserInfo);
18 |         } else {
19 |             alert("Failed to login");
20 |         }
21 |     });
22 | 
23 |     function displayUserInfo(responseText) {
24 |         document.getElementById("userInfo").innerHTML = responseText;
25 |     }
26 | 
27 | }());
28 | </script>
29 | 
30 | 


--------------------------------------------------------------------------------
/chapter-5/5-224_xmlhttprequest_with_self_defining_function.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | var getXHR = function () {
 4 |     var xhr;
 5 |     if (window.XMLHttpRequest) {
 6 |         getXHR = function () {
 7 |             return new XMLHttpRequest();
 8 |         };
 9 |         return new XMLHttpRequest();
10 |     }
11 |     try {
12 |         xhr = new ActiveXObject("MSXML2.XMLHTTP.6.0");
13 |         getXHR = function () {
14 |             return new new ActiveXObject("MSXML2.XMLHTTP.6.0");
15 |         };
16 |         return xhr;
17 |     } catch (e) {
18 |         try {
19 |             xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
20 |             getXHR = function () {
21 |                 return new ActiveXObject("MSXML2.XMLHTTP.3.0");
22 |             };
23 |             return xhr;
24 |         } catch (e) {
25 |             alert("This browser does not support XMLHttpRequest")
26 |         }
27 |     }
28 | };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/chapter-9/9-415_typed_array.js:
--------------------------------------------------------------------------------
 1 | class Employer {
 2 |     constructor (arrayBuffer = new ArrayBuffer(24)) {
 3 |         this._arrayBuffer = arrayBuffer;
 4 |         this._id = new Uint32Array(arrayBuffer, 0, 1);
 5 |         this._name = new Uint8Array(arrayBuffer, 4, 16);
 6 |         this._manMonth = new Float32Array(arrayBuffer, 20, 1);
 7 |     }
 8 | 
 9 |     set id(id) {
10 |         this._id[0] = id;
11 |         this._arrayBuffer.set(id);
12 |     }
13 | 
14 |     get id() {
15 |         return this._id[0];
16 |     }
17 | 
18 |     set name(name) {
19 |         this._name[0] = name;
20 |     }
21 | 
22 |     get name() {
23 |         return this._name[0];
24 |     }
25 | 
26 |     set manMonth(manMonth) {
27 |         this._manMonth[0] = manMonth;
28 |     }
29 | 
30 |     get manMonth() {
31 |         return this._manMonth[0];
32 |     }
33 | 
34 |     get toByte() {
35 |         return this._arrayBuffer;
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/chapter-5/5-180_setting_listener_delegate.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (function () {
 3 |     var wrapper = document.getElementById("tableWrapper");
 4 |     wrapper.addEventListener("mouseover", function () {
 5 |         var target = event.target || event.srcElement;
 6 |         if (target.id && target.id.indexOf("cell") > -1) {
 7 |             target.style.backgroundColor = "#EEEEEE";
 8 |         }
 9 |     }, true);
10 |     wrapper.addEventListener("mouseout", function () {
11 |         var target = event.target || event.srcElement;
12 |         if (target.id && target.id.indexOf("cell") > -1) {
13 |             target.style.backgroundColor = "#FFFFFF";
14 |         }
15 |     }, true);
16 |     wrapper.addEventListener("click", function () {
17 |         var target = event.target || event.srcElement;
18 |         if (target.id && target.id.indexOf("cell") > -1) {
19 |             alert(target.innerHTML);
20 |         }
21 |     }, true);
22 | }());
23 | 
24 | 


--------------------------------------------------------------------------------
/chapter-9/9-401_destructuring_example.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (() => {
 4 |     function destructArray([first, second]) {
 5 |         console.log("Inside destructArray function: " + first + " , " + second);
 6 |         return [first + second, first - second, first * second, first / second];
 7 |     }
 8 | 
 9 |     function destructObject({name, gender}) {
10 |         console.log("Inside destructObject function: " + name + " , " + gender);
11 |         return {
12 |             greetings: "Hello, " + name,
13 |             sayHello() {
14 |                 console.log("sayHello function: Hello, " + name);
15 |             }
16 |         };
17 |     }
18 | 
19 |     var [sum, sub, mul, div] = destructArray([1 , 2]);
20 |     console.log(`Return value of destructArray: ${sum}, ${sub}, ${mul}, ${div}`);
21 | 
22 |     var {greetings, sayHello} = destructObject({name: "Unikys", gender: "Male"});
23 |     sayHello();
24 | 
25 | })();
26 | </script>
27 | 


--------------------------------------------------------------------------------
/chapter-2/2-49_setInterval_closer.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <button id="btnToggle">Toggle Pending</button>
 4 |     <div id="divPending">Pending</div>
 5 |     <script>
 6 | (function () {
 7 |     var pendingInterval = false,
 8 |         div = document.getElementById("divPending"),
 9 |         btn = document.getElementById("btnToggle");
10 | 
11 |         function startPending() {
12 |             if (div.innerHTML.length > 13) {
13 |                 div.innerHTML = "Pending";
14 |             }
15 | 
16 |             div.innerHTML += ".";
17 |         };
18 | 
19 |         btn.addEventListener("click", function () {
20 |             if (!pendingInterval) {
21 |                 pendingInterval = setInterval(startPending, 500);
22 |             } else {
23 |                 clearInterval(pendingInterval);
24 |                 pendingInterval = false;
25 |             }
26 |         });
27 |     }());
28 |     </script>
29 | </body>
30 | </html>
31 | 
32 | 


--------------------------------------------------------------------------------
/chapter-4/4-151_accessor.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | var unikys = {};
 4 | Object.defineProperties(unikys, {
 5 |     firstName: {
 6 |         value: "Sung-ihk",
 7 |         writable: true
 8 |     },
 9 |     lastName: {
10 |         value: "Yang",
11 |         writable: true
12 |     },
13 |     fullName: {
14 |         get: function () {
15 |             return this.firstName + " " + this.lastName;
16 |         },
17 |         set: function (value) {
18 |             var res = value.split(" ");
19 |             if (res.length > 1) {
20 |                 this.firstName = res[0];
21 |                 this.lastName = res[1];
22 |             } else {
23 |                 alert("Wrong format");
24 |             }
25 |         }
26 |     }
27 | });
28 | 
29 | 
30 | console.log(unikys.fullName); // === "Sung-ihk Yang"
31 | unikys.fullName = "Hello world";
32 | console.log(unikys.firstName); // === "Hello"
33 | console.log(unikys.lastName); // === "world"
34 | 
35 | </script>
36 | 


--------------------------------------------------------------------------------
/chapter-5/5-200_backup_wrapped_function_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function wrap(func, wrapper) {
 5 |         return function() {
 6 |             var args = [func].concat(Array.prototype.slice.call(arguments));
 7 |             return wrapper.apply(this, args);
 8 |         };
 9 |     }
10 |     var _existingFunction = existingFunction,
11 |         existingFunction = wrap(_existingFunction, function (func) {
12 |             console.log("Wrapper function is called with arguments");
13 |             console.log(arguments);
14 |             func.apply(this, Array.prototype.slice.call(arguments, 1));
15 |         });
16 | 
17 |     function existingFunction() {
18 |         console.log("Existing function is called with arguments");
19 |         console.log(arguments);
20 |     }
21 | 
22 |     console.log("1. Calling wrapped existing function");
23 |     existingFunction("First argument", "Second argument", "Third argument");
24 | }());
25 | 
26 | </script>
27 | 
28 | 


--------------------------------------------------------------------------------
/chapter-5/5-220_compatibility_for_standard.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     if (!Element.prototype.addEventListener) {
 5 |         if (Element.prototype.attachEvent) {
 6 |             Element.prototype.addEventListener = function (type, fn) {
 7 |                 this.attachEvent("on" + type, fn);
 8 |             }
 9 |         } else {
10 |             Element.prototype.addEventListener = function (type, fn) {
11 |                 this["on" + type] = fn;
12 |             }
13 |         }
14 |     }
15 | 
16 |     if (!Element.prototype.removeEventListener) {
17 |         if (Element.prototype.detachEvent) {
18 |             Element.prototype.removeEventListener = function (type, fn) {
19 |                 this.detachEvent("on" + type, fn);
20 |             }
21 |         } else {
22 |             Element.prototype.removeEventListener = function (type) {
23 |                 this["on" + type] = null;
24 |             }
25 |         }
26 |     }
27 | }());
28 | </script>
29 | 
30 | 


--------------------------------------------------------------------------------
/chapter-6/sharedWorker.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     var messages = {
 3 |         "doLargeLoop": function (port) {
 4 |             var i,
 5 |                 sum = 0,
 6 |                 start, end;
 7 |             port.postMessage("Worker thread: Starting large loop"); start = Date.now();
 8 | 
 9 |             for (i = 0 ; i < 10000000000 ; i++) {
10 |                 sum += i;
11 |             }
12 |             end = Date.now();
13 |             port.postMessage(`Elapsed time(${((end - start) / 1000).toFixed(2)} sec, sum=${sum})`);
14 |         },
15 |         "getConnection": function (port) {
16 |             port.postMessage(`${connection} connections are connected`);
17 |         }
18 |     },
19 |     connection = 0;
20 |     onconnect = function (e) {
21 |         var port = e.ports[0]; connection++;
22 |         port.onmessage = function (e) {
23 |         if (messages.hasOwnProperty(e.data)) {
24 |             messages[e.data](port);
25 |         }
26 |     };
27 |     port.start(); };
28 | }());
29 | 


--------------------------------------------------------------------------------
/chapter-3/3-103_split_javascript_and_html.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <form id="formWrite">
 4 |         <input type="text" id="name" name="name"/>
 5 |         <input type="text" id="age" name="age"/>
 6 |         <input type="submit" value="Submit"/>
 7 |     </form>
 8 | 
 9 |     <script>
10 |     (function () {
11 |         var formWrite = document.getElementById("formWrite");
12 |         formWrite.onsubmit = validate;
13 |         function validate() {
14 |             var inputName = document.getElementById("name"),
15 |                 inputAge;
16 | 
17 |             if (inputName.value === "") {
18 |                 alert("Input name");
19 |                 inputName.focus();
20 |                 return false;
21 |             }
22 | 
23 |             inputAge = document.getElementById("age");
24 |             if (inputAge.value === "") {
25 |                 alert("Input age"); inputAge.focus(); return false;
26 |             }
27 |         }
28 |     }());
29 |     </script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/chapter-5/5-230_cache_with_memoization.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <input type="text" id="itemId"></input>
 5 |     <button id="search">Search</button>
 6 | 
 7 |     <script>
 8 |     (function () {
 9 |         var inputItemId = document.getElementById("itemId");
10 |         function searchItem(id) {
11 |             var xhr;
12 |             if (searchItem.cache.hasOwnProperty(id)) {
13 |                 return searchItem.cache[id];
14 |             }
15 |             xhr = new XMLHttpRequest();
16 |             xhr.open("GET", "/searchItem");
17 |             xhr.onload = function () {
18 |                 var item = JSON.parse(xhr.responseText);
19 |                 searchItem.cache[item.id] = item;
20 |             }
21 |             xhr.send();
22 |         }
23 |         searchItem.cache = {};
24 |         document.getElementById("search").addEventListener("click", function () {
25 |             searchItem(searchItem.value);
26 |         });
27 |     }());
28 |     </script>
29 | </body>
30 | </html>
31 | 
32 | 


--------------------------------------------------------------------------------
/chapter-5/5-197_wrapper_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <script>
 4 | (function () {
 5 |     function wrap(func, wrapper) {
 6 |         return function() {
 7 |             var args = [func].concat(Array.prototype.slice.call(arguments));
 8 |             return wrapper.apply(this, args);
 9 |         };
10 |     }
11 |     function existingFunction() {
12 |         console.log("Existing function is called with arguments");
13 |         console.log(arguments);
14 |     }
15 | 
16 |     var wrappedFunction = wrap(existingFunction, function (func) {
17 |         console.log("Wrapper function is called with arguments");
18 |         console.log(arguments);
19 |         func.apply(this, Array.prototype.slice.call(arguments, 1));
20 |     });
21 | 
22 |     console.log("1. Calling existing function");
23 |     existingFunction("First argument", "Second argument", "Third argument");
24 |     console.log("\n2. Calling wrapped function");
25 |     wrappedFunction("First argument", "Second argument", "Third argument");
26 | }());
27 | </script>
28 | 
29 | 


--------------------------------------------------------------------------------
/chapter-5/5-227_prevent_duplicate_request.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     var requestAuthentication = function (information) {
 5 |         var _requestAuthentication = requestAuthentication;
 6 | 
 7 |         requestAuthentication = function (information) {
 8 |             alert("Already requesting");
 9 |         }
10 |         sendRequest(information);
11 | 
12 |         function sendRequest(information) {
13 |             var xhr = new XMLHttpRequest();
14 |             xhr.open("POST", "/auth");
15 |             xhr.onload = function () {
16 |                 alert("Authorized!");
17 |                 requestAuthentication = _requestAuthentication;
18 |             };
19 |             xhr.onerror = function () {
20 |                 if (confirm("Error occurred, send again?")) {
21 |                     sendRequest(information);
22 |                 }
23 |             }
24 |             xhr.send(information);
25 |         }
26 |     }
27 |     requestAuthentication("name=hello&password=world");
28 | }());
29 | </script>
30 | 


--------------------------------------------------------------------------------
/chapter-6/6-266_requestanimationframe_shim.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (function () {
 3 |     var firstTimestamp = Date.now();
 4 |     window.requestAnimationFrame = window.requestAnimationFrame ||
 5 |         window.webkitRequestAnimationFrame ||
 6 |         window.mozRequestAnimationFrame ||
 7 |         function (callback) {
 8 |             if (callback instanceof Function) {
 9 |                 return setTimeout(function () {
10 |                     callback.call(this, Date.now() - firstTimestamp);
11 |                 }, 1000 / 60);
12 |             } else {
13 |                 return setTimeout(callback, 1000 / 60);
14 |             }
15 |         };
16 |     window.cancelAnimationFrame = window.cancelAnimationFrame ||
17 |         window.cancelRequestAnimationFrame ||
18 |         window.webkitCancelAnimationFrame ||
19 |         window.webkitCancelRequestAnimationFrame ||
20 |         window.mozCancelAnimationFrame ||
21 |         window.mozCancelRequestAnimationFrame ||
22 |         function (timeId) {
23 |             clearTimeout(timeId);
24 |         };
25 | }());
26 | 


--------------------------------------------------------------------------------
/chapter-5/5-219_compatibility_with_function.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     var addEventHandler,
 5 |         removeEventhandler;
 6 | 
 7 |     if (document.addEventListener) {
 8 |         addEventHandler = function (dom, type, fn) {
 9 |             dom.addEventListener(type, fn);
10 |         }
11 |         removeEventHandler = function (dom, type, fn) {
12 |             dom.removeEventListener(type, fn);
13 |         }
14 |     } else if (document.attachEvent) {
15 |         addEventHandler = function (dom, type, fn) {
16 |             dom.attachEvent( 'on'+type, function () {
17 |                 fn.call(dom, window.event);
18 |             });
19 |         };
20 |         removeEventHandler = function (dom, type, fn) {
21 |             dom.detachEvent('on'+type, fn);
22 |         };
23 |     } else {
24 |         addEventHandler = function (dom, type, fn) {
25 |             dom["on" + type] = fn;
26 |         };
27 |         removeEventHandler = function (dom, type, fn) {
28 |             dom["on" + type] = null;
29 |         };
30 |     }
31 | }());
32 | </script>
33 | 


--------------------------------------------------------------------------------
/chapter-5/5-242_unit_translate_with_currying.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     Function.prototype.curry = function() {
 5 |         if (arguments.length<1) {
 6 |             return this;
 7 |         }
 8 |         var _this = this,
 9 |             args = Array.prototype.slice.apply(arguments);
10 |         return function() {
11 |             return _this.apply(this, args.concat(Array.prototype.slice.apply(arguments)));
12 |         }
13 |     }
14 | 
15 |     function unitConvert(fromUnit, toUnit, factor, input) {
16 |         return `${input} ${fromUnit} === ${(input*factor).toFixed(2)} ${toUnit}`;
17 |     }
18 | 
19 |     var cm2inch = unitConvert.curry('cm', 'inch', 0.393701),
20 |         metersquare2pyoung = unitConvert.curry('m^2', 'pyoung', 0.3025),
21 |         kg2lb = unitConvert.curry('kg', 'lb', 2.204623),
22 |         kmph2mph = unitConvert.curry('km/h', 'mph', 0.621371);
23 | 
24 |     console.log(cm2inch(10));
25 |     console.log(metersquare2pyoung(30));
26 |     console.log(kg2lb(50));
27 |     console.log(kmph2mph(100));
28 | }());
29 | </script>
30 | 
31 | 


--------------------------------------------------------------------------------
/chapter-3/3-94_multiple_vars.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="subject0"></div>
 4 |     <div id="subject1"></div>
 5 |     <div id="subject2"></div>
 6 |     
 7 |     <script>
 8 |     (function () {
 9 |         var subjects = ["1st subject", "2nd subject", "3rd subject"];
10 | 
11 |         for (var i = 0 ; i < subjects.length ; i++) {
12 |             var el = document.getElementById("subject" + i);
13 |             el.innerHTML = el.value = subjects[i];
14 |             el.addEventListener("click", function () {
15 |                 alert(this.value + " pressed!");
16 |             });
17 |         }
18 | 
19 |         var xhr = new XMLHttpRequest();
20 |         xhr.open("GET", "http://unikys.tistory.com/list/");
21 |         xhr.onload = function () {
22 |             var contents = JSON.parse(xhr.responseText);
23 |             for (var i = 0 ; i < contents.length ; i++) {
24 |                 var el = document.getElementById("content" + i);
25 |                 el.innerHTML = contents[i];
26 |             }
27 |         };
28 |     }());
29 |     </script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/chapter-3/3-94_collecting_vars.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="subject0"></div>
 4 |     <div id="subject1"></div>
 5 |     <div id="subject2"></div>
 6 | 
 7 |     <script>
 8 |     (function () {
 9 |         var subjects = ["1st subject", "2nd subject", "3rd subject"],
10 |             el, i, xhr;
11 | 
12 |         for (i = 0 ; i < subjects.length ; i++) {
13 |             el = document.getElementById("subject" + i);
14 |             el.innerHTML = el.value = subjects[i];
15 |             el.addEventListener("click", function () {
16 |                 alert(this.value + " pressed!");
17 |             });
18 |         }
19 | 
20 |         xhr = new XMLHttpRequest();
21 |         xhr.open("GET", "http://unikys.tistory.com/list/");
22 |         xhr.onload = function () {
23 |             var contents = JSON.parse(xhr.responseText), el, i;
24 | 
25 |             for (i = 0 ; i < contents.length ; i++) {
26 |                 el = document.getElementById("content" + i);
27 |                 el.innerHTML = contents[i];
28 |             }
29 |         };
30 |     }());
31 |     </script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/chapter-5/5-243_xmlhttprequest_currying.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     Function.prototype.curry = function() {
 5 |         if (arguments.length<1) {
 6 |             return this;
 7 |         }
 8 |         var _this = this,
 9 |             args = Array.prototype.slice.apply(arguments);
10 |         return function() {
11 |             return _this.apply(this, args.concat(Array.prototype.slice.apply(arguments)));
12 |         }
13 |     }
14 | 
15 |     function ajax(method, url, data, callback) {
16 |         var xhr = new XMLHttpRequest();
17 |         xhr.open(method, url);
18 |         xhr.onload = function () {
19 |             if (xhr.status === 200) {
20 |                 callback.call(this, xhr.responseText);
21 |             }
22 |         }
23 |         xhr.send(data);
24 |     }
25 | 
26 |     var ajaxGet = ajax.curry("GET"),
27 |         ajaxPost = ajax.curry("POST"),
28 |         ajaxPut = ajax.curry("PUT"),
29 |         ajaxDelete = ajax.curry("DELETE");
30 | 
31 |     ajaxGet("/data", null, function (responseText) {
32 |         console.log(responseText);
33 |     });
34 | }());
35 | </script>
36 | 
37 | 


--------------------------------------------------------------------------------
/chapter-6/6-279_position_relative_absolute.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #bannerWrapper {
 6 |         overflow: hidden;   /* Don't show the overflowing part */
 7 |         height: 400px;      /* The banner's height */
 8 |         width: 265px;       /* The banner's width */
 9 |         position: relative;
10 |     }
11 |     #bannerImg {
12 |         position: absolute;
13 |     }
14 | 
15 |     #bannerImg.mouseover {
16 |         top: -400px; /* move the banner when the mouse is over */
17 |     }
18 |     </style>
19 | </head>
20 | <body>
21 |     <div id="bannerWrapper">
22 |         <img id="bannerImg" src="http://i.imgur.com/3DpJ0ou.png"/>
23 |     </div>
24 |     <script>
25 |     (function () {
26 |         var imgBannerImg = document.getElementById("bannerImg");
27 |         imgBannerImg.addEventListener("mouseover", function () {
28 |             this.classList.add("mouseover");
29 |         });
30 |         imgBannerImg.addEventListener("mouseout", function () {
31 |             this.classList.remove("mouseover");
32 |         });
33 |     }());
34 |     </script>
35 | </body>
36 | </html>
37 | 
38 | 


--------------------------------------------------------------------------------
/chapter-9/9-399_destructuring.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (() => {
 4 |     var myArray = [1 , 2 , 3 , 4 , 5];
 5 |     var [a , b , , c , d] = myArray;
 6 |     console.log("Array shorthand: " + a + " , " + b + " , " + c + " , " + d);
 7 | 
 8 |     [a , b] = [b , a];
 9 |     console.log("Swap: " + a + " , " + b);
10 | 
11 |     var myObject = {
12 |         name: "Unikys",
13 |         gender: "Male",
14 |         job: "Programmer"
15 |     };
16 | 
17 |     var {name, gender, job} = myObject;
18 |     console.log("Object shorthand: " + name + " , " + gender + " , " + job);
19 | 
20 |     var vehicles = {
21 |         fourWheeles: {
22 |             cars: [
23 |                 "SUV",
24 |                 "Sedan"
25 |             ],
26 |             trucks: [
27 |                 "Pullover",
28 |                 "Wagen"
29 |             ]
30 |         },
31 |         twoWheeles: [
32 |             "bicycle",
33 |             "motorcycle"
34 |         ]
35 |     };
36 | 
37 |     var {fourWheeles, twoWheeles, fourWheeles: {cars, trucks}} = vehicles;
38 |     console.log("Deep object: "+ fourWheeles +", "+ twoWheeles +", "+ cars +", " + trucks);
39 | })();
40 | </script>
41 | 


--------------------------------------------------------------------------------
/chapter-5/5-202_log_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     var car = {
 5 |         beep: function beep() {
 6 |             alert("BEEP");
 7 |         },
 8 |         brake: function brake() {
 9 |             alert("STOP!");
10 |         },
11 |         accelerator: function accelerator() {
12 |             alert("GO"); }
13 |         };
14 | 
15 |     function wrap(func, wrapper) {
16 |         return function() {
17 |             var args = [func].concat(Array.prototype.slice.call(arguments));
18 |             return wrapper.apply(this, args);
19 |         };
20 |     }
21 |     function wrapObject(obj, wrapper) {
22 |         var prop;
23 |         for(prop in obj) {
24 |             if (obj.hasOwnProperty(prop) && typeof obj[prop] === "function") {
25 |                 obj[prop] = wrap(obj[prop], wrapper);
26 |             }
27 |         }
28 |     }
29 | 
30 |     wrapObject(car, function (func) {
31 |         console.log(func.name + " has been invoked");
32 |         func.apply(this, Array.prototype.slice(arguments, 1));
33 |     });
34 | 
35 |     car.accelerator();
36 |     car.beep();
37 |     car.brake();
38 | 
39 | }());
40 | </script>
41 | 
42 | 


--------------------------------------------------------------------------------
/chapter-5/5-232_fibbonacci_wth_memoization.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function fibonacci(n) {
 5 |         if (n === 0 || n === 1) {
 6 |             return n;
 7 |         } else {
 8 |             return fibonacci(n - 1) + fibonacci(n - 2);
 9 |         }
10 |     }
11 | 
12 |     var fibonacciMemo = (function () {
13 |         return function (n) {
14 |             var result = fibonacciMemo.memo[n];
15 |             if (typeof result !== 'number') {
16 |                 result = fibonacciMemo(n - 1) + fibonacciMemo(n - 2);
17 |                 fibonacciMemo.memo[n] = result;
18 |             }
19 |             return result;
20 |         };
21 |     }());
22 | 
23 |     fibonacciMemo.memo = [0, 1];
24 | 
25 |     var testNum = 40, start, end;
26 |     start = Date.now();
27 |     console.log(fibonacci(testNum));
28 |     end = Date.now();
29 |     console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacci(${testNum})`);
30 |     start = Date.now();
31 |     console.log(fibonacciMemo(testNum));
32 |     end = Date.now();
33 |     console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacciMemo(${testNum})`);
34 | }());
35 | </script>
36 | 


--------------------------------------------------------------------------------
/chapter-5/5-229_adding_cache.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     var requestAuthentication = function (information) {
 5 |         var _requestAuthentication = requestAuthentication,
 6 |             authInformation = null;
 7 | 
 8 |         requestAuthentication = function (information) {
 9 |             if (authInformation === null) {
10 |                 alert("Already requesting");
11 |                 return;
12 |             } else {
13 |                 return authInformation;
14 |             }
15 |         }
16 | 
17 |         sendRequest(information);
18 | 
19 |         function sendRequest(information) {
20 |             var xhr = new XMLHttpRequest();
21 |             xhr.open("POST", "/auth");
22 |             xhr.onload = function () {
23 |                 alert("Authorized!");
24 |                 authInformation = xhr.responseText;
25 |             };
26 |             xhr.onerror = function () {
27 |                 if (confirm("Error occurred, send again?")) {
28 |                     sendRequest(information);
29 |                 }
30 |             }
31 |             xhr.send(information);
32 |         }
33 |     }
34 | 
35 |     requestAuthentication("name=hello&password=world");
36 | }());
37 | </script>
38 | 


--------------------------------------------------------------------------------
/chapter-5/5-199_same_name_wrapper_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function wrap(func, wrapper) {
 5 |         return function() {
 6 |             var args = [func].concat(Array.prototype.slice.call(arguments));
 7 |             return wrapper.apply(this, args);
 8 |         };
 9 |     }
10 |     function existingFunction() {
11 |         console.log("Existing function is called with arguments");
12 |         console.log(arguments);
13 |     }
14 |     var wrappedFunction = wrap(existingFunction, function (func) {
15 |         console.log("Wrapper function is called with arguments");
16 |         console.log(arguments);
17 |         func.apply(this, Array.prototype.slice.call(arguments, 1));
18 |     });
19 |     console.log("1. Calling existing function");
20 |     existingFunction("First argument", "Second argument", "Third argument");
21 |     console.log("\n2. Calling wrapped function");
22 |     wrappedFunction("First argument", "Second argument", "Third argument");
23 | 
24 | 
25 |     (function () {
26 |         var existingFunction = wrappedFunction;
27 |         console.log("\n3. Calling wrapped existing function"); existingFunction("First argument", "Second argument", "Third argument");
28 |     }());
29 | 
30 | }());
31 | </script>
32 | 
33 | 


--------------------------------------------------------------------------------
/chapter-7/7-320_img_lazy_load.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <img width="640" height="480" class="lazyload" data-src="./large_image.jpg" />
 5 |     <img width="64" height="64" class="lazyload" data-src="./not_important_image.jpg" />
 6 | 
 7 |     <script>
 8 |     (function () {
 9 |         var previousOnload;
10 |         if (window.addEventListener) {
11 |             window.addEventListener("load", lazyloadImages); 
12 |         } else if (window.attachEvent) {
13 |             window.attachEvent("onload", lazyloadImages);
14 |         } else if (window.onload) {
15 |             previousOnload = window.onload; window.onload = function () {
16 |                 previousOnload.call();
17 |                 lazyloadImages();
18 |             }
19 |         } else {
20 |             window.onload = lazyloadImages; // this can be overwritten by another JS
21 |         }
22 | 
23 |         function lazyloadImages() {
24 |             var imgList = document.getElementsByClassName("lazyload"),
25 |                 length = imgList.length,
26 |                 i;
27 | 
28 |             for ( i = 0 ; i < length ; i++ ) {
29 |                 imgList[i].src = imgList[i].getAttribute("data-src");
30 |             }
31 |         }
32 |     }());
33 |     </script>
34 | </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/chapter-6/6-249_settimeout_2_seconds.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 |     <button id="addItem">
 4 |         Add New Input
 5 |     </button>
 6 |     <div id="items"></div>
 7 |     <script>
 8 |     (function () {
 9 |         var divItems = document.getElementById("items"),
10 |             buttonAddItem = document.getElementById("addItem"),
11 |             inputItem = document.createElement("input"),
12 |             divLog = document.getElementById("log");
13 | 
14 |         buttonAddItem.onclick = function () {
15 |             var inputCloneItem = inputItem.cloneNode(true),
16 |                 waitSeconds = 10; // Wait for 10 seconds
17 | 
18 |             inputCloneItem.value = "Give me focus"; divItems.appendChild(inputCloneItem);
19 |             console.log("Execute setTimeout at: \t" + Date.now());
20 |             setTimeout(function () {
21 |                 inputCloneItem.focus();
22 |                 console.log("Set focus at: \t\t\t" + Date.now())
23 |             }, 2000);
24 |             sleep(waitSeconds * 1000);
25 |         };
26 | 
27 |         function sleep(waitMilliseconds) {
28 |             var waitUntil = Date.now() + waitMilliseconds;
29 |             while(Date.now() < waitUntil) {
30 |                 ;
31 |             }
32 |         }
33 | 
34 |     }());
35 |     </script>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/chapter-5/5-217_compatibility_with_browser.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function getInternetExplorerVersion() {
 5 |         var rv = -1;
 6 |         if (navigator.appName == 'Microsoft Internet Explorer') {
 7 |             var ua = navigator.userAgent;
 8 |             var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
 9 |             if (/"MSIE ([0-9]{1,}[\.0-9]{0,})"/.exec(ua) != null) {
10 |                 rv = parseFloat( RegExp.$1 );
11 |             }
12 |         }
13 |         return rv;
14 |     }
15 | 
16 |     var ieVersion = getInternetExplorerVersion(),
17 |         addEventHandler,
18 |         removeEventhandler;
19 |     if (ieVersion !== -1 && ieVersion < 9) {
20 |         addEventHandler = function (dom, type, fn) {
21 |             dom.attachEvent( 'on'+type, function () {
22 |                 fn.call(dom, window.event); 
23 |             });
24 |         }
25 |         removeEventHandler = function (dom, type, fn) {
26 |             dom.detachEvent('on'+type, fn);
27 |         }
28 |     } else {
29 |         addEventHandler = function (dom, type, fn) {
30 |             dom.addEventListener(type, fn);
31 |         };
32 |         removeEventHandler = function (dom, type, fn) {
33 |             dom.removeEventListener(type, fn); };
34 |     }
35 | }());
36 | </script>
37 | 
38 | 


--------------------------------------------------------------------------------
/chapter-3/3-105_scope_chain.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="divMouseover">Mouse over Highlight</div>
 4 |     <div id="divFloatingContent">Floating Content</div>
 5 |     <script>
 6 |     (function () {
 7 |         var divMouseover = document.getElementById("divMouseover"),
 8 |             divFloatingContent = document.getElementById("divFloatingContent");
 9 | 
10 |         divMouseover.onmouseover = function () {
11 |             var xhr = new XMLHttpRequest();
12 |             divMouseover.style.backgroundColor = "#FF0000";
13 |             divMouseover.style.color = "white";
14 |             divMouseover.style.fontSize = "12px";
15 |             xhr.open("GET", "http://myserver.com/floating_contents");
16 |             xhr.onload = function () {
17 |                 divFloatingContent.innerHTML = xhr.responseText;
18 |                 divFloatingContent.style.display = "block";
19 |             };
20 |             xhr.send();
21 |         };
22 | 
23 |         divMouseover.onmouseout = function () {
24 |             divMouseover.style.backgroundColor = "#FFFFFF";
25 |             divMouseover.style.color = "black";
26 |             divMouseover.style.fontSize = "10px";
27 |             divFloatingContent.style.display = "none";
28 |         };
29 |     }());
30 |     </script>
31 | </body>
32 | </html>
33 | 
34 | 


--------------------------------------------------------------------------------
/chapter-6/6-272_dom_repaint.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     .default {
 6 |         width: 300px;
 7 |         background-color: lightgray;
 8 |         border: 1px solid black;
 9 |     }
10 | 
11 |     #floating {
12 |         position: absolute;
13 |         left: 350px;
14 |         top: 100px;
15 |         width: 100px;
16 |         height: 50px;
17 |         border: 1px solid black;
18 |     }
19 |     </style>
20 | </head>
21 | <body>
22 |     <div id="changeBackground" class="default">
23 |         &lt;div&gt;
24 |             Click to change my background color
25 |         &lt;/div&gt;
26 |     </div>
27 |     <div id="changeVisibility" class="default">
28 |         &lt;div&gt;
29 |             Click to make me disappear
30 |         &lt;/div&gt;
31 |         <div id="floating">Floating div</div>
32 |     </div>
33 |     <div id="fixedDiv" class="default">
34 |         &lt;div&gt;
35 |             I won't move
36 |         &lt;/div&gt;
37 |     </div>
38 |     <script>
39 |     (function () {
40 |         document.getElementById("changeBackground").addEventListener('click', function () {
41 |             this.style.backgroundColor = "black";
42 |             this.style.color = "white";
43 |         });
44 | 
45 |         document.getElementById("changeVisibility").addEventListener("click", function () {
46 |             this.style.visibility = "hidden"; 
47 |         });
48 |     }());
49 |     </script>
50 | </body>
51 | </html>
52 | 
53 | 


--------------------------------------------------------------------------------
/chapter-5/5-233_memoization_with_function_prototype.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     Function.prototype.memoize = function () {
 5 |         var _this = this,
 6 |             memo = {};
 7 |         return function () {
 8 |             var argsString = JSON.stringify(arguments),
 9 |                 returnValue;
10 |             if (memo.hasOwnProperty(argsString)) {
11 |                 return memo[argsString];
12 |             } else {
13 |                 returnValue = _this.apply(this, arguments);
14 |                 memo[argsString] = returnValue;
15 |                 return returnValue;
16 |             }
17 |         }
18 |     };
19 | 
20 |     function fibonacci(n) {
21 |         if (n === 0 || n === 1) {
22 |             return n;
23 |         } else {
24 |             return fibonacci(n - 1) + fibonacci(n - 2);
25 |         }
26 |     }
27 | 
28 |     var fibonacciMemo = fibonacci.memoize();
29 | 
30 |     var testNum = 10, start, end;
31 |     start = Date.now();
32 |     console.log(fibonacciMemo(testNum));
33 |     end = Date.now();
34 |     console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacciMemo(${testNum}) for the first time`);
35 | 
36 | 
37 |     start = Date.now();
38 |     console.log(fibonacciMemo(testNum));
39 |     end = Date.now();
40 |     console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacciMemo(${testNum}) for the second time`);
41 | }());
42 | </script>
43 | 
44 | 


--------------------------------------------------------------------------------
/chapter-6/6-300_memoization_dom_search.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <form id="myForm">
 5 |         <input type="text" name="firstName" id="firstName"/>
 6 |         <input type="text" name="middleName" id="middleName"/>
 7 |         <input type="text" name="lastName" id="lastName"/>
 8 |         <input type="submit" value="Submit"/>
 9 |     </form>
10 |     <script>
11 |     (function () {
12 |         var memo = {};
13 |         document.getElementById("myForm").onsubmit = function () {
14 |             var inputFirstName = getMemo("firstName"),
15 |                 inputMiddleName,
16 |                 inputLastName;
17 | 
18 |             if (inputFirstName.value === "") {
19 |                 alert("First name is mandatory");
20 |                 inputFirstName.focus();
21 |                 return false;
22 |             }
23 | 
24 |             inputLastName = getMemo("lastName");
25 |             if (inputLastName.value === "") {
26 |                 alert("Last name is mandatory");
27 |                 inputLastName.focus();
28 |                 return false;
29 |             }
30 |             inputMiddleName = getMemo("middleName");
31 | 
32 |             alert("Hello, " +inputFirstName.value + " " + inputMiddleName.value + " " + inputLastName.value);
33 |         }
34 | 
35 |         function getMemo(id) {
36 |             memo[id] = memo[id] || document.getElementById(id);
37 |             return memo[id];
38 |         }
39 |     }());
40 |     </script>
41 | </body>
42 | </html>
43 | 
44 | 


--------------------------------------------------------------------------------
/chapter-3/3-82_how_to_loop_global.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <button id="button1">Button1</button>
 4 |     <button id="button2">Button2</button>
 5 |     <button id="button3">Button3</button>
 6 |     <button id="button4">Button4</button>
 7 | 
 8 |     <script>
 9 | 
10 |     // Naive way
11 |     var button1 = document.getElementById("button1");
12 |     button1.dosomething = "Do something same with many buttons, clicked button1";
13 | 
14 |     var button2 = document.getElementById("button2");
15 |     button2.dosomething = "Do something same with many buttons, clicked button2";
16 | 
17 |     var button3 = document.getElementById("button3");
18 |     button3.dosomething = "Do something same with many buttons, clicked button3";
19 | 
20 |     var button4 = document.getElementById("button4");
21 |     button4.dosomething = "Do something same with many buttons, clicked button4";
22 | 
23 | 
24 |     // Using loop with eval
25 |     var i;
26 |     for (i = 1 ; i < 5 ; i++) {
27 |         eval("var buttonEval" + i + " = document.getElementById('button" + i + "');");
28 |         eval("buttonEval" + i + ".dosomething = 'Do something same with eval, clicked button" + i + "';");
29 |     }
30 | 
31 | 
32 |     // Using loop with window
33 |     var i;
34 |     for (i = 1 ; i < 5 ; i++) {
35 |         window["button" + i] = document.getElementById("button" + i);
36 |         window["button" + i].dosomething = "Do something same without eval, clicked button" + i;
37 |     }
38 | 
39 |     </script>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/chapter-6/6-275_dom_reflow.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     .default {
 6 |         width: 300px;
 7 |         background-color: lightgray;
 8 |         border: 1px solid black;
 9 |         float: left;
10 |     }
11 | 
12 |     .wide-div {
13 |         width: 400px;
14 |     }
15 | 
16 |     .invisible {
17 |         display: none;
18 |     }
19 | 
20 |     #floating {
21 |         position: absolute;
22 |         left: 350px;
23 |         top: 100px;
24 |         width: 100px;
25 |         height: 50px;
26 |         border: 1px solid black;
27 |     }
28 | 
29 | </style>
30 | </head>
31 | <body>
32 |     <div id="changeBackground" class="default">
33 |         &lt;div&gt;
34 |             Click to change my width
35 |         &lt;/div&gt;
36 |     </div>
37 |     <div id="changeVisibility" class="default">
38 |         &lt;div&gt;
39 |             Click to make me disappear
40 |         &lt;/div&gt;
41 |         <div id="floating">Floating div</div>
42 |     </div>
43 |     <div id="fixedDiv" class="default">
44 |         &lt;div&gt;
45 |             I will move
46 |         &lt;/div&gt;
47 |     </div>
48 | <script>
49 | (function () {
50 |     document.getElementById("changeBackground").addEventListener('click', function () {
51 |         this.classList.toggle("wide-div");
52 |     });
53 | 
54 |     document.getElementById("changeVisibility").addEventListener("click", function () {
55 |         this.classList.toggle("invisible");
56 |     });
57 | }());
58 | </script>
59 | </body>
60 | </html>
61 | 
62 | 


--------------------------------------------------------------------------------
/chapter-7/7-317_script_lazy_load.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <img src="./my_important_image.jpg" width="300" height="200"></img>
 5 |     <div>I need to show this important information as fast as possible</div> 
 6 | 
 7 |     <script>
 8 |     (function () {
 9 |         var previousOnload;
10 | 
11 |         if (window.addEventListener) {
12 |             window.addEventListener("load", lazyload);
13 |         } else if (window.attachEvent) {
14 |             window.attachEvent("onload", lazyload);
15 |         } else if (window.onload) {
16 |             previousOnload = window.onload;
17 |             window.onload = function () {
18 |                 previousOnload.call();
19 |                 lazyload();
20 |             }
21 |         } else {
22 |             window.onload = lazyload; // this can be overwritten by another JS
23 |         }
24 | 
25 |         function lazyload() {
26 |             var scriptTag = document.createElement("script"),
27 |                 headTag = document.getElementsByTagName("head")[0];
28 |             scriptTag.setAttribute("src", "./sleep.js");
29 |             scriptTag.setAttribute("type", "text/javascript");
30 |             scriptTag.setAttribute("async", "true");
31 | 
32 |             // way around if there is no head tag
33 |             if (!headTag) {
34 |                 headTag = document.getElementsByTagName("script")[0].parentNode;
35 |             }
36 |             headTag.appendChild(scriptTag);
37 |         }
38 |     }());
39 |     </script>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/chapter-6/6-252_same_settimeout.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 |     <button id="addItem">
 4 |         Add New Input
 5 |     </button>
 6 |     <div id="items"></div>
 7 |     <script>
 8 |     (function () {
 9 |         var divItems = document.getElementById("items"),
10 |             buttonAddItem = document.getElementById("addItem"),
11 |             inputItem = document.createElement("input"),
12 |             divLog = document.getElementById("log");
13 | 
14 |         buttonAddItem.onclick = function () {
15 |             var inputCloneItem = inputItem.cloneNode(true),
16 |                 waitSeconds = 10; // Wait for 10 seconds
17 | 
18 |             inputCloneItem.value = "Give me focus";
19 |             divItems.appendChild(inputCloneItem);
20 |             console.log("Onclick function invoked at: \t" + Date.now());
21 |             setTimeout(function () {
22 |                 console.log("1st function invoked at: \t\t" + Date.now())
23 |                 sleep(waitSeconds*1000);
24 |             }, 2000);
25 | 
26 |             setTimeout(function () {
27 |                 inputCloneItem.focus();
28 |                 console.log("2nd function invoked at: \t\t" + Date.now())
29 |             }, 2000);
30 | 
31 |             sleep(waitSeconds*1000);
32 |         };
33 | 
34 |         function sleep(waitMilliseconds) {
35 |             var waitUntil = Date.now() + waitMilliseconds;
36 |             while(Date.now() < waitUntil) {
37 |                 ;
38 |             }
39 |         }
40 | 
41 |     }());
42 |     </script>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/chapter-3/3-110_set_style_variable.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="divMouseover">Mouse over Highlight</div>
 4 |     <div id="divFloatingContent">Floating Content</div>
 5 | 
 6 |     <script>
 7 |     (function () {
 8 |         var divMouseover = document.getElementById("divMouseover"),
 9 |             divFloatingContent = document.getElementById("divFloatingContent");
10 | 
11 |         divMouseover.onmouseover = function () {
12 |             var xhr = new XMLHttpRequest(),
13 |                 divMouseoverStyle = divMouseover.style;
14 | 
15 |             divMouseoverStyle.backgroundColor = "#FF0000";
16 |             divMouseoverStyle.color = "white";
17 |             divMouseoverStyle.fontSize = "12px";
18 | 
19 |             xhr.open("GET", "http://myserver.com/floating_contents");
20 |             xhr.onload = function () {
21 |                 var localDivFloatingContent = divFloatingContent;
22 |                 localDivFloatingContent.innerHTML = xhr.responseText; // #1
23 |                 localDivFloatingContent.style.display = "block";
24 |             };
25 |             xhr.send();
26 |         };
27 | 
28 |         divMouseover.onmouseout = function () {
29 |             var divMouseoverStyle = divMouseover.style;
30 | 
31 |             divMouseoverStyle.backgroundColor = "#FFFFFF";
32 |             divMouseoverStyle.color = "black";
33 |             divMouseoverStyle.fontSize = "10px";
34 |             divFloatingContent.style.display = "none";
35 |         };
36 |     }());
37 |     </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/chapter-5/5-181_event_delegate_with_id.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <video style="width:480px" id="videoBunny" src="http://media.w3.org/2010/05/bunny/movie.ogv">
 5 |     </video>
 6 |     <div id="controlPanel">
 7 |         <button id="play">Play</button>
 8 |         <button id="pause">Pause</button>
 9 |         <button id="volumeUp">Volume+</button>
10 |         <button id="volumeDown">Volume-</button>
11 |     </div>
12 |     <script>
13 |     (function () {
14 |         var divControlPanel = document.getElementById("controlPanel"),
15 |             videoBunny = document.getElementById("videoBunny");
16 |         divControlPanel.addEventListener("click", function (e) {
17 |             var target = e.target || e.srcElement;
18 |             if (target.id === "play") {
19 |                 videoBunny.play();
20 |             } else if (target.id === "pause") {
21 |                 videoBunny.pause();
22 |             } else if (target.id === "volumeUp") {
23 |                 if (videoBunny.volume <= 0.9) {
24 |                     videoBunny.volume += 0.1;
25 |                 } else {
26 |                     videoBunny.volume = 1;
27 |                 }
28 |             } else if (target.id === "volumeDown") {
29 |                 if (videoBunny.volume >= 0.1) {
30 |                     videoBunny.volume -= 0.1;
31 |                 } else {
32 |                     videoBunny.volume = 0;
33 |                 }
34 |             }
35 |             event.stopPropagation();
36 |         }, true);
37 |     }());
38 |     </script>
39 | </body>
40 | </html>
41 | 
42 | 


--------------------------------------------------------------------------------
/chapter-6/6-301_cache_dom_variable.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <div id="container"></div>
 5 |     <script>
 6 | (function () {
 7 |     var itemList = ["Javascript", "Java", "C", "C++", "Python", "Ruby"],
 8 |         divItem,
 9 |         divItemList = [],
10 |         divContainer = document.getElementById("container"),
11 |         i,
12 |         length = itemList.length;
13 | 
14 |     for (i = 0 ; i < length ; i++) {
15 |         divItem = document.createElement("div");
16 |         divItem.appendChild(document.createTextNode(itemList[i]));
17 |         divItem.addEventListener("click", (function (name) {
18 |             return function () {
19 |                 var divClickedItem = divItemList[name],
20 |                     datasetClickedItem = divClickedItem.dataset,
21 |                     styleClickedItem = divClickedItem.style;
22 |                 if (datasetClickedItem.selected === "true") {
23 |                     styleClickedItem.backgroundColor = "#FFFFFF";
24 |                     styleClickedItem.color = "#000000";
25 |                     datasetClickedItem.selected = "false";
26 |                 } else {
27 |                     styleClickedItem.backgroundColor = "#000000";
28 |                     styleClickedItem.color = "#FFFFFF";
29 |                     datasetClickedItem.selected = "true";
30 |                 }
31 |             };
32 |         }(itemList[i])));
33 | 
34 |         divItemList[itemList[i]] = divItem;
35 |         divContainer.appendChild(divItem);
36 |     }
37 | }());
38 | </script>
39 | </body>
40 | </html>
41 | 
42 | 


--------------------------------------------------------------------------------
/chapter-3/3-108_shifting_scope_chain_to_local.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="divMouseover">Mouse over Highlight</div>
 4 |     <div id="divFloatingContent">Floating Content</div>
 5 | 
 6 |     <script>
 7 |     (function () {
 8 |         var divMouseover = document.getElementById("divMouseover"),
 9 |             divFloatingContent = document.getElementById("divFloatingContent");
10 | 
11 |         divMouseover.onmouseover = function () {
12 |             var xhr = new XMLHttpRequest(),
13 |                 localDivMouseover = divMouseover;
14 |             localDivMouseover.style.backgroundColor = "#FF0000";
15 |             localDivMouseover.style.color = "white";
16 |             localDivMouseover.style.fontSize = "12px";
17 | 
18 |             xhr.open("GET", "http://myserver.com/floating_contents");
19 |             xhr.onload = function () {
20 |                 var localDivFloatingContent = divFloatingContent;
21 | 
22 |                 localDivFloatingContent.innerHTML = xhr.responseText; // #1
23 |                 localDivFloatingContent.style.display = "block";
24 |             };
25 |             xhr.send();
26 |         };
27 | 
28 |         divMouseover.onmouseout = function () {
29 |             var localDivMouseover = divMouseover;
30 | 
31 |             localDivMouseover.style.backgroundColor = "#FFFFFF";
32 |             localDivMouseover.style.color = "black";
33 |             localDivMouseover.style.fontSize = "10px";
34 |             divFloatingContent.style.display = "none";
35 |         };
36 |     }());
37 |     </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/chapter-8/8-379_makefile:
--------------------------------------------------------------------------------
 1 | project = vjgraph
 2 | target-js-min = ${project}-min.js
 3 | target-css-min = ${project}-min.css
 4 | target-js-full = ${project}-full.js
 5 | target-css-full = ${project}-full.css
 6 | 
 7 | targets =   ${target-js-min} \
 8 |             ${target-js-min}.gz \
 9 |             ${target-js-full} \
10 |             ${target-css-min} \
11 |             ${target-css-min}.gz \
12 |             ${target-css-full}
13 | 
14 | #Source directory
15 | js_dir = ./js/
16 | css_dir = ./css/
17 | 
18 | #Dependent libraries
19 | dependencies = ${js_dir}excanvas.min.js\
20 | ${js_dir}util.js
21 | 
22 | #Javscript files
23 | sources =   ${js_dir}VJGraph.js\
24 |             ${js_dir}common.js
25 | #All files
26 | js_files = ${dependencies} ${sources}
27 | 
28 | #Build all
29 | all: ${target-js-full} ${target-js-min} ${target-css-full} ${target-css-min}
30 | 
31 | #Concatnate all files
32 | ${target-js-full}: ${js_files}
33 |     cat > $@ $^
34 | 
35 | ${target-css-full}: ${css_files}
36 |     cat > $@ $^
37 | 
38 | #Minification with closure compiler
39 | ${target-js-min}: ${target-js-full}
40 |     java -jar compiler.jar --js $^ --js_output_file $@
41 |     gzip -c -9 $@ > $@.gz
42 | 
43 | ${target-css-min}: ${target-css-full}
44 |     java -jar yuicompressor-2.4.8.jar $^ -o $@
45 | 
46 | clean:
47 |     rm -rf ${targets}
48 | 
49 | commit:
50 |     git add ${targets}
51 |     git commit -a -m "Version: x.x.x"
52 |     git push origin master
53 | 
54 | deploy:
55 |     git push production master
56 | 
57 | dev:
58 |     git push develop master
59 | 
60 | install: commit deploy dev
61 | 


--------------------------------------------------------------------------------
/chapter-4/4-124_prototype.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | function Person(name, blog) {
 4 |     this.name = name;
 5 |     this.blog = blog;
 6 | }
 7 | Person.prototype.getName = function () {
 8 |     return this.name;
 9 | };
10 | Person.prototype.getBlog = function () {
11 |     return this.blog;
12 | };
13 | 
14 | var unikys = new Person("unikys", "unikys.tistory.com");
15 | var stranger = new Person("stranger", "www.google.com");
16 | 
17 | console.log(unikys.getName()); // === "unikys"
18 | console.log(unikys.getBlog()); // === "unikys.tistory.com"
19 | console.log(stranger.getName()); // === "stranger"
20 | console.log(stranger.getBlog()); // === "www.google.com"
21 | 
22 | 
23 | // Adding a function to prototype
24 | Person.prototype.introduce = function () {
25 |     console.log("Hi!, my name is " + this.name + ", please visit my blog " + this.blog);
26 | };
27 | unikys.introduce(); // === "Hi!, my name is unikys, please visit my blog unikys.tistory.com"
28 | 
29 | 
30 | // Changing the function in prototype
31 | Person.prototype.introduce = function () {
32 |     console.log("Hello, " + this.name + "!");
33 | };
34 | unikys.introduce(); // === "Hello, unikys!"
35 | 
36 | 
37 | // Changing the variable in prototype
38 | Person.prototype.gender = "male";
39 | 
40 | console.log(unikys.gender); // === "male"
41 | console.log(stranger.gender); // === "male"
42 | 
43 | stranger.gender = "female";
44 | console.log(stranger.gender); // === "female"
45 | console.log(unikys.gender); // === "male" (female이 아니다?!);
46 | console.log(Person.prototype.gender); // === "male" (이것도 female이 아니다?!)
47 | 
48 | 
49 | 
50 | </script>
51 | 


--------------------------------------------------------------------------------
/chapter-2/2-51_closer_practical_example.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="wrapper">
 4 |         <button data-cb="1">Add div</button>
 5 |         <button data-cb="2">Add img</button>
 6 |         <button data-cb="delete">Clear</button>
 7 |         Adding below...<br/>
 8 |         <div id="appendDiv"></div>
 9 |     </div>
10 | 
11 |     <script>
12 |     (function () {
13 |         var appendDiv = document.getElementById("appendDiv");
14 |         document.getElementById("wrapper").addEventListener("click", append);
15 | 
16 |         function append(e) {
17 |             var target = e.target || e.srcElement || event.srcElement;
18 |             var callbackFunction = callback[target.getAttribute("data-cb")];
19 | 
20 |             appendDiv.appendChild(callbackFunction());
21 |         };
22 | 
23 |         var callback = { 
24 |             "1": (function () {
25 |                 var div = document.createElement("div");
26 | 
27 |                 div.innerHTML = "Adding new div";
28 |                 return function () {
29 |                     return div.cloneNode(true);
30 |                 }
31 |             }()), 
32 |             "2": (function () {
33 |                 var img = document.createElement("img");
34 | 
35 |                 img.src="http://cfile9.uf.tistory.com/image/011F554E50FD140F2B27CA";
36 |                 return function () {
37 |                     return img.cloneNode(true);
38 |                 }
39 |             }()),
40 |             "delete":function () {
41 |                 appendDiv.innerHTML = "";
42 |                 return document.createTextNode("Cleared");
43 |             }
44 |         };
45 |     }());
46 |     </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/chapter-5/5-187_proxy_with_event_delegation.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <video style="width:480px" id="videoBunny" src="http://media.w3.org/2010/05/bunny/movie.ogv">
 5 |     </video>
 6 |     <div id="controlPanel">
 7 |         <button id="play">Play</button>
 8 |         <button id="pause">Pause</button>
 9 |         <button id="volumeUp">Volume+</button>
10 |         <button id="volumeDown">Volume-</button>
11 |     </div>
12 |     <script>
13 | (function () {
14 |     var divControlPanel = document.getElementById("controlPanel"),
15 |         videoBunny = document.getElementById("videoBunny"),
16 |         proxyClickEventHandler = {
17 |             "play": function () {
18 |                 videoBunny.play();
19 |             },
20 |             "pause": function () {
21 |                 videoBunny.pause();
22 |             },
23 |             "volumeUp": function () {
24 |                 if (videoBunny.volume <= 0.9) {
25 |                     videoBunny.volume += 0.1;
26 |                 } else {
27 |                     videoBunny.volume = 1;
28 |                 }
29 |             },
30 |             "volumeDown": function () {
31 |                 if (videoBunny.volume >= 0.1) {
32 |                     videoBunny.volume -= 0.1;
33 |                 } else {
34 |                     videoBunny.volume = 0;
35 |                 }
36 |             }
37 |         };
38 | 
39 |     divControlPanel.addEventListener("click", function (e) {
40 |         var target = e.target || e.srcElement;
41 |         if (proxyClickEventHandler.hasOwnProperty(target.id)) {
42 |             proxyClickEventHandler[target.id].call();
43 |         }
44 |     }, true);
45 | }());
46 | </script>
47 | </body>
48 | </html>
49 | 
50 | 


--------------------------------------------------------------------------------
/chapter-3/3-73_local_with_closer.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="wrapper">
 4 |         <button data-cb="1">Add div</button>
 5 |         <button data-cb="2">Add img</button>
 6 |         <button data-cb="delete">Clear</button>
 7 |         Adding below...<br/>
 8 |         <div id="appendDiv"></div>
 9 |     </div>
10 | 
11 |     <script>
12 |     (function () {
13 |         var appendDiv = document.getElementById("appendDiv");
14 |             callback = { 
15 |                 "1": (function () {
16 |                     var div = document.createElement("div");
17 | 
18 |                     div.innerHTML = "#1";
19 |                     return function () {
20 |                         return div.cloneNode(true);
21 |                     }
22 |                 }()), 
23 |                 "2": (function () {
24 |                     var img = document.createElement("img");
25 | 
26 |                     img.src="http://cfile24.uf.tistory.com/image/203E5A424F471E3025FA01";
27 |                     return function () {
28 |                         return img.cloneNode(true);
29 |                     }
30 |                 }()),
31 |                 "delete":function () {
32 |                     appendDiv.innerHTML = "";
33 |                     return document.createTextNode("Cleared");
34 |                 }
35 |             };
36 | 
37 | 
38 |         function append(e) {
39 |             var target = e.target || e.srcElement || event.srcElement,
40 |                 callbackFunction = callback[target.getAttribute("data-cb")];
41 | 
42 |             appendDiv.appendChild(callbackFunction());
43 |         };
44 | 
45 |         document.getElementById("wrapper").addEventListener("click", append);
46 | 
47 |     }());
48 |     </script>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/chapter-5/5-184_event_delegate_test_bubbling.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <video style="width:480px" id="videoBunny" src="http://media.w3.org/2010/05/bunny/movie.ogv">
 5 |     </video>
 6 |     <div id="controlPanel">
 7 |         <button id="play">Play</button>
 8 |         <button id="pause">Pause</button>
 9 |         <button id="volumeUp">Volume+</button>
10 |         <button id="volumeDown">Volume-</button>
11 |     </div>
12 |     <script>
13 |     (function () {
14 |         var divControlPanel = document.getElementById("controlPanel"),
15 |             videoBunny = document.getElementById("videoBunny");
16 |         divControlPanel.addEventListener("click", function (e) {
17 |             var target = e.target || e.srcElement;
18 |             if (target.id === "play") {
19 |                 videoBunny.play();
20 |             } else if (target.id === "pause") {
21 |                 videoBunny.pause();
22 |             } else if (target.id === "volumeUp") {
23 |                 if (videoBunny.volume <= 0.9) {
24 |                     videoBunny.volume += 0.1;
25 |                 } else {
26 |                     videoBunny.volume = 1;
27 |                 }
28 |             } else if (target.id === "volumeDown") {
29 |                 if (videoBunny.volume >= 0.1) {
30 |                     videoBunny.volume -= 0.1;
31 |                 } else {
32 |                     videoBunny.volume = 0;
33 |                 }
34 |             }
35 |             event.stopPropagation();
36 |         }, true);
37 |         divControlPanel.addEventListener("click", function () {
38 |             alert("Bubbling event listener");
39 |         });
40 |         document.getElementById("play").addEventListener("click", function () {
41 |             alert("Target event listener");
42 |         });
43 |     }());
44 |     </script>
45 | </body>
46 | </html>
47 | 
48 | 


--------------------------------------------------------------------------------
/chapter-6/6-255_setinterval_thread_queue.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 |     <button id="addItem">
 4 |         Add New Input
 5 |     </button>
 6 |     <div id="items"></div>
 7 |     <script>
 8 |     (function () {
 9 |         var divItems = document.getElementById("items"),
10 |             buttonAddItem = document.getElementById("addItem"),
11 |             inputItem = document.createElement("input"),
12 |             divLog = document.getElementById("log");
13 | 
14 |         buttonAddItem.onclick = function () {
15 |             var inputCloneItem = inputItem.cloneNode(true),
16 |                 waitSeconds = 10,  // Wait for 10 seconds
17 |                 intervalCount = 0,
18 |                 intervalExecutionCount = 3,
19 |                 intervalId; 
20 | 
21 |             inputCloneItem.value = "Give me focus";
22 |             divItems.appendChild(inputCloneItem);
23 |             console.log("Onclick function invoked at: \t" + Date.now());
24 | 
25 |             intervalId = setInterval(function () {
26 |                 if (++intervalCount > intervalExecutionCount) {
27 |                     clearInterval(intervalId);
28 |                     return;
29 |                 }
30 |                 console.log("#" + intervalCount + " interval invoked at: \t\t" + Date.now());
31 |             }, 2000);
32 | 
33 |             setTimeout(function () {
34 |                 inputCloneItem.focus();
35 |                 console.log("Focus given at: \t\t\t\t" + Date.now());
36 |                 sleep(waitSeconds*1000);
37 |             }, 5000);
38 | 
39 |             sleep(waitSeconds*1000); 
40 |         };
41 | 
42 |         function sleep(waitMilliseconds) {
43 |             var waitUntil = Date.now() + waitMilliseconds;
44 |             while(Date.now() < waitUntil) {
45 |                 ;
46 |             }
47 |         }
48 |     }());
49 |     </script>
50 | </html>
51 | 
52 | 


--------------------------------------------------------------------------------
/chapter-6/6-295_change_background.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <div id="guestbook">
 5 |         <table>
 6 |             <thead>
 7 |                 <td>Name</td>
 8 |                 <td>Subject</td>
 9 |                 <td>Contents</td>
10 |             </thead>
11 |             <tbody id="guestbookTbody">
12 |             </tbody>
13 |         </table>
14 |     </div>
15 |     <div>
16 |         <form id="writeForm">
17 |             <label>Name: <input type="text" id="name"/></label>
18 |             <label>Subject: <input type="text" id="subject"/></label>
19 |             <label>Contents: <textarea id="contents"></textarea></label>
20 |             <input type="submit"/>
21 |         </form>
22 |     </div>
23 | <script>
24 | (function () {
25 |     var inputName = document.getElementById("name"),
26 |         inputSubject = document.getElementById("subject"),
27 |         inputContents = document.getElementById("contents"),
28 |         divGuestbook = document.getElementById("guestbook"),
29 |         tbodyGuestbook = document.getElementById("guestbookTbody");
30 | 
31 |     document.getElementById("writeForm").addEventListener("submit", function () {
32 |         var trGuestbook = document.createElement("tr"),
33 |             tdName = document.createElement("td"),
34 |             tdSubject = document.createElement("td"),
35 |             tdContents = document.createElement("td");
36 | 
37 |         tdName.innerHTML = inputName.value;
38 |         tdSubject.innerHTML = inputSubject.value;
39 |         tdContents.innerHTML = inputContents.value;
40 |         trGuestbook.appendChild(tdName);
41 |         trGuestbook.appendChild(tdSubject);
42 |         trGuestbook.appendChild(tdContents);
43 | 
44 |         tbodyGuestbook.appendChild(trGuestbook);
45 | 
46 |         event.returnValue = false;
47 |         return false;
48 |     });
49 | }());
50 | </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/chapter-7/7-323_img_lazy_load_background.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     .lazyload {
 6 |         background-image: url("./loading.gif");
 7 |         background-size: 64px 64px;
 8 |         background-repeat: no-repeat;
 9 |         background-position: center;
10 |     }
11 |     </style>
12 | </head>
13 | <body>
14 |     <img width="480" height="320" class="lazyload" data-src="./large_image.jpg" />
15 |     <img width="64" height="64" class="lazyload" data-src="./not_important_image.jpg" />
16 |     <script>
17 | (function () {
18 |     var previousOnload;
19 |     if (window.addEventListener) {
20 |         window.addEventListener("load", lazyloadImages);
21 |     } else if (window.attachEvent) {
22 |         window.attachEvent("onload", lazyloadImages);
23 |     } else if (window.onload) {
24 |         previousOnload = window.onload;
25 |         window.onload = function () {
26 |             previousOnload.call();
27 |             lazyloadImages();
28 |         }
29 |     } else {
30 |         window.onload = lazyloadImages; // this can be overwritten by another JS
31 |     }
32 | 
33 |     function lazyloadImages() {
34 |         var imgList = document.getElementsByClassName("lazyload"),
35 |             length = imgList.length,
36 |             i;
37 | 
38 |         for ( i = 0 ; i < length ; i++ ) {
39 |             (function (imgTag) {
40 |                 var imgBackground = document.createElement("img");
41 |                 imgBackground.setAttribute("src", imgTag.getAttribute("data-src"));
42 |                 imgBackground.setAttribute("width", imgTag.getAttribute("width"));
43 |                 imgBackground.setAttribute("height", imgTag.getAttribute("height"));
44 |                 imgBackground.onload = function () {
45 |                     imgTag.parentNode.replaceChild(imgBackground, imgTag);
46 |                 };
47 |             }(imgList[i]));
48 |         }
49 |     }
50 | }()); </script>
51 | </body>
52 | </html>
53 | 
54 | 


--------------------------------------------------------------------------------
/chapter-6/6-293_changing_display.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <div id="guestbook">
 5 |         <table>
 6 |             <thead>
 7 |                 <td>Name</td>
 8 |                 <td>Subject</td>
 9 |                 <td>Contents</td>
10 |             </thead>
11 |             <tbody id="guestbookTbody">
12 |             </tbody>
13 |         </table>
14 |     </div>
15 |     <div>
16 |         <form id="writeForm">
17 |             <label>Name: <input type="text" id="name"/></label>
18 |             <label>Subject: <input type="text" id="subject"/></label>
19 |             <label>Contents: <textarea id="contents"></textarea></label>
20 |             <input type="submit"/>
21 |         </form>
22 |     </div>
23 |     <script>
24 | (function () {
25 |     var inputName = document.getElementById("name"),
26 |         inputSubject = document.getElementById("subject"),
27 |         inputContents = document.getElementById("contents"),
28 |         divGuestbook = document.getElementById("guestbook"),
29 |         tbodyGuestbook = document.getElementById("guestbookTbody");
30 | 
31 |     document.getElementById("writeForm").addEventListener("submit", function () {
32 |         var trGuestbook = document.createElement("tr"),
33 |             tdName = document.createElement("td"),
34 |             tdSubject = document.createElement("td"),
35 |             tdContents = document.createElement("td");
36 | 
37 |         divGuestbook.style.display = "none";
38 | 
39 |         tbodyGuestbook.appendChild(trGuestbook);
40 |         trGuestbook.appendChild(tdName);
41 |         trGuestbook.appendChild(tdSubject);
42 |         trGuestbook.appendChild(tdContents);
43 |         tdName.innerHTML = inputName.value;
44 |         tdSubject.innerHTML = inputSubject.value;
45 |         tdContents.innerHTML = inputContents.value;
46 | 
47 |         divGuestbook.style.display = "block";
48 | 
49 |         event.returnValue = false;
50 |         return false;
51 |     });
52 | }());
53 | </script>
54 | </body>
55 | </html>
56 | 
57 | 
58 | 


--------------------------------------------------------------------------------
/chapter-6/6-290_dom_clone.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <div id="guestbook">
 5 |         <table>
 6 |             <thead>
 7 |                 <td>Name</td>
 8 |                 <td>Subject</td>
 9 |                 <td>Contents</td>
10 |             </thead>
11 |             <tbody id="guestbookTbody">
12 |             </tbody>
13 |         </table>
14 |     </div>
15 |     <div>
16 |         <form id="writeForm">
17 |             <label>Name: <input type="text" id="name"/></label>
18 |             <label>Subject: <input type="text" id="subject"/></label>
19 |             <label>Contents: <textarea id="contents"></textarea></label>
20 |             <input type="submit"/>
21 |         </form>
22 |     </div>
23 |     <script>
24 |     (function () {
25 |         var inputName = document.getElementById("name"),
26 |             inputSubject = document.getElementById("subject"),
27 |             inputContents = document.getElementById("contents"),
28 |             tbodyGuestbook = document.getElementById("guestbookTbody"),
29 |             fragGuestbook = document.createDocumentFragment(),
30 |             trGuestbook = document.createElement("tr"),
31 |             tdName = document.createElement("td"),
32 |             tdSubject = document.createElement("td"),
33 |             tdContents = document.createElement("td");
34 | 
35 |         fragGuestbook.appendChild(trGuestbook);
36 |         trGuestbook.appendChild(tdName);
37 |         trGuestbook.appendChild(tdSubject);
38 |         trGuestbook.appendChild(tdContents);
39 | 
40 |         document.getElementById("writeForm").addEventListener("submit", function () {
41 |             tdName.innerHTML = inputName.value;
42 |             tdSubject.innerHTML = inputSubject.value;
43 |             tdContents.innerHTML = inputContents.value;
44 | 
45 |             tbodyGuestbook.appendChild(fragGuestbook.cloneNode(true));
46 |             event.returnValue = false;
47 |             return false;
48 |         });
49 |     }());
50 |     </script>
51 | </body>
52 | </html>
53 | 
54 | 


--------------------------------------------------------------------------------
/chapter-5/5-194_aggregating_requests_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #chatLog {
 6 |         border:1px solid black;
 7 |         width: 200px;
 8 |         height: 200px;
 9 |         overflow-y: scroll;
10 |     }
11 |     </style>
12 | </head>
13 | <body>
14 |     <div id="chatLog"></div>
15 |     <form id="formChat">
16 |         <input type="text" id="inputChat"></input>
17 |         <input type="submit" value="send"></input>
18 |     </form>
19 |     <script>
20 |     (function () {
21 |         var divChatLog = document.getElementById("chatLog"),
22 |             formChat = document.getElementById("formChat"),
23 |             inputChat = document.getElementById("inputChat"),
24 |             isPending = false,
25 |             requestChat = [];
26 | 
27 |         formChat.addEventListener("submit", function () {
28 |             proxySendChat(inputChat.value);
29 |             inputChat.value = "";
30 |             event.returnValue = false;
31 |             return false;
32 |         });
33 | 
34 |         function proxySendChat(chat) {
35 |             if (isPending === true) {
36 |                 requestChat.push(chat);
37 |             } else {
38 |                 sendChatRequest([chat]);
39 |             }
40 |         }
41 |         function sendChatRequest(chats) {
42 |             var xhr = new XMLHttpRequest();
43 |             xhr.open("POST", "./send_chat.php", true);
44 |             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
45 |             isPending = true;
46 |             xhr.onload = function () {
47 |                 var pChat = document.createElement("p");
48 |                 pChat.innerHTML = xhr.responseText;
49 |                 divChatLog.appendChild(pChat);
50 |                 if (requestChat.length > 0) {
51 |                     sendChatRequest(requestChat);
52 |                     requestChat = [];
53 |                 } else {
54 |                     isPending = false;
55 |                 }
56 |             };
57 |             xhr.send("chats=" + encodeURIComponent(JSON.stringify(chats)));
58 |         }
59 | 
60 |     }());
61 |     </script>
62 | </body>
63 | </html>
64 | 
65 | 


--------------------------------------------------------------------------------
/chapter-5/5-225_initialization_with_self_defining_function.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #commentWrapper {
 6 |         width: 200px;
 7 |     }
 8 |     .comment {
 9 |         width: 150px;
10 |         display: inline-block;
11 |     }
12 |     .name {
13 |         width: 40px;
14 |         display: inline-block;
15 |     }
16 |     </style>
17 | </head>
18 | <body>
19 |     <div id="commentWrapper">
20 |         <div>
21 |             <div class="comment">Comment</div>
22 |             <div class="name">Name</div>
23 |         </div>
24 |     </div>
25 | 
26 |     <form id="formComment">
27 |         <label>Comment: <input type="text" id="comment"></input></label>
28 |         <label>Name: <input type="text" id="name"></input></label>
29 |         <input type="submit"></input>
30 |     </form>
31 | 
32 |     <script>
33 |     (function () {
34 |         var addComment = function () {
35 |             var divCommentWrapper = document.getElementById("commentWrapper"),
36 |                 divCommentRow = document.createElement("div"),
37 |                 divComment = document.createElement("div"),
38 |                 divName = document.createElement("div"),
39 |                 inputComment = document.getElementById("comment"),
40 |                 inputName = document.getElementById("name");
41 | 
42 |             divComment.className = "comment";
43 |             divName.className = "name";
44 |             divCommentRow.appendChild(divComment);
45 |             divCommentRow.appendChild(divName);
46 | 
47 |             addComment = function () {
48 |                 divComment.innerHTML = inputComment.value;
49 |                 divName.innerHTML = inputName.value;
50 |                 inputComment.value = "";
51 |                 inputName.value = "";
52 | 
53 |                 divCommentWrapper.appendChild(divCommentRow.cloneNode(true));
54 |             };
55 |             addComment();
56 |         };
57 |         document.getElementById("formComment").addEventListener("submit", function () {
58 |             addComment();
59 |             event.returnValue = false;
60 |             return false;
61 |         });
62 |     }());
63 |     </script>
64 | </body>
65 | </html>
66 | 
67 | 


--------------------------------------------------------------------------------
/chapter-5/5-212_decorator_with_proxy_for_monitoring.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <script>
 4 | (function () {
 5 |     var monitorTool,
 6 |         car,
 7 |         wrapperFunction;
 8 | 
 9 |     monitorTool = (function () {
10 |         var functionSequence = [];
11 |         return {
12 |             decorate: function (name, func) {
13 |                 functionSequence.push({
14 |                     name: name,
15 |                     func: func });
16 |             },
17 |             monitor: function (func) {
18 |                 var length = functionSequence.length;
19 |                 for (i = 0 ; i < length ; i++) {
20 |                     functionSequence[i].func.apply(this, arguments);
21 |                 }
22 |             }
23 |         };
24 |     }());
25 | 
26 |     monitorTool.decorate("before", function (func) {
27 |         console.log(func.name + " function has started at " + Date.now());
28 |     });
29 |     monitorTool.decorate("decorated", function (func) {
30 |         func.apply(this, Array.prototype.slice(arguments, 1));
31 |     });
32 |     monitorTool.decorate("after", function (func) {
33 |         console.log(func.name + " function has finished at " + Date.now());
34 |     });
35 | 
36 |     wrapperFunction = monitorTool.monitor;
37 | 
38 |     car = {
39 |         beep: function beep() {
40 |             alert("BEEP"); },
41 |         brake: function brake() {
42 |             alert("STOP!");
43 |         },
44 |         accelerator: function accelerator() {
45 |             alert("GO");
46 |         }
47 |     };
48 | 
49 |     function wrap(func, wrapper) {
50 |         return function() {
51 |             var args = [func].concat(Array.prototype.slice.call(arguments));
52 |             return wrapper.apply(this, args);
53 |         };
54 |     }
55 | 
56 |     function wrapObject(obj, wrapper) {
57 |         var prop;
58 |         for(prop in obj) {
59 |             if (obj.hasOwnProperty(prop) && typeof obj[prop] === "function") {
60 |                 obj[prop] = wrap(obj[prop], wrapper);
61 |             }
62 |         }
63 |     }
64 | 
65 | 
66 |     wrapObject(car, wrapperFunction);
67 | 
68 |     console.log("A. car.accelerator() monitor");
69 |     car.accelerator();
70 | 
71 |     console.log("\nB. car.beep() monitor");
72 |     car.beep();
73 | 
74 |     console.log("\nC. car.brake() monitor");
75 |     car.brake();
76 | 
77 | }());
78 | </script>
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------
/chapter-5/5-208_decorator_for_object.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 | (function () {
 4 |     function Computer(name) {
 5 |         this.name = name;
 6 |         this.price = 0;
 7 |         this.parts = [];
 8 |     }
 9 | 
10 |     Computer.prototype = {
11 |         showPrice: function () {
12 |             console.log(this.name + " costs $" + this.price);
13 |         },
14 |         showParts: function () {
15 |             var partString = "- Parts information\n",
16 |                 length = this.parts.length,
17 |                 i;
18 | 
19 |             for (i = 0 ; i < length ; i++) {
20 |                 partString += this.parts[i].name + ": $" + this.parts[i].price + "\n";
21 |             }
22 |             console.log(partString + "\n- Total: $" + this.price);
23 |         },
24 |         decorate: function (part) {
25 |             this.price += part.price;
26 |             this.parts.push(part);
27 |         }
28 |     };
29 | 
30 |     function ComputerDecorator() {
31 |         this.decorateParts = {};
32 |     }
33 |     ComputerDecorator.prototype.decorateComputer = function (computer, partName) {
34 |         if (this.decorateParts.hasOwnProperty(partName)) {
35 |             computer.decorate(this.decorateParts[partName]);
36 |             console.log("Decorating " + computer.name + " with " + partName);
37 |         }
38 |         return computer;
39 |     };
40 |     ComputerDecorator.prototype.addDecoratePart = function (partName, price) {
41 |         this.decorateParts[partName] = {
42 |             name: partName,
43 |             price: price
44 |         };
45 |     };
46 | 
47 | 
48 |     var computerDecorator = new ComputerDecorator();
49 |     computerDecorator.addDecoratePart("CPU", 200);
50 |     computerDecorator.addDecoratePart("8GB memory", 100);
51 |     computerDecorator.addDecoratePart("4GB memory", 50);
52 | 
53 |     console.log("1. Home computer");
54 |     var homeComputer = new Computer("Home computer");
55 |     homeComputer = computerDecorator.decorateComputer(homeComputer, "CPU");
56 |     homeComputer = computerDecorator.decorateComputer(homeComputer, "4GB memory");
57 |     homeComputer.showPrice();
58 |     homeComputer.showParts();
59 | 
60 |     console.log("\n2. Work computer");
61 |     var workComputer = new Computer("Work computer");
62 |     workComputer = computerDecorator.decorateComputer(workComputer, "CPU");
63 |     workComputer = computerDecorator.decorateComputer(workComputer, "8GB memory");
64 |     homeComputer.showPrice();
65 |     workComputer.showParts();
66 | }());
67 | </script>
68 | 
69 | 


--------------------------------------------------------------------------------
/chapter-9/9-390_object_expression.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | var property1 = "New",
  3 |     property2 = "Object literal",
  4 |     namedProperty = "Functionalities";
  5 | 
  6 | var mergedObject = {
  7 |     property1: property1,
  8 |     property2: property2,
  9 |     property3: namedProperty
 10 | };
 11 | 
 12 | console.log(mergedObject);
 13 | 
 14 | var newMergedObject = {
 15 |     property1,
 16 |     property2,
 17 |     property3: namedProperty
 18 | };
 19 | console.log(newMergedObject);
 20 | 
 21 | 
 22 | // Computable property names
 23 | var i = 0,
 24 |     newComputedProperty = {
 25 |         ["property" + ++i]: i,
 26 |         ["property" + ++i]: i,
 27 |         ["property" + ++i]: i
 28 |     };
 29 | 
 30 | console.log(newComputedProperty);
 31 | 
 32 | var j = 0,
 33 |     previousComputedProperty = {};
 34 | 
 35 | previousComputedProperty["property" + ++j] = j;
 36 | previousComputedProperty["property" + ++j] = j;
 37 | previousComputedProperty["property" + ++j] = j;
 38 | console.log(previousComputedProperty);
 39 | 
 40 | 
 41 | // get, set accessors
 42 | var newFunctionDefinition = {
 43 |     func() {
 44 |         alert("This is new definition");
 45 |     },
 46 |     _name: "Unikys",
 47 |     get name() {
 48 |         return this._name;
 49 |     },
 50 |     set name(name) {
 51 |         this._name = name;
 52 |     }
 53 | };
 54 | 
 55 | 
 56 | var previousFunctionDefinition = {
 57 |     func: function () {
 58 |         alert("This is the compatible definition");
 59 |     },
 60 |     _name: "Unikys"
 61 | };
 62 | 
 63 | Object.defineProperty(previousFunctionDefinition, "name", {
 64 |     get: function () {
 65 |         return this._name;
 66 |     },
 67 |     set: function (name) {
 68 |         this.name = _name;
 69 |     }
 70 | });
 71 | 
 72 | // __proto__ property
 73 | var car = {
 74 |     name: "Default",
 75 |     type: "Car",
 76 |     getName() {
 77 |         return this.name;
 78 |     }
 79 | }
 80 | 
 81 | var suvES6 = {
 82 |     __proto__: car,
 83 |     name: "My car",
 84 |     type: "SUV"
 85 | };
 86 | console.log(suvES6);
 87 | 
 88 | var suvES5 = Object.create(car, {
 89 |     name: {
 90 |         writable:true,
 91 |         configurable: true,
 92 |         value:"My car"
 93 |     },
 94 |     type: {
 95 |         writable: true,
 96 |         configurable: true,
 97 |         value: "SUV"
 98 |     }
 99 | });
100 | console.log(suvES5);
101 | 
102 | var suvES5Other = Object.create(car);
103 | suvES5Other.name = "My car";
104 | suvES5Other.type = "SUV";
105 | 
106 | console.log(suvES5Other);
107 | 
108 | </script>
109 | 


--------------------------------------------------------------------------------
/chapter-5/5-188_data_collection_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <video style="width:240px" id="videoBunnySmall" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 5 |     <video style="width:320px" id="videoBunnyMedium" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 6 |     <video style="width:480px" id="videoBunnyLarge" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 7 | 
 8 |     <div id="controlPanel">
 9 |         <select id="controlVideo">
10 |             <option>videoBunnySmall</option>
11 |             <option>videoBunnyMedium</option>
12 |             <option>videoBunnyLarge</option>
13 |         </select>
14 |         <button id="play">Play</button>
15 |         <button id="pause">Pause</button>
16 |         <button id="volumeUp">Volume+</button>
17 |         <button id="volumeDown">Volume-</button>
18 |     </div>
19 |     <script>
20 |     (function () {
21 |         var divControlPanel = document.getElementById("controlPanel"),
22 |             selectControlVideo = document.getElementById("controlVideo"),
23 |             controlVideo = {
24 |                 "play": function (video) {
25 |                     video.play();
26 |                 },
27 |                 "pause": function (video) {
28 |                     video.pause();
29 |                 },
30 |                 "volumeUp": function (video) {
31 |                     if (video.volume <= 0.9) {
32 |                         video.volume += 0.1;
33 |                     } else {
34 |                         video.volume = 1;
35 |                     }
36 |                 },
37 |                 "volumeDown": function (video) {
38 |                     if (video.volume >= 0.1) {
39 |                         video.volume -= 0.1;
40 |                     } else {
41 |                         video.volume = 0;
42 |                     }
43 |                 },
44 |                 "getVideoById": function (id) {
45 |                     return document.getElementById(id);
46 |                 }
47 |             },
48 |             proxyClickEventHandler = function (command) {
49 |                 var video;
50 |                 if (controlVideo.hasOwnProperty(command)) {
51 |                     video = controlVideo.getVideoById(selectControlVideo.value);
52 |                     controlVideo[command].call(this, video);
53 |                 }
54 |             };
55 | 
56 |         divControlPanel.addEventListener("click", function (e) {
57 |             var target = e.target || e.srcElement;
58 |             proxyClickEventHandler(target.id);
59 |         }, true);
60 |     }());
61 | 
62 |     </script>
63 |     </body>
64 | </html>
65 | 
66 | 


--------------------------------------------------------------------------------
/chapter-6/6-281_reflow_minimized_notice.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #noticeWrapper {
 6 |         overflow: hidden;   /* Don't show the overflowing part */
 7 |         height: 20px;       /* The banner's height */
 8 |         width: 200px;       /* The banner's width */
 9 |         position: relative;
10 |         border: 1px solid black;
11 |     }
12 | 
13 |     #notice {
14 |         position: absolute;
15 |         margin: 0;
16 |         padding: 0;
17 |         top: 0px;
18 |     }
19 | 
20 |     .noticeSubject {
21 |         height: 20px;
22 |         width: 200px;
23 |         list-style: none;
24 |     }
25 | 
26 |     .noReflow{
27 |         width: 200px;
28 |         height: 100px;
29 |         border: 1px solid black;
30 |         background-color: lightgray;
31 |     }
32 |     </style>
33 | </head>
34 | <body>
35 |     <div class="noReflow">I'll not reflow </div>
36 |     <div id="noticeWrapper">
37 |         <ul id="notice">
38 |             <li class="noticeSubject">Link to the first article</li>
39 |             <li class="noticeSubject">Link to the second article</li>
40 |             <li class="noticeSubject">Link to the third article</li>
41 |             <li class="noticeSubject">Link to the last article</li>
42 |         </ul>
43 |     </div>
44 |     <div class="noReflow"> Neither me</div>
45 |     <script>
46 |     (function () {
47 |         var ulNotice = document.getElementById("notice"),
48 |             currentNoticeTop = 0,
49 |             currentIndex = 0,
50 |             maxIndex = ulNotice.getElementsByClassName("noticeSubject").length - 1,
51 |             currentRollingUp = true,
52 |             subjectHeight = 20,
53 |             velocityPerSecond = 20,
54 |             previousFrame = null;
55 | 
56 |         setTimeout(rollNextNotice, 0);
57 | 
58 |         function rollNextNotice() {
59 |             requestAnimationFrame(rollNotice);
60 |         }
61 | 
62 |         function rollNotice(time) {
63 |             var diff = (previousFrame !== null ? time - previousFrame : 0);
64 |             previousFrame = time;
65 |             currentNoticeTop += (diff/1000) * velocityPerSecond;
66 |             if (currentNoticeTop * velocityPerSecond >= currentIndex * -subjectHeight * velocityPerSecond) {
67 |                 if (currentIndex === maxIndex || currentIndex === 0) {
68 |                     currentRollingUp = !currentRollingUp;
69 |                     velocityPerSecond = -velocityPerSecond;
70 |                 }
71 |                 currentNoticeTop = currentIndex * -subjectHeight;
72 |                 currentIndex += (currentRollingUp ? -1 : 1);
73 |                 previousFrame = null;
74 | 
75 |                 setTimeout(rollNextNotice, 1000);
76 |             } else {
77 |                 requestAnimationFrame(rollNotice);
78 |             }
79 |             ulNotice.style.top = currentNoticeTop + "px";
80 |         }
81 |     }());
82 |     </script>
83 | </body>
84 | </html>
85 | 
86 | 


--------------------------------------------------------------------------------
/chapter-5/5-191_cache_with_proxy.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <video style="width:240px" id="videoBunnySmall" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 5 |     <video style="width:320px" id="videoBunnyMedium" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 6 |     <video style="width:480px" id="videoBunnyLarge" src="http://media.w3.org/2010/05/bunny/movie.ogv"></video>
 7 | 
 8 |     <div id="controlPanel">
 9 |         <select id="controlVideo">
10 |             <option>videoBunnySmall</option>
11 |             <option>videoBunnyMedium</option>
12 |             <option>videoBunnyLarge</option>
13 |         </select>
14 |         <button id="play">Play</button>
15 |         <button id="pause">Pause</button>
16 |         <button id="volumeUp">Volume+</button>
17 |         <button id="volumeDown">Volume-</button>
18 |     </div>
19 |     <script>
20 |     (function () {
21 |         var divControlPanel = document.getElementById("controlPanel"),
22 |             selectControlVideo = document.getElementById("controlVideo"),
23 |             controlVideo = {
24 |                 "play": function (video) {
25 |                     video.play();
26 |                 },
27 |                 "pause": function (video) {
28 |                     video.pause();
29 |                 },
30 |                 "volumeUp": function (video) {
31 |                     if (video.volume <= 0.9) {
32 |                         video.volume += 0.1;
33 |                     } else {
34 |                         video.volume = 1;
35 |                     }
36 |                 },
37 |                 "volumeDown": function (video) {
38 |                     if (video.volume >= 0.1) {
39 |                         video.volume -= 0.1;
40 |                     } else {
41 |                         video.volume = 0;
42 |                     }
43 |                 },
44 |                 "getVideoById": function (id) {
45 |                     return document.getElementById(id);
46 |                 }
47 |             },
48 |             proxyClickEventHandler = (function () {
49 |                 var cache = {};
50 |                 return function (command) {
51 |                     var video;
52 |                     if (controlVideo.hasOwnProperty(command)) {
53 |                         if (cache.hasOwnProperty(selectControlVideo.value)) {
54 |                             video = cache[selectControlVideo.value];
55 |                         } else {
56 |                             video = controlVideo.getVideoById(selectControlVideo.value);
57 |                             cache[selectControlVideo.value] = video;
58 |                         }
59 |                         controlVideo[command].call(this, video);
60 |                     }
61 |                 };
62 |             }());
63 | 
64 | 
65 |         divControlPanel.addEventListener("click", function (e) {
66 |             var target = e.target || e.srcElement;
67 |             proxyClickEventHandler(target.id);
68 |         }, true);
69 |     }());
70 | 
71 |     </script>
72 |     </body>
73 | </html>
74 | 
75 | 


--------------------------------------------------------------------------------
/chapter-6/6-258_clock_with_setinterval.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #log {
 6 |         height: 200px;
 7 |         overflow-y: scroll;
 8 |         font-size: 8px;
 9 |     }
10 |     </style>
11 | </head>
12 | <body>
13 |     <div id="currentTime">
14 |     </div>
15 |     <div id="internalClock">
16 |     </div>
17 |     <button id="startClock">Start interval clock</button>
18 |     <button id="stopClock">Stop interval clock</button>
19 |     <button id="initiateClock">Initiate interval clock</button>
20 |     <button id="sleepFiveSeconds">Sleep 5 Seconds</button>
21 |     <div id="log">
22 |     </div>
23 |     <script>
24 |     (function () {
25 |         var divCurrentTime = document.getElementById("currentTime"),
26 |             divInternalClock = document.getElementById("internalClock"),
27 |             timePreviousClock = Date.now(),
28 |             idIntervalOneSecond = setInterval(intervalOneSecond, 1000),
29 |             divLog = document.getElementById("log");
30 | 
31 |         document.getElementById("startClock").addEventListener("click", startClock);
32 |         document.getElementById("stopClock").addEventListener("click", stopClock);
33 |         document.getElementById("initiateClock").addEventListener("click", initiateClock);
34 |         document.getElementById("sleepFiveSeconds").addEventListener("click", sleepFiveSeconds);
35 | 
36 |         function intervalOneSecond() {
37 |             divCurrentTime.innerHTML = new Date();
38 |             timePreviousClock += 1000;
39 |             divInternalClock.innerHTML = new Date(timePreviousClock);
40 |             log("intervalOneSecond: " + Date.now() + " <> " + timePreviousClock);
41 |         }
42 | 
43 |         function initiateClock() {
44 |             divCurrentTime.innerHTML = new Date();
45 |             timePreviousClock = Date.now();
46 |             divInternalClock.innerHTML = new Date(timePreviousClock);
47 |             log("initiateClock");
48 |         }
49 | 
50 |         function stopClock() {
51 |             if (idIntervalOneSecond !== null) {
52 |                 clearInterval(idIntervalOneSecond);
53 |                 idIntervalOneSecond = null;
54 |             }
55 |             log("stopClock");
56 |         }
57 | 
58 |         function startClock() {
59 |             if (idIntervalOneSecond === null) {
60 |                 idIntervalOneSecond = setInterval(intervalOneSecond, 1000);
61 |             }
62 |             log("startClock");
63 |         }
64 | 
65 |         function sleepFiveSeconds() {
66 |             log("sleepFiveSeconds start: " + new Date());
67 |             sleep(5000);
68 |             log("sleepFiveSeconds end: " + new Date());
69 |         }
70 | 
71 |         function sleep(waitMilliseconds) {
72 |             var waitUntil = Date.now() + waitMilliseconds;
73 |             while(Date.now() < waitUntil) {
74 |                 ;
75 |             }
76 |         }
77 | 
78 |         function log(logString) {
79 |             var divLogLine = document.createElement("div");
80 |             divLogLine.appendChild(document.createTextNode(new Date() + ": " + logString));
81 |             divLog.insertBefore(divLogLine, divLog.childNodes[0]);
82 |         }
83 | 
84 |     }());
85 |     </script>
86 | </body>
87 | </html>
88 | 
89 | 


--------------------------------------------------------------------------------
/chapter-5/5-204_form_validate_decorator.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <body>
 4 |     <form id="personalInformation">
 5 |         <label>First name: <input type="text" class="validate" data-validate-rules="required alphabet" name="firstName"></input></label><br/>
 6 |         <label>Last name: <input type="text" class="validate" data-validate-rules="required alphabet" name="lastName"></input></label><br/>
 7 |         <label>Age: <input type="text" class="validate" data-validate-rules="number" name="age"></input></label><br/>
 8 |         <label>Gender: <select class="validate" data-validate-rules="required">
 9 |             <option>Male</option>
10 |             <option>Female</option>
11 |         </select></label><br/>
12 |         <input type="submit"></input>
13 |     </form>
14 | 
15 |     <script>
16 |     (function () {
17 |         var formPersonalInformation = document.getElementById("personalInformation"),
18 |             validator = new Validator(formPersonalInformation);
19 | 
20 |         function Validator (form) {
21 |             this.validatingForm = form;
22 |             form.addEventListener("submit", function () {
23 |                 if (!validator.validate(this)) {
24 |                     event.preventDefault();
25 |                     event.returnValue = false;
26 |                     return false;
27 |                 }
28 |                 alert("Success to validate"); 
29 |                 return true;
30 |             });
31 |         }
32 | 
33 |         Validator.prototype.ruleSet = {};
34 |         Validator.prototype.decorate = function (ruleName, ruleFunction) {
35 |             this.ruleSet[ruleName] = ruleFunction;
36 |         }
37 |         Validator.prototype.validate = function (form) {
38 |             var validatingForm = form || this.validatingForm,
39 |                 inputs = validatingForm.getElementsByClassName("validate"),
40 |                 length = inputs.length,
41 |                 i, j,
42 |                 input,
43 |                 checkRules, rule, ruleLength;
44 | 
45 |             for(i = 0 ; i < length ; i++) {
46 |                 input = inputs[i];
47 |                 if (input.dataset.validateRules) {
48 |                     checkRules = input.dataset.validateRules.split(" ");
49 |                     ruleLength = checkRules.length;
50 |                     for (j = 0 ; j < ruleLength ; j++) {
51 |                         rule = checkRules[j];
52 |                         if (this.ruleSet.hasOwnProperty(rule)) {
53 |                             if (!this.ruleSet[rule].call(null, input)) {
54 |                                 return false;
55 |                             }
56 |                         }
57 |                     }
58 |                 }
59 |             }
60 |         };
61 | 
62 |         validator.decorate("required", function (input) {
63 |             if (!input.value) {
64 |                 alert(input.name + " is required");
65 |                 return false;
66 |             }
67 |             return true;
68 |         });
69 | 
70 |         validator.decorate("alphabet", function (input) {
71 |             var regex = /^[a-zA-Z\s]*$/;
72 |             if (!regex.test(input.value)) {
73 |                 alert(input.name + " has to be only alphabets");
74 |                 return false;
75 |             }
76 |             return true;
77 |         });
78 | 
79 |         validator.decorate("number", function (input) {
80 |             var regex = /^[0-9]*$/;
81 |             if (!regex.test(input.value)) {
82 |                 alert(input.name + " has to be only numbers");
83 |                 return false;
84 |             }
85 |             return true;
86 |         });
87 |     }());
88 |     </script>
89 | </body>
90 | </html>
91 | 
92 | 


--------------------------------------------------------------------------------
/chapter-6/6-286_documentfragment.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |     <style>
  4 |     #noticeWrapper {
  5 |         overflow: hidden;   /* Don't show the overflowing part */
  6 |         height: 20px;       /* The banner's height */
  7 |         width: 200px;       /* The banner's width */  
  8 |         position: relative;
  9 |         border: 1px solid black;
 10 |     }
 11 |     #notice {
 12 |         position: absolute;
 13 |         margin: 0;
 14 |         padding: 0;
 15 |         top: 0px;
 16 |     }
 17 | 
 18 |     .noticeSubject {
 19 |         height: 20px;
 20 |         width: 200px;
 21 |         list-style: none;
 22 |     }
 23 | 
 24 |     .noReflow {
 25 |         width: 200px;
 26 |         height: 100px;
 27 |         border: 1px solid black;
 28 |         background-color: lightgray;
 29 |     }
 30 |     </style>
 31 | </head>
 32 | <body>
 33 |     <div class="noReflow">
 34 |         I'll not reflow
 35 |     </div>
 36 |     <div id="noticeWrapper">
 37 |         <ul id="notice">
 38 |             <li class="noticeSubject">Now loading</li>
 39 |         </ul>
 40 |     </div>
 41 |     <div class="noReflow">
 42 |         Neither me
 43 |     </div>
 44 | 
 45 |     <script>
 46 |     (function () {
 47 |         var ulNotice = document.getElementById("notice"),
 48 |             currentNoticeTop = 0,
 49 |             currentIndex = 0,
 50 |             maxIndex = 0,
 51 |             currentRollingUp = true,
 52 |             subjectHeight = 20, velocityPerSecond = 20,
 53 |             previousFrame = null,
 54 |             xhr = new XMLHttpRequest();
 55 | 
 56 |         xhr.open("GET", "./notice_list.json");
 57 |         xhr.responseType = "json";
 58 |         xhr.onload = function (event) {
 59 |             var noticeList = xhr.response,
 60 |                 length = noticeList.length,
 61 |                 i,
 62 |                 fragNoticeList = document.createDocumentFragment(),
 63 |                 liNoticeSubject;
 64 |             for (i = 0 ; i < length ; i++) {
 65 |                 liNoticeSubject = document.createElement("li");
 66 |                 liNoticeSubject.setAttribute("class", "noticeSubject");
 67 |                 liNoticeSubject.appendChild(document.createTextNode(noticeList[i]));
 68 |                 fragNoticeList.appendChild(liNoticeSubject);
 69 |             }
 70 |             maxIndex = length - 1;
 71 |             ulNotice.replaceChild(fragNoticeList, ulNotice.children[0]);
 72 |             setTimeout(rollNextNotice, 0);
 73 |         };
 74 |         xhr.send();
 75 | 
 76 |         function rollNextNotice() {
 77 |             requestAnimationFrame(rollNotice);
 78 |         }
 79 | 
 80 |         function rollNotice(time) {
 81 |             var diff = (previousFrame !== null ? time - previousFrame : 0);
 82 |             previousFrame = time;
 83 |             currentNoticeTop += (diff/1000) * velocityPerSecond;
 84 |             if (currentNoticeTop * velocityPerSecond >= currentIndex * -subjectHeight * velocityPerSecond) {
 85 |                 if (currentIndex === maxIndex || currentIndex === 0) {
 86 |                     currentRollingUp = !currentRollingUp;
 87 |                     velocityPerSecond = -velocityPerSecond;
 88 | 
 89 |                 }
 90 |                 currentNoticeTop = currentIndex * -subjectHeight;
 91 |                 currentIndex += (currentRollingUp ? -1 : 1);
 92 |                 previousFrame = null;
 93 |                 setTimeout(rollNextNotice, 1000);
 94 |             } else {
 95 |                 requestAnimationFrame(rollNotice);
 96 |             }
 97 |             ulNotice.style.top = currentNoticeTop + "px";
 98 |         }
 99 |     }());
100 |     </script>
101 | </body>
102 | </html>
103 | 
104 | 
105 | 


--------------------------------------------------------------------------------
/chapter-6/6-261_setinterval_time_difference.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |     #log {
 6 |         height: 200px;
 7 |         overflow-y: scroll;
 8 |         font-size: 8px;
 9 |     }
10 |     </style>
11 | </head>
12 | <body>
13 |     <div id="currentTime"></div>
14 |     <div id="internalClock"></div>
15 |     <button id="startClock">Start interval clock</button>
16 |     <button id="stopClock">Stop interval clock</button>
17 |     <button id="initiateClock">Initiate interval clock</button>
18 |     <button id="sleepFiveSeconds">Sleep 5 Seconds</button>
19 |     <div id="log"> </div>
20 |     <script>
21 |     (function () {
22 |         var divCurrentTime = document.getElementById("currentTime"),
23 |             divInternalClock = document.getElementById("internalClock"),
24 |             timePreviousClock = null,
25 |             idIntervalOneSecond = null,
26 |             divLog = document.getElementById("log"),
27 |             funcIntervalTimeDifference = (function () {
28 |                 var previousInvokeTime = null;
29 |                 return function () {
30 |                     var difference;
31 |                     if (previousInvokeTime === null) {
32 |                         timePreviousClock = Date.now();
33 |                         difference = 0;
34 |                     } else {
35 |                         difference = Date.now() - previousInvokeTime;
36 |                     }
37 |                     previousInvokeTime = Date.now();
38 |                     divCurrentTime.innerHTML = new Date();
39 |                     timePreviousClock += difference;
40 |                     divInternalClock.innerHTML = new Date(timePreviousClock);
41 | 
42 |                     log("funcIntervalTimeDifference: " + Date.now() + " <> " + timePreviousClock);
43 |                 };
44 |             }());
45 | 
46 |         document.getElementById("startClock").addEventListener("click", startClock);
47 |         document.getElementById("stopClock").addEventListener("click", stopClock);
48 |         document.getElementById("initiateClock").addEventListener("click", initiateClock);
49 |         document.getElementById("sleepFiveSeconds").addEventListener("click", sleepFiveSeconds);
50 | 
51 |         function initiateClock() {
52 |             divCurrentTime.innerHTML = new Date();
53 |             timePreviousClock = Date.now();
54 |             divInternalClock.innerHTML = new Date(timePreviousClock);
55 | 
56 |             log("initiateClock");
57 |         }
58 | 
59 |         function stopClock() {
60 |             if (idIntervalOneSecond !== null) {
61 |                 clearInterval(idIntervalOneSecond);
62 |                 idIntervalOneSecond = null;
63 |             }
64 |             log("stopClock");
65 |         }
66 | 
67 |         function startClock() {
68 |             if (idIntervalOneSecond === null) {
69 |                 idIntervalOneSecond = setInterval(funcIntervalTimeDifference, 1000);
70 |             }
71 |             log("startClock");
72 |         }
73 | 
74 |         function sleepFiveSeconds() {
75 |             log("sleepFiveSeconds start: " + new Date());
76 |             sleep(5000);
77 | 
78 |             log("sleepFiveSeconds end: " + new Date());
79 |         }
80 | 
81 |         function sleep(waitMilliseconds) {
82 |             var waitUntil = Date.now() + waitMilliseconds;
83 |             while(Date.now() < waitUntil) {
84 |                 ;
85 |             }
86 |         }
87 | 
88 |         function log(logString) {
89 |             var divLogLine = document.createElement("div");
90 |             divLogLine.appendChild(document.createTextNode(new Date() + ": " + logString));
91 |             divLog.insertBefore(divLogLine, divLog.childNodes[0]);
92 |         }
93 |     }());
94 | </script> </body>
95 | </html>
96 | 
97 | 


--------------------------------------------------------------------------------
/chapter-5/5-168_event_bubbling_capturing.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <html>
  3 | <head>
  4 | <style>
  5 |     div {
  6 |         border: 1px solid black;
  7 |     }
  8 |     .divOutside {
  9 |         width: 200px;
 10 |         height: 200px;
 11 |         background-color: lightgreen;
 12 |     }
 13 |     .divMiddle {
 14 |         width: 150px;
 15 |         height: 150px;
 16 |         background-color: lightblue;
 17 |     }
 18 |     .divInside {
 19 |         width: 100px;
 20 |         height: 100px;
 21 |         background-color: pink;
 22 |         position:relative;
 23 |     }
 24 |     .divFloat {
 25 |         position: absolute;
 26 |         left: 210px;
 27 |         height: 50px;
 28 |         width: 50px;
 29 |         background-color: lightgray;
 30 |     }
 31 |     .highlight {
 32 |         background-color: black;
 33 |     }
 34 |     </style>
 35 | </head>
 36 | <body>
 37 |     <div id="divBubblingOutside" class="divOutside">
 38 |         <div id="divBubblingMiddle" class="divMiddle">
 39 |             <div id="divBubblingInside" class="divInside">
 40 |                 Bubbling
 41 |                 <div id="divBubblingFloat" class="divFloat"> </div>
 42 |             </div>
 43 |         </div>
 44 |     </div>
 45 |     <div id="divCapturingOutside" class="divOutside">
 46 |         <div id="divCapturingMiddle" class="divMiddle">
 47 |             <div id="divCapturingInside" class="divInside">
 48 |                 Capturing
 49 |                 <div id="divCapturingFloat" class="divFloat"> </div>
 50 |             </div>
 51 |         </div>
 52 |     </div>
 53 |     <script>
 54 |     (function () {
 55 |         document.getElementById("divBubblingOutside").addEventListener('click', function () {
 56 |             this.classList.toggle("highlight"); // Some browsers will not apply this change due to single threaded environment
 57 |             alert("Outside bubbling");
 58 |             this.classList.toggle("highlight");
 59 |         });
 60 |         document.getElementById("divBubblingMiddle").addEventListener('click', function () {
 61 |             this.classList.toggle("highlight");
 62 |             alert("Middle bubbling");
 63 |             this.classList.toggle("highlight");
 64 |         });
 65 |         document.getElementById("divBubblingInside").addEventListener('click', function () {
 66 |             this.classList.toggle("highlight");
 67 |             alert("Inside bubbling");
 68 |             this.classList.toggle("highlight");
 69 |         });
 70 |         document.getElementById("divBubblingFloat").addEventListener('click', function () {
 71 |             this.classList.toggle("highlight");
 72 |             alert("Float bubbling");
 73 |             this.classList.toggle("highlight");
 74 |         });
 75 |         document.getElementById("divCapturingOutside").addEventListener('click', function () {
 76 |             this.classList.toggle("highlight");
 77 |             alert("Outside capturing");
 78 |             this.classList.toggle("highlight");
 79 |         }, true);
 80 |         document.getElementById("divCapturingMiddle").addEventListener('click', function () {
 81 |             this.classList.toggle("highlight");
 82 |             alert("Middle capturing");
 83 |             this.classList.toggle("highlight");
 84 |         }, true);
 85 |         document.getElementById("divCapturingInside").addEventListener('click', function () {
 86 |             this.classList.toggle("highlight");
 87 |             alert("Inside capturing");
 88 |             this.classList.toggle("highlight");
 89 |         }, true);
 90 |         document.getElementById("divCapturingFloat").addEventListener('click', function () {
 91 |             this.classList.toggle("highlight");
 92 |             alert("Float capturing");
 93 |             this.classList.toggle("highlight");
 94 |         }, true);
 95 |     }());
 96 |     </script>
 97 | </body>
 98 | </html>
 99 | 
100 | 


--------------------------------------------------------------------------------
/chapter-5/5-174_modify_dom_propagation_path.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <html>
  3 | <head>
  4 | <style>
  5 |     div {
  6 |         border: 1px solid black;
  7 |     }
  8 |     .divOutside {
  9 |         width: 200px;
 10 |         height: 200px;
 11 |         background-color: lightgreen;
 12 |     }
 13 |     .divMiddle {
 14 |         width: 150px;
 15 |         height: 150px;
 16 |         background-color: lightblue;
 17 |     }
 18 |     .divInside {
 19 |         width: 100px;
 20 |         height: 100px;
 21 |         background-color: pink;
 22 |         position:relative;
 23 |     }
 24 |     .divFloat {
 25 |         position: absolute;
 26 |         left: 210px;
 27 |         height: 50px;
 28 |         width: 50px;
 29 |         background-color: lightgray;
 30 |     }
 31 |     .highlight {
 32 |         background-color: black;
 33 |     }
 34 |     </style>
 35 | </head>
 36 | <body>
 37 |     <div id="divBubblingOutside" class="divOutside">
 38 |         <div id="divBubblingMiddle" class="divMiddle">
 39 |             <div id="divBubblingInside" class="divInside">
 40 |                 Bubbling
 41 |                 <div id="divBubblingFloat" class="divFloat"> </div>
 42 |             </div>
 43 |         </div>
 44 |     </div>
 45 |     <div id="divCapturingOutside" class="divOutside">
 46 |         <div id="divCapturingMiddle" class="divMiddle">
 47 |             <div id="divCapturingInside" class="divInside">
 48 |                 Capturing
 49 |                 <div id="divCapturingFloat" class="divFloat"> </div>
 50 |             </div>
 51 |         </div>
 52 |     </div>
 53 |     <script>
 54 |     (function () {
 55 |         document.getElementById("divBubblingOutside").addEventListener('click', function () {
 56 |             this.classList.toggle("highlight"); // Some browsers will not apply this change due to single threaded environment
 57 |             alert("Outside bubbling");
 58 |             this.classList.toggle("highlight");
 59 |         });
 60 |         document.getElementById("divBubblingMiddle").addEventListener('click', function () {
 61 |             this.classList.toggle("highlight");
 62 |             alert("Middle bubbling");
 63 |             this.classList.toggle("highlight");
 64 |         });
 65 |         document.getElementById("divBubblingInside").addEventListener('click', function () {
 66 |             this.classList.toggle("highlight");
 67 |             alert("Inside bubbling");
 68 |             this.classList.toggle("highlight");
 69 |         });
 70 |         document.getElementById("divBubblingFloat").addEventListener('click', function () {
 71 |             this.classList.toggle("highlight");
 72 |             alert("Float bubbling");
 73 |             this.classList.toggle("highlight");
 74 |         });
 75 |         document.getElementById("divCapturingOutside").addEventListener('click', function () {
 76 |             this.classList.toggle("highlight");
 77 |             alert("Outside capturing");
 78 |             this.classList.toggle("highlight");
 79 |         }, true);
 80 |         document.getElementById("divCapturingMiddle").addEventListener('click', function () {
 81 |             this.classList.toggle("highlight");
 82 |             document.getElementById("divCapturingInside").removeChild(document.getElementById("divCapturingFloat"));
 83 |             alert("Middle capturing");
 84 |             this.classList.toggle("highlight");
 85 |         }, true);
 86 |         document.getElementById("divCapturingInside").addEventListener('click', function () {
 87 |             this.classList.toggle("highlight");
 88 |             alert("Inside capturing");
 89 |             this.classList.toggle("highlight");
 90 |         }, true);
 91 |         document.getElementById("divCapturingFloat").addEventListener('click', function () {
 92 |             this.classList.toggle("highlight");
 93 |             alert("Float capturing");
 94 |             this.classList.toggle("highlight");
 95 |         }, true);
 96 |     }());
 97 |     </script>
 98 | </body>
 99 | </html>
100 | 
101 | 


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