Ministry of Higher Education Republic of Cameroon

IUGET - DOUALA Peace – Work – Fatherland

• * *
Department of Computer Engineering ACADEMIC YEAR 2021/2022
All Specialties

COURSE: WEB PROGRAMMING 1

LESSON: JAVASCRIPT PROGRAMMING

Level: HND1 By: MR. NYAMBI BLAISE

JavaScript is a lightweight, interpreted programming language. It is designed for creating

network-centric applications. It is complimentary to and integrated with Java. JavaScript is very
easy to implement because it is integrated with HTML. It is open and cross-platform.

Learning objectives

After studying this lesson, students should be able to:

- Write a standard HTML code and import JavaScript files.

- Use JavaScript tags to display a page content
- Understand and able to use and manipulate JavaScript attributes.

Table of Contents For Part 1 of JavaScript

I. Introduction ..............................................................................................................................3
1.1 Definition ...................................................................................................................................... 3
1.2 Differences Between JavaScript and Java..................................................................................... 3
1.3 Advantages of JavaScript ............................................................................................................. 4
2 JAVASCRIPT ...........................................................................................................................5
2.1 JavaScript Syntax .......................................................................................................................... 5
2.1.1 Importing External JavaScript Scripts .................................................................................. 6
2.1.2 JavaScript Comments............................................................................................................ 6
2.2 JavaScript Variables...................................................................................................................... 6
2.2.1 JavaScript Variable Rules ..................................................................................................... 7
2.2.2 JavaScript Reserved Words .................................................................................................. 7
2.3 JavaScript Operators ..................................................................................................................... 7

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 1 of 13

 2.3.1 Assignment Operator ............................................................................................................ 8
2.3.2 Variable Assignment Examples ............................................................................................ 9
2.3.3 Arithmetic Operators............................................................................................................. 9
2.3.4 Comparison Operators .......................................................................................................... 9
2.3.5 Logical Operators................................................................................................................ 10
2.4 JavaScript Dialog Boxes ............................................................................................................. 11
2.4.1 JavaScript Alert Box ........................................................................................................... 11
2.4.2 JavaScript Confirmation Dialog Box .................................................................................. 11
2.4.3 JavaScript Prompt Dialog Box ............................................................................................ 12
2.5 JavaScript If…Else ..................................................................................................................... 13

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 2 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise

I. Introduction

1.1 Definition
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for
enhancing the interaction of a user with the webpage. In other words, you can make your webpage
more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game
development and Mobile application development.

1.2 Differences Between JavaScript and Java

There are many programmers who think that JavaScript and Java are the same. In fact, JavaScript
and Java are very much unrelated. Java is a very complex programming language whereas
JavaScript is only a scripting language. The syntax of JavaScript is mostly influenced by the
programming language C. Below are some differences between the two:

JAVA JAVASCRIPT

Java is strongly typed language and variable must JavaScript is weakly typed language and have
be declare first to use in program. In Java the type more relaxed syntax and rules.
of a variable is checked at compile-time.
Java is an object oriented programming language. JavaScript is an object based scripting language.

Java applications can run in any virtual JavaScript code run on browser only as JavaScript
machine(JVM) or browser. is developed for browser only.

Objects of Java are class based even we can’t

JavaScript Objects are prototype based.
make any program in java without creating a class.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 3 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise
Java program has file extension “.Java” and JavaScript file has file extension “.js” and it is
translates source code into bytecodes which is interpreted but not compiled,every browser has the
executed by JVM(Java Virtual Machine). Javascript interpreter to execute JS code.

contained within a web page and integrates with

Java is a Standalone language.
its HTML content.

JavaScript requires less memory therefore it is

Java program uses more memory.
used in web pages.

Javascript has event based approach to

Java has a thread based approach to concurrency.
concurrency.

JavaScript requires less memory therefore it is

Java program uses more memory.
used in web pages.

Javascript has event based approach to

Java has a thread based approach to concurrency.
concurrency.

Java is strongly typed language and variable must JavaScript is weakly typed language and have
be declare first to use in program.In Java the type more relaxed syntax and rules.
of a variable is checked at compile-time.
Java is an object oriented programming language. JavaScript is an object based scripting language.

1.3 Advantages of JavaScript

Javascript is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning Javascript:
• Javascript is the most popular programming language in the world and that makes it a
programmer’s great choice. Once you learnt Javascript, it helps you developing great front-end as
well as back-end softwares using different Javascript based frameworks like jQuery, Node.JS etc.
• Javascript is everywhere, it comes installed on every modern web browser and so to learn
Javascript you really do not need any special environment setup. For example Chrome, Mozilla
Firefox , Safari and every browser you know as of today, supports Javascript.
• Javascript helps you create really beautiful and crazy fast websites. You can develop your website
with a console like look and feel and give your users the best Graphical User Experience.
• JavaScript usage has now extended to mobile app development, desktop app development, and
game development. This opens many opportunities for you as Javascript Programmer.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 4 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise
• Due to high demand, there is tons of job growth and high pay for those who know JavaScript. You
can navigate over to different job sites to see what having JavaScript skills looks like in the job
market.
• Great thing about Javascript is that you will find tons of frameworks and Libraries already
developed which can be used directly in your software development to reduce your time to market.
There could be 1000s of good reasons to learn Javascript Programming. But one thing for sure, to learn
any programming language, not only Javascript, you just need to code, and code and finally code until
you become expert.

There are many useful Javascript frameworks and libraries available:

Angular Ember.js Aurelia

React Meteor Backbone.js
jQuery Mithril
Vue.js Node.js
Ext.js Polymer

It is really impossible to give a complete list of all the available JavaScript frameworks and libraries. The
Javascript world is just too large and too much new is happening.

2 JAVASCRIPT

2.1 JavaScript Syntax

To popup a message on a page using JS, we use the function alert where are to write on the console,
we use the function console. To open the console, use the keyboard combination of CTRL + SHIFT + C
or CTRL + SHIFT + K or go to TOOLS >> WEB DEVELOPER >> WEB CONSOLE (on Mozilla
Firefox).
NOTE:
i) Every statement in JavaScript MUST end with a semi-colon (;)
ii) You can use the console to debug errors in your code and adjust them.
iii) At any point in time, you can display information using console.log(data) or alert(data) or
document.write(data)…document.write() writes the data unto the webpage while alert
popups the data.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 5 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise
Note: type="text/javascript" is not necessary in HTML5. Following code will work.
<html> <html>
<head> <head>
<title>My First JavaScript code!!!</title> <title>My First JavaScript code!!!</title>
<script type="text/javascript"> <script type="text/javascript">
alert("This is HND1 !"); console.write("This is HND 1!");
</script> </script>
</head> </head>
<body> <body>
</body> </body>
</html> </html>

2.1.1 Importing External JavaScript Scripts

Here, you can easily import external scripts into your program and call them easily. Below is an example
of an external script called.
<script src="your_Script.js"></script>
//If the script is in a sub-folder, simply give the path to the folder or URL where it is found.

//Src is the source file which points to the script file.

<script src="/path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

Exercise : Create a Javascript file called one.js which does sets a as 5 and then display the value of a on
an HTML page.
2.1.2 JavaScript Comments
Comments are used to describe part of a block of codes and comments do not affect the execution of the
code. There are two types of comments in JavaScript which are Single line and multi-line comments.

//this is a single line comment

alert(“This is HND1”);

2.2 JavaScript Variables

Variables are used to store values (name = "John") or expressions (sum = x + y). Variable
definition in JavaScript is the same for every programming language and same rules should be respected
when defining variables.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 6 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise
2.2.1 JavaScript Variable Rules
Below are some rules of defining variables:
a) The name must contain only letters, digits, or the symbols $ and _.
b) The first character must not be a digit.
c) There MUST not be spaces between a variable letters.
Example: Valid variable is myNumber, my_number,my2number.
Examplees of an invalid variable is: my number, 1my_number, #myNumber etc…
JavaScript is very case sensitive. Variables named apple and AppLE are two different variables.

2.2.2 JavaScript Reserved Words

Just like any other programming language, JavaScript has some words which cannot be used as variable
names. These words are reserved words by JavaScript and cannot be used.

abstract else instanceof super abstract else instanceof super abstract else

boolean enum int switch boolean enum int switch boolean enum

break export interface synchronized break export interface synchronized break export

byte extends let this byte extends let this byte extends

case false long throw class false long throw case false

catch final native throws catch final native throws catch final

2.3 JavaScript Operators

Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called
the operator. JavaScript supports the following types of operators.
• Assignment Operators
• Arithmetic Operators
• Comparison Operators
• Logical (or Relational) Operators
• Conditional (or ternary) Operators
• Bitwise Operators

Lets have a look on all operators one by one.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 7 of 13
 Topic: JavaScript (Part 1) By: Nyambi Blaise
2.3.1 Assignment Operator
Let’s note that an assignment = is also an operator. That’s why, when we assign a variable, like x =
2-2, the calculations are done first and then the = is evaluated, storing the result in x.
JavaScript supports the following assignment operators :
= (Simple Assignment )
Assigns values from the right side operand to the left side operand
Ex: C = A + B will assign the value of A + B into C

+= (Add and Assignment)

It adds the right operand to the left operand and assigns the result to the left operand.
Ex: C += A is equivalent to C = C + A

−= (Subtract and Assignment)

It subtracts the right operand from the left operand and assigns the result to the left operand.
Ex: C -= A is equivalent to C = C - A

*= (Multiply and Assignment)

It multiplies the right operand with the left operand and assigns the result to the left operand.
Ex: C *= A is equivalent to C = C * A

/= (Divide and Assignment)

It divides the left operand with the right operand and assigns the result to the left operand.
Ex: C /= A is equivalent to C = C / A

%= (Modules and Assignment)

It takes modulus using two operands and assigns the result to the left operand.
Ex: C %= A is equivalent to C = C % A

String Assignment
It is used to assign a string to variable on the left hand.
Ex: name ='john' or sex="boy". You can use 'data' or "data", both will work.
To join(concatenate) a string with another variable of string, we use the +.
Example: alert(name+' is a '+sex+' years old');
Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 8 of 13
 Topic: JavaScript (Part 1) By: Nyambi Blaise

2.3.2 Variable Assignment Examples

<script>
message = 'hello ';
message2 = "HND ";
level = 1;
name = "Paul Richards";
age = 20;
phone = 678237923;
console.log(name+" is "+age+" years old and his phone number is "+phone);
document.write(name+" is "+age+" years old and his phone number is "+phone);
alert(name+" is "+age+" years old and his phone number is "+phone);
</script>

In the example above, we have defined variables of type integers and strings and displayed
them using the various ways through which data can be displayed in JavaScript. We also concatenated a
string with other data.
You can decide how you would want to display your data in your environment testing when working on
your practical but you should understand how the console, alert and document.write work and when you
need to use any of them.
2.3.3 Arithmetic Operators
JavaScript supports the following arithmetic operators:
➢ Addition (+), adds 2 or more values or concatenates a string to another value or variable
➢ substraction(-), subtracts a value from another value
➢ multiplication(*), multiplies 2 or more valus
➢ division(/), divides the numerator by the denominator
➢ modulus(%), returns the output of an integer division
➢ increment(++), increments a value by 1
➢ decrement(--), decrements a value by 1
Exercise: Use JavaScript to demonstrate each of the arithmetic operations seen above.
2.3.4 Comparison Operators
These operators are used to compare 2 or more values. They are used mostly with the if condition or as
Booleans which returns either true if the condition is true or false if the condition is false. There are 6
main comparison operators: lets assume a=50 and b=42
➢ Equal (==), Checks if the value of two operands are equal or not, if yes, then the condition
becomes true. (a==b) is not true

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 9 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise
➢ Not Equal (!=), Checks if the value of two operands are equal or not, if the values are not equal,
then the condition becomes true. (a!=b) is true
➢ Greater than (>), Checks if the value of the left operand is greater than the value of the right
operand, if yes, then the condition becomes true. (a>b) is true
➢ Less than (<), Checks if the value of the left operand is less than the value of the right operand, if
yes, then the condition becomes true. (a<b) is not true
➢ Greater than or equal to (>=),Checks if the value of the left operand is greater than or equal to the
value of the right operand, if yes, then the condition becomes true. (a<=b) is not true
➢ Less than or equal to (<=), Checks if the value of the left operand is less than or equal to the value
of the right operand, if yes, then the condition becomes true. (a <=b) is not true
2.3.5 Logical Operators
The logical operator uses logic operators such as AND, OR or NOT. Assuming A=5, B=9 , their usages
and definitions can be seen below
➢ && (Logical AND)
If both the operands are non-zero, then the condition becomes true.
Ex: (A && B) is true… if (A<5 && B>10)…
➢ || (Logical OR)
If any of the two operands are non-zero, then the condition becomes true.
Ex: (A || B) is true. if (A<5 || B>10)…
➢ ! (Logical NOT)
Reverses the logical state of its operand. If a condition is true, then the Logical NOT
operator will make it false.
Ex: ! (A && B) is false. if (A!=5 && B!=10)…
Exercise: using logical operators, write a code to verify the values of 3 variables a,b and c given. It should
verify for the 3 logical operators.

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 10 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise

2.4 JavaScript Dialog Boxes

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise
and alert, or to get confirmation on any input or to have a kind of input from the users.
2.4.1 JavaScript Alert Box
An alert dialog box is mostly used to give a warning message to the users. For example, if one input
field requires to enter some text but the user does not provide any input, then as a part of validation, you
can use an alert box to give a warning
message.
<script>
function ClickMe() {
alert ("This is an alert message!");
}
alert(“This is HND1”); </script>
<a href="" onclick="ClickMe()">Click Now</a>

2.4.2 JavaScript Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog
box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the
Cancel button, then confirm() returns false.

<script>
function confirmToClose() {
confirm("Sur To Close?!");
confirm("Sur To Close?"); }
</script>
<a href="" onclick="confirmToClose()">Close
Window</a>

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 11 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise

<script>
function confirmToClose() {
var check = confirm("Sur To Close?!");
if(check==true)
{
alert("Bye Bye");
return true;
} else {
alert("You cancelled");
return false;
}
}
</script>
<a href="" onclick="confirmToClose()">Close Window</a>

2.4.3 JavaScript Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus,
it enables you to interact with the user. The user needs to fill in the field and then click OK.
This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label
which you want to display in the text box and (ii) a default string to display in the text box.

This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method
prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window
method prompt() returns null.

<script>
function askQuestion() {
prompt("Enter Your Name?"); var name = prompt("Enter Your Name");
alert("Welcome "+name);
}
</script>
<a href="" onclick="askQuestion()">Go</a>

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 12 of 13

 Topic: JavaScript (Part 1) By: Nyambi Blaise

2.5 JavaScript If…Else

Web Programming 1 - JAVASCRIPT (Part 1) – Mr. Nyambi Blaise (679194380) Page 13 of 13