Try it!

 Practice JavaScript in  
DukeLearnToProgram Environment 
Duke University 
Programming Foundations with JavaScript, HTML and CSS 
Module 3: Algorithms and Programming Concepts 

Try It! Using Variables, Methods and Functions 
Try experimenting a little with the DukeLearnToProgram (DLTP) JavaScript programming 
environment to get comfortable with beginning to write JavaScript! Here is a link to the 
environment: ​http://www.dukelearntoprogram.com/course1/example/index.php​ (also linked in the 
course ​Resources ​tab). 

Experimenting with Variables and Creating a SimpleImage 
Try the example you saw in the ​Variables​ video of creating and initializing three variables:  
 
1 var x = 3;  
2 var y = 4;  
3 var z = x + 2*y;   
 
Add code to print out x, y, and z and note their values.  
 
Next, if you wrote the following code, what do you think would be the values of x and y printed? 
Try it and see!  
 
1 var x = 3;  
2 var y = 2;  
3 y = x; 
4 print (x);  
5 print (y);  
 
Next, create and print a new SimpleImage from one of the images in the environment, for 
example:  
 
1 var image = new SimpleImage(“chapel.png”);  
 

1 
Note that there are many different images available in the DLTP JavaScript programming 
environment in the “Available Images” area. You can drag and drop other images from your 
computer into the “Available Images” area and create a SimpleImage by just replacing 
“chapel.png” with whichever file name that shows up in “Available Images”. 

Need help?  
● Review the video on​ Variables​. 
● Be sure to ask for help in the course forums if you’re having trouble writing your code. 

Experimenting with Methods 
Create a new SimpleImage from one of the images in the environment. Then, experiment with 
the following methods:  
● getWidth  
● getHeight  
● getPixel  
● getRed, getGreen, getBlue 
 
For example, you may want to print the width and height of your image, and print the red, green, 
and blue values of a particular pixel, such as the pixel at coordinates (0,0).  

Need help?  
● If you’re having trouble using methods, refer back to the examples shown in the 
Methods​ video to help you get started. 
● Check the documentation to remind yourself of what these methods do: 
http://www.dukelearntoprogram.com/course1/doc/​ (also linked in the ​Resources ​tab). 
● Remember that you will need to use the ​print​ function in order to see any outputs from 
your methods (e.g., the red value of a pixel, the width of an image, etc.) in the “See It” 
window of the DLTP JavaScript programming environment. 

Experimenting with Functions 
Write the function you saw in the ​Functions ​video:  
 
1 function square(x){  
2 var ans = x*x;  
3 return ans;  
4 } 
 
Also write the following line of code you saw in the ​Functions ​video that calls the square 
function on the value 4 and stores the result in the variable y:  
 
1 var y = square(4);  

2 
 
Print out y. Call the square function on a few numbers other than 4.  

Extra Challenge! 
What if you wanted to turn your square function into a cube function? What would you change 
about the square function to turn it into a function that returns the cube of a number? (For 
example, calling your cube function on 2 should give the result 8 because 2x2x2 = 8) You might 
also want to change the name from square to cube to make it clearer what your function does.  
 
Make a function of your own. It can do whatever you want! If you don’t have an idea for a 
function right now, you could use one of these suggestions:  
● Write a function that adds three numbers together. 
● Write a function that adds two strings. Remember that addings strings means 
concatenating, so “a” + “b” is “ab” and “b” + “a” is “ba”. 
● Write a function that prints the width and height of an image. 

Try It! Using For Loops 
Make a yellow square that is 200 pixels wide and 200 pixels high, like this:  
 

 
 
Think through the steps you will need to do to solve this problem.You will need to: 
 
1. Create a new image, specifying that the new image is 200 pixels wide and 200 pixels high. 
 
2. Then, for each pixel in that image: 
● Make the pixel yellow.  

Need Help? 
You can use the following line of code to create an image that is 2 pixels wide and 2 pixels high. 
This image will be all black. How would you create an image that is 200 pixels wide and 200 
pixels high? Try it and see if you were correct!  

3 
 
1 var img = new SimpleImage(2,2);  
2 print(img);  
 
Once you have made the image, for each pixel you will need to change its color to yellow. What 
does it mean to make a pixel yellow? Remember that yellow pixels have a red value of 255, a 
green value of 255, and a blue value of 0.  
 
If you are struggling writing your for loop, review the ​For Loops​ video. The method ​values​ will 
be critical to writing your loop. Be sure to review the documentation to understand how this 
method works: ​http://www.dukelearntoprogram.com/course1/doc/​ (also available from the 
Resources​ tab). 

Extra Challenge! 
What if you wanted to make your image magenta instead of yellow? Magenta has a red value of 
255, a green value of 0, and a blue value of 255. You can experiment with other colors too! 

4