Scribd
Upload
1 views

Javascript

The document provides an overview of JavaScript as a client-side scripting language that enhances web page interactivity. It covers various programming concepts including escape sequences, decision-making structures, loops, built-in objects, and regular expressions with examples. Additionally, it explains the use of modifiers and quantifiers in regular expressions for pattern matching in strings.

Uploaded by

amudhanmanogaran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Javascript

The document provides an overview of JavaScript as a client-side scripting language that enhances web page interactivity. It covers various programming concepts including escape sequences, decision-making structures, loops, built-in objects, and regular expressions with examples. Additionally, it explains the use of modifiers and quantifiers in regular expressions for pattern matching in strings.

Uploaded by

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

JAVASCRIPT

Client-side Scripting language


Makes web page more dynamic and interactive.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!--
document.writeln(
"<h1>Welcome to JavaScript Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
ESCAPE SEQUENCE

• \n- newline
• \t – horizontal tab
• \r –carriage return
• \\- back slash
• \’ – single quotes
• \” – double quotes
• No need to create new operator for document
or window object because these objects are
created by browsers
• Date object is JS built-in object
Precedence and Associativity
Decision making
• if ( studentGrade >= 60 )
document.writeln( "Passed" );
else
document.writeln( "Failed" );
• document.writeln( studentGrade >= 60 ? "Passed" :
"Failed" );
• if ( grade >= 90 )
document.writeln( "A" );
else if ( grade >= 80 )
document.writeln( "B" );
else if ( grade >= 70 )
document.writeln( "C" );
else if ( grade >= 60 )
document.writeln( "D" );
else
document.writeln( "F" );
Dangling-else problem
• if ( x > 5 )
if ( y > 5 )
document.writeln( "x and y are > 5" );
else
document.writeln( "x is <= 5" );
• if ( x > 5 )
if ( y > 5 )
document.writeln( "x and y are > 5" );
else
document.writeln( "x is <= 5" );
Nested if
• if ( x > 5 )
{
if ( y > 5 )
document.writeln( "x and y are > 5" );
}
else
document.writeln( "x is <= 5" );
while
Sentinel controlled loop
INCREMENT AND DECREMENT
OPERATOR
BREAK AND CONTINUE
MATH BUIT-IN OBJECTS
STRING OBJECTS
DATE OBJECTS
DOCUMENT- METHODS OR
PROPERTIES
REGULAR EXPRESSION

• A regular expression is a pattern of characters.


• The pattern is used for searching and
replacing characters in strings.
• The RegExp Object is a regular expression
with added Properties and Methods.
• Modifier Description
• /g Perform a global match (findall)
• /i Perform case-insensitive matching
• /m Perform multiline matching
• Bracket Description
• [abc] Find any character between the
brackets
• [^abc] Find any character NOT between the
brackets
• [0-9] Find any character between the
brackets (any digit)
• [^0-9] Find any character NOT between the
brackets (any non-digit)
• (x|y) Find any of the alternatives specified
MATCH()
<!DOCTYPE html> • JavaScript Regular
<html> Expression
<body> • The g Modifier
<h1>JavaScript Regular Expression</h1> • A global search for "is"
in a string:
<h2>The g Modifier</h2>
• is,is
<p>A global search for "is" in a string:</p>

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let pattern = /is/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>
EXEC()
<!DOCTYPE html>
<html> • JavaScript
<body>
<h2>JavaScript Regular Expressions</h2>
Regular
<p>Do a global search for "is" in a string:</p> Expressions
<p id="demo"></p>
<p id="demo1"></p> • Do a global
<h1 id="r5">cse</h1>
<script>
search for
let text = "Is this all there is?";
let pattern = /is/g;
"is" in a
let result = pattern.exec(text); string:
let result1 = pattern.exec(text);
let result2 = pattern.exec(text); • is
document.getElementById("demo").innerHTML = result;
document.getElementById("demo1").innerHTML = result1; • is
document.getElementById("r5").innerHTML = result2;
</script>
</body>
</html>
TEST()

<!DOCTYPE html> • JavaScript Regular Expressions


<html> • The test() method returns true if
<body> it finds a match, otherwise false.
• Search a string for the character
"e":
<h2>JavaScript Regular Expressions</h2>
• true
<p>The test() method returns true if it finds a match, otherwise false.</p>

<p>Search a string for the character "e":</p>

<p id="demo"></p>

<script>
let text = "The best things in life are free";
let pattern = /e/;
let result = pattern.test(text);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>
<!DOCTYPE html> • JavaScript Regular Expression
<html> • Using [ ] to find a range of characters
<body> • A global search for the character "h":
<h1>JavaScript Regular Expression</h1> • h,h
<h2>Using [ ] to find a range of characters</h2>

<p>A global search for the character "h":</p> • I,s, ,t,i,s, ,a,l,l, ,t,e,r,e, ,i,s,?

<p id="demo"></p>

<script>
let text = "Is this all there is?";
let pattern = /[h]/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

let pattern = /[^h]/g;


<!DOCTYPE html> • JavaScript Regular Expression
<html> • Using [ ] to find a range of characters
<body> • A global search for the numbers 1 to 4:
<h1>JavaScript Regular Expression</h1> • 1,2,3,4
<h2>Using [ ] to find a range of characters</h2>

<p>A global search for the numbers 1 to 4:</p>


• 5,6,7,8,9
<p id="demo"></p>

<script>
let text = "123456789";
let pattern = /[1-4]/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>
• let pattern = /[^1-4]/g;
<!DOCTYPE html> • JavaScript Regular Expression
<html> • The + Quantifier
<body> • A global search for at least one "o" in a string:
<h1>JavaScript Regular Expression</h1> • ooo,o,o,oo
<h2>The + Quantifier</h2>

<p>A global search for at least one "o" in a string:</p>


• l,looo,l,l,lo,l
<p id="demo"></p>

<script>
let text = "Hellooo World! Hello W3Schools!";
let pattern = /o+/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

let pattern = /lo*/g;


<!DOCTYPE html> • JavaScript Regular Expression
<html> • The ? Quantifier
<body> • A global search for a "1", followed by zero or one
<h1>JavaScript Regular Expression</h1> "0" characters:
<h2>The ? Quantifier</h2> • 1,10,10

<p>A global search for a "1", followed by zero or one "0"


characters:</p>

<p id="demo"></p>

<script>
let text = "1, 100 or 1000?";
let pattern = /10?/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>
<!DOCTYPE html> • JavaScript Regular Expression
<html> • The {} Quantifier
<body> • A global search for sequence of four digits:
<h1>JavaScript Regular Expression</h1> • 1000,1000
<h2>The {} Quantifier</h2>

<p>A global search for sequence of four digits:</p>

<p id="demo"></p>

<script>
let text = "100, 1000 or 10000?";
let pattern = /\d{4}/g;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>
• let pattern = /\d{3,}/g; // ATLEAST 3
• let pattern = /\d{3,4}/g; //substring 3 to 4 digits
• A search for "is" at the end of a string:
let text = "Is this his";
let pattern = /is$/;
• A global search for "Is" at the beginning of a string:
let text = "Is this his";
let pattern = /^Is/g;
• A search for "is" followed by " all":
• let text = "Is this all there is";
let pattern = /is(?= all)/g;
• Do a global, case insensitive search for "is" not followed by " all":
• let text = "Is this all there is";
let pattern = /is(?! all)/gi;
•

You might also like