JavaScript and Learning to Program (Week 8/9)

Question 1

What is JavaScript?

Answer 1

A rather simple high-level programming language

Question 2

What is JavaScript’s Purpose?

Answer 2

The purpose of JavaScript is to allow web browsers to achieve dynamic effects on web pages

Question 3

Where is JavaScript usually run?

Answer 3

JavaScript usually runs on top of a website (Hypertext Markup Language Document - HTML) inside a web browser

Question 4

What is Computational Thinking?

Answer 4

how to formulate a solution to a problem so that a machine can execute it.

Question 5

What does HTML stand for?

Answer 5

Hypertext Markup Language

Question 6

What is a Tag in HTML?

Answer 6

Tags are commonly defined as a set of characters constituting a formatted command that will display or function on a web page.

Question 7

Where is JavaScript embedded in HTML code?

Answer 7

In between < script> … </script > tags.

Question 8

What is HTML?

Answer 8

HTML is not programming but rather a set of markup symbols or codes inserted into a file intended for display on the Internet.

The markup tells web browsers how to display a web page’s words and images.

Do note, like JavaScript, not all browsers show the HTML the same way. There are subtle (and not so subtle) differences in function and look.

Question 9

Is JavaScript compiled?

Answer 9

JavaScript is not compiled, but interpreted => we can see the code when we look at the web page source

(e.g. right click => “View Page Source” or CTRL-U in Chrome)

Question 10

What does it mean that JavaScript is an Interpreted Language?

Answer 10

It does not need a compiler to run.

The interpreter is in the browser and it reads over the JavaScript code, interprets each line, and runs it.

Question 11

What are some advantages of JavaScript?

Answer 11

JavaScript is in widespread use
* In almost any web-browser, regardless of the operating system

Easy to write and test – rather simple language and no need for compilers and other specialized software
* Besides the browser, a text editor is all you would need
* Many tools allow you to work even without text editor

Most web pages contain JavaScript
* It is easy to get inspiration (and copy code) from other pages

Question 12

What are some disadvantages of JavaScript?

Answer 12

Slightly different implementation with different browsers
* What runs on Chrome, might not run properly on Edge
* This keeps getting better with newer versions

Runs only as a part of a web page
* “standalone” programs are typically not made with JavaScript
* Programs are not compiled to machine code => slower execution

We need to learn basics of the Hypertext Markup Language (HTML) to run our JavaScript examples inside a web page
* JavaScript is usually embedded in HTML code in between
< script>…</script > tags

Question 13

What is another name for a JavaScript program?

Answer 13

A JavaScript program is also called a script
=> the text in between < script>…</script > tags

Question 14

What are some basic properties of JavaScripts?

Answer 14

Usually, every line contains one instruction (also called statement); instructions are executed one by one starting at the top

Most statements (and thus most lines) end with a semicolon ;

Lots of JavaScript libraries (collections of re-usable scripts) are built-in and provide features for us to reuse in our programs,
e.g. alert() to display a short message in a message box

Question 15

Determine the effect(s) of the following JavaScript Code :

1	<script>
2	alert("Hello World!");
3	<script>

Answer 15

Result :

Nothing, there is no “</script>” to finish the code

Question 16

Determine the effect(s) of the following JavaScript Code :

1	<script>
2	alert("Hello World!");
3	</script>

Answer 16

Result :

“Hello World” is displayed in a message box

Question 17

What are some basic properties of functions in JavaScript?

Answer 17

alert() is a function => note: brackets after the name

we use (a.k.a. “call”) a function to let it do something for us

functions may require several input values
* Input values are called “parameters”
* alert() works with zero or one parameter,
e.g. alert(“Hello World”)

Unlike alert(), a function may also return (i.e. calculate and pass back) a result to the statement that called the function.

Return values are often stored in variables for later use.

Question 18

What are some basic properties of variables in JavaScript?

Answer 18

JavaScript uses variables to store data items (like a container)

Variables are declared (introduced) prior to their use,
e.g. var text; … declares a variable with name text

A variable can store different types of information,
e.g. a sequence of characters (called a string) or a number

var text = “Welcome to today’s lecture of COMP156”;
…declares and initializes variable text (quotes indicate a string)

var pi = 3.1415;
…declares and initializes variable pi (no quotes => number)

Question 19

Determine the effect(s) of the following JavaScript code :

1	<script>
2	var username;
3	username = prompt("What's your name?");
4	alert("Hello, " + username);
5	</script>

Answer 19

Result :

A message box with the text “What’s your name?” asking for an input (eg. Mark)

“Hello, Mark” displayed in a message box

Question 20

What is a Loop?

Answer 20

In many situations, we want a program to repeat a sequence of instructions, typically with some variations in every iteration
* Remember instructions IFZERO and GOTO of the Toy Computer that we used to “jump” to a labelled instruction at some earlier position?

If we repeatedly execute a particular sequence of instructions, we call this a loop or iteration (remember the term “endless” loop?)
* Typically, execution continues as long as a certain condition is true
* One type of loops in JavaScript is the while loop

Question 21

Determine the Output(s) of the following JavaScript code :

Inputs(3, 4, 13, 0)

1	<script>
2	var num, sum;
3	sum = 0;
4	num = prompt("Enter new value, or 0 to end");
5	while (num != 0)
6	{
7		sum = sum + parseInt(num);
8		num = prompt("Enter new value, or 0 to end");
9	}
10	alert("Sum = " + sum);
11	</script>

Answer 21

Output :

“Sum = 20”

Question 22

Determine the Output(s) of the following JavaScript code :

Inputs(3, 4, 0,13)

1	<script>
2	var num, sum;
3	sum = 0;
4	num = prompt("Enter new value, or 0 to end");
5	while (num != 0)
6	{
7		sum = sum + parseInt(num);
8		num = prompt("Enter new value, or 0 to end");
9	}
10	alert("Sum = " + sum);
11	</script>

Answer 22

Output :

“Sum = 7”

Question 23

Determine the Output(s) of the following JavaScript code :

Inputs(5, 3)

1	<script>
2	var valone, valtwo;
3	valone = prompt("Enter the first value");
4	valtwo = prompt("Enter the second value");
5	alert(valone + " + " + valtwo);
6	</script>

Answer 23

Output :

“5 + 3”

Question 24

Determine the Output(s) of the following JavaScript code :

Inputs(5, 3)

1	<script>
2	var valone, valtwo;
3	valone = parseInt(prompt("Enter the first value"));
4	valtwo = parseInt(prompt("Enter the second value"));
5	alert(valone + valtwo);
6	</script>

Answer 24

Output :

“8”

Question 25

What is a Conditional?

Answer 25

The program will only execute the code within the conditional if the condition is true

eg.
if (prompt(“Type ‘cat’”) == “cat”)
{
alert(“You did it!”);
}

only outputs “You did it” if the user types in “cat”

Question 26

Determine the Output(s) of the following JavaScript code :

Inputs(3, 4, 13, 0)

1	<script>
2	var max, num; 
3	max = 0; 
4	num = prompt("Enter new value, or 0 to end"); 
5	while (num != 0)
6	{
7		if (parseInt(num) > max)
8		{ 
9			max = num;
10		}
11	num = prompt("Enter new value, or 0 to end"); 
12	}
13	alert("Maximum is " + max);
14	</script>

Answer 26

Output :

“Maximum is 13”

Question 27

How does JavaScript interact with HTML?

Answer 27

So far, we were focused on JavaScript, mostly ignoring HTML
* The real power of JavaScript, though, stems from the combination of JavaScript and HTML

Once the browser is finished loading an HTML page, JavaScript code starts to execute (unless it is code inside a function)

Certain events, e.g. a user presses a button, could be wired to start the execution of a piece of code

JavaScript code can manipulate parts of an HTML document

Question 28

What is a main feature of HTML?

Answer 28

Any web page you load and view in a web browser is in fact a HTML document

A characteristic feature of HTML documents is that its elements are enclosed with pairs of tags

Question 29

How do tags work in HTML?

Answer 29

Tags are open and closed. To open a tag, brackets <> are used. To close a tag, </> are used. These are nested pairs within the HTML structure. Examples:
* <html> all page content is in here </html>
* <head> document head information goes in here </head>
* <body> document body goes in here </body>
* <h1>largest heading text is in here </h1>
* <p> paragraph text is in here </p>