UNIT-3

Introduc on to JavaScript

Part-b

1. Explain in details about variables and data types in java Script.?

JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.

1. Primi ve data type

2. Non-primi ve (reference) data type

JavaScript is a dynamic type language , means you don't need to specify type of the variable because it is
dynamically used by JavaScript engine. You need to use var here to specify the data type. It c an hold any
type of values such as numbers, strings etc. For example:

There are five types of primi ve data types in JavaScript. They are as follows:
1. var a=40;//holding number

2. var b="Rahul";//holding string

 JavaScript primi ve data types

JavaScript non-primi ve data types

Data Type Descrip on

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

The non-primi ve data types are as follows:

 Variable: local variable and

Data Type Descrip on

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

A JavaScript variable is simply a name of storage loca on. There are two types of variables in JavaScript :

There are some rules while declaring a JavaScript variable (also known as iden fiers).

1. Name must start with a le er (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. A er first le er we can use digits (0 to 9), for example value1.

3. JavaScript variables are case sensi ve, for example x and X are different variables.
global variable.

Correct JavaScript variables

1. var x = 10;

2. var _value="sonoo";
A JavaScript local variable is declared inside block or func on. It is accessible within the func on or block
Example of JavaScript variable

Let’s see a simple example of JavaScript variable.

<script> var

x = 10; var

y = 20; var

z=x+y;

document.w

rite(z);

</script>

Output of the above example

30

JavaScript local variable

only. For example: <script>

func on abc(){ var

x=10;//local variable

</script>

JavaScript global variable

A JavaScript global variable is accessible from any func on. A variable i.e. declared outside the func on
or declared with window object is known as global variable. For example:

<script> var

data=200;//gloabal variable
 func on a(){

document.writeln(data);

func on b(){

document.writeln(data);

a();//calling JavaScript func on

b();

</script>

2. Explain in detail about operators and operator precedence in java Script.?

JavaScript Operators

JavaScript operators are symbols that are used to perform opera ons on operands. For example:

Operator Descrip on Example

+ Addi on 10+20 = 30
 - Subtrac on 20-10 = 10

var sum=10+20;

Here, + is the arithme c operator and = is the assignment operator.

There are following types of operators in JavaScript.

* Mul plica on 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

1. Arithme c Operators

2. Comparison (Rela onal) Operators

3. Bitwise Operators

4. Logical Operators

5. Assignment Operators

6. Special Operators

JavaScript Arithme c Operators

Arithme c operators are used to perform arithme c opera ons on the operands. The following operators
are known as JavaScript arithme c operators.

follows:
JavaScript Bitwise Operators

The bitwise operators perform bitwise opera ons on operands. The bitwise operators are as follows:

Operator Descrip on Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

avaScript Logical Operators

JavaScript Assignment Operators

The following operators are known as JavaScript assignment operators.

Operator Descrip on

(?:) Condi onal Operator returns value based on the condi on. It is like if-else.

, Comma Operator allows mul ple expressions to be evaluated as single statement.

Delete Delete Operator deletes a property from the object.

In In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

 New creates an instance (object)

Operator Descrip on Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Mul ply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators

The following operators are known as JavaScript special operators.
 Typeof checks the type of object.

Void it discards the expression's return value.

Yield checks what is returned in a generator by the generator's iterator.

Operator precedence:
Mul plica on (*) and division (/) have higher precedence than addi on (+) and subtrac on (-).

Expressions in parentheses are computed before the rest of the expression

Func on are executed before the result is used in the rest of the expression

Operator precedence describes the order in which opera ons are performed in an arithme c expression.
Math Property Descrip on

SQRT2 Returns
square root
of 2.
PI Returns Π
value.
E\ Returns
Euler's
Constant.
LN2 Returns
natural
logarithm of
2.

3. Brief about various date and math related object with examples?

Math Object

• Math object is a built-in sta c object.

• It is used for performing complex math opera ons.

Math Proper es
LN10 Returns natural logarithm of 10.

LOG2E Returns base 2 logarithm of E.

LOG10E Returns 10 logarithm of E.

Math Methods
Methods Descrip on

abs() Returns the absolute value of a number.

acos() Returns the arccosine (in radians) of a number.

ceil() Returns the smallest integer greater than or equal to a number.

cos() Returns cosine of a number.

floor() Returns the largest integer less than or equal to a number.

log() Returns the natural logarithm (base E) of a number.

max() Returns the largest of zero or more numbers.

min() Returns the smallest of zero or more numbers.

pow() Returns base to the exponent power, that is base exponent.

Example: Simple Program on Math Object Methods

<html>
<head>
< tle>JavaScript Math Object Methods</ tle>
 </head>
<body>
<script type="text/javascript">

var value = Math.abs(20);

document.write("ABS Test Value : " + value +"<br>");

var value = Math.acos(-1);

document.write("ACOS Test Value : " + value +"<br>");

var value = Math.asin(1);

document.write("ASIN Test Value : " + value +"<br>");

var value = Math.atan(.5);

document.write("ATAN Test Value : " + value +"<br>");
</script>
</body> </html>

Output

ABS Test Value : 20

ACOS Test Value : 3.141592653589793
ASIN Test Value : 1.5707963267948966
ATAN Test Value : 0.4636476090008061

2. Date Object

• Date is a data type.

• Date object manipulates date and me.

Date() constructor takes no arguments. • Date object allows you to get and
set the year, month, day, hour, minute, second and millisecond fields.

Syntax:
var variable_name = new Date();

Example:
var current_date = new Date();

Date Methods
Methods Descrip on

Date() Returns current date and me.

getDate() Returns the day of the month.

getDay() Returns the day of the week.

getFullYear() Returns the year.

getHours() Returns the hour.

getMinutes() Returns the minutes.

getSeconds() Returns the seconds.

getMilliseconds() Returns the milliseconds.

getTime() Returns the number of milliseconds since January 1, 1970 at 12:00 AM.

getTimezoneOffset() Returns the mezone offset in minutes for the current locale.

getMonth() Returns the month.

setDate() Sets the day of the month.

setFullYear() Sets the full year.

setHours() Sets the hours.

setMinutes() Sets the minutes.

setSeconds() Sets the seconds.

setMilliseconds() Sets the milliseconds.

setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM.
Example : JavaScript Date() Methods Program

document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");

document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>

setMonth() Sets the month.

toDateString() Returns the date por on of the Date as a human-readable string.

toLocaleString() Returns the Date object as a string.

toGMTString() Returns the Date object as a string in GMT mezone.

valueOf() Returns the primi ve value of a Date object.

<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
 </center>
</body>
</html> Output:

4. Write a JavaScript code for valida ng new user registra on form which includes the fields like
username, password, confirm password, gender, date of birth, contact number and mail id.

<!DOCTYPE html>

<html>

<head>

< tle>Reg Form</ tle>

<style type="text/css">

body{ font-family:

Calibri;

input[type="text"] {

width: 250px;

input[type="submit"], input[type="reset"] {

width: 77px; height:

27px; posi on: rela ve;le :

180px;

}
 form{ text-align:

center; font-family:

Calibri; font-size: 20px;

border: 3px solid black;

width: 600px; margin:

20px auto;

td {

padding: 10px;

td:first-child {

text-align: right; font-

weight: bold;

td:last-child {

text-align: le ;

</style> <script>

func on validate() {

var fname = document.reg_form.fname;

var lname = document.reg_form.lname;

var address = document.reg_form.address;

var ge nder = document.reg_form.gender;

var email = document.reg_form.email;

var mobile = document.reg_form.mobile; var course =

document.reg_form.course;
 if (fname.value.length <= 0) {

alert("Name is required");

fname.focus(); return

false;

if (lname.value.length <= 0) {

alert("Last Name is required");

lname.focus(); return false;

if (address.value.length <= 0) {

alert("Address is required");

address.focus(); return

false;

if (gender.value.length <= 0) {

alert("Gender is required");

gender.focus(); return

false;

if (email.value.length <= 0) {

alert("Email Id is required");

email.focus(); return false;

if (mobile.value.length <= 0) {

alert("Mobile number is required");

mobile.focus(); return false;

 }

if (course.value == "select course") {

alert("Course is required"); course.focus();

return false;

return false;

</script>

</head>

<body>

<center><h1>Form Valida on using HTML,CSS,JavaScript</h1></center>

<hr>

<form method="" ac on="" name="reg_form" onsubmit="return validate()" >

<td><label>Firs t Name: </label></td>

<input type="text" name="fname" placeholder="First Name" >

<h2>Registra on Form</h2>

<table>

<tr>

<td>

</td>

</tr>
<tr>

<td><label>Last Name: </label></td>

<td>

<td><label>Email Id: </label></td>

<input type="text" name="email" placeholder="[email protected]">

<td><label>Mobile: </label></td>
<input type="text" name="lname" placeholder="Last Name">

</td>

</tr>

<tr>

<td><label>Address: </label></td>

<td>

<input type="textarea" size="50" name="address" placeholder="Address">

</td>

</tr>

<tr>

<td><label>Gender: </label></td>

<td>

<input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="femele">Female

</td>

</tr>

<tr>
 <td>

<input type="submit" name="submit" value="Submit">

<input type="reset" name="reset" value="Reset" >

</td>

</tr>

<tr>

<td>

<input type="number" name="mobile">

</td>

</tr>

<tr>

<td><label>Course: </label></td>

<td>

<select name="course">

<op on value="select course">select course</op on>

<op on value="HTML">HTML</op on>

<op on value="CSS">CSS</op on>

<op on value="JavaScript">JAVASCRIPT</op on>

<op on value="Java">JAVA</op on>

</select>

</td>

</tr>

<tr>

<td>
 </td>

</tr>

</table>

</form>

</body>

</html>

Output