shor

1. Web Discussion
Muhammed M.bassem and Marwa Ebrahim
How web page working
What is the difference between language and
scripting
Why scripting

2. Overview
Web site widely used in ads for product , life
habite/traditional sharing , .... etc but you have a
little time to have your client in your website inves-
tigate all pages :P
Design webapps using Google web tool kit

3. Audience
This documentation is designed for people familiar with
JavaScript programming and object-oriented programming
concepts. You should also be familiar with Google Maps
from a user's point of view. There are many JavaScript
tutorials available on the Web.
This documentation is designed to let you quickly start
exploring and developing cool applications with the Google
Maps API.

4. Document section
Small chat about definations
JS long tutorial
Basic Map Objects
Map Events
Map Controls
Map Overlays
Map Services

5. Free Talk :)
The difference between JS , JSP , PHP , PERL , Ruby , Java ,
ASP , HTML ?! <name , function>
PHP: Hypertext Preprocessor
Perl : <REF:Wiki>Perl is a high-level, general-purpose, interpreted, dynamic programming language.
Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to
make report processing easier
Ruby: <REF: Wiki>Ruby is a dynamic, reflective, general-purpose object-oriented programming
language that combines syntax inspired by Perl with Smalltalk-like features. Ruby originated in Japan
during the mid-1990s and was first developed and designed by Yukihiro "Matz" Matsumoto.
What is the structure of web page ?!! <Specify by tags, tags
mean >
what is the meta tag ?!! <hint: metadata>

6. The Present Situation
Difference between <Style> and <Script> ?!!!
Define CSS , js , XML?!! <name , use >
what is JSON ?!
Difference between JSON and XML ?!!<You an-
swer this to next Session>

7. Development Tool :) 4 2 day
What is Google Map API ?! It is family The Maps API
is a free service, available for any web site that is free to consumers.Google Maps
has a wide array of APIs that let you embed the robust functionality and everyday
usefulness of Google Maps into your own website and applications, and overlay
your own data on top of them Businesses that charge fees for access, track assets
or build internal applications must use Google Maps API Premier, which provides
enhanced features, technical support and a service-level agreement.Original fore-
casts which turned out to be wrong
Java script V3 module
What's New The Places API May 10, 2011 Create applications that find and
display nearby Place information for your users. Search, check-in, and add new
places.

8. JS is THE scripting language of the web.
JS is used in billions of web pages to add functionality ,
validate forms , communicate with the server , and much
more.
You should have a basic knowledge of HTML.
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_events

9. To insert a JS into your HTML code use the <script> tag.
Syntax:
<script type="text/javascript">
... some JavaScript code ...
</script>
The lines between <script> and </script> contain the javascript
and are executed by the browser.
Browsers that do not support JS will display JS as a page content .
To prevent this add the HTML comment tag as follow:
<script type="text/javascript">
<!--
…Some javascript code…
//-->
</script>

10. Java Script can be put in the head and the body of
HTML document
JS in body :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom
Sometimes we want to execute a JavaScript when
an event occurs, such as when a user clicks a button. When
this is the case we can put the script inside a function.
Events are normally used in combination with functions (like
calling a function when an event occurs).

11. JS in Head:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
You can place an unlimited number of scripts in your document,
and you can have scripts in both the body and the head
section at the same time.

12. Using an External JavaScript
JavaScript can also be placed in external files.
External JavaScript files often contain code to be used on
several different web pages.
External JavaScript files have the file extension .js.
External script cannot contain the <script></script> tags!
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexa

13. Java Script Statements
JS is Case Sensitive.
A JS statement is a command to a browser. The purpose of the
command is to tell the browser what to do.
It is normal to add a semicolon at the end of each executable
statement but it’s is optional , and the browser is supposed to
interpret the end of the line as the end of the statement.
JS code is a sequence of JS statements ; Each statement is
executed by the browser in the sequence they are written.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_statements

14. Java Script Block
JS statements can be grouped together in blocks.
Blocks start with a left curly bracket {, and end with a right curly
bracket }.
The purpose of a block is to make the sequence of statements
execute together.
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_blocks
Normally a block is used to group statements together in a
function or in a condition (where a group of statements should
be executed if a condition is met).

15. Java Script Comments
Single line comments start with //.
http://
www.w3schools.com/js/tryit.asp?filename=tryjs_comments1
Multi line comments start with /* and end with */.
http://
www.w3schools.com/js/tryit.asp?filename=tryjs_comments2
You can use comments in JS as in any programming language you
know , Java for example.

16. Java Script Variables
Rules for JavaScript variable names:
1-Variable names are case sensitive (y and Y are two
different variables.
2-Variable names must begin with a letter or the underscore
character.
You declare JavaScript variables with the var keyword:
var x; var carname;
you can also assign values to the variables when you declare
them:
var x=5; var carname="Volvo";
When you assign a text value to a variable, use quotes around
the value.

17. A variable declared within a JavaScript function
becomes LOCAL and can only be accessed within that
function.
You can have local variables with the same name in different
functions.
Local variables are destroyed when you exit the function.
Variables declared outside a function become GLOBAL, and all
scripts and functions on the web page can access it.
Global variables are destroyed when you close the page.
If you declare a variable, without using "var", the variable always
becomes GLOBAL.

18. If you assign values to variables that have not yet been
declared, the variables will automatically be declared as
global variables.
That statement : carname="Volvo";
will declare the variables x and carname as global variables (if they
don't already exist).
you can do arithmetic operations with JavaScript variables:
y=x-5;
z=y+5;

19. Java Script Operators
= is used to assign values.
JS Arithmetic Operators:
given y=5,
O p e ra to D e s c rip ti E x a m p l R e s u lt
r on e
+ Ad d ition x= y+ 2 x= 7 - y= 5
- S u b tra c tion x = y -2 x= 3 - y= 5
* Mu ltip lic a tio x = y *2 x = 10 -
n y= 5
/ D iv is ion x = y /2 x = 2 .5 -
y= 5
% Mod u lu s x= y% 2 x= 1 - y= 5
++ In c re m e n t x= + + y x= 6 - y= 6
x= y+ + x= 5 - y= 6
-- D e c re m e n t x = --y x= 4 - y= 4

20. JS Assigning Operators
given, x=10 - y=5
O p e ra tor E x a m p le S am e As R e s u lt
= x= y x= 5
+= x+ = y x= x+ y x = 15
-= x -= y x = x -y x= 5
*= x *= y x = x *y x = 50
/= x /= y x = x /y x= 2
%= x% = y x= x% y x= 0

21. The + operator can also be used to add string variables or text
values together.
To add two or more string variables together, use the + operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
If you add a number and a string, the result will be a string!
http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables

22. JavaScript Comparison and Logical Operators
Comparison Operators
given, x=5
O p e ra tor D e s c rip tion E x a m p le
== is e q u a l to x = = 8 is fa ls e
x = = 5 is tru e
=== is ex a c tly e q u a l to (v a lu e a n d x = = = 5 is
ty p e ) tru e
x = = = “ 5 ” is
fa ls e
!= is n ot e q u a l x != 8 is tru e
> is g re a te r th a n x > 8 is fa ls e
< is le s s th a n x < 8 is tru e
>= is g re a te r th a n or e q u a l to x > = 8 is fa ls e
<= is le s s th a n or e q u a l to x < = 8 is tru e

23. Logical Operators
given, x=6 and y=3
O p e ra tor D e s c rip tio E x a m p le
n
&& and (x < 1 0 && y > 1 ) is true
|| or (x = = 5 || y = = 5 ) is fa ls e
! n ot !(x = = y ) is tru e
JS also contains a conditional operator that assigns a value to a
variable based on some condition.
Syntax : variablename=(condition)?value1:value2
Example :
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

24. JavaScript If...Else Statements
Conditional statements are used to perform different actions
based on different conditions.
If Statement
Syntax :
if (condition)
{
code to be executed if condition is true
}
Example:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthen

25. If...else Statement
Syntax :
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Example:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthenels

26. If...else if...else Statement
Syntax :
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is
true
}
Example:

27. JavaScript Switch Statement
Syntax :
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_switch

28. JavaScript Popup Boxes
Alert Box
Syntax :
alert("sometext");
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert
Confirm Box
Syntax :
confirm("sometext");
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm

29. Prompt Box
Syntax :
prompt("sometext","defaultvalue");
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

30. Java Script Functions
To keep the browser from executing a script when the page
loads, you can put your script into a function.
A function contains code that will be executed by an event or by
a call to the function.
You may call a function from anywhere within a page (or even
from other pages if the function is embedded in an external .js
file).
Functions can be defined both in the <head> and in the <body>
section of a document. However, to assure that a function is
read/loaded by the browser before it is called, it could be wise
to put functions in the <head> section.

31. Syntax :
function functionname(var1,var2,...,varX)
{
some code
}
Example :
http://
www.w3schools.com/js/tryit.asp?filename=tryjs_function1
The return statement is used to specify the value that is
returned from the function.
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_re

32. JavaScript For Loop
Syntax:
for(variable=startvalue;variable<=endvalue;variable=variable+ increment)
{
code to be executed
}
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext

33. JavaScript While Loop
Syntax:
while (variable<=endvalue)
{
code to be executed
}
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_while

34. JavaScript do While Loop
Syntax:
do
{
code to be executed
}
while (variable<=endvalue);
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile

35. JavaScript Break and Continue Statements
Break Statement Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_break
Continue Statement Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_continue

36. JavaScript For
...In Statement
The for...in statement loops through the properties of an
object.
Syntax :
for (variable in object)
{
code to be executed
}
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_

37. JavaScript Events
Events are actions that can be detected by JavaScript.
Acting to an event example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
Examples of events:
- A mouse click
- A web page or an image loading
- Mousing over a hot spot on the web page
- Selecting an input field in an HTML form
- Submitting an HTML form
- A keystroke

38. onLoad and onUnload
are triggered when the user enters or leaves the page.
The onLoad event is often used to check the visitor's browser
type and browser version, and load the proper version of the
web page based on the information.
Both events are also often used to deal with cookies that should
be set when a user enters or leaves a page.
For example, you could have a popup asking for the user's name
upon his first arrival to your page. The name is then stored in
a cookie. Next time the visitor arrives at your page, you could
have another popup saying something like: "Welcome John
Doe!".

39. onFocus, onBlur and onChange
are often used in combination with validation of form fields.
Example :
The checkEmail() function will be called whenever the user changes the
content of the field:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
is used to validate ALL form fields before submitting it.
Example :
The checkForm() function will be called when the user clicks the
submit button in the form. If the field values are not accepted, the
submit should be cancelled. The function checkForm() returns either

40. onMouseOver
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap

41. JavaScript Try...Catch Statement
The try...catch statement allows you to test a block of code for
errors.
The try block contains the code to be run, and the catch block
contains the code to be executed if an error occurs.
Syntax :
Try
{
//Run some code here
}
catch(err)
{
//Handle errors here

42. Example1 :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch
Example2 :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch2

43. JavaScript Throw Statement
The throw statement allows you to create an exception.
Syntax :
throw exception
Example :
http://www.w3schools.com/js/tryit.asp?filename=tryjs_throw

44. JavaScript Special Characters
In JavaScript you can add special characters to a text string by
using the backslash sign().
C od e O u tp u ts
’ s in g le q u ote
” d ou b le q uote
b a c k s la s h
n n e w lin e
r c a rria g e re tu rn
t ta p
b backspace
f form fe e d

45. JavaScript Guidelines
JavaScript is Case Sensitive.
JavaScript ignores extra spaces. You can add white space to your
script to make it more readable.
You can break up a code line within a text string with a
backslash.
document.write("Hello
World!");
However, you cannot break up a code line like this:
document.write
("Hello World!");

46. Let's Practice
Declare ur application in HTML 5 using this tag
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0,
user-scalable=no" />
The <meta> tag specifies that this map should be
displayed full-screen and should not be resizable by
the user

47. Let's Continue Practice
There is two type of mode used in HTML parsing
quirks mode and standards mode
Builed ur CasCade Style sheet for quirks mode
<style type=”text/css”>
html{height:100%}
body{height: 100%; margin: 0px; padding: 0px
#map_canvas { height: 100% }// div GMAP name
</style>

48. Are you Follow the code flow ?!
Loading the Google Maps API
The http://maps.googleapis.com/maps/api/js URL
points to the location of a JavaScript file that loads
all of the symbols and definitions you need for using
v3 of the Google Maps API. Your page must contain
a script tag pointing to this URL.
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor
=false">
</script>
set a sensor parameter to indicate whether this application uses a sensor to determine the user's location.

49. Ready to continue ? C this Tips
When loading the Javascript Maps API via the
http://maps.googleapis.com/maps/api/js URL, you may
optionally load additional libraries through use of the
libraries parameter. Libraries are modules of code that
provide additional functionality to the main Javascript API
but are not loaded unless you specifically request them
If your application is an HTTPS application, you may instead
wish to load the Google Maps Javascript API over HTTPS.

50. Back 2 Practice
For the map to display on a web page, we must reserve a spot
for it. Commonly, we do this by creating a named div
element and obtaining a reference to this element in the
browser's document object model (DOM).
Map DOM Elements:
<div id="map_canvas" style="width: 100%; height: 100%">
</div>

51. Hi FOSER !!!!
Take 10 minute Reset :P

52. Map Options
we want to center the map on a specific point, we
also create a latlng value to hold this location and
pass this into the map's options
What is Geocoding ?!
The google.maps.LatLng object provides such a
mechanism within the Google Maps API. You
construct a LatLng object, passing its parameters in
the order { latitude, longitude }:
var myLatlng = new google.maps.LatLng(latitude,
longitude);
LatLng objects have many uses within the Google Maps API. The google.maps.Marker object uses a LatLng in its
constructor, for example, and places a marker overlay on the map at the given geographic location.

53. Continue Map Option
var myOptions = {
Zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}; MapTypeId :
[google.maps.MapTypeId.]
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID displays a mix of photographic tiles and a tile layer for
prominent features (roads, city names).
TERRAIN displays physical relief tiles for displaying elevation and
water features (mountains, rivers, etc.).
where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher
zoom levels zoom in at a higher resolution.
Q: what is diff. Between v2 and v3 google map Api?!

54. The Elementary Object
google.maps.Map
The JavaScript class that represents a map is the Map class. Objects of this
class define a single map on a page. (You may create more than one instance
of this class - each object will define a separate map on the page.) We create a
new instance of this class using the JavaScript new operator.
When you create a new map instance, you specify a <div> HTML element in
the page as a container for the map. HTML nodes are children of the
JavaScript document object, and we obtain a reference to this element via the
document.getElementById() method
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
This code defines a variable (named map) and assigns that variable to a new
Map object, also passing in options defined within the myOptions object
literal. These options will be used to initialize the map's properties. The
function Map() is known as a constructor

55. Loading ......
<body onload="initialize()">
While an HTML page renders, the document object model
(DOM) is built out, and any external images and scripts are
received and incorporated into the document object. To ensure
that our map is placed on the page after the page has fully loaded,
we only execute the function which constructs the Map object
once the <body> element of the HTML page receives an onload
event. Doing so avoids unpredictable behavior and gives us more
control on how and when the map draws.
The body tag's onload attribute is an example of an event handler.
The Google Maps JavaScript API also provides a set of events
that you can handle to determine state changes.

56. Notaions out school :)
BRB Be Right Back
FYI For Your Information
WRT With Respect To
ASAP As Soon As Possible

57. Thank You
CUL
see you later :)

58. My answers :)
Metadata is information about data. The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata.
The <meta> tag always goes inside the head element.
Differences Between HTML and XHTML WRT Meta tag In HTML the <meta> tag has no end tag.
In XHTML the <meta> tag must be properly closed.
JSON (JavaScript Object Notation) is a lightweight data-interchange format.It is easy for humans to
read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript
Programming Language,Standard ECMA-262 3rd Edition - December 1999. JSON is a text format
thatis completely language independent but uses conventions that are familiar to programmers of the C-
family of languages, including C, C++, C#, Java,JavaScript, Perl, Python, and many others. These
properties make JSON an ideal data-interchange language.
the process of turning an address into a geographic point is known as geocoding. Geocoding is sup-
ported in this release of the Google Maps API.
In the Google Maps V2 API, there is no default map type. You must specifically set an initial map type
to see appropriate tiles.

59. Recommendation Sites
www.w3schools.com
http://code.google.com/apis/maps/documentation/javas
www.vtc.com
http://code.google.com/apis/maps/documentation/javas
http://www.cs-cu.com/waslny
Google “Google labs”
Google “ GWT ”
Google “Ubuntu setup”
Google eHow examples always

60. The Present Situation
Development Tool :) 4 2 day
Let's Practice
Let's Continue Practice
Are you Follow the code flow ?!
Ready to continue ? C this Tips
Back 2 Practice
Hi FOSER !!!!
Map Options
Continue Map Option
The Elementary Object
Loading ......