Lab 3 - JavaScript Basics

Objective: Practice JavaScript fundamentals with objects, properties, and functions in GEE.

Introduction

In this lab, you will continue off the lessons learned in this module and challenge yourself to extend the base code and expand your JavaScript basic programming skills in Google Earth Engine. At the end of the lab, you will submit a link to your Google Earth Engine Code. Be sure to comment your code and use best practices.

Lab Instructions

  1. Getting Started

    Go to https://code.earthengine.google.com/9c89c36a78f913cc7be1845e6c47ebb3

    Save a copy of the Earth Engine Code in your Repositories.

  2. Understanding Objects

    In line 4 of this code, you defined an object with three properties. Objects are a fundamental part of JavaScript. They represent real-world objects, such as user data, files, or information about a list of items. Objects are composed of properties, which are key-value pairs containing data.

    In your Object cityData you stored three properties: the city, coordinates, and population. This data is available for you to use in your code.

  3. Accessing Object Properties

    In JavaScript, you can access an object's properties in several ways. The most common method is using the dot operator (.). To use it, type the object name followed by a dot (.) and the property name.

    For example, to get the city property of the cityData object, you would type: 

    cityData.city

  4. Challenge 1: Print the City Name (10 Points)

    Challenge:

    Using the greet function, print to the console "Hello Gainesville", retrieving "Gainesville" from the cityData object's city property.

    Hint: To do this, you will need to both call the function and pass through the city property of cityData.

  5. Exploring Array Properties

    Now explore the properties of cityData. In your code on line 9, you print cityData to the console and see that there are three properties. The second property is called coordinates and is an array.

    If you add brackets to the object's property, you can access individual parts of the array. Try this line of code: 

    print(cityData.coordinates[0]);

    This will output to the console the longitude of cityData. Try changing the 0 to a 1 and see what happens.

    Now that you know how to access the long and lat of cityData, do the following challenge.

  6. Challenge 2: Center the Map (10 Points)

    Challenge:

    Using the method Map.setCenter(lon, lat, zoom), make a line of code that calls the longitude and latitude from the cityData properties and zooms to Gainesville at a zoom level of 12.

    Example format:

    Map.setCenter(longitude, latitude, 12);

    Replace longitude and latitude with the appropriate object property access.

  7. Challenge 3: Comment Your Code (10 Points)

    Challenge:

    Comment your code explaining what was done. Use both single-line (//) and multi-line (/* */) comments to document:

    • What each variable represents
    • What each function does
    • How you solved the challenges

Key Concepts

JavaScript Objects

Objects store related data and functions together:

var myObject = {
    property1: 'value1',
    property2: 'value2',
    property3: [1, 2, 3]
};

Accessing Properties

Use dot notation or bracket notation:

myObject.property1        // Dot notation
myObject['property1']     // Bracket notation
myObject.property3[0]     // Access array element

Functions

Functions are reusable blocks of code:

function myFunction(parameter) {
    // Do something with parameter
    return result;
}

// Call the function
myFunction(value);

📧 Lab Submission

Save and submit your script as a URL.

Submit lab via email.

Subject: Lab 3 - JS Basics - [Your Name]

Include in your email:

  • The shareable link to your GEE script
  • Confirmation that all three challenges are completed
  • Screenshot of your Console output showing "Hello Gainesville"
  • Screenshot of the map centered on Gainesville

Grading:

  • Challenge 1 (10 points): Correctly use the greet function with cityData.city
  • Challenge 2 (10 points): Map.setCenter uses coordinates array correctly
  • Challenge 3 (10 points): Code is properly commented and documented