1 david shtern, ph.d., © 2008, all rights reserved. 1 javascript for qa engineers by david shtern

11David Shtern, Ph.D., © 2008, All Rights David Shtern, Ph.D., © 2008, All Rights

Reserved.Reserved. 11

JavaScript for QA JavaScript for QA Engineers Engineers

by David Shternby David Shtern



JavaScript Class ObjectivesJavaScript Class Objectives

• Understand basics of JavaScript

• Learn where JavaScript is used

• Be able to answer interview questions

• Be able to test web pages containing JavaScript



JS – what is it?JS – what is it?

JavaScript is JavaScript is THETHE scripting language of scripting language of the Web.the Web.

JavaScript is used in many Web pages JavaScript is used in many Web pages adding functionality, form validation, adding functionality, form validation, browser detection and much more.browser detection and much more.



JS – what is it?JS – what is it?

JavaScript was designed with the aim to add JavaScript was designed with the aim to add interactivity to HTML pages interactivity to HTML pages JavaScript is a scripting language -lightweight JavaScript is a scripting language -lightweight programming language programming language Most common place to find JavaScript - Most common place to find JavaScript - embedded in HTML pages embedded in HTML pages JavaScript is an interpreted language (means JavaScript is an interpreted language (means that scripts execute without preliminary that scripts execute without preliminary compilation); interpreter is located in your compilation); interpreter is located in your browser browser JavaScript is free JavaScript is free



Prerequisites – HTML and OOPPrerequisites – HTML and OOP

OOP, or Object Oriented Programming – is OOP, or Object Oriented Programming – is a technique allowing programmers to a technique allowing programmers to reuse and simplify the code. reuse and simplify the code.

For simplicity reasons we take into For simplicity reasons we take into consideration a case of a bank, which consideration a case of a bank, which have some branches.have some branches.



BanksBanks



Bank branchesBank branches



Bank operationsBank operations

For simplicity reasons we assume that there For simplicity reasons we assume that there are only four operations performed by are only four operations performed by bank:bank:

Deposit (checks and cash)Deposit (checks and cash)

ATM (cash out only)ATM (cash out only)

Loan application acceptanceLoan application acceptance

Issuance of Consumer credit Issuance of Consumer credit



OOPOOP

If we allow each bank branch to develop If we allow each bank branch to develop its own software it will be the end of its own software it will be the end of banking industry.banking industry.

We need to set up standards and We need to set up standards and rigorously follow them to make sure rigorously follow them to make sure business rules and regulations are business rules and regulations are observed by all branches.observed by all branches.



Head office and branchesHead office and branches

$

Bank

$

Bank

$

Bank



Lead letter printingLead letter printing

© http://www.hno.harvard.edu/gazette/2002/05.16/14-bowandarrow.html



Lead letter printing in softwareLead letter printing in software

We create a matrix, with all functions, business We create a matrix, with all functions, business rules etc, and simply make copies for each bank rules etc, and simply make copies for each bank branch. branch. If central bank office authorize a bank loan to If central bank office authorize a bank loan to Doe Joe, a following command is executed:Doe Joe, a following command is executed:

Nashwille.IssueLoan(12, 50,000); Nashwille.IssueLoan(12, 50,000);

Nashville branch gives customer Doe Joe (with ID Nashville branch gives customer Doe Joe (with ID 12) a 50,000 loan. 12) a 50,000 loan.



OOP syntaxOOP syntax

Nashwille.IssueLoan(12, 50,000);Nashwille.IssueLoan(12, 50,000);

IssueLoan () operation can be performed by any IssueLoan () operation can be performed by any bank brunch. However, in our case it is executed bank brunch. However, in our case it is executed by Nashville brunch.by Nashville brunch.

IssueLoan() operation needs additional information IssueLoan() operation needs additional information (parameters) in order to perform loan release (parameters) in order to perform loan release (customer ID, loan amount)(customer ID, loan amount)

Each operation is ended with semicolon.Each operation is ended with semicolon.Central office cannot get access to cash registry of Central office cannot get access to cash registry of

Nashville brunch.Nashville brunch.



VariablesVariables

In computer programming a variable is a special In computer programming a variable is a special value (also often called a reference) that has the value (also often called a reference) that has the property of being able to be associated with property of being able to be associated with another value (or not). What is variable across another value (or not). What is variable across time is the association. Creating or changing the time is the association. Creating or changing the association is called assignment.association is called assignment.

Variables are usually named by an identifierVariables are usually named by an identifier

In the computing context, variable identifiers In the computing context, variable identifiers often consist of alphanumeric strings.often consist of alphanumeric strings.



Variables - continuedVariables - continued

Declaring a variable in JavaScript is easy:Declaring a variable in JavaScript is easy:var d – declares (creates) variable named ‘d’ and var d – declares (creates) variable named ‘d’ and

does not assigns (associate) any value with it.does not assigns (associate) any value with it.var dat = 1;var dat = 1;var car12 = “Honda”;var car12 = “Honda”;In these cases we declare variables and at the In these cases we declare variables and at the

same time associate values to them.same time associate values to them.When we expect that the value of variable is not to When we expect that the value of variable is not to

be changed, we use be changed, we use constconst keyword, e.g. keyword, e.g.const FREEZING_F = 32const FREEZING_F = 32



VariablesVariables

Regard a variable as a container which Regard a variable as a container which may store value(s), may store value(s), Values may change upon assigning Values may change upon assigning variable new value,variable new value,We can get value stored in variable by We can get value stored in variable by referring it, referring it, Variable allow to separate assignment and Variable allow to separate assignment and value reading in time,value reading in time,JavaScript supports variables.JavaScript supports variables.



Variables rulesVariables rules

Rules for JavaScript variable names:Rules for JavaScript variable names:

Variable names in JavaScript are case Variable names in JavaScript are case sensitive (sensitive (zz and and ZZ are two different are two different variables) variables)

Variable names must Variable names must begin with a letterbegin with a letter or the or the underscoreunderscore character character



Assignment operationAssignment operation

var x= 11;var x= 11;

var city = “Odessa”;var city = “Odessa”;

Compare with this syntax, which is also OK:Compare with this syntax, which is also OK:

x= 11;x= 11;

city = “Odessa”;city = “Odessa”;

JavaScript assumes that x and city are JavaScript assumes that x and city are variables.variables.



Variables scopeVariables scope

Local and global scope variables:Local and global scope variables:var gl = 6;var gl = 6;funcrion foo()funcrion foo(){{var l;var l;var b = 7;var b = 7;document.write (“local var” + b+”<BR>”); document.write (“local var” + b+”<BR>”); document.write (“global var” + gl +”<BR>”);document.write (“global var” + gl +”<BR>”);}}



Variables in actionVariables in actionCreate following document in left window. Then see how it looks in Create following document in left window. Then see how it looks in

browser/right window:browser/right window:<HTML><HTML><BODY><BODY><script type="text/javascript"> <script type="text/javascript"> var car = “Mazda MPV";var car = “Mazda MPV";var pi = 3.141592653589793;var pi = 3.141592653589793;document.write("<h1>First js script</h1>");document.write("<h1>First js script</h1>");document.write("<p>Hello World</p>");document.write("<p>Hello World</p>");document.write("<p>Bye</p>");document.write("<p>Bye</p>");document.write(“Value of pi is: “ + pi); document.write(“Value of pi is: “ + pi); document.write(“<BR>My car is: “ +car);document.write(“<BR>My car is: “ +car);</script></script></BODY></BODY></HTML> </HTML>



What JS canWhat JS can

JavaScript gives HTML designers a programming tool - JavaScript gives HTML designers a programming tool - HTML HTML authors are normally not programmers, but JavaScript is a scripting authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - JavaScript can put dynamic text into an HTML page - A A JavaScript statement like this: document.write("<h1>" + name + JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page "</h1>") can write a variable text into an HTML page JavaScript can react to events - JavaScript can react to events - A JavaScript can be set to A JavaScript can be set to execute when something happens, like when a page has finished execute when something happens, like when a page has finished loading or when a user clicks on an HTML element loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - JavaScript can read and write HTML elements - A JavaScript can A JavaScript can read and change the content of an HTML element read and change the content of an HTML element



What JS canWhat JS can

JavaScript can be used to validate data - JavaScript can be used to validate data - A JavaScript A JavaScript can be used to validate form data before it is submitted can be used to validate form data before it is submitted to a server. This saves the server from extra processing to a server. This saves the server from extra processing and network to transfer this dataand network to transfer this dataJavaScript can be used to detect the visitor's JavaScript can be used to detect the visitor's browserbrowser - A JavaScript can be used to detect the - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load visitor's browser, and - depending on the browser - load another page specifically designed for that browser another page specifically designed for that browser JavaScript can be used to create cookiesJavaScript can be used to create cookies - A - A JavaScript can be used to store and retrieve information JavaScript can be used to store and retrieve information on the visitor's computeron the visitor's computer



JS in HTML documentsJS in HTML documents

<HTML><HTML> <HEAD> <HEAD> </HEAD> </HEAD> <BODY> <BODY> <SCRIPT TYPE="TEXT/JAVASCRIPT"> <SCRIPT TYPE="TEXT/JAVASCRIPT"> Some code here... Some code here... </SCRIPT> </SCRIPT> </BODY> </BODY>

Observe that JS code is in BODY part of the code.Observe that JS code is in BODY part of the code.



JS in HTML documentsJS in HTML documents

<HTML><HTML> <HEAD> <HEAD> <SCRIPT TYPE="TEXT/JAVASCRIPT"> <SCRIPT TYPE="TEXT/JAVASCRIPT"> Some code here... Some code here... </SCRIPT></SCRIPT></HEAD> </HEAD> <BODY> <BODY> Some HTML code here…Some HTML code here…</BODY> </BODY>

JavaScript is executed as soon as the page is loaded!JavaScript is executed as soon as the page is loaded!



External JavaScript fileExternal JavaScript file

JavaScript code is in external file which we reference:JavaScript code is in external file which we reference:

<HTML><HTML><HEAD><HEAD><SCRIPTSRC="XXX.JS"><SCRIPTSRC="XXX.JS"></SCRIPT></SCRIPT></HEAD></HEAD><BODY><BODY></BODY></BODY></HTML> </HTML>



JavaScript basicsJavaScript basics

JavaScript Statement.JavaScript Statement.

A JavaScript statement is a command to the A JavaScript statement is a command to the browser. browser.

The purpose of the command is to tell the browser The purpose of the command is to tell the browser what to do.what to do.

The text of the command is written in JavaScript The text of the command is written in JavaScript code; the command is executed by browser.code; the command is executed by browser.

Always terminate statement with “;” though it is not Always terminate statement with “;” though it is not required by JavaScript.required by JavaScript.



JavaScript basicsJavaScript basics

JavaScript code (or just JavaScript) is a JavaScript code (or just JavaScript) is a sequence of JavaScript statements.sequence of JavaScript statements.

Each statement is executed by the browser in Each statement is executed by the browser in order they are written.order they are written.

Groups of JavaScript statements can be Groups of JavaScript statements can be grouped in blocks. Blocks start with a left curly grouped in blocks. Blocks start with a left curly bracket { and ends with a right curly bracket }.bracket { and ends with a right curly bracket }.

The purpose of a block is to make the sequence of The purpose of a block is to make the sequence of statements execute together. statements execute together.



Our First JavaScriptOur First JavaScriptOpen Notepad and type following text:Open Notepad and type following text:<HTML><HTML>

<HEAD><HEAD><TITLE> My JS example<TITLE> My JS example</TITLE></TITLE></HEAD></HEAD><BODY> <BODY>

<script type="text/javascript"> <script type="text/javascript"> document.write("<h1>First js script</h1>");document.write("<h1>First js script</h1>");document.write("<p>Hello World</p>");document.write("<p>Hello World</p>");document.write("<p>Bye</p>"); document.write("<p>Bye</p>"); </script> </script> </BODY></BODY></HTML></HTML>



Saving fileSaving file



Opening file in browserOpening file in browser



Writing text to browserWriting text to browser

Lesson learned: Lesson learned:

JavaScript can write text into browser JavaScript can write text into browser window.window.

If we write HTML code to browser then If we write HTML code to browser then browser, in addition to displaying text browser, in addition to displaying text provided by JavaScript, also interprets provided by JavaScript, also interprets HTML code.HTML code.



JavaScriptJavaScript

Navigate to: Navigate to:

http://www.w3schools.com/js/http://www.w3schools.com/js/tryit.asp?tryit.asp?filename=tryjs_statementsfilename=tryjs_statements



Commenting JS with //Commenting JS with //

Only JS code part is shown:Only JS code part is shown:

<script type="text/javascript"> <script type="text/javascript"> // this writes document title in window// this writes document title in windowdocument.write("<h1>First JavaScript</h1>");document.write("<h1>First JavaScript</h1>");// this writes regular statement// this writes regular statementdocument.write("<p>Hello World</p>");document.write("<p>Hello World</p>");// saying Bye to World:// saying Bye to World:document.write("<p>Bye</p>"); document.write("<p>Bye</p>"); </script> </script>



Multi-line commentsMulti-line comments

Try following code (modify existing document):Try following code (modify existing document):

<HTML><HTML><HEAD><HEAD><TITLE> this document is created by (your name here)<TITLE> this document is created by (your name here)</TITLE></TITLE></HEAD></HEAD><BODY> <BODY>

<script type="text/javascript"> <script type="text/javascript"> /* document.write("<h1>First js script</h1>");/* document.write("<h1>First js script</h1>");document.write("<p>Hello World</p>");document.write("<p>Hello World</p>");document.write("<p>Bye</p>"); */document.write("<p>Bye</p>"); */</script> </script> </BODY></BODY></HTML></HTML>



JS Lesson 2JS Lesson 2

Lesson learned – JavaScript allows to Lesson learned – JavaScript allows to store information in variables. Values store information in variables. Values stored in variables are available at any stored in variables are available at any time. Variables can be concatenated with time. Variables can be concatenated with strings and other variables.strings and other variables.



JavaScript OperatorsJavaScript Operators

Operator Description and ExampleOperator Description and ExampleAddition x=y+2Addition x=y+2Subtraction x=y-2Subtraction x=y-2Multiplication x=y*2xMultiplication x=y*2xDivision x=y/2xDivision x=y/2xModulus (division remainder) x=y%2Modulus (division remainder) x=y%2Increment x=++y (compare x=y++)Increment x=++y (compare x=y++)Decrement x=--y (pre-decrement)Decrement x=--y (pre-decrement)



JavaScript Operators - continuedJavaScript Operators - continued

Operator Description and ExampleOperator Description and ExampleEquality x==yEquality x==yNot equal x!=yNot equal x!=yGreater than x>yGreater than x>yGreater or equal x>=yGreater or equal x>=yAnd &&And &&or ||or ||Not !Not !



Assignment OperatorsAssignment Operators

Assignment operators are used to assign Assignment operators are used to assign values to JavaScript variables.values to JavaScript variables.

Given that Given that x=10x=10 and and y=5y=5, expressions , expressions below illustrate assignment operators:below illustrate assignment operators:

x+=y equivalent to x=x+y // new value is 15x+=y equivalent to x=x+y // new value is 15

x/=y equivalent to x = x/y // new value is 2x/=y equivalent to x = x/y // new value is 2



Manipulation with variablesManipulation with variables

String concatenation is achieved using + String concatenation is achieved using + operator. To combine two strings:operator. To combine two strings:

<script type="text/javascript"> <script type="text/javascript">

var txt1="What a very"; var txt1="What a very";

var txt2=“ nice day"; var txt2=“ nice day";

var txt3=txt1+txt2; var txt3=txt1+txt2;

document.write (txt3);document.write (txt3);



Addition operationAddition operationTry this:Try this:

<script = javascript><script = javascript>x=5+5;x=5+5;document.write(x);document.write(x);

x="5"+"5";x="5"+"5";document.write(x);document.write(x);

x=5+"5";x=5+"5";document.write(x);document.write(x);

x="5"+5;x="5"+5;document.write(x);document.write(x);</script> </script>

Result: Adding number and a string result is always a Result: Adding number and a string result is always a string. string.



Operators. ContinuedOperators. Continued

== is equal to x==8 == is equal to x==8

=== is exactly equal to (value and type) === is exactly equal to (value and type) x==5 is truex==5 is truex==="5" is false! x==="5" is false!

x!=8 is true (if x is not 8) - less than 8 or is x!=8 is true (if x is not 8) - less than 8 or is greater than 8 greater than 8

Greater or equal to x>=8Greater or equal to x>=8

<=is less than or equal <=is less than or equal



Logical operationsLogical operations

Logical operation allow application to Logical operation allow application to make a decision which of two (or more) make a decision which of two (or more) execution paths to take. execution paths to take.

In interactive web pages one hardily can In interactive web pages one hardily can avoid using conditional statements.avoid using conditional statements.



Logical Operator in actionLogical Operator in actionThis question is taken from DMV web page:



JS smart decisionsJS smart decisions

Correct answer is M2. However how can Correct answer is M2. However how can we “educate” our HTML code/JavaScript we “educate” our HTML code/JavaScript to pick up correct answer “on fly” – without to pick up correct answer “on fly” – without sending answer to server first and also be sending answer to server first and also be able to answer more complicated able to answer more complicated questions?questions?



DMV requirements/(loose) DMV requirements/(loose) Software specificationsSoftware specifications

From DMV website:From DMV website:

To apply for a motorcycle Class M1 or M2 permit, you will need to:To apply for a motorcycle Class M1 or M2 permit, you will need to:Be at least 15 ½ years of age Be at least 15 ½ years of age Complete application form DL 44 (An original DL 44 form must be Complete application form DL 44 (An original DL 44 form must be submitted. Copies obtained by Xeroxing, faxing, or other methods submitted. Copies obtained by Xeroxing, faxing, or other methods will not be accepted.) will not be accepted.) Have your Have your parents’ or guardians’ signatures on the application form DL 44 If you are If you are under 21under 21, you must provide a completion certificate from , you must provide a completion certificate from the the motorcycle rider training course.If you are If you are over 21over 21, you may complete and provide the completion , you may complete and provide the completion certificate from the certificate from the motorcycle rider training course OROR schedule an appointment at DMV to take the motorcycle driving test.



Checking eligibility for Motorcycle Checking eligibility for Motorcycle course/requirements implementationcourse/requirements implementation

<script type="text/javascript"> <script type="text/javascript"> var students_age = 15.5; // var students_age = 15.5; // hard-coded valuehard-coded valuevar txt1="Not entitled"; var txt1="Not entitled"; // constant// constantvar txt2="Allowed"; var txt2="Allowed"; // constant// constantif (students_age <15.5) // if (students_age <15.5) // logical condition, answer to which is always ‘Yes’ or logical condition, answer to which is always ‘Yes’ or

‘No’‘No’{{document.write (txt1);document.write (txt1);}}elseelse{{document.write (txt2);document.write (txt2);}}</script></script>



Checking eligibility for Motorcycle Checking eligibility for Motorcycle course – improved.course – improved.

<script type="text/javascript"><script type="text/javascript">var students_age = 15.5;var students_age = 15.5;

if (students_age<15.5) if (students_age<15.5) { {

document.write ("sorry, you cannot take any courses or take exam.")document.write ("sorry, you cannot take any courses or take exam.")}}else if (students_age>=15.5 && students_age<16)else if (students_age>=15.5 && students_age<16){{

document.write ("Come to DMV with your legal guardian");document.write ("Come to DMV with your legal guardian");} } elseelse{{

document.write ("No restrictions. Welcome to DMV");document.write ("No restrictions. Welcome to DMV");}}</script></script>



Checking eligibility for Motorcycle course – Checking eligibility for Motorcycle course – adding a function and input field.adding a function and input field.

<HTML><HTML><HEAD></HEAD><HEAD></HEAD><BODY><BODY><FORM<FORM id="form1" runat="server"> id="form1" runat="server"><<PP><input id="Text1" type="text" /></><input id="Text1" type="text" /></PP>><script type="text/javascript"><script type="text/javascript">

function CheckEligibility(args)function CheckEligibility(args){{var students_age = var students_age = Text1Text1.value; //= 15.5;.value; //= 15.5;if (students_age<15.5) if (students_age<15.5) { {

document.write ("sorry, you cannot take any courses.")document.write ("sorry, you cannot take any courses.")}}else if (students_age>=15.5 && students_age<16)else if (students_age>=15.5 && students_age<16){{

document.write ("Come with your legal guardian");document.write ("Come with your legal guardian");} } elseelse{{

document.write ("No restrictions. Welcome to DMV");document.write ("No restrictions. Welcome to DMV");}}}}</script></script></BODY></HTML></BODY></HTML>



Checking eligibility for Motorcycle course – Checking eligibility for Motorcycle course – event handler and function call.event handler and function call.

Create separate HTML document and place the code there:Create separate HTML document and place the code there:

<HTML><HTML><HEAD></HEAD><BODY><FORM id="form1" runat="server"><HEAD></HEAD><BODY><FORM id="form1" runat="server"><P><input id="Textone" type="text" <P><input id="Textone" type="text" OnChange="CheckEligibility(this)OnChange="CheckEligibility(this)"/></P>"/></P><script type="text/javascript"><script type="text/javascript">

function CheckEligibility(args)function CheckEligibility(args){{var students_age = args.value; var students_age = args.value; if (students_age<15.5) if (students_age<15.5) { {

document.write (“<H1>sorry, you cannot take any courses!</H1>")document.write (“<H1>sorry, you cannot take any courses!</H1>")}}else if (students_age>=15.5 && students_age<16)else if (students_age>=15.5 && students_age<16){{


document.write ("No restrictions. Welcome to DMV");document.write ("No restrictions. Welcome to DMV");}}}}</script></BODY></HTML></script></BODY></HTML>



Checking eligibility for Motorcycle course – Checking eligibility for Motorcycle course – with push button.with push button.

Create separate HTML document and place the code there:Create separate HTML document and place the code there:<HTML><HTML><HEAD><script type="text/javascript"><HEAD><script type="text/javascript">function CheckEligibility()function CheckEligibility(){{var age =document.formOne;var age =document.formOne;stuage = age.ageinput.value; stuage = age.ageinput.value;

if (stuage<15.5) if (stuage<15.5) { {

document.write ("sorry, you cannot take any courses.")document.write ("sorry, you cannot take any courses.")}}else if (stuage>=15.5 && stuage<16)else if (stuage>=15.5 && stuage<16){{


document.write ("No restrictions. Welcome to DMV");document.write ("No restrictions. Welcome to DMV");}}return true;return true;}}</script></HEAD></script></HEAD>

<BODY><FORM id="forma" name="formOne" runat="server" onsubmit="return CheckEligibility()"><BODY><FORM id="forma" name="formOne" runat="server" onsubmit="return CheckEligibility()"><P><input id="Textone" name ="ageinput" type="text" size="20"></P><P><input id="Textone" name ="ageinput" type="text" size="20"></P><P><input type="submit" value="Check Eligibility"></P><P><input type="submit" value="Check Eligibility"></P></BODY></HTML></BODY></HTML>



ExerciseExercise

Modify existing code so page prompts you to input your Modify existing code so page prompts you to input your name. After name <full name> is submitted a greeting name. After name <full name> is submitted a greeting appears on the page: “Hello <full name>!” where <full appears on the page: “Hello <full name>!” where <full name> is text user puts in text box.name> is text user puts in text box.Modify existing code so there are two text fields on the Modify existing code so there are two text fields on the page. Upon entering numbers in these fields and clicking page. Upon entering numbers in these fields and clicking push button their sum shall be shownpush button their sum shall be shownModify existing code so page prompts you to input Modify existing code so page prompts you to input radius. After radius value is submitted circumference is radius. After radius value is submitted circumference is calculated. calculated. (http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs(http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html)/JSConstKeyword.html)Advanced. Write a code which takes input temperature Advanced. Write a code which takes input temperature in F and converts it to C.in F and converts it to C.



RandomnessRandomness

Sometimes you need to get random Sometimes you need to get random numbers. JavaScript allows you to access numbers. JavaScript allows you to access Math library, which contains function Math library, which contains function ‘random’.‘random’.

To get random number use construct:To get random number use construct:

var r=Math.random();var r=Math.random();



RandomnessRandomness

<HTML><HTML><HEAD><script type="text/javascript"><HEAD><script type="text/javascript">

function generate_random()function generate_random(){{var rndm=Math.random();var rndm=Math.random();document.write( rndm*1000);document.write( rndm*1000);}}</script></HEAD></script></HEAD>

<BODY><FORM id="forma" name="formOne" runat="server" <BODY><FORM id="forma" name="formOne" runat="server" onsubmit="return generate_random()">onsubmit="return generate_random()">

<P><input type="submit" value="Generate random number"></P><P><input type="submit" value="Generate random number"></P></BODY></HTML></BODY></HTML>



Randomness – with roundingRandomness – with rounding

Random number generation produce floating numbers. Random number generation produce floating numbers. What if we like to have integers? It is possible to round What if we like to have integers? It is possible to round up floating number using function round();up floating number using function round();

Modify existing code:Modify existing code: function CheckEligibility()function CheckEligibility(){{var rndm = Math.random();var rndm = Math.random();var rounded = Math.round(1000*rndm); var rounded = Math.round(1000*rndm); document.write (rounded);document.write (rounded);}}</script></script>

5656

Exercise

1. Modify existing code so script prints random ZIP code

2. Modify existing code so random SSN number is printed

3. Modify existing code so random phone number is printed



Repeating operationRepeating operation

What we like to do is to generate random What we like to do is to generate random number repeatedly. number repeatedly. When some operation is to be repeated When some operation is to be repeated many time it is time to implement loops.many time it is time to implement loops.Loops is a cycle, in which operation(s) Loops is a cycle, in which operation(s) repeated many times.repeated many times.We can control loops by specifying its We can control loops by specifying its starting and ending conditions and also starting and ending conditions and also number of cycles. number of cycles.



LoopsLoopsCreate HTML document. Test it.Create HTML document. Test it.

<html><html><HEAD><HEAD></HEAD></HEAD><body><body><script type="text/javascript"><script type="text/javascript">for (i=0;i<=5; i++)for (i=0;i<=5; i++){{document.write ("Current value of iterator " + i);document.write ("Current value of iterator " + i);document.write ("<BR>");document.write ("<BR>");}}</script></script>

</body></body></html></html>



LoopsLoops

for (i = 0; i <= 5; i++){for (i = 0; i <= 5; i++){////body of the loopbody of the loop

document.write("The number is " + i)document.write("The number is " + i) document.write("<br>") document.write("<br>")}}

i=0 this is loops initial conditioni=0 this is loops initial condition

i<= 5 this is loop end conditioni<= 5 this is loop end condition

i++ value of I is incremented with each iterationi++ value of I is incremented with each iteration



Generating random numbers in Generating random numbers in looploop

<HTML><HTML><HEAD></HEAD><HEAD></HEAD><body><body>

<h1>Random Data Generation</h1><h1>Random Data Generation</h1><form name="form1"><form name="form1">

<script type="text/javascript"><script type="text/javascript">function Foo()function Foo(){{for (i=0; i<20; i++)for (i=0; i<20; i++){{

rndm = Math.random(); rndm = Math.random(); document.write(rndm +"<BR>");document.write(rndm +"<BR>");

}}}}</script></script><br> <br> <input type="button" name="CheckButton" value="Randoms" onClick="Foo()"><input type="button" name="CheckButton" value="Randoms" onClick="Foo()"></form></body></HTML></form></body></HTML>



While loopWhile loop

While loop differs from “for” loop in a way While loop differs from “for” loop in a way that we do not define start condition; there that we do not define start condition; there is no iterator defined.is no iterator defined.

While loop starts when logical condition is While loop starts when logical condition is evaluated to ‘true’ and is running while the evaluated to ‘true’ and is running while the condition keeps evaluating to true.condition keeps evaluating to true.

While loop can be terminated within the While loop can be terminated within the loop. loop.




<html><html><body><body>

<script type="text/javascript"><script type="text/javascript">i = 0i = 0while (i <= 5){while (i <= 5){ document.write("The number is " + i) document.write("The number is " + i) document.write("<br>") document.write("<br>") i++ i++}}</script></script>





If we do not increment variable If we do not increment variable ii in the body of while loop, in the body of while loop, the loop will never terminate. the loop will never terminate.

Browser will keep printing strings in the window until all Browser will keep printing strings in the window until all computer resources are consumed. computer resources are consumed.

This is a case of eternal loop which is never been useful This is a case of eternal loop which is never been useful other that illustrating bad programming design.other that illustrating bad programming design.

while (i <= 5){while (i <= 5){ document.write("The number is " + i) document.write("The number is " + i) document.write("<br>") document.write("<br>") i++i++}}</script></script>



While loop. Modified.While loop. Modified.

<html><body><html><body>

<script type="text/javascript"><script type="text/javascript">i = 0i = 0while (2) while (2) // this condition is always true// this condition is always true{{ document.write("The number is " + i)document.write("The number is " + i) document.write("<br>")document.write("<br>") if (++i>20) if (++i>20) // preincrement. Try this version too i++. Any difference?// preincrement. Try this version too i++. Any difference?{{break;break;}}}}</script></body></html></script></body></html>



Sleep functionSleep function

There is no sleep() function in JavaScript found in many other There is no sleep() function in JavaScript found in many other languages.languages.There are workarounds though, likeThere are workarounds though, like

function pause(millisecs) function pause(millisecs) { { var now = new Date(); var now = new Date(); var exitTime = now.getTime() + millisecs; while(true) var exitTime = now.getTime() + millisecs; while(true) { { now = new Date(); now = new Date(); if(now.getTime() > exitTime) if(now.getTime() > exitTime) return; return; } } } }



Alert BoxAlert BoxTry following code:Try following code:

<HTML><HTML><HEAD><HEAD></HEAD></HEAD><BODY><BODY><script type="text/javascript"><script type="text/javascript">function disp_alert()function disp_alert(){{alert("I am an alert box!");alert("I am an alert box!");}}</script></script><input type="button" onclick="disp_alert()" value="Display alert box" /><input type="button" onclick="disp_alert()" value="Display alert box" /></BODY></BODY></HTML></HTML>



Expected resultExpected result

6868

Exercise

Modify one of existing scripts so:User enters credit card number in text box and presses

Submit button. If number of digits not equal to 16 an alert box is shown.

HTML part of the code:

<BODY><FORM id="forma" name="formOne" <BODY><FORM id="forma" name="formOne" runat="server" onsubmit="return CheckCC()">runat="server" onsubmit="return CheckCC()">

<P><input id="Textone" name =“ccinput" type="text" <P><input id="Textone" name =“ccinput" type="text" size="20"></P>size="20"></P>

<P><input type="submit" value="Check CC"></P><P><input type="submit" value="Check CC"></P></BODY></HTML></BODY></HTML>



Operations with Strings - Changing Operations with Strings - Changing CaseCase

<HTML><HTML><HEAD><HEAD><script type="text/javascript"><script type="text/javascript">function toupper_string()function toupper_string(){{var str = myForm.text1.value; var str = myForm.text1.value; str = str.toUpperCase(); // try also toLower()str = str.toUpperCase(); // try also toLower()return str;return str;}}</script></script></HEAD></HEAD>

<form name="myForm"><form name="myForm"> Reversing string: <input type="text" name="text1" size="50">Reversing string: <input type="text" name="text1" size="50"> <br><br><br><br> <input type="button" value="Change to Upper" <input type="button" value="Change to Upper"

onClick="myForm.text1.value=toupper_string()">onClick="myForm.text1.value=toupper_string()"></form></body></html></form></body></html>



Operations with Strings Counting Operations with Strings Counting LettersLetters

<HTML><HTML><HEAD><HEAD><script type="text/javascript"><script type="text/javascript">function count_string()function count_string(){{var str = myForm.text1.value; var str = myForm.text1.value; return str.length;return str.length;}}</script></script></HEAD></HEAD><form name="myForm"><form name="myForm"> Reversing string: <input type="text" name="text1" size="50">Reversing string: <input type="text" name="text1" size="50"> <br><br> Characters in string: <input type="text" name="counter" size="12"> Characters in string: <input type="text" name="counter" size="12"> <br><br> <input type="button" value="Change to Upper" onClick="myForm.counter.value=count_string()"><input type="button" value="Change to Upper" onClick="myForm.counter.value=count_string()"></form></form></body></body></html></html>



Counting Letters - automaticallyCounting Letters - automatically<HTML><HTML><HEAD><HEAD><script type="text/javascript"><script type="text/javascript">

function count_string()function count_string(){{var str = myForm.text1.value; var str = myForm.text1.value; return str.length;return str.length;}}</script></script></HEAD><BODY></HEAD><BODY>

<form name="myForm"><form name="myForm"> Reversing string: <input type="text" name="text1" size="50" Reversing string: <input type="text" name="text1" size="50"

onkeyup="myForm.counter.value=count_string()">onkeyup="myForm.counter.value=count_string()"> <br><br> Characters in string: <input type="text" name="counter" size="12" > Characters in string: <input type="text" name="counter" size="12" > <br><br> <input type="button" value="Change to Upper" onClick="myForm.counter.value=count_string()"><input type="button" value="Change to Upper" onClick="myForm.counter.value=count_string()"></form></body></html></form></body></html>



SubstringSubstring<HTML><HEAD><HTML><HEAD><script type="text/javascript"><script type="text/javascript">function trim_string()function trim_string(){{var str = myForm.text1.value;var str = myForm.text1.value;var offset = myForm.offsett.value;var offset = myForm.offsett.value;var charn = myForm.charnum.value;var charn = myForm.charnum.value;str = str.substr(offset,charn); str = str.substr(offset,charn); return str;return str;}}</script></script></HEAD></HEAD><form name="myForm"><form name="myForm"> Enter text: <input type="text" name="text1" size="50" >Enter text: <input type="text" name="text1" size="50" > <br><br> Enter start position: <input type="text" name="offsett" size="12"> Enter start position: <input type="text" name="offsett" size="12"> <br><br> Enter number of chars to trim: <input type="text" name="charnum" size="12">Enter number of chars to trim: <input type="text" name="charnum" size="12"> <BR> <BR> <input type="button" value="Trim String" onClick="myForm.text1.value=trim_string()"><input type="button" value="Trim String" onClick="myForm.text1.value=trim_string()"> <br><br>

</form></body></html></form></body></html>



Slicing StringsSlicing Strings

string.slice(num1, num2)string.slice(num1, num2) string.slice(num) string.slice(num)

The slice() method returns the characters The slice() method returns the characters between the indexed positions num1 and between the indexed positions num1 and num2.The first character is in position 0.If num2 num2.The first character is in position 0.If num2 is a negative number, the string counts from the is a negative number, the string counts from the end of the string to end the slice.If passing a end of the string to end the slice.If passing a single index, the method will return all single index, the method will return all characters until the end of the string.characters until the end of the string.



ArraysArrays

New data structure - ArrayNew data structure - Array

single variablesingle variable single valuesingle value

Compare: var temp = 12Compare: var temp = 12

single variablesingle variable multiple valuesmultiple values

var tempArray = (“orange”,var tempArray = (“orange”,

“ “apple”,apple”,

“ “peach” );peach” );



ArraysArrays

str.split(<pattern>) function returns not a str.split(<pattern>) function returns not a single value, but list of values. It is said single value, but list of values. It is said that split returns an ARRAY, or list.that split returns an ARRAY, or list.

E.g.:E.g.:

var tempArray = str.split(' ').sort();var tempArray = str.split(' ').sort();

We split (cut) string str into several peaces.We split (cut) string str into several peaces.

We cut on empty spaces (specified by ‘ ‘).We cut on empty spaces (specified by ‘ ‘).



ArraysArrays

Alternatively, we can declare array and place Alternatively, we can declare array and place some words into it:some words into it:

E.g. (HTML header and body tags omitted):E.g. (HTML header and body tags omitted):<script type="text/javascript"><script type="text/javascript">

var nameArray = new Array(“Element 1",“elemenvar nameArray = new Array(“Element 1",“element 2",“element 3",“arr_el 4",“this 5",“finally 6")t 2",“element 3",“arr_el 4",“this 5",“finally 6")

for (i=0; i<nameArray.length; i++){for (i=0; i<nameArray.length; i++){ document.write(nameArray[i] + "<br>") document.write(nameArray[i] + "<br>")} // iterating through loop} // iterating through loop

</script></body></html></script></body></html>



ArraysArrays

Declaring an array nameArray and populating it at the Declaring an array nameArray and populating it at the same time (initializing):same time (initializing):

var nameArray = new Array(“Element 1",“element 2",“elemvar nameArray = new Array(“Element 1",“element 2",“element 3",“arr_el 4",“this 5",“finally 6");ent 3",“arr_el 4",“this 5",“finally 6");

We can access each element of the array using its index. We can access each element of the array using its index. Array index starts at 0, so Array index starts at 0, so nameArray[0]nameArray[0] gives us value gives us value of first element.of first element.

for (i=0; i<nameArray.length; i++){for (i=0; i<nameArray.length; i++){ document.write(nameArray[i] + "<br>") document.write(nameArray[i] + "<br>")}}

Array.length function tells us (returns integer) how many Array.length function tells us (returns integer) how many elements are in the array.elements are in the array.



Arrays. Splitting string.Arrays. Splitting string.<HTML><HEAD></HEAD><body><HTML><HEAD></HEAD><body><h1>Word count</h1><h1>Word count</h1><form name="formOne"><form name="formOne"><script type="text/javascript"><script type="text/javascript">

function Foo()function Foo(){{var myStr = formOne.Results.value;var myStr = formOne.Results.value;var tempArray = myStr.split(' ');var tempArray = myStr.split(' ');return tempArray.length;return tempArray.length;}}</script></script>

<br> <br> You entered <input type="text" name="NameLength"> words.<BR>You entered <input type="text" name="NameLength"> words.<BR>

<TEXTAREA NAME="Results" ROWS=10 COLS=80></TEXTAREA><BR><TEXTAREA NAME="Results" ROWS=10 COLS=80></TEXTAREA><BR><input type="button" name="CheckButton" value="Calculate" <input type="button" name="CheckButton" value="Calculate"

onClick="formOne.NameLength.value=Foo()">onClick="formOne.NameLength.value=Foo()"> </form></body></HTML> </form></body></HTML>



ExerciseExercise

Modify code from previous slide so Modify code from previous slide so JavaScript calculates how many letters JavaScript calculates how many letters (instead of words) are in the string.(instead of words) are in the string.

Advanced. Modify code from previous Advanced. Modify code from previous slide so JavaScript calculates how many slide so JavaScript calculates how many times letter a appears in the string.times letter a appears in the string.



Arrays. Reversing stringArrays. Reversing string<HTML><HEAD></HEAD><BODY><H1>Reversing Words</H1><form <HTML><HEAD></HEAD><BODY><H1>Reversing Words</H1><form

name="formOne">name="formOne"><script type="text/javascript"><script type="text/javascript">function Foo()function Foo(){{var reversedStr = '';var reversedStr = '';var myStr = formOne.Results.value;var myStr = formOne.Results.value;var tempArray = myStr.split('');var tempArray = myStr.split('');for (i=tempArray.length-1; i>=0; i--)for (i=tempArray.length-1; i>=0; i--){{ reversedStr += tempArray[i];reversedStr += tempArray[i];}}return reversedStr;return reversedStr;}}</script><BR><TEXTAREA NAME="Results" ROWS=10 COLS=80></TEXTAREA> </script><BR><TEXTAREA NAME="Results" ROWS=10 COLS=80></TEXTAREA>

<BR><BR><input type="button" name="CheckButton" value="Reverse" <input type="button" name="CheckButton" value="Reverse"

onClick="formOne.Results.value=Foo()">onClick="formOne.Results.value=Foo()"> </form></body></HTML> </form></body></HTML>



Arrays. Validating input – part 1Arrays. Validating input – part 1<HTML><HEAD></HEAD><BODY><H1>Validating Input</H1><HTML><HEAD></HEAD><BODY><H1>Validating Input</H1>

<form name="formOne"><script type="text/javascript"><form name="formOne"><script type="text/javascript">

function Foo()function Foo()

{{

var myStr = formOne.text1.value;var myStr = formOne.text1.value;

myArray = myStr.split('');myArray = myStr.split('');

for (j=0; j<myArray.length; j++)for (j=0; j<myArray.length; j++)

{{

if ((myArray[j].charCodeAt()<48)||(myArray[j].charCodeAt()>57))if ((myArray[j].charCodeAt()<48)||(myArray[j].charCodeAt()>57)){{

alert("Only numeric values are accepted for age!");alert("Only numeric values are accepted for age!");

break;break;

}}

}}

if (myStr.length > 3)if (myStr.length > 3)

{{

alert("Age value cannot exceed three digits!");alert("Age value cannot exceed three digits!");

}}

return;return;

}}



Arrays. Validating input – part 2Arrays. Validating input – part 2

Rest of the code:Rest of the code:

</script></script>

<br> Your age: <br> Your age:

<input type="text" name="text1" size=“10"><input type="text" name="text1" size=“10">

<BR><BR>

<input type="button" name="CheckButton" value="Register" onClick="Foo()"><input type="button" name="CheckButton" value="Register" onClick="Foo()">

</FORM></FORM>

</BODY></BODY>

</HTML></HTML>



EventsEventsonAbort( ) ( ) onActivate( ) ( ) onAfterPrint( ) ( ) onAfterUpdate( ) ( )

onBeforeActivate( ) ( ) onBeforeCopy( ) ( ) onBeforeCut( ) ( ) onBeforeDeactivate( ) ( ) onBeforeEditFocus( ) ( ) onBeforePaste( ) ( ) onBeforePrint( ) ( ) onBeforeUnload( ) onBeforeUpdate( ) onBlur( ) ( ) onBeforeUpdate( ) onBlur( ) onBounce( ) onCellChange( ) onChange( ) onClick( ) ononBounce( ) onCellChange( ) onChange( ) onClick( ) on

ContextMenu( ) onControlSelect( ) onCopy( ) onCut(ContextMenu( ) onControlSelect( ) onCopy( ) onCut( ) onDataAvailable( ) onDatasetChange( ) onDatasetC ) onDataAvailable( ) onDatasetChange( ) onDatasetComplete( ) onDblClick( ) onDeactivate( ) onDrag( ) onomplete( ) onDblClick( ) onDeactivate( ) onDrag( ) onDragEnd( ) onDragEnter( ) onSneeze () ;)DragEnd( ) onDragEnter( ) onSneeze () ;)



Combo Box selectionCombo Box selection<html><html><head><head><script type="text/javascript"><script type="text/javascript">function put(){function put(){ txt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].texttxt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].text document.forms[0].favorite.value=txtdocument.forms[0].favorite.value=txt}}</script></head><body><form></script></head><body><form>Select your favorite car model:Select your favorite car model:<select name="myList" onchange="put()"><select name="myList" onchange="put()"> <option>BMW</option><option>BMW</option> <option>Mercedes</option><option>Mercedes</option> <option>Acura</option><option>Acura</option> <option>Buick</option><option>Buick</option> <option>Audi</option><option>Audi</option> <option>Caddy</option><option>Caddy</option></select></select><br><br><br><br>Your favorite car indeed is: <input type="text" name="favorite" size="20">Your favorite car indeed is: <input type="text" name="favorite" size="20"></form></body></html></form></body></html>



Select statementSelect statementModify previous example so code looks like:Modify previous example so code looks like:

txt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].texttxt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].text switch(txt){switch(txt){ case "BMW" :case "BMW" :

phrase = "Ah, driving Beemer, heh?"; phrase = "Ah, driving Beemer, heh?"; break;break; case "Mercedes" : case "Mercedes" : phrase = "You too?";phrase = "You too?"; break;break; case "Acura" :case "Acura" : phrase = "Not bad!";phrase = "Not bad!"; break;break; case "Buick" :case "Buick" : phrase = "Got enough room?";phrase = "Got enough room?"; break;break; case "Audi" :case "Audi" : phrase = "German car too";phrase = "German car too"; break; break; case "Audi" :case "Audi" : phrase = "Cool dude!";phrase = "Cool dude!"; break;break; default :default : phrase = "Really bicycle?";phrase = "Really bicycle?"; break;break; } } document.forms[0].favorite.value=phrase;document.forms[0].favorite.value=phrase;



How Select statement worksHow Select statement worksModify previous example so code looks like:Modify previous example so code looks like:

switch(txt){ // switch(txt){ // this is inputthis is input case "BMW" : // case "BMW" : // this is one choice of manythis is one choice of many

phrase = "Ah, driving Beemer, heh?"; phrase = "Ah, driving Beemer, heh?"; break; // break; // if choice is evaluated to true we make assignment and exitif choice is evaluated to true we make assignment and exit case "Mercedes" : case "Mercedes" : phrase = "You too?";phrase = "You too?"; break;break;default : //default : // this is default value. If no choice is evaluated to true execution this is default value. If no choice is evaluated to true execution

goes // to defaultgoes // to default phrase = "Really bicycle?";phrase = "Really bicycle?"; break;break; } } document.forms[0].favorite.value=phrase;document.forms[0].favorite.value=phrase;



DateTimeDateTime<HTML><HTML><HEAD><HEAD><script type="text/javascript"><script type="text/javascript">function get_curr_date()function get_curr_date(){{var myDate = new Date(); var myDate = new Date(); return myDate.toLocaleString();return myDate.toLocaleString();}}</script></script></HEAD></HEAD><body><body><h1>Getting current Date and Time</h1><h1>Getting current Date and Time</h1><form name="form1"><form name="form1"><input type="text" size=50 name="result"><BR><input type="text" size=50 name="result"><BR><input type="button" name="CheckButton" value="Get current Date" <input type="button" name="CheckButton" value="Get current Date"

onClick="document.form1.result.value ='' + get_curr_date()">onClick="document.form1.result.value ='' + get_curr_date()"><br> <br> </form></form></body></body></HTML></HTML>



DateTimeDateTimeIt is possible to retrieve parts of Date and Time, e.g. YEAR or MONTH. It is possible to retrieve parts of Date and Time, e.g. YEAR or MONTH. There are methods getYear(), getDay(), getMonth(), getSeconds(). Value of YEAR is given as number of years There are methods getYear(), getDay(), getMonth(), getSeconds(). Value of YEAR is given as number of years

from 1900, so to get current year add 1900:from 1900, so to get current year add 1900:

<HTML><HTML><HEAD><HEAD><script type="text/javascript"><script type="text/javascript">function get_curr_date()function get_curr_date(){{var myDate = new Date(); var myDate = new Date(); return myDate.getYear()+1900;return myDate.getYear()+1900;}}</script></script></HEAD></HEAD><body><body><h1>Getting current Year</h1><h1>Getting current Year</h1><form name="form1"><form name="form1"><input type="text" size=50 name="result"><BR><input type="text" size=50 name="result"><BR><input type="button" name="CheckButton" value="Get current Year" onClick="document.form1.result.value <input type="button" name="CheckButton" value="Get current Year" onClick="document.form1.result.value

='' + get_curr_date()">='' + get_curr_date()"><br> <br> </form></form></body></body></HTML></HTML>



Using DateTime valueUsing DateTime value

Last modified date:Last modified date:

<html><html> <script language="JavaScript"><script language="JavaScript"> document.write("This document was last document.write("This document was last

modified on ",document.lastModified);modified on ",document.lastModified); </script></script> </html></html>



Field validation.Field validation.<HTML><HEAD></HEAD><BODY><H1>Validating Fields</H1><HTML><HEAD></HEAD><BODY><H1>Validating Fields</H1><form name="formOne"><script type="text/javascript"><form name="formOne"><script type="text/javascript">function Foo()function Foo(){{var myStr = formOne.text1.value;var myStr = formOne.text1.value;if (myStr.length > 2)if (myStr.length > 2){{ alert("First name shall not exceed 2 characters!");alert("First name shall not exceed 2 characters!");}}return;return;}}</script></script><br> First name: <input type="text" name="text1" size="50"><br> First name: <input type="text" name="text1" size="50"><BR><input type="button" name="CheckButton" value="Register" <BR><input type="button" name="CheckButton" value="Register"

onClick="Foo()">onClick="Foo()"> </FORM></BODY></HTML> </FORM></BODY></HTML>



Regular ExpressionsRegular Expressions

1. Navigate to 1. Navigate to http://www.java2s.com/Code/JavaScript/Dhttp://www.java2s.com/Code/JavaScript/Development/RegularExpressionTester.htmevelopment/RegularExpressionTester.htm

2. Copy code to NotePad. Save it as 2. Copy code to NotePad. Save it as Regex.html (type ‘All Files’)Regex.html (type ‘All Files’)

3. Open Regex.html3. Open Regex.html



Regex testerRegex tester



Patterns – symbols with special Patterns – symbols with special meaningmeaning

\d stands for one digit\d stands for one digit

\d{n,m} stand for minimum n digits, maximum m\d{n,m} stand for minimum n digits, maximum m

. Stands for any character, but newline. Stands for any character, but newline

\s stands for space\s stands for space

\S stands for anything but space\S stands for anything but space

\D stands for anything but digit\D stands for anything but digit

.* zero or more characters.* zero or more characters

.? One character.? One character




\w Matches any word character (alphanumeric).\w Matches any word character (alphanumeric).\W Matches any non-word character.\W Matches any non-word character.\s Matches any whitespace character (tab, newline, carriage \s Matches any whitespace character (tab, newline, carriage return, form feed, vertical tab).return, form feed, vertical tab).\S Matches any non-whitespace character.\S Matches any non-whitespace character.[\b] Matches a backspace.[\b] Matches a backspace.. Matches any character except a newline.. Matches any character except a newline.[...] Matches any one character within the brackets.[...] Matches any one character within the brackets.[^...] Matches any one character not within the brackets.[^...] Matches any one character not within the brackets.[x-y] Matches any character in the range of x to y.[x-y] Matches any character in the range of x to y.[^x-y] Matches any character not in the range of x to y.[^x-y] Matches any character not in the range of x to y.




{x,y} Matches the previous item at least x times but not to {x,y} Matches the previous item at least x times but not to exceed y times.exceed y times.{x,} Matches the previous item at least x times.{x,} Matches the previous item at least x times.{x} Matches the previous item exactly x times.{x} Matches the previous item exactly x times.? Matches the previous item once or not at all.? Matches the previous item once or not at all.+ Matches the previous item at least once.+ Matches the previous item at least once.* Matches the previous item any number of times or not at all.* Matches the previous item any number of times or not at all.| Matches the expression to the left or the right of the | | Matches the expression to the left or the right of the | character.character.(...) Group everything inside parentheses into a subpattern.(...) Group everything inside parentheses into a subpattern.\x Matches the same characters that resulted from the \x Matches the same characters that resulted from the subpattern in group number x. Groups, which are designated subpattern in group number x. Groups, which are designated with parentheses, are numbered from left to right.with parentheses, are numbered from left to right.^ Matches the beginning of the string or beginning of a line, in ^ Matches the beginning of the string or beginning of a line, in multiline matches.multiline matches.




$ Matches the end of the string or end of $ Matches the end of the string or end of a line, in multi-line matches.a line, in multi-line matches.

\b Matches the position between a word \b Matches the position between a word character and a non-word character.character and a non-word character.

\B Matches the position that is not \B Matches the position that is not between a word character and a non-word between a word character and a non-word character.character.



Regex ExerciseRegex Exercise

Substitute phone number 123-4567 with (408) Substitute phone number 123-4567 with (408) 555 5555555 5555

Substitute <hyphen.> with hyphen (-).Substitute <hyphen.> with hyphen (-).

Susbstitute all capital letters with ‘A’Susbstitute all capital letters with ‘A’

Substitute all ‘a’ articles with ‘the’Substitute all ‘a’ articles with ‘the’

Find out if original string contains word digitFind out if original string contains word digit

What following regex matches: .+?@.?+\....What following regex matches: .+?@.?+\....

Which regex can be used to match person first Which regex can be used to match person first name?name?



String Substitution with RegexString Substitution with Regex

string.replace(regexpression, replacestring)string.replace(regexpression, replacestring)

The replace( ) method searches the string for The replace( ) method searches the string for the regular expression passed to the method.the regular expression passed to the method.

If a match is found, the method returns a new If a match is found, the method returns a new string with that match replaced with the string with that match replaced with the replacement string passed to the method.replacement string passed to the method.



Quantifiers and optionsQuantifiers and options

+ stands for one or more+ stands for one or more

* stands for zero or more characters* stands for zero or more characters

? stands for one character ? stands for one character

i – case insensitivei – case insensitive

g – global search g – global search

m – search across multiple linesm – search across multiple lines

User Screen propertiesUser Screen properties <html><html> <head> <head> <script language="JavaScript1.2"> <script language="JavaScript1.2">  --> </script> </script> </head> </head> <body> <body> <form name="myForm"> <form name="myForm"> <input type=BUTTON value="Click to See Screen Properties" name="myButton" <input type=BUTTON value="Click to See Screen Properties" name="myButton"

onClick="openWin()">onClick="openWin()"> </form> </form> </body> </body> </html> </html>

OnMouseOverOnMouseOver<HTML><HTML><HEAD><HEAD><TITLE>Using functions as event handlers</TITLE><TITLE>Using functions as event handlers</TITLE><SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript">//--></SCRIPT></SCRIPT></HEAD></HEAD><BODY><BODY><H1>Using functions as event handlers</H1><H1>Using functions as event handlers</H1><P><A HREF="somewhere" onClick="return false" onMouseOver="confirmLink<P><A HREF="somewhere" onClick="return false" onMouseOver="confirmLink()">Confirms()">Confirmswhether you want to connect via this link.</A></P>whether you want to connect via this link.</A></P></BODY></BODY></HTML></HTML>



Hanging document propertiesHanging document properties

<html><html><head><head><title>properties_title</title><title>properties_title</title><script language="JavaScript"><script language="JavaScript"> function function1() { function function1() { document.title = "This is the new title "; document.title = "This is the new title "; } } function function2() { function function2() { var n = document.title; alert(n); var n = document.title; alert(n); } }</script></head></script></head><body><body><button onclick="function1();">Click here to change the title of this p<button onclick="function1();">Click here to change the title of this page</button>age</button><button onclick="function2();">Click here to display the title of this p<button onclick="function2();">Click here to display the title of this page</button>age</button></body></html></body></html>



Alert box with multi linesAlert box with multi lines<HTML><HTML><HEAD><HEAD><SCRIPT type="text/javascript"><SCRIPT type="text/javascript">function disp_alert()function disp_alert(){{alert("Hello again! This is line number one" + '\n' + "and here is line number two alert("Hello again! This is line number one" + '\n' + "and here is line number two

in alert box!");in alert box!");}}</SCRIPT></SCRIPT></HEAD></HEAD><BODY><BODY>

<input type="button" onclick="disp_alert()" value="Display alert box" /><input type="button" onclick="disp_alert()" value="Display alert box" />

</BODY></BODY></HTML></HTML>



Confirmation message boxConfirmation message box<html><html><head><head><script type="text/javascript"><script type="text/javascript">function disp_confirm()function disp_confirm(){{var r=confirm("Press a button");var r=confirm("Press a button");if (r==true)if (r==true) {{ document.write("You pressed OK!");document.write("You pressed OK!"); }}elseelse {{ document.write("You pressed Cancel!");document.write("You pressed Cancel!"); }}}}</script></script></head></head><body><body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" /><input type="button" onclick="disp_confirm()" value="Display a confirm box" />




PromptPrompt

<html><head><html><head><script type = "text/javascript"><script type = "text/javascript">function verify_password()function verify_password(){{var docpwrd = prompt("Specify the password for this document:", "")var docpwrd = prompt("Specify the password for this document:", "");; if (docpwrd == "pwrdfile") { if (docpwrd == "pwrdfile") { self.location = docpwrd + ".htm"; self.location = docpwrd + ".htm"; } else { } else { alert("That is not the correct password."); alert("That is not the correct password."); } }}}</script></script></head><body><form></head><body><form> <input type="button" value="Open Password Protected File." name <input type="button" value="Open Password Protected File." name="OpenFile" onClick="verify_password()"></p>="OpenFile" onClick="verify_password()"></p></form></body></html></form></body></html>



Our first interactive pageOur first interactive page<html><html><head><head><script type="text/javascript"><script type="text/javascript">function disp_prompt()function disp_prompt(){{var name=prompt("Please enter your name",“Stirlitz");var name=prompt("Please enter your name",“Stirlitz");if (name!=null && name!="")if (name!=null && name!="") {{ document.write("Hello " + name + "! How are you today?");document.write("Hello " + name + "! How are you today?"); }}elseelse{{

Document.write (“We know who you are – FANTONAS”);Document.write (“We know who you are – FANTONAS”);

}}}}</script></script></head></head><body><body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" /><input type="button" onclick="disp_prompt()" value="Display a prompt box" />




InteractionInteraction

Lesson – we achieved interaction with web Lesson – we achieved interaction with web pages, never possible before with web pages, never possible before with web pages created with static languages, like pages created with static languages, like HTML and XML.HTML and XML.

With JavaScript we can blow life into dead With JavaScript we can blow life into dead HTML code and enjoy the result! HTML code and enjoy the result!



JavaScript - Detecting BrowserJavaScript - Detecting Browser

<html><html><HEAD><HEAD>

<title>Browser infomation</title><title>Browser infomation</title><SCRIPT><SCRIPT>document.write('Browser: ' + navigator.appName);document.write('Browser: ' + navigator.appName);document.write('<br>Version: ' + navigator.appVersion);document.write('<br>Version: ' + navigator.appVersion);document.write('<br>Codename: ' + navigator.appCodeName);document.write('<br>Codename: ' + navigator.appCodeName);document.write('<br>Language: ' + navigator.language);document.write('<br>Language: ' + navigator.language);document.write('<br>Platform: ' + navigator.platform);document.write('<br>Platform: ' + navigator.platform);</SCRIPT></SCRIPT></HEAD></HEAD><BODY><BODY></body></HTML></body></HTML>



Exception HandlingException Handling

To catch JavaScript exception following To catch JavaScript exception following constructs are used:constructs are used:

trytry

catchcatch

FinallyFinally

evaleval



Exception HandlingException Handling

<html><html><head><head><title>Try Catch Example</title><title>Try Catch Example</title><script type="text/javascript"><script type="text/javascript">try {try { evaleval("a -=++-% b"); // bad statement("a -=++-% b"); // bad statement} catch (oException) {} catch (oException) { alert("An exception is thrown."); alert("An exception is thrown.");} finally {} finally { alert(“Exception was handled."); alert(“Exception was handled.");}}

</script></head><body></body></html></script></head><body></body></html>



JavaScript keywordsJavaScript keywords

break else New varbreak else New varcase finally return voidcase finally return voidcatch for switch whilecatch for switch whilecontinue function This withcontinue function This withdefault if throwdefault if throwdelete in trydelete in trydo instanceof typeofdo instanceof typeof

112112

<SCRIPT> tag attribute

The HTML 4 specification standardizes the <The HTML 4 specification standardizes the <scriptscript> tag, > tag, but it deprecates the language attribute because there is but it deprecates the language attribute because there is no standard set of names for scripting languages. no standard set of names for scripting languages. Instead, the specification prefers the use of a type Instead, the specification prefers the use of a type attribute that specifies the scripting language as a MIME attribute that specifies the scripting language as a MIME type. Thus, in theory, the preferred way to embed a type. Thus, in theory, the preferred way to embed a JavaScript JavaScript scriptscript is with a tag that looks like this: is with a tag that looks like this:

<<scriptscript type=" type="text/javascripttext/javascript"> In practice, the language "> In practice, the language attribute is still better supported than this new type attribute is still better supported than this new type attribute. attribute.

113113

JS attribute

The HTML 4 specification also defines a standard (and The HTML 4 specification also defines a standard (and useful) way to specify the default scripting language for useful) way to specify the default scripting language for an entire HTML file. If JavaScript is the only scripting an entire HTML file. If JavaScript is the only scripting language in a file, simply including the following line in language in a file, simply including the following line in the <head> of the document is enough: the <head> of the document is enough:

<meta http-equiv="Content-<meta http-equiv="Content-ScriptScript-Type" -Type" content="content="text/javascripttext/javascript"> Then we can safely use "> Then we can safely use JavaScript scripts without specifying the language or JavaScript scripts without specifying the language or type attributes. type attributes.

However!

114114

JS attribute

Since JavaScript is the default scripting language, there Since JavaScript is the default scripting language, there is no need to use the language attribute to specify the is no need to use the language attribute to specify the language in which a language in which a scriptscript is written. However, there is is written. However, there is an important secondary purpose for this attribute: it can an important secondary purpose for this attribute: it can also be used to specify what version of JavaScript is also be used to specify what version of JavaScript is required to interpret a required to interpret a scriptscript. When you specify the . When you specify the language="JavaScript" attribute for a language="JavaScript" attribute for a scriptscript, any , any JavaScript-enabled browser will run the JavaScript-enabled browser will run the scriptscript. In cases, . In cases, when script uses the exception-handling features of when script uses the exception-handling features of JavaScript 1.5 it might be a problem. JavaScript 1.5 it might be a problem.

115115

JS attribute

To avoid syntax errors in browsers that do not support To avoid syntax errors in browsers that do not support this version of the language embedding this version of the language embedding scriptscript with this with this tag is preferred: tag is preferred:

<<scriptscript language="JavaScript1.5"> If you do this, only language="JavaScript1.5"> If you do this, only browsers that support JavaScript 1.5 (and its exception-browsers that support JavaScript 1.5 (and its exception-handling features) will run the handling features) will run the scriptscript; any others will ; any others will ignore it.ignore it.



INTERVIEW QUESTIONS 1INTERVIEW QUESTIONS 1

Q. Q. What are JavaScript data types?What are JavaScript data types? – – A Number, String, Boolean, Function, Object, Null, A Number, String, Boolean, Function, Object, Null,

Undefined. Undefined. Q Q What boolean operators does JavaScript What boolean operators does JavaScript

support?support? - &&, || and ! - &&, || and ! Q Q What does "1"+2+4 evaluate to?What does "1"+2+4 evaluate to? - Since 1 is a - Since 1 is a

string, everything evaluated to string, so the string, everything evaluated to string, so the result is 124. result is 124.

Q Q How about 2+5+"8"?How about 2+5+"8"? - Since 2 and 5 are - Since 2 and 5 are integers, this is number arithmetic, since 8 is a integers, this is number arithmetic, since 8 is a string, it’s concatenation, so 78 is the result. string, it’s concatenation, so 78 is the result.



INTERVIEW QUESTIONS 1INTERVIEW QUESTIONS 1Javascript Interview QuestionsJavascript Interview Questions

1. What is JavaScript?1. What is JavaScript?

JavaScript is a platform-independent,event-driven, interpreted client-side scripting and JavaScript is a platform-independent,event-driven, interpreted client-side scripting and

programming language developed by Netscape Communications Corp. and Sun programming language developed by Netscape Communications Corp. and Sun Microsystems.Microsystems.2.How to read and write a file using javascript?2.How to read and write a file using javascript?

I/O operations like reading or writing a file is not possible with client-side javascript.I/O operations like reading or writing a file is not possible with client-side javascript.However , this can be done by coding a Java applet that reads files for the script. However , this can be done by coding a Java applet that reads files for the script.

3.How to detect the operating system on the client machine? 3.How to detect the operating system on the client machine?

In order to detect the operating system on the client machine, the navigator.appVersion string In order to detect the operating system on the client machine, the navigator.appVersion string (property) should be used. (property) should be used.

What should appear at the very end of your JavaScript? The </script LANGUAGE=”JavaScript”> tag What should appear at the very end of your JavaScript? The </script LANGUAGE=”JavaScript”> tag



JavaScriptJavaScript

function Finish()function Finish()

{{

return ‘end’; return ‘end’;

}}



Interview with Brendan Eich Interview with Brendan Eich

http://www.infoworld.com/archives/http://www.infoworld.com/archives/emailPrint.jsp?R=printThis&A=/article/emailPrint.jsp?R=printThis&A=/article/08/06/23/eich-javascript-interview_1.html08/06/23/eich-javascript-interview_1.html

1 david shtern, ph.d., © 2008, all rights reserved. 1 javascript for qa engineers by david shtern

Documents

david shtern slide

javascript slide

free slide

banks slide

bank loan

browser javascript

basics of javascript

bank branches