Web Discussion

Muhammed M.bassem and Marwa Ebrahim

How web page working

What is the difference between language and scripting

Why scripting

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

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.

Document section

Small chat about definations JS long tutorialBasic Map ObjectsMap EventsMap ControlsMap OverlaysMap Services

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 easierRuby: <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>

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>

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 wrongJava 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.

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

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>

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).

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.

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_externalexample

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

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).

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.

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.

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.

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;

Java Script Operators

= is used to assign values.

JS Arithmetic Operators:

given y=5,

O p e ra tor

D e s c ription

E x a m p le

Re s u lt

+ Addition x = y + 2 x = 7 - y = 5

- S ubtra c tion x = y -2 x = 3 - y = 5

* Multip lic a tion

x = y *2 x = 1 0 - y = 5

/ D iv is ion x = y /2 x = 2 .5 - y = 5

% Modulus x = y % 2 x = 1 - y = 5

+ + Inc re m e nt x = + + yx = y + +

x = 6 - y = 6x = 5 - y = 6

-- D e c re m e nt x = --yx = y --

x = 4 - y = 4x = 5 - y = 4

JS Assigning Operators

given, x=10 - y=5

O pe ra tor E x a m ple S a m e As Re s u lt

= x = y x = 5

+ = x + = y x = x + y x = 1 5

-= x -= y x = x -y x = 5

*= x *= y x = x *y x = 5 0

/= x /= y x = x /y x = 2

% = x % = y x = x % y x = 0

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

JavaScript Comparison and Logical Operators

Comparison Operators

given, x=5

O pe ra tor D e s c ription E x a m ple= = is e qua l to x = = 8 is fa ls e

x = = 5 is true

= = = is ex a c tly e q ua l to (v a lue a nd ty pe )

x = = = 5 is tru ex = = = “5 ” is fa ls e

!= is n ot e q ua l x != 8 is true

> is g re a te r tha n x > 8 is fa ls e

< is le s s tha n x < 8 is true

> = is g re a te r tha n or e q ua l to x > = 8 is fa ls e

< = is le s s tha n or e qu a l to x < = 8 is true

Logical Operators

given, x=6 and y=3

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 ";

O pe ra tor D e s c ription

E x a m ple

&& a nd (x < 1 0 && y > 1 ) is true

|| or (x = = 5 || y = = 5 ) is fa ls e

! not !(x = = y ) is true

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

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_ifthenelse

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: http://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif

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

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

Prompt Box

Syntax :

prompt("sometext","defaultvalue");

Example :

http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

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.

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_return

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

JavaScript While Loop

Syntax:

while (variable<=endvalue) {  code to be executed }

Example :

http://www.w3schools.com/js/tryit.asp?filename=tryjs_while

JavaScript do While Loop

Syntax:

do {  code to be executed  }while (variable<=endvalue);

Example :

http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile

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

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_in

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

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!".

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 true or false. If it returns true the form will be submitted, otherwise

the submit will be cancelled:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver

Example :

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

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

}

Example1 :

http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch

Example2 :

http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch2

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

JavaScript Special Characters

In JavaScript you can add special characters to a text string by using the backslash sign(\).

C ode O utputs

\’ s ing le quote

\” double quote

\\ ba c k s la s h

\n ne w line

\r c a rria g e re turn

\t ta p

\b ba c k s pa c e

\f form fe e d

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!");

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

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>

Are you Follow the code flow ?!

Loading the Google Maps APIThe 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.

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 themIf your application is an HTTPS application, you may instead wish to load the Google Maps Javascript API over HTTPS.

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>

Hi FOSER !!!!

Take 10 minute Reset :P

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 optionsWhat 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.

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?!

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() methodvar 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

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.

Notaions out school :)

BRBFYIWRTASAP

Be Right BackFor Your InformationWith Respect ToAs Soon As Possible

Thank You

C U L see you later :)

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.

Recommendation Sites

www.w3schools.comhttp://code.google.com/apis/maps/documentation/javascript/tutorial.html#HTML5www.vtc.comhttp://code.google.com/apis/maps/documentation/javascript/examples/event-arguments.htmlhttp://www.cs-cu.com/waslnyGoogle “Google labs”Google “ GWT ”Google “Ubuntu setup” Google eHow examples always

The Present SituationDevelopment Tool :) 4 2 day Let's PracticeLet's Continue PracticeAre you Follow the code flow ?! Ready to continue ? C this TipsBack 2 Practice Hi FOSER !!!! Map OptionsContinue Map OptionThe Elementary Object Loading ......Notaions out school :) Thank YouMy answers :) Recommendation Sites