ICT – F.
4
2.4 Basics of Programming using
JavaScript
Basic Concepts 2
• A computer program/software is a set of instructions that enables
a particular task to be performed by a computer.
• It is a set of rules, syntax and conventions that allows users to
communicate with the computer’s hardware.
• Computers use such programs to operate and get tasks done.
• These computer programs are developed by computer
professionals called programmers by using programming
languages.
• These programming languages includes JavaScript (JS) which is our
lesson’s focus.
Factors for good programming 3
• A good programming language has the following characteristics:
• Easy to write/program (writability).
• Easy to debug (maintainability).
• Easy to read & understand (readability).
• Compatible with existing hardware & software (compatibility).
• Suitable for solving problems (applicability).
Steps for a writing a program 4
• When writing a program, programmers must be familiar and follow
this process:
• Requirement identification – the programmer must collect the
required data for developing the program. What is the program
going to achieve? Understand the system.
• Program design - Create a high-level design of the program,
including the architecture and overall flow. Define the major
components and how they will interact with each other.
Steps for a writing a program… 5
• Coding – In this step, the programmer writes the actual code to
create the system. The programmer uses a chosen programming
language with its syntax and notation to instruct the computer.
• Debugging – debugging is the process of identifying and fixing
errors in the code.
• Testing – testing is act of checking if the system is operating well
and performing the planned tasks.
• Documentation – documentation refers to the practice of creating
written information, explanations, and guides that accompany a
software project.
Introduction to JavaScript 6
• JavaScript (JS) is a versatile and widely-used programming
language primarily known for its role in web development.
• It is a high-level, interpreted language that allows developers to
add dynamic and interactive features to websites.
• JavaScript is the most-popular and widely-used programming
language in the world.
• JavaScript is a very powerful programming language that offers a
variety of capabilities and features that make it versatile.
Introduction to JavaScript … 7
• What does JavaScript have to offer?
• JS establishes a connection with the client and server request/response.
• JS can modify HTML pages dynamically.
• JS can react to user input.
• JS can validate user input.
• JS can create cookies.
Applications of JavaScript 8
• JavaScript is versatile programming language with wide range of
applications, especially in the context of web development.
• Web Development - JavaScript is primarily used for enhancing the
interactivity and responsiveness of websites.
• Web Apps - JavaScript enables web app development through client-side
interactivity, dynamic content manipulation, and asynchronous server
communication.
• Server-side - JavaScript is used for server-side development with [Link].
• It allows developers to build scalable and efficient server-side applications
using the same language as client-side scripting.
Applications of JavaScript … 9
• Games - JavaScript is increasingly used for game development.
• Libraries like Phaser and [Link] make it possible to create interactive and
visually appealing games directly in the browser.
• Small devices applications – JS is used for developing applications for small
devices such as smartwatches. This is made possible by library called
PebbleJS.
• Web server and APIs – JS can be used to build server-side applications and
Application Programming Interfaces (APIs).
• Arts – Artists and designers can draw on the HTML canvas using JS and
[Link].
• Machine Learning – machine learning applications can be developed using
JS and [Link] libraries.
Advantages of using JS 10
✓ It provides dynamic action
✓ Less server interaction
✓ Visitors get immediate feedback
✓ Increased interactivity
✓ Richer interfaces
✓ Event generation
✓ Simplicity
✓ Popularity
✓ Supports interoperability
Disadvantages of using JS 11
❖ Client-side security
❖ browser support
❖ competitor challenges
Data types and variables in JavaScript 12
• Datatypes: a datatype is set of characters or a keyword used to
represent and define that the program uses to store data.
• In computer programming datatype is an attribute of a dataset that
tells the compiler* how the programmer wants to use the data.
• It is the process of clarifying which kind of data a computer should
store.
• Types of datatypes
• Generally, all programming languages use the concept of datatype, as
the definition of data needs to be identified and explicitly include the
concept of datatype.
Datatypes 13
• Examples of datatypes:
• Integer: these are non-fractional whole numbers. (both +ve & -ve)
• Floating-point: a datatype that stores fraction numbers and decimal
notation values.
• Character: a datatype used to store single characters and symbols.
• String: a datatype used to store a string number of characters
containing text or alphanumeric values.
• Boolean: a datatype used to store TRUE or FALSE values.
Datatypes 14
Variables 15
• In computer programming, a variable is a memory location.
• It an invisible storage location created by the programmer to store
values.
• It is a container for a unique set of data (e.g.: a character or
integer).
Variables 16
Creating variables in JavaScript 17
• Variables can be created by the programmer using various kinds of
data.
• Different types of data can be stored in different values so that the
creation of variables depends on the matter the programmer wants to
keep.
• In JavaScript, the keyword “var” Varchar represents the datatype
format that we use to define integer, character, string, etc.
• NB: The “var” keyword can represent different kinds of datatypes.
JavaScript Syntax 18
• All JavaScript code is placed within <Script>…… </Script> tags.
• On your website code, you can put JavaScript code anywhere you
want, but it usually best to keep it in the <head>………</head> tags.
• The <script> …….. </script> tag instruct the browser to treat
all content between these tags as a script.
• NB: A script is basically a list of instructions that tells a computer
program what to do.
• In the case of websites, JavaScript tells the HTML elements how to
behave.
JavaScript Syntax 19
• Structure of simple JavaScript Code
<script>
JavaScript code goes here
</script>
• NB:
• JavaScript code can be built within the HTML page
• JavaScript can be linked as an external file, saving it with the .js extension.
JavaScript Examples 20
• Follow this process to create a simple HTML page with embedded
JavaScript code:
• Step1: Open a new Notepad (or any text editor).
• Step2: Write a simple HTML page with JavaScript code.
• Step3: Save this file with .html extension and open in a browser.
JavaScript Examples 21
• The term [Link] is JavaScript function that accepts
writing and reading text string in your HML page.
• JavaScript ignores spaces, tabs and newlines in its scripts.
• JavaScript is a case-sensitive. This means all keywords, variables and
function names must be entered with consistent typing. (boy ≠ BOY)
• In JavaScript, the keywords time and TIME have different meanings.
• JavaScript Places
• JavaScript code can be placed anywhere in an HTML document.
However, these the most common places:
• In between <head> …………….. </head> tags
• In between <body. ………………. </body> tags
JavaScript Examples 22
• JavaScript Output Functions
• In JavaScript, there are several functions used for displaying
output.
• [Link] - Writes content directly to the HTML document.
• E.g.: [Link]("Hello, World!");
• [Link] - Used for logging information to the browser's console.
• E.g.: [Link]("This is a log message");
• Alert - Displays a pop-up dialog box with a message to the user.
• E.g.: alert("This is an alert message");
• Prompt - Displays a dialog box prompting the user to input text.
• E.g.: var userInput = prompt("Enter something:");
JavaScript Examples 23
• Example (1): Write a JavaScript code inside HTML and save it with [Link]
name.
<html>
<head> Welcome </head>
<body>
<script>
[Link](“this is how to write JS code inside HTML”);
</script>
</body>
</html>
JavaScript Examples 24
• Example2: Write a JavaScript code that adds two numbers and displays the result
<html>
<head>
<script>
var x = 5;
var y = 6;
var z = x+y;
[Link](z);
</script>
</head>
<body> <p> Programming is fun </p> </body>
</html>
JavaScript Examples 25
• Example3: Create a JavaScript file, save it with [Link] and link it to your html
document by using the src attribute.
<html>
<head> Welcome </head>
<script type="text/javascript" src="[Link]"> </script>
<body>
<p> Have a great day! </p>
</body>
</html>
JavaScript Examples 26
• Example4: Creating a pop-up alert
<html>
<head> Welcome </head>
<body>
<p> Have a great day! </p>
<Scrip>
Alert(“Good Morning!”);
</Script>
</body>
</html>
Exercise 27
1. Write a simple HTML page that has two headings and a paragraph
2. Write a JavaScript code that calculates the difference of two
numbers
3. Explain the difference between a variable and a datatype with
examples.
4. What is the role of JavaScript in web development?
5. What does case-sensitive mean? Give an example.
6. Explain what debugging means.
7. Write a JavaScript code that displays an alert message saying
“Warning!”