Test Automation For Web-Based Applications Portnov Computer School Presenter: Ellie Skobel

2 Day 4 JavaScript Basics

 An object-oriented scripting language used to enable programmatic access to objects within the client application look  Was designed to look like Java  Unrelated to the Java programming language despite the name  Weakly typed  Almost entirely object-based (JavaScript objects are associative arrays) 3

 Originally developed by Brendan Eich of Netscape  Originally name Mocha, which was later renamed to LiveScript, and finally to JavaScript  The language's name is the result of a co- marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their (dominant at the time) browser 4

Most popular:  Internet Explorer: ◦ Microsoft Visual Studio ◦ Microsoft Script Editor ◦ Microsoft Script Debugger  Firefox ◦ Firebug ◦ Venkman  Opera ◦ DragonFly  Safari ◦ WebKit's Web Inspector includes a JavaScript debugger 5

 Open Firebug  Click the “Console” tab 6 Click the Firebug icon to open the Firebug add-on

 Click the downward triangle on the Console tab  Select “Enable” 7 Click the downward triangle Select “Enabled”

 You can enter JavaScript commands at the prompt and have the interpreter respond immediately. 8 Enter commands here

 JavaScript variables are used to hold values or expressions.  Variable can have a short or long names  Rules for JavaScript variable names: ◦ Variable names are case sensitive (y and Y are two different variables) ◦ Variable names must begin with a letter or the underscore character  Creating variables in JavaScript is most often referred to as "declaring" variables. 9

 Declare JavaScript variables with the var statement: ◦ var x; var carname;  Assign values to the variables when you declare them:  var x=5; var carname="Volvo"; 10 The variables are empty (they have no values yet)

 If you redeclare a JavaScript variable, it will not lose its original value. var x=5; var x;  If you assign values to variables that have not yet been declared, the variables will automatically be declared. ◦ These statements have the same effect : x=5; var x=5; 11 x is empty

 You can do arithmetic operations with JavaScript variables: x=12;y=x-5;z=y+3; var total = y+z; 12 Operat or DescriptionExampleResult +Additionx=y+2x=7 -Subtractionx=y-2x=3 *Multiplicationx=y*2x=10 /Divisionx=y/2x=2.5 %Modulus (division remainder)x=y%2x=1 ++Incrementx=++yx=6 --Decrementx=--yx=4

 The + operator can also be used to add string variables or text values together. ◦ txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;  After the execution of the statements above, the variable txt3 contains "What a verynice day". 13

To add a space between the two strings, insert a space into one of the strings: ◦ txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; Or insert a space into the expression: ◦ txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; 14

 Conditional statements compare values and take action depending on the result if (age<18) document.write("Too young");  Comparison operators are used in logical statements to determine equality or difference between variables or values. (x=5) 15 OperatorDescriptionExample ==is equal tox==8 is false !=is not equalx!=8 is true >is greater thanx>8 is false <is less thanx<8 is true >=is greater than or equal tox>=8 is false <=is less than or equal tox<=8 is true

 JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax: variablename=(condition)?value1:value2 Example greeting=(visitor=="PRES")?"Dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear". 16

 Logical operators are used to determine the logic between variables or values. (x=6 and y=3) 17 OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true

 Use the if....else statement to execute some code if a condition is true and another code if the condition is not true. Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } 18

 If the time is less than 10, you will get a "Good morning" greeting.  Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } 19

 The Math object allows you to perform mathematical tasks.  The Math object includes several mathematical constants and methods. The following example uses the round() method of the Math object to round a number to the nearest integer: Math.round(4.7) The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10: document.write(Math.floor(Math.random()*11)); 20

21 MethodDescription abs(x)Returns the absolute value of x acos(x)Returns the arccosine of x, in radians asin(x)Returns the arcsine of x, in radians atan(x)Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians atan2(y,x)Returns the arctangent of the quotient of its arguments ceil(x)Returns x, rounded upwards to the nearest integer cos(x)Returns the cosine of x (x is in radians) exp(x)Returns the value of E x floor(x)Returns x, rounded downwards to the nearest integer log(x)Returns the natural logarithm (base E) of x max(x,y,z,...,n)Returns the number with the highest value min(x,y,z,...,n)Returns the number with the lowest value pow(x,y)Returns the value of x to the power of y random()Returns a random number between 0 and 1 round(x)Rounds x to the nearest integer sin(x)Returns the sine of x (x is in radians) sqrt(x)Returns the square root of x tan(x)Returns the tangent of an angle

var chars = ' ABCDEFGHIJKLMNOPQRSTUVWXTZabc defghiklmnopqrstuvwxyz'.split(''); length = Math.floor(Math.random() * chars.length); var str = ''; for (var i = 0; i < length; i++) { str += chars[Math.floor( Math.random() * chars.length)]; } str; 22