Scribd
Upload
6K views

Chapter JS All

Uploaded by

bayisadamisse
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6K views

Chapter JS All

Uploaded by

bayisadamisse
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 75

Chapter Three

Client-Side Scripting Language

JavaScript
(JS)
1 Department of Software Engineering 04/30/2024
Introduction to JavaScript

The growth of WWW is resulted in demand for dynamic and


interactive websites.
 JavaScript is one of the 3 languages all web
developers must learn:
1. HTML defines the content of web pages.
2. CSS specifies the layout of web pages.
3. JavaScript programs the behavior of web pages.
 Javascript is a scripting language produced by Netscape for
use within HTML Web pages.
JavaScript is a lightweight, interpreted programming language.
JavaScript is loosely based on Java and it is built into all the
major modern browsers.
It is the most popular scripting language on the internet.
2 JavaScript is case-sensitive!
Department of Software Engineering 04/30/2024
JavaScript…
JavaScript is used:
to improve user interface.
to create pop-up window and alerts.
to Interact with the user.
to create dynamic pages.
to validate forms.
to detect browsers (reacting to user
actions on Browser).
to create cookies, and much more.

3 Department of Software Engineering 04/30/2024


JavaScript…
 A JavaScript consists of JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.
The <script> tag tells the browser program to begin
interpreting all the text between these tags as a script.
JavaScript statements ends with semicolon.
The syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>

4 Department of Software Engineering 04/30/2024


JavaScript…
 The script tag takes three important attributes:
1. src: specify the location of the external script.
2. language: specifies what scripting language you are using.
Typically, its value will be “javascript”.
3. type: used to indicate the scripting language in use.
Its value should be set to "text/javascript".
Type and language have similar functions we use language to
specify the language used in the script.
So your JavaScript segment will look like this:
<script language="javascript" type="text/javascript">
JavaScript code
</script>
5 Department of Software Engineering 04/30/2024
Placing JavaScript in an HTML file

Scripts in the head section: Scripts to be executed when


they are called, or when an event is triggered, must be
placed in the head section.
<html>
<head>
<script type="text/JavaScript">....
</script>
</head>

6 Department of Software Engineering 04/30/2024


Placing JavaScript in an HTML file
Scripts in the body section: Scripts to be executed when
the page loads must be placed in the body section.
When you place a script in the body section it generates
the content of the page.
<html>
<head></head>
<body>
<script type="text/JavaScript">....</script>
</body>
</html>
You can also have scripts in both the body and the head
section.
7 Department of Software Engineering 04/30/2024
Using an External JavaScript

Sometimes you might want to run the same JavaScript on


several pages, without having to write the same script on
every page.
To simplify this, you can write a JavaScript in an external
file.
Save the external JavaScript file with .js file extension.
Note: The external script cannot contain the <script>
tag!
To use the external script, write the JS file in the "src"
attribute of the <script> tag:
Note: Remember to place the script exactly where you

8
want to write the script!
Department of Software Engineering 04/30/2024
A Simple Script

<html>
<head> <title>First JavaScript Page</title>
</head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body>
</html>
9 Department of Software Engineering 04/30/2024
Comment
Used to explain what the script does.
Two types of comments:
Comment on single line(//)
Comment on multiple line(/*…..*/)

The three methods of JS


1. alert() Method
2. confirm() Method
3. prompt() Method

10 Department of Software Engineering 04/30/2024


Using the alert() Method

<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>
It is the easiest method to use amongst alert(), prompt()
and confirm().
You can use it to display textual information to the user.
The user can simply click “OK” to close it.

11 Department of Software Engineering 04/30/2024


Using the confirm() Method

<head>
<script language=“JavaScript”>
confirm(“Are you happy with the class?”);
</script>
</head>
This box is used to give the user a choice either
OK or Cancel.
You can also put your message in the method.

12 Department of Software Engineering 04/30/2024


Using the prompt() Method

<head>
<script language=“JavaScript”>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>
This is the only one that allows the user to type in his
response to the specific question.
You can give a default value to avoid displaying
“undefined”.

13 Department of Software Engineering 04/30/2024


Examples of the three methods:
<script language="JavaScript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>

14 Department of Software Engineering 04/30/2024


JavaScript Variables
A variable is a "container" for information you want to
store.
Variable names are case-sensitive.
They must begin with a letter, underscore character, or
dollar symbol.
It includes uppercase and lowercase letters, digits from 0
through 9, underscore, and dollar signs.
No space and punctuation characters.
You should not use any of the JavaScript-reserved
keywords as variable names.

15 Department of Software Engineering 04/30/2024


JavaScript Variables…

You can create a variable with the var, let, const, and nothing
statements:
You can also create a variable with the var statement:
var strName = some value;
You can also create a variable with the let statement:
let strName = some value;
You can also create a variable with nothing statement:
strName = some value;
You can also create a variable with a const statement:
Assign a Value to a Variable:
var strName = “Software“;
let strName = “Software“;
strName = “Software“;
16  constofPI=
Department 3.14;
Software Engineering 04/30/2024
Which one is legal?

 My_variable
 $my_variable
legal
 1my_example
 _my_variable
 @my_variable
 My_variable_example
 ++my_variable
 %my_variable Illegal

 #my_variable
 ~my_variable
 myVariableExample

17 Department of Software Engineering 04/30/2024


Variable on-the-fly

<head>
<script language=“JavaScript”>
var id;
id = prompt(“Write your id number?”);
alert(id);
name = prompt(“What is your name?”,”No name”);
alert(name);
</script>
</head>
We should use “var” because it is more easy to keep track
of the variables.
18 Department of Software Engineering 04/30/2024
The scope of a variable
The scope of a variable is the region of your program in
which it is defined.
JavaScript variable will have only two scopes.
Global Variables: A global variable has global scope
which means it is defined everywhere in your
JavaScript code.
Local Variables: A local variable will be visible only
within a function where it is defined.
Function parameters are always local to that function.

19 Department of Software Engineering 04/30/2024


Data Types
JavaScript allows the same variable to contain different types
of data values.
Primitive data types:
Number: integer & floating-point numbers.
Boolean: logical values “true” or “false”.
String: a sequence of alphanumeric characters.
Composite data types (or Complex data types):
Object: a named collection of data.
Array: a sequence of values.
Function: a group of code to perform a particular task.
Special data types:
Null: as the initial value is assigned.
Undefined: the variable has been created but not yet assigned a
Department of Software Engineering
20
value. 04/30/2024
Numeric Data Types

It is an important part of any programming language for


doing arithmetic calculations.
JavaScript supports:
Integers: A positive or negative number with no
decimal places.
Ranged from –253 to 253
Floating-point numbers: usually written in
exponential notation.
3.1415…, 2.0e11

21 Department of Software Engineering 04/30/2024


Integer and Floating-point number example

<script language=“JavaScript”>
var integerVar = 100;
var floatingPointVar = 3.0e10;
// floating-point number 30000000000
document.write(integerVar);
document.write(floatingPointVar);
</script>

The integer 100 and the number 30,000,000,000 will be


appeared in the browser window.

22 Department of Software Engineering 04/30/2024


Boolean Values

A Boolean value is a logical value of either true or false.


(yes/no, on/off)
Often used in decision-making and data comparison.
In JavaScript, you can use the words “true” and “false”
to indicate Boolean values.
True=1
False=0

23 Department of Software Engineering 04/30/2024


Boolean value example
<head>
<script language=“JavaScript”>
var result;
result = (true*10 + false*7);
alert(“true*10 + false*7 =“ , result);
</script>
</head>

The expression is converted to


(1*10 + 0*7) = 10

24 Department of Software Engineering 04/30/2024


Strings
<head>
<script language=“JavaScript”>
document.write(“This is a string.”);
document.write(“This string contains ‘quote’.”);
var myString = “My testing string”;
alert(myString);
</script>
</head>
 A string variable can store a sequence of alphanumeric
characters, spaces, and special characters.
 A string can also be enclosed in single quotation marks (‘Hello’) or double
quotation marks (“Hello”) and Backticks marks (`Hello `).
 What is the data type of “100”? It is a string but not a number
type.
25 Department of Software Engineering 04/30/2024
typeof operator

<head>
<script language=“JavaScript”>
var x = “hello”, y,z;
alert(“Variable x value is “ + typeof(x));
alert(“Variable y value is “ + typeof(y));
alert(“Variable z value is “ + typeof(z));
</script>
</head>
It is an unary operator.
Return either: Number, string, Boolean, object, function,
undefined, null.

26 Department of Software Engineering 04/30/2024


What is an Object?

An object is a thing, anything, just as things in the real


world.
E.g. (cars, dogs, money, books, … )
In the web browser, objects are the browser window
itself, forms, buttons, and text boxes, …
Methods are things that objects can do.
Cars can move, and dogs can bark.
Window object can alert the user “message()”.
All objects have properties.
Cars have wheels, dogs have legs.
The browser has a name and version number.

27 Department of Software Engineering 04/30/2024


Array

An Array contains a set of data represented by a single


variable name.
Arrays in JavaScript are represented by the Array
Object, we need “new Array()” to construct this object.
The first element of the array is “Array[0]” and the last
one is Array[n-1].
E.g. myArray = new Array(5)
We have myArray[0,1,2,3,4].

28 Department of Software Engineering 04/30/2024


Array Example

<script language=“JavaScript”>
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
document.write(Car[1] + “<br>”);
document.write(Car[2] + “<br>”);
</script>
You can also declare arrays with variable length.
arrayName = new Array();
29 Department of Software Engineering 04/30/2024
Null & Undefined

An “undefined” value is returned when you attempt to use


a variable that has not been defined or
you have declared but you forgot to provide with a
value.
Null refers to “nothing”
You can declare and define a variable as “null” if you
want absolutely nothing in it, but you just don’t want it to
be “undefined”.

30 Department of Software Engineering 04/30/2024


Null & Undefined example
<html>
<head>
<title> Null and Undefined example </title>
<script language=“JavaScript”>
var test1, test2 = null;
alert(“No value assigned to the variable” + test1);
alert(“A null value was assigned” + test2);
</script>
</head>
<body> … </body>
</html>
31 Department of Software Engineering 04/30/2024
Expressions

It is a set of literals, variables, operators that are merged


and evaluated to a single value.
Left_operand operator right_operand
By using different operators, you can create the
following expressions.
Arithmetic,
logical
String and
conditional expressions.

32 Department of Software Engineering 04/30/2024


Operators

 Arithmetic operators
Logical operators
Comparison operators
String operators
Bit-wise operators
Assignment operators
Conditional operators

33 Department of Software Engineering 04/30/2024


Arithmetic operators
left_operand operator right_operand

Operator Name Description Example


+ Addition Adds the operands 3+5
- Subtraction Subtracts the right 5-3
operand from the left
operand
* Multiplication Multiplies the operands 3 * 5
/ Division Divides the left operand 30 / 5
by the right operand
% Modulus Calculates the 20 % 5
remainder

34 Department of Software Engineering 04/30/2024


Unary Arithmetic Operators

Binary operators take two operands.


Unary type operators take only one operand.
Which one add value first, and then assign value to the
variable?
Name Example
Post Incrementing operator (postfix) Counter++

Post Decrementing operator Counter--

Pre Incrementing operator (prefix) ++counter

Pre Decrementing operator --counter

35 Department of Software Engineering 04/30/2024


Logical operators

Used to perform Boolean operations on Boolean


operands
Operator Name Description Example
&& Logical and Evaluate to “true” 3>2 && 5<2
when both operands
are true

|| Logical or Evaluate to “true 3>1 || 2>5


when either operand
is true

! Logical not Evaluate to “true” 5 != 3


when the operand is
false

36 Department of Software Engineering 04/30/2024


Comparison operators

Used to compare two numerical values

Operator Name Description Example


== Equal Perform type conversion before “5” == 5
checking the equality
=== Strictly equal No type conversion before testing “5” === 5
!= Not equal “true” when both operands are not 4 != 2
equal
!== Strictly not equal No type conversion before testing 5 !== “5”
nonequality
> Greater than “true” if left operand is greater than 2>5
right operand
< Less than “true” if left operand is less than 3<5
right operand
>= Greater than or “true” if left operand is greater than 5 >= 2
equal or equal to the right operand
<= Less than or equal “true” if left operand is less than or 5 <= 2
equal to the right operand

37 Department of Software Engineering 04/30/2024


Strict Equality Operators

<script language=“JavaScript”>
var currentWord=“75”;
var currentValue=75;
var outcome1=(currentWord == currentValue);
var outcome2=(currentWord === currentValue);
alert(“outcome1: “ + outcome1 + “ : outcome2: “ +
outcome2);
</script>
Surprised that outcome1 is True, outcome2 is False
JavaScript tries very hard to resolve numeric and string
differences.
38 Department of Software Engineering 04/30/2024
String operator

JavaScript only supports one string operator for joining two


strings.
Operator Name Description Return value
+ String Joins two “HelloWorld”
concatenation strings

<script language=“JavaScript”>
var myString = “ ”;
myString = “Hello” + “World”;
alert(myString);
</script>

39 Department of Software Engineering 04/30/2024


Bit Manipulation operators

Perform operations on the bit representation of a value,


such as shift left or right.

Operator Name Description


& Bitwise AND Examines each bit position
| Bitwise OR If either bit of the operands is 1,
the result will be 1
^ Bitwise XOR Set the result bit 1, only if either
bit is 1, but not both
<< Bitwise left shift Shifts the bits of an expression to
the left
>> Bitwise signed right Shifts the bits to the right, and
shift maintains the sign
>>> Bitwise zero-fill right Shifts the bits of an expression to
shift right
40 Department of Software Engineering 04/30/2024
Assignment operators

Used to assign values to variables


Operator Description Example
= Assigns the value of the right operand to A=2
the left operand
+= Add the operands and assigns the result to A += 5
the left operand
-= Subtracts the operands and assigns the A -= 5
result to the left operand
*= Multiplies the operands and assigns the A *= 5
result to the left operand
/= Divides the left operands by the right A /= 5
operand and assigns the result to the left
operand
%= Assigns the remainder to the left operand A %= 2

41 Department of Software Engineering 04/30/2024


The most common problem

<script language=“JavaScript”>
if (alpha = beta) { … }
if (alpha == beta) { … }
</script>
Don’t mix the comparison operator and the
assignment operator.
double equal sign (==) and the equal operator (=)

42 Department of Software Engineering 04/30/2024


Order of Precedence

Precedence Operator
1 Parentheses, function calls
2 , ~, -, ++, --, new, void, delete
3 *, /, %
4 +, -
5 <<, >>, >>>
6 <, <=, >, >=
7 ==, !=, ===, !==
8 &
9 ^
10 |
11 &&
12 ||
13 ?:
14 =, +=, -=, *=, …
15 The comma (,) operator

43 Department of Software Engineering 04/30/2024


Precedence Example

Value = (19 % 4) / 1 – 1 - !false


Value = 3 / 1 – 1 - !false
Value = 3 / 1 – 1 - true
Value = 3 – 1 - true
Value = 3 – 2
Value = 1

44 Department of Software Engineering 04/30/2024


Example of variable, data types
<html><head><title> Billing System of Web Shoppe </title></head><body>
<h1 align="center"> Billing System of Web Shoppe </h1>
<script language="JavaScript">
firstCustomer = new Array();
billDetails = new Array(firstCustomer);
var custName, custDob, custAddress, custCity, custPhone;
var custAmount, custAmountPaid, custBalAmount;
custName=prompt("Enter the first customer's name:", "");
custDob=prompt("Enter the first customer's date of birth:", "");
custAddress=prompt("Enter the first customer's address:", "");
custPhone=prompt("Enter the first customer's phone number:", "");
custAmount=prompt("Enter the total bill amount of the first customer:", "");
custAmountPaid=prompt("Enter the amount paid by the first customer:", "");
custBalAmount = custAmount - custAmountPaid;
firstCustomer[0]=custName;
firstCustomer[1]=custDob;
firstCustomer[2]=custAddress;
firstCustomer[3]=custPhone;
firstCustomer[4]=custBalAmount;
document.write("<B>" + "You have entered the following details for first customer:" + "<BR>");
document.write("Name: " + billDetails[0][0] + "<BR>");
document.write("Date of Birth: " + billDetails[0][1] + "<BR>");
document.write("Address: " + billDetails[0][2] + "<BR>");
document.write("Phone: " + billDetails[0][3] + "<BR>");
(custBalAmount == 0) ? document.write("Amount Outstanding: " + custBalAmount):document.write("No
amount due")
</script></body></html>
Department of Software Engineering
45 04/30/2024
Conditional Statement

“if” statement
“if … else” statement
“else if” statement
“if/if … else” statement
“switch” statement

46 Department of Software Engineering 04/30/2024


“if” statement

if (condition)
{
statements;
}
It is the main conditional statement in JavaScript.
The keyword “if” always appears in lowercase.
The condition yields a logical true or false value.
The condition is true, statements are executed.

47 Department of Software Engineering 04/30/2024


“if” statement example

<script language=“JavaScript”>
var chr = “ ”;
…
if (chr == ‘A’ || chr == ‘O’) {
document.write(“Vowel variable”);
}
</script>

48 Department of Software Engineering 04/30/2024


“if … else” statement

if (condition)
{
statements;
}
else
{
statements;
}
You can include an “else” clause in an if statement
when you want to execute some statements if the
condition is false.
49 Department of Software Engineering 04/30/2024
Ternary Shortcut (concise)

<script language=“JavaScript”>
If (3 > 2) {
alert(“True”);
}
else {
alert(“False”);
}
(3 > 2) ? alert(“True”) : alert(“False”);
</script>
Substitute for a simple “if/else” statement.

50 Department of Software Engineering 04/30/2024


“if..else.. if” statement

if (condition) {
statement;
}
else if (condition) {
statement;
}
…….
else {
statement;
}
 Allows you to test for multiple expression for one true
value and executes a particular block of code.
51 Department of Software Engineering 04/30/2024
“if/if…else” statement example

<script language=“JavaScript”>
var chr;
chr = prompt(“Please enter a character : “,””);
if (chr >= ‘A’)
{
if (chr <= ‘Z’)
alert(“Uppercase”);
else if (chr >= ‘a’)
{
alert(“Lowercase”);
}
}
</script>
52 Department of Software Engineering 04/30/2024
“switch” statement

switch (expression)
{
case label1:
statements;
break;
default:
statements;
}
Allows you to merge several evaluation tests of the
same variable into a single block of statements.

53 Department of Software Engineering 04/30/2024


“switch” statement example

<script language=“JavaScript”>
var chr;
chr = prompt(“Pls enter a character in lowercase:”,””);
switch(chr){
case ‘a’ :
alert(“Vowel a”); break;
case ‘e’ :
alert(“Vowel e”); break;
default :
alert(“Not a vowel”);
}
</script>
54 Department of Software Engineering 04/30/2024
Looping Statement

“for” Loops
“for/in” Loops
“while” Loops
“do … while” Loops

55 Department of Software Engineering 04/30/2024


“for” statement

for (initial_expression; test_exp; change_exp)


{
statements;
}
One of the most used and familiar loops is the for loop.
It iterates through a sequence of statements for a
number of times controlled by a condition.
The change_exp determines how much has been added
or subtracted from the counter variable.

56 Department of Software Engineering 04/30/2024


“for” statement example

<script language=“JavaScript”>
var counter;
for (counter = 1; counter <= 10; counter++)
{
document.write(counter*counter + “ “);
}
</script>
Display the square of numbers
Output: 1 4 9 16 25 36 49 64 81 100

57 Department of Software Engineering 04/30/2024


“for/in” statement

for (counter_variable in object)


{
statements;
}
When the for/in statement is used, the counter and
termination are determined by the length of the object.
The statement begins with 0 as the initial value of the
counter variable, terminates with all the properties of
the objects have been executed.
E.g. array - no more elements found

58 Department of Software Engineering 04/30/2024


“for/in” statement example

<script language=“JavaScript”>
var book;
var booklist = new Array(“Chinese”, “English”, “Jap”);
for (var counter in booklist) {
book += booklist[counter] + “ “;
}
alert(book);
</script>

59 Department of Software Engineering 04/30/2024


“while” statement

initial value declaration;


while (condition)
{
statements;
increment/decrement statement;
}
The while loop begins with a termination condition
and keeps looping until the termination condition is
met.
The counter variable is managed by the context of the
statements inside the curly braces.
60 Department of Software Engineering 04/30/2024
“While” statement example

<html>
<head>
<title>While loop example</title>
<script language=“JavaScript”>
var counter = 100;
var numberlist = “”;
while (counter > 0) {
numberlist += “Number “ + counter + “<br>”;
counter -= 10;
}
document.write(numberlist);
</script> <body> … </body>
</html>

61 Department of Software Engineering 04/30/2024


“do … while” statement

do
{
statements;
counter increment/decrement;
}
while (termination condition)
The do/while loop always executes statements in the
loop in the first iteration of the loop.
The termination condition is placed at the bottom of
the loop.

62 Department of Software Engineering 04/30/2024


JavaScript function

A function is a reusable code block that will be executed by


an event or when the function is called.
Declare a function
function myfunction(prameter1, prameter2, etc)
{
Some statements;
}
Call a function
myfunction(argument1, argument2, etc);

63 Department of Software Engineering 04/30/2024


Example

 There is a button having the value “Message” and if


u click it the function message() will be called.
<input type=“button” value=“Message”
onClick=“message()”>
 The function will display an alert which says Hello
World.
function message() {
alert(“Hello World");
}

64 Department of Software Engineering 04/30/2024


Events & Event Handlers
 Every element on a web page has certain events
 Events can trigger invocation of event handlers.
 Events can be:
 A mouse click,
 A web page or an image loading,
 Mousing over a hot spot on the web page …, etc
 Some of pre defined event handler functions:
 onclick - Mouse clicks an object
 ondblclick - Mouse double-clicks an object
 onselect - Text is selected
 onsubmit - The submit button is clicked
 onunload - The user exits the page
65 Department of Software Engineering 04/30/2024qq
JavaScript HTML DOM

https://www.w3schools.com/js/js_htmldom_methods.asp

66 Department of Software Engineering 04/30/2024qq


Form Validation with JavaScript
 The process of checking that a form has been filled incorrectly before it is
processed.
 A simple form with validation
 The first part of the form is the form tag:
<form name=“myForm" onsubmit=“return validateForm( );">
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name=“fname"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
 The form is given a name of "contact_form". This is so that we can
reference the form by name from our JavaScript validation function.
 The form tag includes an onsubmit attribute to call our JavaScript
validation function, validate_form(), when the submit type of button in the
form is pressed.
 The function validate_form() will validate whether the user enters Name
67 Department of Software Engineering 04/30/2024
or not.
Validating text filed
 Checks to see whether the text filed Is fill or not
 Use built in function .value for validation
Example:
<html>
<head>
<script>
function validateForm() {
var x=document.myForm.fname.value;
if (x==null || x=="")
{
alert("First name must be filled out");
document.myForm.fname.focus();
return false;
}}
</script>
68 Department of Software Engineering 04/30/2024
</head>
Cont.…

<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

69 Department of Software Engineering 04/30/2024


Validating radio buttons

• Checks to see whether either of the radio buttons


have been clicked.
• Mostly used for unique identification
• Use built in function .checked for validation

70 Department of Software Engineering 04/30/2024


Example
<html>
<head>
<script>
function validation() {
if ( ( document.reg_form.dept[0].checked == false ) &&
(document.reg_form.dept[1].checked == false) ) {
alert ( "Please choose your Gender: Male or Female" );
valid = false; }
}
</script>
</head>

71 Department of Software Engineering 04/30/2024


<body >
<form name="reg_form">
<input type="radio" name="dept" value="female">female
<input type="radio" name="dept" value="male">male
<input type="submit" onclick="validation()"
value="register">
</form>
</body>
</html>

72 Department of Software Engineering 04/30/2024


Validating drop-down lists

 Used to make sure that one of the elements from drop down list has
been selected or not.
 The pre defined function .selctedIndex can get the selected element
from the drop down list.
example
<html>
<head>
<script>
function validation()
{
if ( document.reg_form.dept.selectedIndex == 0 ) {
alert ( "Please select your departement." );
return false; }
}
</script>
</head>

73 Department of Software Engineering 04/30/2024


<body>
<form name="reg_form">
department<select name="dept">
<option>select your department here</option>
<option>computer science</option>
<option>information technology</option>
<option>information system</option>
</select>
<input type="button" value="register"
onclick="validation()">
</body>
</html>

74 Department of Software Engineering 04/30/2024


me nt
s s i gn
i ng a .
ut J S
R ead Mo r e a b o
R e a d
h - 3
of C
END
A?
Q&

75 Department of Software Engineering 04/30/2024

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy