Introduction to JavaScript

Get a code editor

Download Notepad++
or
Download Brackets

Where did JavaScript come from?

Origins

Created by Brendan Eich at Netscape in 1995

Has been standardized in the ECMAScript specification since the late 90's

It's not related to Java!

Prevalence

HTML, CSS, and JavaScript have been the 3 core languages making up modern web pages

It is supported by all modern web browsers

Also used in desktop programs (widgets)

What is JavaScript?

Programming/Scripting

The main difference between programming and scripting is that scripting languages (like JavaScript!) don't have to be compiled

They also have less access to your computer's machine (like memory allocation)

JavaScript is:

  1. An interpreted language (i.e. not compiled)
  2. Object-Based (modular)
  3. Similar to C++ and Python in how you write code
Why do mappers care?

Useful libraries!

Leaflet

D3

OpenLayers

What is a library?

Libraries

Pre-written JavaScript which allows for easy development

They let you create robust web application easily. Someone else has done all the hard work!

How do I start?

Let's go!

We'll focus on web-based JavaScript (since that's the majority of where you'll encounter and use it)

Find that code editor you installed and open it up!

Create an HTML file

  1. Create a new html file on your computer
  2. Open it in your code editor
  3. Add the following to your html file
    4. <SCRIPT language = "JavaScript"> alert("Welcome to my test page!") </SCRIPT>
  4. Open your html file in your web browser

  1. Add the following to your html file
    2. <!DOCTYPE html> <html> <body> <p id="demo">Display the result here.</p> <script> // Code goes here </script> </body> </html>

Variables

Variables are containers that hold data values that can be referred to later in your code

They can be either global or local.
Global can be used anywhere
Local are specific to a function (more on functions later)

Variables

  1. Add the following between your script tags
    2. var cityName = "Los Angeles"; document.getElementById("demo").innerHTML = cityName;
  2. Open your html file in your web browser

Variables 2

  1. Add the following variable
    2. var yearFounded = 1781;
  2. Change your output to
    3. cityName + " was founded in " + yearFounded
  3. Open your html file in your web browser

Variables 3

  1. Add the following variables
    2. var dateCurrent = new Date(); var userName; userName = prompt("Enter your name", "")
  2. Change your output to
    3. userName + " responded on " + dateCurrent
  3. Open your html file in your web browser

Objects

  1. We already used a date object. There are also math and string objects built in.
  2. Add this code
    3. cityChars = cityName.length; currentYear = dateCurrent.getFullYear() ageCity = currentYear-yearFounded;
  3. Change your output to
    4. cityName + " has " + cityChars + " characters and was founded " + ageCity + " years ago!"

Functions

JavaScript function is a block of code that is designed to perform a particular task and is executed when it is called upon, or invoked.

The function must be called by something (such as an event)

Create a Function

  1. Add the following code between the script tags
    2. function showAlert() { alert("I made a user-defined function!") }
  2. Add this code in your html body
    3. <button onclick="showAlert()">Click me</button>
  3. Open your html file in your web browser

Functions 2

  1. Add the following code between the script tags
    2. var userName; function newPage() { userName = prompt("Enter your name: ", "") document.write("<h1>Welcome " + userName + "!</h1>") }
  2. Add this code in your html body
    3. <a HREF="JavaScript:newPage()">Create-a-Page!</a>

Events

An event is something happening.

... a page load
... a button click
... pressing a key
... mouse over

Events

  1. Add the following code between the script tags
    2. document.getElementById("demo").onmouseover = function() {mouseOver()}; document.getElementById("demo").onmouseout = function() {mouseOut()}; function mouseOver() { document.getElementById("demo").style.color = "red"; } function mouseOut() { document.getElementById("demo").style.color = "black"; }

Events 2

  1. Add this code in your html body
    2. <h1 id="demo">Mouse over me</h1>
  2. Open your html file in your web browser

Loops

Loops offer a way to do something repeatedly

for loop: repeats until a condition is false
while loop: repeats as long as a condition is true

Loops

  1. Add this code
    2. function myFunction() { var text = ""; var i; for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML = text; }

Loops 2

  1. Add this code in your html body
    2. <button onclick="myFunction()">Try it</button> <p id="demo"></p>
  2. Open your html file in your web browser
Back it up...

Tasks for web maps

  1. Create objects (i.e. maps and data)
  2. Set variables (i.e. containers for storing objects and data values)
  3. Modify object properties (i.e. the location and appearance of object)
  4. Write functions (i.e. blocks of code that only run when prompted to run)
  5. Listen for events (i.e. what happens to your map when a user clicks on an element of your page)

Object: maps

An object example is:

L.map('map',{ center: [32.5, -101.4], zoom: 14}); The object from the Leaflet library is "map"
We are setting the properties of map for zoom and center

GeoJSON

GeoJSON stands for Geographic JavaScript Opject Notation

It's a JavaScript object with geographic data!

Function: maps

A function example is:

function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("Latitude: " + e.latlng.toString()) .openOn(map); } The function name in OnMapClick and it will need to be called to run.

Events: maps

An event example is:

// Create event listener for the Add Coffee Shops Button document.getElementById("addButton"). addEventListener("click", addCoffeeShops); We'll need a button for the user to click: <div id="controls" style="margin: 15px;"> <button id="addButton">Show All Coffee Shops</button> </div>

Resources

W3 Schools JavaScript Docs and Tutorials
CodeAcademy: JavaScript

Thanks!
bond.harper@arup.com

Made with Stack by
available on GitHub
under the BSD license