A

TECHNICAL REPORT

OF

STUDENT INDUSTRIALWORK EXPERIENCESCHEME (SIWES)

HELD AT

ACCESS COMPUTER LIMITED

WRITTEN BY:

EDEH WISDOM CHINEMEREM

MATRIC NO: 2020030192843

SUBMITTED TO:

DEPARTMENT OF COMPUTER ENGINEERING,

FACULTY OF ENGINEERING,

ENUGU STATE UNIVERSITY OF SCIENCE AND TECHNOLOGY ,

ENUGU.

IN PARTIAL FULFILMENT FOR THE AWARD OF BACHALOR

OF

ENGINEERING

SEPT 2024.
 DECLARATION

I, EDEH WISDOM CHINEMEREM with matriculation number 2020030192843

hereby declare that I undergo six full months of Industrial Training Programme at
Access computer limited Enugu, Enugu State and that this report is written by me
to the best of the practical knowledge I gained during the course of the training
programme.

---------------------------------------- ----------------------------------------
Student Name/Matric Number Sign.

ii
 DEDICATION

This SIWES report is dedication to Almighty GOD.

iii
 ACKNOWLEDGEMENT

My appreciation first goes to Almighty GOD, the creator of Heaven and Earth for
granting me the grace and privilege to be able to complete this SIWES program
successfully and on schedule and I will appreciate the organization for giving me a
good experience that makes me to be very good in web development.

iv
 CONTENTS

TITLE PAGE
DECLARATION
DEDICATION
ACKNOWLEDGEMENT

CHAPTER 1: ABOUT US
CHAPTER 2:
2.1 Access computer limited
2.2 Core Services at Access computer limited
2.3 Company’s Organization Structure

CHAPTER 3: BASICS OF FRONT-END WEB DESIGN

CHAPTER 4: HTML
4.1 Identifying the parts that make up an HTML tag
4.2 Determining when to use specific HTML tags
4.3 Correctly structuring nested HTML content
CHAPTER 5: CSS
5.1 Introduction about CSS
5.2 Identifying the benefit of separating style from content
5.3 Using CSS to style a website
5.4 Structure of CSS
5.5 Targeting things in CSS
5.6 Some basic properties of CSS
CHAPTER 6: JAVASCRIPT
6.1 Introduction to JavaScript
6.2 JavaScript Language Basics
6.3 JavaScript Loops, Condition
6.4 JavaScript Objects
6.5 Basics of ES6
6.6 JavaScript DOM

v
CONCLUSION

RECOMMENDATION
REFERENCES

vi
 CHAPTER 1: ABOUT US

The Students Industrial Work Experience Scheme (SIWES) is a unit under the Vice-Chancellor’s
Office. It was established in 2016. The Students Industrial Work Experience Scheme (SIWES)
is a skills training programme designed to expose and prepare students of universities and other
tertiary institutions for the Industrial Work situation they are likely to meet after graduation.
The Students Industrial Work Experience Scheme (SIWES) is the accepted training programme,
which is part of the approved Minimum Academic Standard in the various degree programmes
for all Nigerian Universities. The scheme is aimed at bridging the existing gap between theory
and practice of Sciences, Agriculture, Medical Sciences (including Nursing), Engineering and
Technology, Management, Information and Communication Technology, and other professional
educational programmes in the Nigerian tertiary institutions. It is aimed at exposing students to
machines and equipment, professional work methods, and ways of safeguarding the work areas
and workers in industries, offices, laboratories, hospitals, and other organizations.
It is a cooperative industrial internship program that involves institutions of higher learning,
industries, the Federal Government of Nigeria, the Industrial Training Fund (ITF), and the
Nigerian Universities Commission (NUC).

VISION AND MISSION OF MTU SIWES UNIT

To equip students with the necessary practical knowledge and technical skills for self-
employment and effective involvement in Nigeria's industrial growth.

HISTORY OF SIWES
SIWES was founded in 1973 by ITF (Industrial Training Funds) to address the problem of
tertiary institution graduates' lack of appropriate skills for employment in Nigerian industries.
The Students' Industrial Work Experience Scheme (SIWES) was founded to be a skill training
programme to help expose and prepare students of universities, Polytechnics and colleges of
education for the industrial work situation to be met after graduation.
This system facilitates the transfer from the classroom to the workplace and aids in the
application of knowledge. The program allows students to become acquainted with and exposed
to the experience required in handling and operating equipment and machinery that are typically
not available at their schools.
Prior to the establishment of this scheme, there was a rising concern and trend among
industrialists that graduates from higher education institutions lacked appropriate practical
experience for employment. Students who entered Nigerian universities to study science and
technology were not previously trained in the practical aspects of their chosen fields. As a result
of their lack of work experience, they had difficulty finding work.
As a result, employers believed that theoretical education in higher education was unresponsive
to the needs of labor employers. Thousands of Nigerians faced this difficulty till 1973. The

2
fund's main motivation for establishing and designing the scheme in 1973/74 was launched
against this context.
The ITF (Industrial Training Fund) organization decided to aid all interested Nigerian students
and created the SIWES program. The federal government officially approved and presented it in
1974. During its early years, the scheme was entirely supported by the ITF, but as the financial
commitment became too much for the fund, it withdrew in 1978. The National Universities
Commission (NUC) and the National Board for Technical Education (NBTE) were given control
of the scheme by the federal government in 1979. The federal government handed over
supervision and implementation of the scheme to ITF in November 1984. It was taken over by
the Industrial Training Fund (ITF) in July 1985, with the federal government bearing entire
responsibility for funding.

OBJECTIVES OF SIWES
The Industrial Training Fund’s Policy Document No. 1 of 1973 which established SIWES
outlined the objectives of the scheme as:
Provide an avenue for students in Institutions of higher learning to acquire industrial skills and
experience in their respective courses of study.
Prepare students for the Industrial Work situation they are likely to experience after graduation.
Expose students to work methods and techniques of handling equipment and machinery that may
not be available in their Institutions.
Make the transition from school to the world of work easier; and enhance students’ networks for
later job placements.
Provide students with an opportunity to apply their knowledge to real work situations, thereby
bridging the gap between theory and practice; and
Enlist and strengthen Employers’ involvement in the entire educational process; thereby
preparing the students for employment in Industry and Commerce.

FUNCTIONS/ ACTIVITIES OF MTU SIWES CENTRE

Develop, implement, and regularly review guidelines for SIWES.
Registration of eligible students for Industrial Training (IT).
Compilation of list of students from different Colleges for SIWES.
Timely collection, completion, and submission of all ITF forms/ documents (master list,
placement list, direct e-payment form, ITF form 8) to the supervising ITF office.
Identify placement opportunities for students and assist in the placement of students on
attachment with employers.
Issue introductory letters to students for the employers.
Organize orientation programmes for all students going for IT in collaboration with ITF
Ensure that students have all required documents for successful placement and completion of IT
training before embarking on SIWES.

3
 1. Ensure the master placement list is timely prepared and submitted to the Industrial Training
Fund and National Universities Commission yearly (not later than 3 months before the
commencement of Industrial Attachment).
2. Organize and coordinate supervisory visits to students at I. T. sites.
3. Ensure students' SIWES logbooks are examined, vetted, and signed by University
Supervisors, Industry-based Supervisors, and ITF staff.
4. Effectively follow up ITF on all payments to students and the University.
5. Capture student's bank details at the point of registration for SIWES.
6. Develop and sustain the right attitude and mindset among supervisors thus motivating them
to effectively play their supervisory role to the maximum benefit of students during SIWES.
7. Prepare and submit reports on the scheme to the ITF after the programme.
8. Resolve problems arising from Industrial Training during and after the training.
9. Develop and track relevant data on students' SIWES to facilitate the development of a
SIWES database for the University.
10. Ensure accreditation of MTU SIWES Center by NUC.
11. Work with relevant Colleges/ Departments to ensure accreditation of courses for approved
SIWES programme.
12. Liaise and build a good relationship between the University and relevant organizations
(NUC, ITF, Industries, etc.).

DURATION OF ATTACHMENT FOR SIWES FUNDING

One requirement for the Bachelor of Engineering or Science award is that students must
complete at least 24 weeks of Industrial Training.
In most institutions, SIWES is done at the end of the 2nd-semester examination of either 300,
400, or 500 levels. The time and duration are to be worked out jointly by each university,
department, the SIWES unit, and the ITF.

4
 CHAPTER 2

GENERAL OVER VIEW OF THE ORGANIZATION OF ATTACHMENT

2.1 About Access computer limited

Access computer limited is a premium design agency that focuses on quality,

innovation, & speed. We utilized technology to bring results to grow our clients
businesses. We pride ourselves in great work ethic, integrity, and end-results.
Throughout the years Access computer limited has been able to create stunning,
designs in multiple verticals while allowing our clients to obtain an overall better
web presence.
Our company strives for corporate integrity, honesty, and servant leadership. Our
team members all strive to be servant-leaders in the work force doesn’t just focus
on great websites; we personally serve every single customer welcomed in contact
with. It does not matter if it is a corporate conference over the phone or causal
meeting at Star bucks we are here and in business for you. Because of that we
believe personal attention to every customer isn’t just good business it is a
judgment of character as well. Access computer limited is making largest rides in
the web development and design industry. Access computer limited has desires to
provide affordable, high-quality website to individuals and companies. Access
computer limited prides itself with user-friendly & professional websites that are
valuable to any audience that visits.
2.1.1 Core Services at Access computer limited

 Web Design
 Web Development

5
  Web Hosting
 Domain Name Registration
SEO


 CMS
2.2 DESCRIPTION OF THE UNIT
WEB DESIGN DEPARTMENT
This department was where my SIWES took place where I was grounded and
expose to the website world especially the creation of websites taking me step by
step with practical all through the process.

2.2 Company’s Organization Structure

Lead developer

Back-end developer UI/UX design

CSC/2017/0056 | Adebayo
Suleiman Oladimeji
CHAPTER 3

6
ACTIVITIES CARRIED
OUT DURING THE
COURSE OF THE
SIWES
PROGRAMME
3.0 WEB
DEVELOPMENT
Web development is
the work involved in
developing a web site
for the Internet (World
Wide

7
Web) or an intranet (a
private network). Web
development can range
from developing a
simple
single static page of
plain text to complex
web-based internet
applications (web
apps), electronic
businesses, and social
network services.
Web development
usually refers to the
8
main non-design
aspects of building
web sites:
writing mark-up and
coding. Web
development may use
content management
systems (CMS)
to make content
changes easier and
available with basic
technical skills.
3.1 DEFINITION OF
TERMS
9
The following are terms
that were made use of,
in this department
WEBSITE:
A website is a set of
related webpages
containing content
such as texts, images,
videos, audios,
etc. A website is hosted
on at least one web
server, accessible via a
network such as the
internet
10
or a private LAN
through an internet
address known as a
URL (Universal
Resource Locator).
A publicly accessible
websites collectively
constitutes the World
Wide Web (WWW).
WEBPAGE:
A webpage is a
document, typically
written in plain text

11
interspersed with
formatting
instructions of
hypertext nark up
language (HTML,
XHTML). A webpage
may incorporate
elements from other
websites with suitable
anchors. Webpages are
accessed and
transported
with the hypertext
transfer protocol
12
(HTTP), which may
occasionally employ
encryption
(HTTP secure, HTTPS)
to provide security and
privacy for the use of
the webpage content.
The user’s application
often a web browser
renders the page
content according to its
HTML
mark-up instructions
into a display terminal.
13
HTTP:
This stands for Hyper
Text Transfer Protocol
which is the set of rules
for transferring files
(text, graphic, images,
sound, video, and other
multimedia files) on the
Worl
CSC/2017/0056 | Adebayo
Suleiman Oladimeji
CHAPTER 3
ACTIVITIES CARRIED
OUT DURING THE
14
COURSE OF THE
SIWES
PROGRAMME
3.0 WEB
DEVELOPMENT
Web development is
the work involved in
developing a web site
for the Internet (World
Wide
Web) or an intranet (a
private network). Web
development can range
15
from developing a
simple
single static page of
plain text to complex
web-based internet
applications (web
apps), electronic
businesses, and social
network services.
Web development
usually refers to the
main non-design
aspects of building
web sites:
16
writing mark-up and
coding. Web
development may use
content management
systems (CMS)
to make content
changes easier and
available with basic
technical skills.
3.1 DEFINITION OF
TERMS
The following are terms
that were made use of,
in this department
17
WEBSITE:
A website is a set of
related webpages
containing content
such as texts, images,
videos, audios,
etc. A website is hosted
on at least one web
server, accessible via a
network such as the
internet
or a private LAN
through an internet
address known as a
18
URL (Universal
Resource Locator).
A publicly accessible
websites collectively
constitutes the World
Wide Web (WWW).
WEBPAGE:
A webpage is a
document, typically
written in plain text
interspersed with
formatting
instructions of
hypertext nark up
19
language (HTML,
XHTML). A webpage
may incorporate
elements from other
websites with suitable
anchors. Webpages are
accessed and
transported
with the hypertext
transfer protocol
(HTTP), which may
occasionally employ
encryption

20
(HTTP secure, HTTPS)
to provide security and
privacy for the use of
the webpage content.
The user’s application
often a web browser
renders the page
content according to its
HTML
mark-up instructions
into a display terminal.
HTTP:
This stands for Hyper
Text Transfer Protocol
21
 which is the set of rules
for transferring files
(text, graphic, images,
sound, video, and other
multimedia files)

Data base manager Graphic designer

Coder Font-end developer

CHAPTER 3: BASICS OF FRONT-END WEB DESIGN

Front-End is the client-side graphical user interface of the website that provides a way for the
user to interact with the website. Front-End is what the users usually see when they open a
website.

Front-End Development is the development of the graphical user interface of a website, through
the use of HTML, CSS and JavaScript, so that users can view and interact with that website.

22
Front-End Developer is responsible for creating the user interface of a website. A front-end
developer defines how a web page will look to the end user.

Tools used in Front-End Development

• HTML: HyperText Markup Language (HTML) is the foundation of any website
development process, without which a web page would not exist. Hypertext refers to text
that contains links, also known as hyperlinks. A user will be taken to another web page
when they click on a word or phrase with a hyperlink. Using a markup language, text can
be represented as graphics, tables, links and other things. The overall structure of the
website is provided by the HTML code.
• CSS: Cascading Styles Sheets (CSS) manages the site’s display, enables you to give your
site a distinctly individual design. It accomplishes this by storing style sheets that are
triggered by other inputs, such as the screen size and resolution of the device, and sit on
top of existing style rules. CSS can be added externally, internally, or as an HTML tag
embedding.
• JavaScript: JavaScript is an event-based imperative programming language (as opposed
to HTML’s declarative language model) which is used to convert a static HTML page
into a dynamic interface. The Document Object Model (DOM), included in the HTML
standard, can be used by JavaScript code to modify a webpage in response to events like
user input. JavaScript code may actively retrieve content from the web using the AJAX
technique (in addition to the traditional HTML page retrieval), and it can also respond to
server-side events, giving web pages a truly dynamic feel.

CHAPTER 4: HTML

HyperText Markup Language (HTML) is the standard markup language for documents that are
designed to be displayed in a web browser. Technologies like Cascading Style Sheets (CSS) and
scripting languages like JavaScript can be integrated with HTML to design a powerful web
interface.

HTML elements form the foundation of HTML pages. By indicating structural semantics for text
elements like headings, paragraphs, lists, links, quotations and other objects, HTML offers a way

23
to generate structured texts. Tags, which are written in angle brackets, are used to distinguish
HTML elements.

4.1 Identifying the parts that make up an HTML tag

An HTML tag consists of three main parts:
• Opening tag
• Content
• Closing tag
Web browser typically read the HTML document from top to bottom and left to right. HTML
tags are used for the initial creation of HTML documents and to assign their properties/attributes.

An HTML file must have some essential tags the HTML file can be distinguished from the
simple text file by the web browser. There is no upper limit on the number of tags that can be
used in an HTML file.

All HTML tags must be enclosed within < > these brackets.

With a few exceptions, if open tag <tag> is used, then its corresponding close tag must also be
used </tag>.

Syntax of an HTML tag:

<tagname>Content</tagname>

Structure of an HTML webpage: The basic structure of a typical HTML page is shown below.
It contains some essential tags that form the foundation of every single HTML page.

Figure 4.1: Structure of an HTML webpage

<!DOCTYPE HTML>: Every HTML document should start with this line. It indicates to the
browser that the document is a modern HTML webpage.

24
<html>: This tag indicates the start and end of the HTML document. Everything in the webpage
goes inside this tag.

<head>: This tag is a container for the metadata and is placed between the <html> tag and the
<body> tag. Metadata is data about the HTML document which is not displayed on the screen. It
typically defines the document title, character set, styles, scripts and other meta information. It
controls and defines the HTML document.

<meta>: This tag tells the browser about the kind of characters that are used in the document.
utf8 is most commonly used as it allows many languages in the world.

<title>: This tag defines the title of the webpage that is shown in the title bar of the web browser.
This title is also shown in search results as the link.

<body>: This tag defines the body of the HTML document. This includes the content that is
actually rendered on the screen in a website.

4.2 Determining when to use specific HTML tags

HTML tags should be used according to their specific functions when required as per the
requirement of the webpage.

The following are the different categories of HTML tags:

• Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--…--> Defines a comment

25
 Table 4.1: Basic HTML tags [4]

• Formatting
Tag Description
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<b> Defines bold text
Isolates a part of text that might be formatted in a different direction from other
<bdi>
text outside it
<bdo> Overrides the current text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Specifies a term that is going to be defined within the content
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<template> Defines a container for content that should be hidden when the page loads
<time> Defines a specific time (or datetime)

26
<u> Defines some text that is unarticulated and styled differently from normal text
<var> Defines a variable
<wbr> Defines a possible line-break
Table 4.2: Formatting tags [4]

• Forms and Input

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
Table 4.3: Forms and Input tags [4]

• Images
Tag Description
<img> Defines an image
<map> Defines a client-side image map
<area> Defines an area inside an image map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
<svg> Defines a container for SVG graphics
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
Table 4.4: Images tags [4]

27
 • Links
Tag Description
<a> Defines a hyperlink
Defines the relationship between a document and an external resource (most used to
<link>
link to style sheets)
<nav> Defines navigation links
Table 4.5: Links tags [4]

• Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Table 4.6: Lists tags [4]
• Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
Table 4.7: Tables tags [4]

28
4.3 Correctly structuring nested HTML content
The main rule to follow when using nested HTML content is: The tag opened most recently is
always the following tag to close. Improper HTML Tag nesting will cause a visual design page
break due to the browser’s incapability to render (read) tags that are out of place. Other errors
may occur. Other than to avoid visual webpage errors, HTML nesting is used for CSS
(Cascading Style Sheets). When tags are nested, CSS relies on the HTML attributes classes and
id to identify where to apply the style, marked by the opening tag and by the closing tag.

CHAPTER 5: CSS

5.1 Introduction about CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. A style sheet language is a computer
language that expresses the presentation of structured documents.

5.2 Identifying the benefit of separating style from content

The purpose of CSS is to make it possible to separate content from presentation, including
layout, colours, and fonts. This separation can improve content accessibility; provide more

29
flexibility and control in the specification of presentation characteristics; enable multiple web
pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces
complexity and repetition in the structural content; and enable the .css file to be cached to
improve page load speed between the pages that share the file and its formatting.

The ability to offer the same HTML page in several styles for various rendering techniques,
including on-screen, in print, by voice (using a speech-based browser or screen reader), and on
Braille-based tactile devices, is also made possible by the separation of formatting and content. If
a user accesses the material on a mobile device, CSS additionally provides rules for different
formatting.

5.3 Using CSS to style a website

To use CSS to style a website, we first need to create a new file and save it with the
extension .css. Moreover, it’s generally preferred to put the CSS file into a css folder for better
organization.

After creating and saving the CSS file, we just need to link the CSS and HTML files together so
that the browser can locate the CSS file.

To link the HTML file and the CSS file, add a link tag in the head of the HTML document:

Figure 5.1: Linking HTML and CSS file using link tag
The link element is used to link many types of documents, notably CSS but also blog feeds, help
documents, licenses, etc., to an HTML file

href: The CSS file’s location is indicated by the href attribute. The CSS file’s path must lead to
the appropriate folder. rel: The item’s status as a stylesheet is indicated by the rel attribute.

30
5.4 Structure of CSS

Figure 5.2: Structure of CSS

Despite having extremely basic components, CSS allows for sophisticated designs.
1. rule set: a collection of CSS designs for a specific set of elements
2. declaration: a single CSS line that adds a design
3. selector: the target item on which the design property is to be applied
4. property: the type of design to be added
5. value: instructions/values for changing the design property

5.5 Targeting things in CSS

To apply style to an element in CSS, first the element must be targeted by using selector. The
following are the different types of selectors:

1. Tag: Selects all the tags of the same type. Example:

html {}
h1 {} p {}

2. Class (.): Select an element with the matching class. Example:

.nav {}
.contact {}
.masthead {}
3. ID (#): Select an element with the matching ID. Example:
#profile {}
#nav {}
#social {}

4. Space (Descendant): Select an element that’s a descendant of another element. Example:

ul li {} nav a {}

31
 5. Child (>): Select an element directly inside another element. Example:
ul > li {} h1 > span {}
footer > .social {}

6. Adjacent sibling (+): Select an element directly beside another element. Example:
h1 + p {} hr + p
{} li + li {}

7. General sibling (~): Select an element that’s at the same level. Example:
p ~ p {} h1 ~ p
{} dd ~ dt {}

8. Attribute ([]): Select an element by its attribute. Mostly used for styling external links
differently. Example:
[data-state=“active”] {}
[href^= “http”] {}
[download] {}

5.6 Some basic properties of CSS

• color
• background-color
• background-image
• display (inline, block, inline-block, flexbox)
• height
• width
• margin
• padding
• border
• border-color
• border-width
• border-style
• border-radius
• font
• font-family
• font-style
• font-weight
• position (absolute, relative, fixed)
• z-index
• float
• clear

32
 • overflow
• text-align
• box-sizing
• grid
• word-wrap
• word-spacing

CHAPTER 6: JAVASCRIPT

6.1 Introduction to JavaScript

JavaScript (JS) is a programming language that allows the development of dynamic web pages
by utilizing dynamic client-side scripting. JavaScript is a programming language that enables the
implementation of complex functions on web pages. It integrates features like providing

33
interactive content, animated 2D/3D graphics, displaying timely content updates and more with a
web page.

JavaScript forms the foundation of front-end web development and the backbone of the World
Wide Web alongside HTML and CSS. As of 2022, approximately 98% of websites utilize
JavaScript on the client side for webpage behavior, frequently integrating third-party libraries. A
dedicated JavaScript engine is available in every major web browser and is used to run the code
on users’ devices.

6.2 JavaScript Language Basics

The block of JavaScript code is generally executed in order, from top to bottom. Through the
Document Object Model (DOM) API, JavaScript is frequently used to dynamically edit HTML
and CSS to update a user experience. Web documents’ code typically loads and runs in the order
it appears on the page. If JavaScript is loaded and run before the HTML and CSS that it is meant
to modify, errors could occur.

JavaScript is a lightweight interpreted programming language that can add interactivity to a

website. The JavaScript code is sent to the web browser in text for, where it is then executed.
Technically speaking, the majority of contemporary JavaScript interpreters actually employ a
process called “just-in-time compiling” to enhance performance. This method converts
JavaScript source code into a quicker, binary format while the script is being used, allowing it to
run as quickly as possible. Since the compilation is handled during executed rather than
beforehand, JavaScript is still regarded as an interpreted language.

Adding JavaScript to a webpage: Similar to how CSS is applied to an HTML page, JavaScript
utilizes the same method. While CSS employs <link> elements to apply external stylesheets and
<style> elements to apply internal stylesheets, JavaScript uses the <script> element.

This can be done using the following ways:

• Internal JavaScript: In this method, the JavaScript code is included internally within the
HTML document itself. This code is written within the <script> tag which is enclosed by
the <head> tag.

Example:
<head>
<script>
// JavaScript goes here
</script>
</head>

34
 • External JavaScript: In this method, the JavaScript code is stored in a separate .js file
which is then linked to the HTML document using the <script> tag within the <head> tag.
Example:
<script src="script.js" defer></script>

Variables: They are the containers that store values. Declaration of a variable is done with the
let keyword, followed by the name assigned to the variable. Example:
let myVariable;

After declaring a variable, it can be assigned a value like this:

myVariable = “Manvendra”;

Declaration and assignment can also be done on the same line like this:
let myVariable = “Manvendra”;

Data Types: JavaScript supports the following data types:

Variable Explanation Example
This is a sequence of text known as a
string. To signify that the value is a
String let myVariable = 'Manvendra';
string, enclose it in single quote
marks.
This is a number. Numbers don't
Number let myVariable = 10;
have quotes around them.
This is a True/False value. The
words true and false are special
Boolean let myVariable = true;
keywords that don't need quote
marks.
This is a structure that allows you to
Array store multiple values in a single let myVariable = [1,'Manvendra','Singh',10];
reference.
This can be anything. Everything in
let myVariable =
Object JavaScript is an object and can be
document.querySelector('h1');
stored in a variable.
Table 6.1: Data Types in JavaScript

Operators: An operator is a mathematical symbol that produces a result based on two values or
variables. Some of the most common operators are shown below:
• Addition (+)

35
 • Subtraction (-)
• Multiplication (*)
• Division (/)
• Assignment (=)
• Strict equality (===)
• Not (!)
• Does-not-equal (!==)

Functions: Functions in JavaScript is a block of code designed to perform a particular task. A

JavaScript function is executed when something invokes it.

Syntax of a JavaScript function

• The function keyword is used to define a JavaScript function, which is then followed by
the function’s name and parenthesis ().
• Function names may also include underscores, dollar signs, and other characters (same
rules as variables).
• Names of parameters may be included in parenthesis and separated by commas.
• Curly brackets enclose the code that the function will execute
• The function definition lists the function parameters between parentheses ().
function name(parameter1, parameter2, parameter3,…)
{
// code to be executed
}
• The function definition lists the function parameters between parentheses ().
• When a function is called, values are passed to it as arguments.
• The arguments behave as local variables within the function.
Calling a function: Making use of a function requires calling it after it has been defined. A
function can be called by separating the function name from the argument values in parenthesis,
followed by a semicolon.
The JavaScript function calling syntax is demonstrated below.
function name(value1, value2, value3,…);

6.3 JavaScript Loops, Condition

Loops: Loops allow the execution of the same code over and over again. Every time the loop is
repeated, the code is frequently somewhat changed, or it runs with different variables. JavaScript
supports the following looping statements:
• for loop
• for/in loop

36
 • for/of loop
• while loop
• do/while loop
Conditionals: Conditional statements allow the process of decision making in JavaScript code. It
allows the execution of different actions for different decisions.
JavaScript supports the following conditional statements:
• if statement
• else statement
• else if statement
• switch statement

6.4 JavaScript Objects

As JavaScript is an Object-Oriented Programming Language, almost everything is an object in
JavaScript. All JavaScript values, except primitives, are objects. A primitive value is a value that
has no properties or methods.

Object Definition: JavaScript object can be defined and created with an object literal:
Example:
const person = {firstName: “Manvendra”, lastName: “Singh”, age: 25, branch:
“CS”};

Object Properties: The named values, in JavaScript objects, are called properties.
Example:
Property Value
firstName Manvendra
lastName Singh
age 25
branch CS
Table 6.2: Object Properties in JavaScript Example

Object Methods: Methods are actions that can be performed on objects. Methods are stored in
properties as function definitions. A method is a function stored as a property.
Property Value
firstName Manvendra
lastName Singh
age 25

37
 branch CS
fullName function() {return this.firstName + “ ” + this.lastName;}
Table 5.3: Object Methods in JavaScript Example

6.5 Basics of ES6

ECMAScript 2015 was the second major revision to JavaScript. It is also known as ES6 or
ECMAScript 6.

The new features in ES6 are:

• The let and const keywords
• Arrow Functions
• The ... Operator
• For/of
• Map Objects
• Set Objects
• Classes
• Promises
• Symbol
• Default Parameters
• Function Rest Parameter
• String.includes()
• String.startsWith()
• String.endsWith()
• Array.from()
• Array keys()
• Array find()
• Array findIndex()
• New Math Methods
• New Number Properties
• New Number Methods
• New Global Methods
• Object entries
• JavaScript Modules
6.6 JavaScript DOM
The objects that make up a web document’s structure and content are represented as data by the
Document Object Model (DOM).

The Document Object Model (DOM) is a programming interface for web documents. It serves as
a representation of the page so that programs can alter the document structure, appearance and
content. Programming languages like JavaScript can communicate with a page by interacting

38
with the nodes and objects that the DOM uses to represent the document. DOM representation
allows a web page to be manipulated. It is a representation of the web page that is object-oriented
and can be changed using a scripting language like JavaScript.

It is called an Object Model because documents are modelled using objects and the model takes
into account not only the structure of a document but also its behaviors and the objects that make
up its constituent parts, such as the HTML tag elements and attributes.

The need for DOM: The web pages are organised using HTML, behaviour is added using
JavaScript. The HTML document cannot be immediately understood by JavaScript when it is
loaded into the browser. Consequently, a related document is produced (DOM). The DOM
essentially represents the same HTML document in a new way by utilising objects. JavaScript
can readily interpret DOM; for example, it can understand object h1 in DOM but not tags
(<h1>H</h1>) in HTML documents. Now, JavaScript can use several functions to access each of
the objects (h1, p, etc.).

Structure of DOM: The structure of DOM can be compared to that of a tree or forest (multiple
trees). The tree-like representation of a document is also referred to as a “structural model”.
There are nodes at the ends of the tree's branches, and each node has objects in it. Nodes have the
option of adding event listeners, which are activated when a specified event occurs. The ability to
generate the same structure model with precisely the same objects and connections using any two
DOM implementations is known as structural isomorphism, and it is a key characteristic of DOM
structure models.

Methods of DOM:
• write(“string”): Writes the given string on the document.
• getElementById(): returns the element having the given id value.
• getElementsByName(): returns all the elements having the given name value.
• getElementsByTagName(): returns all the elements having the given tag name.
• getElementsByClassName(): returns all the elements having the given class name

39
 CONCLUSION
This report has been able to x-ray an account of the entire work – experience garnered by me
during my SIWES program at Access computer limited which is a core scheme in ITF and
which is saddled with the responsibility of strengthening the effective teaching and learning of
skill based course such as Computer Science. I therefore conclude that SIWES is of great
benefit to students in tertiary institutions. It therefore implies that the proper and effective
administration of SIWES will go a long way in boosting and enhancing the competencies of
the workforce of the country. My training here has given me a broader view to the importance
and relevance of Computer Science (web development) in the immediate society an
the world as a whole, as I now look forward to impacting it positively after graduation. I have
also been able to improve my communication and presentation skills and thereby developed
good relationship with my fellow colleagues at work. In summary, the activities that I had
learned during industrial training really are useful for me in future to face challenges in a
working environment.

RECOMMENDATION

40
A comprehensive and detail information on Organizations who accept students for SIWES is
urgently required to facilitate placement of student in industry, as this has caused many
students with interest to learn during this period to use this period for unnecessary purposes.

Government should ensure a proper supervision of SIWES student so that the purpose of the
program will be achieved. Also there should be more funding of the scheme by the government
in order for it to be more effective.
The companies should put in place all the necessary facilities needed to enhance the
knowledge of the student in industrial attachment and experience staff should always be made
to train the students on attachment.

REFERENCES

41
[1] Martin, Sarah. HTML, CSS, and JavaScript. The Definitive Guide to Squarespace, 2014.
[2] Duckett, Jon. Web design with HTML, CSS, JavaScript and jQuery set. Vol. 1. IN:
Wiley, 2014.
[3] Goodman, Danny. Dynamic HTML: The definitive reference: A comprehensive resource
for HTML, CSS, DOM & JavaScript. "O'Reilly Media, Inc.", 2002.
[4] https://www.w3schools.com/tags/ref_byfunc.asp
[5] Duckett, Jon. HTML & CSS: design and build websites. Vol. 15. Indianapolis, IN:
Wiley, 2011

42