├── .gitignore
├── 01To9
    ├── chap6
    │   ├── demo25.html
    │   ├── demo26.html
    │   ├── demo27.html
    │   ├── demo28.html
    │   ├── demo29_1.html
    │   ├── demo29_2.html
    │   └── demo29_3.html
    ├── demo0.html
    ├── demo2.html
    ├── demo3.html
    ├── demo4.html
    ├── demo5.html
    ├── demo6.html
    ├── demo7.html
    ├── demo8.html
    └── demo9.html
├── 10To12
    ├── demo10.html
    ├── demo11.html
    ├── demo12.html
    ├── demo13.html
    ├── demo14.html
    ├── demo15.html
    ├── demo16.html
    ├── demo17.html
    ├── demo18.html
    ├── demo19.html
    ├── demo20.html
    ├── demo21.html
    ├── demo22.html
    └── demo23.html
├── 13-20
    ├── demo31.html
    ├── demo32.html
    ├── demo33.html
    ├── demo34.html
    ├── demo35.html
    ├── demo36.html
    ├── demo37.html
    ├── demo38.html
    ├── demo39.html
    ├── demo40.html
    ├── demo41.html
    ├── demo42.html
    ├── demo43.html
    ├── demo44.html
    ├── demo45.html
    ├── demo46.html
    ├── demo47.html
    ├── demo48.html
    ├── demo49.html
    ├── demo50.html
    ├── demo51.html
    ├── demo52.html
    ├── demo53.html
    ├── demo54.html
    ├── demo55.html
    ├── demo56.html
    ├── demo57.html
    ├── demo58.html
    ├── demo59.html
    ├── demo60.html
    ├── demo60_1.html
    ├── demo61.html
    ├── demo62.html
    ├── demo63.html
    ├── demo64.html
    ├── demo64_1.html
    ├── demo65.html
    ├── demo66.html
    ├── demo67.html
    ├── demo68.html
    ├── demo69.html
    └── demo70.html
├── 21To25
    ├── demo71.html
    ├── demo72.html
    ├── demo73.html
    ├── demo74.html
    ├── demo75.html
    ├── demo76.html
    ├── demo77.html
    ├── demo78.html
    ├── demo79.html
    ├── demo80.html
    ├── demo81.html
    ├── demo82.html
    ├── demo83.html
    ├── demo84.html
    ├── demo85.html
    ├── demo86.html
    └── demo87.html
├── 26To34
    ├── demo100.html
    ├── demo101.html
    ├── demo102.html
    ├── demo103.html
    ├── demo104.html
    ├── demo105.html
    ├── demo106.html
    ├── demo107.html
    ├── demo108.html
    ├── demo109.html
    ├── demo110.html
    ├── demo88.html
    ├── demo89.html
    ├── demo90.html
    ├── demo91.html
    ├── demo92.html
    ├── demo93.html
    ├── demo94.html
    ├── demo95.html
    ├── demo96.html
    ├── demo97.html
    ├── demo98.html
    └── demo99.html
├── 35To38
    ├── demo111.html
    ├── demo112.html
    ├── demo113.html
    ├── demo114.html
    ├── demo114_1.html
    ├── demo114_2.html
    ├── demo115.html
    ├── demo116.html
    ├── demo116_1.html
    ├── demo117.html
    ├── demo118.html
    ├── demo119.html
    ├── demo120.html
    ├── demo121.html
    ├── demo122.html
    ├── demo123.html
    ├── demo124.html
    ├── demo125.html
    ├── demo126.html
    ├── demo127.html
    ├── demo128.html
    ├── demo129.html
    ├── demo130.html
    └── demo130_1.html
├── 38To42
    ├── demo131.html
    ├── demo132.html
    ├── demo133.html
    ├── demo134.html
    ├── demo135.html
    ├── demo136.html
    ├── demo137.html
    ├── demo138.html
    └── demo139.html
├── 43To57
    ├── demo140.html
    ├── demo141.html
    ├── demo141.js
    ├── demo142.html
    ├── demo142.js
    ├── demo143.html
    ├── demo143.js
    ├── demo144.html
    ├── demo145.html
    ├── demo146.html
    ├── demo147.html
    ├── demo148.html
    ├── demo148.js
    ├── demo149.html
    ├── demo149_button.png
    ├── demo150.html
    ├── demo150_browser_1.png
    ├── demo150_browser_2.png
    ├── demo151.html
    ├── demo152.html
    ├── demo153.html
    ├── demo154.html
    ├── demo155.html
    ├── demo156.html
    ├── demo157.html
    ├── demo158.html
    ├── demo159.html
    ├── demo160.html
    ├── demo161.html
    ├── demo162.html
    ├── demo163.html
    ├── demo164.html
    ├── demo165.html
    ├── demo166.html
    ├── demo166_fish1.jpg
    ├── demo167.html
    ├── demo168.html
    ├── demo169.html
    ├── demo170.html
    ├── demo170_1.html
    ├── demo170_browser_1.png
    ├── demo170_browser_2.png
    ├── demo171.html
    ├── demo171_browser_1.png
    ├── demo171_browser_2.png
    ├── demo172.html
    ├── demo173.html
    ├── demo174.html
    ├── demo175.html
    ├── demo176.html
    ├── demo177.html
    └── demo178.html
├── 58To68
    ├── demo179.html
    ├── demo180.html
    ├── demo181.html
    ├── demo182.html
    ├── demo183.html
    ├── demo184.html
    ├── demo185.html
    ├── demo186.html
    ├── demo187.html
    ├── demo188.html
    ├── demo189.html
    ├── demo190.html
    ├── demo191.html
    ├── demo192.html
    ├── demo193.html
    ├── demo194.html
    ├── demo195.html
    ├── demo196.html
    ├── demo197.html
    ├── demo198.html
    ├── demo199.html
    ├── demo200.html
    ├── demo201.html
    ├── demo202.html
    ├── demo203.html
    ├── demo204.html
    ├── demo205.html
    └── demo206.html
├── 69To73
    ├── demo207.html
    ├── demo208.html
    ├── demo209.html
    ├── demo210.html
    ├── demo211.html
    ├── demo212.html
    ├── demo213.html
    ├── demo214.html
    ├── demo215.html
    ├── demo216.html
    ├── demo217.html
    ├── demo218.html
    ├── demo219.html
    ├── demo220.html
    ├── demo221.html
    ├── demo222.html
    ├── demo223.html
    ├── demo224.html
    ├── demo225.html
    ├── demo226.html
    ├── demo227.html
    ├── demo228.html
    ├── demo229.html
    ├── demo230.html
    ├── demo231.html
    ├── demo232.html
    ├── demo233.html
    ├── demo234.html
    ├── demo235.html
    └── demo236.html
├── 74To75
    ├── demo237.html
    ├── demo238.html
    ├── demo239.html
    ├── demo240.html
    ├── demo241.html
    ├── demo242.html
    ├── demo243.html
    ├── demo244.html
    └── demo245.html
├── 76To78
    ├── demo246.html
    ├── demo247.html
    ├── demo248.html
    ├── demo249.html
    ├── demo250.html
    ├── demo251.html
    ├── demo251_1.html
    ├── demo252.html
    ├── demo252_1.html
    ├── demo253.html
    ├── demo254.html
    ├── demo255.html
    ├── demo256.html
    ├── demo256_1.html
    ├── demo256_2.html
    ├── demo256_3.html
    └── demo256_4.html
├── 79To81
    ├── demo257.html
    ├── demo258.html
    ├── demo259.html
    ├── demo260.html
    ├── demo261.html
    ├── demo262.html
    ├── demo263.html
    ├── demo264.html
    └── demo265.html
└── Advance JS
    ├── 0-sync.js
    ├── 1-callback.js
    ├── 2-callback-hell.js
    ├── 3-promise.js
    ├── 4-clouser.js
    ├── 5-ajax.js
    ├── Adv
        ├── Adv
        │   ├── 01 Stacks (Data Structure).js
        │   ├── 02 queues (Data Structure).js
        │   ├── 03 Sets (data structure).js
        │   ├── Listeners.js
        │   ├── Pizza challenge.js
        │   ├── async_await.pdf
        │   ├── index.html
        │   └── rxjs.html
        ├── Map.reducer.js
        ├── index.html
        ├── index.js
        ├── queue.js
        ├── sets.js
        ├── stack.js
        └── test.js
    ├── Advance_solution.txt
    ├── extra
        ├── 1. sync.js
        ├── 2. async_issue.js
        ├── 3. async_resolved.js
        ├── 4. makingTea.js
        ├── 5. networkcall.js
        └── task
        │   └── task-1.js
    ├── index.html
    └── task.js


/.gitignore:
--------------------------------------------------------------------------------
1 | temp
2 | .DS_Store


--------------------------------------------------------------------------------
/01To9/chap6/demo25.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     // Chapter 6
 6 |     //ex 1
 7 |     
 8 |     
 9 |     var a = 7;
10 |     
11 |     //1)
12 |     var b = a + 1;
13 | 
14 |     alert(a);
15 |     alert(b);
16 | 
17 |     //2)
18 |     a = a + 1;
19 | 
20 |     //3)
21 |     a+=1;
22 | 
23 |     //4)
24 |     a++;
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo26.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     // Chapter 6
 6 |     //ex 4
 7 |     var a = 7;
 8 |     
 9 |     a++;
10 | 
11 |     alert(a);
12 | 
13 |     ++a;
14 | 
15 |     alert(a);    
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo27.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     // Chapter 6
 6 |     //ex 3
 7 |     
 8 |     var a = 17;
 9 |     var b = ++a;
10 | 
11 |     alert(a);
12 |     alert(b);    
13 | 
14 | </script>
15 | 
16 | 
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo28.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     // Chapter 6
 6 |     //ex 4
 7 |     
 8 |     var a = 5;
 9 |     var b = ++a + a++;
10 | 
11 |     alert(a);
12 |     alert(b);    
13 | 
14 | </script>
15 | 
16 | 
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo29_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     // Chapter 6
 6 |     //ex 4
 7 |     
 8 |     var a = 4;
 9 |     var b = ++a + --a;
10 | 
11 |     alert(a);
12 |     alert(b);    
13 | 
14 | </script>
15 | 
16 | 
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo29_2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |     
 4 |     <script>
 5 |         // Chapter 6
 6 |         //ex 5
 7 |         
 8 |         var age = 5;
 9 |         var newAge = age++;
10 | 
11 |         alert(age);
12 |         alert(newAge); 
13 |     
14 |     </script>
15 |     
16 |     
17 |     </head>
18 |     <body>
19 |     
20 |     </body>
21 |     <html>


--------------------------------------------------------------------------------
/01To9/chap6/demo29_3.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |     
 4 |     <script>
 5 |         // Chapter 6
 6 |         //ex 5
 7 |         
 8 |         var age = 5;
 9 |         var newAge = ++age;
10 | 
11 |         alert(age);
12 |         alert(newAge); 
13 |     
14 |     </script>
15 |     
16 |     
17 |     </head>
18 |     <body>
19 |     
20 |     </body>
21 |     <html>


--------------------------------------------------------------------------------
/01To9/demo0.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |     
 4 |     <script>
 5 | 
 6 |         //Chapter 1
 7 | 
 8 |         // alert("Thanks for your input!");
 9 | 
10 |         // window.alert("Thanks for your input 2!");
11 | 
12 |         var newName;    // declare
13 |         newName = "1++45545"   // assign
14 | 
15 | 
16 |        var name = 'Uma"ir';
17 | 
18 | 
19 |        console.log("name 1 ", name, 'dsdsdsddddssd')
20 |     //    alert(name);
21 |         
22 |         name = "Mark";
23 | 
24 |         // alert(name);
25 | 
26 |         console.log("nme 2", name, newName)
27 | 
28 |         
29 | 
30 |     </script>
31 |     
32 |     
33 |     </head>
34 |     <body>
35 |     
36 |     </body>
37 |     <html>


--------------------------------------------------------------------------------
/01To9/demo2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     // Chapter 3 Variables for Numbers
 7 | 
 8 |     var age = 40.25;
 9 |     Age = 45
10 | 
11 |     alert(age);
12 |     alert(Age);
13 | 
14 |     // 40 err
15 |     // 40 48
16 | 
17 |     // var height = 5.5;
18 | 
19 |     // var a = 5;
20 |     // var b = 6;
21 | 
22 |     // var sum = a+b;
23 |     // var subtract = a - b;
24 |     // var multiply = a * b;
25 |     // var division = a / b;
26 | 
27 |     // var weight = 150;
28 |     // // var newWeight = weight + 25; 
29 |     // weight = weight + 25;  
30 |     // weight += 25;
31 |   
32 |     // alert(weight);
33 | 
34 |     // var originalNum = "23";
35 |     // var newNum = 7 + originalNum;
36 |     // alert(newNum);
37 | 
38 | 
39 | 
40 | 
41 | </script>
42 | 
43 | 
44 | </head>
45 | <body>
46 | 
47 | </body>
48 | <html>


--------------------------------------------------------------------------------
/01To9/demo3.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |         // Chapter 4 Variable Names Legal and Illegal
 7 |         
 8 |         var name = "Mike";
 9 |         //var 1name = "Mike";
10 |         //var name hello = "Mike"
11 |         //var 123 = "Mike"
12 |         var name_hello = "Mike";
13 |         var _name = "Mike";
14 |         var $name = "Mike";
15 |         //var name[hello = "Mike";
16 |         //var name>hello = "Mike";
17 | 
18 |         userName 
19 |         
20 |         var num = 2;
21 |         var newNum = 1;
22 | 
23 |         alert(num);
24 |         alert(newNum);
25 | 
26 | 
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/01To9/demo4.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     // Chapter 5 Math expressions: Familiar operators
 7 |     // Chapter 7 Math expressions: Eliminating ambiguity
 8 | 
 9 |     var a = 4 + 5 * 2 - 1;
10 |     //var a = (4 + (5 * 2)) - 1;
11 |     //alert(a);
12 | 
13 |     var b = (4 + 5) * 2 - 1;
14 |     //alert(b);
15 | 
16 |     var c = 5;
17 |     var d = 3;
18 | 
19 |     var e = c - d * c + d;
20 |     var f = 5 -  15 + 3;
21 |     alert(e);
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/01To9/demo5.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     //Chap 8
 6 |     var userName = "Mike"
 7 |     
 8 |     alert("Thanks "+userName + "!")
 9 | 
10 | </script>
11 | 
12 | 
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | <html>


--------------------------------------------------------------------------------
/01To9/demo6.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | // Chapter 8
 6 |     var message = "Thanks, ";
 7 |     var liar = "Mike";
 8 |     var banger = "!";
 9 | 
10 |     //alert(message+liar + banger);
11 | 
12 |     var msg = "Hello 3 World ";
13 | 
14 |     var msg1 = "3";
15 | 
16 |     var msg2 = "Hello World "+ 3;
17 |         // Hello World 3
18 | 
19 |     var msg3 = "Hello World "+ 3 + 3
20 |            //"Hello World 3" + 3
21 |            //"Hello World 33"
22 | 
23 |     var msg4 = "Hello World "+(3 + 3);
24 |         // Hello World 6
25 | 
26 |     var msg5 = 3 + 3 + "Hello World";
27 |        // 6 + "Hello World";
28 |        // 6Hello World
29 | 
30 |     var msg6 = "Hello World" + 3 - 3;
31 |     alert(msg6);        
32 | 
33 | </script>
34 | 
35 | 
36 | </head>
37 | <body>
38 | 
39 | </body>
40 | <html>


--------------------------------------------------------------------------------
/01To9/demo7.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | // Chapter 9
 6 |     
 7 | 
 8 |     var name = prompt("What is your name?","Allen");
 9 |     alert("Thanks "+name);
10 |     
11 | 
12 | 
13 | </script>
14 | 
15 | 
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | <html>


--------------------------------------------------------------------------------
/01To9/demo8.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | // Chapter 9
 6 |     
 7 |     //var a = 5;
 8 |     //alert(a);
 9 |     //alert(5);
10 | 
11 | 
12 |     var question =  "What is your name?"
13 |     var name = prompt(question,"Allen");
14 |     alert("Thank "+name);
15 | 
16 |     //var name2 = prompt(question,"Allen");
17 |     //alert("Thank "+name);
18 | 
19 |  
20 | 
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/01To9/demo9.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | // Chapter 9
 6 |     
 7 |     var numberOfCats = prompt("How many cats?");
 8 |     var tooManyCats = numberOfCats + 1;
 9 |     alert(numberOfCats);
10 |     alert(tooManyCats);
11 | 
12 | 
13 |     var name = 'John';
14 | 
15 |     var name1 = "John's work"
16 |     var result = prompt(name1);
17 |     alert(result)
18 | 
19 | </script>
20 | 
21 | 
22 | </head>
23 | <body>
24 | 
25 | </body>
26 | <html>


--------------------------------------------------------------------------------
/10To12/demo10.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 10
 7 |     
 8 |     var x = prompt("Where does the Pope live?");
 9 | 
10 | 
11 |     if(x === "Vatican") {
12 |         alert("Correct! Hello world");
13 |         //
14 |         //
15 |         //
16 |         
17 |     }
18 | 
19 | 
20 |     alert("new alert")
21 | 
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/10To12/demo11.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 10
 7 |     
 8 |     var x = prompt("Where does the Pope live?");
 9 | 
10 |     if(x === "Karachi")
11 | 
12 | 
13 | 
14 | 
15 | 
16 |         alert("yes its Karachi");
17 |         alert("Hello Karachi Karachi");
18 |     
19 | 
20 | 
21 |     alert("new data");
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/10To12/demo12.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 10
 7 |     
 8 |     var x = 56;
 9 | 
10 |     if(x == 56 ) {
11 |         alert("== data");
12 |     }
13 | 
14 |     if(x === 56 ) {
15 |         alert(" === data");
16 |     }
17 | 
18 | 
19 |     var name = 'Jhon Doe';
20 |     var firstName = 'Jhon';
21 |     var lastName = 'Doe';
22 | 
23 |     
24 |     if(name === 'Jhon Doe') {
25 |         alert(1)
26 |     }
27 | 
28 |     if(firstName + ' ' + lastName === 'Jhon Doe') {
29 |         alert(2)
30 |     }
31 | 
32 |     if('Jhon ' + lastName === 'Jhon Doe') {
33 |         alert(3)
34 |     }
35 |         
36 | 
37 | 
38 | </script>
39 | 
40 | 
41 | </head>
42 | <body>
43 | 
44 | </body>
45 | <html>


--------------------------------------------------------------------------------
/10To12/demo13.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var score = 60;
 9 | 
10 |     if ( score !== 61 ) {
11 |         alert("yes its B Grade");
12 |     }
13 |         
14 | 
15 | 
16 | </script>
17 | 
18 | 
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | <html>


--------------------------------------------------------------------------------
/10To12/demo14.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var score = 90;
 9 | 
10 |     // greater than
11 |     if(score > 90 ) {
12 |         alert("You Passed");
13 |     }
14 | 
15 | 
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/10To12/demo15.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var score = 90;
 9 | 
10 |     if(score < 90 ) {
11 |         alert("You Failed");
12 |     }
13 | 
14 | 
15 | 
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/10To12/demo16.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var score = 90;
 9 | 
10 |     if(score >= 90 ) {
11 |         alert("You Passed");
12 |     }
13 | 
14 | 
15 | 
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/10To12/demo17.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var score = 89;
 9 | 
10 |     if(score <= 90 ) {
11 |         alert("You Failed");
12 |     }
13 | 
14 | 
15 | 
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/10To12/demo18.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var city = prompt("Which city you live in");
 9 | 
10 |     if(city !== "Karachi" ) {
11 |         alert("Wrong Answer");
12 |     }
13 | 
14 | 
15 | 
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/10To12/demo19.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var name = "Zeeshan Hanif";
 9 |     var firstName = "Zeeshan";
10 |     var lastName = "Hanif";
11 | 
12 |     if(name === "Zeeshan Hanif" ) {
13 |         alert("correct 1");
14 |     }
15 | 
16 |     if(name === "Zeeshan" + " Hanif" ) {
17 |         alert("correct 2");
18 |     }
19 |     //if("Zeeshan Hani" === "Zeeshan Hanif")
20 |     if(name === firstName +" " + lastName ) {
21 |         alert("correct 3");
22 |     }
23 | 
24 | 
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/10To12/demo20.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 11
 7 |     
 8 |     var total = 55;
 9 | 
10 |     var maths = 30;
11 |     var urdu = 25;
12 |     var english = 5;
13 | 
14 |     if(total === 55){
15 |         alert("Yes correct 1");
16 |     }
17 | 
18 |     if(total === maths + urdu + english){
19 |         alert("yes correct 2");
20 |     }
21 | 
22 | 
23 | </script>
24 | 
25 | 
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | <html>


--------------------------------------------------------------------------------
/10To12/demo21.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 12
 7 | 
 8 |     var score = 95;
 9 | 
10 |     if(score < 90) {
11 |         alert("Passed");
12 |         ///
13 |     }
14 |     else {
15 |         alert("Failed");
16 |         //
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/10To12/demo22.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 12 -- else if
 7 | 
 8 |     
 9 |     var score = 200;
10 | 
11 |     if(score > 90) {
12 |         alert("Your grade is A+");
13 |     }
14 |     else if(score > 90) {
15 |         alert("Your grade is A");
16 |     }
17 |     else if(score > 70) {
18 |         alert("Your grade is B");
19 |     }
20 |     else if(score > 60) {
21 |         alert("Your grade is C");
22 |     }
23 |     else {
24 |         alert("You are failed");
25 |     }
26 | 
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/10To12/demo23.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 |     
 6 |     // Chapter 12 - else if
 7 |     
 8 | 
 9 |     var budget = 15000;
10 | 
11 |     if(budget > 10000) {
12 |         alert("Visit Turkey");
13 |     }
14 |     else if(budget > 8000) {
15 |         alert("Visit Spain");
16 |     }
17 |     else if(budget > 7000) {
18 |         alert("Visit Italy");
19 |     }
20 |     else {
21 |         alert("Visit Pakistan");
22 |     }
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/13-20/demo31.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     // comparision of == and ===
 7 | 
 8 |     var a = 4;
 9 |     var b = "4";
10 | 
11 |     var c = a + b;
12 |     alert(c);
13 | 
14 |     if(a == b){
15 |         alert("correct == ");
16 |     }
17 | 
18 |     if(a === b){
19 |         alert("correct ===");
20 |     }
21 | 
22 | 
23 | 
24 |     
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/13-20/demo32.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 13
 7 | 
 8 | 
 9 |         var maths = 35;
10 |         var english = 35;
11 |         var urdu = 35;
12 |         var totalScore = 40; // (maths + english + urdu) / 300 * 100;
13 |         var totalScoreToPass = 40;
14 |         console.log(totalScore);
15 |         console.log(totalScoreToPass);
16 |         if (
17 |                 maths >= 33             // true
18 |                 && english >= 33        //true
19 |                 && urdu >= 33           // true
20 |                 && totalScore >= totalScoreToPass   //true
21 |             ) {
22 |             console.log("You are Passed");
23 |         }
24 |         else {
25 |              console.log("Failed");
26 |         }
27 | 
28 |                 // AND   &&
29 |         // OR   ||
30 |         console.log('mths ', maths >= 33)
31 |         console.log('eng', english >= 33)
32 |         console.log('urdu', urdu >= 33)
33 |         console.log('score', totalScore >= totalScoreToPass)
34 | 
35 |     </script>
36 | 
37 | 
38 | </head>
39 | 
40 | <body>
41 | 
42 | </body>
43 | <html>


--------------------------------------------------------------------------------
/13-20/demo33.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 13
 7 | 
 8 | 
 9 |         var maths = 50;
10 |         var english = 50;
11 |         var urdu = 50;
12 | 
13 |         var sports = "Cricket";
14 | 
15 |         var totalScore = (maths + english + urdu) / 300 * 100;
16 | 
17 |         var totalScoreToPass = 40;
18 | 
19 |         alert(totalScore);
20 |         alert(totalScoreToPass);
21 | 
22 | 
23 |         if (
24 |             totalScore >= totalScoreToPass
25 |             || sports === "football"
26 |         ) {
27 |             alert("You will get Admission");
28 |         }
29 |         else {
30 |             alert("Sorry not seats available");
31 |         }
32 | 
33 |     </script>
34 | 
35 | 
36 | </head>
37 | 
38 | <body>
39 | 
40 | </body>
41 | <html>


--------------------------------------------------------------------------------
/13-20/demo34.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 13
 7 | 
 8 | 
 9 |     var age = 67;
10 |     var res = "USA";
11 | 
12 |     if(age > 65 || age < 21 && res === "USA"){
13 |         alert("You are eligible");
14 |     }
15 |     else {
16 |         alert("You are not eligible");
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo35.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 13
 7 | 
 8 | 
 9 |     var age = 63;
10 |     var res = "USA";
11 | 
12 |     if(age > 65 || age < 21 && res === "USA"){
13 |         alert("You are eligible");
14 |     }
15 |     else {
16 |         alert("You are not eligible");
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo36.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 13
 7 | 
 8 | 
 9 |     var age = 63;
10 |     var res = "US";
11 | 
12 |     if(age > 65 || age < 21 && res === "USA"){
13 |         alert("You are eligible");
14 |     }
15 |     else {
16 |         alert("You are not eligible");
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo37.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 13
 7 | 
 8 | 
 9 |     var age = 15;
10 |     var res = "USA";
11 | 
12 |     if(age > 65 || age < 21 && res === "USA"){
13 |         alert("You are eligible");
14 |     }
15 |     else {
16 |         alert("You are not eligible");
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo38.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 13
 7 | 
 8 | 
 9 |     var age = 15;
10 |     var res = "US";
11 | 
12 |     if(age > 65 || age < 21 && res === "USA"){
13 |         alert("You are eligible");
14 |     }
15 |     else {
16 |         alert("You are not eligible");
17 |     }
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo39.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 14
 7 |         // Nested if
 8 | 
 9 |         var score = 0;
10 | 
11 |         if(score) {
12 |             console.log('...??...')
13 |         }
14 | 
15 |         // if (score >= 90) {
16 |         //     alert("Grade A+");
17 |         //     if (score > 95) {
18 |         //         alert("Reward Rs. 10000");
19 |         //     }
20 |         // }
21 |         // else if (score >= 80 && score < 90) {
22 |         //     alert("Grade A");
23 |         //     if (score > 85) {
24 |         //         alert("Reward Rs. 5000");
25 |         //     }
26 | 
27 |         // }
28 |         // else if (score >= 70 && score < 80) {
29 |         //     alert("Grade B");
30 |         //     if (score > 75) {
31 |         //         alert("Reward Rs. 2500")
32 |         //     }
33 |         // }
34 |         // else if (score >= 60 && score < 70) {
35 |         //     alert("Grade C");
36 |         //     if (score > 65) {
37 |         //         alert("Reward Rs. 1000");
38 |         //     }
39 |         // }
40 |         // else {
41 |         //     alert("Failed");
42 |         // }
43 | 
44 |         
45 | 
46 |     </script>
47 | 
48 | 
49 | </head>
50 | 
51 | <body>
52 | 
53 | </body>
54 | <html>


--------------------------------------------------------------------------------
/13-20/demo40.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 15
 7 | 
 8 |     var cities = ["Karachi","Lahore","Islamabad","Peshwar"];
 9 | 
10 |     alert(cities[0]);
11 |     alert(cities[1]);
12 |     alert(cities[2]);
13 |     alert(cities[3]);
14 | 
15 | 
16 | 
17 | 
18 | 
19 | </script>
20 | 
21 | 
22 | </head>
23 | <body>
24 | 
25 | </body>
26 | <html>


--------------------------------------------------------------------------------
/13-20/demo41.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 15
 7 | 
 8 |     var cities = ["Karachi","Lahore","Islamabad","Peshwar"];
 9 | 
10 |     // alert(cities[0]);
11 |     // alert(cities[1]);
12 |     // alert(cities[2]);
13 |     // alert(cities[3]);
14 |     alert(cities[4]);
15 | 
16 |     cities[4] = '44444';
17 |     
18 |     alert(cities[4]);
19 | 
20 |     cities[40] = '4000000000';
21 |     
22 |     alert(cities[40]);
23 |     
24 | 
25 |     
26 | 
27 | 
28 | 
29 | 
30 | 
31 | </script>
32 | 
33 | 
34 | </head>
35 | <body>
36 | 
37 | </body>
38 | <html>


--------------------------------------------------------------------------------
/13-20/demo42.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 15
 7 | 
 8 |     var cities;
 9 | 
10 |     // alert(cities[0]);
11 |     // alert(cities[1]);
12 |     // alert(cities[2]);
13 |     // alert(cities[3]);
14 |     // alert(cities[4]);
15 | 
16 |     if(cities) {
17 |         cities[4] = "Hyderabad11111";
18 | 
19 |     } else {
20 |         cities = [];
21 |         cities[4] = "Hyderabad";
22 |     }
23 | 
24 |     cities[3] = "Karachi";
25 |     
26 |     
27 | 
28 |     alert(cities[3]); // Hyderabad
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | </script>
37 | 
38 | 
39 | </head>
40 | <body>
41 | 
42 | </body>
43 | <html>


--------------------------------------------------------------------------------
/13-20/demo43.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 15
 7 | 
 8 |     var a = "Karachi";
 9 |     alert(a)
10 | 
11 |     var cities = ["Karachi","Lahore","Islamabad","Peshwar"];
12 | 
13 |     cities[4] = "Hyderabad";
14 |     
15 |     alert(cities[0]);
16 |     alert(cities[1]);
17 |     alert(cities[2]);
18 |     alert(cities[3]);
19 |     alert(cities[4]);
20 | 
21 |     
22 | 
23 | 
24 | 
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/13-20/demo44.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 16
 7 | 
 8 |     var a = "Hello World";
 9 |     a = "new data";
10 | 
11 | 
12 |     var temperatures = [];
13 | 
14 |     temperatures[0] = 27;
15 |     temperatures[1] = 25;
16 |     temperatures[2] = 23;
17 |     temperatures[3] = 21;
18 |     
19 |     // alert(temperatures[0]);
20 |     // alert(temperatures[1]);
21 |     // alert(temperatures[2]);
22 |     // alert(temperatures[3]);
23 | 
24 |     temperatures[2] = 30;
25 |     alert('11111111--' + temperatures[2]);
26 | 
27 |     var len = temperatures.length;
28 |     console.log('len ', len);
29 |     temperatures[len] = 'abababababa'
30 |     console.log(temperatures)
31 | 
32 |     
33 | 
34 |    
35 |    // new array will be created and assigned to variable temperatures 
36 |     temperatures = [];
37 |     
38 | 
39 |     
40 | 
41 | 
42 | 
43 | 
44 | 
45 | </script>
46 | 
47 | 
48 | </head>
49 | <body>
50 | 
51 | </body>
52 | <html>


--------------------------------------------------------------------------------
/13-20/demo45.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 16
 7 |     //Stack
 8 |     var cities = [];
 9 | 
10 |     cities.push("Karachi");
11 |     cities.push("Lahore");
12 |     
13 |     var a = cities.pop();
14 |     alert(a);
15 | 
16 |     alert(cities.pop());
17 |     
18 | 
19 | 
20 | </script>
21 | 
22 | 
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | <html>


--------------------------------------------------------------------------------
/13-20/demo46.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 16
 7 |     //Stack
 8 |     var cities = [];
 9 | 
10 |     cities.push("Karachi");
11 |     cities.push(true);
12 |     cities.push("Islamabad");
13 |     
14 |     alert(cities);
15 | 
16 |     alert(cities[0]);
17 | 
18 |     alert(cities.pop());
19 | 
20 |     alert(cities);
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/13-20/demo47.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 16
 7 |     //Stack
 8 |     var cities = [];
 9 | 
10 |     cities.push("Karachi");
11 |     cities.push("Lahore");
12 |     
13 |     alert(cities);
14 | 
15 |     cities.push("Islamabad","Peshawar","Hyderabad");
16 | 
17 |     alert(cities);
18 | 
19 | 
20 | 
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/13-20/demo48.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //shift method-- removes the first item of an array,
 8 |     
 9 |     var cities = [];
10 | 
11 |     cities.push("Karachi");
12 |     cities.push("Lahore");
13 |     cities.push("Islamabad");
14 |     cities.push("Peshawar");
15 | 
16 |     alert(cities);
17 | 
18 |     var a = cities.shift();
19 |     alert(a);
20 | 
21 |     alert(cities)
22 | 
23 |     alert(cities.shift());
24 | 
25 |     alert(cities);
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/13-20/demo49.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //unshift method -- adds one or more elements to the beginning of an array
 8 |     
 9 |     var cities = [];
10 | 
11 |     cities.push("Karachi");
12 |     cities.push("Lahore");
13 |     
14 |     alert(cities);
15 | 
16 |     cities.unshift("Islamabad");
17 | 
18 |     alert(cities)
19 | 
20 |     alert(cities[1]);
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/13-20/demo50.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //unshift method -- adds one or more elements to the beginning of an array
 8 |     
 9 |     var cities = [];
10 | 
11 |     cities.push("Karachi");
12 |     cities.push("Lahore");
13 |     
14 |     alert(cities);
15 | 
16 |     cities.unshift("Islamabad","Peshawar");
17 | 
18 |     alert(cities);
19 | 
20 |     cities.unshift("Hyderabad");
21 | 
22 |     alert(cities);
23 |     //alert(cities[1]);
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/13-20/demo51.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //Add element from 2 index without removing
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.splice(2,0,"pig", "duck", "emu");
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo52.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //splice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.splice(2,1,"pig", "duck", "emu");
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo53.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //splice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.splice(3,2,"pig", "duck", "emu");
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo54.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //splice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.splice(2,2);
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo55.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //splice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.splice(2);
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo56.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //slice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     pets.slice(2,4);
14 | 
15 |     alert(pets);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo57.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //slice , extract
 8 |     
 9 |     var pets = ["dog", "cat", "fly", "bug", "ox"];
10 | 
11 |     alert(pets);
12 | 
13 |     var noPet = pets.slice(2,4);
14 | 
15 |     alert(noPet);
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/13-20/demo58.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 17
 7 |     //slice , extract
 8 |     
 9 |     var cities = ["Karachi", "Lahore", "Islamabad", "Peshawar", "Hyderabad"];
10 | 
11 |     alert(cities);
12 | 
13 |     //var newCities = cities.slice(2,4);
14 |     //var newCities = cities.slice(1,4);
15 |     //var newCities = cities.slice(1,6);
16 |     //var newCities = cities.slice(2);
17 |     //var newCities = cities.slice(2,2);
18 |     var newCities = cities.slice(3,1);
19 | 
20 |     alert(newCities);
21 | 
22 | 
23 | </script>
24 | 
25 | 
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | <html>


--------------------------------------------------------------------------------
/13-20/demo59.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 |     /*
 9 |     alert("2 * 1 = 2");
10 |     alert("2 * 2 = 4");
11 |     alert("2 * 3 = 6");
12 |     alert("2 * 4 = 8");
13 |     alert("2 * 5 = 10");
14 |     alert("2 * 6 = 12");
15 |     */
16 | 
17 |     var num = 2;
18 | 
19 |     alert(num+" * 1 = "+ (num*1));
20 |     alert(num+" * 2 = "+ (num*2));
21 |     alert(num+" * 3 = "+ (num*3));
22 |     alert(num+" * 4 = "+ (num*4));
23 |     alert(num+" * 5 = "+ (num*5));
24 |     alert(num+" * 6 = "+ (num*6));
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/13-20/demo60.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     
19 | 
20 |     for(var a = 0; a < 3 ; a++){
21 |         alert("Hello "+a);       
22 |     }
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/13-20/demo60_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 | 
 9 |    
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     
19 |     for( ; ; ){
20 |         alert("Hello ");       
21 |     }
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/13-20/demo61.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     /*
19 |     for(var a = 0; a < 6 ; a = a+2){
20 |         alert("Hello "+a);
21 |     }
22 |     */
23 |     for(var a = 0; a < 12 ; a+=4){
24 |         alert("Hello "+a);
25 |     }
26 | 
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/13-20/demo62.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 | 
19 |     var num = 7;
20 | 
21 |     for(var a = 1; a < 11; a++){
22 |         alert(num*a);
23 |     }
24 | 
25 |     /*alert(num+" * 1 = "+ (num*1));
26 |     alert(num+" * 2 = "+ (num*2));
27 |     alert(num+" * 3 = "+ (num*3));
28 |     alert(num+" * 4 = "+ (num*4));
29 |     alert(num+" * 5 = "+ (num*5));
30 |     alert(num+" * 6 = "+ (num*6));*/
31 | 
32 | </script>
33 | 
34 | 
35 | </head>
36 | <body>
37 | 
38 | </body>
39 | <html>


--------------------------------------------------------------------------------
/13-20/demo63.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     var cities = ["Lahore","Islamabad","Peshawar","Hyderabad"];
19 |     /*
20 |     alert(cities[0]);
21 |     alert(cities[1]);
22 |     alert(cities[2]);
23 |     alert(cities[3]);
24 |     alert(cities[4]);
25 |     */
26 | 
27 |     for(var i=0; i < cities.length; i++){
28 |         alert(cities[i]);       
29 |     }
30 | 
31 |     
32 | 
33 | </script>
34 | 
35 | 
36 | </head>
37 | <body>
38 | 
39 | </body>
40 | <html>


--------------------------------------------------------------------------------
/13-20/demo64.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops with array
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad"];
19 | 
20 |     var myCity = prompt("Enter your city");
21 | 
22 |     for(var i=0; i<5; i++){
23 |         if(myCity === cities[i]){
24 |             alert("City Found");
25 |         }
26 |     }
27 | 
28 | 
29 | 
30 | /*
31 |     for(var i=0; i<5; i++){
32 |         if(myCity === cities[0]){
33 |             alert("City Found");
34 |         }
35 |         else if(myCity === cities[1]){
36 |             alert("City Found");
37 |         }
38 |     }
39 | */
40 |     
41 | 
42 | </script>
43 | 
44 | 
45 | </head>
46 | <body>
47 | 
48 | </body>
49 | <html>


--------------------------------------------------------------------------------
/13-20/demo64_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 18
 7 |     //for loops with array
 8 | 
 9 |     var num = 19;
10 | 
11 |     // initilization ; condition ; statement
12 |     /*
13 |     // optional
14 |     for(  ;   ;   ){
15 | 
16 |     }
17 |     */
18 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad"];
19 | 
20 |     var myCity = prompt("Enter your city");
21 | 
22 |     for(var i=0; i<5; i++){
23 |         if(myCity === cities[i]){
24 |             alert("City Found");
25 |         }
26 |         else {
27 |             alert("City not found");
28 |         }
29 |     }
30 |   
31 | 
32 | </script>
33 | 
34 | 
35 | </head>
36 | <body>
37 | 
38 | </body>
39 | <html>


--------------------------------------------------------------------------------
/13-20/demo65.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 19
 7 |     //for loops with array
 8 |     // matchFound check
 9 | 
10 |     
11 | 
12 |     // initilization ; condition ; statement
13 |     /*
14 |     // optional
15 |     for(  ;   ;   ){
16 | 
17 |     }
18 |     */
19 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad"];
20 | 
21 |     
22 |     //var myCity = "Islamabad"; (Input from user)
23 |     
24 |     var myCity = prompt("Enter your City");
25 |     var matchFound = "no";
26 | 
27 |     for(var i=0; i<5; i++){
28 |         if(myCity === cities[i]){
29 |             alert("City Found");
30 |             matchFound = "yes";
31 |         }
32 |     }
33 | 
34 |     if(matchFound === "no"){
35 |         alert("Your city is not in the list");
36 |     }
37 | 
38 | </script>
39 | 
40 | 
41 | </head>
42 | <body>
43 | 
44 | </body>
45 | <html>


--------------------------------------------------------------------------------
/13-20/demo66.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 19
 7 |     //for loops with array
 8 |     // bool value
 9 | 
10 |     
11 | 
12 |     // initilization ; condition ; statement
13 |     /*
14 |     // optional
15 |     for(  ;   ;   ){
16 | 
17 |     }
18 |     */
19 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad"];
20 | 
21 |     var myCity = "Islamabad";
22 |     var matchFound = false;
23 | 
24 |     for(var i=0; i<5; i++){
25 |         if(myCity === cities[i]){
26 |             alert("City Found");
27 |             matchFound = true;
28 |         }
29 |     }
30 | 
31 |     if(matchFound === false){
32 |         alert("Your city is not in the list");
33 |     }
34 | 
35 | </script>
36 | 
37 | 
38 | </head>
39 | <body>
40 | 
41 | </body>
42 | <html>


--------------------------------------------------------------------------------
/13-20/demo67.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 19
 7 |     //for loops with array
 8 |     // break
 9 | 
10 |     
11 | 
12 |     // initilization ; condition ; statement
13 |     /*
14 |     // optional
15 |     for(  ;   ;   ){
16 | 
17 |     }
18 |     */
19 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad"];
20 | 
21 |     var myCity = "Islamabad";
22 |     var matchFound = false;
23 | 
24 |     for(var i=0; i<5; i++){
25 |         if(myCity === cities[i]){
26 |             alert("City Found");
27 |             matchFound = true;
28 |             break;
29 |         }
30 |         //alert(i);
31 |     }
32 | 
33 |     if(matchFound === false){
34 |         alert("Your city is not in the list");
35 |     }
36 | 
37 | </script>
38 | 
39 | 
40 | </head>
41 | <body>
42 | 
43 | </body>
44 | <html>


--------------------------------------------------------------------------------
/13-20/demo68.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 19
 7 |     //for loops with array
 8 |     // array length
 9 | 
10 |     
11 | 
12 |     // initilization ; condition ; statement
13 |     /*
14 |     // optional
15 |     for(  ;   ;   ){
16 | 
17 |     }
18 |     */
19 |     var cities = ["Karachi","Lahore","Islamabad","Peshawar","Hyderabad","Quetta"];
20 | 
21 |     var myCity = "Islamabad";
22 |     var matchFound = false;
23 |     var numLength = cities.length;
24 | 
25 |     for(var i=0; i< numLength ; i++){
26 |         if(myCity === cities[i]){
27 |             alert("City Found");
28 |             matchFound = true;
29 |             break;
30 |         }
31 |         //alert(i);
32 |     }
33 | 
34 |     if(matchFound === false){
35 |         alert("Your city is not in the list");
36 |     }
37 | 
38 | </script>
39 | 
40 | 
41 | </head>
42 | <body>
43 | 
44 | </body>
45 | <html>


--------------------------------------------------------------------------------
/13-20/demo69.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 20
 7 |     //nested for loops
 8 | 
 9 |     // initilization ; condition ; statement
10 |     /*
11 |     // optional
12 |     for(  ;   ;   ){
13 | 
14 |     }
15 |     */
16 |     
17 |    for(var i=0 ; i < 3; i++ ){
18 | 
19 |        for(var j=0 ; j < 2 ; j++) {
20 |            alert(i +" - "+j);
21 |        }
22 |        //
23 |        //
24 |    }
25 | 
26 | //
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/13-20/demo70.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 20
 7 |     //nested for loops
 8 | 
 9 |     // initilization ; condition ; statement
10 |     /*
11 |     // optional
12 |     for(  ;   ;   ){
13 | 
14 |     }
15 |     */
16 |     var product = ["Shirt ", "Trouser ", "Jacket "];
17 |     var complimentaryProduct = ["Pen", "keychain", "Tie"];
18 | 
19 |    for(var i=0 ; i < product.length; i++ ){
20 |               
21 |        for(var j=0 ; j < complimentaryProduct.length; j++) {
22 |            alert(product[i] +" -- "+ complimentaryProduct[j]);
23 |        }
24 |        
25 |    }
26 | 
27 | 
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | <html>


--------------------------------------------------------------------------------
/21To25/demo71.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 21
 7 |         //Changing case
 8 | 
 9 |         var cities = ["Karachi", "Lahore", "Islamabd", "Hyderabad"];
10 | 
11 |         var myCity = "KarAchi"
12 |         alert(myCity.toUpperCase());
13 |         alert(myCity.toLowerCase());
14 | 
15 |         for (var i = 0; i < cities.length; i++) {
16 |             if (cities[i] === myCity) {
17 |                 alert("Yes Found");
18 |             }
19 |         }
20 | 
21 |         // alert: ?? 
22 | 
23 |     </script>
24 | 
25 | 
26 | </head>
27 | 
28 | <body>
29 | 
30 | </body>
31 | <html>


--------------------------------------------------------------------------------
/21To25/demo72.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 21
 7 |     //Changing case
 8 | 
 9 |     var cities = ["Karachi","Lahore","Islamabd","Hyderabad"];
10 | 
11 |     var myCity = "KarAchI"
12 |     //alert(myCity.toUpperCase());
13 |     //alert(myCity.toLowerCase());
14 | 
15 |     for(var i=0;i< cities.length;i++){
16 |         //if(cities[i].toLowerCase() === myCity.toLowerCase()){
17 |         if(cities[i].toUpperCase() === myCity.toUpperCase()){    
18 |             alert("Yes Found");
19 |         }
20 |     }
21 | 
22 | 
23 | </script>
24 | 
25 | 
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | <html>


--------------------------------------------------------------------------------
/21To25/demo73.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 21
 7 |     //Changing case
 8 | 
 9 | 
10 |     var myCity = "KarAchI"
11 |     alert(myCity.toUpperCase());
12 |     alert(myCity.toLowerCase());
13 | 
14 | 
15 | </script>
16 | 
17 | 
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | <html>


--------------------------------------------------------------------------------
/21To25/demo74.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 22
 7 |     //slice
 8 | 
 9 | 
10 |     var myCity = "karachi"
11 | 
12 |     // how to gt length...
13 |     var length = myCity.lenth; // ?
14 | 
15 |     var newText = myCity.slice(0,3);   // kar
16 |     alert(newText);
17 | 
18 |     var newText2 = myCity.slice(2,6); // rach
19 |     alert(newText2);
20 | 
21 |     var newText3 = myCity.slice(2); // rachi
22 |     alert(newText3);
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/21To25/demo75.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 22
 7 |     //slice
 8 | 
 9 |     var a = "karachi";
10 |     var b = a.toUpperCase();
11 |     alert(a);
12 |     alert(b);
13 | 
14 | </script>
15 | 
16 | 
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | <html>


--------------------------------------------------------------------------------
/21To25/demo76.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 22
 7 |     //slice
 8 | 
 9 | 
10 |     var myCity = "kArAchI"
11 |     alert(myCity);
12 |     var firstChar = myCity.slice(0,1); // k
13 |     var otherChar = myCity.slice(1); // ArAchI
14 |     alert(firstChar);
15 |     alert(otherChar);
16 |     firstChar = firstChar.toUpperCase(); // K
17 |     otherChar = otherChar.toLowerCase(); // arachi
18 |     var updatedCity = firstChar + otherChar;
19 |     alert(updatedCity); // Karachi
20 |    
21 | 
22 | 
23 | 
24 | </script>
25 | 
26 | 
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | <html>


--------------------------------------------------------------------------------
/21To25/demo77.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 22
 7 |     //length
 8 | 
 9 |     var myCity = "Karachi"
10 |     alert(myCity.length); // 1 , 7
11 | 
12 | </script>
13 | 
14 | 
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | <html>


--------------------------------------------------------------------------------
/21To25/demo78.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 22
 7 |         //length
 8 | 
 9 |         var month = prompt("Enter a month");
10 |         //var month = "Nov";
11 |         alert(month);
12 |         var monthLength = month.length;
13 |         alert(monthLength);
14 | 
15 |         if (monthLength > 3 || month.toLowerCase() == 'may') {
16 |             alert("Correct input");
17 |             alert(month.slice(0, 3));
18 |         } else {
19 |             alert("Wrong input");
20 |             alert(month);
21 |         }
22 | 
23 |     </script>
24 | 
25 | 
26 | </head>
27 | 
28 | <body>
29 | 
30 | </body>
31 | <html>


--------------------------------------------------------------------------------
/21To25/demo79.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // indexOf
 8 | 
 9 |     var text = "The quick brown fox jumps over the lazy dog";
10 |     
11 |     var indexVal1 = text.indexOf("brown");
12 |     var indexVal2 = text.indexOf("over");
13 |     var indexVal3 = text.indexOf("test");
14 |     var indexVal4 = text.indexOf("b");
15 |     var indexVal5 = text.indexOf("B");
16 |     var indexVal6 = text.indexOf("o"); // multiple existance
17 | 
18 |     alert(indexVal1);
19 |     alert(indexVal2);
20 |     alert(indexVal3);
21 |     alert(indexVal4);
22 |     alert(indexVal5);
23 |     alert(indexVal6);
24 | 
25 |     
26 | 
27 | 
28 |     
29 | 
30 | 
31 | </script>
32 | 
33 | 
34 | </head>
35 | <body>
36 | 
37 | </body>
38 | <html>


--------------------------------------------------------------------------------
/21To25/demo80.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // indexOf
 8 | 
 9 |     var text = "The quick brown fox jumps over the lazy dog";
10 |     
11 |     var firstCharIndex = text.indexOf("brown");
12 |     alert(firstCharIndex);
13 |     if(firstCharIndex !== -1){
14 |         var a = text.slice(0,firstCharIndex);
15 |         var b = text.slice(firstCharIndex+5);
16 |         alert(a);
17 |         alert(b);
18 |         alert(text);
19 | 
20 |         var c = a + "white"+ b;
21 |         alert(c);
22 | 
23 |     }
24 | 
25 |     //alert(indexVal6);
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | <html>


--------------------------------------------------------------------------------
/21To25/demo81.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // indexOf
 8 | 
 9 |     var text = "The quick fox jumps over the brown lazy dog";
10 |     
11 |     var firstCharIndex = text.indexOf("brown");
12 |     alert(firstCharIndex);
13 |     if(firstCharIndex !== -1){
14 |         var a = text.slice(0,firstCharIndex);
15 |         var b = text.slice(firstCharIndex+5);
16 |         alert(a);
17 |         alert(b);
18 |         alert(text);
19 | 
20 |         var c = a + "white"+ b;
21 |         alert(c);
22 | 
23 |     }
24 | 
25 |     //alert(indexVal6);
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | <html>


--------------------------------------------------------------------------------
/21To25/demo82.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // lastIndexOf
 8 | 
 9 |     var text = "The quick fox jumps over the brown lazy dog";
10 |     
11 |     var firstCharIndex = text.indexOf("o");
12 |     var lastCharIndex = text.lastIndexOf("o");
13 |     alert(firstCharIndex);
14 |     alert(lastCharIndex);
15 |     
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/21To25/demo83.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // indexOf
 8 |     
 9 | 
10 |     var text = "The quick brown fox jumps over the  lazy dog";
11 |     
12 |     var firstCharIndex = text.indexOf("o",19);
13 |     alert(firstCharIndex);   
14 | 
15 | 
16 | </script>
17 | 
18 | 
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | <html>


--------------------------------------------------------------------------------
/21To25/demo84.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 23
 7 |     // indexOf
 8 |     // Assignment
 9 |     
10 |     var text = "The quick brown fox jumps over the lazy dog";
11 |     var startIndex = 0;
12 |     var counter = 0;
13 | 
14 |     for(var a = 0; a < text.length ;a++){
15 |         console.log(a);
16 |         var newIndex = text.indexOf("e",startIndex);
17 |         if(newIndex !== -1){
18 |             counter++;
19 |             startIndex = newIndex + 1;
20 |             console.log('macthed ', a);
21 |         } else {
22 |             break;
23 |         }
24 | 
25 |     }
26 | 
27 |     
28 |     alert(counter);   
29 | 
30 | 
31 | </script>
32 | 
33 | 
34 | </head>
35 | <body>
36 | 
37 | </body>
38 | <html>


--------------------------------------------------------------------------------
/21To25/demo85.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 24
 7 |     // charAt
 8 | 
 9 |     var text = "The quick brown fox jumps over the lazy dog";
10 |     alert(text.charAt(13));
11 | 
12 | </script>
13 | 
14 | 
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | <html>


--------------------------------------------------------------------------------
/21To25/demo86.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 25
 7 |     // replace
 8 | 
 9 |     var text = "The quick brown fox jumps over the lazy dog";
10 |     var nextText1 = text.replace("brown","white");
11 | 
12 |     var nextText2 = text.replace("hello","white");
13 |     
14 |     alert(text);
15 |     alert(nextText1);
16 |     alert(nextText2);
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/21To25/demo87.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 25
 7 |     // replace
 8 | 
 9 |     var text = "the quick brown the fox jumps over the lazy dog";
10 |     var nextText1 = text.replace("the","not");
11 |     var nextText2 = text.replace(/the/g,"not");
12 |     
13 |     alert(text);
14 |     alert(nextText1);
15 |     alert(nextText2);
16 |     
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/26To34/demo100.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 29
 7 |     // Converting strings to numbers, numbers to strings
 8 | 
 9 |   var num = 1548
10 |   var newVal = num + 1;
11 |   alert(num);
12 |   alert(newVal);
13 | 
14 |   var numString = num.toString();
15 |   alert(numString.length);
16 |   
17 | 
18 | /*
19 |     var a = "34";
20 |     alert(a);
21 | 
22 |     var b = Number(a) + 4;
23 |     alert(b);
24 |   */ 
25 |     
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/26To34/demo101.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 30
 7 |     // Controlling the length of decimals
 8 | 
 9 |     var price =  9.95;
10 |     var tax = 6.5;
11 |     var total = price * 6.5 /100;
12 | 
13 |     alert(total);
14 |     var fixedValue = total.toFixed(2);
15 |     alert(fixedValue);
16 |     
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/26To34/demo102.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 31
 7 |     // Getting the current date and time
 8 | 
 9 | 
10 |     var rightNow = new Date();
11 |     alert(rightNow);
12 | 
13 | 
14 | </script>
15 | 
16 | 
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | <html>


--------------------------------------------------------------------------------
/26To34/demo103.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 31
 7 |     // Getting the current date and time
 8 | 
 9 | 
10 |     var rightNow = new Date();
11 |     alert(rightNow);
12 | 
13 |     var a = "Hello World";
14 |     //alert(a.indexOf("e"));
15 |     
16 |     var b = 45;
17 |     var c = b.toString();
18 | 
19 |     // Error 
20 |     //alert(rightNow.indexOf("Nov17"));
21 | 
22 |     var dateString = rightNow.toString();
23 |     alert(dateString);
24 | 
25 |     //var dateString = rightNow.toString();
26 | 
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/26To34/demo104.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 31
 7 |     // Getting the current date and time
 8 | 
 9 | 
10 |     var rightNow = new Date();
11 |     alert(rightNow);
12 | 
13 |     
14 |     var b = rightNow.getDay();
15 |     alert(b);
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | <html>


--------------------------------------------------------------------------------
/26To34/demo105.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 31
 7 |     // Getting the current date and time
 8 | 
 9 |     var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
10 | 
11 |     var rightNow = new Date();
12 |     alert(rightNow);
13 | 
14 |     var b = rightNow.getDay();
15 |     alert(b);
16 | 
17 |     var c = 6;
18 |     var d = 4;
19 |     //alert(days[d]);
20 |     alert(days[b]);
21 | 
22 |     //alert(days[4]);
23 | 
24 | </script>
25 | 
26 | 
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | <html>


--------------------------------------------------------------------------------
/26To34/demo106.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 32
 7 |     // Extracting parts of the date and time
 8 | 
 9 |     var rightNow = new Date();
10 |     alert(rightNow);
11 | 
12 |     var currentDay = rightNow.getDay();
13 |     alert(currentDay);
14 | 
15 |     var currentMonth = rightNow.getMonth();
16 |     alert(currentMonth);
17 | 
18 |     var currentDate = rightNow.getDate();
19 |     alert(currentDate);
20 | 
21 |     var currentYear = rightNow.getFullYear();
22 |     alert(currentYear);
23 | 
24 |     var currentHour = rightNow.getHours();
25 |     alert(currentHour);
26 | 
27 |     var currentMinute = rightNow.getMinutes();
28 |     alert(currentMinute);
29 | 
30 |     var currentSeconds = rightNow.getSeconds();
31 |     alert(currentSeconds);
32 | 
33 |     var currentMills = rightNow.getMilliseconds();
34 |     alert(currentMills);
35 | 
36 |     var currentTime = rightNow.getTime();
37 |     alert(currentTime);
38 | 
39 | 
40 | 
41 | 
42 | </script>
43 | 
44 | 
45 | </head>
46 | <body>
47 | 
48 | </body>
49 | <html>


--------------------------------------------------------------------------------
/26To34/demo107.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 32
 7 |     // Extracting parts of the date and time
 8 | 
 9 |     var age = 2;
10 |     var ageInDays = age * 365;
11 |     alert(ageInDays);
12 | 
13 |     var ageInHours = age * 365 * 24;
14 |     alert(ageInHours);
15 | 
16 |     //var ageInMinutes = ageInHours * 60;
17 |     var ageInMinutes = age * 365 * 24 * 60;
18 |     alert(ageInMinutes);
19 | 
20 |     var ageInSeconds = age * 365 * 24 * 60 * 60;
21 |     alert(ageInSeconds);
22 | 
23 |     var ageInMills = age * 365 * 24 * 60 * 60 * 1000;
24 |     alert(ageInMills);
25 | 
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | <html>


--------------------------------------------------------------------------------
/26To34/demo108.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     // Chap 33
 7 |     // Specifying a date and time
 8 | 
 9 |     var rightNow = new Date();
10 |     alert(rightNow);
11 |     //rightNow.getTime();
12 | 
13 |     var otherDay = new Date("June 11, 2018");
14 |     alert(otherDay);
15 | 
16 |     var msDiff = otherDay.getTime() - rightNow.getTime();
17 |     alert(msDiff);
18 | 
19 |     var diffInDays = msDiff / (1000 * 60 * 60 * 24);
20 |     alert(diffInDays);
21 | 
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/26To34/demo109.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 33
 7 |     // Specifying a date and time
 8 | 
 9 |     var rightNow = new Date();
10 |     alert(rightNow);
11 |     rightNow.getTime();
12 | 
13 |     var birthdayCelebrationDate = new Date("June 11, 2017 19:00:00");
14 |     alert(birthdayCelebrationDate);
15 | 
16 |     var msDiff = birthdayCelebrationDate.getTime() - rightNow.getTime();
17 |     alert(msDiff);
18 | 
19 |     var diffInDays = msDiff / (1000 * 60 * 60 * 24);
20 |     alert(diffInDays);
21 | 
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/26To34/demo110.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 34
 7 |     // Changing elements of a date and time
 8 | 
 9 |     var rightNow = new Date();
10 |     alert(rightNow);
11 | 
12 |     rightNow.setFullYear(2025);
13 |     alert(rightNow);
14 |     
15 |     rightNow.setMonth(5);
16 |     alert(rightNow);
17 |     
18 | 
19 | 
20 | 
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/26To34/demo88.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 26
 7 |     // rounding numbers
 8 | 
 9 |     var a = Math.round(3.4);
10 |     alert(a);
11 | 
12 |     var b = Math.round(3.5);
13 |     alert(b);
14 | 
15 |     var c = Math.round(3.7);
16 |     alert(c);
17 | 
18 |     var d = Math.round(-3.7);
19 |     alert(d);
20 | 
21 |     var e = Math.round(-3.5);
22 |     alert(e);
23 | 
24 |     var f = Math.round(-3.2);
25 |     alert(f);
26 |     
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/26To34/demo89.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 26
 7 |     // rounding numbers
 8 | 
 9 |     var a = Math.round(0.0678437);
10 |     alert("A : "+a);
11 | 
12 |     var b = Math.round(.2678437);
13 |     alert("B : "+b);
14 | 
15 |     var c = Math.round(.6678437);
16 |     alert("C : "+c);
17 | 
18 | 
19 |    
20 |     
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | <html>


--------------------------------------------------------------------------------
/26To34/demo90.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 26
 7 |     // rounding numbers
 8 | 
 9 |     var a = Math.floor(3.4);
10 |     alert("A : "+a);
11 | 
12 |     var b = Math.floor(3.9);
13 |     alert("B : "+b);
14 | 
15 |     var c = Math.ceil(3.4);
16 |     alert("C : "+c);
17 | 
18 |     var d = Math.ceil(3.9);
19 |     alert("D : "+d);
20 | 
21 | 
22 |    
23 |     
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/26To34/demo91.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 27
 7 |     // Generating random numbers
 8 | 
 9 |     var a = Math.random();
10 |     alert(a);
11 |     var b = a*10;
12 |     var c = a*100;
13 |     var d = a*1000;
14 | 
15 | 
16 |     alert("A : "+a+" -- B : "+b);
17 |     alert("C : "+c+" -- D : "+d);
18 | 
19 | 
20 | 
21 |    
22 |     
23 | 
24 | </script>
25 | 
26 | 
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | <html>


--------------------------------------------------------------------------------
/26To34/demo92.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 27
 7 |     // Generating random numbers
 8 | 
 9 |     var bigDecimal = Math.random();
10 |     var improvedNum = (bigDecimal * 6)
11 |     var addOneInNum = improvedNum + 1;
12 |     var numberOfStars = Math.floor(addOneInNum);
13 | 
14 |     alert(bigDecimal + " -- " +improvedNum + " -- "+ addOneInNum + " -- "+numberOfStars);
15 |     
16 | 
17 | 
18 |    
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | <html>


--------------------------------------------------------------------------------
/26To34/demo93.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |     var a = 23;
10 |     var b = "23";
11 | 
12 |     var c = b + 5;
13 |     var d = a + 5;
14 | 
15 |     alert(c);
16 |     alert(d);
17 |     
18 | 
19 | 
20 |    
21 |     
22 | 
23 | </script>
24 | 
25 | 
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | <html>


--------------------------------------------------------------------------------
/26To34/demo94.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |     var a = prompt("Enter your age");
10 |    
11 |     var b = a + 5;
12 | 
13 |     alert(a);
14 |     alert(b);
15 |     
16 | 
17 | 
18 |    
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | <html>


--------------------------------------------------------------------------------
/26To34/demo95.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |     var currentAge = prompt("Enter your age.");
10 |     var eligibleAgeToVote = currentAge - 18;
11 |     var concatNumbers = currentAge + 18;
12 | 
13 |     alert(eligibleAgeToVote);
14 |     alert(concatNumbers);
15 |     
16 | 
17 | 
18 |    
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | <html>


--------------------------------------------------------------------------------
/26To34/demo96.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |    var profit = "200" - "150";
10 |    var profit1 = "200" - "duck";
11 | 
12 |     alert(profit);
13 | 
14 |     alert(profit1);
15 | 
16 |    
17 |     
18 | 
19 | </script>
20 | 
21 | 
22 | </head>
23 | <body>
24 | 
25 | </body>
26 | <html>


--------------------------------------------------------------------------------
/26To34/demo97.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |   var currentAge = prompt("Enter your age.");
10 |   var qualifyingAge = parseInt(currentAge) + 1;
11 |   var ageStr = currentAge + 1;
12 | 
13 |   alert(currentAge);
14 |   alert(qualifyingAge);
15 |   alert(ageStr);
16 | 
17 | 
18 |    
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | <html>


--------------------------------------------------------------------------------
/26To34/demo98.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 28
 7 |     // Converting strings to integers and decimals
 8 | 
 9 |   var num = "2.333"
10 |   var convertedNum = parseInt(num);
11 |   var convertedNumDecimal = parseFloat(num);
12 |   var newVal = convertedNumDecimal + 1;
13 | 
14 |   alert(num);
15 |   alert(convertedNum);
16 |   alert(convertedNumDecimal);
17 |   alert(newVal);
18 | 
19 | 
20 |    
21 |     
22 | 
23 | </script>
24 | 
25 | 
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | <html>


--------------------------------------------------------------------------------
/26To34/demo99.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 29
 7 |     // Converting strings to numbers, numbers to strings
 8 | 
 9 |   var num = "2.333"
10 |   var convertedNum = Number(num);
11 |   var convertedNumDecimal = Number(num);
12 |   var newVal = convertedNumDecimal + 1;
13 | 
14 |   alert(num);
15 |   alert(convertedNum);
16 |   alert(convertedNumDecimal);
17 |   alert(newVal);
18 | 
19 | 
20 | /*
21 |     var a = "34";
22 |     alert(a);
23 | 
24 |     var b = Number(a) + 4;
25 |     alert(b);
26 |   */ 
27 |     
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | <html>


--------------------------------------------------------------------------------
/35To38/demo111.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 35
 7 |     // Functions
 8 | 
 9 |     //keyword function
10 |     // function name -- any user friendly name
11 |     // parenthesis
12 |     // curly brackets -- function body
13 | 
14 |     // SYNTAX: function N () { }
15 | 
16 |     function hello() {
17 | 
18 |         alert("Hello World");
19 | 
20 |     }
21 | 
22 | 
23 | 
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | <html>


--------------------------------------------------------------------------------
/35To38/demo112.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 35
 7 |     // Functions
 8 | 
 9 |     function hello(){
10 |         alert("Hello World");
11 |     }
12 | 
13 |     hello();
14 |     //hello();
15 | 
16 | 
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | <html>


--------------------------------------------------------------------------------
/35To38/demo113.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 35
 7 |     // Functions
 8 |     // Calcuating value
 9 | 
10 |     function calculateValue(){
11 |         var a = 6;
12 |         var b = 7;
13 |         var c = a + b;
14 |         alert(c);
15 |     }
16 | /*
17 |     function calculateValueNew(){
18 |         var a = 5;
19 |         var b = 2;
20 |         var c = a + b;
21 |         alert(c);
22 |     }
23 |     */
24 |     calculateValue();
25 |     calculateValue();
26 |     calculateValue();
27 |     
28 | 
29 | 
30 | 
31 | </script>
32 | 
33 | 
34 | </head>
35 | <body>
36 | 
37 | </body>
38 | <html>


--------------------------------------------------------------------------------
/35To38/demo114.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 36
 7 |     // Functions
 8 |     // passing them data
 9 | 
10 |     function calculateValue(first, second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         alert(c);
15 |     }
16 |     
17 |     calculateValue(3,5);
18 |     calculateValue(6,7);
19 |     calculateValue(63,7);
20 |     //calculateValue();
21 |     //calculateValue();
22 |     
23 | 
24 | 
25 | 
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | <html>


--------------------------------------------------------------------------------
/35To38/demo114_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 36
 7 |     // Functions
 8 |     // passing them data
 9 | 
10 |     var a = "Hello";
11 | 
12 |     var b = "world";
13 | 
14 |     var c = 5;
15 |     
16 | 
17 |     function greetUser(greeting) {
18 |         console.log(greeting)
19 |         // alert(greeting);
20 |     }
21 | 
22 |     greetUser("Hello, there");
23 |     greetUser("Hello World");
24 |     greetUser("Hello, How are you?");
25 |     greetUser(111111111111111);
26 |     greetUser(true);
27 |     greetUser([1,1,3,3,4,55]);
28 | 
29 |     var greetingMsg = "Hello, new, message";
30 |     greetUser(greetingMsg[2]);
31 | 
32 | </script>
33 | 
34 | 
35 | </head>
36 | <body>
37 | 
38 | </body>
39 | <html>


--------------------------------------------------------------------------------
/35To38/demo114_2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 36
 7 |     // Functions
 8 |     // passing them data
 9 | 
10 |     function showMessage(m, string, num){
11 |         alert(m + string + num);
12 |     }
13 | 
14 |     var month = "March";
15 |     showMessage(month, "'s winner number is ", 23)
16 | </script>
17 | 
18 | 
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | <html>


--------------------------------------------------------------------------------
/35To38/demo115.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 |     <script>
 6 |         //Chap 36
 7 |         // Functions
 8 |         // passing them data
 9 | 
10 |         function cafePiyala(typeOfTea) {
11 |             alert("Making " + typeOfTea)
12 |             alert("Tea is ready");
13 |         }
14 | 
15 |         cafePiyala("Kashmiri Tea");
16 |         cafePiyala("Green Tea");
17 |         cafePiyala("Elaichi Tea");
18 |         cafePiyala("Lemon Grass Tea");
19 | 
20 |     </script>
21 | 
22 | 
23 | </head>
24 | 
25 | <body>
26 | 
27 | </body>
28 | <html>


--------------------------------------------------------------------------------
/35To38/demo116.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 |     console.log('Running Function....')
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         //alert(c);
15 |         return "[1,2,3,4,6,7]";
16 | 
17 |         console.log('Function after return.....');
18 |         //
19 |         ///
20 |         //
21 |         //
22 | 
23 |     }
24 |     
25 | 
26 |     var d = calculateValue(3,5)
27 | 
28 |     console.log(d);
29 | 
30 |     // alert(d);
31 |     
32 | 
33 | 
34 | 
35 | </script>
36 | 
37 | 
38 | </head>
39 | <body>
40 | 
41 | </body>
42 | <html>


--------------------------------------------------------------------------------
/35To38/demo116_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         //alert(c);
15 |         return c;
16 |     }
17 | 
18 |     calculateValue(4,5);
19 | 
20 | 
21 |     
22 |     var d = calculateValue(3,5);
23 |     
24 |     d = d + 5;
25 | 
26 |     var e = calculateValue(7,2);
27 |     e = e +3;
28 | 
29 |     alert(d);
30 |     
31 | 
32 | 
33 | 
34 | </script>
35 | 
36 | 
37 | </head>
38 | <body>
39 | 
40 | </body>
41 | <html>


--------------------------------------------------------------------------------
/35To38/demo117.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions    
 8 |     // passing data back from them
 9 | 
10 |     function judgeMarathon(){
11 |         
12 |         alert("Reviewing Application");
13 |         alert("A+")
14 |         return "A+";
15 |     }
16 |     
17 |     var result = judgeMarathon();
18 | 
19 |     if(result === "A+"){
20 |         alert("Reward Rs. 25000");
21 |     }
22 |     else if(result === "A"){
23 |         alert("Reward Rs. 20000");
24 |     }
25 |     else if(result === "B"){
26 |         alert("Reward Rs. 10000")
27 |     }
28 |     else {
29 |         alert("No Reward")
30 |     }
31 | 
32 | 
33 | 
34 | 
35 | </script>
36 | 
37 | 
38 | </head>
39 | <body>
40 | 
41 | </body>
42 | <html>


--------------------------------------------------------------------------------
/35To38/demo118.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         //alert(c);
15 |         return c;
16 |     }
17 |     
18 |     //1
19 |     calculateValue(6,7);
20 | 
21 |     //2
22 |     var d = calculateValue(3,5);
23 |     alert(d);
24 |     
25 |     //3
26 |     alert(calculateValue(4,5));
27 | 
28 |     //4
29 |     var e = 23;
30 |     var f = e + calculateValue(5,7);
31 |     alert(f);
32 | 
33 | </script>
34 | 
35 | 
36 | </head>
37 | <body>
38 | 
39 | </body>
40 | <html>


--------------------------------------------------------------------------------
/35To38/demo119.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         //alert(c);
15 |         return c;
16 |     }
17 | 
18 |     function multiply(multiple, value){
19 |         return value * multiple;
20 |     }
21 |     var d = calculateValue(3,5);
22 |     var e = multiply(2,5);
23 |     var f = multiply(2,d);
24 |     var g = multiply(2 , calculateValue(2,5));
25 |     alert(g);
26 |             
27 |     var i = multiply(2 , calculateValue(7,2));
28 |     alert(i);
29 | 
30 |     var h = calculateValue(3, multiply(2,5));
31 |     alert(h);
32 | 
33 |     
34 | 
35 | </script>
36 | 
37 | 
38 | </head>
39 | <body>
40 | 
41 | </body>
42 | <html>


--------------------------------------------------------------------------------
/35To38/demo120.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + b;
14 |         //alert(c);
15 |         return c;
16 |     }
17 | 
18 |     function multiply(multiple, value){
19 |         var e = multiple * calculateValue(3,value);
20 |         return e;
21 |     }
22 | 
23 |     var d = multiply(2,6);
24 |     alert(d);
25 |    
26 | 
27 |     
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | <html>


--------------------------------------------------------------------------------
/35To38/demo121.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(first,second){
11 |         var a = first;
12 |         var b = second;
13 |         var c = a + multiply(2 , b);
14 |         //alert(c);
15 |         return c;
16 |     }
17 | 
18 |     function multiply(multiple, value){
19 |         return multiple * value;
20 |     }
21 | 
22 |     var d = calculateValue(3,6);
23 |     alert(d);
24 |    
25 | 
26 |     
27 | 
28 | </script>
29 | 
30 | 
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | <html>


--------------------------------------------------------------------------------
/35To38/demo122.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 37
 7 |     // Functions
 8 |     // passing data back from them
 9 | 
10 |     function calculateValue(one, two, three){
11 |         return one - sum(two, three);
12 |     }
13 | 
14 |     function sum(a, b){
15 |         return a + b;
16 |     }
17 | 
18 |     var d = calculateValue(4,6,2);
19 |     alert(d);
20 |     
21 | 
22 | </script>
23 | 
24 | 
25 | </head>
26 | <body>
27 | 
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/35To38/demo123.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     var a = 5;
11 | 
12 |     function calculateValue(){
13 |         var b = 5;
14 |         var c = a + b;
15 |         alert(c);
16 |     }
17 | 
18 |     calculateValue();
19 |     alert(a);
20 | 
21 | 
22 |   
23 | 
24 |     
25 | 
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/35To38/demo124.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     var a = 5;
11 | 
12 |     function calculateValue(){
13 |         var b = 5;
14 |         var c = 7;
15 |         a = b + c;
16 |     }
17 | 
18 |     alert(a);
19 |     calculateValue();
20 |     alert(a);
21 | 
22 | 
23 |   
24 | 
25 |     
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/35To38/demo125.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     
11 | 
12 |     function calculateValue(){
13 |         var a = 5;
14 |         var b = 5;
15 |         var c = 7;
16 |         a = b + c;
17 |         console.log(a);
18 |     }
19 | 
20 |     // alert(a);
21 |     calculateValue();
22 |     alert(a);
23 | 
24 | 
25 |   
26 | 
27 |     
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/35To38/demo126.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     
11 |     
12 |     function calculateValue(){
13 |         var a = 5;
14 |         var b = 5;
15 |         var c = 7;
16 |         a = b + c;
17 |         alert(a);
18 |     }
19 | 
20 |     //alert(a);
21 |     calculateValue();
22 |     alert(a);
23 | 
24 | 
25 |   
26 | 
27 |     
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/35To38/demo127.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     b = 6;
11 |     
12 |     function calculateValue(){
13 |         a = 5;
14 |         var c = 7;
15 |         console.log('func a', a);
16 |         console.log('func c', c);
17 |         
18 |     }
19 | 
20 |     calculateValue();
21 | 
22 |     console.log('a', a);
23 |     console.log('b', b);
24 |     console.log('c', c);
25 |     
26 | 
27 |     
28 | 
29 | </script>
30 | 
31 | 
32 | </head>
33 | <body>
34 | 
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/35To38/demo128.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     b = 6;
11 |     
12 |     function calculateValue(){
13 |         a = 5;
14 |         var c = 7;
15 |         alert(a);
16 |         alert(c);
17 |         
18 |     }
19 | 
20 |     //calculateValue();
21 | 
22 |     alert(a);
23 |     alert(b);
24 |     
25 | 
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/35To38/demo129.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     b = 6;
11 |     
12 |     function calculateValue(){
13 |         a = 5;
14 |         var c = 7;
15 |         alert(a);
16 |         alert(c);
17 |         
18 |     }
19 | 
20 |     //calculateValue();
21 | 
22 |     
23 |     alert(b);
24 |     alert(a);
25 |     
26 | 
27 | </script>
28 | 
29 | 
30 | </head>
31 | <body>
32 | 
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/35To38/demo130.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 38
 7 |     // Functions
 8 |     // Local vs Global
 9 | 
10 |     var a = 6;
11 |     
12 |     function calculateValue(){
13 |         var a = 5;
14 |         alert(a);
15 |         
16 |     }
17 | 
18 |     calculateValue();
19 |     alert(a);
20 |     
21 | 
22 |     
23 | 
24 | </script>
25 | 
26 | 
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/35To38/demo130_1.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <html>
 3 | <head>
 4 | 
 5 | <script>
 6 | 
 7 |     //Chap 35
 8 |     // Functions
 9 | /*
10 |     function calculateValue(){
11 |         var a = 5;
12 |         alert(a);
13 |         
14 |     }
15 |     calculateValue();
16 | */
17 |     var calc = function (){
18 |         var a = 5;
19 |         alert(a);
20 |     }
21 | 
22 |     calc();
23 | 
24 |     var calc2 = function calculate(){
25 |         var a = 5;
26 |         alert(a);
27 |     }
28 | 
29 |     calc2();
30 | 
31 |     
32 | 
33 | </script>
34 | 
35 | 
36 | </head>
37 | <body>
38 | 
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/38To42/demo131.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 39 and 40
 7 |     // switch statements
 8 |     
 9 | 
10 |     //if
11 |     var section = "A";
12 |     if(section === "A"){
13 |         alert("Time is 11 AM");
14 |     }
15 |     else if(section === "B"){
16 |         alert("Time is 1 PM");
17 |     }
18 |     else {
19 |         alert("No Class");
20 |     }
21 |     //switch
22 |     switch(section) {
23 |         case "A":
24 |             alert("Time is 11 AM");
25 |             break;
26 |         case "B":
27 |             alert("Time is 1 PM");
28 |             break;
29 |         default :
30 |             alert("No class");
31 |     }
32 | 
33 |     
34 | 
35 | </script>
36 | 
37 | 
38 | </head>
39 | <body>
40 | 
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/38To42/demo132.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 39 and 40
 7 |     // switch statements
 8 |     
 9 | 
10 |     var section = "C";
11 | 
12 |     switch(section) {
13 |         case "A":
14 |             alert("Time is 11 AM");
15 |             break;
16 |         case "B":
17 |             alert("Time is 1 PM");
18 |             break;
19 |         //default :
20 |           //  alert("No class");
21 |     }
22 | 
23 |     
24 | 
25 | </script>
26 | 
27 | 
28 | </head>
29 | <body>
30 | 
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/38To42/demo133.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 39 and 40
 7 |     // switch statements
 8 |     
 9 | 
10 |     var section = "A";
11 | 
12 |     switch(section) {
13 |         case "A":
14 |             alert("Time is 11 AM");
15 |         case "B":
16 |             alert("Time is 1 PM");            
17 |         case "C":
18 |             alert("Time is 3 PM");
19 |             break;
20 |         default :
21 |             alert("No class");
22 |     }
23 | 
24 |     
25 | 
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/38To42/demo134.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 39 and 40
 7 |     // switch statements
 8 |     
 9 | 
10 |     var section = "B";
11 | 
12 |     switch(section) {
13 |         case "A":
14 |             alert("Time is 11 AM");
15 |         case "B":
16 |             alert("Time is 1 PM");            
17 |         case "C":
18 |             alert("Time is 3 PM");
19 |             break;
20 |         default :
21 |             alert("No class");
22 |     }
23 | 
24 |     
25 | 
26 | </script>
27 | 
28 | 
29 | </head>
30 | <body>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/38To42/demo135.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 41
 7 |     // while loops
 8 |     
 9 |     //for
10 |     for(var a = 0;a<2;a++){
11 |         alert("A = "+a);
12 |     }
13 | 
14 |     //while
15 |     var b = 0;
16 |     while(b < 2){
17 |         alert("B = "+b);
18 |         b++;
19 |     }
20 | 
21 | 
22 |     
23 | 
24 | </script>
25 | 
26 | 
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/38To42/demo136.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 42
 7 |     // do while
 8 |     
 9 |     //for
10 |     for(var a = 0; a<2 ; a++){
11 |         alert("A = "+a);
12 |     }
13 | 
14 |     //while
15 |     var b = 0;
16 |     while(b < 2){
17 |         alert("B = "+b);
18 |         b++;
19 |     }
20 | 
21 |     //do while
22 |     var c = 0;
23 |     do {
24 |         alert("C = "+c);
25 |         c++;
26 |     }while(c<2);
27 | 
28 | 
29 |     
30 | 
31 | </script>
32 | 
33 | 
34 | </head>
35 | <body>
36 | 
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/38To42/demo137.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 41
 7 |     // while loops
 8 |     
 9 |     var doContinue = true;
10 |     while(doContinue){
11 |         alert("Hello World");
12 |         doContinue = false;        
13 |     }
14 |     
15 |     
16 | 
17 | </script>
18 | 
19 | 
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/38To42/demo138.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 41
 7 |     // while loops
 8 |     
 9 |     var doContinue = true;
10 |     while(doContinue){
11 |         alert("Hello World");
12 |         var userInput = prompt("Do you want to continue, Press y for Yes or any key for No");
13 |         alert(userInput);
14 |     }
15 |     
16 |     
17 | 
18 | </script>
19 | 
20 | 
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/38To42/demo139.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | <script>
 5 | 
 6 |     //Chap 41
 7 |     // while loops
 8 |     
 9 |     var doContinue = true;
10 |     while(doContinue){
11 |         var userInput = prompt("Do you want to continue, Press y for Yes or any key for No");
12 |         alert(userInput);
13 |         if(userInput !== "y"){
14 |             doContinue = false;
15 |         }
16 |         ///
17 |     }
18 |     
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/43To57/demo140.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     Hello World
 7 | 
 8 |     <script>
 9 | 
10 |     //Chap 43
11 |     //Placing scripts
12 | 
13 |     alert("Hello World");
14 | 
15 | </script>
16 | 
17 | </body>
18 | 
19 | 
20 | </html>


--------------------------------------------------------------------------------
/43To57/demo141.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     
 7 | </body>
 8 | 
 9 | <script src="./demo141.js"></script>
10 | </html>


--------------------------------------------------------------------------------
/43To57/demo141.js:
--------------------------------------------------------------------------------
1 | 
2 | //Chap 43
3 | //Placing scripts
4 | alert("Hello from Separate JS file");


--------------------------------------------------------------------------------
/43To57/demo142.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <head>
3 | 
4 | </head>
5 | <body>
6 |     
7 | </body>
8 | <script src="./demo142.js"></script>
9 | </html>


--------------------------------------------------------------------------------
/43To57/demo142.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //Chap 43
 3 | //Placing scripts
 4 | 
 5 | function sum(a,b){
 6 |     return a + b;
 7 | }
 8 | 
 9 | var total = sum(4,5);
10 | alert(total);


--------------------------------------------------------------------------------
/43To57/demo143.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <head>
3 | 
4 | </head>
5 | <body>
6 |     
7 | </body>
8 | <script src="./demo143.js"></script>
9 | </html>


--------------------------------------------------------------------------------
/43To57/demo143.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //Chap 44
 3 | //Commenting
 4 | 
 5 | // This function takes two argument and return their sum
 6 | function sum(a,b){
 7 |     return a + b;
 8 | }
 9 | 
10 | var total = sum(4,5); 
11 | alert(total);
12 | 
13 | /*
14 | function add(x,y){
15 |     return x + y;
16 | }
17 | */


--------------------------------------------------------------------------------
/43To57/demo144.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 45
 8 |      Events: link
 9 |     -->
10 |     
11 |     <a href="#" onClick="alert('Hello');" >Click</a>
12 | 
13 |     <!--
14 |     <a href="#" onClick="alert('Hi');">Click</a>
15 |     -->
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/43To57/demo145.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 45
 8 |      Events: link
 9 |     -->
10 |     <a href="JavaScript:void(0)" onClick="alert('Hi');">Click</a>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/43To57/demo146.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 45
 8 |      Events: link
 9 |     -->
10 |     <a href="JavaScript:void(0)" onClick="var greet='testing'; alert(greet); alert('hello');">Click</a>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/43To57/demo147.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 45
 8 |      Events: link
 9 |     -->
10 |     <a href="JavaScript:void(0)" onClick="popup('Working');">Click</a>
11 | </body>
12 | 
13 | <script>
14 |     var abc = "ABC Var";
15 |     function dummy() {alert('dummy');}
16 |     function popup(message) {
17 |         alert(message);
18 |         alert("testing");
19 |     }
20 | </script>
21 | </html>


--------------------------------------------------------------------------------
/43To57/demo148.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 45
 8 |      Events: link
 9 |     -->
10 |     <a href="JavaScript:void(0)" onClick="popup('Working');">Click</a>
11 | </body>
12 | 
13 | <script src="./demo148.js"></script>
14 | </html>


--------------------------------------------------------------------------------
/43To57/demo148.js:
--------------------------------------------------------------------------------
1 | function popup(message) {
2 |     alert("Hello "+message);
3 |     alert("New "+message);
4 | }


--------------------------------------------------------------------------------
/43To57/demo149.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 46
 8 |      Events: button
 9 |     -->
10 |     <input type="button" value="Click Empty" >
11 | 
12 |     <input type="button" value="Click" onClick="alert('Hello world!');">
13 | 
14 |     <br/>
15 |     <a href="summary-page.html"><img width="100px" height="100px" src="demo149_button.png"></a>
16 | 
17 |     <br/>
18 |     <img width="100px" height="100px" src="demo149_button.png" onClick="alert('Hello world!');">
19 |     
20 |     <br/>
21 |     <img width="100px" height="100px" src="demo149_button.png" onClick="greetTheUser();">
22 |     <br/>
23 | </body>
24 | 
25 | <script>
26 | 
27 |     function greetTheUser(){
28 |         alert("Hello User");
29 |     }
30 | 
31 | </script>
32 | </html>


--------------------------------------------------------------------------------
/43To57/demo149_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo149_button.png


--------------------------------------------------------------------------------
/43To57/demo150.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 47
 8 |      Events: mouse
 9 |     -->
10 |     <img width="100px" height="100px" 
11 |             src="demo150_browser_1.png" 
12 |             onMouseover="src='demo150_browser_2.png'">
13 |     <br/>
14 |     <br/>
15 | 
16 | 
17 |     <img width="100px" height="100px" 
18 |             src="demo150_browser_1.png" 
19 |             onMouseover="src='demo150_browser_2.png'" 
20 |             onMouseout="src='demo150_browser_1.png'">
21 | 
22 |  <br/>
23 | <br/>
24 | <img width="100px" height="100px" 
25 |             src="demo150_browser_1.png" 
26 |             onMouseover="alert('hello world')" >
27 | </body>
28 | 
29 | <script>
30 | 
31 | </script>
32 | </html>


--------------------------------------------------------------------------------
/43To57/demo150_browser_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo150_browser_1.png


--------------------------------------------------------------------------------
/43To57/demo150_browser_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo150_browser_2.png


--------------------------------------------------------------------------------
/43To57/demo151.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 47
 8 |      Events: mouse
 9 |     -->
10 |     
11 |     <h1 onMouseover="alert('Be sure to get your shopping done today.');">World Ends Tomorrow</h1>
12 | 
13 |     <a href="index.html" onMouseover="this.style.color='green';">Home Page</a>
14 | 
15 |     <a href="index.html" onMouseover="this.style.color='red';this.style.backgroundColor='yellow';">Home Page</a>
16 | 
17 | 
18 |     <p id="loris" onMouseover="expand();">Slow Loris: Mouse over for more info</p>
19 | </body>
20 | 
21 | <script>
22 |     function expand(){
23 |         alert("Expand logic here");
24 |     }
25 | 
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/43To57/demo152.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 48
 8 |      Events: fields
 9 |     -->
10 | 
11 |     Email:<br>
12 |     <input type="text" size="30" 
13 |                 onFocus="this.style.backgroundColor='yellow';">
14 | 
15 |             
16 |     <br><br><br>
17 |     Email:<br>
18 |     <input type="text" size="30" 
19 |                 onFocus="this.style.backgroundColor='yellow';"
20 |                 onBlur="this.style.backgroundColor='red';">
21 |     
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/43To57/demo153.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 48
 8 |      Events: fields
 9 |     -->
10 |     Email:<br>
11 |     <input type="text" size="30" 
12 |                 onFocus="this.style.backgroundColor='yellow';"
13 |                 onBlur="this.style.backgroundColor='white';"
14 |                 onMouseover="this.style.backgroundColor='#CCEECC';"
15 |                 onMouseout="this.style.backgroundColor='#DDEEFF';">
16 |     
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/43To57/demo154.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 49
 8 |      Reading field values
 9 |     -->
10 |     <form onsubmit="onFormSubmit(this)">
11 |         Email:
12 |         <input type="text" id="email">
13 |         <input type="submit" value="Submit">
14 |     </form>
15 |     
16 | </body>
17 | 
18 | <script>
19 |     function onFormSubmit(ele) {
20 |         alert('aaaa');
21 |         console.log('aaaaaa', ele);
22 |     }
23 | </script>
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | </html>


--------------------------------------------------------------------------------
/43To57/demo155.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 49
 8 |      Reading field values
 9 |     -->
10 |     <form onsubmit="checkAddress();">
11 |         Email:
12 |         <input type="text" id="email">
13 |         <input type="submit" value="Submit">
14 |     </form>
15 |     
16 | </body>
17 | <script>
18 |     function checkAddress(){
19 |         alert("Hello World");
20 |     }
21 | </script>
22 | 
23 | 
24 | </html>


--------------------------------------------------------------------------------
/43To57/demo156.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 49
 8 |      Reading field values
 9 |     -->
10 |     <form >
11 |         Email:
12 |         <input type="text" id="email">
13 |         <input type="text" id="pwd">
14 |         <input type="button" value="Submit" onClick="checkAddress();">
15 |     </form>
16 |     <p style="color: red; display: none;" id="error">
17 |         Password dosent matched!!
18 |     </p>
19 |     
20 | </body>
21 | <script>
22 |     var arr = [ ['u1', 'p1'], ['u2', 'p2'] ];
23 |     function checkAddress(){
24 |        var emailEle = document.getElementById('email');
25 |        var pwdEle = document.getElementById('pwd');
26 | 
27 |        var email = emailEle.value
28 |        var password = pwdEle.value
29 | 
30 |        var isAuthenticated = false;
31 |        for(var i = 0; i < arr.length; i++) {
32 |            var userItem = arr[i];   // ['u1', 'p1']
33 |            if(userItem[0] == email && userItem[1] == password) {
34 |                 isAuthenticated = true;
35 |                 break;  
36 |            } 
37 |        }
38 |        if(isAuthenticated) {
39 |            alert('Successs')
40 |        } else {
41 |         alert('Fail......')
42 |        }
43 | 
44 |     }
45 | </script>
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | </html>


--------------------------------------------------------------------------------
/43To57/demo157.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | 
 5 | </head>
 6 | 
 7 | <body>
 8 |     <!-- 
 9 |      Chapter 49
10 |      Reading field values
11 |     -->
12 |     <form onsubmit="checkAddress();">
13 |         Email:
14 |         <input type="text" id="email">
15 |         <input type="submit" value="Submit">
16 |     </form>
17 | 
18 | </body>
19 | <script>
20 |     function checkAddress() {
21 | 
22 |         var val = document.getElementById('email').value;
23 |         console.log(val.length);
24 |         //alert(val);
25 |         val.trim();
26 |         console.log(val.length);
27 | 
28 |         // calling function
29 |         ValidateEmail(val)
30 |     }
31 | 
32 |     function ValidateEmail(mail) {
33 |         if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
34 |             alert('VAlid.....')
35 |             return (true)
36 |         }
37 |         alert("You have entered an invalid email address!")
38 |         return (false)
39 |     }
40 | 
41 | </script>
42 | 
43 | 
44 | </html>


--------------------------------------------------------------------------------
/43To57/demo158.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 49
 8 |      Reading field values
 9 |     -->
10 |     <form onsubmit="checkAddress();">
11 |         Email:
12 |         <input type="text" id="email">
13 |         <input type="submit" value="Submit">
14 |     </form>
15 |     
16 | </body>
17 | <script>
18 |     function checkAddress(){
19 |         var val = document.getElementById('email').value;
20 |         //alert(val);
21 |         if(val === ""){
22 |             alert("Email address required");
23 |         }
24 |         else {
25 |             alert("Thank you, You provided email "+val);
26 |         }
27 |     }
28 | </script>
29 | 
30 | 
31 | </html>


--------------------------------------------------------------------------------
/43To57/demo159.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 50
 8 |      Setting field values
 9 |     -->
10 |     <form >
11 |         Email:
12 |         <input type="text" id="email">
13 |         <input type="button" value="Submit" onClick="updateAddress();">
14 |     </form>
15 |     
16 | </body>
17 | <script>
18 |     function updateAddress(){
19 |         document.getElementById('email').value = "Hello";        
20 |     }
21 | </script>
22 | 
23 | 
24 | </html>


--------------------------------------------------------------------------------
/43To57/demo160.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 50
 8 |      Setting field values
 9 |     -->
10 |     <form>
11 |         ZIP:<br>
12 |         <input type="text" id="zip" onBlur="fillCity();"><br>
13 |         City:<br>
14 |         <input type="text" id="city">
15 |     </form>
16 |     
17 | </body>
18 | <script>
19 |     function fillCity() {
20 |         var cityName;
21 |         var zipEntered = document.getElementById("zip").value;
22 |         switch (zipEntered) {
23 |             case "60608" :
24 |                 cityName = "Chicago";
25 |                 break;
26 |             case "68114" :
27 |                 cityName = "Omaha";
28 |                 break;
29 |             case "53212" :
30 |                 cityName = "Milwaukee";
31 |                 break;
32 |             default:
33 |                 cityName = "City Not Found";
34 |                 break;
35 |         }
36 |         document.getElementById("city").value = cityName;
37 |     }
38 | </script>
39 | 
40 | 
41 | </html>


--------------------------------------------------------------------------------
/43To57/demo161.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 51
 8 |      Reading and setting paragraph text
 9 |     -->
10 |     <p id="slowLoris">
11 |         Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
12 |         <a href="javascript:void(0);" onClick="expandLoris();"><em>Click for more.</em></a>
13 |     </p>
14 |     
15 | </body>
16 | <script>
17 |     function expandLoris() {
18 |         var para = document.getElementById("slowLoris");
19 |         alert(para);
20 |         alert(para.innerHTML);
21 |         para.innerHTML = "Hello World";
22 | 
23 |     }
24 | 
25 |    
26 | </script>
27 | 
28 | 
29 | </html>


--------------------------------------------------------------------------------
/43To57/demo162.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 51
 8 |      Reading and setting paragraph text
 9 |     -->
10 |     <p id="slowLoris">
11 |         Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
12 |         <a href="javascript:void(0);" onClick="expandLoris();"><em>Click for more.</em></a>
13 |     </p>
14 |     
15 | </body>
16 | <script>
17 |     function expandLoris() {
18 |         var expandedParagraph = "Slow lorises are a group of several species of trepsirrhine primates which "
19 |                     +"make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of "
20 |                     +"distinctive coloration patterns that are species-dependent. The hands and feet of slow lorises have several "
21 |                     +"adaptations that give them a pincer-like grip and enable them to grasp branches for long periods of time. "
22 |                     +"Slow lorises have a toxic bite, a rare trait among mammals.";
23 |         var para = document.getElementById("slowLoris");
24 |         //alert(para);
25 |         alert(para.innerHTML);
26 |         para.innerHTML = expandedParagraph;
27 | 
28 |     }
29 | 
30 |    
31 | </script>
32 | 
33 | 
34 | </html>


--------------------------------------------------------------------------------
/43To57/demo163.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 51
 8 |      Reading and setting paragraph text
 9 |     -->
10 |     <p id="slowLoris">
11 |         Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
12 |         <a href="javascript:void(0);" onClick="expandLoris();">
13 |             <em>Click for more.</em>
14 |         </a>
15 |     </p>
16 |     
17 | </body>
18 | <script>
19 |     function expandLoris() {
20 |        
21 |         var para = document.getElementById("slowLoris");
22 |         para.innerHTML= "<input type='text'>";
23 |         
24 |     }
25 | 
26 |    
27 | </script>
28 | 
29 | 
30 | </html>


--------------------------------------------------------------------------------
/43To57/demo164.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 51
 8 |      Reading and setting paragraph text
 9 |     -->
10 |     <p id="slowLoris">
11 |         Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
12 |         <a href="javascript:void(0);" onClick="expandLoris();"><em>Click for more.</em></a>
13 |     </p>
14 |     
15 | </body>
16 | <script>
17 |     function expandLoris() {
18 |        
19 |         var para = document.getElementById("slowLoris");
20 |         para.innerHTML= "<ol><li>Karachi</li><li>Lahore</li><li>Islamabad</li></ol>";
21 |         
22 |     }
23 | 
24 |    
25 | </script>
26 | 
27 | 
28 | </html>


--------------------------------------------------------------------------------
/43To57/demo165.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 51
 8 |      Reading and setting paragraph text
 9 |     -->
10 |     <p id="slowLoris">
11 |         Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
12 |         <a href="javascript:void(0);" onClick="expandLoris();"><em>Click for more.</em></a>
13 |     </p>
14 |     
15 | </body>
16 | <script>
17 |     function expandLoris() {
18 |        
19 |         var para = document.getElementById("slowLoris");
20 |         para.innerHTML= "<span style='background-color:lightpink;' >Hello World</span>";
21 |         
22 |     }
23 | 
24 |    
25 | </script>
26 | 
27 | 
28 | </html>


--------------------------------------------------------------------------------
/43To57/demo166.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <style>
 4 |         .hidden {
 5 |             display: none;
 6 |         }
 7 |     </style>
 8 | 
 9 | </head>
10 | <body>
11 |     <!-- 
12 |      Chapter 52
13 |      Manipulating images and text
14 |     -->
15 |     <img class="abc xyz hello" src="demo166_fish1.jpg" id="fish"
16 |      onClick="makeInvisible();"/>
17 |     
18 |     
19 | </body>
20 | <script>
21 |       function makeInvisible(){
22 |           var image = document.getElementById("fish");
23 |           image.className= "hidden"
24 | 
25 | 
26 |           //alert("Hello");
27 |       }
28 | </script>
29 | 
30 | 
31 | </html>


--------------------------------------------------------------------------------
/43To57/demo166_fish1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo166_fish1.jpg


--------------------------------------------------------------------------------
/43To57/demo167.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <style>
 4 |         .abc {
 5 |             background-color:lightgray;
 6 |         }
 7 | 
 8 |         .xyz{
 9 |             border: 1px solid brown;
10 |         }
11 |     </style>
12 | 
13 | </head>
14 | <body>
15 |     <!-- 
16 |      Chapter 52
17 |      Manipulating images and text
18 |     -->
19 |     <p id="message" class="abc xyz"  >Hello World</p>
20 |     
21 |     
22 | </body>
23 | <script>
24 |     
25 | </script>
26 | 
27 | 
28 | </html>


--------------------------------------------------------------------------------
/43To57/demo168.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <style>
 4 |         .abc {
 5 |             background-color:lightgray;
 6 |         }
 7 | 
 8 |         .xyz{
 9 |             border: 1px solid darkblue;
10 |         }
11 | 
12 |         .fontColor {
13 |             color: darkred;
14 |         }
15 |     </style>
16 | 
17 | </head>
18 | <body>
19 |     <!-- 
20 |      Chapter 52
21 |      Manipulating images and text
22 |     -->
23 |     <p id="message" class="abc xyz" onclick="updateColor()"  >Hello World</p>
24 |     
25 |     
26 | </body>
27 | <script>
28 |     function updateColor (){
29 |         var para= document.getElementById("message")
30 |         para.className="fontColor"
31 | 
32 |     }
33 | 
34 | </script>
35 | 
36 | 
37 | </html>


--------------------------------------------------------------------------------
/43To57/demo169.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <style>
 4 |         .abc {
 5 |             background-color:lightgray;
 6 |         }
 7 | 
 8 |         .xyz{
 9 |             border: 1px solid darkblue;
10 |         }
11 | 
12 |         .fontColor {
13 |             color:darkred;
14 |         }
15 |     </style>
16 | 
17 | </head>
18 | <body>
19 |     <!-- 
20 |      Chapter 52
21 |      Manipulating images and text
22 |     -->
23 |     <p id="message" class="abc xyz" onclick="updateColor()"  >Hello World</p>
24 |     
25 |     
26 | </body>
27 | <script>
28 |     function updateColor (){
29 |         var para= document.getElementById("message")
30 |         //para.className = para.className + " fontcolor";
31 |         para.className += " fontColor";
32 |         // var oldclasses = para.className;
33 |         // para.className = para.className + " fontColor"
34 | 
35 | 
36 | /*
37 | 
38 |         var b = 6;
39 |         b = 8;
40 |         var a = 6;
41 |         a = a+1;
42 |         a++;
43 |         a+=1;
44 |         */
45 | 
46 |     }
47 | 
48 | </script>
49 | 
50 | 
51 | </html>


--------------------------------------------------------------------------------
/43To57/demo170.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 53
 8 |      Swapping images
 9 |     -->
10 |     <img width="100px" height="100px" 
11 |             src="demo170_browser_1.png" 
12 |             id="before" 
13 |             onMouseover="swapPic();">
14 |     <br/>
15 |     <br/>
16 |     
17 |     
18 | </body>
19 | <script>
20 | 
21 |     function swapPic() {
22 |         document.getElementById("before").src = "demo170_browser_2.png";
23 |     }
24 | 
25 | </script>
26 | 
27 | 
28 | </html>


--------------------------------------------------------------------------------
/43To57/demo170_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 53
 8 |      Swapping images
 9 |     -->
10 |     <img width="100px" height="100px" 
11 |             src="demo170_browser_1.png" 
12 |             id="before" 
13 |             onMouseover="swapPic();">
14 | 
15 |     <img width="100px" height="100px" 
16 |             src="demo170_browser_1.png" 
17 |             id="newImage" 
18 |             onMouseover="swapPic2();">
19 |     <br/>
20 |     <br/>
21 |     
22 |     
23 | </body>
24 | <script>
25 | 
26 |     function swapPic() {
27 |         document.getElementById("before").src = "demo170_browser_2.png";
28 |     }
29 | 
30 |     function swapPic2() {
31 |         document.getElementById("newImage").src = "demo170_browser_2.png";
32 |     }
33 | 
34 | </script>
35 | 
36 | 
37 | </html>


--------------------------------------------------------------------------------
/43To57/demo170_browser_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo170_browser_1.png


--------------------------------------------------------------------------------
/43To57/demo170_browser_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo170_browser_2.png


--------------------------------------------------------------------------------
/43To57/demo171.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 53
 8 |      Swapping images
 9 |     -->
10 |     <img width="100px" height="100px" 
11 |             src="demo171_browser_1.png" 
12 |             id="before" 
13 |             onMouseover="swapPic(id,'demo171_browser_2.png');"
14 |             onMouseout="swapPic(id,'demo171_browser_1.png');">
15 |     <br/>
16 | 
17 |     <img width="100px" height="100px" 
18 |             src="demo171_browser_1.png" 
19 |             id="newImage" 
20 |             onMouseover="swapPic(id,'demo171_browser_2.png');">
21 |     <br/>
22 |     
23 |     
24 | </body>
25 | <script>
26 | 
27 |    
28 | 
29 |     function swapPic(eId, newPic) {
30 |         document.getElementById(eId).src = newPic;
31 |     }
32 | 
33 | </script>
34 | 
35 | 
36 | </html>


--------------------------------------------------------------------------------
/43To57/demo171_browser_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo171_browser_1.png


--------------------------------------------------------------------------------
/43To57/demo171_browser_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/43To57/demo171_browser_2.png


--------------------------------------------------------------------------------
/43To57/demo172.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 54
 8 |      Swapping images and setting classes
 9 |     -->
10 |     
11 |     <a href="http://www.yahoo.com" id="link1">Yahoo!!!</a>
12 |      <br/>
13 |     <br/>
14 |     <button onClick="getAddress()" >Get</button>
15 |    
16 |     
17 |     
18 | </body>
19 | <script>
20 | 
21 |     function getAddress() {
22 |         var link = document.getElementById("link1");
23 |         var address = link.href;
24 |         alert(address);
25 |     }
26 | 
27 | </script>
28 | 
29 | 
30 | </html>


--------------------------------------------------------------------------------
/43To57/demo173.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .fontColor {
 5 |             color:darkred;
 6 |         }
 7 |     </style>
 8 | </head>
 9 | <body>
10 |     <!-- 
11 |      Chapter 54
12 |      Swapping images and setting classes
13 |     -->
14 |     
15 |     <a href="http://www.yahoo.com" id="link1">Yahoo!!!</a>
16 |       <br/>
17 |     <br/>
18 |     <button onClick="changeColor()">Change</button>
19 |   
20 |     
21 |     
22 | </body>
23 | <script>
24 | 
25 |     function changeColor() {
26 |         var frm = document.getElementById("link1");
27 |         frm.className = "fontColor";
28 |         
29 |     }
30 | 
31 | </script>
32 | 
33 | 
34 | </html>


--------------------------------------------------------------------------------
/43To57/demo174.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .abc {
 5 |             background-color:darkred;
 6 |         }
 7 |         .xyz {
 8 |             font-weight: bold;
 9 |         }
10 |     </style>
11 | </head>
12 | <body>
13 |     <!-- 
14 |      Chapter 55
15 |      Setting styles
16 |     -->
17 |     
18 |     <p id="p1" class="abc">Hello World Paragraph 1</p>
19 |     <p id="p2">Hello World Paragraph 2</p>
20 |     <p id="p3">Hello World Paragraph 3</p>
21 |     <p id="p4">Hello World Paragraph 4</p>
22 |     <p id="p5">Hello World Paragraph 5</p> 
23 |     <button onclick="applyCSSP1()">For P1</button>
24 |     <button onclick="applyCSSP2()">For P2</button>
25 |     <button onclick="applyCSSP3()">For P3</button>
26 |     <button onclick="applyCSSP4()">For P4</button>
27 |     <button onclick="applyCSSP5()">For P5</button>   
28 |     
29 | </body>
30 | <script>
31 |     function applyCSSP1() {
32 |         document.getElementById("p1").className += " xyz";
33 |     }
34 |     function applyCSSP2() {
35 |         document.getElementById("p2").style.fontSize="18px"
36 |     }
37 |     function applyCSSP3() {
38 |         document.getElementById("p3").style.cssFloat = "right";
39 |     }
40 |     function applyCSSP4() {
41 |         document.getElementById("p4").style.visibility = "hidden";
42 |     }
43 |     function applyCSSP5() {
44 |         document.getElementById("p5").style.margin = "20px";
45 |     }
46 | </script>
47 | 
48 | 
49 | </html>


--------------------------------------------------------------------------------
/43To57/demo175.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 56
 8 |      Target all elements by tag name
 9 |     -->
10 |     
11 |     <p id="p1">Hello World Paragraph 1</p>
12 |     <p id="p2">Hello World Paragraph 2</p>
13 |     <p id="p3">Hello World Paragraph 3</p>
14 |     <p id="p4">Hello World Paragraph 4</p>
15 |     <p id="p5">Hello World Paragraph 5</p> 
16 |     <button onclick="applyFirst()">First</button>    
17 |     
18 | </body>
19 | <script>
20 |     function applyFirst() {
21 |         var paraList = document.getElementsByTagName("p");
22 |         console.log('paraList ', paraList, 'endddddd');
23 |         // alert(paraList[2].innerHTML);
24 |     }
25 |     
26 | </script>
27 | 
28 | 
29 | </html>


--------------------------------------------------------------------------------
/43To57/demo176.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 56
 8 |      Target all elements by tag name
 9 |     -->
10 |     
11 |     <p id="p1">Hello World Paragraph 1</p>
12 |     <p id="p2">Hello World Paragraph 2</p>
13 |     <p id="p3">Hello World Paragraph 3</p>
14 |     <p id="p4">Hello World Paragraph 4</p>
15 |     <p id="p5">Hello World Paragraph 5</p> 
16 |     <button onclick="applyFirst()">First</button>    
17 |     
18 | </body>
19 | <script>
20 |     function applyFirst() {
21 |         var paraList = document.getElementsByTagName("p");
22 |         for(var i=0;i<paraList.length;i++){
23 |             alert(paraList[i].innerHTML);
24 |         }
25 |         
26 |     }
27 |     
28 | </script>
29 | 
30 | 
31 | </html>


--------------------------------------------------------------------------------
/43To57/demo177.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 56
 8 |      Target all elements by tag name
 9 |     -->
10 |     
11 |     <p id="p1">Hello World Paragraph 1</p>
12 |     <div>div1</div>
13 |     <p id="p2">Hello World Paragraph 2</p>
14 |     <span>span1</span>
15 |     <p id="p3">Hello World Paragraph 3</p>
16 |     <p id="p4">Hello World Paragraph 4</p>
17 |     <p id="p5">Hello World Paragraph 5</p> 
18 |     <button onclick="applyFirst()">First</button>    
19 |     <button onclick="applySecond()">Second</button>    
20 |     <button onclick="applyThird()">Third</button>    
21 |     
22 | </body>
23 | <script>
24 |     function applyFirst() {
25 |         var paraList = document.getElementsByTagName("p");
26 |         for(var i=0;i<paraList.length;i++){
27 |             paraList[i].style.color="darkblue";
28 |         }        
29 |     }
30 |     function applySecond() {
31 |         var paraList = document.getElementsByTagName("p");
32 |         for(var i=0;i<paraList.length;i++){
33 |             paraList[i].style.fontWeight="bold";
34 |             paraList[i].style.color="yellow";
35 |         }        
36 |     }
37 |     function applyThird() {
38 |         var paraList = document.getElementsByTagName("p");
39 |         for(var i=0;i<paraList.length;i++){
40 |             paraList[i].style.fontWeight="normal";
41 |         }        
42 |     }
43 |     
44 | </script>
45 | 
46 | 
47 | </html>


--------------------------------------------------------------------------------
/43To57/demo178.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 57
 8 |     Target some elements by tag name
 9 |     -->
10 |     
11 |     <div id="div1">
12 |         <p id="p1">Hello World Paragraph 1</p>
13 |         <p id="p2">Hello World Paragraph 2</p>
14 |         <p id="p3">Hello World Paragraph 3</p>
15 |     </div>
16 | 
17 |     <div id="div2">
18 |         <p id="p4">Hello World Paragraph 4</p>
19 |         <p id="p5">Hello World Paragraph 5</p> 
20 |     </div>
21 |     <button onclick="applyFirst()">First</button>  
22 |     <button onclick="applySecond()">Second</button>  
23 |     
24 | </body>
25 | <script>
26 |     function applyFirst() {
27 |         var paraList = document.getElementsByTagName("p");
28 |         for(var i=0;i<paraList.length;i++){
29 |              paraList[i].style.color="darkblue";
30 |         }        
31 |     }
32 | 
33 |     function applySecond() {
34 |         var divElement = document.getElementById("div2");
35 |         var paraList = document.getElementsByTagName("p");
36 |         for(var i=0;i<paraList.length;i++){
37 |              paraList[i].style.fontWeight="bold";
38 |         }        
39 |     }
40 |     
41 | </script>
42 | 
43 | 
44 | </html>


--------------------------------------------------------------------------------
/58To68/demo179.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 60
 8 |     The DOM: Finding children
 9 |     -->
10 |     
11 |     <div id="first">
12 |         <p>1</p>
13 |         <p>2</p>
14 |         <p>3</p>
15 |         <p>4</p>
16 |     </div>
17 | 
18 |     
19 |     <div id="second">
20 |         <p>5</p>
21 |         <p>6</p>
22 |     </div>  
23 |     
24 | </body>
25 | <script>
26 |     var d = document.getElementsByTagName("p");
27 |     for(a=0; a<d.length ; a++){
28 |         alert(d[a].innerHTML);
29 |     }
30 | 
31 | </script>
32 | 
33 | 
34 | </html>


--------------------------------------------------------------------------------
/58To68/demo180.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 60
 8 |     The DOM: Finding children
 9 |     -->
10 |     
11 |     <div id="first">
12 |         <p>1</p>
13 |         <p>2</p>
14 |         <p>3</p>
15 |         <p>4</p>
16 |     </div>
17 | 
18 |     
19 |     <div id="second">
20 |         <p>5</p>
21 |         <p>6</p>
22 |     </div>  
23 |     
24 | </body>
25 | <script>
26 |     var e = document.getElementById("second");
27 |     alert(e);
28 |     var p = e.getElementsByTagName("p");
29 |     alert(p[1].innerHTML);
30 | 
31 | </script>
32 | 
33 | 
34 | </html>


--------------------------------------------------------------------------------
/58To68/demo181.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |     
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 60
 8 |     The DOM: Finding children
 9 |     -->
10 |     <div id="cal">
11 |         <p>Southern Cal is sunny.</p>
12 |         <p>Northern Cal is rainy.</p>
13 |         <p>Eastern Cal is desert.</p>
14 |     </div>
15 |     <div id="ny">
16 |         <p>Urban NY is crowded.</p>
17 |         <p>Rural NY is sparse.</p>
18 |     </div>
19 | </body>
20 | <script>
21 |     var p = document.childNodes[0].childNodes[2].childNodes[3].childNodes[1];
22 | 
23 |     alert(p.innerHTML);
24 | 
25 | </script>
26 | 
27 | 
28 | </html>


--------------------------------------------------------------------------------
/58To68/demo182.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 60
 8 |     The DOM: Finding children
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p>Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 | 
16 |         <div>
17 |             <div>
18 |                 <p>Southern Cal is sunny. 1</p>
19 |                 <p>Northern Cal is rainy. 2</p>
20 |                 <p>Eastern Cal is desert. 3</p>
21 |             </div>
22 |             <div>
23 |                 <p>Southern Cal is sunny. 4</p>
24 |                 <p>Northern Cal is rainy. 5</p>
25 |                 <p>Eastern Cal is desert. 6</p>
26 |             </div>
27 |         </div>
28 | 
29 |     </div>
30 |     <div id="ny">
31 |         <p>Urban NY is crowded.</p>
32 |         <p>Rural NY is sparse.</p>
33 |     </div>
34 |     
35 | </body>
36 | <script>
37 |     
38 |     //var p = document.childNodes[0].childNodes[1].childNodes[0].childNodes[1];
39 | 
40 | </script>
41 | 
42 | 
43 | </html>


--------------------------------------------------------------------------------
/58To68/demo183.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body><!-- 
 6 |      Chapter 61
 7 |     The DOM: Junk artifacts and nodeType
 8 |     --><div id="cal">
 9 |         <p>Southern Cal is sunny.</p>
10 |         <p>Northern Cal is rainy.</p>
11 |         <p>Eastern Cal is desert.</p>
12 |     </div>
13 |     <div id="ny">
14 |         <p>Urban NY is crowded.</p>
15 |         <p>Rural NY is sparse.</p>
16 |     </div>
17 |     
18 | </body>
19 | <script>
20 |     
21 |     var p =  document.childNodes[0].childNodes[2].childNodes[3].childNodes[1];
22 |     
23 |     // In IE body is on 2nd index
24 |     //var p = document.childNodes[0].childNodes[2].childNodes[0].childNodes[1];
25 |     alert(p.innerHTML);
26 | 
27 | </script>
28 | 
29 | 
30 | </html>


--------------------------------------------------------------------------------
/58To68/demo184.html:
--------------------------------------------------------------------------------
 1 | <html><head>
 2 |    
 3 | </head><body>
 4 |     <!-- 
 5 |      Chapter 61
 6 |     The DOM: Junk artifacts and nodeType
 7 |     -->
 8 |     
 9 |     <div id="cal"><p>Southern Cal is sunny.</p>
10 |         <p>Northern Cal is rainy.</p>
11 |         <p>Eastern Cal is desert.</p>
12 |     </div>
13 |     <div id="ny">
14 |         <p>Urban NY is crowded.</p>
15 |         <p>Rural NY is sparse.</p>
16 |     </div>
17 |     
18 | </body>
19 | <script>
20 |     
21 |     var p = document.childNodes[0].childNodes[1].childNodes[0].childNodes[1];
22 |     
23 |     // In IE body is on 2nd index
24 |     //var p = document.childNodes[0].childNodes[2].childNodes[0].childNodes[1];
25 |     alert(p.innerHTML);
26 | 
27 | </script>
28 | 
29 | 
30 | </html>


--------------------------------------------------------------------------------
/58To68/demo185.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 61
 8 |     The DOM: Junk artifacts and nodeType
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p>Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var ele = document.childNodes[0]
25 |     console.log(ele, ele.nodeType);
26 | 
27 |     var ele1 = document.childNodes[0].childNodes[2].childNodes[3].childNodes[1]
28 |     console.log(ele1, ele1.nodeType);
29 | 
30 |     var ele2 = document.childNodes[0].childNodes[2].childNodes[3].childNodes[1].childNodes[0]
31 |     var ele3 = document.childNodes[0].childNodes[2].childNodes[3].childNodes[1].childNodes[0]
32 |     console.log(ele2, ele2.nodeType);
33 |     console.log(ele3, ele3.nodeType);
34 | 
35 | </script>
36 | 
37 | 
38 | </html>


--------------------------------------------------------------------------------
/58To68/demo186.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 62
 8 |     The DOM: More ways to target elements
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p>Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var ele1 = document.childNodes[0].childNodes[2];
25 |     console.log(ele1);
26 | 
27 |     var ele2 = document.childNodes[0].childNodes[2].childNodes[3];
28 |     console.log(ele2);
29 | 
30 |     var firstChildNodeOfDiv = ele2.childNodes[0];
31 |     console.log(firstChildNodeOfDiv);
32 | 
33 |     var firstChildNodeOfDiv1 = ele2.firstChild;
34 |     console.log(firstChildNodeOfDiv1);
35 | 
36 | 
37 |     var lastChildNodeOfDiv = ele2.lastChild;
38 |     console.log(lastChildNodeOfDiv);
39 | 
40 | 
41 |     var parentNodeOfDiv = ele2.parentNode;
42 |     console.log(parentNodeOfDiv);
43 | 
44 | 
45 | 
46 | 
47 | </script>
48 | 
49 | 
50 | </html>


--------------------------------------------------------------------------------
/58To68/demo187.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 62
 8 |     The DOM: More ways to target elements
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p>Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var ele1 = document.childNodes[0].childNodes[2];
25 |     alert(ele1);
26 | 
27 |     var ele2 = document.childNodes[0].childNodes[2].childNodes[3].childNodes[3];
28 |     alert(ele2);
29 |     alert(ele2.innerHTML);
30 | 
31 | 
32 |     var paraNextSibling = ele2.nextSibling;
33 |     alert(paraNextSibling);
34 |     alert(paraNextSibling.innerHTML);
35 | 
36 |     var paraPreviousSibling = ele2.previousSibling;
37 |     alert(paraPreviousSibling);
38 |     alert(paraPreviousSibling.innerHTML);
39 | 
40 |   
41 | 
42 | 
43 | 
44 | </script>
45 | 
46 | 
47 | </html>


--------------------------------------------------------------------------------
/58To68/demo188.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 62
 8 |     The DOM: More ways to target elements
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p>Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var ele1 = document.childNodes[0].childNodes[2];
25 |     alert(ele1);
26 | 
27 |     var ele2 = document.childNodes[0].childNodes[2].childNodes[3].childNodes[3];
28 |     alert(ele2);
29 |     alert(ele2.innerHTML);
30 | 
31 | 
32 |     var paraNextSibling = ele2.nextSibling.nextSibling;
33 |     alert(paraNextSibling);
34 |     alert(paraNextSibling.innerHTML);
35 | 
36 |     var paraPreviousSibling = ele2.previousSibling.previousSibling;
37 |     alert(paraPreviousSibling);
38 |     alert(paraPreviousSibling.innerHTML);
39 | 
40 |   
41 | 
42 | 
43 | 
44 | </script>
45 | 
46 | 
47 | </html>


--------------------------------------------------------------------------------
/58To68/demo189.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 63
 8 |     The DOM: Getting a target's name
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p id="p1">Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var d = document.getElementById("cal");
25 |     alert(d.nodeType);
26 |     alert(d.nodeName);
27 |     
28 |    
29 | 
30 | </script>
31 | 
32 | 
33 | </html>


--------------------------------------------------------------------------------
/58To68/demo190.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 63
 8 |     The DOM: Getting a target's name
 9 | 
10 |     -->
11 |     
12 |     <div id="cal">
13 |         <p>Southern Cal is sunny.</p>
14 |         <p id="p1">Northern Cal is rainy.</p>
15 |         <p>Eastern Cal is desert.</p>
16 |     </div>
17 |     <div id="ny">
18 |         <p>Urban NY is crowded.</p>
19 |         <p>Rural NY is sparse.</p>
20 |     </div>
21 |     
22 | </body>
23 | <script>
24 |     
25 |     var d = document.getElementById("p1");
26 |     alert(d.nodeType);
27 |     alert(d.nodeName);
28 |     alert(d.nodeValue);
29 |     alert(d.innerHTML);
30 |     
31 |    
32 | 
33 | </script>
34 | 
35 | 
36 | </html>


--------------------------------------------------------------------------------
/58To68/demo191.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 63
 8 |     The DOM: Getting a target's name
 9 |     -->
10 |     
11 |     <div id="cal">
12 |         <p>Southern Cal is sunny.</p>
13 |         <p id="p1">Northern Cal is rainy.</p>
14 |         <p>Eastern Cal is desert.</p>
15 |     </div>
16 |     <div id="ny">
17 |         <p>Urban NY is crowded.</p>
18 |         <p>Rural NY is sparse.</p>
19 |     </div>
20 |     
21 | </body>
22 | <script>
23 |     
24 |     var d = document.getElementById("p1");
25 |     var t = d.firstChild;
26 |     alert(t.nodeType);
27 |     alert(t.nodeName);
28 |     alert(t.nodeValue);
29 |     alert(t.innerHTML);
30 |     
31 |    
32 | 
33 | </script>
34 | 
35 | 
36 | </html>


--------------------------------------------------------------------------------
/58To68/demo192.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 64
 8 |     The DOM: Counting elements
 9 |     -->
10 |     
11 |     <div id="cal"><p>Southern Cal is sunny.</p><p id="p1">Northern Cal is rainy.</p><p>Eastern Cal is desert.</p></div>
12 |     <div id="ny"><p>Urban NY is crowded.</p><p>Rural NY is sparse.</p></div>
13 |     
14 | </body>
15 | 
16 | <script>
17 |     
18 |     var d = document.getElementsByTagName("p");
19 |     console.log(d.length);
20 | 
21 |     var d1 = document.getElementById("cal");
22 |     var childList = d1.childNodes;
23 |     console.log(childList.length);
24 | 
25 |     
26 |     
27 |    
28 | 
29 | </script>
30 | 
31 | 
32 | </html>


--------------------------------------------------------------------------------
/58To68/demo193.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 65
 8 |     The DOM: Attributes
 9 |     -->
10 |     
11 |     <div id="d1" class="newDiv" customer="ays">
12 |         Hello World
13 |     </div>
14 | 
15 |     <img id="img1" src="dan.gif" alt="Dan" height="42" width="42">
16 |     
17 | </body>
18 | <script>
19 |     var a = document.getElementById("d1");
20 |     
21 |     // alert(a.hasAttributes());
22 |     // alert(a.hasAttribute("class"));
23 |     // alert(a.hasAttribute("src"));
24 | 
25 | </script>
26 | </html>


--------------------------------------------------------------------------------
/58To68/demo194.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 65
16 |     The DOM: Attributes
17 |     -->
18 |     
19 |     <div id="d1" class="newDiv">
20 |         Hello World
21 |     </div>
22 |     
23 | </body>
24 | <script>
25 |     var a = document.getElementById("d1");
26 |     alert(a.hasAttribute("class"));
27 |     alert(a.getAttribute("class"));
28 |     
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/58To68/demo195.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 65
16 |     The DOM: Attributes
17 |     -->
18 |     
19 |     <div id="d1" class="newDiv">
20 |         Hello World
21 |     </div>
22 |     
23 | </body>
24 | <script>
25 |     var a = document.getElementById("d1");
26 |     // alert(a.hasAttribute("class"));
27 |     // alert(a.getAttribute("class"));
28 |     setTimeout(function() {
29 |         a.setAttribute("class","updatedDiv");
30 |     }, 3000)
31 |     
32 |     // alert(a.getAttribute("class"));
33 |     
34 | </script>
35 | </html>


--------------------------------------------------------------------------------
/58To68/demo196.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 66
 8 |     The DOM: Attribute names and values
 9 |     -->
10 |     
11 |     <div id="d1" class="newDiv">
12 |         Hello World
13 |     </div>
14 |     
15 | </body>
16 | <script>
17 |     var a = document.getElementById("d1");
18 |     var attrList = a.attributes;
19 |     console.log(attrList);
20 |     console.log(attrList.length);
21 |     
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/58To68/demo197.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   
 4 | </head>
 5 | <body>
 6 |     <!-- 
 7 |      Chapter 66
 8 |     The DOM: Attribute names and values
 9 |     -->
10 |     
11 |     <div id="d1" class="newDiv">
12 |         Hello World
13 |     </div>
14 |     
15 | </body>
16 | <script>
17 |     var a = document.getElementById("d1");
18 |     var attrList = a.attributes;
19 |     console.log(attrList[0].nodeName);
20 |     console.log(attrList[0].nodeValue);
21 | 
22 |     console.log(attrList[1].nodeName);
23 |     console.log(attrList[1].nodeValue);
24 | 
25 | 
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/58To68/demo198.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 67
16 |     The DOM: Adding nodes
17 |     -->
18 |     
19 |    
20 | </body>
21 | <script>
22 |     
23 |     var p = document.createElement("p");
24 |     p.setAttribute("class","newDiv");
25 |     
26 |     var t = document.createTextNode("This is new Text");
27 |     
28 |     p.appendChild(t);
29 | 
30 | 
31 | 
32 | </script>
33 | </html>


--------------------------------------------------------------------------------
/58To68/demo199.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     -->
18 |     <div id="mydata">
19 |     
20 |     </div>
21 |    
22 | </body>
23 | <script>
24 |     
25 | 
26 |     var mainDiv = document.getElementById("mydata");
27 | 
28 |     var p = document.createElement("p");
29 |     p.setAttribute("class","newDiv");
30 |     
31 |     var t = document.createTextNode("This is new Text in Para");
32 |     
33 |     p.appendChild(t);
34 | 
35 |     mainDiv.appendChild(p);
36 | 
37 | 
38 | 
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/58To68/demo200.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     -->
18 |     <div id="mydata">
19 |         Hello World
20 |     </div>
21 | 
22 |     <input type="button" value="Add Element" onclick="addEle()"/>
23 |    
24 | </body>
25 | <script>
26 |     
27 |     function addEle(){
28 |         var mainDiv = document.getElementById("mydata");
29 | 
30 | 
31 |         var p = document.createElement("div");
32 |         p.setAttribute("class","newDiv");
33 |         
34 |         var t = document.createTextNode("This is new Text");
35 |         
36 |         p.appendChild(t);
37 | 
38 |         mainDiv.appendChild(p);
39 |     }
40 | 
41 |     
42 | 
43 | 
44 | 
45 | </script>
46 | </html>


--------------------------------------------------------------------------------
/58To68/demo201.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     -->
18 |     <div id="mydata">
19 |     
20 |     </div>
21 | 
22 |     <input type="button" value="Add Element" onclick="addEle()"/>
23 |     <input type="button" value="Add CSS" onclick="addCssToElement()"/>
24 |    
25 | </body>
26 | <script>
27 |     
28 |     function addEle(){
29 |         var mainDiv = document.getElementById("mydata");
30 | 
31 |         var p = document.createElement("div");
32 |         p.setAttribute("id","mydiv");
33 |         
34 |         var t = document.createTextNode("This is new Text");        
35 |         p.appendChild(t);
36 | 
37 |         mainDiv.appendChild(p);
38 |     }
39 |     
40 |     function addCssToElement(){
41 |          var mainDiv = document.getElementById("mydiv");
42 |          mainDiv.setAttribute("class","newDiv");
43 |     }
44 |     
45 | 
46 | 
47 | 
48 | </script>
49 | </html>


--------------------------------------------------------------------------------
/58To68/demo202.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     Insert Before
18 |     -->
19 |     <div id="mydata">
20 |         <p id="p1">First</p>
21 |         <p id="p2">Second</p>
22 |         <p id="p3">Thrid</p>
23 |         <p id="p4">Forth</p>
24 |     </div>
25 | 
26 |     <input type="button" value="Add Element" onclick="addEle()"/>
27 |    
28 | </body>
29 | <script>
30 |     
31 |     function addEle(){
32 |         var mainDiv = document.getElementById("mydata");
33 | 
34 |         var p2 = document.getElementById("p2");
35 |         //var p2 = document.getElementById("p3");
36 | 
37 | 
38 |         var p = document.createElement("p");
39 |         p.setAttribute("id","p5");
40 |         var t = document.createTextNode("This is new Text in p");
41 |         p.appendChild(t);
42 | 
43 |         mainDiv.insertBefore(p,p2);
44 |     }
45 |     
46 | 
47 | 
48 | 
49 | </script>
50 | </html>


--------------------------------------------------------------------------------
/58To68/demo203.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     Insert After
18 |     -->
19 |     <div id="mydata">
20 |         <p id="p1">First</p>
21 |         <p id="p2">Second</p>
22 |         <p id="p3">Thrid</p>
23 |         <p id="p4">Forth</p>
24 |     </div>
25 | 
26 |     <input type="button" value="Add Element" onclick="addEle()"/>
27 |    
28 | </body>
29 | <script>
30 |     
31 |     function addEle(){
32 |         var mainDiv = document.getElementById("mydata");
33 | 
34 |         var p2 = document.getElementById("p2");
35 | 
36 | 
37 |         var p = document.createElement("p");
38 |         p.setAttribute("id","p5");
39 |         var t = document.createTextNode("This is new Text in p");
40 |         p.appendChild(t);
41 | 
42 |         mainDiv.insertBefore(p,p2.nextSibling);
43 |     }
44 |     
45 | 
46 | 
47 | 
48 | </script>
49 | </html>


--------------------------------------------------------------------------------
/58To68/demo204.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     Remove Element
18 |     -->
19 |     <div id="mydata">
20 |         <p id="p1">First</p>
21 |         <p id="p2">Second</p>
22 |         <p id="p3">Thrid</p>
23 |         <p id="p4">Forth</p>
24 |     </div>
25 | 
26 |     <input type="button" value="Remove Element" onclick="removeElement()"/>
27 |    
28 | </body>
29 | <script>
30 |     
31 |     function removeElement(){
32 |         var mainDiv = document.getElementById("mydata");
33 | 
34 |         var p2 = document.getElementById("p2");
35 | 
36 |         mainDiv.removeChild(p2);
37 |     }
38 |     
39 | 
40 | 
41 | 
42 | </script>
43 | </html>


--------------------------------------------------------------------------------
/58To68/demo205.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |    <style>
 4 |         .newDiv {
 5 |             background-color: slategrey
 6 |         }
 7 | 
 8 |         .updatedDiv {
 9 |             background-color: rosybrown
10 |         }
11 |    </style>
12 | </head>
13 | <body>
14 |     <!-- 
15 |      Chapter 68
16 |     The DOM: Inserting nodes
17 |     Remove Element
18 |     -->
19 |     <div id="mydata">
20 |         <p id="p1">First</p>
21 |         <p id="p2">Second</p>
22 |         <p id="p3">Thrid</p>
23 |         <p id="p4">Forth</p>
24 |     </div>
25 | 
26 |     <input type="button" value="Remove Element" onclick="removeElement()"/>
27 |    
28 | </body>
29 | <script>
30 |     
31 |     function removeElement(){
32 |         var mainDiv = document.getElementById("mydata");
33 | 
34 |         var p2 = document.getElementById("p2");
35 |         p2.remove();
36 |         //mainDiv.removeChild(p2);
37 |     }
38 |     
39 | 
40 | 
41 | 
42 | </script>
43 | </html>


--------------------------------------------------------------------------------
/69To73/demo207.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     var a = 7;
13 |     var c = {};
14 |     console.log(a);
15 |     console.log(c);
16 | 
17 | </script>
18 | </html>


--------------------------------------------------------------------------------
/69To73/demo208.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     // Any key can be used as property name
13 |     var c = {
14 |         hello:"World",
15 |         abc: 45
16 |     };
17 | 
18 |     alert(c);
19 |     alert(c.hello);
20 |     alert(c.abc);
21 | 
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/69To73/demo209.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var student = {
14 |         name: "Arsalan",
15 |         age: 20
16 |     };
17 | 
18 |     alert(student);
19 |     alert(student.name);
20 |     alert(student.age);
21 | 
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/69To73/demo210.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10,
19 |         active: true
20 |     };
21 | 
22 |     alert(plan1.name);
23 |     alert(plan1.price);
24 |     alert(plan1.pages);
25 | 
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/69To73/demo211.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10
19 |     };
20 | 
21 |     var plan2 = {
22 |         name: "Professional",
23 |         price: 5.99,
24 |         space: 500,
25 |         transfer: 5000,
26 |         pages: 50
27 |     };
28 | 
29 |     console.log(plan1.name);
30 |     plan1.name = 'Whatever';
31 |     console.log(plan1.name);
32 |     console.log(plan2.name);
33 | </script>
34 | </html>


--------------------------------------------------------------------------------
/69To73/demo212.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10
19 |     };
20 | 
21 |     alert(plan1.name);
22 |     //alert(plan1.discount);
23 | 
24 |     plan1.discount = 20;
25 | 
26 |     alert(plan1.discount);
27 | 
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo213.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 69
 7 |     Objects
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10
19 |     };
20 | 
21 |     var plan2 = {
22 |         name: "Professional",
23 |         price: 5.99,
24 |         space: 500,
25 |         transfer: 5000,
26 |         pages: 50
27 |     };
28 | 
29 |     alert(plan1.name);
30 |     alert(plan2.name);
31 | 
32 |     plan1.discount = 15;
33 | 
34 |     alert(plan1.discount);
35 |     alert(plan2.discount);
36 | 
37 | 
38 | 
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/69To73/demo214.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 70
 7 |     Objects: Properties
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10
19 |     };
20 | 
21 |     alert(plan1.name);
22 | 
23 |     plan1.name = "Professional";
24 | 
25 |     alert(plan1.name);
26 | 
27 | 
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo215.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 70
 7 |     Objects: Properties
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10,
19 |         features : ["Guarantee", "Free Ship"]
20 |     };
21 | 
22 |     alert(plan1.name);
23 | 
24 |     plan1.name = "Professional";
25 |     plan1.space = 150;
26 |     plan1.features = ["Unlimited access"];
27 | 
28 |     alert(plan1.name);
29 | 
30 | 
31 | 
32 | </script>
33 | </html>


--------------------------------------------------------------------------------
/69To73/demo216.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 70
 7 |     Objects: Properties
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |     var plan1 = {
14 |         name: "Basic",
15 |         price: 3.99,
16 |         space: 100,
17 |         transfer: 1000,
18 |         pages: 10,
19 |         features : ["Guarantee", "Free Ship"]
20 |     };
21 | 
22 |     alert(plan1.name);
23 | 
24 |     plan1.name = "Professional";
25 |     plan1.space = 150;
26 |     plan1.pages = undefined;
27 | 
28 |     delete plan1.transfer;
29 | 
30 |     alert(plan1.pages);
31 |     alert(plan1.transfer);
32 | 
33 | 
34 | 
35 | </script>
36 | </html>


--------------------------------------------------------------------------------
/69To73/demo217.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 70
 7 |     Objects: Properties
 8 |     Property existance
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 3.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10
20 |     };
21 | 
22 |     var a = "price" in plan1;
23 |     var b = "features" in plan1;
24 |     alert(a);
25 |     alert(b);
26 | 
27 | 
28 | </script>
29 | </html>


--------------------------------------------------------------------------------
/69To73/demo218.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 70
 7 |     Objects: Properties
 8 |     Property existance
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 3.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10
20 |     };
21 | 
22 |     delete plan1.pages;
23 |     var a = "pages" in plan1
24 | 
25 |     alert(plan1.pages);
26 |     alert(a);
27 | 
28 | 
29 | 
30 | </script>
31 | </html>


--------------------------------------------------------------------------------
/69To73/demo219.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     Recalling functions
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     function add(a,b){
15 |         return a+b;
16 |     }
17 | 
18 |     var sum = add(4,5);
19 |     alert(sum)
20 | 
21 | 
22 | 
23 | </script>
24 | </html>


--------------------------------------------------------------------------------
/69To73/demo220.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 3.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         add : function (a,b){
21 |             return a+b;
22 |         }
23 |     };
24 | 
25 |     //plan1.add(4,5);
26 |     var sum = plan1.add(4,5);
27 |     alert(sum);
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo221.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 3.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         add : function (a,b){
21 |             return a+b;
22 |         },
23 |         multiply: function (a,b){
24 |             return a*b;
25 |         }
26 |     };
27 | 
28 |     //plan1.add(4,5);
29 |     var sum = plan1.add(4,5);
30 |     var multiply = plan1.multiply(4,5);
31 |     alert(sum);
32 |     alert(multiply)
33 | 
34 | </script>
35 | </html>


--------------------------------------------------------------------------------
/69To73/demo222.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 3.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         calculateAnnualPrice : function (a,b){
21 |             return a*b;
22 |         }
23 |     };
24 | 
25 | 
26 |     var annual = plan1.calculateAnnualPrice(3.99,12)
27 |     alert(annual);
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo223.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 7.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         calculateAnnualPrice : function (a,b){
21 |             return a*b;
22 |         }
23 |     };
24 | 
25 | 
26 |     var annual = plan1.calculateAnnualPrice(plan1.price,12)
27 |     alert(annual);
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo224.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 7.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         
21 |     };
22 |     
23 |     
24 |     function calculateAnnualPrice(a,b){
25 |         return a*b;
26 |     }
27 | 
28 |     
29 |     var annual = calculateAnnualPrice(plan1.price,12)
30 |     alert(annual);
31 | 
32 | </script>
33 | </html>


--------------------------------------------------------------------------------
/69To73/demo225.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 7.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         calculateAnnualPrice : function (){
21 |             return plan1.price * 12;
22 |         }
23 |         
24 |     };
25 | 
26 |     
27 |     var annual = plan1.calculateAnnualPrice()
28 |     alert(annual);
29 | 
30 | </script>
31 | </html>


--------------------------------------------------------------------------------
/69To73/demo226.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 71
 7 |     Objects: Methods
 8 |     functions in Object
 9 |     -->
10 |    
11 | </body>
12 | <script>
13 |     
14 |     var plan1 = {
15 |         name: "Basic",
16 |         price: 7.99,
17 |         space: 100,
18 |         transfer: 1000,
19 |         pages: 10,
20 |         calculateAnnualPrice : function (){
21 |             return this.price * 12;
22 |         }
23 |         
24 |     };
25 |     
26 |     var annual = plan1.calculateAnnualPrice()
27 |     alert(annual);
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo227.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |    function hello(){
14 |        alert("Hello World");
15 |        //return 5;
16 |    }
17 | 
18 |    
19 |    var a = hello();
20 | 
21 | 
22 |    alert(a);
23 | 
24 | 
25 | 
26 | 
27 | </script>
28 | </html>


--------------------------------------------------------------------------------
/69To73/demo228.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |    function hello(){
14 |        alert("Hello World");
15 |        //return 5;
16 |    }
17 | 
18 |    
19 |    var a = hello();
20 |    var b = new hello();
21 |    
22 | 
23 |    alert(a);
24 |    alert(b);
25 | 
26 | 
27 | 
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo229.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 |     
13 |    function hello(){
14 |        alert("Hello World");
15 |        //return 5;
16 |    }
17 | 
18 |    
19 |    var b = new hello();
20 |    var c = new hello();
21 |    var d = new hello();
22 |    
23 | 
24 |    alert(b);
25 |    alert(c);
26 |    alert(d);
27 | 
28 | 
29 | 
30 | 
31 | </script>
32 | </html>


--------------------------------------------------------------------------------
/69To73/demo230.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 |    var a = Student("Arsalan",20);
19 |    alert(a);
20 | 
21 |    
22 |    var b = new Student("Arsalan",20);
23 |    alert(b);
24 |    alert(b.name);
25 | 
26 | 
27 | 
28 | </script>
29 | </html>


--------------------------------------------------------------------------------
/69To73/demo231.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 |    var a = Student("Arsalan",20);
19 |    alert(a);
20 |    alert(a.name);
21 | 
22 |    
23 |    var b = new Student("Arsalan",20);
24 |    alert(b);
25 |    alert(b.name);
26 | 
27 | 
28 | 
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/69To73/demo232.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 |    var b = new Student("Arsalan",20);
19 |    var c = new Student("Ali",25);
20 |    alert(b);
21 |    alert(b.name);
22 | 
23 |    alert(c);
24 |    alert(c.name);
25 | 
26 | 
27 | 
28 | </script>
29 | </html>


--------------------------------------------------------------------------------
/69To73/demo233.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 |     var b = new Student("Arsalan",20);
19 |     var c = new Student("Ali",25);
20 |     var d = new Student("Usman",30);
21 |     alert(b.name);
22 |     alert(c.name);
23 |     alert(d.name);
24 | 
25 | 
26 | 
27 | </script>
28 | </html>


--------------------------------------------------------------------------------
/69To73/demo234.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 72
 7 |     Objects: Constructors
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |     function Plan(name, price, space, transfer, pages) {
14 |         this.name = name;
15 |         this.price = price;
16 |         this.space = space;
17 |         this.transfer = transfer;
18 |         this.pages = pages;
19 |     }
20 | 
21 |     var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);
22 |     var plan2 = new Plan("Premium", 5.99, 500, 5000, 50);
23 |     var plan3 = new Plan("Ultimate", 9.99, 2000, 20000, 500);
24 | 
25 |     alert(plan1);
26 |     alert(plan1.name);
27 |     alert(plan2.name);
28 |     alert(plan3.space);
29 | 
30 | 
31 | 
32 | </script>
33 | </html>


--------------------------------------------------------------------------------
/69To73/demo235.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 73
 7 |     Objects: Constructors for methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |     function Plan(name, price, space, transfer, pages) {
14 |         this.name = name;
15 |         this.price = price;
16 |         this.space = space;
17 |         this.transfer = transfer;
18 |         this.pages = pages;
19 |         this.calculateAnnualCharges = function (){
20 |             return this.price *12;
21 |         };
22 |     }
23 | 
24 |     var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);
25 |     var plan2 = new Plan("Premium", 5.99, 500, 5000, 50);
26 |     var plans3 = new Plan("Ultimate", 9.99, 2000, 20000, 500);
27 | 
28 |     alert(plan1.price);
29 |     var charges = plan1.calculateAnnualCharges();
30 |     alert(charges);
31 |     var charges2 = plan2.calculateAnnualCharges();
32 |     alert(charges2);
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/69To73/demo236.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 73
 7 |     Objects: Constructors for methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |     function Plan(name, price, space, transfer, pages) {
14 |         this.name = name;
15 |         this.price = price;
16 |         this.space = space;
17 |         this.transfer = transfer;
18 |         this.pages = pages;
19 |         this.calculateCharges = function (months){
20 |             return this.price * months;
21 |         };
22 |     }
23 | 
24 |     var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);
25 |     var plan2 = new Plan("Premium", 5.99, 500, 5000, 50);
26 |     var plan3 = new Plan("Ultimate", 9.99, 2000, 20000, 500);
27 | 
28 |     alert(plan1.price);
29 |     var charges = plan1.calculateCharges(8);
30 |     alert(charges);
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | </script>
38 | </html>


--------------------------------------------------------------------------------
/74To75/demo237.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 74
 7 |     Objects: Prototypes
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |     function Plan(name, price, space, transfer, pages) {
14 |         this.name = name;
15 |         this.price = price;
16 |         this.space = space;
17 |         this.transfer = transfer;
18 |         this.pages = pages;        
19 |     }
20 | 
21 |     Plan.prototype.calculateCharges = function (months){
22 |         return this.price * months;
23 |     };
24 | 
25 |     var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);
26 |     var plan2 = new Plan("Premium", 5.99, 500, 5000, 50);
27 |     var plan3 = new Plan("Ultimate", 9.99, 2000, 20000, 500);
28 | 
29 |     alert(plan1.price);
30 |     var charges = plan1.calculateCharges(8);
31 |     alert(charges);
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | </script>
39 | </html>


--------------------------------------------------------------------------------
/74To75/demo238.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 74
 7 |     Objects: Prototypes
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age; 
16 |         /*
17 |         this.study = function (){
18 |             alert("Student is studying");
19 |         } 
20 |         */     
21 |    }
22 | 
23 |    Student.prototype.study = function (){
24 |        alert("Student is studying");
25 |    }
26 | 
27 | 
28 | 
29 |    var b = new Student("Arsalan",20);
30 |    var c = new Student("Ali",25);
31 |    alert(b.name);
32 |    b.study();
33 |    
34 | 
35 | 
36 | 
37 | 
38 | 
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/74To75/demo239.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 74
 7 |     Objects: Prototypes
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age; 
16 |         /*
17 |         this.study = function (){
18 |             alert("Student is studying");
19 |         } 
20 |         */     
21 |    }
22 | 
23 |    Student.prototype.study = function (){
24 |        alert("Student is studying");
25 |    }
26 | 
27 |    Student.prototype.payFees = function (){
28 |        alert("fee paid");
29 |    }
30 | 
31 | 
32 |    var b = new Student("Arsalan",20);
33 |    var c = new Student("Ali",25);
34 |    alert(b.name);
35 |    b.study();
36 |    b.payFees();
37 |    
38 | 
39 | 
40 | 
41 | 
42 | 
43 | </script>
44 | </html>


--------------------------------------------------------------------------------
/74To75/demo240.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 74
 7 |     Objects: Prototypes
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         
15 |    }
16 | 
17 |    //Don't do this
18 |    Student.prototype.name = "";
19 |    Student.prototype.age = 0;
20 | 
21 |    Student.prototype.study = function (){
22 |        alert("Student is studying");
23 |    }
24 | 
25 |    Student.prototype.payFees = function (){
26 |        alert("fee paid");
27 |    }
28 | 
29 | 
30 |    var b = new Student("Arsalan",20);
31 |    var c = new Student("Ali",25);
32 |    alert(b.name);
33 |    b.study();
34 |    b.payFees();
35 |    
36 | 
37 | 
38 | 
39 | 
40 | 
41 | </script>
42 | </html>


--------------------------------------------------------------------------------
/74To75/demo241.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 74
 7 |     Objects: Prototypes
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 |    Student.prototype.subject = "JavaScript";
19 | 
20 |    Student.prototype.study = function (){
21 |        alert("Student is studying");
22 |    }
23 | 
24 |    Student.prototype.payFees = function (){
25 |        alert("fee paid");
26 |    }
27 | 
28 | 
29 |    var b = new Student("Arsalan",20);
30 |    var c = new Student("Ali",25);
31 |    alert(b.name);
32 |    
33 |    alert(b.subject);
34 |    alert(c.subject);
35 |    Student.prototype.subject = "Advanced Javascript";
36 |    
37 |    alert(b.subject);
38 |    alert(c.subject);
39 | 
40 | 
41 | 
42 | 
43 | 
44 | </script>
45 | </html>


--------------------------------------------------------------------------------
/74To75/demo242.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 75
 7 |     Objects: Checking for properties and methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |    }
17 | 
18 | 
19 |    var b = new Student("Arsalan",20);
20 |    alert("name" in b);
21 |    alert("email" in b);
22 |    
23 | 
24 | 
25 | 
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/74To75/demo243.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 75
 7 |     Objects: Checking for properties and methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |         this.email = "abc@gmail.com";
17 |    }
18 | 
19 | 
20 |    var b = new Student("Arsalan",20);
21 |    //alert("name" in b);
22 |    //alert("email" in b);
23 |    for(var a in b){
24 |         alert(a)
25 |    }
26 |    
27 |    
28 | 
29 | 
30 | 
31 | </script>
32 | </html>


--------------------------------------------------------------------------------
/74To75/demo244.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 75
 7 |     Objects: Checking for properties and methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |         this.email = "abc@gmail.com";
17 |    }
18 | 
19 |    Student.prototype.study = function (){
20 |        alert("Student is studying");
21 |    }
22 | 
23 | 
24 |    var b = new Student("Arsalan",20);
25 |    //alert("name" in b);
26 |    //alert("email" in b);
27 |    //b.study();
28 |    for(var a in b){
29 |         alert(a)
30 |    }
31 |    
32 |    
33 | 
34 | 
35 | 
36 | </script>
37 | </html>


--------------------------------------------------------------------------------
/74To75/demo245.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 75
 7 |     Objects: Checking for properties and methods
 8 |     -->
 9 |    
10 | </body>
11 | <script>
12 | 
13 |    function Student(name, age){
14 |         this.name = name;
15 |         this.age = age;
16 |         this.email = "abc@gmail.com";
17 |    }
18 | 
19 |    Student.prototype.study = function (){
20 |        alert("Student is studying");
21 |    }
22 | 
23 | 
24 |    var b = new Student("Arsalan",20);
25 |    
26 |    alert(b.hasOwnProperty("name"));
27 |    alert(b.hasOwnProperty("study"));
28 |    
29 |    
30 | 
31 | 
32 | 
33 | </script>
34 | </html>


--------------------------------------------------------------------------------
/76To78/demo246.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 76
 9 |     Browser control: Getting and setting the URL
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 | </body>
16 | <script>
17 |     alert(window.location.href);
18 |     alert(window.location.hostname);
19 |     alert(window.location.host);
20 |     alert(window.location.path);
21 |     alert(window.location.pathname);
22 |     alert(window.location.hash);
23 | </script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/76To78/demo247.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 76
 7 |     Browser control: Getting and setting the URL
 8 |     -->
 9 |    
10 |    <div>
11 |        Hello World
12 |    </div>
13 | </body>
14 | <script>
15 | 
16 |     alert(window.location.href);
17 |     window.location.href = "https://en.wikipedia.org/"
18 | 
19 | 
20 | 
21 | </script>
22 | </html>


--------------------------------------------------------------------------------
/76To78/demo248.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 76
 9 |     Browser control: Getting and setting the URL
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 |     <button onclick="onClickButton()">Click Here</button>
16 | </body>
17 | <script>
18 |     alert(window.location.href);
19 | 
20 |     function onClickButton() {
21 |         window.location.href = "https://en.wikipedia.org/"
22 |     }
23 | </script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/76To78/demo249.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 76
 9 |     Browser control: Getting and setting the URL
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 |     <button onclick="onClickButton()">Click Here</button>
16 | </body>
17 | <script>
18 |     alert(window.location.href);
19 | 
20 |     function onClickButton() {
21 |         window.location.href = "https://en.wikipedia.org/wiki/JavaScript"
22 |     }
23 | </script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/76To78/demo250.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 76
 9 |     Browser control: Getting and setting the URL
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 |     <button onclick="onClickButton()">Click Here</button>
16 | </body>
17 | <script>
18 |     alert(window.location.href);
19 | 
20 |     function onClickButton() {
21 |         window.location.href = "https://en.wikipedia.org/wiki/JavaScript#Syntax"
22 |     }
23 | </script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/76To78/demo251.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 76
 9 |     Browser control: Getting and setting the URL
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 |     <button onclick="onClickButton()">Click Here</button>
16 | </body>
17 | <script>
18 |     
19 |     alert(window.location.href);
20 |     function onClickButton(){
21 |         window.location.href = "demo251_1.html"
22 |     }
23 | 
24 |     
25 | 
26 | 
27 | 
28 | </script>
29 | </html>


--------------------------------------------------------------------------------
/76To78/demo251_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 76
 7 |     Browser control: Getting and setting the URL
 8 |     -->
 9 |    
10 |    <div>
11 |        Testing demo251_1
12 |    </div>
13 |    
14 | </body>
15 | <script>
16 |     
17 |     
18 | 
19 | </script>
20 | </html>


--------------------------------------------------------------------------------
/76To78/demo252_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 76
 7 |     Browser control: Getting and setting the URL
 8 |     -->
 9 |    
10 |    <div>
11 |        Testing page on click
12 |    </div>
13 |    
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/76To78/demo253.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 77
 9 |     Browser control: Getting and setting the URL another way
10 |     -->
11 | 
12 |     <div>
13 |         Hello World
14 |     </div>
15 |     <button onclick="onClickButton()">Click Here</button>
16 | </body>
17 | <script>
18 |     
19 |     alert(window.location.href);
20 |     function onClickButton(){
21 |         window.location.assign("./demo251_1.html")
22 |     }
23 | 
24 |     
25 | 
26 | 
27 | 
28 | </script>
29 | </html>


--------------------------------------------------------------------------------
/76To78/demo254.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 77
 7 |     Browser control: Getting and setting the URL another way
 8 |     -->
 9 |    
10 |    <div>
11 |        Hello World
12 |    </div>
13 |    <button onclick="onClickButton()" >Click Here Reaplce</button>
14 | </body>
15 | <script>
16 |     
17 |     alert(window.location.href);
18 |     function onClickButton(){
19 |         window.location.replace("file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo251_1.html")
20 |     }
21 | 
22 |     
23 | 
24 | 
25 | 
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/76To78/demo255.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 77
 7 |     Browser control: Getting and setting the URL another way
 8 |     -->
 9 |    
10 |    <div>
11 |        Hello World
12 |    </div>
13 |    <button onclick="onClickButton1()" >Reload With True</button>
14 |    <button onclick="onClickButton2()" >Reload With False</button>
15 |    <button onclick="onClickButton3()" >Reload </button>
16 |    <button onclick="onClickButton4()" >Reload Alternative</button>
17 | </body>
18 | <script>
19 |     
20 |     alert(window.location.href);
21 |     function onClickButton1(){
22 |         window.location.reload(true);
23 |     }
24 |     function onClickButton2(){
25 |         window.location.reload(false);
26 |     }
27 |     function onClickButton3(){
28 |         window.location.reload();
29 |     }
30 | 
31 |     function onClickButton4(){
32 |         window.location.href = window.location.href
33 |     }
34 | 
35 |     
36 | 
37 | 
38 | 
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/76To78/demo256.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 78
 7 |     Browser control: Forward and reverse
 8 |     -->
 9 |    
10 |    <div>
11 |        Main page <br>
12 |        Hello World
13 |    </div>
14 |    <button onclick="goBack()" >Go Back</button>
15 |    <button onclick="goForward()" >Go Forward</button>
16 |    <button onclick="goPlus2()" >Go Plus 2 </button>
17 |    <button onclick="goMinus2()" >Go Minus 2</button>
18 |    <br><br>
19 |    <button onclick="goToPage1()" >Go to Page 1</button>
20 |    <button onclick="goToPage2()" >Go to Page 2</button>
21 |    <button onclick="goToPage3()" >Go to Page 3</button>
22 |    <button onclick="goToPage4()" >Go to Page 4</button>
23 | </body>
24 | <script>
25 |     
26 |     function goBack(){
27 |         history.back()
28 |     }
29 |     function goForward(){
30 |         history.forward()
31 |     }
32 |     function goPlus2(){   // registration steps
33 |         history.go(2);
34 |     }
35 | 
36 |     function goMinus2(){
37 |         history.go(-2);
38 |     }
39 | 
40 |     
41 |     function goToPage1(){
42 |         window.location.href = "demo256_1.html"
43 |     }
44 |     function goToPage2(){
45 |         window.location.href = "demo256_2.html"
46 |     }
47 |     function goToPage3(){
48 |         window.location.href = "demo256_3.html"
49 |     }
50 |     function goToPage4(){
51 |         window.location.href = "demo256_4.html"
52 |     }
53 | 
54 | </script>
55 | </html>


--------------------------------------------------------------------------------
/76To78/demo256_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 78
 7 |     Browser control: Forward and reverse
 8 |     -->
 9 |    
10 |    <div>
11 |        Page 1<br>
12 |        Hello World
13 |    </div>
14 |    <button onclick="goBack()" >Go Back</button>
15 |    <button onclick="goForward()" >Go Forward</button>
16 |    <button onclick="goPlus2()" >Go Plus 2 </button>
17 |    <button onclick="goMinus2()" >Go Minus 2</button>
18 |    <br><br>
19 |    <button onclick="goToPage1()" >Go to Page 1</button>
20 |    <button onclick="goToPage2()" >Go to Page 2</button>
21 |    <button onclick="goToPage3()" >Go to Page 3</button>
22 |    <button onclick="goToPage4()" >Go to Page 4</button>
23 | </body>
24 | <script>
25 |     
26 |     function goBack(){
27 |         history.back()
28 |     }
29 |     function goForward(){
30 |         history.forward()
31 |     }
32 |     function goPlus2(){
33 |         history.go(2);
34 |     }
35 | 
36 |     function goMinus2(){
37 |         history.go(-2);
38 |     }
39 | 
40 |     function goToPage1(){
41 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_1.html"
42 |     }
43 |     function goToPage2(){
44 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_2.html"
45 |     }
46 |     function goToPage3(){
47 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_3.html"
48 |     }
49 |     function goToPage4(){
50 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_4.html"
51 |     }
52 | 
53 | 
54 | </script>
55 | </html>


--------------------------------------------------------------------------------
/76To78/demo256_2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 78
 7 |     Browser control: Forward and reverse
 8 |     -->
 9 |    
10 |    <div>
11 |        Page 2<br>
12 |        Hello World
13 |    </div>
14 |    <button onclick="goBack()" >Go Back</button>
15 |    <button onclick="goForward()" >Go Forward</button>
16 |    <button onclick="goPlus2()" >Go Plus 2 </button>
17 |    <button onclick="goMinus2()" >Go Minus 2</button>
18 |    <br><br>
19 |    <button onclick="goToPage1()" >Go to Page 1</button>
20 |    <button onclick="goToPage2()" >Go to Page 2</button>
21 |    <button onclick="goToPage3()" >Go to Page 3</button>
22 |    <button onclick="goToPage4()" >Go to Page 4</button>
23 | </body>
24 | <script>
25 |     
26 |     function goBack(){
27 |         history.back()
28 |     }
29 |     function goForward(){
30 |         history.forward()
31 |     }
32 |     function goPlus2(){
33 |         history.go(2);
34 |     }
35 | 
36 |     function goMinus2(){
37 |         history.go(-2);
38 |     }
39 | 
40 |     
41 |     function goToPage1(){
42 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_1.html"
43 |     }
44 |     function goToPage2(){
45 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_2.html"
46 |     }
47 |     function goToPage3(){
48 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_3.html"
49 |     }
50 |     function goToPage4(){
51 |         window.location.href = "file:///home/uqutub/Documents/CLASSES/UIT/JS/76To78/demo256_4.html"
52 |     }
53 | 
54 | 
55 | </script>
56 | </html>


--------------------------------------------------------------------------------
/79To81/demo257.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 79
 7 |     Browser control: Filling the window with content
 8 |     -->
 9 |    
10 |    
11 | </body>
12 | <script>
13 |         var newWindow = window.open();
14 | </script>
15 | </html>


--------------------------------------------------------------------------------
/79To81/demo258.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 79
 7 |     Browser control: Filling the window with content
 8 |     -->
 9 |    
10 |    
11 | </body>
12 | <script>
13 |         var content = "<h1>Capuchin monkey</h1><img src= 'monkey.jpg'><p>The word capuchin derives from a group of friars<br>named the Order of Friars Minor Capuchin who wear<br>brown robes with large hoods covering their heads.</p>"
14 |         var newWindow = window.open();
15 |         newWindow.document.write(content);
16 | </script>
17 | </html>


--------------------------------------------------------------------------------
/79To81/demo259.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 79
 7 |     Browser control: Filling the window with content
 8 |     -->
 9 |    
10 |    <button onclick="openNewWindow()">Open New Window</button>
11 |    
12 | </body>
13 | <script>
14 |     
15 |     function openNewWindow(){
16 |         var content = "<h1>Capuchin monkey</h1><img src= 'monkey.jpg'><p>The word capuchin derives from a group of friars<br>named the Order of Friars Minor Capuchin who wear<br>brown robes with large hoods covering their heads.</p>"
17 |         var newWindow = window.open();
18 |         //newWindow.document.write(content);
19 |     }
20 | 
21 |         
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/79To81/demo260.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 79
 9 |     Browser control: Filling the window with content
10 |     -->
11 | 
12 |     <button onclick="openNewWindow()">Open New Window</button>
13 | 
14 | </body>
15 | <script>
16 |     function openNewWindow() {
17 |         var _window = window.open();
18 |         _window.location.assign("http://www.animals.com/capuchin.html");
19 |         // _window.location.href = "http://www.animals.com/capuchin.html";
20 | 
21 |     }
22 | </script>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/79To81/demo261.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body>
 5 |     <!-- 
 6 |     Chapter 79
 7 |     Browser control: Filling the window with content
 8 |     -->
 9 |    
10 |    <button onclick="openNewWindow()">Open New Window</button>
11 |    
12 | </body>
13 | <script>
14 |     
15 |     function openNewWindow(){
16 |         var newWindow = window.open("http://www.animals.com/capuchin.html");
17 | 
18 |     }
19 | 
20 |         
21 | </script>
22 | </html>


--------------------------------------------------------------------------------
/79To81/demo262.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 79
 9 |     Browser control: Filling the window with content
10 |     -->
11 | 
12 |     <button onclick="openNewWindow()">Open New Window</button>
13 |     <button onclick="closeNewWindow()">Close New Window</button>
14 | 
15 | </body>
16 | <script>
17 |     var newWindow = null;
18 | 
19 |     function openNewWindow() {
20 |         newWindow = window.open("http://www.animals.com/capuchin.html");
21 |     }
22 | 
23 |     function closeNewWindow() {
24 |         if (newWindow) {
25 |             newWindow.close();
26 |         }
27 |     }
28 | </script>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/79To81/demo263.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 80
 9 |     Browser control: Controlling the window's size and location
10 |     -->
11 | 
12 |     <button onclick="openNewWindow()">Open New Window</button>
13 |     <button onclick="closeNewWindow()">Close New Window</button>
14 | 
15 | </body>
16 | <script>
17 |     var newWindow = null;
18 | 
19 |     function openNewWindow() {
20 |         newWindow = window.open("http://www.animals.com/capuchin.html", "abc", "width=420,height=380");
21 |     }
22 | 
23 |     function closeNewWindow() {
24 |         newWindow.close();
25 |     }
26 | </script>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/79To81/demo264.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 | </head>
 5 | 
 6 | <body>
 7 |     <!-- 
 8 |     Chapter 80
 9 |     Browser control: Controlling the window's size and location
10 |     -->
11 | 
12 |     <button onclick="openNewWindow()">Open New Window</button>
13 |     <button onclick="closeNewWindow()">Close New Window</button>
14 | 
15 | </body>
16 | <script>
17 |     var newWindow = null;
18 | 
19 |     function openNewWindow() {
20 |         newWindow = window.open("http://www.animals.com/capuchin.html", "My Window", "width=420,height=380,left=50,top=50");
21 |     }
22 | 
23 |     function closeNewWindow() {
24 |         newWindow.close();
25 |     }
26 | </script>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/79To81/demo265.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | </head>
 4 | <body onload="checkBlocker()">
 5 |      
 6 |    <button onclick="openNewWindow()">Open New Window</button>
 7 |    <button onclick="closeNewWindow()">Close New Window</button>
 8 |    
 9 | </body>
10 | <script>
11 |        
12 |     var newWindow = null;
13 |     function openNewWindow(){
14 |         newWindow = window.open("http://www.animals.com/capuchin.html","My Window","width=420,height=380,left=200,top=100");
15 |     }
16 | 
17 |     function closeNewWindow(){
18 |         newWindow.close();
19 |     }
20 | 
21 |     function checkBlocker(){
22 |         var testPop = window.open("", "","width=100,height=100");
23 |         if (!testPop){
24 |             alert("Please disable your popup blocker.");
25 |         } else {
26 |             // testPop.close();
27 |         }
28 | 
29 |     }
30 | 
31 | 
32 | 
33 |         
34 | </script>
35 | </html>


--------------------------------------------------------------------------------
/Advance JS/0-sync.js:
--------------------------------------------------------------------------------
 1 | function getSalary() {
 2 |     return 20000;
 3 | }
 4 | function subtractTax(sal) {
 5 |     return sal - (sal * 0.25);
 6 | }
 7 | function subtractHouseRent(sal) {
 8 |     return sal - 1500;
 9 | }
10 | function getDisposalSalary() {
11 |     var salary = getSalary();
12 |     salary = subtractTax(salary);
13 |     salary = subtractHouseRent(salary);
14 |     return salary;
15 | }
16 | 
17 | console.log(getDisposalSalary());
18 | 


--------------------------------------------------------------------------------
/Advance JS/1-callback.js:
--------------------------------------------------------------------------------
 1 | function getSalary(cb) {
 2 |     setTimeout(function() {
 3 |         cb(20000);
 4 |     }, 1500);
 5 | }
 6 | function subtractTax(sal) {
 7 |     return sal - (sal * 0.25);
 8 | }
 9 | function subtractHouseRent(sal) {
10 |     return sal - 1500;
11 | }
12 | function getDisposalSalary(cb) {
13 |     getSalary(function (salary) {
14 |         salary = subtractTax(salary);
15 |         salary = subtractHouseRent(salary);
16 |         cb(salary);
17 |     });
18 | }
19 | 
20 | 
21 | 
22 | getDisposalSalary(function(data) {
23 |     console.log(data);
24 | });
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | function login(user, pwd, success, error) {
32 |     console.log('Loading.... Loader, waiting....')
33 |      setTimeout(function () {       // network call / API
34 |         // if (user == admin && pwd== adin)
35 |         if(user == 'admin' && pwd == 'admin') {
36 |             success();    // callback
37 |         } else {
38 |             error();        // callback
39 |         } 
40 |      }, 3000);
41 | };
42 | function errorHandling(err) {
43 |     console.log('pls ttry again...');
44 | }
45 | function gotoDashboard() {
46 |     console.log('Welcome to Dahsboad/Homepage');
47 | }
48 | 
49 | 
50 | function letsLogin(u, p) {
51 | 
52 |     login(u, p, gotoDashboard, errorHandling);
53 | }
54 | 
55 | 
56 | letsLogin('admin', 'p')


--------------------------------------------------------------------------------
/Advance JS/2-callback-hell.js:
--------------------------------------------------------------------------------
 1 | function getSalary(cb) {
 2 |     setTimeout(() => {
 3 |         cb(20000);
 4 |     }, 1500);
 5 | }
 6 | function subtractTax(sal, cb) {
 7 |     setTimeout(() => {
 8 |         cb(sal - (sal * 0.25));
 9 |     }, 1000);
10 | }
11 | function subtractHouseRent(sal, cb) {
12 |     setTimeout(() => {
13 |         cb(sal - 1500);
14 |     }, 1000);
15 | }
16 | function getDisposalSalary(cb) {
17 |     getSalary(salary_1 => {
18 |         console.log('got salary');
19 |         subtractTax(salary_1, salary_2 => {
20 |             console.log('got tax');
21 |             subtractHouseRent(salary_2, salary_3 => {
22 |                 console.log('got rent');
23 |                 cb(salary_3);
24 |             });
25 |         });
26 |     });
27 | }
28 | 
29 | getDisposalSalary(calulatedAmount => {
30 |     console.log(calulatedAmount);
31 | });
32 | 


--------------------------------------------------------------------------------
/Advance JS/4-clouser.js:
--------------------------------------------------------------------------------
 1 | // function clouser(a) {
 2 | //     var b = a;
 3 | //     setTimeout(function () {
 4 | //         console.log('clouser val: ', b);
 5 | //     });
 6 | // }
 7 | // function call() {
 8 | //     var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
 9 | //     for (var i = 0; i < arr.length; i++) {
10 | //         clouser(arr[i]);
11 | //     }
12 | // }
13 | // call();
14 | 
15 | 
16 | function callCount() {
17 |     var count = 0;
18 |     return function () {
19 |         count++;
20 |         console.log(count);
21 |     }
22 | }
23 | var counter = callCount();
24 | counter();
25 | counter();
26 | counter();
27 | 


--------------------------------------------------------------------------------
/Advance JS/5-ajax.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | var abc = null;
 7 | 
 8 | // function callback(data) {
 9 | //     abc = data;
10 | //     console.log('abc...............', abc)
11 | // }
12 | 
13 | function getMyGithubProfile(_callFunc) {
14 |     var xhttp = new XMLHttpRequest();
15 |     console.log('1 registeration...')
16 |     xhttp.onreadystatechange = function () {
17 |         if (this.readyState == 4 && this.status == 200) {
18 |             console.log('4 xyz...', xhttp.responseText);
19 |             _callFunc(xhttp.responseText);
20 |         }
21 |     };
22 |     xhttp.open("GET", "https://api.github.com/users/uqutub", true);
23 |     // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
24 |     console.log('2 sending.....');
25 |     xhttp.send();
26 | }
27 | 
28 | getMyGithubProfile(function(data) {
29 |     abc = data
30 |     console.log('abc...............', abc)
31 |     
32 | 
33 | });
34 | 
35 | 
36 | 
37 | 
38 | 
39 | fetchApi('https://api.github.com/users/uqutub')
40 | .then(data => { 
41 | 	console.log('My Name ', data.name);
42 | 	return fetchApi('https://api.github.com/users/'+data.id)
43 | 	
44 | })
45 | .then(data)
46 | .catch(err => console.log('Err ', err))
47 | 
48 | 
49 | 
50 | var posts = ['post1', 'post2']
51 | 
52 | posts.map(item => fetchApi('http://getpost/'+item))
53 | 
54 | 
55 | function fetchApi(url) {
56 | 
57 |     return new Promise((res, rej) => {
58 |         fetch(url, true).then(res => res.json())
59 |         .then(data => res(data))
60 |         .catch(err => rej(err))
61 |     })
62 | 
63 | }


--------------------------------------------------------------------------------
/Advance JS/Adv/Adv/01 Stacks (Data Structure).js:
--------------------------------------------------------------------------------
 1 | // Stacks (Data Structure)
 2 | 
 3 | // Creates a stack
 4 | var Stack = function() {
 5 |     this.count = 0;
 6 |     this.storage = {};
 7 |   
 8 |     // Adds a value onto the end of the stack
 9 |     this.push = function(value) {
10 |         this.storage[this.count] = value;
11 |         this.count++;
12 |     }
13 |     
14 |     // Removes and returns the value at the end of the stack
15 |     this.pop = function() {
16 |         if (this.count === 0) {
17 |             return undefined;
18 |         }
19 | 
20 |         this.count--;
21 |         var result = this.storage[this.count];
22 |         delete this.storage[this.count];
23 |         return result;
24 |     }
25 |     
26 |     this.size = function() {
27 |         return this.count;
28 |     }
29 |     
30 |     // Returns the value at the end of the stack
31 |     this.peek = function() {
32 |         return this.storage[this.count-1];
33 |     }
34 | }
35 | 
36 | var myStack = new Stack();
37 | 
38 | myStack.push(1);
39 | myStack.push(2);
40 | console.log(myStack.storage);
41 | console.log(myStack.peek());
42 | console.log(myStack.pop());
43 | console.log(myStack.storage);
44 | console.log(myStack.peek());
45 | myStack.push("Demo Of the Stack.....");
46 | console.log(myStack.storage);
47 | console.log(myStack.size());
48 | console.log(myStack.peek());
49 | console.log(myStack.pop());
50 | console.log(myStack.peek());
51 | console.log(myStack.storage);


--------------------------------------------------------------------------------
/Advance JS/Adv/Adv/Listeners.js:
--------------------------------------------------------------------------------
 1 | document.body.addEventListener("mousemove", (ev) => {
 2 |     console.log("Event: mousemove ", ev);
 3 | });
 4 | 
 5 | 
 6 | document.body.addEventListener("click", (ev) => {
 7 |     console.log("Event: click ", ev);
 8 | });
 9 | 
10 | 
11 | 
12 | window.tdiff = [];
13 | fred = function (a, b) {
14 |     return a - b;
15 | };
16 | window.document.onload = function (e) {
17 |     console.log("document.onload", e, Date.now(), window.tdiff,
18 |         (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred));
19 | }
20 | window.onload = function (e) {
21 |     console.log("window.onload", e, Date.now(), window.tdiff,
22 |         (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred));
23 | }


--------------------------------------------------------------------------------
/Advance JS/Adv/Adv/Pizza challenge.js:
--------------------------------------------------------------------------------
1 | a ????
2 | 
3 | 
4 | if(a == 1 && a == 2 && a ==3) {
5 |     console.log('Working........');
6 | }


--------------------------------------------------------------------------------
/Advance JS/Adv/Adv/async_await.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/Advance JS/Adv/Adv/async_await.pdf


--------------------------------------------------------------------------------
/Advance JS/Adv/Adv/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <h1>Hello</h1>
14 | 
15 | 
16 |     <script>
17 |         console.log('hello...')
18 |         setTimeout(() => {
19 |             console.log('registering')
20 |             document.body.addEventListener("click", (ev) => {
21 |                 console.log("Event: mousemove ", ev);
22 |             });
23 |         }, 100)
24 |     </script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Advance JS/Adv/Map.reducer.js:
--------------------------------------------------------------------------------
1 | var arry = [1,2,3,4];
2 | 
3 | array.reduce(function(total, currentValue) {
4 |         return total + currentValue
5 | }, 0)


--------------------------------------------------------------------------------
/Advance JS/Adv/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Document</title>
 4 | </head>
 5 | <body>
 6 |     
 7 | 
 8 |     
 9 | 
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Advance JS/Adv/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/Advance JS/Adv/index.js


--------------------------------------------------------------------------------
/Advance JS/Adv/test.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uqutub/learn-javascript/5d438dcaf498d5862ad6cd5b0180b63b9ce49018/Advance JS/Adv/test.js


--------------------------------------------------------------------------------
/Advance JS/Advance_solution.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | // task 1 : Clouser
 3 | var arr2 = [
 4 |     1, 2, 3, 4, 5
 5 | ];
 6 | 
 7 | for (var i = 0; i < arr2.length; i++) {
 8 |     log(arr2[i]);
 9 | }
10 | 
11 | // function log(item) {
12 | //     setTimeout(() => {
13 | //         console.log(item);
14 | //     }, 1000);
15 | // }
16 | 
17 | // arr2.forEach(function(ele) {
18 | //     setTimeout(() => {
19 | //         console.log(ele);
20 | //     }, 1000);
21 | // })
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | // task 2
73 | 
74 | // task using callback show serialize
75 | var arr = [
76 |     { id: 1, timer: 1000 },
77 |     { id: 2, timer: 2000 },
78 |     { id: 3, timer: 500 },
79 |     { id: 4, timer: 800 },
80 | ];
81 | 
82 | 
83 | // solution 2
84 | function callFunc(arr) {
85 |     let item = arr.pop();
86 |     if (item) {
87 |         setTimeout(() => {
88 |             console.log(item.id);
89 |             callFunc(arr);
90 |         }, item.timer);
91 |     }
92 | }
93 | callFunc(arr);


--------------------------------------------------------------------------------
/Advance JS/extra/1. sync.js:
--------------------------------------------------------------------------------
 1 | var num1 = 1
 2 | var num2 = 2
 3 | var num3 = calc();
 4 | 
 5 | function calc() {
 6 |     var total = num1 + num2;
 7 |     console.log('adding sync');
 8 |     return total;
 9 | }
10 | 
11 | console.log(num3);


--------------------------------------------------------------------------------
/Advance JS/extra/2. async_issue.js:
--------------------------------------------------------------------------------
 1 | var num1 = 1
 2 | var num2 = 2
 3 | var num3 = calc();
 4 | 
 5 | function calc() {
 6 |     var total = null;
 7 |     setTimeout(() => {
 8 |         console.log('adding async')
 9 |         total = num1 + num2;
10 |     }, 50)
11 |     return total;
12 | }
13 | 
14 | console.log(num3);


--------------------------------------------------------------------------------
/Advance JS/extra/3. async_resolved.js:
--------------------------------------------------------------------------------
 1 | // callback
 2 | 
 3 | var num1 = 1
 4 | var num2 = 2
 5 | var num3 = calc(showTotal);
 6 | 
 7 | function calc(myCallBack) {
 8 |     var total = null;
 9 |     setTimeout(() => {
10 |         console.log('adding async')
11 |         total = num1 + num2;
12 |         num3 = total;
13 |         myCallBack();
14 |     }, 50);
15 | }
16 | 
17 | function showTotal() {
18 |     console.log('SUM Result ', num3);
19 | }


--------------------------------------------------------------------------------
/Advance JS/extra/4. makingTea.js:
--------------------------------------------------------------------------------
 1 | // callback
 2 | function makingTea(myCallBackFunc) {
 3 |     console.log('1. adding Water')
 4 |     console.log('2. sugar')
 5 |     console.log('3. tea')
 6 |     console.log('4. boiling Start')
 7 |     setTimeout(function() {
 8 |         console.log('5. boiling Completed');
 9 |         myCallBackFunc()
10 |     }, 500);
11 | }
12 | 
13 | function readyForServing() {
14 |     console.log('6. Serving...');
15 | }
16 | 
17 | 
18 | //calling 
19 | makingTea(readyForServing);


--------------------------------------------------------------------------------
/Advance JS/extra/5. networkcall.js:
--------------------------------------------------------------------------------
 1 | var githuId = 'uqutub'
 2 | 
 3 | function fetchUserData(id) {
 4 |     fetch('https://api.github.com/users/'+id)
 5 |     .then(function(response){
 6 |         return response.json()
 7 |     })
 8 |     .then(function(data) {
 9 |         console.log('data ', data);
10 |         UserDetails(data);
11 |     })
12 |     .catch(function(err) {
13 |         console.log('err ', err);
14 |     })
15 | }
16 | 
17 | function UserDetails(d) {
18 |     console.log('Id ', d.id);
19 |     console.log('Name ', d.name);
20 |     console.log('Total Repo. ', d.public_repos);
21 | }
22 | 
23 | 
24 | 
25 | console.log('calling start');
26 | fetchUserData(githuId);
27 | console.log('calling end');


--------------------------------------------------------------------------------
/Advance JS/extra/task/task-1.js:
--------------------------------------------------------------------------------
 1 | var fruits = ['orange 2', 'apple 1', 'banana 3', 'apple 4', 'cherry 4'];
 2 | 
 3 | // result should be:
 4 | // apple 5
 5 | // cherry 4
 6 | // banana 3
 7 | // orange 2
 8 | 
 9 | // solution
10 | var obj = {};
11 | fruits.forEach(f => {
12 |     var name = f.split(' ')[0] 
13 |     var count = parseInt(f.split(' ')[1]);
14 |     obj[name] = obj[name] ? obj[name] + count : count;
15 | })
16 | 
17 | Object.keys(obj).sort((a,b) => {
18 |     return obj[b] - obj[a];
19 | }).map(f => `${f} ${obj[f]}`);
20 | 
21 | 
22 | 
23 | 
24 | 
25 | 
26 | 
27 | const fruits = ['grape 3', 'banana 1', 'grape 2', 'banana 3', 'apple 4', 'avocado 5'];
28 | let obj = fruits.reduce((o, item) => {
29 |   let [name, qty] = item.split(' ');
30 |   o[name] = item[name] ? item[name] + qty : qty;
31 |   return o
32 | }, {});
33 | 
34 | let results = Object.keys(obj).sort().sort((a,b) => obj[b] - obj[a]).map(f => `${f} ${obj[f]}`);
35 | console.log(results)


--------------------------------------------------------------------------------
/Advance JS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 | 
11 |     link: https://www.youtube.com/watch?v=RRgAdi3gX-s
12 |     
13 | 
14 |   <!-- <script src="0-sync.js"></script> 
15 |      <script src="1-callback.js"></script>-->
16 |     <script src="5-ajax.js"></script> 
17 |     <!-- <script src="3-promise.js"></script> -->
18 |     <!-- <script src="task.js"></script> -->
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Advance JS/task.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // task 1 : Clouser
 3 | var arr2 = [
 4 |     1, 2, 3, 4, 5
 5 | ];
 6 | 
 7 | function abc() {
 8 |     for (var i = 0; i < arr2.length; i++) {
 9 |         xyz(arr2[i]);
10 |     }
11 | }
12 | 
13 | function xyz(item) {
14 |     setTimeout(() => {
15 |         console.log(item);
16 |     }, 1000);
17 | }
18 | 
19 | console.log('calling abc func');
20 | abc();
21 | 
22 | // task 2 : task using callback show serialize: recursion
23 | 
24 | var arr = [
25 |     { id: 1, timer: 1000 },
26 |     { id: 2, timer: 2000 },
27 |     { id: 3, timer: 500 },
28 |     { id: 4, timer: 800 },
29 | ];


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