http://people.aero.und.edu/~userid/457/3/http://people.aero.und.edu/~userid/create commands), XML, and whatever languages†,
|
|
|
|
AJAX (Asynchronous JavaScript and XML)
The AJAX is used to create advanced web applications. It is the art of exchanging data with a server, and updating parts of a web page—without reloading the whole page. AJAX is not a new programming language, but a new way to use existing standards. The technologies include:
|
|
getCoord.html
|
|---|
<!DOCTYPE HTML>
<html>
<body>
Click the button to get your coordinates:
<button onclick="getLocation( )">Get Them!</button>
<p id="demo"></p>
<script>
var x = document.getElementById( "demo" );
function getLocation( ) {
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition( showPosition, showError );
else
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition( position ) {
x.innerHTML = "Latitude: " + position.coords.latitude;
x.innerHTML += "Longitude: " + position.coords.longitude;
}
function showError( error ) {
switch ( error.code ) {
case error.PERMISSION_DENIED:
x.innerHTML = "User is denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
</body>
</html>
|
markMap.html
|
|---|
<!DOCTYPE HTML>
<html>
<body>
Click the button to mark your position:
<button onclick="getLocation( )">Mark It!</button>
<p id="mapholder"></p>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var mapholder = document.getElementById( "mapholder" );
function getLocation( ) {
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition( showPosition, showError );
else
mapholder.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition( position ) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng( lat, lon );
mapholder.style.height ='400px';
mapholder.style.width ='700px';
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var map = new google.maps.Map( document.getElementById( "mapholder" ), myOptions );
var marker = new google.maps.Marker( {
position: latlon,
map: map,
title: "You are here!" }
);
}
function showError( error ) {
switch( error.code ) {
case error.PERMISSION_DENIED:
mapholder.innerHTML = "User is denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
mapholder.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
mapholder.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
mapholder.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
</body>
</html>
|
direction.html
|
|---|
<!DOCTYPE HTML>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService( );
var map;
function initialize( ) {
directionsDisplay = new google.maps.DirectionsRenderer( );
var GF = new google.maps.LatLng( 47.92525699999999, -97.032855 );
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: GF
}
map = new google.maps.Map( document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap( map );
}
function calcRoute( ) {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route( request, function( response, status ) {
if ( status == google.maps.DirectionsStatus.OK )
directionsDisplay.setDirections( response );
} );
}
</script>
</head>
<body onload="initialize( )">
<div>
Start:
<select id="start" onChange="calcRoute( );">
<option value="streibel hall, und, nd">Streibel Hall</option>
<option value="ray richards golf course, grand forks, nd">Ray Richards</option>
<option value="ralph engelstad arena,nd">The Ralph</option>
<option value="university park, grand forks, nd">University Park</option>
<option value="cabela, east grand forks, mn">Cabela</option>
<option value="city hall, grand forks, nd">City Hall</option>
<option value="columbia mall, grand forks, nd">Columbia Mall</option>
</select>
End:
<select id="end" onChange="calcRoute( );">
<option value="ray richards golf course, grand forks, nd">Ray Richards</option>
<option value="ralph engelstad arena,nd">The Ralph</option>
<option value="university park, grand forks, nd">University Park</option>
<option value="streibel hall, und, nd">Streibel Hall</option>
<option value="cabela, east grand forks, mn">Cabela's</option>
<option value="city hall, grand forks, nd">City Hall</option>
<option value="columbia mall, grand forks, nd">Columbia Mall</option>
</select>
</div>
<div id="map_canvas" style="width:96%;height:400px"></div>
</body>
</html>
|
create table” have to be submitted, where SQL is Structured Query Language and DDL is Data Definition Language.
create commands of database implementation are NOT submitted.