Scribd
Upload
33 views

Unit I PPT CSS 1

The document discusses client side scripting and JavaScript programming. It covers topics like features of JavaScript, object name, properties, methods, dot syntax, main events, values and variables, and operators and expressions. Code examples are provided to illustrate various JavaScript concepts.

Uploaded by

21Siddhi Doke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Unit I PPT CSS 1

The document discusses client side scripting and JavaScript programming. It covers topics like features of JavaScript, object name, properties, methods, dot syntax, main events, values and variables, and operators and expressions. Code examples are provided to illustrate various JavaScript concepts.

Uploaded by

21Siddhi Doke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Client Side Scripting

1
• Create interactive web pages
CO1 using program flow control
structure

• Create Object to solve the given


LO1 problem
• Develop program using basic
LO5 features of JavaScript to solve
the given problem

Department of Information Technology,Government


Polytechnic Awasari(kh)

2
TEACHING AND EXAMINATION SCHEME

Department of Information Technology,Government


Polytechnic Awasari(kh)

3
What is JavaScript Programming?
What are the features of JavaScript?

Department of Information Technology,Government


Polytechnic Awasari(kh)

4
CONTENTS

1. Features of JavaScript

2. Object Name, Property , Method ,Dot syntax, Main event


3. Values and Variables
4. Operators and Expressions

5
Department of Information Technology,Government
Polytechnic Awasari(kh)
JAVASCRIPT

1.Concept of JavaScript

2. Features of JavaScript

3. Limitations of JavaScript

4. Advantages of JavaScript

5. Simple program in JavaScript

6. Object Name, Property , Method ,Dot syntax, Main event

7. Operators and Expressions

6
Department of Information Technology,Government
Polytechnic Awasari(kh)
JAVASCRIPT

• JavaScript is an open source & most popular client side scripting language
supported by all browsers.
• JavaScript is a very powerful client-side scripting language.
• JavaScript is used mainly for enhancing the interaction of a user with the
webpage.
• You can make your webpage more lively and interactive, with the help of
JavaScript.

7
Department of Information Technology,Government
Polytechnic Awasari(kh)
FEATURES OF JAVASCRIPT
1. JavaScript is an object-based scripting language.

2. Giving the user more control over the browser.

3. It Handles dates and time.

4. It detects the user's browser and OS.

5. It is light weighted.

6. JavaScript is interpreter based scripting language.

7. JavaScript is case sensitive.

8. JavaScript is object based language as it provides predefined objects.


9. Every statement in JavaScript must be terminated with semicolon (;).

10. Most of the JavaScript control statements syntax is same as syntax of control
statements in C language.

8
Department of Information Technology,Government
Polytechnic Awasari(kh)
LIMITATIONS OF JAVASCRIPT

1. Client-side JavaScript does not allow the reading or writing of files. This
has been kept for security reason.

2. JavaScript cannot be used for networking applications because there is


no such support available.
3. JavaScript doesn't have any multi-threading or multiprocessor
capabilities.

9
Department of Information Technology,Government
Polytechnic Awasari(kh)
ADVANTAGES OF JAVASCRIPT

1. Less server interaction − you can validate user input before sending the
web page to the server. This saves server traffic, which means less loads
on your server.

2. Immediate feedback to the visitors − they don't have to wait for a page
reload to see if they have forgotten to enter something.

3. Increased interactivity − you can create interfaces that more interactive.


4. Richer interfaces − you can use JavaScript to include such items as drag-
and-drop components and sliders to give a Rich Interface to your site
visitors.

10
Department of Information Technology,Government
Polytechnic Awasari(kh)
JAVASCRIPT TAG

• JavaScript can be implemented using JavaScript statements that are


placed within the <script>...

</script> HTML tags in a web page.

• You can place the <script> tags, containing your JavaScript, anywhere
within your web page, but it is normally recommended that you should
keep it within the <head> tags.

• The <script> tag alerts the browser program to start interpreting all the
text between these tags as a script.

A simple syntax of your JavaScript will appear as follows.

<script ...>

JavaScript code

</script>

11
Department of Information Technology,Government
Polytechnic Awasari(kh)
JAVASCRIPT CODE

<script> tag has following attributes :

1.Language − This attribute specifies what scripting language you are using.
Typically, its value will be JavaScript
2.Type − this attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".
Example
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>
JavaScript Code:
<html>
<body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

12
Department of Information Technology,Government
Polytechnic Awasari(kh)
OBJECT NAME, PROPERTY , METHOD ,DOT SYNTAX,
MAIN EVENT
Object Name :
• A JavaScript object is a collection of named values and these named values are
properties of object .
• Each object should be uniquely identified by a name or IDs in web page to
distinguished between them.
• JavaScript supports various objects like document , form ,button , window etc
• In JavaScript , object can be created with curly brackets { } with an optional list of
properties.

• Example:
<script language=“Javascript” type=“text/javascript”>
var student= {
name:”vijay”,
age:21,
year:”TY”
};
</script>

13
Department of Information Technology,Government
Polytechnic Awasari(kh)
PROPERTY
• A property is a value associated with an object.
• Every object has its own set of properties for example window has properties like
width, height, background color.
• A property is a “key: value” pair,
1. key (property name) is always a string
2. value (property value) can be any data type like strings, numbers, Booleans
Program: Write a Javascript code to declare property
<html>
<head>
<title>object property</title>
<script language=“Javascript” type =“text/javascript”>
Var student ={
name:”vijay”,
age:21,
year:”TY”
};
document.write(student.name);
</script>
</head>
<body>

14
</body> </html>
Department of Information Technology,Government
Polytechnic Awasari(kh)
METHOD

• A method is a set of instructions performed by an object when it


receives a message.
• On the form when you click a submit button, the form is submitted to
the server-side application. It means, clicking the submit button causes
the button to process a some set of instructions (method)
Program: Write a Javascript code to illustrate the use of method
<html>
<head>
<title>Method</title>
<script language=“Javascript” type =“text/javascript”>
Var student ={
name:”vijay”,
age:21,
year:”TY”,
display: function() {
return(this.name); } };
document.write(“name=“ +student.display());
</script> </head>
<body> </body> </html>

15
Department of Information Technology,Government
Polytechnic Awasari(kh)
DOT SYNTAX AND MAIN EVENT

Dot syntax:
• One can access an object’s properties and methods by using the dot syntax
along with the object name and its property and method.
• For example, the write method for a document: document. write()
• The first part is the name of the object (document) and second part is either
a property or method (write) of the object.
Main event:
• In Javascript, an event is the way to start executing your code like on mouse
click, button click etc.
• Javascript reacts to event with the help of event handling.
• Event handling is the execution of code on occurrence of event. For
example- when click on submit button then the event handler for that click
event should process the information.
• The function written for event handling are known as event handler.

Department of Information Technology,Government

16
Polytechnic Awasari(kh)
VALUES AND VARIABLES
• Javascript is a dynamic language because a variable can hold value of any
data type at any point of time.
• Var keyword is used to specify the data type. It can hold any type of values
such as numbers, strings etc.
Following are the values used by Javascript
1. Number- A number is a numeric value. for example: var a=20;
2. String- A string a sequence of characters that is enclosed within quotation
marks. For example: var city=“pune”;
3. Boolean- A Boolean is a value-either false or true. for example: var b=true;
4. Null- Null value means no value at all. For example: var i=null;
5. Objects- An object is a instance through which we can access members.
for example: var person={first name : ”john”, last name :”doe”};

Department of Information Technology,Government

17
Polytechnic Awasari(kh)
OPERATORS
• Operators are the symbols which indicate operations to be performed.
• Operands are the variable on which operation to be performed.
• The systematic arrangement of operators and operands is known as
Expression.
There are following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6.Conditional Operators

Department of Information Technology,Government

18
Polytechnic Awasari(kh)
ARITHMETIC OPERATORS

• Arithmetic operators are used to perform arithmetic operations on the operands.


The following operators are known as JavaScript arithmetic operators.

Department of Information Technology,Government

19
Polytechnic Awasari(kh)
ARITHMETIC OPERATORS- PROGRAM
<html>
<body>
<script type = "text/javascript">
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br>";

document.write("a + b = "); result = a + b; document.write(result);


document.write(linebreak);

document.write("a - b = "); result = a - b; document.write(result);


document.write(linebreak);

document.write("a / b = "); result = a / b; document.write(result);


document.write(linebreak);

document.write("a % b = "); result = a % b; document.write(result);


document.write(linebreak);

document.write("a + b + c = "); result = a + b + c; document.write(result);


document.write(linebreak);

a = ++a; document.write("++a = "); result = ++a; document.write(result);


document.write(linebreak);

b = --b;
document.write("--b = "); result = --b; document.write(result); document.write(linebreak);
</script>
</body>
</html>

20
Department of Information Technology,Government
Polytechnic Awasari(kh)
COMPARISON OPERATORS

• The JavaScript comparison operator compares the two operands.


The comparison operators are as follows:

Department of Information Technology,Government

21
Polytechnic Awasari(kh)
COMPARISON OPERATORS- PROGRAM
<html>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
var linebreak = "<br>";

document.write("(a == b) => "); result = (a == b); document.write(result); document.write(linebreak);

document.write("(a < b) => "); result = (a < b); document.write(result); document.write(linebreak);

document.write("(a > b) => "); result = (a > b); document.write(result); document.write(linebreak);

document.write("(a != b) => "); result = (a != b); document.write(result); document.write(linebreak);

document.write("(a >= b) => "); result = (a >= b); document.write(result); document.write(linebreak);

document.write("(a <= b) => "); result = (a <= b); document.write(result); document.write(linebreak);


</script>
</body>
</html>

Department of Information Technology,Government

22
Polytechnic Awasari(kh)
BITWISE OPERATORS

• The bitwise operators perform bitwise operations on operands.


The bitwise operators are as follows:

Department of Information Technology,Government

23
Polytechnic Awasari(kh)
BITWISE OPERATORS: PROGRAM
<html>
<body>
<script type = "text/javascript">
var a = 2;
var b = 3;
var linebreak = "<br>";

document.write("(a & b) => "); result = (a & b); document.write(result); document.write(linebreak);

document.write("(a | b) => "); result = (a | b); document.write(result); document.write(linebreak);

document.write("(a ^ b) => "); result = (a ^ b); document.write(result); document.write(linebreak);

document.write("(~b) => "); result = (~b); document.write(result); document.write(linebreak);

document.write("(a << b) => "); result = (a << b); document.write(result); document.write(linebreak);

document.write("(a >> b) => "); result = (a >> b); document.write(result); document.write(linebreak);


</script>
</body>
</html>

Department of Information Technology,Government

24
Polytechnic Awasari(kh)
LOGICAL OPERATORS

The following operators are known as JavaScript logical operators

PROGRAM:
<html>
<body>
<script type = "text/javascript">
var a = true;
var b = false;
var linebreak = "<br>";
document.write("(a && b) => "); result = (a && b); document.write(result); document.write(linebreak);

document.write("(a || b) => "); result = (a || b); document.write(result); document.write(linebreak);

document.write("!(a && b) => "); result = (!(a && b)); document.write(result); document.write(linebreak);
</script>
</body>
</html>

Department of Information Technology,Government

25
Polytechnic Awasari(kh)
ASSIGNMENT OPERATORS

The following operators are known as JavaScript assignment


operators.

Department of Information Technology,Government

26
Polytechnic Awasari(kh)
ASSIGNMENT OPERATORS: PROGRAM
<html>
<body>
<script type = "text/javascript">
var a = 33; var b = 10; var result;
var linebreak = "<br>";
document. Write("Value of a => (a = b) => ");
result = (a = b); document.write(result);
document. Write(linebreak);
document. Write("Value of a => (a += b) => ");
result = (a += b); document.write(result); document. Write(linebreak);
document. Write("Value of a => (a -= b) => ");
result = (a -= b); document.write(result);
document. Write(linebreak);
document. Write("Value of a => (a *= b) => ");

result = (a *= b); document.write(result); document.write(linebreak);

document.write("Value of a => (a /= b) => ");


result = (a /= b); document.write(result); document.write(linebreak);

document.write("Value of a => (a %= b) => ");


result = (a %= b); document.write(result); document.write(linebreak);

</script>
</body>
</html>

Department of Information Technology,Government

27
Polytechnic Awasari(kh)
CONDITIONAL OPERATOR

• The operator (?:) is known as conditional operator.


• It is also called as Ternary operator.
• Syntax: Condition? Expression-1 : Expression-2;
• In above syntax, if condition is true then it will execute
Expression-1 otherwise Expression-2.
PROGRAM:
<html>
<body>
<script type = "text/javascript">

var a = 100; var b = 20; var result;

result = (a > b) ? a : b;
document.write("Greatest Number="+result);

</script>

</body>
</html>

Department of Information Technology,Government

28
Polytechnic Awasari(kh)
QUIZ TIME

Q1. Which JavaScript is also Q2 . What should appear at the very end
called client-side JavaScript? of your JavaScript?
The <script LANGUAGE="JavaScript">tag
a) Microsoft
b) Navigator A. The </script>
c) LiveWire B. The <script>
d) Native C. The END statement
D. None of the above

 Ans: b. Navigator  Ans: a. The </script>

29
Department of Information Technology,Government
Polytechnic Awasari(kh)
QUIZ TIME

Q3. Which of the following best  Q4. What is the correct JavaScript
describes JavaScript? syntax to write "Hello World"?

A. System.out.println("Hello World")
A. a low-level programming language.
B. println ("Hello World")
B. a scripting language precompiled in
C. document. Write("Hello World")
the browser.
D. response. Write("Hello World")
C. a compiled scripting language.
D. an object-oriented scripting language.

► Ans. D. an object-oriented ► Ans: C. document.write(“Hello


scripting language World”)

30
Department of Information Technology,Government
Polytechnic Awasari(kh)
THANK YOU
Thank You

Department of Information Technology,Government

31
Polytechnic Awasari(kh)

You might also like