Web-Based Mapping

The Basics of JAVA SCRIPT

SGE, 4th Year BY IRENE RWABUDANDI

INTRODUCTION TO JAVA SCRIPT (JS)
 INTRODUCTION TO JAVA SCRIPT
• We now move to the third major web technology
• JavaScript is a programming language, mostly used to define the interactive behavior
of web pages
• JavaScript allows you to make web pages more interactive by accessing and
modifying the contents and styling in a web page while it is being viewed in the
browser.
• Numerous open-source mapping and data visualization libraries are written in
JavaScript, including Leaflet, which we use in this course, OpenLayers, D3, and many
others

• Many commercial services of web mapping also provide a JavaScript API for building
web maps with their tools, such as Google Maps JavaScript API, Mapbox-GL-JS and
ArcGIS API for JavaScript
 BASICS OF JAVA SCRIPT
• The server is the location on the web that serves your website to the rest
of the world.
• The client is the computer that is accessing that website, requesting
information from the server.
• JavaScript can be used in both server-side and client-side programming,
but is primarily a client-side language, working in the browser on the client
computer
• there are two fundamental ways for using JavaScript on the client-side:
• 1. Executing scripts when the web page is being loaded, such as scripts
that instruct the browser to download data from an external location and
display them on the page
• 2. Executing scripts in response to user input or interaction with the page,
such as performing a calculation and showing the result when the user
clicks on a button
 Assignment and variables
• Assignment to variables is one of the most important concepts in programming,
since it lets us keep previously calculated results in memory for further
processing.
• Variables are containers that hold data values, simple or complex, that can be
referred to later in your code.
• For example, the following two expressions define the variables x and y:
var x;
var y;
• Values can be assigned to variables using the assignment operator =. Assignment
can be made along with variable definition:
var x = 5; Var map = L.map (‘map’,{ center: coordi
var y = 6;
•In Java script Single line comments start with //
• Single or multi-line comments start with /* and end with */ (like in CSS)
 JavaScript data types
• Divided into two groups: primitive data types and objects.
• Primitive data types include the following:
String—Text characters that are delimited by quotes, for example: "Hello" or 'Hello'
 Number—Integer or floating-point value, for example: 5 and -10.2
Boolean—Logical values, true or false
Undefined—Specifies that a variable is declared but has no defined value, undefined
Null—Specifies an intentional absence of any object value, null,
• Objects are basically collections of the primitive data types and/or other objects:
• Array—Multiple variables in a single variable, for example: ["Saab", "Volvo", "BMW"]
• Object—Collections of name:value pairs, for example: {type:"Fiat", model:"500",
color:"white"}
 objects
• JavaScript objects are collections of named values.
• An object can be defined using curly brackets ({ and }), Inside the brackets, there is a list of name:
value pairs, separated by commas (,). For example:
var person = {
firstname: "John",
lastname: "Smith",
age: 50,
eyecolor: "blue"
};
we could arrange the information in the person
object in a different way:
var person = {
name: {firstname: "John", lastname: "Smith"},
age: 50,
eyecolor: "blue"
};
 FUNCTIONS
• A function is a block of code designed to perform a particular task. If
different parts of our JavaScript code need to perform the same task,
we do not need to repeat the same code block multiple times.
• Instead, we define a function once, then call it multiple times
whenever necessary.
• A function is defined with:
The function keyword
A function name of our choice, such as multiply
Parameter names separated by commas, inside parentheses (( and )),
such as (a, b)
The code to be executed by the function, curly brackets ({ and }), such
as {return a *b; }
 JavaScript Object Notation (JSON)
• JavaScript Object Notation (Bassett, 2015) is a data format closely related to
JavaScript objects
• It is a plain text format, which means that a JSON instance is practically a character
string,
• which can be saved in a plain text file (usually with the .json file extension), in a
database
• JSON is the most commonly used format for exchanging data between the server and
the client in web applications
• The principal difference between JSON and JavaScript objects is as follows:
 A JavaScript object is a data type in the JavaScript environment.
A JavaScript object does not make sense outside of the JavaScript environment.
A JSON instance is a plain text string, formatted in a certain way according to the JSON
standard.
A JSON string is thus not limited to the JavaScript environment. It can exist in another
programming language, or simply stored inside a plain text file or a database.
The principal difference between JSON and JavaScript objects

• a JavaScript object can be created using an expression such as the following one:
var obj = {a: 1, b: 2};
The corresponding JSON string can be defined, and stored in a variable, as follows:
var json = '{"a": 1, "b": 2}’;
• To make a JSON string useful within the JavaScript environment, the JSON string
can be parsed to produce an object, JSON→object, is done with the JSON.parse
function.
• JSON.parse(json); // Returns an object
• The opposite conversion, object→JSON, is done with JSON.stringify:
• JSON.stringify(obj); // Returns a JSON string
 GEOJSON
• GeoJSON is a spatial vector layer format based on JSON.
• Since GeoJSON is a special case of JSON, it can be easily processed in the
JavaScript environment using the same methods as any other JSON string, such as
JSON.parse and JSON.stringify
• The above reasons have made GeoJSON to be the most common data format for
exchanging spatial (vector) data on the web
• Example of a GeoJSON string and GeoJSON string created in a JavaScript
environment with the following expression:
 JAVA SCRIPT INTERACTIVITY
• Since the beginning of this module, we mentioned that JavaScript is primarily
used to control the interactive behavior of web pages.
JQUERY
• A JavaScript library is a collection of JavaScript code, which allows for easier
development of JavaScript-based applications.
• JQUERY is a JS library that simplifies the tasks related to interaction with DOM
such as selecting elements and binding event listeners.
• There are a lot of JavaScript libraries that simplify common tasks (e.g., DOM
manipulation) or specialized tasks (e.g., web mapping), to make life easier for
web developers.
• Often, you will be working with a library that is already written, instead of
“reinventing the wheel” and writing your own JavaScript code for every single
task.
• Var map = L.map (‘map’,{ center: coordi
 Including a library JQUERY
The main functionality of jQuery consists of:
• Finding elements using CSS-style selectors
• Doing something with those elements, using jQuery methods
• To include the jQuery library—or any other script for that matter, we need to
place a <script> element referring to that script in our HTML document
• Placing a <script> in the <head> means that the script is loaded before anything
visible (i.e., the <body>) is loaded.
• As mentioned in unit two, when using the <script> element to load an external
script file, we use the src attribute to specify file location.
 Loading a local script

• When loading a script from a local file, we need to have an actual copy of the file
on our server.
• Basically, we need to download the jQuery code file,
• e.g., from the download section on the official jQuery website, and save it along
with our HTML file. In case the jQuery script we downloaded is named jquery.js,
the first few lines of the document may look as follows:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
 Loading a remote script

• When loading a script from a remote file, hosted on the web in some location other
than our own computer, we need to provide the file URL. A reliable option is to use a
Content Delivery Network (CDN), such as the one provided by Google
• A CDN is a series of servers designed to serve static files very quickly.
• In case we are loading the jQuery library from Google’s CDN, the first few lines of the
document may look as follows:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.[...]/jquery.min.js"></script>
</head>
• The src attribute value is truncated with [...] to save space. Here is the complete URL
that needs to go into the src attribute value:
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js