Scribd
Upload
53 views

Basics of Javascript Programming: K. K. Wagh Polytechnic, Nashik-3

This document provides an overview of JavaScript including: - JavaScript is a dynamic programming language commonly used for web pages to provide interactivity. - It was developed by Netscape in 1995 under the name LiveScript and later renamed to JavaScript. - JavaScript allows embedding code directly in HTML documents or linking external JavaScript files. - The document then covers JavaScript features, enabling it in browsers, writing basic programs, using objects and properties, values and data types, operators, and decision making and looping structures like if/else statements and for/while loops.

Uploaded by

Sakshi Sathe
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
53 views

Basics of Javascript Programming: K. K. Wagh Polytechnic, Nashik-3

This document provides an overview of JavaScript including: - JavaScript is a dynamic programming language commonly used for web pages to provide interactivity. - It was developed by Netscape in 1995 under the name LiveScript and later renamed to JavaScript. - JavaScript allows embedding code directly in HTML documents or linking external JavaScript files. - The document then covers JavaScript features, enabling it in browsers, writing basic programs, using objects and properties, values and data types, operators, and decision making and looping structures like if/else statements and for/while loops.

Uploaded by

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

K. K.

Wagh Polytechnic, Nashik-3

Chapter 1
Basics of JavaScript Programming
Overview of JavaScript:
• It is dynamic Computer Programming language
• Lightweight and most commonly used for web pages.
• It interact with user and make a web page dynamic.
• Using HTML only static pages can be created.
• No user interaction with HTML
• JavaScript was developed by Netscape in 1995.
• Its initial name was LiveScript.
• Later on Sun Microsystems joined Netscape and the name
is changed to JavaScript.
Features of JavaScript:

• Browser Support: No plug-in needed. Almost all


browsers support
• Structure Programming Syntax: Similar to ‘C’
• Automatically inserts ‘;’ at the end of statement. No need
to write.
• Dynamic Typing: Data type is bound to value not to
variable. Ex: one can assign integer value to any variable
say ‘a’ and later can assign string value to same variable
‘a’.
• Run time Evaluation: ‘eval’ function can be used in
expression
Features of JavaScript cont.:

• Support for object: It is Object Oriented Programming


language
• Regular Expression: Supports use of regular expression
using which text-pattern matching can be done.
• Function Programming: In this functions can be used.
One function can use other or can be assigned to a
variable just like some data type.
Enabling JavaScript for various Browsers:
Enabling JavaScript for various Browsers:
Enabling JavaScript for various Browsers:
Writing a JavaScript Document :

• The javascript can be directly embedded within HTML document


or it can be stored as external file.
• Syntax:
• <script type=“text/javascript”>
------------
-------------
</script>
Two attributes of <script> tag are:
• type: <script type=“text/javascript”>
</script>
• language: <script language=“javascript”>
</script>
Writing a First Program:

<html>
<head></head>
<body>
<script type="text/javascript">
document.write("HELLO WORLD");
</script>
<p>this is web page body</p>
</body>
</html>
Explanation of Program:

• We have embedded a javascript within


<script type=“=“text/javascript”>
----------
</script>
• A comment can be
//
/* */ or can use XHTML comment
<! -- > and < -->
• document.write is used to display desired message on web
browser.
• To run the program
Open any web browser and type complete name of file on the
address bar.
Object Properties:

 Object Name:
• Object is entity. In JavaScript document, window, forms, fields,
buttons are some properly used objects.
• Each object is identified by ID or name.
• Array of objects or Array of collections can also be created.
 Property:
• It is the value associated with each object.
• Each object has its own set of properties.
 Method:
• It is a function or process associated with each object.
• Ex: for document object write is a method.
 Dot Syntax: Used to access properties and methods of object.
 Main Event: Event causes JavaScript to execute the code. In JavaScript
when user submits form, clicks button, writes something to text box the
corresponding event gets triggered and execution of appropriate code is
done through Event Handling.
Values:

 Values:
It uses six types of values:
• Number: It is numeric value can be integer or float.
• String: It is a collection of characters. Enclosed within single or
double quote.
• Boolean: It contains true and false values. Values can be compared
with variables and can be used in assignment statement.
• Null: This value can be assigned by reserved word ‘null’. It means no
value. If we try to access null value error will occur.
• Object: It is the entity that represents some value. Ex: Form is an
object on which some components can be placed and used.
• Function: It is intended for execution of some task. There are
predefined and user defined functions. The ‘function’ keyword is used
to define function.
Keywords:

• These are the reserved words having some special meaning associated
with it.
abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with
Operators and Expressions:

Sr. Type Operator Meaning Example


No.
1. Arithmetic + Addition or Unary plus c=a+b
- Subtraction or Unary d=-a
minus
* Multiplication c=a*b
/ Division c=a/b
% Mod c=a%b
2. Logical && AND Operator 0&&1
|| OR Operator 0||1
3. Increment ++ Increment by one ++i or i++
4. Decrement -- Decrement by one --i or i--
5. Conditional ?: Conditional Operator a>b?true:false
Operators and Expressions cont.:

Sr. Type Operator Meaning Example


No.
6. Assignment = Is assigned to a=5
+= Add a value then assign a+=5 (a=a+5)
-= Subtract a value then assign a-=5(a=a-5)
*= Multiply a value then assign a*=5(a=a*5)
/= Divide a value then assign a/=5(a=a/5)
7. Relational < Less than a<4
> Greater than a>4
<= Less than equal to a<=4
>= Greater than equal to a>=4
== Equal to a==4
!= Not Equal to a!=4
=== equal value and equal type a===5
!== not equal value or not equal a!==5
type
AWT Classes:

AWT Classes form three catagories:


1) Graphics: Color, Font, Images, Polygons, etc.
2) Components: GUI Components: Button, Menus, Panel, Frame
Container class contains Components, LayoutManagers
3)LayoutManager: Gives rules for graphical layout of
components in a container.
Decision Making and Branching
1) if Statement
2) if-else Statement
3) if-else if Statement
4) switch Statement
Decision Making and Branching Cont.
1) if Statement
if (Condition) OR if (Condition)
{ statement(s); statement;
}

Condition contains Relational operators as well as Logical Operators.


Ex: if (i > 0)
{
-------;
}
if (i > 1 || j!=5)
{
-------;
}
Decision Making and Branching Cont.
2) if else Statement
if (condition)
{
stmt(s) for true case;
}
else
{
stmt(s) for true case;
}
Or
if (condition)
stmt for true case;
else
stmt for true case;
Multiple Alternative if Statements

if (score >= 90)


grade = ‘A’;
else
if (score >= 80)
grade = ‘B’;
else
if (score >= 70)
grade = ‘C’;
else
if (score >= 60)
grade = ‘D’;
else
grade = ‘F’;
switch Statements

switch (variable-name)
{
case value1:
Execute stmt1;
break;
case value2:
Execute stmt2;
break;
case valueN:
Execute stmtN;
break;
default:
Execute last;
}
Decision Making and Looping

1) While Loop

while (condition is true)


{
// loop-body;
}
e.g.
int a = 20;
while(a>10)
{
document.write(“JPR”);
a--;
}
Decision Making and Looping
2) do while Loop

do
{
// Loop body;
}
while (condition is true);
e.g.
int a = 0;
do
{
document.write(a);
a++;
}while(a<50);
Decision Making and Looping
3) for Loop
for(initialization; condition; incr/decrement)
{
// Loop body;
}
e.g.
int a;
for(a=0;a<10;a++)
{
document.write(a);
}
OR
int a;
for(a=0;a<10;a++)
document.write(a);
Decision Making and Looping
4) for in Loop
• The for/in statement loops through the properties of an object.
• The block of code inside the loop will be executed once for each
property.
• Syntax:
for (var in object)
{
code block to be executed
}

• Parameter Values
Parameter Description
var Required. A variable that iterates over properties
of an object
object Required. The specified object that will be iterated
break Statement
• The break statement can also be used to jump out of a loop.
• The break statement breaks the loop and continues executing
the code after the loop (if any):
Syntax:
jump-statement;    
break;
Ex:
for (i = 0; i < 10; i++)
{
if (i === 3)
{ break; }
text += "The number is " + i + "<br>";
}
break Statement
Output:
The number is 0
The number is 1
The number is 2
continue Statement
• The continue statement breaks one iteration (in the loop), if a
specified condition occurs, and continues with the next
iteration in the loop.
• Syntax:
jump-statement;    
break;
Ex:
for (i = 0; i < 10; i++)
{
if (i ==3)
{ continue; }
text += "The number is " + i + "<br>";
}
continue Statement
Output:
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

You might also like