Download presentation
Presentation is loading. Please wait.
1
JavaScript Basics Three evening classes A, B and C
Version 1.0 June 25, 2018
2
Website Analysis
3
Problem Analyze four commercial websites: Amazon.com Ebay.com Facebook.com Google.com For HTML, CSS and JavaScript Use
4
Step 1: Load the four websites
Into Atom and save on Desktop
5
Step 2: Google.com Determine # of Lines of Code Go to end of file (Ctrl-End)
6
Step 3: Determine # of Lines of Code
Repeat for Amazon, Facebook and Ebay Enter into Web Analysis Handout
7
Step 4: Google.com Determine # of HTML Comments Show “Find” Dialog (Ctrl-F)
8
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
9
Step 5: Complete Web Analysis Handout
10
Step 6: Discuss
11
Problem Of the Desktop Web Pages Amazon.html Ebay.html Facebook.html Google.html Determine which are Useable (Use only absolute directory paths)
12
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
13
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>
14
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);
15
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);
16
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>
17
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>
18
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>
19
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
20
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
21
Step 5 window4.html Run JavaScript In Chrome Console Window
for(var p in hotel1) alert(hotel1[p]);
22
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>
23
Step 7 window6.html Run window6.html
Similar presentations
![Working with Forms. how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any.](/3/783151/big_thumb.jpg "Working with Forms. how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any.>")
