Scribd
Upload
38 views

msbte campus css unit 1

Css notes 22519 chapter 1

Uploaded by

Shlok Chaudhari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

msbte campus css unit 1

Css notes 22519 chapter 1

Uploaded by

Shlok Chaudhari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Chapter:1 Basics Of JavaScript Programming.

Client Side Scripting


1.1 Features of JavaScript
JavaScript was developed by Netscape in 1995. At that time its name was Live
Script. Later on sun Microsystems joined the Netscape and then they developed
Live script. And later on its name changed to JavaScript.

Following are some features of JavaScript


1. Browser support:
For running the JavaScript in the browser there is no need to use some plug-in.
almost all the popular browsers Support Java scripting

2. Structure programming syntax:


The JavaScript Supports much commonly the structured language type syntax.
similar to C-style the programming blocks can be written.

3. It automatically inserts the semicolon at the end of the statement, hence there
is no need to write semicolon at the end of the statement in JavaScript.

4.Dynamic typing:
It supports dynamic typing, that means the data type is bound to the value and
not to the variable. For example one can assign integer value to a variable say
‘a’ and later on can assign some string value to the same variable in JavaScript.

5. Run time evaluation:


Using the eval function the expression can be evaluated at run time.

6.Support for object :


JavaScript is object oriented scripting language. However handling of objects in
JavaScript is somewhat different that the conventional object oriented
programming languages. JavaScript has a small number of in-built objects.
7. Regular expression :JavaScript supports Use of regular expressions using
which the text-pattern matchin8 can be done. this feature can be used to validate
the data on the web page before Submitting it to the server.

8. Function programming :In JavaScript functions are used. One function


car accept another function as a parameter. Even, one function can be assigned
to a variable just like some data type. The function can be run without giving
the name
Prepared By:Mr Vikas Ligade. Page 1
Chapter:1 Basics Of JavaScript Programming.

1.1.1 How to Write JavaScript Document?


The JavaScript can be directly. Embedded within the HTML document or it can
be stored as external file.
Syntax:
The syntax of directly embedding the JavaScript in the HTML is
< Script type-"text/javascript>
//**
</script
There are two important attributes of script tag- type and language.
The type attribute can be written as follows-
<script type= text/javascript>
//script here
</script>
The language attribute can be written as follows
<Script language= "JavaScript>
//script here
</script>
Ex. 1.1.1: Write a Java Script to display Welcome message in JavaScript
Sol.: <html>
<body>
<h2>Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript");
</script>
</body>
</html>
How to run JavaScript Document ?

Prepared By:Mr Vikas Ligade. Page 2


Chapter:1 Basics Of JavaScript Programming.

For running your JavaScript, just open the Web browser like Internet Explorer,
Mozilla Firefox and Chrome and type the name of the file on the address bar
along with its complete pathname.
For example - My JavaScript program has a name FirstPg.html and it is present
at the location
d:/JavaScript_Ex folder. Hence the complete path is typed at the address bar
Script Explanation

In above script
1) We have embedded the javaScript within
<script type="text/javascript">
</script>
2) A comment statement using / *and */. Note that this type of comment will be
recognized only within the <script >tag. Because, JavaScript supports this kind
of comment statement and not the XHTML document
3) Then we have written document. write statement, using which we can display
the desired message on the web browser. To print the desired message on the
web browser we write the message in double quotes inside the document.write
method.
For example
document. write("Welcome to First Page of JavaScript");

Prepared By:Mr Vikas Ligade. Page 3


Chapter:1 Basics Of JavaScript Programming.

Comments in JavaScript
JavaScript supports following comments
1. The / i.e. a single line comment can be //used in JavaScript.
2. The/* and* / can be used as a multi-line comment.
3. The XHTML <!__> and <__>is also allowed inJavaScript

1.2 Object Name, Property, Method, Dot Syntax,Main Event


In this section we will discuss some basic concepts that are used in JavaScript

Object Name
JavaScript is a object oriented programming language.
That means programs are written using objects.
Object is nothing but some entity. In JavaScript document, window, forms,
fields, buttons are some
popularly used objects.
Each object is identified by either an ID or by a name.
Sometimes an array or collection of objects can also be created and particular
object can be accessed from that array.

Property:
Property is actually a value associated with each object.
For example - for the object window the height and width are the properties that
are associated with it.
Each object has its own set of properties.

Method:
Method is a unction or a process associated with each object,
For example - for the document object the method is write. To this write method
we pass the string which we want to get displayed on the browser window.

Dot Syntax
Every object is associated with some property and method.
For accessing the properties and methods of an object we use dot operator.
Prepared By:Mr Vikas Ligade. Page 4
Chapter:1 Basics Of JavaScript Programming.

For example
document.write("Hello "V/accessing method write of
//document object

Main Event:
Event is something that causes JavaScript to executethe code.
For example - if you press a key for F1 and function for F1 gets executed.
In JavaScript when user submits the form, clicks some button, writes something
to text box then
corresponding events get triggered.
Execution of appropriate code on Occurrence to event is called event handling.
Normally some functions are defined for event handling. These functions are
called event handler.

1.3 Values and Variables


Values
JavaScript uses six types of values - number, String Boolean, null, object and
function

Number
Number is a numeric value that can be integer or float.
It can be used calculation.

String
String is a collection of characters. It is enclosed within single quote or double
quote. A string may contain numbers but these numbers can not be used for
calculations

Boolean
The Boolean values are true and false. These values can be compered with the
variables or can be used in assignment statement.

Null
The Null value can be assigned by using the reserved word null. The null means
no value. If we try to access the null value then a runtime error will occur.

Prepared By:Mr Vikas Ligade. Page 5


Chapter:1 Basics Of JavaScript Programming.

Object
Object is for an entity that represents some value. For example window object
is a value using which the window is created. Form is an object upon which
some components such as Button, Checkbox, radio buttons can be placed and
used.

Function
Function is intended for execution of some task. There can be predefined
function and user defined
Function
for example –
alert() is a predefined function, using which a popup window having some
message can be displayed. Similarly, one can write his/her own function called
user defined function in
JavaScript. The keyword function is used while defining the user defined
function.

1.3.2 Variables
In java script we can declare the variable using the reserved word var. The value
of this variable can be anything; it can be numeric or it can be string or it can be
a Boolean value.
[JavaScript VarDemo.html]
<!DOCTYPE html>
<html>
<head>
<title> variables in JavaScript </title>
</head>
<body
<script type="text/javascript">
<script>
var x = 10;
var y = 20;

Prepared By:Mr Vikas Ligade. Page 6


Chapter:1 Basics Of JavaScript Programming.

var z=x+y;
document.write(z);
</script>
</body
</html>

Note that using ‘var’ we can define the variable which is of type numbers(2,3 or
5) as well as the string
The result = “”.
Rules for Using Variables
Following are some conventions used in JavaScript for handling the identifiers-
1. Identifiers must begin with either letter or underscore or dollar sign. It is then
followed by any number of letters, underscores, dollars or digits.
2. There is no limit on the length of identifiers.
3. The letters in the identifiers are case-sensitive. That means the identifier
INDEX, Index, index, inDex are considered to be distinct.
4 Programmer defined variable names must not have upper case letters.
1.3.3 Keywords
Keywords are basically the reserved words are the special words associated
with some meaning. Various keywords that are used in JavaScript are enlisted
as below –

Prepared By:Mr Vikas Ligade. Page 7


Chapter:1 Basics Of JavaScript Programming.

1.4 Operators and Expressions


Various operators used by JavaScript are as shown in following table

Conditional Operator
The conditional operator is ? The syntax of conditional operator is
Condition?expression1:expression 2
Where expression denotes the true condition and expression2 denotes talse
condition.

Prepared By:Mr Vikas Ligade. Page 8


Chapter:1 Basics Of JavaScript Programming.

For example
a>b?true:false
This means that if a is greater than b then the expression will return the value
true otherwise it will return false.
Expressions
JavaScript makes use of mathematical statements using operators and operands.
These statements are called expressions.
1.5 If Statement
As a selection statement we use various types of if statements. These statements
are -
1. if-
The syntax of if is:
if(condition)
statement if the condition is true
2. if...else –
The syntax of if...else is:
if(condition)
statement if the condition is true
else
statement if the condition is false
3.if...else if –
The syntax of if...else if is:
if(condition)
statement if the condition 1s true
else if(condition)
statement it another condition 1s true
else if(condition)

Prepared By:Mr Vikas Ligade. Page 9


Chapter:1 Basics Of JavaScript Programming.

statement if another condition is true


else
statement
Some times we can have nested if...statements, which work similar to C or C+.
Here is a sample JavaScript
JavaScript[iFDemo.html]
<!DOCTYPE html>
<html>
<head>
<title>If else Demo</title>
</head>
<body>
<scrript type="text/javascript>
var a,b.c;
a=10;b=20;c=30;
if(a>b){
if(a>c)
document.write("<h3>a is largest number</h3> )}
else
document.write("<h3>c is largest number</h3>")}
else
if(b>c)
document. write("<h3>b is largest number </h3 )
else
document.write(<h3>c is largest numbers/h3>
</script>
</body>

Prepared By:Mr Vikas Ligade. Page 10


Chapter:1 Basics Of JavaScript Programming.

</html>
Script Explanation
The above document is to find the largest number from the given three numbers.
we nave used nested if...else statements. The script is pretty simple, in which
first of all we have compared a with b, if a is greater than b then we have
compared a with c. Similarly in the else part b is compared with c. Thus allthe
three numbers get compared with each other and the largest number is found out
among the three.
Since already in our program we have set the a, b and c values as 10, 20 and 30
respectively the output should be cis largest number and here comes the output
on web browser
We can use various operators such as arithmetic operator, logical operator,
relational operators and so on in the if statement. Following JavaScript makes
use of such operators.
JavaScript[ifElse Demo.html]
<!DOCTYPE html>
<html>
<head>
<title>If else Demo</title>
</head>
<body>
<script type="text/javascript'>
var marks;
marks=80;
if(marks<40)
document.write("You are failed");
else if(marks>=40 && marks<50)
document.write("You are passed'");
else if(marks> =50 && marks<60)
document.write("You have got Second class");

Prepared By:Mr Vikas Ligade. Page 11


Chapter:1 Basics Of JavaScript Programming.

else if(marks> =60 && marks<66)


document.write("You have got First class');
else
document.write("You are Distinction Holder");
</script>
</body>
</html>
in above script if we change the values of the marks variable then appropriate
message will get displayed on the web browser.

1.6 Switch Case Statement


Switch case statement is basically to execute the desired choice. The syntax of
this control structure 1s
similar to that in C or C++
Switch(choice)
{
case identifier: statement
break
default: statement
JavaScript[SwitchDemo.html)
<!DOCTYPE html>
<html>
<head>
<tittle>Switch Case Demo</title>
</head>
<body>
<script type= text/javascript>

Prepared By:Mr Vikas Ligade. Page 12


Chapter:1 Basics Of JavaScript Programming.

d=new Date (;
ch=d.getMonth();
switch(ch)
case 0: adocument.write(January )
break
case 1: document.Write(February");
break;
case 2: document. Wnte("March'");
break;
case 3: document.write("April"
break;
case 4: document.write('May );
break;
case 5: document.write('June');
break;
case 6: document.write(July)
break;
case 7: document.write("August )
break;
case 8: document.write('September");
break;
case 9: document.write('October);
break;
case 10: document.write('November);
break
case 11: document.write(December);
break;
Prepared By:Mr Vikas Ligade. Page 13
Chapter:1 Basics Of JavaScript Programming.

</script>
</body>
</html>
Script Explanation: In this script,
(1) We have used the object Date which returns the value of the current date.
(2) Then using getMonth() method the month value can be obtained. The month
value starts from 0 t011 representing January to December. This value is
basically obtained from system date function. The month is taken in variable ch
according to the value in ch the corresponding case will get executed.
1.7 Loop Statement
1.7.1 while Loop
while statements help us in implementing the iterative logic of the program. The
syntax of while is a
follows-
Some initial condition;
while(terminating condition)
{
//some statements;
stepping condition;
}
The while is implemented by following JavaScript.
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("<b>Fibonacci series less than 40</b><br />");
while(i<40)

Prepared By:Mr Vikas Ligade. Page 14


Chapter:1 Basics Of JavaScript Programming.

{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>

1.7.2 do..while Loop


The do-while loop is similar to the while loop, the only difference is that the do-
while executes at least once.
The syntax of do...while is
Do{
…
}while(condition);
The following JavaScript ill ustrates use of do...while

Prepared By:Mr Vikas Ligade. Page 15


Chapter:1 Basics Of JavaScript Programming.

JavaScript[DoWhile.html]
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<=20)
</script>
</head>
<body>
</body>
</html>

Prepared By:Mr Vikas Ligade. Page 16


Chapter:1 Basics Of JavaScript Programming.

1.7.3 for Loop


This is the most commonly used programming construct.
The syntax of for loop:
for(initial condition; terminating condition; stepping condition)
Here is a JavaScript which makes use of for loop
JavaScript[ForLoop.html]
<html>
<head>
<script type="text/javascript">
var students = new Array("Sagar", "Ashwinn", "Aarav", "Rohit",
"Saksham");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>

Prepared By:Mr Vikas Ligade. Page 17


Chapter:1 Basics Of JavaScript Programming.

1.7.4 break Statement


Similar to C or C+, the break statement is used to break the loop. It is given be
keyword break. The following Script shows the use of break.
JavaScript[breakDemo.html]
<html>
<body>
<script type = "text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20) {
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write(" Here We are Exiting the loop!<br /> ");
</script>
</body>
</html>

Prepared By:Mr Vikas Ligade. Page 18


Chapter:1 Basics Of JavaScript Programming.

1.7.5 The continue Statement


The continue statement is used in a loop in order to continue(skip). The
keyword continue is used to make use of continue statement in a loop.
JavaScript Program[Continue Demo.html]
<html>
<body>
<script type = "text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10) {
x = x + 1;

if (x == 5) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>

Prepared By:Mr Vikas Ligade. Page 19

You might also like