Download presentation
Presentation is loading. Please wait.
1
Your 1st Programming Assignment
Showing reported crime entries on Google Map
2
Requirements Data Requirement Bonus Available in the class folder
Create a web page (HTML+JavaScript) to show all entries Correct map locations Each entry is displayed as a marker Mouse over a marker to show its location. Requirement: map + location + markers +location tip Bonus Click a marker to show the time, location, and reported crimes associated with it.
4
Start from Here on/javascript/adding-a-google-map
6
Web Programming
7
Separation of Functions
Behavior (JavaScript) Presentation (CSS) Content (HTML) Richness of User Experience
8
JavaScript A client-side scripting programming language for dynamic web pages Must be run within a browser JavaScript PHP, JSP, ASP, etc.
9
Features of JavaScript
A fully fledged programming language JavaScript under HTML 5 is very powerful. Lightweight: commanding fewer resources Integrated with HTML React to client-side events Supported by all major browsers Behaviors may vary slightly from browser to browser Limitations No access to local file system
11
How is JavaScript integrated with HTML?
<script> … </script> Locations Inside <head>…</head> Dealing with user events or functions Either external or internal In <body>…</body> Writing document content
12
<html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
13
Internal: All Scripts Are in the Same HTML Document.
<html> <head> <script type="text/javascript"> function message() { alert("Hello!"); } </script> </head> <body onload="message()"> //onload: to execute a JS when a page is loaded. </body> </html
14
External: Scripts Are in Another Document.
<html> <head> <script type="text/javascript" src="another.js"></script> </head> <body> </body> </html>
15
Example
16
Exercise 1 Go to the class folder
\\up.ist.local\Courses\Spring2017\IST402\InClassExercise sResources\Week1_JavaScriptGoogleMap Copy the HelloWorld.html document to your web space IST UP Webspace (W) Open a browser to visit this file with appropriate URL
17
Exercise 2 After you complete Exercise 1, create an HTML document in your web space, named as psumap.html You can use any text editor you like. Copy the codes from the site: vascript/adding-a-google-map Use your own key Load your document in a browser.
18
Google Maps Map services through a browser Various APIs
Maps: types of maps, scale, center Overlay objects: markers, polylines Events: on map and overlay objects How to use Google Maps? Web programming languages to call APIs APIs for different kinds of program languages JavaScript
20
Exercise 3 Modify the code so that the map is centered on our UP campus. How is the center of a map decided?
21
JavaScript Basics Statements Variables Events Functions
22
Statements <script type="text/javascript"> var a = 10; var b = 11; var c; c = a + b; alert(‘The answer is’ + c); </script>
23
JavaScript Variables Case sensitive
Must begin with a letter or the underscore character Need to be declared var variableName
24
JavaScript Operators Arithmetic Operators Assignment Operators
+,-,*,/,%,++,-- Assignment Operators =, +=, -=, *=, /=, %= Comparison Operators ==: value only ===: value and type != >,<,>=,<= Logical Operators &&, ||, !
25
Events What is happening to HTML elements. User and browser events
onclick, onmouseover, onmouseout, onkeydown, etc. Example: onclick event_onclick
26
Functions <script> function myFunction() { alert(Date()); } </script> <button onclick="myFunction()">The Time is?</button>
27
Coding Tips Semi colons in JavaScript
Match on parentheses, brackets, quotes (), [], {}, "", '' Using tabs Variable names Capitalization Use the developer tools Chrome developer tools Firefox Developer tools Web console, JavaScript debugger Use comments // a single line comment /* more lines more comments */
28
For Your First Programming Assignment
You need to deal with multiple markers. You need to know how to handle an array in JavaScript. You can start exploring this issue.
Similar presentations
