COSC 122 - Computer Fluency
Lab 6: JavaScript - Basics

In this lab, we will learn to write simple JavaScript programs.

JavaScript Programming

We will use Aptana or Brackets to write JavaScript code inside of our web pages. Remember that JavaScript code is part of a web page, so you must save your web page with a .html extension. The JavaScript code is inside a script tag.

You only need to follow ONE of the two tutorials, Aptana or Brackets


Aptana Studio Tutorial

TASK: Open Aptana (Start->Programs->Web Authoring->Aptana) and create a new project.

TASK: To create a new project, select File->New->Project...

TASK: In the next window, under the General tab pick Project and click the Next button.

TASK: In the next window, enter Lab6 for a name then click Finish.

TASK: To create a new HTML file, select File->New->Untitled HTML File. Then type the code below. Make sure the new file is created inside the project Lab6!

TASK: Preview your code by clicking on the IE preview pane.


Brackets Tutorial

TASK: Make a new project folder somewhere on your system and name it Lab6.

TASK: Open Brackets.

TASK: Create a new HTML file and type the code below. Make sure the new file is created inside the project folder Lab6!

TASK: Preview your code by double clicking the HTML file in the file explorer.


Example Problem Solving

As practice, let's consider how we could create a program that does these things:

  1. Asks the user for a number with a pop-up prompt screen.
  2. Asks the user for a second number with a pop-up prompt screen.
  3. Adds the first number and second number together to produce a result.
  4. Displays the result to the user in an alert window.

Think about how you would solve the problem for a minute. Try to write the code yourself. Did your code solve the problem? Most likely, you were close, but when you used "+" JavaScript performed string concatenation instead of number addition. It did that because the window.prompt method returns strings even when the strings actually look like numbers. What you need to know is a method called parseInt(str) that will convert a string (str) into a number. See the answer below:

var number1 = window.prompt("Enter a number:");
var number2 = window.prompt("Enter a number:");
var result = parseInt(number1)+parseInt(number2);
window.alert(number1+"+"+number2+"="+result);

You can also download the answer. A screenshot is below.

Lab Tasks

You will create two separate JavaScript programs to submit in the assignment. The first should be saved in a file called lab6_1.html and the second in a file called lab6_2.html.

Task #1

Create a program that:

  1. Has a comment in the JavaScript code with your name and student number.
  2. Asks the user for their first name with a pop-up prompt screen.
  3. Asks the user for their last name with a pop-up prompt screen.
  4. Performs string concatenation to combine their first and last names into a full name.
  5. Displays the user's full name in an alert window.

Task #2

Create an improved program compared to task 1 that:

  1. Asks the user for their name with a pop-up prompt screen.
  2. Asks the user for their birth year with a pop-up prompt screen.
  3. Asks the user if they had their birthday this year with a pop-up prompt screen.
  4. Determines the age of the user given this input.
  5. Determines if their age is even or odd.
  6. Writes into the HTML document in a H2 tag their name, the year they were born, if they had a birthday this year, their age, and if their age is even or odd.

    Result for Joe Smith, 1992, had birthday this year

    Result for Joe Smith, 1992, did not have birthday this year

Submission Instructions and Marking

For this lab assignment, submit using Canvas your two answer files lab6_1.html and lab6_2.html.

Grading (20 Marks Total)

  1. Task 1 (5 marks)
  2. Task 2 (15 marks)
*Home