JavaScript Basics Three evening classes A, B and C Version 1.0 June 25, 2018
Website Analysis
Problem Analyze four commercial websites: Amazon.com Ebay.com Facebook.com Google.com For HTML, CSS and JavaScript Use
Step 1: Load the four websites Into Atom and save on Desktop
Step 2: Google.com Determine # of Lines of Code Go to end of file (Ctrl-End)
Step 3: Determine # of Lines of Code Repeat for Amazon, Facebook and Ebay Enter into Web Analysis Handout
Step 4: Google.com Determine # of HTML Comments Show “Find” Dialog (Ctrl-F)
Determine # of HTML Comments Repeat for Amazon, Facebook and Ebay Step 4: Determine # of HTML Comments Repeat for Amazon, Facebook and Ebay Enter into Web Analysis Handout
Step 5: Complete Web Analysis Handout
Step 6: Discuss
Problem Of the Desktop Web Pages Amazon.html Ebay.html Facebook.html Google.html Determine which are Useable (Use only absolute directory paths)
Look at JavaScript window Object Step 1 Problem Look at JavaScript window Object Step 1 Download window.html to Atom and Desktop from scottsdevelopers.com | Resources | Intro to JavaScript | Class C
window.html View in Atom and Chrome <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>The window object</title> </head> <script> function init() { var hotel1 = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false } alert("Running JavaScript"); alert("Hotel 1 Chain: " + hotel1.chain); alert("Hotel 1 Name: " + hotel1.name); alert("Hotel 1 numRooms: " + hotel1.numRooms); alert("Hotel 1 hasPool: " + hotel1.hasPool); </script> <body onLoad="init()"> <p>Hello, Class!</p> </body> </html>
Step 2 Create window2.html by combining alert()s Test var msg = ""; msg += "Running Javascript" + "\n"; msg += "Hotel 1 Chain: " + hotel1.chain + "\n"; msg += "Hotel 1 Name: " + hotel1.name + "\n"; msg += "Hotel 1 numRooms: " + hotel1.numRooms + "\n"; msg += "Hotel 1 hasPool: " + hotel1.hasPool + "\n"; alert(msg);
Step 3 Create window3.html by Making English better before after var msg = ""; msg += "Running Javascript" + "\n"; msg += "Hotel 1 Chain: " + hotel1.chain + "\n"; msg += "Hotel 1 Name: " + hotel1.name + "\n"; msg += "Hotel 1 numRooms: " + hotel1.numRooms + "\n"; msg += "Hotel 1 hasPool: " + hotel1.hasPool + "\n"; alert(msg); var msg = "Hotel 1" + "\n"; msg += "Chain: " + hotel1.chain + "\n"; msg += "Hotel: " + hotel1.name + "\n"; msg += "# of Rooms: " + hotel1.numRooms + "\n"; if(hotel1.hasPool) { msg += "Pool? Yes" + "\n"; } else { msg += "Pool? No" + "\n"; } alert(msg);
Step 4 Create window4.html by from window2.html by refactoring Remove function init() from <script>, running all init() code directly Change all "\n" to "<br>" Remove onLoad="init()" from <body> Remove alert() from <script> After <p> add: <script> document.write(msg); </script>
Step 4 window4.html before after function init() { var hotel1 = { <script> function init() { var hotel1 = { . . . } alert(msg); </script> <body onLoad="init()"> <p>Hello, Class!</p> </body> <script> var hotel1 = { . . . </script> <body> <p>Hello, Class!</p> document.write(msg); </body>
Step 4 window4.html <script> var hotel1 = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false } var msg = ""; msg += "Running Javascript" + "<br>"; msg += "Hotel 1 Chain: " + hotel1.chain + "<br>"; msg += "Hotel 1 Name: " + hotel1.name + "<br>"; msg += "Hotel 1 numRooms: " + hotel1.numRooms + "<br>"; msg += "Hotel 1 Has Pool? " + hotel1.hasPool + "<br>"; </script> </head> <body> <p>Hello, Class!</p> <script>document.write(msg);</script> </body>
Alternate Object syntax: <script> var hotel1 = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false } alert("Hotel 1 chain: " + hotel1.chain ); alert("Hotel 1 chain: " + hotel1[chain] ); </script> Dot Notation
Alternate Object syntax: <script> var hotel1 = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false } alert("Hotel 1 chain: " + hotel1.chain ); alert("Hotel 1 chain: " + hotel1[chain] ); </script> Object Notation
Step 5 window4.html Run JavaScript In Chrome Console Window for(var p in hotel1) alert(hotel1[p]);
Step 6 window5.html Run window5.html <script> var hotel1 = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false } var msg = ""; for(var p in hotel1) { msg += p + "=" + hotel1[p] + "<br>"; </script> <body> <p>Hello, Class!</p> <script>document.write(msg);</script> </body>
Step 7 window6.html Run window6.html