JavaScript Basics: Tryit Exercises, Array Manipulation, and Functions

Verified

Added on 2023/04/05

AI Summary

This assignment focuses on fundamental JavaScript concepts using the Tryit editor. It covers variable declaration, data output methods, and basic HTML integration. Exercises include printing values, performing calculations, and manipulating strings. The assignment also delves into array manipulation, including modifying array elements and summing numeric values within an array. Furthermore, it explores the use of functions, prompting users for input, and implementing conditional greetings based on time. The assignment concludes with a chequerboard pattern program, emphasizing the importance of commenting and understanding nested loops. Desklib provides this and many other solved assignments for students.

JS Basics in Tryit
First up, the var statement: Creates a box, labels it with ‘x’ and puts the
number 7 inside it.
The left hand window contains your code:
The right hand window is where you see the results (after you press the green Run >> button)
JavaScript can "display" data in different ways. We have used 2 of them so far:
● Writing into the HTML output using document.write().
● Writing into an alert box, using window.alert().
In HTML, what element defines a line break? Write the code in the box below (hint: it’s very short!):
Line breaks
You will need this in a bit ….
Stuck?
When you are experimenting with JS in Tryit you do not need to save it, unless you are asked to. It will
run quite happily without being saved.
Ann Plummer Page 1 of 8

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

You can cut and paste any relevant code snippets you think may be useful into this worksheet.
Ex 1
Run this Example and make it print your favourite number (or any number) instead of 7. Does it still work
with more than one digit?
A: Yes
Answer any Q’s that are in with the code - put the Q’s and your A’s here:
<p id="demo">JavaScript can print stuff on the screen</p> - This is the content of the paragraph. Id is
the unique identifier
Screenshot the code here:
<html>
<body>
<h1>InComp JS Examples</h1>
<p>by Ann Plummer</p>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can print stuff on the screen</p>

<script>
var x = 7;
document.write(x);
</script>
</body>
</html>
Ann Plummer Page 2 of 8

How about making it a sum? (eg 7+2) - what happens? Screenshot the result here:
Now try putting the x in quotes in a new output line
Eg
document.write(x);
document.write('x');
Run it - what happens?
Why? (ask one of us if you don’t know)
Now adapt the code to make another variable, y, that contains x-1 and print it on the line below x.
You should get something like:
Code URL:
https://www.w3schools.com/code/tryit.asp?filename=G1ZFAQA20EWJ
Copy and paste your code here:
Ann Plummer Page 3 of 8

<html>
<body>
<h1>InComp JS Examples</h1>
<p>by Ann Plummer</p>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can print stuff on the screen</p>

<script>
var x = 7,y;
document.write(x+"<br/>");
y=x-1;
document.write(y+"<br/>");
</script>
</body>
</html>
Ex 2
Adapt your code to print a row of asterisks, your name on the next row, your ID number on the following
line, followed by another row of asterisks.
Now show an alert box that says ‘bye bye your name’
Eg
Ann Plummer Page 4 of 8

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser

Cut and paste your code below, // comment a few of the important lines (need help?):
Code URL:
https://www.w3schools.com/code/tryit.asp?filename=G1ZFKTPF2RMB
<html>
<body>
<h1>InComp JS Examples</h1>
<p>by Ann Plummer</p>
<h2>What Can JavaScript Do?</h2>
<p id="demo">Exercise 2</p>
<script>
var rollno=666, name="tom"; //variable declaration
for(i=1;i<=10;i++)
document.write("*"); //print asterix
document.write("<br/><h1>"+name+"</h1><h1>"); //print the name
document.write(rollno+"</h1><br/>"); //print the roll number
for(i=1;i<=10;i++)
document.write("*"); //print asterix
document.write("<br/>");
alert("Bye bye"+name); //display the bye message using alert
</script>
</body>
</html>
Screenshot your code running, here:
Ann Plummer Page 5 of 8

Remember the Xmas Tree? Go take a look at it, run it and if you haven’t already, go through the
whole of InComp-JS Lecture 2 - it really will help and will make the coming weeks seem so much
easier ………
Ex 3
Make notes on InComp-JS Lecture 2 below:
Javascript is a programming language used to create interactive events
Javascript data types: Variables - Var x; x = 5
Var y = 6; y = 6
Var z = x + ; z = 11
Var x = 3.14;
Var y = 3;
Tags are elements of language
Ann Plummer Page 6 of 8

Code URL:
https://www.w3schools.com/code/tryit.asp?filename=G1ZGHAXNE99H
<html>
<body>
<h1>InComp JS Examples</h1>
<p>by Ann Plummer</p>
<h2>What Can JavaScript Do?</h2>
<p id="demo">Exercise 3 (Print Xmas Tree)</p>
<script>
var x;
x = 5;
var y = 6; //y = 6
var z = x + y; //z = 11
for(let i=0;i<x;i++)
{
for(let j=x-1;j>=i;j--)
document.write(" &nbsp"); //print space
for(let k=0;k<=(i*2);k++)
document.write("^"); //print ^ symbol
document.write("<br/>"); //print line break
}
for(let j=x-1;j>=0;j--)
document.write(" &nbsp"); //print space
for(let k=0;k<=(x/2);k++)
document.write("|"); //print branches
</script>
</body>
</html>
Ann Plummer Page 7 of 8