Lab 05

Lab 05
What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a license
Start End Tag:

<script type="text/javascript">
</script>
JavaScript is Case Sensitive

Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript
statements, create or call variables, objects and functions.
JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello " to the web page:
document.write("Hello ");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good
programming practice, and most often you will see this in JavaScript examples on the web.
The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end
of the line as the end of the statement. Because of this you will often see examples without the semicolon at the
end.
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
Example:
<html>
<body>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
</body>
</html>
JavaScript Variables
Example:
<html>
<body>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable, assigns a value to it, displays the value, changes the value, and
displays the value again.</p>
</body>
</html>
Event Handler
1. Alert:
<form>
<input type="button" onclick=
"alert('Are you sure you want to give us the deed to your house?')"
value="Confirmation Alert">
</form>
2. Confirm
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Leave abc.com">

</form>
</body>
</html>
3. Pop Up:
<head>

</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>
Summery Example:
<html>
<head>
function displayDate()
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Calling a function from within another function in JavaScript
var numCorrect = 0;
function takeTest()
{ var response = "";
var points = 0;
var q1 = "What company developed JavaScript?";

var a1 = "NETSCAPE";
var q2 = "Using JavaScript operator precedence,\n what is the

result of the following expression? 2 + 4 * 6";
var a2 = 26;
var q3 = "With what object-oriented programming language\n is JavaScript often

compared and confused?";
var a3 = "JAVA";
response = prompt(q1,"");
if (response) points= runningTotal((response.toUpperCase() == a1) ? 1 : 0);
alert(points);
if(response) points= runningTotal((response == a2) ? 1 : 0);
alert(points);
if (response) points=runningTotal((response.toUpperCase() == a3) ? 1 : 0);
alert("You answered a total of " + points + " correctly.");
numCorrect = 0;
points = 0;
function runningTotal(i)
{ numCorrect += i;
return numCorrect;
}
Using a switch statement
<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 4-6</title>
<script language="JavaScript" type="text/javascript">

function switchTest(SetOption) {
OptionsSelect = document.frmOne.SetOption.value
alert(OptionsSelect);
}
</script>
<body>
<h3>CIW JavaScript Specialist</h3>
<form name = "frmOne">
<select name= "SetOption" onchange="switchTest(this)">

<option value = "0">Select a U.S. City - See the State!</option>
<option value = "1">Phoenix</option>
<option value = "2">Roswell</option>
<option value = "3">Sacramento</option>
<option value = "4">My city</option>
<option value = "5">Your city</option>
</select>
</form>
</body>
</html>
<head>
<script language="JavaScript" type="text/javascript">
function switchTest(SetOption) {
OptionsSelect = document.frmOne.SetOption.value
alert(OptionsSelect);
switch (OptionsSelect) {
case "1":
alert("Arizona") break
case "2":
alert("New Mexico")
break
case "3":
alert("California")
break
default:
alert("Cannot be determined")
}
}
</script>
</head>
<body>
<h3>CIW JavaScript Specialist</h3>
<form name = "frmOne">
<select name= "SetOption" onchange="switchTest(this)">

<option value = "0">Select a City - See the State!</option>
<option value = "1">Phoenix</option>
<option value = "2">Roswell</option>
<option value = "3">Sacramento</option>
<option value = "4">My city</option>
<option value = "5">Your city</option>
</select>
</form> </body> </html>

Applying String methods to text
function showUpper(checked) {
var showThis;
if (checked) {
showThis = document.myForm.name.value.toUpperCase();
} else {
showThis = document. myForm.name.value.toLowerCase();
}
document.myForm.name.value = showThis;
}
function emailTest(form) {
if (form.email_address.value.indexOf("@", 0) < 0) {
alert("This is not a valid e-mail address!");
} else {
alert("This could be a valid e-mail address");
}
}
function showFirst2(form) {
var first2Chars;
first2Chars = form.phone_number.value.substring(0, 2);
alert(first2Chars);
}
</script>
<form name="myForm" id="myForm">Name:<br />
<input type="text" size="30" name="name" />

<input type="checkbox"name="upperCheckbox"
onclick="showUpper(this.checked);"/>
Convert string to uppercase or lowercase<br />
E-mail address:<br />

<input type="text" size="30" name="email_address" />
<input type="checkbox" onclick="(this.checked) ? emailTest(this.form) : '';"/>
Test for e-mail address<br />
Phone number:<br />

<input type="text" size="30" name="phone_number" /><br />
Fax number:<br />
<input type="text" size="30" name="fax_number" />
<p>
<input type="button" value=
"First Two Characters of Phone Number" onclick=
"showFirst2(this.form);" />
</p>
<p>
<input type="button" value="Fax Number Length" onclick=
" var strLength = document.myForm.fax_number.value.length; alert('That string
is ' + strLength + ' characters long');" />
</p>
</form>
Lab Task 1:
Complete the following code and analyze its output.

</script>
Lab Task 2:
1. Write a JavaScript program to swap the value of two variables without using a
third variable. Take the value of both variables from the user.
2. Write a JavaScript program to calculate the area of a square
3. Write a Javascript program to convert Kilometers to centimetrs
4. Develop a JavaScript program to perform following arithmetic operations: addition,
subtraction, multiplication and division.
5. Write a code in JavaScript to use if-else, nested if and loops.
Lab Task 3:
1. Name (Name should contains alphabets and the length should not be less than 6 characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard pattern
([email protected])
4. Phone number (Phone number should contain 10 digits only).

Lab 05

Uploaded by

Copyright:

Available Formats

Lab 05

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 05

Uploaded by

Copyright:

Available Formats

Lab 05

Start End Tag:

JavaScript is Case Sensitive

document.write("<p>This is another paragraph.</p>");

var answer = confirm("Leave abc.com?")

alert("Thanks for sticking around!")

<input type="button" onclick="confirmation()" value="Leave abc.com">

<input type="button" onClick="myPopup()" value="POP!">

<p onClick="myPopup()">CLICK ME TOO!</p>

<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button>

var q1 = "What company developed JavaScript?";

var q2 = "Using JavaScript operator precedence,\n what is the

var q3 = "With what object-oriented programming language\n is JavaScript often

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

<select name= "SetOption" onchange="switchTest(this)">

<select name= "SetOption" onchange="switchTest(this)">

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

<form name="myForm" id="myForm">Name:<br />

<input type="text" size="30" name="name" />

E-mail address:<br />

Phone number:<br />

// Create Date object

var monthName = new

var dayExt = "th";

if ((myDate == 1) || (myDate == 21) || (myDate == 31))

"rd"; var extDate = myDate + dayExt;

alert("The month number is: " + (today.getMonth()

You might also like