The goal of this lab is to get you set up woth repl.it, the online development environment we will use for this course.
Account Setup
Open repl.it in a separate browser tab. If you have never used the site before, you should set up an account. (If you choose Start Coding you will not be able to save your work until you create an account. If you already have an account, you can just log in.)
Create a username and password you will be able to remember. The site will ask you a series of questions. When asked what languages you are interested in, make sure to pick "HTML, CSS, JS" because that is what we will be using for this course. You must pick at least three, but the other two don't matter to us. Java and Python might be good choices.
When you see the option to "Start Coding" appear, select "HTML, CSS, JS" to create a new project (called a repl in this context). This will open up a development environment with some starter code.
As you develop your code you will become familiar with the function of different parts of the development window. These are labeled below.
Activity
If you just created a new repl, you can rename it to "CSC 240 Lab 0" by clicking on the project name in the upper left and typing a new name. (See diagram above. It won't let you rename if you have not yet created an account.) Copy the code below into the editing window, replacing what was already there. Then click the Run button at top center. If all goes well, you should see the message Hello World appear in the top right viewing pane.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Graphics</title>
<script>
var canvas; // DOM object corresponding to the canvas
var graphics; // 2D graphics context for drawing on the canvas
function draw() {
// draw on the canvas, using the graphics context
graphics.fillText("Hello World", 10, 20);
}
function init() {
canvas = document.getElementById("theCanvas");
graphics = canvas.getContext("2d");
draw(); // draw something on the canvas
}
</script>
</head>
<body onload="init()">
<canvas id="theCanvas" width="640" height="480"></canvas>
</body>
</html>
Credit: "Introduction to Computer Graphics" by David I. Eck
Forking a Repl
You don't always have to start from scratch on every project. You can begin with an existing project and fork it. This creates a copy of the entire repl, ready for your edits. The existing repl will remain unchanged.
Try it for yourself. Make a fork of my repl here. To do so, click on the down arrow next to the repl name and then the Fork button.
When you run the project, what do you see?
The three program commands on lines 11-13 create a drawn line on the screen. The first command specifies the starting point, the second specifies the ending point, and the last actually draws the line. Try adding a similar set of three commands to draw an additional line somewhere else. Make sure that the coordinates you specify are within the drawing canvas -- positive numbers less than 400.
What king of image can you make with just lines?
Oh No!
If you make a mistake in your code, you may get an error message appearing in the error console at the lower right. In the example below, a closing parenthesis has been left off in line 12. The error message indicates the problem and where it occurred. It also lists an additional error that is a consequence of the first one. You won't always get error messages that are this clear, but when something is going wrong always check the error console for information.
You can also send debugging information to the console using the console.log method.
console.log("This message goes to the console.");
console.log("The value of variable x is: "+x);
Wrapping Up
Lab activities are never graded, other than on participation. In future labs a solution will often be available for you to view. For the current lab, the activity is open-ended so there is no fixed solution to view.