Javascript basics

1. JavaScript
Basic Examples
-Vikas Thange
(vikasthange@gmail.com)
www.vikasthange.blogspot.com

2. Topics to be covered
1. Basic JavaScript Examples
2. JavaScript Comments
3. JavaScript Variables
4. JavaScript Conditional If ... Else
5. JavaScript Popup Boxes
6. JavaScript Functions
7. JavaScript Loops
8. JavaScript Events
9. JavaScript Error Handling

3. 1. Basic JS Examples
• Write to the Document with JavaScript
document.write("<p>My First JavaScript</p>");
• Change HTML elements with JavaScript
<p id="demo">My First Paragraph.</p>
document.getElementById("demo").innerHTML="My First
JavaScript";
• An external JavaScript
<script src="myScript.js">

4. 2. JavaScript Comments
• Comments
Single line comment - //
Multiline comments /*.......*/

5. 3. JavaScript Variables
• Declare a variable, assign a value to it, and display it
• Code:
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);

6. 4. JavaScript Conditional If ... Else
• If statement
• If...else statement
• Random link
• Switch statement

7. 4.1 If Statement
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}

8. 4.2 If....else Statement
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}

9. 4.3 Random Link
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}

10. 4.4 Switch Statement
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 0:
x="Today is Sunday";
break;
case 1:
x="Today is Monday";
break;
}
document.getElementById("demo").innerHTML=x;

11. 5. JavaScript Pop Up Boxes
• Alert box
alert("I am an alert box!");
• Alert box with line breaks
alert("HellonHow are you?");

12. 5. JavaScript Pop Up Boxes
• Confirm Box
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}

13. 5. JavaScript Pop Up Boxes
• Prompt Box
function myFunction()
{
var x;
var person=prompt("Please enter your name","Harry Potter");
if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById("demo").innerHTML=x;
}
}

14. 6. Javascript Functions
• Call a function
• Function with an argument
• Function with an argument 2
• Function that returns a value
• Function with arguments, that returns a value

15. 6.1 Call a Function
function myFunction()
{
alert("Hello World!");
}
myFunction();
HTML:
<button onclick="myFunction()">Try it</button>

16. 6.2 Function with an argument
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
HTML:
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

17. 6.3 Function with an argument 2
<script>
function myfunction(txt)
{
alert(txt);
}
</script>
HTML:
1 :- <input type="button“ onclick="myfunction('Good Morning!')“ value="In
the Morning">
2:- <input type="button“ onclick="myfunction('Good Evening!')“ value="In
the Evening">

18. 6.4 Function that returns a value
<script>
function myFunction()
{
return ("Hello world!");
}
</script>
<script>
var msg;
msg = myFunction();
document.write(msg)
</script>

19. 6.5 Function with arguments, that
returns a value
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

20. 7. JavaScript Loops
• For loop
• Looping through HTML headers
• While loop
• Do While loop
• Break a loop
• Break and continue a loop
• Using a for... to loop through the elements of an object

21. 7.1 For loop
<script>
function myFunction()
{
var x="",i;
for (i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>

22. 7.2 Looping through HTML headers
<script>
function myFunction()
{
var x="",i;
for (i=1; i<=6; i++)
{
x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
document.getElementById("demo").innerHTML=x;
}
</script>

23. 7.3 While loop
<script>
function myFunction()
{
var x="",i=0;
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>

24. 7.4 Do While loop
<script>
function myFunction()
{
var x="",i=0;
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5)
document.getElementById("demo").innerHTML=x;
}
</script>

25. 7.5 Break a loop
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}

26. 7.6 Break and Continue a loop
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
continue;
}
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}

27. 7.7 Using a for... to loop through the
elements of an object
function myFunction()
{
var txt="";
var person={fname:"John",lname:"Doe",age:25};
for (var x in person)
{
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}

28. 8. JavaScript Events
• Acting to the onclick event
• Acting to the onmouseover event

29. 8. JavaScript Error Handling
• The try...catch statement
• The try...catch statement with a confirm box
• The onerror event

30. Reference
• W3Schools
• http://www.w3schools.com/js/js_examples.asp

31. Thank You
-Vikas Thange
Selenium & QTP Automation expert
(vikasthange@gmail.com)
www.vikasthange.blogspot.com