Scribd
Upload
47 views

Wt2021 Handout w04 JavaScript Bootstrap

This document provides an overview of client-side technologies JavaScript and Bootstrap. It discusses JavaScript as an event-driven, dynamic programming language used to make web pages interactive. It also mentions the Bootstrap frontend framework. The document outlines topics like the JavaScript DOM model, variables, data types, conditional statements, and form processing. It positions client-side scripting as improving usability, efficiency, and enabling event-driven interactions compared to server-side scripting.

Uploaded by

Mobewtime Styles
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

Wt2021 Handout w04 JavaScript Bootstrap

This document provides an overview of client-side technologies JavaScript and Bootstrap. It discusses JavaScript as an event-driven, dynamic programming language used to make web pages interactive. It also mentions the Bootstrap frontend framework. The document outlines topics like the JavaScript DOM model, variables, data types, conditional statements, and form processing. It positions client-side scripting as improving usability, efficiency, and enabling event-driven interactions compared to server-side scripting.

Uploaded by

Mobewtime Styles
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Client-side Technology

JavaScript and Bootstrap

Web Technology : 2021


Asst. Prof. Manop Phankokkruad, Ph.D.
Faculty of Information Technology
King Mongkut’s Institute of Technology Ladkrabang
Outline

1. Introduction
2. JavaScript
▪ Event-driven programming
▪ Document Object Model
▪ Forms processing
3. Bootstrap Framework

MP.WEBTECH.IT.KMITL
Introduction

Client-side Development
1

▪ Server-side scripting is executed by a web server.


▪ Client-side scripting is executed by a browser.
MP.WEBTECH.IT.KMITL
Introduction

Request-Response Model
Client Server
Request Packet
(GET or POST)

Browser Web Server


Response
Request Packet Packet Response Packet
Request Header
(client info) Status Header

Request Body Response Header


(actual request) (server info)

Response Body
(requested URL)

MP.WEBTECH.IT.KMITL
Introduction : GET and POST

In the HTTP protocol, data from the client is sent to


the server in one of two primary ways:
❑ GET
▪ attaches the forms data (URL encoded) to the
requested URL and places the URL in the body of an
http request packet.
▪ the URL has the data attached it is visible in the
Location box of the browser. Since this allow the
data to be seen by any with in view of the screen it
is not preferred.

MP.WEBTECH.IT.KMITL
Introduction : GET and POST

In the HTTP protocol, data from the client is sent to


the server in one of two primary ways: (cont.)
❑ POST
▪ places the forms data into the body of the http
request packet, this way the data will not be seen by
snooping eyes. It is more private than GET. This is
the preferred way to send data to the server.

MP.WEBTECH.IT.KMITL
Introduction

Client-side scripting benefits:


Scripts are embedded within and interact with the
HTML of Website. Scripts interact with a cascading
style sheet (CSS) file that styles the way the page
looks. Scripts put less stress on the server because
they don’t require processing on the server.
▪ Usability: can modify a page without having to
post back to the server (faster UI).
▪ Efficiency: can make small, quick changes to
page without waiting for server.
▪ Event-driven: can respond to user actions like
clicks and key presses. MP.WEBTECH.IT.KMITL
Introduction

The lifecycle of a
client-side web
application.

MP.WEBTECH.IT.KMITL
JavaScript

JavaScript is a high-level, interpreted programming


language. It is a language which is also characterized
2
as dynamic, weakly typed, prototype-based and
multi-paradigm.
▪ JavaScript is one of the three core technologies of
the World Wide Web. JavaScript enables interactive
web pages and thus is an essential part of web
applications.
▪ JavaScript is NOT related to Java other than by
name and some syntactic similarities

MP.WEBTECH.IT.KMITL
JavaScript

❑ A lightweight programming language.


❑ used to make web pages interactive.
❑ react to events (event-driven).
❑ get information about a user’s computer.
❑ perform calculations on user's computer.
❑ more relaxed syntax and rules.
❑ key construct is the function rather than the class.
❑ contained within a web page and integrates with
its HTML/CSS content

MP.WEBTECH.IT.KMITL
JavaScript Frameworks

JavaScript frameworks are a type of tool that makes


working with JavaScript easier and smoother. These
frameworks also make it possible for the programmer
to code the application as a device responsive. The
popular JavaScript frameworks such as.

▪ Angular-JS ▪ Ajax
▪ React.JS ▪ and more…
▪ Vue.js
▪ jQuery
MP.WEBTECH.IT.KMITL
JavaScript : Basic

▪ JavaScript code can be placed directly in the


HTML files <body> or <head> tag.
<script src=“myscript.js” > </script>
HTML

<script>
JavaScript code goes here …..
</script>

▪The scripts inside an HTML document is


interpreted in the order they appear in the
document. Scripts in a function is interpreted when
the function is called. So where you place the
<script> tag matters. MP.WEBTECH.IT.KMITL
JavaScript : Variables

Declaration

var, const, let

❑ var - The most common variable. Can be


reassigned but only accessed within a function.
Variables defined with var move to the top when
code is executed.
❑ let - let variable can be reassigned but not re-
declared.
❑ const - Can not be reassigned and not accessible
before they appear within the code.
MP.WEBTECH.IT.KMITL
JavaScript : Data types

Primitive Types
Primitive
Non-

MP.WEBTECH.IT.KMITL
JavaScript : Data types

MP.WEBTECH.IT.KMITL
JavaScript : Data types

An object is a data type in JavaScript that is used to


store a combination of data in a simple key-value pair.

var user = {
Value
name : “Aziz Ali”, These are the values of the
Key respective keys in user object.
These are yearOfBirth : 1988,
the keys in
user object. calculateAge : function() {
// some code to calculate age }
} Method
If a key has a function as a
value, its called a method.

MP.WEBTECH.IT.KMITL
JavaScript : Data types

A function is simply a bunch of code bundled in a


section. This bunch of code ONLY runs when the
function is called. Functions allow for organizing code
into sections and code reusability.
// Function declaration a function has four parts.
function someName(param1, param2) { 1) Name of function
2) Parameters
// bunch of code as needed 3) Code block
var a = param1 + “love” + param2; 4) Return
return a;
}
MP.WEBTECH.IT.KMITL
JavaScript : Conditional Statements

If -else Statement: Run certain code, "if" a condition is


met. If the condition is not met, the code in the "else"
block is run (if available.)

MP.WEBTECH.IT.KMITL
JavaScript : Conditional Statements

Switch Statement: Takes


a single expression and
runs the code of the
"case" where the
expression matches. The
"break" keyword is used
to end the switch
statement.

MP.WEBTECH.IT.KMITL
JavaScript : A Simple Script
<html>
<head></head>
<body>
<h1>First JavaScript Page</h1>
<script>
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body></html>

MP.WEBTECH.IT.KMITL
JavaScript : Event driven

JavaScript in the browser uses an event-driven


programming model. JavaScript programs instead
wait for user actions called events and respond to
them.
▪ Event-driven programming is a writing programs
driven by user events.
▪ The event could be the DOM is loaded, or an
asynchronous request that finishes fetching, or a user
clicking an element or scrolling the page, or the user
types on the keyboard.
▪ There are a lot of different kind of events.
MP.WEBTECH.IT.KMITL
JavaScript : Event driven

Figure : Event handlers

MP.WEBTECH.IT.KMITL
3

JavaScript : DOM

Most JavaScript code


manipulates elements on an
HTML page.
▪ examine elements state.
▪ change state
▪ change styles

MP.WEBTECH.IT.KMITL
JavaScript : DOM

DOM element objects


HTML

JavaScript

MP.WEBTECH.IT.KMITL
JavaScript : Accessing elements

Accessing elements:
document.getElementById(“id”)
document.getElementByClassname(“Classname”)
document.getElementByName(“Name”)
document.getElementByTagName(“TagName”)
document.forms[“Formname”][“ElementId”]
document.getElementById returns the DOM object
for an element with a given id. It can change the text
inside most elements by setting the innerHTML
property. Also It can change the text in form controls
by setting the value property.
MP.WEBTECH.IT.KMITL
Accessing elements

<button onclick="changeText();">Click me!</button>


HTML

<span id="output">replace me</span>


<input id="textbox" type="text" />

function changeText() {
var span = document.getElementById("output");
var textbox = document.getElementById("textbox");
JavaScript

textbox.style.color = "red";
}
function getValue() {
var fname = document.forms["myForm"]["FirstName"].value;
}

MP.WEBTECH.IT.KMITL
JavaScript : forms processing

The processing of a form is done in two parts:


❑ At the browser, before the data is passed to the
back-end processors.
▪ Client-side : should be done via JavaScript.
▪ The data validation done locally to relieve the
back-end processors of having to do it.
❑ Server-side : processing done in the back-end
system such as CGI Scripts, VBScript, JavaScript, etc.

MP.WEBTECH.IT.KMITL
JavaScript : Validation Functions

Validation functions can usually be written in either


of two ways
1. Iterative programming methodologies : write a
small function that iterates through the user input
and validates the data type.
2. Pattern matching : create a regular expression
pattern for the data type and let the system
validate the user input via the pattern matching
capabilities of the pattern matching is done at a
low level in the JavaScript processor, so validation is
very quick.
MP.WEBTECH.IT.KMITL
1: JavaScript Form Validation

One major use of JavaScript in conjunction with


HTML forms is for validation of forms data before
allowing the data to be submitted to a backend
server for processing.
❑ doing the data validation at the client (browser)
relieves the server from having to do it
▪ on a busy server this can free up a lot of
processing cycles that can be better used to
process more user requests and/or backend
database functions.

MP.WEBTECH.IT.KMITL
1: JavaScript Form Validation

Validation constraints on input elements.


<form name="myForm" onsubmit="validateForm()"
method="post">
HTML

Name: <input type="text" name="fname">


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

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
JavaScript

if (x == "") {
alert("Name must be filled out");
return false;
}
}
MP.WEBTECH.IT.KMITL
2: HTML5 Validation

New attributes for <input>


▪ required =‘required’
▪ pattern= ‘a regular expression’ can be used with
<input> types, text, search, url, telephone, email,
and password.
▪ min = max = step =
can be used with <input type=range>

MP.WEBTECH.IT.KMITL
2: HTML5 Validation

The simplest HTML5 validation feature to use is the


required attribute
<form name="myForm" method="post">

Name: <input type="text" name="fname” required>


Age :<input type="number" min="12" max="120" step="1"
HTML

name=“age” pattern="\d+">
Email : <input type="email" name="email">
<input type="submit" value="Submit">

</form>

MP.WEBTECH.IT.KMITL
Bootstrap

Bootstrap is the most popular front-end framework


for quickly styling website and help you with
3
website development.
The framework basically consists of the set of two
files; Bootstrap.js and Bootstrap.css. If you include
them on your HTML page or website, it will enable
you to use its HTML components and features.

MP.WEBTECH.IT.KMITL
Bootstrap

What Bootstrap Package Includes?


1. Scaffolding: Bootstrap provides a basic structure
with Grid System, link styles, background.
2.CSS: Bootstrap comes with feature of global CSS
settings, fundamental HTML elements styled and
enhanced with extensible classes, and an advanced
grid system.
3.Components: Bootstrap contains over a dozen
reusable components built to provide iconography,
dropdowns, navigation, alerts, popovers, and more.

MP.WEBTECH.IT.KMITL
Bootstrap

What Bootstrap Package Includes? (cont.)


4. JavaScript Plugins: Bootstrap contains over a
dozen custom jQuery plugins. You can easily
include them all, or one by one.
5. Customize: You can customize Bootstrap's
components, LESS variables, and jQuery plugins to
get your very own version.

MP.WEBTECH.IT.KMITL
Bootstrap

Using Bootstrap
❑ You can start using Bootstrap 4 in your website by
including it from
❑ CDN (Content Delivery Network)
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra
p.min.css" rel="stylesheet">
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.
min.js"></script>

MP.WEBTECH.IT.KMITL
Bootstrap Components

❑ Grids – Defining pages in terms of columns and


rows
❑ Typography – Headings / body elements
❑ Glyphs – icons that are font based, scalable
❑ Navigation – responsive navigation
❑ Images – responsive images
❑ Helper Classes – Clearfix / show / hide / centers
❑ Responsive Utilities – hide / show content via class
❑ JavaScript - Carousel, Tooltip, Tab, Modal, Alerts

MP.WEBTECH.IT.KMITL
Bootstrap Grid System

❑ Bootstrap divides a page into a grid of 12 columns


and multiple rows for easier positioning of elements.
❑ Grid system is responsive, and columns will
rearrange automatically depending on the screen
size.

MP.WEBTECH.IT.KMITL
Bootstrap Grid System

Grid System Basics


❑ Place columns inside for each row.
❑ Set each column width using class prefixes: .col-*,
.col-sm-*, .col-md-*, .col-lg-*, .col-xl-*

MP.WEBTECH.IT.KMITL
Bootstrap Form

Three types of forms in Bootstrap are:


❑ Vertical or Basic form (By default)
❑ Horizontal form
❑ Inline form
Rules for form layouts
❑ Use of role attribute in <form role=”form“> this
improves accessibility for screen readers.
❑ Wrap up labels and form controls in <div
class=”form-group“> for better spacing.
❑ Use of class =”form-control“ in all text elements
(<input>, <select>, <textarea>)
MP.WEBTECH.IT.KMITL
Bootstrap Form

Example for form control styles, layout options, and


custom components for creating a wide variety of
forms.

MP.WEBTECH.IT.KMITL
Bootstrap Tables

The Bootstrap 4 has .table class that you may use in


the <table> tag. By default, the table is created with
light-grey horizontal dividers as shown below:

MP.WEBTECH.IT.KMITL
Bootstrap Tables

Example for Bootstrap table

MP.WEBTECH.IT.KMITL
More Information

❑ JavaScript Tutorial
https://www.w3schools.com/js/default.asp
❑ Bootstrap 4
❑ https://www.w3schools.com/bootstrap4/

MP.WEBTECH.IT.KMITL

You might also like