WE Lab 8

Web Engineering
(JavaScript Lab)
Lab # 8
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)
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 thecommand is to tell the
browser what to do.
This JavaScript statement tells the browser to write "Hello " to the web page:
document.write("Hello ");
Alert Box
Code 1
<!DOCTYPE html>
<html>
<head>
<script>
alert ("Its JavaScript Lab");

</script>
<style>
a{
background-color:orange;
display:inline-block;
padding:9px;}
#header
{
background-color:red;
height:60px;}
</style>
</head>
<body >
<div id="header">
<a href="#" >link1</a>
</div>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</head>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Confirm Box
CODE 1
<!DOCTYPE html>
<html>
<head>
<script>
confirm("Its JavaScript Lab");
</script>
<style>
a{
background-color:orange;
display:inline-block;
padding:9px;}
#header
{
background-color:red;
height:60px;}
</style>
</head>
<body >
<div id="header">
</div>
</body>
</html>
CODE 2
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<p id="demo"></p>
<script>
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Prompt Box
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<p id="demo"></p>
<script>
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
</script>
</body>
</html>
Finding HTML Element by Id

<!DOCTYPE html>
<html>
<head>
<script>
function change()
{ document.getElementById("demo").innerHTML = "Hello ";
}
</script>
</head>
<body>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick= "change()"> Click Me!</button>
</body>
</html>
JavaScript Can Change HTML Styles

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.style.fontSize = "23px";
x.style.color = "blue"; }
</script>
</head>
<body>
<p id="demo">JavaScript can change the style of an HTML element. </p>
<button type="button" onclick="myFunction()">Click Me! </button>
</body>
</html>
JavaScript Can Change HTML Attributes

<!DOCTYPE html>
<html>
<head> <script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "ofbulb.gif";
} else {
image.src = "onbulb.gif"; } }
</script></head>
<body>
<img id="myImage" onclick="changeImage()" src="ofbulb.gif"
width="100" height="180" >
<p>Click the light bulb to turn on/off the light.</p>
</body> </html>
JavaScript Can Validate Data

<!DOCTYPE html>
<html><head>
<script>
var x, text;
x = document.getElementById("numb").value;
// If x is Not a Number or less than 2 or greater than 8
if (isNaN(x) || x < 2 || x > 8) {
text = "Input not valid"; }
else {
text = "Input OK"; }
document.getElementById("demo").innerHTML = text; }
</script> </head>
<body>
<p>Please input a number between 2and 8</p>
<input type="text" id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
</body></html>
JavaScript Form Validation

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"

onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
onClick Event Handler Example

<html>
<head>
<title>onClick Event Handler Example</title>
<script type="text/javascript">
function warnUser() {
return confirm("Are you a student?");
}
</script>
</head>
<body>
<a href="ref.html" onClick="return warnUser()"> Students access only</a>
</body>
</html>
onLoad Event Handler Example

<html>
<head>
<title>onLoad and onUnload Event Handler Example</title>
</head>
<body onLoad="alert('Welcome to this page')"
onUnload="alert('Thanks for visiting this page')">
Load and UnLoad event test.
</body>
</html>
onMouseOver & onMouseOut Event

Handler
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this

text</h1>
</body>
</html>
Onkeyup Event
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user releases a key in the input field. The function transforms the
character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
LAB TASK:
1)
2)
3)
Write a code in JavaScript to implement onKeyDown event handler.

Write a code in JavaScript to implement onFocus event handler
Write a code in JavaScript to implement onSubmit event handler

WE Lab 8

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

WE Lab 8

Diunggah oleh

Hak Cipta:

Format Tersedia

Web Engineering

alert ("Its JavaScript Lab");

Finding HTML Element by Id

JavaScript Can Change HTML Styles

JavaScript Can Change HTML Attributes

JavaScript Can Validate Data

JavaScript Form Validation

<form name="myForm" action="demo_form.asp"

onClick Event Handler Example

onLoad Event Handler Example

onMouseOver & onMouseOut Event

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this

Write a code in JavaScript to implement onKeyDown event handler.

Anda mungkin juga menyukai