Java script

CS 299 – Web Programming and Design
Javascript Basics With
Coding Standards

Introduction to JavaScript
What is JavaScript?
– It is designed to add interactivity to HTML pages
– It is a scripting language (a lightweight programming
language)
– It is an interpreted language (it executes without
preliminary compilation)
– Usually embedded directly into HTML pages
– And, Java and JavaScript are different
– Loosely typed language.
JavaScript is an object-based scripting language
which is lightweight and cross-platform
–

What can a JavaScript Do?
• JavaScript gives HTML designers a programming tool:
– simple syntax
• JavaScript can put dynamic text into an HTML page
• JavaScript can react to events
• JavaScript can read and write HTML elements
• JavaScript can be used to validate data
• JavaScript can be used to detect the visitor’s browser
• JavaScript can be used to create cookies
– Store and retrieve information on the visitor’s computer

JS How To & JS Where To

JavaScript where to & How to
• The HTML <script> tag is used to insert a JavaScript into an
HTML page
<script type=“text/javascript”>
document.write(“Hello World!”)
</script>
• Ending statements with a semicolon?
– Optional; required when you want to put multiple statements on a
single line
• JavaScript can be inserted within the head, the body, or use
external JavaScript file
• How to handle older browsers?
<script type=“text/javascript”>
<!—
document.write(“Hello World!”)
// -->
</script>

JavaScript Where To
• You can include JavaScripts in head, body, or
simply use external JavaScript file (.js)
• JavaScripts in the body section will be
executed while the page loads
• JavaScripts in the head section will be
executed when called
• Examples:
•

JS Statements

JS Statements
•

JavaScript statements are commands to the browser

JavaScript code is a sequence of statements

JavaScript statements are separated with semicolon

Multiple statement on one line is allowed

JavaScript statements can be grouped together in code
blocks

You can break a code line after an operator or a comma.


JS Comments

JavaScript Comments
Single-line Comment

Single line comments start with //.
Multi-line Comment

Multi-line comments start with /* and end with */.

JS Variables


JavaScript Variables

Variables are used to store data.

A variable is a "container" for information you
want to store. A variable's value can change
during the script. You can refer to a variable by
name to see its value or to change its value.

Rules for variable names:
 Variable names are case sensitive
 They must begin with a letter or the underscore
character

strname – STRNAME (not same)


JavaScript Variables Declartion

Names can contain letters, digits, underscores, and dollar signs.

Names must begin with a letter

Names can also begin with $ and _

Names are case sensitive (y and Y are different variables)

Reserved words (like JavaScript keywords) cannot be used as
names

var x = 5;

var y = 6;

var z = x + y;

.The scope of a variable is the region of your program in
which it is defined. JavaScript variables have only two
scopes.
Global Variables − A global variable has global scope
which means it can be defined anywhere 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 functionJavaScript allows you to
work with three primitive data types −
JavaScript Variable
Scope

.Global variable Declartion:Ouside the Function
<script>
var value=50;//global variable
function a(){
alert(value);
}
function b(){
alert(value);
}
</script>
Global Variable Declaration:outside Function

.Global Varible Declaration inside function:
function m(){
window.value=100;//declaring global variable by window
object
}
function n(){
alert(window.value);//accessing global variable from other
function
}
Global Variable Declaration:inside Function

JS Operators


JavadScript
Operators(Arithematic Operator)
Arithmetic Operators
Operator Description Example Result
+
x+y
Addition x=2 4
y=2
-
y=2
x-y
Subtraction x=5 3
*
y=4
x*y
Multiplication x=5 20
/
5/2
Division
2,5
15/5 3
%
10%8
10%2
Modulus (division
remainder)
2
0
5%2 1


Assignment Operators
Assignment Operators Operator Example Is The Same As
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y


Comparison Operators
Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
===
x==y
return
s true
x===y
return
s false
is equal to (checks for
both value and
type)
x=5
y="5"
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal
to
5>=8 returns false
<= is less than or equal to 5<=8 returns true


Logical Operators -
Logical Operators Operator Description Example
&&
(x < 10 && y > 1)
returns true
and x=6
y=3
||
y=3
(x==5 || y==5)
returns false
or x=6
!
y=3
!(x==y) returns
true
not x=6

JS Comparisons

Control Structures
 There are three basic types of control
structures in JavaScript: the if statement,
the while loop, and the for loop
 Each control structure manipulates a block
of JavaScript expressions beginning with
{ and ending with }


Conditional Statements
if statement
if...else statement
if...else if... statement.


Loop Statements
While Statement
Do ... While statement
For statement.


Loop Control Statements
Break Statement.
Continue Statement.

JS Popup Boxes


JavaScript Popup Boxes

Alert Box
 An alert box is often used if you want to make
sure information comes through to the user.
 When an alert box pops up, the user will have to
click "OK" to proceed.
<script>
alert("Hello World!")
</script>


JavaScript Popup Boxes - 2

Confirm Box
 A confirm box is often used if you want the user
to verify or accept something.
 When a confirm box pops up, the user will have
to click either "OK" or "Cancel" to proceed.
 If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.


JavaScript Popup Boxes - 3

Prompt Box
 A prompt box is often used if you want the user
to input a value before entering a page.
 When a prompt box pops up, the user will have
to click either "OK" or "Cancel" to proceed after
entering an input value.
 If the user clicks "OK“, the box returns the input
value. If the user clicks "Cancel“, the box
returns null.


Prompt Box Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}

JS Function


function
<script type = "text/javascript">

</script>.

JS Events


Window.print()
<html>
<head>
<script type = "text/javascript">

</script>
</head>
<body>
<form>
<input type = "button" value = "Print" onclick = "window.print()" />
</form>
</body>
<html>.

Java script

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Java script

Similar to Java script (20)

More from Sanjay Gunjal

More from Sanjay Gunjal (9)

Recently uploaded

Recently uploaded (20)

Java script