BCA1403 -Web Technology

Krishna Bhati
 JavaScript Regular Expression
• Regular Expressions are a powerful tool used in pattern-matching
and substitution.
• When you search in a text, you can use a pattern to describe what
you are searching for.
• They are commonly associated with almost all UNIX-based tools,
including editors like vi, scripting languages like Perl and PHP, and
Shell programs like awk and sed
• Javascript also supports Regular Expressions
• A Regular Expression lets you build patterns using a set of special
characters.
• Depending on whether or not there's a match, appropriate action
can be taken, and appropriate program code executed.

2
 Regular expressions and Form Validation

• Form Validation is one of the most common

requirements.
• You don't know what exact values the user
will enter, but you do know the format they
need to use.
• A Regular Expression is a way of representing
a pattern you are looking for in a string.

3
 RegExp Syntax
• var regExp= /pattern/[switch]
• In a Regular Expression /pattern/ is a Regular Expression and
[switch] (optional) indicates the mode in which the Regular
Expression is to be used:
• "i" - ignore case,
"g" - global search,
"gi" - global search + ignore case (case-insensitive).
• RegExp Quantifiers - "meta-characters"
• Usually used for more complex regular expressions.
• We can use "meta-characters", special characters, that have a
special meaning when used within a pattern.

4
 RegExp()
• The constructor function is used as follows:
• new RegExp("pattern"[, "flags"])
Parameters:
• pattern
The text of the regular expression.
• flags
If specified, flags can have one of the following values:
 g: global match
 i: ignore case
 gi: both global match and ignore case
 m: Perform multiline matching

5
6
 RegExp Quantifiers - "meta-characters"
RegExp Quantifiers - "meta-characters"
+ "+" is used to match one or more
/bo+/ occurrence of the preceding character.
would match the words "bore", "boom", and
"bookstore"., though not burry, or pound
* "*" is used to match zero or more
/mat*/ occurrences of the preceding character.
would match "ma", "mat" and "matter".

? "?" are used to match zero or one

/smi?/ occurrence of the preceding character.
would match "smirk", "smile" "smith" and
"smitten“, “smear”
{x, y} "{x, y}" is used match a range.
/mo{2,6}/ The numbers in the curly braces
would match "smooth" and "smooooooth!", represent the lower and upper values of
but not "moth". the range to match. NOTE: you can leave
out the upper limit for an open-ended
range match.

7
 RegExp Special Characters
• It's also possible to search for whitespace,
numbers and alphabetic characters with a
Regular Expression.
\s used to match a single whitespace character,
including tabsthese
and newline characters
• The following lists special characters:
\S used to match everything that is not a
whitespace character
\d used to match numbers from 0 to 9

\w used to match letters, numbers and

underscores
\W used to match anything that does not match
with \w
. used to match everything except the newline
character
\D Find a non-digit character 8
 Pattern Anchors (^, $)
[^] caret is used to indicate that the
expression should be matched only
/^script/ at the beginning of the string that it
will return a match only if it finds a is applied to.
word beginning with "script" like
"scripting" and "scripts", but not
"javascript".

"$" anchor is used to match the end of a string.

/ar$/
would match "scar", "car" and "bar", but
not "art", "army" or "arrow".

9
 Alternate Way
• simpler way to add pattern anchors to your expression
– \b
• This is used to check that the RegExp matches the boundary of a
string, and it can be placed either at the beginning or end of the
pattern to be matched.
• /\bhom/
• would match both "home" and "homestead", while
• /man\b/
• would match "human", "woman" and "man", though not "manor"
or "manners".
• And the converse of this is \B, which matches everywhere but at the
boundaries of a string.

10
 Examples(Pick up your pens)
1. "Charles the Brit raced his moped through the park.“
2. "The Park Ranger watched Charles do this"
Regular expression examples

• var reg1 = /^Charles/;   

// "Charles" on line 1 but not line 2
• var reg2 = /his$/;   
// "this" on line 2 but not "his" on line 1
• var reg3 = /\bt/;   
// " the" and " through" but not "Brit" or  "watched"
• var reg4 = /\Bt/;   
// “"watched" but not " the" or " through"
• var reg5 = /t\s./;   
// "Brit raced" but not "watched"
• var reg6 = /t\S./;  
// "watched" but not "Brit raced"
• var reg7 = /th./;   
11
// "through", "the", and "this"
JavaScript – Graphics

Canvas
– The canvas element is used to draw graphics on a web page.
What is Canvas?
– The HTML5 canvas element uses JavaScript to draw graphics on a web page.
– A canvas is a rectangular area, and you control every pixel of it.
– The canvas element has several methods for drawing paths, boxes, circles,
characters, and adding images.
Create a Canvas Element
– Add a canvas element to the HTML5 page.
– Specify the id, width, and height of the element:
Syntax
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript – Graphics
Canvas

Draw Rectangle with JavaScript

– The canvas element has no drawing abilities of its own. All drawing must be
done inside a JavaScript:
Example

<script type="text/javascript“>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='green';
ctx.fillRect(0,0,150,100);
</script>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
The getContext("2d") object is a built-in HTML5 object, with many methods to draw
paths, boxes, circles, characters, images and more.
JavaScript – Graphics
Canvas

Understanding Coordinates
– The fillRect method above had the parameters (0,0,150,100).
– This means: Draw a 150x100 rectangle on the canvas, starting at the top left
corner (0,0).
– The canvas' X and Y coordinates are used to position drawings on the canvas.
Example
Canvas - Paths

• To draw straight lines on a canvas, we will use the following two methods:
• moveTo(x,y) defines the starting point of the line
• lineTo(x,y) defines the ending point of the line
• To actually draw the line, we must use one of the "ink" methods, like
stroke().
• Example
• Define a starting point in position (0,0), and an ending point in position
(200,100). Then use the stroke() method to actually draw the line:
• JavaScript:
• var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Your Logo
JavaScript – Graphics
Canvas

Draw Circle with JavaScript

– Use arc(x,y,r,start,stop)method to draw a circle.
Example
<script type="text/javascript“>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="green";
cxt.beginPath();
cxt.arc(50,50,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

• To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().
• We can use the beginPath() method each time we want to start drawing a new path.
Make sure you keep the arc() and rect() calls in between calls to beginPath() and
closePath().
Canvas - Text

• To draw text on a canvas, the most important property and

methods are:
• font - defines the font properties for text
• fillText(text,x,y) - Draws "filled" text on the canvas
• strokeText(text,x,y) - Draws text on the canvas (no fill)
• Example
• Write a 30px high filled text on the canvas, using the font
"Arial":
• JavaScript:
• var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50); Your Logo
Canvas - Gradients

• Gradients can be used to fill rectangles, circles, lines, text, etc.

Shapes on the canvas are not limited to solid colors.
• There are two different types of gradients:
• createLinearGradient(x,y,x1,y1) - Creates a linear gradient
• Once we have a gradient object, we must add two or more
color stops.
• The addColorStop() method specifies the color stops, and its
position along the gradient. Gradient positions can be
anywhere between 0 to 1.
• To use the gradient, set the fillStyle or strokeStyle property to
the gradient, and then draw the shape, like a rectangle, text,
or a line.
Your Logo
Canvas - Images

• To draw an image on a canvas, we will use the

following method:
• drawImage(image,x,y)

• var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Your Logo
THANK YOU

20