INTRODUCTION TO WEB
DEVELOPMENT FRAMEWORKS
1
Pre. By Jibril H.
INTRODUCTION TO WEB
DEVELOPMENT FRAMEWORKS
2
Pre. By Jibril H.
Bootstrap is the popular HTML, CSS and JavaScript framework
for developing a responsive and mobile friendly website.
Bootstrap is a free front-end framework for faster and easier
web development
Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals,
image carousels and many other, as well as optional
JavaScript plugins
3
Pre. By Jibril H.
WHAT IS RESPONSIVE WEB DESIGN?
Responsive web design is about creating web sites
which automatically adjust themselves to look
good on all devices, from small phones to large
desktops.
4
Pre. By Jibril H.
BOOTSTRAP EXAMPLE
<!DOCTYPE html> <p>Resize this responsive page to see the effect!</p>
</div>
<html lang="en">
<div class="container">
<head>
<div class="row">
<title>Bootstrap Example</title>
<div class="col-sm-4">
<meta charset="utf-8">
<h3>Column 1</h3>
<meta name="viewport" content="width=device-width, initial-
scale=1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootst </div>
rap.min.css">
<div class="col-sm-4">
<script
<h3>Column 2</h3>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.j
s"></script> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<script <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstra </div>
p.min.js"></script>
<div class="col-sm-4">
</head>
<h3>Column 3</h3>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<div class="jumbotron text-center">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<h1>My First Bootstrap Page</h1>
</div>
</div>
5
Pre. By Jibril H. </div>
WHERE TO GET BOOTSTRAP?
There are two ways to start using Bootstrap on your own web
site.
You can:
• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/
bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
6
Pre. By Jibril H.
BASIC STRUCTURE OF A BOOTSTRAP GRID
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
First; create a row (<div class="row">). Then, add the desired number of columns
(tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always
addPre.up to 12 for each row.
7
By Jibril H.
EXAMPLE
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
8
Pre. By Jibril H.
jQuery is a small and lightweight JavaScript library.
jQuery is cross-platform.
jQuery means "write less do more".
jQuery simplifies AJAX call and DOM manipulation.
The purpose of jQuery is to make it much easier to
use JavaScript on your website.
9
Pre. By Jibril H.
CONT…
The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
10
Pre. By Jibril H.
JQUERY GET STARTED
There are several ways to start using jQuery on your web site.
You can:
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
11
Pre. By Jibril H.
JQUERY SYNTAX
With jQuery you select (query) HTML elements and perform "actions" on them.
Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
12
Pre. By Jibril H.
THE DOCUMENT READY EVENT
You might have noticed that all jQuery methods in our examples, are inside a document
ready event:
$(document).ready(function(){
// jQuery methods go here...
});
$("p").click(function(){
$(this).hide();
});
$("p").dblclick(function(){
$(this).hide();
});
13
Pre. By Jibril H.
CONT…
This is to prevent any jQuery code from running before the document is finished loading (is
ready).
It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the head
section.
Here are some examples of actions that can fail if methods are run before the document is fully
loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
$(function(){
// jQuery methods go here...
});
14
Pre. By Jibril H.
<!DOCTYPE html>
<html>
<head>
<title>First jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "pink");
});
</script>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
15
</html>
Pre. By Jibril H.
16
Pre. By Jibril H.
WHAT IS NODE.JS
Node.js is a cross-platform runtime environment and library for
running JavaScript applications outside the browser.
It is used for creating server-side and networking web applications.
It is open source and free to use.
It can be downloaded from this link https://nodejs.org/en/
Many of the basic modules of Node.js are written in JavaScript.
Node.js is mostly used to run real-time server applications.
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X,
etc.)
Node.js uses JavaScript on the server
17
Pre. By Jibril H.
CON’T…
The definition given by its official documentation is as follows:
Node.js is a platform built on Chrome's JavaScript runtime for easily
building fast and scalable network applications.
Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient, perfect for data-intensive real-time applications
that run across distributed devices.?
Node.js also provides a rich library of various JavaScript modules to
simplify the development of web applications.
Node.js = Runtime Environment + JavaScript Library
18
Pre. By Jibril H.
EXAMPLE
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);
19
Pre. By Jibril H.
DIFFERENT PARTS OF NODE.JS
20
Pre. By Jibril H.
FEATURES OF NODE.JS
Extremely fast: Node.js is built on Google Chrome's V8
JavaScript Engine, so its library is very fast in code execution.
I/O is Asynchronous and Event Driven: All APIs of Node.js library
are asynchronous i.e. non-blocking. So a Node.js based server
never waits for an API to return data. The server moves to the
next API after calling it and a notification mechanism of Events
of Node.js helps the server to get a response from the previous
API call. It is also a reason that it is very fast.
Single threaded: Node.js follows a single threaded model with
event looping.
21
Pre. By Jibril H.
CONT…
Highly Scalable: Node.js is highly scalable because event
mechanism helps the server to respond in a non-blocking way.
No buffering: Node.js cuts down the overall processing time
while uploading audio and video files. Node.js applications never
buffer any data. These applications simply output the data in
chunks.
Open source: Node.js has an open source community which has
produced many excellent modules to add additional capabilities
to Node.js applications.
License: Node.js is released under the MIT license.
22
Pre. By Jibril H.
Angular JS is an open source JavaScript framework by Google
to build web applications. It can be freely used, changed and
shared by anyone.
AngularJS can be added to an HTML page with a <script>
tag.
23
Pre. By Jibril H.
CONT…
AngularJS extends HTML attributes with Directives, and
binds data to HTML with Expressions.
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
24
Pre. By Jibril H.
ANGULARJS EXAMPLE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
25
Pre. By Jibril H.
THANK
End of chapter 7 and Web Programming Course
Question
26
Pre. By Jibril H.
