CHAPTER ONE

INTRODUCTION

1.1 INTRODUCTION

The Student Industrial Work Experience Scheme (SIWES) was established by the Industrial Training

Fund (ITF) with its ultimate purpose to help students in the University, Polytechnic and Colleges of

Technology acquire technical/practical knowledge in their various field of studies. SIWES is a six (6)

months program for students of various tertiary institution, with its aim to bridge the gap between

theoretical knowledge and practical knowledge to enhance student for a real work situation.

The SIWES program runs for a specific number of durations in months depending on the type of

tertiary institution. It is a duration of six (6) month for universities. This report details my activities

during my six (6) months industrial training ZEROES AND ONE HI-TECH OLD JEBBA ROAD

GSS ROUNDABOUT, ILORIN, KWARA STATE. During this period, I acquired Knowledge and

skills in Web Development which includes (HTML, CSS and JAVASCRIPT).

I was also opportune to learn under professionals in the field. They were of great help in bridging

the gap between all that I have learnt in the class and real-life problem. Industrial Training Fund

was indeed right when they started the program because it has been of great help to me in

equipping me for my career.

 CHAPTER TWO

HISTORICAL REVIEW OF SIWES AND ORGANIZATION

2.1 DEFINITION AND ORIGIN OF SIWES

The Students Industrial Work Experience Scheme (SIWES) is a Skills Training Program

designed to prepare and expose Students of Universities, Polytechnics, Colleges of

Technology, Colleges of Agriculture and Colleges of Education for the Industrial Work

situation they are likely to meet after graduation. The Scheme affords Students the

opportunity of familiarizing and exposing themselves to handling equipment and machinery

that are usually not available in their Institutions.

Before the establishment of the Scheme, there was a growing concern that graduates of

our Institutions of higher learning lacked adequate practical knowledge and that the

theoretical education in Higher Institutions was not responsive to the needs of the

Employers of Labour. It is against this background that the Industrial Training Fund

(ITF) initiated, designed and introduced SIWES Scheme in 1973 to acquaint Students

with the skills of handling Industrial equipment and machinery.

The Industrial Training Fund (ITF) solely funded the Scheme during its formative years.

However, due to financial constraints, the Fund withdrew from the Scheme in 1978. The

Federal Government noting the significance of the skills training, handed the management

of the Scheme to the National Universities Commission (NUC) and the National Board for

Technical Education (NBTE) in 1979. In November, 1984 management and

implementation of the Scheme was again reverted to the ITF with the funding to be solely

borne by the Federal Government.

During the program, Industry-based supervisors monitor students’ activities to ensure they

are putting in relevant effort to achieve the aim of the program and conform to the rules and

regulations of the organization. Institution Supervisors also visit students to assess their

work progress and overall ability to cope in the working environment.

2
2.2 OBJECTIVES OF SIWES

The programmes of SIWES are designed to achieve the following objectives:

Providing an avenue for student in Nigerian University to acquire industrial skill

experience in their course of study.

To prepare students for the work situation they are likely to meet after graduation

To exposing student to work method and technique in handling equipment, tools, and

machineries that are not available in their university.

To make the transition from the university to the world of work easier and thus

enhance students contacts for later job placement.

Making the transition from the University to the world of work easier and thus

enhancing student for later job placement after graduation.

Providing student an opportunity to apply theoretical knowledge in a real situation

thereby bridging between the University work and the actual practice.

Exposing student to the right and proper attitude and the disciplinary measures to work.

Creating and strengthening the employers of labour involvement in the educational

process in preparing University graduates for employment in industry.

2.3 DESCRIPTION OF ESTABLISHMENT OF ATTACHMENT

ZEROES AND ONE HI-TECH has history of creativity and innovation in the simulation of clients.

Since inception, they have remained focus on delivery quality I.T solution and training to their clients.

Year after years, ZEROES AND ONE HI-TECH has refined her quality process, focusing on course

development, instructor training and facility expansion. This is to ensure the training investment will

produce the desire results.

They have turned out quite an impressive number of students performing well both in Government and

private establishments within and outside the country. They tailor their training program to meet the

needs of individual clients according to their professional background, Tier track record can speak for

3
them. ZEROES AND ONE HI-TECH is an ICT firm registered in Nigeria to provide ICT related

Services.

2.4 ZEROES AND ONE HI-TECH OBJECTIVES.

✓ Banking Application for micro-finance bank.

✓ Payroll for government parastatals.

✓ They also provide solution for event ticketing, transportation, restaurant, hotels etc

The strength of our company lies in our Human Resources which are continually rejuvenated by bringing

in more hands which can make us live up to our name by being the foremost software development

company in Nigeria. Leveraging current technology to provide simple solution to complex processes.

4
2.5 ORGANIZATION CHART OF ZEROES AND ONE HI-TECH

MANAGING DIR.

DIRECTOR I.T
PROJECT

INSTRUCTOR SECRETARY INSTRUCTOR ON SIWES

P.M ASPECT

DATA MINING SOFTWARE COMPUTER WEB

DEV. HARDWARE DEVELOPMENT

There are various Departments/Units namely;

1. ENGINEERING DEPARTMENT

The computer engineering department deals with the maintenance, repair and upgrading of

computer system.

2. SOFTWARE DEVELOPMENT DEPARTMENT

Software Development Department deals with computer programming, documenting, testing,

and dug fixing involved in creating and maintaining application and frame work resulting in a

software product.

3. DATA MINING DEPARTMENT

This department deals with computing process of discovering patterns in large data sets involving

methods at the intersecting of machine learning, statistics, and database system. However the

5
 overall goal of the data mining process is to extract information from a data set and transform it

into an understandable structure for further use.

4. WEB DEVELOPMENT DEPARTMENT

These department deals with designing a website for the internet (World Wide Web) or an

intranet (a private network). Web development can range from developing the simplest static

single page of plain text to the most complex web-based internet application (or just ‘web apps”)

electronic businesses and social network service.

6
 CHAPTER 3

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 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 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

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 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 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 (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.

7
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 World Wide Web.

URL:

This stands for Uniform Resource Locator and as the name suggests, it provides a way to locate a

resource on the web, the hypertext system that operates over the internet.

3.2 HTML AND ITS PROPERTIES

HTML stands for Hypertext Mark-up Language, and it is the most widely used language to write Web

Pages.

❖ Hypertext refers to the way in which Web pages (HTML documents) are linked together.

Thus, the link available on a webpage is called Hypertext.

❖ As its name suggests, HTML is a Markup Language which means you use HTML to simply

"mark-up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings,

paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in

HTML language.

3.2.1 HTML TAGS:

As told earlier, HTML is a markup language and makes use of various tags to format the content.

These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their

corresponding closing tags. For example, <html>has its closing tag</html>and <body>tag has its

closing tag </body>tag etc.

The following are the names of tags and their description.

8
 Tag Description

This tag encloses the complete HTML document and mainly comprises

<html> of document header which is represented by <head>...</head> and

document body which is represented by <body>...</body> tags.

This tag represents the document's header which can keep other HTML
<head>
tags like <title>, <link>, <script language =”javascript”> etc.

The <title> tag is used inside the <head> tag to mention the document
<title>
title.

This tag represents the document's body which keeps other HTML tags
<body>
like <h1>, <div>, <p>, <table> etc.

<h1> This tag represents a heading

<p> This tag represents a paragraph.

<b>, <i>, <li>, <ul> Bold, italic, list, unordered list

3.2.2 HTML TABLE:

The HTML table model allows web designers to arrange data –text, preformatted text, images, links,

forms, form fields, other tables, etc. into rows and columns of cells. It is defined with the <table> tag.

Table are divided into table rows with the <tr> tag. Table rows are divided into table data with the

<td> tag. A table row can also be divided into table headings with the <th> tag. Table data <td> are the

data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other

tables.

<!DOCTYPE html>

<html>

<body>

<h2>Basic HTML Table</h2>

9
<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

10
</table>

</body>

</html>

OUTPUT:

Basic HTML Table

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80

11
3.3 CSS AND ITS PROPERTIES

CSS stands for Cascading Style Sheet used for formatting html document. It is a style sheet language

used for describing the presentation of a document written in a mark-up language.

Note: CSS code is not written the same way as HTML code is. This makes sense because css is not

HTML, but rather a way of manipulating existing HTML.

3.3.1 REASONS FOR CSS

The following are reasons why CSS is better

➢ It saves time

➢ It eradicates the idea of using repeating codes

➢ It provides efficiency in design and updates: with css, we are able to create rules, and apply

those rules to many elements within the website.

➢ It can lead to faster page downloads: since rules are only downloaded once by the browser,

then are the cached and used for each page load, the use of css can lead to lighter page loads,

and improved performance. This contributes to lighter server loads and lower requirements,

which overall saves money for our clients.

➢ It creates external file (server side) for managing html content.

3.3.2 METHOD USED BY CSS IN FORMATTING HTML DOCUMENT

1. Inline Style: It is used to apply a unique style to a single HTML element. An inline

CSS uses the style attribute of an HTML element.

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>

</html>

12
2. Embedded / Internal Style: It is used if one single page has a unique style. Internal

styles are defined within the <style> element, inside the <head> section of an HTML

page.

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

3. External Style: With an external style sheet, you can change the look of an entire

website by changing just one file. Each page must include a reference to the external

style sheet file inside the <link> element. The <link> element goes inside the <head>

13
section. Also when using external css it is preferable to keep the css separate from

your HTML. Placing CSS in a separate file allows the web designer to completely

differentiate between content (HTML) and design (CSS). External CSS is a file that

contains only CSS code and is saved with a “.css” file extension. This CSS is then

referenced in your HTML using the <link> instead of <style> as earlier stated.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

An external style sheet can be written in any text editor. The file must not contain any HTML code,

and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {

background-color: powderblue;

}
14
h1 {

color: blue;

p{

color: red;

3.3.3 CSS SELECTORS AND HOW THEY CAN BE USED

CSS selectors are used to find or select HTML elements based on their element name, id or class

1. Element Selector: The element selector selects elements based on the element name.

2. Id Selector: The id selector uses the id attribute of an HTML element to select a specific

element. The id of an element should be unique within a page, so the id selector is used to select one

unique element. e.g. id=”hello” css #hello {color;red;}

3. Class Selector: The class selector selects elements with specific class attribute. To select

elements with a specific class, write a period (.) character followed by the name of the class. e.g.

.center {text-align:center;}

3.3.4 CSS RULES OVERRIDING

1. Any inline style sheet takes the highest priority, so it will override any rule defined in

<style>……</style> tags.

2. Any rule defined in <style>………</style> tags will override the rules defined in any external

style sheet file.

3.3.5 CSS COMMENTS

To simply put comment inside a style sheet you use /*………..*/, you can use it to comment multi-line

blocks in similar way as you do in c and c++ programming language.

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

/* This is a single-line comment */

15
/* This is

a multi-line

comment */

3.3.6 BACKGROUND AND FONT OF VARIOUS HTML ELEMENTS

You can set the following background properties of an element.

1. The background-color: Is a property used to set the color background of an element.

2. The background-image property: is used to set the background image of an element.

3. The background repeat: Is used to control the repetition of an image in the background.

4. The background position: Is used to control the position of an image in the background.

5. The background attachment: Is used to control the scrolling of an image in the background.

6. The background property: Is used as a short hand to specify a number of other background

properties.

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-color:#ff00ff;

background-position: right top;

margin-right: 200px;

background-attachment: scroll;

16
FONT WHICH ARE;

1. The Font-family property: This is used to change the face of a font

2. The Font-style property: This is used to make a font italic or oblique.

3. The Font-weight property: This is used to increase or decrease how bold or light a font

appears.

4. The Font-size property: This is used to increase or decrease the size of a font.

p{

font-family: Arial, Helvetica, sans-serif;

font-style: italic;

font-size: 30px;

font-weight: bold;

3.3.7 TEXT DECORATION:

This demonstrate how to decorate a text in css, the values are none, underline, over line, line through

and blink.

p{

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline;

3.3.8 PROPERTIES OF HYPERLINK USING CSS

1. The link signifies unvisited hyperlinks

2. The link visited signifies visited hyperlinks

3. The link hovered signifies an element that currently has the user’s mouse pointer hovering over

it.

4. The link active signifies an element on which the user is currently clicking.

17
<style>

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

/* selected link */

a:active {

color: blue;

</style>

3.3.9 PROJECT DONE

FIG 1. ECOMMERCE WEBSITE

18
FIG 2. SOCIAL MEDIA DASHBOARD

19
FIG 3 CODES OF THE PROJECTS

20
3.4 JAVASCRIPT AND ITS PROPERTIES

JavaScript is a high-level, dynamic, untyped, and interpreted programming language.

This language which was developed by Brendan Eich in 1995 under the name Mocha but was

officially called Livescript before it was later called Javascript is the client side scripting language of

the Web.

JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the

server, and much more.

JavaScript is easy to learn.

JavaScript was designed to add interactivity to HTML pages

3.4.1 ADVANTAGES OF JAVASCRIPT

• JavaScript can react to events – A JavaScript can be set to execute when something happens, like

when a page has finished loading or when a user clicks on an HTML element.

• JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is

submitted to a server. This saves the server from extra processing.

• A JavaScript can be used to detect the visitor's browser, and load another page specifically designed

for that browser.

• JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information

on the visitor's computer.

• JavaScript can read/write/modify HTML elements - A JavaScript can read and change the content of

an HTML element.

Any time you include JavaScript verbiage in an HTML document, you must enclose those lines inside

a <script>...</script> tag pair. These tags alert the browser program to begin interpreting all the text

between these tags as a script, rather than HTML to render. Because other scripting languages (such as

Microsoft VBScript) can take advantage of these script tags, you must specify the kind of language in

which the enclosed code is written. Therefore, when the browser receives the signal that your script is

21
of the type text/javascript, it employs its built-in JavaScript interpreter to handle the code (Goodman et

al, 2007).

JavaScript can be written in the same page with the HTML but for clarity some developers prefer

writing the scripting language on a separate page. To link JavaScript to a HTML page we use the script

tag. For example:

<head>

<script type="text/javascript" src="validate.js"></script>

<meta charset="UTF-8">

<title></title>

</head>

In the example above the <script></script> tells the web browser that is a JavaScript document, the

type ‘’text/javascript’’ specifies it is a JavaScipt type document and the validate.js is the relative part

of the JavaScript document. All JavaScript document has the “.js” extension.

3.4.2 JAVASCRIPT DATA TYPES

TYPES SAMPLE DESCRIPTION

String “Nuggets” Series of alphanumeric characters in quotes

Number 27.3 Any number that is not in quotes

Boolean False A logical true or false

Object -- An entity that is define by properties and methods

Function -- A function definition

Null Null A value that is totally devoid of content

22
3.4.3 JAVASCRIPT OPERATORS

Operators are words or expressions that perform on one or two values to get another value.

Operators perform actions on operands [unary and binary]

TYPES SYMBOL

Comparison ==, !=, >, >=, <, <=,

Assignment =, +=, -=, *=, /=

Connubial +, -, *, /

Boolean && AND, OR, ! NOT

DATA CONVERSION

If your first operand is a string and then you add it to a number, JavaScript will convert the string value

to number and then add them up. For example.

4+4=8, 4+”4”=44, 4+4+“4”=84. We can also use a function ‘ParsInt’, it convert numeric strings to

numbers. E.G 4+4+ParsInt(“4”)=12. We can also convert numbers to strings. E.G (“” +44) = “44”.

3.4.4 KEYWORDS AND RESERVE WORDS

Keywords are special words used by JavaScript engine to perform some tasks.

It can be used as objects, variable names, function names or methods.

Some keywords are ‘Reserved’ words for future use and not presently interpreted.

3.4.5 JAVASCRIPT FUNCTIONS

JavaScript function: A collection of JavaScript statement built-in to perform a particular task (i.e.

declare variables).

Function must be named and can be called (or invoke) by other parts of the script.

It can be called as often as necessary. Example of a function,

23
function FName() {

//statements

A Simple Code to Show Input Form Validation Using JavaScript

<html>

<head>

<script type="text/javascript" src="validate.js"></script>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<font color="red"><b id="text"></b></font><br>

<form method="post" action="validate.php" onsubmit="return verification()">

<font color="red">*</font>&nbsp;Username <input id="uname" type="text"

name="username" value="" oninvalid="this.setCustomValidity('Please enter your username')"

required/><br>

<font color="red">*</font>&nbsp;Password &nbsp;<input id="pword" type="password"

name="password" required/><p>

Confirm Password &nbsp;<input id="cpword" type="password" name="cpassword"

required onforminput="setCustomValidity(value != pword.value ? 'Passwords do not match.' :

'')"/><br>

<input id="male" type="radio" name="gender" value="male" />male

24
 <input id="fmale" type="radio" name="gender" value="female" />female<p>

Town <select id="town" name="town" >

<option>--select--</option>

<option>Awka</option>

<option>Aba</option>

<option>Asaba</option>

<option>Onitsha</option>

<option>Warri</option>

<option>Owerri</option>

<option>Abakiliki</option>

</select><p>

<a href="#">Terms and Condition</a>

<input id="accept" type="checkbox" name="" value="ON" /> I Agree<p>

<input type="submit" value="submit" />

</form>

Javascript Form Validation Code

function verification(){

var username = document.getElementById("uname").value;

var password = document.getElementById("pword").value;

var male = document.getElementById("male").checked;

var female = document.getElementById("fmale").checked;

25
var location = document.getElementById("town").value;

var terms = document.getElementById("accept").checked;

var errorMsg = document.getElementById("text");

if(username.length < 1){

errorMsg.innerHTML ="Sorry, Username cannot be empty";

return false;

}else if(password.length < 1){

errorMsg.innerHTML ="Sorry, Password cannot be empty";

return false;

}else if(male===false && female===false){

errorMsg.innerHTML = "Please select gender";

return false;

}else if(location==="--select--"){

errorMsg.innerHTML = "Please enter location";

return false;

}else if(terms===false){

errorMsg.innerHTML = "You cannot Sign Up without agreeing our terms and condition";

return false;

}else{

return true; } }

26
3.4.6 DOCUMENT OBJECT MODEL IN JAVASCRIPT

The Document Object Model (DOM) is an application programming interface (API) for manipulating

HTML documents.

The DOM represents an HTML document as a tree of nodes. The DOM provides functions that allow

you to add, remove, and modify parts of the document effectively.

Note that the DOM is cross-platform and language-independent ways of manipulating HTML and

XML documents.

A document as a hierarchy of nodes

The DOM represents an HTML document as a hierarchy of nodes. Consider the following HTML

document:

<html>

<head>

<title>JavaScript DOM</title>

</head>

<body>

<p>Hello DOM!</p>

</body>

</html>

Code language: HTML, XML (xml)

The following tree represents the above HTML document:

27
In this DOM tree, the document is the root node. The root node has one child node which is

the <html> element. The <html> element is called the document element.

Each document can have only one document element. In an HTML document, the document element

is the <html> element. Each markup can be represented by a node in the tree.

3.4.7 JAVASCRIPT METHODS FOR DOM MANIPULATION FOR WEB DEVELOPERS

As a web developer, you frequently need to manipulate the DOM, the object model that is used by

browsers to specify the logical structure of web pages, and based on this structure to render HTML

elements on the screen.

HTML defines the default DOM structure. However in many cases you may want to manipulate this

with JavaScript, usually in order to add extra functionalities to a site.

28
1. querySelector()

The querySelector() method returns the first element that matches one or more CSS selectors. If no

match is found, it returns null.

Before querySelector() was introduced, developers widely used the getElementById() method

which fetches an element with a specified id value.

Although getElementById() is still a useful method, but with the

newer querySelector() and querySelectorAll() methods we are free to target elements based on

any CSS selector, thus we have more flexibility.

SYNTAX

1var ele = document.querySelector(selector);

• ele – First matching element or null (if no element matches the selectors)

• selector – one or more CSS selectors, such as "#fooId", ".fooClassName", ".class1.class2",

or ".class1, .class2"

29
CODE EXAMPLE

In this example, the first <div> gets selected with the querySelector() method and its color is changed

to red.

HTML

1<p>paragraph one</p>

2<p>paragraph two</p>

3<div>div one</div>

4<p>paragraph three</p>

5<div>div two</div>

JavaScript

1var firstDiv = document.querySelector('div');

2firstDiv.style.color = 'red';

INTERACTIVE DEMO

Test the querySelector() method in the following interactive demo. Just type a selector matching the

ones you can find inside the blue boxes (e.g. #three), and click the S ELECT button. Note that if you

type .block, only its first instance will be selected.

2. querySelectorAll()

Unlike querySelector() that returns only the first instance of all matching

elements, querySelectorAll() returns all elements that match the specified CSS selector.

30
The matching elements are returned as a NodeList object that will be an empty object if no matching

elements are found.

SYNTAX

1var eles = document.querySelectorAll(selector);

• eles – A NodeList object with all matching elements as property values. The object is empty if

no matches are found.

• selector – one or more CSS selectors, such as "#fooId", ".fooClassName", ".class1.class2",

or ".class1, .class2"

CODE EXAMPLE

The example below uses the same HTML as the previous one. However, in this example, all

paragraphs are selected with querySelectorAll(), and are colored blue.

HTML

1<p>paragraph one</p>

2<p>paragraph two</p>

3<div>div one</div>

4<p>paragraph three</p>

5<div>div two</div>

JavaScript

1var paragraphs = document.querySelectorAll('p');

2for(var p of paragraphs)

31
3 p.style.color = 'blue';

3. addEventListener()

Events refer to what happens to an HTML element, such as clicking, focusing, or loading, to which we

can react with JavaScript. We can assign JS functions to listen for these events in elements and do

something when the event had occured.

There are three ways you can assign a function to a certain event.

If foo() is a custom function, you can register it as a click event listener (call it when the button

element is clicked) in three ways:

1.

HTML

1<button onclick=foo>Alert</button>

2.

JavaScript

1var btn = document.querySelector('button');

2btn.onclick=foo;

3.

JavaScript

1var btn = document.querySelector('button');

2btn.addEventListener('click', foo);

32
The method addEventListener() (the third solution) has some pros; it is the latest standard – allowing

the assignment of more than one function as event listeners to one event – and comes with a useful set

of options.

SYNTAX

1ele.addEventListener(evt, listener, [options]);

• ele – The HTML element the event listener will be listening for.

• evt – The targeted event.

• listener – Typically, a JavaScript function.

• options – (optional) An object with a set of boolean properties (listed below).

Options What happens, when it is set to true?

Stops event bubbling, i.e. prevents calling of any event listeners for the same event type

in the element’s ancestors.

capture To use this feature, you can use 2 syntaxes:

1. ele.addEventListener(evt, listener, true)

2. ele.addEventListener(evt, listener, {capture:true});

Listener is called only the first time the event happens, then it is automatically detached
once
from the event, and won’t be triggered by it anymore.

passive The default action of the event cannot be stopped with the preventDefault() method.

33
CODE EXAMPLE

In this example, we add a click event listener called foo, to the <button> HTML tag.

HTML

1<button>Click Me</button>

JavaScript

1var btn = document.querySelector('button');

2btn.addEventListener('click',foo);

3function foo() { alert('hello'); }

INTERACTIVE DEMO

Assign the foo() custom function as an event listener to any of the three following

events: input, click or mouseover & trigger the chosen event in the bottom input field by hovering,

clicking or typing in it.

4. removeEventListener()

The removeEventListener() method detaches an event listener previously added with

the addEventListener() method from the event it is listening for.

SYNTAX

1ele.removeEventListener(evt, listener, [options]);

Uses the same syntax as the aforementioned addEventListener() method (except for the once option

that’s excluded). The options are used to be very specific about identifying the listener to be detached.

34
CODE EXAMPLE

Following the Code Example we used at addEventListener(), here we remove the click event listener

called foo from the <button> element.

JavaScript

1btn.removeEventListener('click',foo);

5. createElement()

The createElement() method creates a new HTML element using the name of the HTML tag to be

created, such as 'p' or 'div'.

You can later add this element to the web page by using different methods for DOM insertion, such

as AppendChild() (see later in this post).

SYNTAX

1document.createElement(tagName);

• tagName – The name of the HTML tag you want to create.

CODE EXAMPLE

With the following example, you can create a new paragraph element:

1var pEle = document.createElement('p')

6. appendChild()

The appendChild() method adds an element as the last child to the HTML element that invokes this

method.
35
The child to be inserted can be either a newly created element, or an already existing one. In the latter

case, it will be moved from its previous position to the position of the last child.

SYNTAX

1ele.appendChild(childEle)

• ele – The HTML element to which childEle is added as its last child.

• childEle – The HTML element added as the last child of ele.

CODE EXAMPLE

In this example, we insert a <strong> element is as the child of a <div> element using

the appendChild() and the aforementioned createElement() methods.

HTML

1<div></div>

JavaScript

1var div = document.querySelector('div');

2var strong = document.createElement('strong');

3strong.textContent = 'Hello';

4div.appendChild(strong);

INTERACTIVE DEMO

In the following interactive demo, letters from #a to #r are the child elements of the #parent-

one, #parent-two, and #parent-three id selectors.

36
Check out how the appendChild() method works by typing one parent and one child selector name into

the input fields below. You can choose children belonging to another parent as well.

7. removeChild()

The removeChild() method removes a specified child element from the HTML element that calls this

method.

SYNTAX

1ele.removeChild(childEle)

• ele – The parent element of childEle.

• childEle – The child element of ele.

CODE EXAMPLE

In this example, we remove the <strong> element we added as a child to the <div> tag at the Code

Example for the previous appendChild() method.

1div.removeChild(strong);

8. replaceChild()

The replaceChild() method replaces a child element with another one belonging to the parent element

that calls this method.

SYNTAX

1ele.replaceChild(newChildEle, oldChileEle)

• ele – Parent element of which children are to be replaced.

37
 • newChildEle – Child element of ele that will replace oldChildEle.

• oldChildEle – Child element of ele, that will be replaced by newChildEle.

CODE EXAMPLE

In this example the child element <strong> belonging to the <div> parent element is replaced with a

newly created <em> tag.

HTML

1<div>

2 <strong>hello</strong>

3</div>

JavaScript

1var em = document.createElement('em');

2var strong = document.querySelector('strong');

3var div = document.querySelector('div');

4em.textContent = 'hi';

5div.replaceChild(em, strong);

9. cloneNode()

When you have to create a new element that needs to be the same as an already existing element on the

web page, you can simply create a copy of the already existing element using the cloneNode() method.

SYNTAX

var dupeEle = ele.cloneNode([deep])

38
 • dupeEle – Copy of the ele element.

• ele – The HTML element to be copied.

• deep – (optional) A boolean value. If it’s set to true, dupeEle will have all the child

elements ele has, if it’s set to false it will be cloned without its children.

CODE EXAMPLE

In this example, we create a copy for the <strong> element with cloneNode(), then we add it to

the <div> tag as a child element with the aforementioned appendChild() method.

As a result, <div> will contain two <strong> elements, both with the hello string as content.

HTML

1<div>

2 <strong>hello</strong>

3</div>

JavaScript

1var strong = document.querySelector('strong');

2var copy = strong.cloneNode(true);

3var div = document.querySelector('div');

4div.appendChild(copy);

10. insertBefore()

The insertBefore() method adds a specified child element before another child element. The method is

called by the parent element.

39
If the referenced child element does not exist or you pass explicitly null in its place, the child element

to be inserted is added as the last child of the parent (similar to appendChild()).

SYNTAX

1ele.insertBefore(newEle, refEle);

• ele – Parent element.

• newEle – New HTML element to be inserted.

• refEle – A child element of ele before which newEle will be inserted.

CODE EXAMPLE

In this example, we create a new <em> element with some text inside, and add

it before the <strong> element inside the <div> parent element.

HTML

1<div>

2 <strong>hello</strong>

3</div>

JavaScript

1var em = document.createElement('em');

2var strong = document.querySelector('strong');

3var div = document.querySelector('div');

4em.textContent = 'hi';

5div.insertBefore(em, strong);

40
INTERACTIVE DEMO

This interactive demo works similarly to our previous demo belonging to the appendChild() method.

Here you only need to type the id selectors of two child elements (from #a to #r) into the input boxes,

and you can see how the insertBefore() method moves the first specified child before the second.

11. createDocumentFragment()

The createDocumentFragment() method may not be as well known as the others in this list,

nevertheless is an important one, especially if you want to insert multiple elements in bulk, such as

adding multiple rows to a table.

It creates a DocumentFragment object, which essentially is a DOM node that is not part of the DOM

tree. It’s like a buffer where we can add and store other elements (e.g. multiple rows) first, before

adding them to the desired node in the DOM tree (e.g. to a table).

Why don’t we just add elements directly to the DOM tree? Because DOM insertion causes layout

changes, and it’s an expensive browser process since multiple consequent element insertions will cause

more layout changes.

On the other hand, adding elements to a DocumentFragment object doesn’t cause any layout changes,

so you can add as many elements to it as you want before passing them to the DOM tree, causing a

layout change only at this point.

SYNTAX

1document.createDocumentFragment()

41
CODE EXAMPLE

In this example, we create multiple table rows and cells with the createElement() method, then add

them to a DocumentFragment object, finally add that document fragment to a HTML <table> using

the appendChild() method.

As a result, five rows – each of them containing one cell with a number from 1 to 5 as content – will be

inserted inside the table.

HTML

1 <table></table>

JavaScript

1 var table = document.querySelector("table");

2 var df = document.createDocumentFragment();

4 for(var i=0; i<5; i++) {

5 var td = document.createElement("td");

6 var tr = document.createElement("tr");

7 td.textContent = i;

8 tr.appendChild(td)

9 df.appendChild(tr);

10}

11

12table.appendChild(df);

42
12. getComputedStyle()

Sometimes you want to check the CSS property values of an element before making any changes. You

can use the ele.style property to do the same, however the getComputedStyle() method has been made

just for this purpose, it returns the read-only computed values of all the CSS properties of a specified

HTML element.

SYNTAX

1var style = getComputedStyle(ele, [pseudoEle])

• style – A CSSStyleDeclaration object returned by the method. It holds all CSS properties and

their values of the ele element.

• ele – The HTML element of which CSS property values are fetched.

• pseudoEle – (optional) A string that represents a pseudo-element (for example, ':after'). If this

is mentioned, then the CSS properties of the specified pseudo-element associated with ele will

be returned.

CODE EXAMPLE

In this example, we get and alert the computed width value of a <div> element by using

the getComputedStyle() method.

HTML

1<div></div>

JavaScript

1var style = getComputedStyle(document.querySelector('div'));

2alert(style.width);

43
13. setAttribute()

The setAttribute() method either adds a new attribute to an HTML element, or updates the value of an

attribute that already exists.

SYNTAX

1ele.setAttribute(name, value);

• ele – The HTML element to which an attribute is added, or of which attribute is updated.

• name – The name of the attribute.

• value – The value of the attribute.

CODE EXAMPLE

In this example, we add the contenteditable attribute to a <div> by making use of

the setAttribute() method, which will turn its content editable.

HTML

1<div>hello</div>

JavaScript

1var div = document.querySelector('div');

2div.setAttribute('contenteditable', '')

14. getAttribute()

The getAttribute() method returns the value of a specified attribute belonging to a certain HTML

element.

44
SYNTAX

1ele.getAttribute(name);

• ele – The HTML element of which attribute is requested.

• name – The name of the attribute.

CODE EXAMPLE

In this example, we alert the value of the contenteditable attribute belonging to the <div> element with

the help of the getAttribute() method.

HTML

1<div contenteditable=true>hello</div>

JavaScript

1var div = document.querySelector('div');

2alert(div.getAttribute('contenteditable'))

15. removeAttribute()

The removeAttribute() method removes a given attribute of a specific HTML element.

SYNTAX

ele.removeAttribute(name);

• ele – The HTML element of which attribute is to be removed.

• name – The name of the attribute.

45
CODE EXAMPLE

In this example, we remove the contenteditable attribute from the <div> element. As a result,

the <div> won’t be editable any more.

HTML

1<div contenteditable=true>hello</div>

JavaScript

1var div = document.querySelector('div');

2div.removeAttribute('contenteditable');

3.4.7 INTRODUCTION TO WEB APIS

Application Programming Interfaces (APIs) are constructs made available in programming languages

to allow developers to create complex functionality more easily. They abstract more complex code

away from you, providing some easier syntax to use in its place.

As a real-world example, think about the electricity supply in your house, apartment, or other

dwellings. If you want to use an appliance in your house, you plug it into a plug socket and it works.

You don't try to wire it directly into the power supply — to do so would be really inefficient and, if

you are not an electrician, difficult and dangerous to attempt.

In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API

written in a higher-level language such as JavaScript or Python, rather than try to directly write low-

level code (say C or C++) that directly controls the computer's GPU or other graphics functions.

46
3.4.8 APIS IN CLIENT-SIDE JAVASCRIPT

Client-side JavaScript, in particular, has many APIs available to it — these are not part of the

JavaScript language itself, rather they are built on top of the core JavaScript language, providing you

with extra superpowers to use in your JavaScript code. They generally fall into two categories:

• Browser APIs are built into your web browser and are able to expose data from the browser

and surrounding computer environment and do useful complex things with it. For example,

the Web Audio API provides JavaScript constructs for manipulating audio in the browser —

taking an audio track, altering its volume, applying effects to it, etc. In the background, the

browser is actually using some complex lower-level code (e.g. C++ or Rust) to do the actual

audio processing. But again, this complexity is abstracted away from you by the API.

• Third-party APIs are not built into the browser by default, and you generally have to retrieve

their code and information from somewhere on the Web. For example, the Twitter API allows

you to do things like displaying your latest tweets on your website. It provides a special set of

constructs you can use to query the Twitter service and return specific information.

47
RELATIONSHIP BETWEEN JAVASCRIPT, APIS, AND OTHER JAVASCRIPT TOOLS

So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript

language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in:

• JavaScript — A high-level scripting language built into browsers that allows you to implement

functionality on web pages/apps. Note that JavaScript is also available in other programming

environments, such as Node.

• Browser APIs — constructs built into the browser that sits on top of the JavaScript language

and allows you to implement functionality more easily.

• Third-party APIs — constructs built into third-party platforms (e.g. Twitter, Facebook) that

allow you to use some of those platform's functionality in your own web pages (for example,

display your latest Tweets on your web page).

• JavaScript libraries — Usually one or more JavaScript files containing custom functions that

you can attach to your web page to speed up or enable writing common functionality.

Examples include jQuery, Mootools and React.

• JavaScript frameworks — The next step up from libraries, JavaScript frameworks (e.g. Angular

and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you

install and then use to write an entire web application from scratch. The key difference between

a library and a framework is "Inversion of Control". When calling a method from a library, the

developer is in control. With a framework, the control is inverted: the framework calls the

developer's code.

48
3.4.9 WHAT CAN APIS DO?

There are a huge number of APIs available in modern browsers that allow you to do a wide variety of

things in your code. You can see this by taking a look at the MDN APIs index page.

Common browser APIs

In particular, the most common categories of browser APIs you'll use (and which we'll cover in this

module in greater detail) are:

• APIs for manipulating documents loaded into the browser. The most obvious example is

the DOM (Document Object Model) API, which allows you to manipulate HTML and CSS —

creating, removing and changing HTML, dynamically applying new styles to your page, etc.

Every time you see a popup window appear on a page or some new content displayed, for

example, that's the DOM in action. Find out more about these types of API in Manipulating

documents.

• APIs that fetch data from the server to update small sections of a webpage on their own are

very commonly used. This seemingly small detail has had a huge impact on the performance

and behavior of sites — if you just need to update a stock listing or list of available new stories,

doing it instantly without having to reload the whole entire page from the server can make the

site or app feel much more responsive and "snappy". The main API used for this is the Fetch

API, although older code might still use the XMLHttpRequest API. You may also come across

the term Ajax, which describes this technique. Find out more about such APIs in Fetching data

from the server.

• APIs for drawing and manipulating graphics are widely supported in browsers — the most

popular ones are Canvas and WebGL, which allow you to programmatically update the pixel

data contained in an HTML <canvas> element to create 2D and 3D scenes. For example, you

might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a

filter to it such as sepia or grayscale using the Canvas API, or create a complex 3D scene with

49
 lighting and textures using WebGL. Such APIs are often combined with APIs for creating

animation loops (such as window.requestAnimationFrame()) and others to make constantly

updating scenes like cartoons and games.

• Audio and Video APIs like HTMLMediaElement, the Web Audio API, and WebRTC allow

you to do really interesting things with multimedia such as creating custom UI controls for

playing audio and video, displaying text tracks like captions and subtitles along with your

videos, grabbing video from your web camera to be manipulated via a canvas (see above) or

displayed on someone else's computer in a web conference, or adding effects to audio tracks

(such as gain, distortion, panning, etc.).

• Device APIs enable you to interact with device hardware: for example, accessing the device

GPS to find the user's position using the Geolocation API.

• Client-side storage APIs enable you to store data on the client-side, so you can create an app

that will save its state between page loads, and perhaps even work when the device is offline.

There are several options available, e.g. simple name/value storage with the Web Storage API,

and more complex database storage with the IndexedDB API.

50
 CHAPTER FOUR
SUMMARY, CONCLUSION, AND RECOMMENDATION

4.1 SUMMARY

To summaries all what I did for the past six month, as a computer science student, my main focus was
web development. The SIWES program has given me the opportunity to pursue and experience how it
is being done in the industry of today as a web developer. I went through the planning stages of
creating a website, Then I was trained on how to use of codes like HTML, CSS, and JS to create
websites using a text editor, sublime.

4.2 CONCLUSIONS

The SIWES program is expected to be undergone by all students in the faculty of ICT, computer science
department in all tertiary institution in Nigeria.

I therefore appreciate the industrial training of my school (Kwara State University, Malate) for involving
themselves in such a worldwide program. The importance of this training will not be overlooked.

4.3 RECOMMENDATIONS

My recommendations is that there should ensure proper supervision of students as they undergo
SIWES training so as to achieve the purpose of the program. Also, there should be detailed directory
and description of employers and organizations that accept students undergoing SIWES training.
Finally, the ITF should put in place a method of paying students immediately their SIWES
commences, with a reasonable fee to encourage students.

51
 REFERENCES

Saint, C. (2022, January 5). Siwes Introduction, Aim & Objectives in Nigeria Retrieved from:

https://siwesbeginner.com/siwes-introduction/

Agwuna, R. (2012). Detailed Manual on SIWES Guidelines and Operations for Tertiary Institution.

Abuja: Rex Charles and Patrick limlited.

Agu, Z. (2018, February 12). Aims and objectives of SIWES in Nigeria. Retrieved from Legit:

https://www.legit.ng/1143857-aims-objectives-siwes-nigeria.html

Introduction to Web Development (HTML, CSS) Retrieved from W3Schools:

https://www.w3schools.com/whatis/

Introduction to JavaScript . Retrieved from from W3Schools:

https://www.w3schools.com/js/js_intro.asp

Document Object Model (DOM). Retrieved from Mdn Web Docs:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Introduction to Web APIs. Retrieved from Mdn Web Docs:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

52