ITF (FC0-U61) Skills Lab: Working with Primitive Data Types in JavaScript

Exercise 1 - Working with Primitive Data Types

Task 1 - Create a Visual Studio Code Workspace

  1. Begin by connecting to the virtual machine (VM) running Windows 10 Pro. Use the login credentials provided for this lab session.

  2. After logging in, right-click on the desktop background and create a new folder named Calculator. This folder will hold the project files.

  3. Open the Visual Studio Code (VSCode) application from the desktop. Once it opens, close the Welcome Page.

  4. In the menu bar, click File > Add Folder to Workspace…, select the Calculator folder, and click Add.

  5. Now that the folder has been added to the workspace, go to File > Save Workspace As…, choose a location to save the workspace, and name it appropriately (e.g., JavaScript_Primitives.code-workspace).

  6. Right-click the Calculator folder in the Explorer panel and select New File. Name the file datatypes.html to indicate that it is an HTML file.

Task 2 - Create an HTML Template with Styling

Insert the following code into datatypes.html to create a base structure with embedded styling:

<!DOCTYPE html>
<html>
<head>
  <style>
    .divstyle {
      border: 1px solid black;
      box-shadow: -1px -2px 3px 1px black;
      background-color: #c8dfec;
      text-shadow: 0 0 0px black;
    }
  </style>
</head>
<body>
  <div align="center" style="background-color: #c8dfec;">
    <h2>JavaScript Primitive Data Types - Null and Undefined</h2>
  </div>
</body>
</html>

Explanation:

  • The <!DOCTYPE html> declaration defines the document as HTML5.
  • The <style> block within the <head> contains CSS rules for a class named divstyle, used to apply visual formatting (border, shadow, background color, etc.) to sections of the page.
  • The <body> contains a heading wrapped in a <div> for centered alignment and background styling.

After saving the file, open it in a browser (e.g., right-click > Open With > Google Chrome) to view the output.

Task 3 - Number Data Type

Add this JavaScript code inside the <script> tag:

var x = 3.14;
var y = 3;
document.getElementById("number").innerHTML = 
  "Value of x = " + x + "<br>" + "Value of y = " + y;

Add the following supporting HTML before the <script> tag:

<div class="divstyle">
  <p style="font-weight: bold;">
    Number: A number data type can store numerals with or without decimals.
  </p>
  <p id="number"></p>
</div>

Explanation:

  • Variables x and y are assigned numeric values.
  • The document.getElementById method dynamically updates the content inside the paragraph with ID number using JavaScript.

Task 4 - Boolean Data Type

JavaScript Code:

var a = 9;
var b = 10;
document.getElementById("Boolean").innerHTML = 
  "If a > b, result is true. Otherwise, result is false: " + (a > b);

Supporting HTML:

<div class="divstyle">
  <p style="font-weight: bold;">
    Boolean: A Boolean data type can store either true or false values.
  </p>
  <p id="Boolean"></p>
</div>

Explanation:

  • The Boolean expression (a > b) evaluates to false because 9 is not greater than 10.
  • The result is displayed inside the Boolean paragraph using dynamic JavaScript content insertion.

Task 5 - String Data Type

JavaScript Code:

var c = "I";
var d = 'like oranges.';
document.getElementById("string").innerHTML = c + " " + d;

Supporting HTML:

<div class="divstyle">
  <p style="font-weight: bold;">
    String: A string data type can store a single character or a set of characters.
  </p>
  <p id="string"></p>
</div>

Explanation:

  • The variables c and d contain string values enclosed in double and single quotes, respectively.
  • The strings are concatenated using the + operator and displayed in the browser.

Task 6 - Null Data Type

JavaScript Code:

var e = null;
document.getElementById("null").innerHTML = "Value of e = " + e;

Supporting HTML:

<div class="divstyle">
  <p style="font-weight: bold;">
    Null: A null value means the variable is intentionally set to "no value."
  </p>
  <p id="null"></p>
</div>

Explanation:

  • null is an assignment value that represents no value or object.
  • It is often used to intentionally clear the value of a variable.

Task 7 - Undefined Data Type

JavaScript Code:

var f;
document.getElementById("undefine").innerHTML = "Value of f = " + f;

Supporting HTML:

<div class="divstyle">
  <p style="font-weight: bold;">
    Undefined: An undefined value is assigned to a variable that has been declared but not initialized.
  </p>
  <p id="undefine"></p>
</div>

Explanation:

  • When a variable is declared but no value is assigned, its default value is undefined.
  • This is different from null, which is explicitly assigned.

Final Structure

After completing all tasks, your datatypes.html file will include styled sections for each data type and a <script> block with variable declarations and DOM manipulation using getElementById.

Save your file (Ctrl + S) and refresh the browser to view your updates.

Previous

ITF+ Module 12