Scribd
Upload
5 views

JavaScript

The document provides a comprehensive overview of HTML, covering its basic structure, text formatting, lists, fonts, colors, images, links, and comments. It includes examples of HTML elements and attributes, such as headings, paragraphs, lists, and the use of the <img> and <a> tags. Additionally, it explains how to customize fonts and colors, as well as how to structure a web page with tables and other elements.

Uploaded by

bryanakpokugbe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

JavaScript

The document provides a comprehensive overview of HTML, covering its basic structure, text formatting, lists, fonts, colors, images, links, and comments. It includes examples of HTML elements and attributes, such as headings, paragraphs, lists, and the use of the <img> and <a> tags. Additionally, it explains how to customize fonts and colors, as well as how to structure a web page with tables and other elements.

Uploaded by

bryanakpokugbe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

HTML: Revision (basic structure and text formatting)

Monday, December 09, 2024 6:48 PM

HTML
• Hyper Text Markup Language
Text formatting
• the standard markup language for creating Web pages
• describes the structure of a Web page and consists of a series of elements
• HTML elements tell the browser how to display the content
<b> This text is bold </b> - defines bold text, without any extra importance
Basic structure
<strong> This text is important </strong> - defines text with strong importance
An HTML element is defined by a start tag, some content, and an end tag, for example:
<h1> My First Web page </h1> <i> This text is italic </i> - defines a part of text in an alternate voice

HTML elements with no content are called empty elements. <em> Emphasized text </em> - defines emphasized text
For example, the <br> tag defines a line break, and is an empty element without a closing tag.

<small> Small text </small> - defines smaller text


Example of a simple HTML Document

<mark> Marked text </mark> - defines text that should be marked or highlighted

<u> Underlined letters </u> - defines underlined text

<sub> Subscript text </sub> - defines subscript text

<sup> Superscript text </sup> - defines superscript text

The HTML <ins> element defines a text that has been inserted into a document. Browsers will

usually underline inserted text.


The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text
Explanation:
• <!DOCTYPE html> declaration defines that this document is an HTML document
(not case sensitive)
• <html>element is the root element of an HTML page
• <head> element contains meta information about the HTML page
• <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• <body> element defines the document's body, all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
• <h1> element defines a large heading
• <p> element defines a paragraph
The content inside the <body> section will be displayed in a browser.
The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

JavaScript Page 1
HTML: Revision (lists, position and text alignment)
Monday, December 09, 2024 7:09 PM

Unordered List (Bullet list)


The list items will be marked with bullets (small black circles).
<ul> Position and text alignment
<li>Tea</li> <center> Heading </center>
<li>Milk</li> The <p> tag, for example, can take the align property that defines the alignment of text within a
<li>Juice</li> paragraph. The align property takes one of the values: left, center, right, justify.
</ul>
For example (try in Editor):
• Tea <p align = "center"> The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
• Milk HTML documents and display them correctly. A browser does not display the HTML tags, but
• Juice uses them to determine how to display the document. </p>
<p align = "left"> The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
Ordered List (Numbered list) HTML documents and display them correctly. A browser does not display the HTML tags, but
uses them to determine how to display the document. </p>
The list items will be marked with number.
<p align = "right"> The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
<ol>
HTML documents and display them correctly. A browser does not display the HTML tags, but
<li> Tea</li> uses them to determine how to display the document. </p>
<li> Milk </li> <p align = "justify"> The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
<li> Juice </li> HTML documents and display them correctly. A browser does not display the HTML tags, but
</ol> uses them to determine how to display the document. </p>

1. Tea
2. Milk
3. Juice

Description List (Definition list)


The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term.
<dl>
<dt> Heading 1</dt>
<dd> the most important heading </dd>
<dt> Heading 6 </dt>
<dd> the less important heading </dd>
</dl>

Heading 1
the most important heading
Heading 6
the less important heading

JavaScript Page 2
HTML: Revision (Fonts – Face and Size and colors)
Monday, December 09, 2024 7:10 PM

The font tag is having three attributes called size, color, and face to customize your fonts.
Font Face
It is possible to set font face using face attribute but if the user viewing the page doesn't have
the font installed, they will not be able to see it.
For example (try in Editor):
<!DOCTYPE html>
<html>
<body>
<font face = "Times New Roman">Times New Roman</font><br>
<font face = "Arial">Arial</font><br>
<font face = "Comic Sans MS">Comic Sans MS</font>
</body>
</html>

Font Size
It is possible to set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
For example (try in Editor):

<!DOCTYPE html>
<html>
<body>
<font size = "1">Font size = "1"</font><br>
<font size = "2">Font size = "2"</font><br>
<font size = "3">Font size = "3"</font><br>
<font size = "4">Font size = "4"</font><br>
<font size = "5">Font size = "5"</font><br>
<font size = "6">Font size = "6"</font><br>
<font size = "7">Font size = "7"</font>
</body>
</html>
Combination of the Font Face and Font Size
For example (try in Editor):

<!DOCTYPE html>

JavaScript Page 3
<!DOCTYPE html>
<html>
<body>
<font face = "Times New Roman" size = "7">Times New Roman</font>
<br>
<font face = "Calibri" size = "2">Calibri</font><br>
<font face = "Comic Sans MS" size =" 3">Comic Sans MS</font><br>
<font face = "Lucida Bright" size = "4">Lucida Bright</font><br>
<font face = "Arial" size = "7">Arial</font>
</body>
</html>

The color attribute of <font> is not supported in HTML5.


Use CSS instead.
CSS syntax: <p style="color:red">

It is possible to set any font color you like using color attribute. You can specify the color
that you want by either the color name or hexadecimal code for that color.
There are two ways to define colors:
1. Using a color name from a set of 16 predefined names
2. Using the # symbol followed by a three-digit hexadecimal number where each of the three digits is a
two-digit hexadecimal number (eg # CC99FF,). Each of the three two-digit hexadecimal numbers
represents the shade of three colors: Red, Green and Blue and can take values from 00 to FF. This
color definition model is called RGB (Red, Green, Blue).
The first way we use it mainly when we want a main color and not a shade. There are 16
main colors that we can refer to by their name.

aqua black blue fuchsia


green gray lime maroon
navy olive purple red
silver teal white yellow

For example (try in Editor):


<!DOCTYPE html>
<html>

JavaScript Page 4
<html>
<body>
<font color = "#0099FF">This text is in blue! </font><br>
<font color = "#FF66FF">This text is in pink! </font><br>
<font color = "red">This text is red! </font><br>
<font color = "purple">This text is purple! </font>
</body>
</html>

#000000 #000033 #000066 #000099 #0000CC #0000FF


#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF

JavaScript Page 5
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

JavaScript Page 6
HTML: Revision (Images, links and comments)
Monday, December 09, 2024 7:10 PM

Images can improve the design and the appearance of a web page.
The HTML <img> tag is used to insert an image in a web page.
Example: <img src = "bird.jpg">
Attributes:

src Specifies the URL of the image file (path to the image)
alt Specifies an alternate text for the image
height Specifies the image height in pixels
width Specifies the image width in pixels
border Specifies border thickness in terms of pixels

For example: https://www.w3schools.com


<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an
understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345" border="7">
</body>
</html>

The style attribute


For example: https://www.w3schools.com
<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>

With the background property of the body, we add the background image to our page
<body background = "bird.jpg">

The HTML <a> tag defines a hyperlink.


A link does not have to be text. It can be an image or any other HTML element!

The href attribute indicates the link's destination.

JavaScript Page 7
For example: https://www.w3schools.com
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
</body>
</html>

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - opens the document in the same window/tab as it was clicked (default)
_blank - opens the document in a new window or tab
_parent - opens the document in the parent frame
_top - opens the document in the full body of the window

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href = "https://www.tutorialspoint.com/" target = "_blank">Opens in New</a>
<a href = "https://www.tutorialspoint.com/" target= "_self">Opens in Self</a>
<a href = "https://www.tutorialspoint.com/" target = "_parent">Opens in Parent</a>
<a href = "https://www.tutorialspoint.com/" target = "_top">Opens in Body</a>
</body>
</html>

Comments
HTML comments are not displayed in the browser.
They can help document your HTML source code.
The syntax: <!-- Comments -->

For example: https://www.w3schools.com


<!DOCTYPE html>
<html>

JavaScript Page 8
<body>
<p>This <!-- great text --> is a paragraph.</p>
</body>
</html>

JavaScript Page 9
HTML: Revision (Tables)
Monday, December 09, 2024 7:10 PM

HTML tables allow web developers to arrange data into rows and columns.

The HTML <table> element defines a table.


The HTML <tr> element defines a row in a table.
The HTML <th> element defines a header cell in a table (by default, the text is bold and
centered).
The HTML <td> element defines a cell in a table (table data).

To set the width and height of a table, add the width and height (or style) attribute to the <table>
element.
To set the border attribute to the <table> element.

CSS Table border


https://www.html.am/html-codes/tables/table-border.cfm

JavaScript Page 10
JavaScript Page 11
CSS: Revision (introduction)
Monday, December 09, 2024 7:11 PM

CSS is the language we use to style an HTML document.


CSS stands for Cascading Style Sheets.
CSS allows you to create rules that specify how the content of an element should appear.
For example, you can specify that the background of the page is cream, all paragraphs should appear in
grey using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML
element. CSS Associates Style rules with HTML elements
CSS allows you to create rules that control the way that each individual box (and the contents of that
box) is presented. CSS works by associating rules with HTML elements. These rules govern how the content of specified
elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

Selectors indicate which element the rule applies to. The same rule can apply to more than one element
if you separate the element names with commas.

Declarations indicate how the elements referred to in the selector should be styled. Declarations are
split into two parts (a property and a value), and are separated by a colon.

Properties indicate the aspects of the element you want to change. For example, colour, font, width,
height and border.

Values specify the settings you want to use for the chosen properties. For example, if you want to
specify a colour property then the value is the colour you want the text in these elements to be.

Using CSS, you could add a border around any of the boxes, specify its width and height, or add a
background colour. You could also control text inside a box — for example, its colour, size, and the
typeface used.

For example (try in Editor): Source: https://www.w3schools.com/css


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

JavaScript Page 12
17/12: JavaScript - Introduction
Monday, December 09, 2024 7:12 PM

JavaScript
What is JavaScript? | JavaScript Tutorial for Beginners | JavaScript Training | Edureka

https://stackshare.io/

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
• Client-side validation,
• Dynamic drop-down menus,
• Displaying date and time,
• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt
dialog box),
• Displaying clocks etc.
Source: https://www.javatpoint.com/javascript-tutorial

JavaScript is easy to code.


JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you web page, but it is
recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.

<script>
JavaScript code
</script>

The script tag takes two important attributes:


▪ Language: This attribute specifies what scripting language you are using. Typically, its value will
be javascript.
▪ Type: This attribute is what is now recommended to indicate the scripting language in use and its value
should be set to "text/javascript".

<script language="javascript" type="text/javascript">


Javascript code
</script>

Editor: https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

First Javascript Code-Example


<html>
<body>
<script language="javascript" type="text/javascript">
document.write ("Hello JavaScript!")

JavaScript Page 13
</script>
</body>
</html>

Example:
<script>
document.write("Hello JavaScript!");
</script>
EXAMPLE:

1. Write your name and print it out on the screen.


2. Write your age and print it out on the screen.

Since we are going to write JS in Notepad++, we need to:


1. SAVE AS – name.html (add html extension)
2. SAVE AS – editFileName.txt (we have to save this file also, so we can reopen it and continue to edit,
write code...)

JavaScript Page 14
17/12: Comments and New line
Monday, December 09, 2024 7:12 PM

Comments
JavaScript Single line Comment
Single line comments start with //. Any text written between // and the end of line will be ignored by
JavaScript (will not be executed).
Example:
<script>
// It is single line comment
document.write("Hello JavaScript!");
</script>

JavaScript Multi line Comment


It can be used to add single as well as multi line comments. It is represented by /* and */.

Example:
/* your code here */
It can be used before, after and middle of the statement.

<script>
/* It is multi line comment.
It will not be displayed */
document.write("Hello JavaScript!");
</script>

New line
<script>
document.write("Hello");
document.write("<br>");
document.write("JavaScript!");
</script>

EXAMPLE 1.

1. Add a single line comment next to your age (you did in lesson before) saying: This is my age; and test
if it's okay

2. Add a multiline comment next to your name (you did in lesson before) saying:
This
Is

JavaScript Page 15
Is
My
Name
and test if it's okay

JavaScript Page 16
17/12: JavaScript Variables
Monday, December 09, 2024 7:12 PM
Variable naming
There are two limitations on variable names in JavaScript:
Variables are used to store data values. • The name must contain only letters, digits, or the symbols $ and _.
JavaScript uses the keywords var, let and const to declare variables. • The first character must not be a digit.
An equal sign is used to assign values to variables.
One of the most fundamental characteristics of a programming language is the set of data types it Examples of valid names:
supports. These are the type of values that can be represented and manipulated in a programming let userName;
language.
let test123;
Data types:
let $ = 1; // declared a variable with the name "$"
Number: Any number, including numbers with decimals: e.g., 123, 120.50 etc.
let _ = 2; // and now a variable with the name "_"
String: Any grouping of characters on your keyboard (letters, digits, spaces, symbols, etc.) surrounded by
single quotes: ' ... ' or double quotes " ... ", e.g. "This text string" etc.
Boolean: This data type only has two possible values— either true or false (without quotes). It’s helpful Examples of incorrect variable names:
to think of booleans as on and off switches or as the answers to a “yes” or “no” question. let 1a; // cannot start with a digit
Null: This data type represents the intentional absence of a value, and is represented by the keyword let my-name; // hyphens '-' aren't allowed in the name
null (without quotes).
Undefined: This data type is denoted by the keyword undefined (without quotes). It also represents the
absence of a value though it has a different use than null. Undefined means that a given value does not JavaScript variable names are case-sensitive: laura and LAuRa are two different variables.
exist. Also, when we have an variable made out more than one word, use Camel case (every next word of the
Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding. name of the variable, its first letter is capital- e.g. getElementById
No need to worry about these for now.
Object: Collections of related data. Reserved names
There is a list of reserved keywords, which cannot be used as variable names because they are used by
Storing a value in a variable is called variable initialization. You can do variable initialization at the time the language itself. For example: let, class, return, and function are reserved.
of variable creation or at a later point in time when you need that variable.
Constants
Examples: To declare a constant (unchanging) variable, use const: const myBirthday = '8.08.1988';
1.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<script>
let x;
x = 6;
document.write (x)
</script>
</body>
</html>

OR
<script>
let x;
x = 6;
document.write (x)
</script>

2.
<script>
let message;
message = 'Hello!';
document.write (message);
</script>

<script>
let message = 'Hello!';
document.write (message);
</script>

<script>
let message;
message = 'Hello!';
document.write (message);
document.write("<br>");
message = 'World!'; // value changed
document.write (message);
</script>

JavaScript Page 17
17/12: JavaScript Operators
Monday, December 16, 2024 9:40 PM

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic operations on the operands.
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands.

JavaScript Assignment Operators

JavaScript Logical Operators

JavaScript Page 18
14/1: Interaction: alert, prompt, confirm
Monday, December 16, 2024 9:41 PM

alert
Example:
<script>
alert( 'Hello, world!' );
</script>

prompt
The function prompt accepts two arguments:
result = prompt(title, [default]);
It shows a modal window with a text message, an input field for the visitor, and the buttons
OK/Cancel.
Title: The text to show the visitor.
Default: An optional second parameter, the initial value for the input field.
The square brackets in syntax [...] - The square brackets around default in the syntax above denote
that the parameter is optional, not required.

Example:
<script>
let age = prompt('How old are you?', 100);
</script>

The visitor can type something in the prompt input field and press OK. Then we get that text in the
result. Or they can cancel the input by pressing Cancel or hitting the Esc key, then we get null as the
result. The call to prompt returns the text from the input field or null if the input was canceled.

confirm
result = confirm(question);
The function confirm shows a modal window with a question and two buttons: OK and Cancel.
The result is true if OK is pressed and false otherwise.

Example:
<script>

JavaScript Page 19
let age = confirm("Are you 18?");
</script>

JavaScript Page 20
14/1: EXERCISES - examples
Monday, December 16, 2024 9:42 PM

Examples:

Simple operations between numbers and text


<script>
document.write(2+3);
document.write(“<br>”);
document.write(5.0/2.0);
document.write(“<br>”);
document.write(2*4);
document.write(“<br>”);
document.write(“Good morning” + “ Friend”);
</script>
_________________________
Operation between variable strings
<script>
a= "Jimmy";
b="Good morning " ;
document.write (b+a);
</script>
_______________________
Assigning real values to variables and operations between them
<script>
a=4.0;
b=3.0;
c=a+b;
d=a-b;
e=a/b;
f=c*d;
document.write ('a is ',a);
document.write("<br>");
document.write ('b is ',b );
document.write("<br>");
document.write ('c is ',c);
document.write("<br>");
document.write ('d is ',d );

JavaScript Page 21
document.write ('d is ',d );
document.write("<br>");
document.write ('e is ',e );
document.write("<br>");
document.write (' f is ',f );
document.write("<br>");
document.write (' g is ',g );
document.write("<br>");
</script>

JavaScript Page 22
14/1: Sequence - exercises 1
Monday, December 16, 2024 9:42 PM

The Math.floor() static method always rounds down and returns the largest integer less
than or equal to a given number.
The Math.random() static method returns a number that's greater than or equal to 0 and less
than 1.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

1. Write the program that obtains from the user the date of today and displays the date in the
form dd/mm/yyyy.
<script>
let a= prompt( "Write the Day");
let b= prompt( "Write the Month") ;
let c= prompt( "Write the Year");
document.write(a,'/',b,'/',c) ;
</script>

2. Write the program that obtains from the user his year of birth and a year in the future, and
calculates how old will the user be in exact year in the future.

<script>
let birthYear = Number(prompt( "Write the Year of your Birth"));
let futureYear =Number(prompt( "Write the Year in the Future"));
let age = futureYear - birthYear;
document.write ('You will be ' + age + ' years old!' );
document.write ('<br>' );
document.write ('You will be ', age , ' years old!' );
document.write ('You will be ', futureYear - birthYear , ' years old!' );
</script>

3. Write the program that obtains from the user the temperature in Celsius degrees and
calculates and displays it in Fahrenheit degrees.
Fahrenheit = (Celsius*9)/5 + 32;

4. Write the program that obtains from the user the values of 3 numbers and calculates and
displays their sum, product, and average

<script>
let a=Number(prompt ("Write the 1st number: "));
let b= Number(prompt ("Write the 2nd number: "));
let c= Number(prompt ("Write the 3rd number: "));
let d=a+b+c;
let e= a*b*c
let f= d/3
document.write ("The sum is: ", d);
document.write("<br>");
document.write ("The product is: ", e);
document.write("<br>");
document.write ("The average is: ", f);
document.write("<br>");
</script>

OR
<script>
let a=Number(prompt ("Write the 1st number: "));
let b= Number(prompt ("Write the 2nd number: "));
let c= Number(prompt ("Write the 3rd number: "));
document.write ("The sum is: ", a+b+c);
document.write ("<br> The product is: ", a*b*c);
document.write ("<br> The average is: ", (a+b+c)/3);
</script>

JavaScript Page 23
28/1: CONDITIONAL STATEMENTS (DECISION)_1
Tuesday, January 28, 2025 10:11 AM

• if - specify a block of code to be executed, if a specified condition is true


• else - specify a block of code to be executed, if the same condition is false
• else if - specify a new condition to test, if the first condition is false
• switch - specify many alternative blocks of code to be executed

1. Write the program that displays a greeting Good morning! if the user enters a time before 10
(am).

2. Write the program that displays a greeting according to hour given by the user (Good
morning! if the user enters a time before 10 (am), else Good day!)

OR

3. Write a program that obtains from the user an integer and checks if the number is even or
odd. Then it displays the message 'EVEN NUMBER' or 'ODD NUMBER' accordingly.

JavaScript Page 24
28/1_4/2: CONDITIONAL STATEMENTS (DECISION)_2
Tuesday, January 28, 2025 10:13 AM

1. Write a program that obtains from the user his age and displays the message: Minor if the
age is under 18, Adult if the age is between 18 and 67 (18 and 67 included) and Elder
otherwise.

OR

2. Write a program that obtains from the user the values for 4 grades and calculates and
displays their average. It displays the messages accordingly:
< 10 Fail
10.1 - 14 D
14.1 – 15 C
15.1 – 17 B
17.1 – 20 A

JavaScript Page 25
4/2_11/2: CONDITIONAL STATEMENTS (DECISION)_3
Tuesday, January 28, 2025 10:15 AM

EXERCISES
1. Write a program that finds and displays the value of the largest of the three entered numbers.

2. Write a program that obtains from the user the values of three integer numbers and calculates
the sum of even numbers and sum of odd numbers.

3. Write a program that obtains from the user the values of three real numbers (positive numbers)
and checks if there is a triangle with these sides (length of the sides). If so, is it: scalene,
isosceles, or equilateral?

JavaScript Page 26
4. A company sells PCs at the price of € 500. For every order of 10 and more computers, it also
offers 5% discount as a gift. Write a program that obtains from the user the number of ordered
computers and calculates and displays the total amount he needs to pay.

5. Write a program that obtains from the user the values of two integer numbers a and b. If both
numbers are even divide the larger with the smaller number. If both are odd numbers, subtract
the smaller number from the larger one. Otherwise add those two numbers.

JavaScript Page 27
6. An employee receives a salary depending on the years of his service according to the following
table. Write a program that obtains from the user the employee's years of service and displays
the salary he will receive.

Years of service Salary in €


0 up to 8 2000 €
9 up to 15 2500 €
16 up to 25 3000 €
Over 25 3500 €

JavaScript Page 28
JavaScript Page 29
11/2_18/2: CONDITIONAL STATEMENTS (DECISION)_4
Monday, February 10, 2025 11:41 AM

EXERCISES

1. Write a program that obtains from the user a four-digit integer number and checks if the
number is a palindrome.

2. Write a program that obtains from the user a three-digit integer number. If the digit of the
units is an even number, the program should display the digit of hundreds, otherwise the
digit of tens.

JavaScript Page 30
4/3: Test: JavaScript_1
Tuesday, February 11, 2025 6:39 PM

Sequence and Conditional statements - test on the computer


All the material and solved exercises are on TM LAE 2425 S5ICTB Notebook (from 17/12 till 18/2
included).

LOOPS are NOT included in this test.

JavaScript Page 31
18/2: LOOPS – While loops
Monday, February 10, 2025 12:59 PM

Loops - allow code to be executed repeatedly based on a given condition (true or false)
The While loop
The while loop has the following syntax:
while (condition)
{
// code
// so-called "loop body"
}

While the condition is true, the code in the loop body is executed.
Example:
Write a program that displays the numbers from 1 to 5.

If you forget to increase the variable used in the condition, the loop will repeat (in theory)
forever. In practice, the browser provides ways to stop such loops; the browser will crash.
Any expression or a variable can be a loop condition, not just comparisons: the condition is
evaluated and converted to a Boolean.
For example, a shorter way to write while (i != 0) is while (i):

Curly brackets are not required for a single-line body.

JavaScript Page 32
18/2: EXERCISES – WHILE LOOP_1
Monday, February 10, 2025 3:08 PM

1. Write a program that displays only odd numbers from 1 to 18 (in the same row, separated by ,).

2. Write a program that obtains from the user numbers k and n and displays only numbers divisible by
3 between k to n (in the same row).

3. The ICT teacher is assigning the grades to the students in the first semester and wants to
calculate the average of the class and how many students have the grade A (grade over 18).
Grades range from 0 to 20. As the number of students is unknown, the teacher will stop
entering the grades when he writes the special value -1. Note: As the number of students is
not known in advance, it can be zero (0).

4. Write a program that obtains from the user one by one character as long as they are
different from the “dot (.)”, calculates and displays:
a) the number of characters
b) how many times the letter "A" or "a" was entered

JavaScript Page 33
LOOPS – Do...While loops
Monday, February 10, 2025 3:16 PM

1. The Do…while loop


The Do…while loop has the following syntax:
do {
{
// code
}
while (condition);

The loop first executes the code in the body, then checks the condition, and, while the condition is true,
executes the code again and again.
The code will be executed at least once regardless of the condition being true or false.
Example:
Write a program that displays the numbers from 1 to 5.

2. Write a program that displays the numbers from 7 to 1.

3. Write a program that reads numbers from the keyboard, calculates, and displays their sum at
the end. Number entry stops when the sum exceeds 200.

JavaScript Page 34
Additional exercises
Monday, February 10, 2025 3:18 PM

1. Write a code for guessing game. User needs to guess the number in a range from 1 to
100, and at the end program should also display the number of attempts.

JavaScript Page 35

You might also like