Javascript Core: © 2009, DCST

PGDCET/NWT Department of Computer Science & Technology
Lecture 10
JavaScript Core
© 2009, DCST
Objectives
You will learn about
• Comments
• Variables
• Arithmetic, relational and logical
operators
• Selection control structures
© 2009, DCST Javascript Core 10.2

Comments
• Comments are added
– To explain the code and to make the code
easy-to-understand
– To prevent execution of code. This is
helpful in debugging
• Single line comments start with //
• Multi line comments are enclosed in
/* ...*/

Comments...
Example:
<script type="text/javascript">
/*
(Multi-line comments)
The code below will write a heading and a paragraph
*/
document.write("<h1>This is a heading</h1>");
// Now is a paragraph (single-line comment)

document.write("<p>This is a paragraph.</p>");
</script>

Variables
• Variables are storage areas used to hold data
values
• A variable's value can change during the
execution of a script
• A variable must have a name
• You refer to a variable by its name to display or
change its value.
• Rules for JavaScript variable names:
– Variable names are case sensitive (y and Y
are two different variables)
– Variable names must begin with a letter or
the underscore character
Declaring Variables
• You can declare JavaScript variables with the var

statement
var x;
var carname;
• After the declaration shown above, the variables
are empty (they have no meaningful values yet).
• You can also assign values to the variables when
you declare them.
var x=5;
var carname="Volvo";

JavaScript Arithmetic Operators

• Arithmetic operators are used to perform arithmetic
between variables and/or constants.
• Given that y=5, the table below explains the
arithmetic operators
Operator Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus x=y%2 x=1
++ Increment (pre and post) x=++y x=6, y=6
-- Decrement (pre and post) x=y-- x=5, y=4
JavaScript Assignment Operators

• Assignment operators are used to assign values to
JavaScript variables.
• Given that x=10 and y=5, the table below explains the
assignment operators
Operator Example Same As Result

= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

String Operator ( + )
The + operator can also be used to join together
(concatenate) string variables or text values
Example 1:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
Variable txt3 contains "What a verynice day".
Example 2:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
Variable txt3 contains "What a very nice day"
Concatenation...
When the + operator is used on a numeric and a string
operand, the number is concatenated to the string operand
and the resultant value is a string
<html>
<head><title>JavaScript</title></head>
<body><h1>example</h1>
<script language="javascript">
var x;
x=5+5;
document.write(x); document.write(" ");
x="5"+"5";
x=5+"5";
x="5"+5;
document.write(x);
</script></body></html>
Escape Characters
• Here are some commonly used escapes characters that can be used
with methods like alert() and write()
\n: Inserts a new line and causes the text following the '\n' to be
placed on the new line.
\t: Inserts a tab
\r: Carriage return
\b: Backspace
\f: Form feed
\': Single quote
\": Double quote
\\: Backslash
• Example
alert("JavaScript\nis\na\nclient-side\nprogramming\nlanguage");
Relational Operators
• Relational operators are used to compare two values.
• Given that x=5, the table below explains the relational
operators
Operator Description Example

== is equal to x==8 is false
=== is exactly equal to (value x===5 is true
and type) x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true
Logical Operators
• Logical operators are used to determine the logic
between relational expressions
• Given that x=6 and y=3, the table below explains the
logical operators
Operator Description Example

&& and (x < 10 && y > 1) is
true
|| or (x==5 || y==5) is
false
! not !(x==y) is true

Conditional Statements
• In JavaScript we have the following
conditional statements:
– if statement
– if...else statement
– nested ifs
– switch statement

If Statement
• if statement executes some code only if a
specified condition is true.
• Syntax
if (condition)
{
// code to be executed if condition is true
}
• When JavaScript encounters an if statement, it
checks the condition.
• If and only if, the condition is found to be true, the
statements enclosed within the curly braces are
executed.
Example – if
<html>
<head><title>JavaScript</title</head>
<body>
<script language="javascript"
type="text/javascript">

</script>
</body>
</html>
if-else Statement
• Each condition has two paths from which we choose
one. For example, "If it's raining, I'll stay at home else
I'll go out for a stroll.“
• Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is false
}
Example – if-else
<html>
<head> <title>JavaScript</title> </head>
<body>
<script language="javascript" type="text/javascript">

</script> </body> </html>
switch
• Using the switch statement, we can select
one of many blocks of code to be executed.
• Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is other than case 1
and 2
}
Example - switch
<html>
case 2:
<head>
document.write("Two");
<title>JavaScript</title>
</head> break;
<body> case 3:
<script language="javascript" document.write("Three");
type="text/javascript"> break;

case 1: </script>
document.write("One"); </body>
break;
Output of switch Example

Important Points
• JavaScript is Case Sensitive
• A JavaScript statement is a command to the
browser
• Though it is not necessary to end JavaScript
statements with a semi-colon, it is always a
good practice to do so
• JavaScript ignores extra spaces. You can add
white spaces to your script to make it more
readable. The following lines are equivalent:
name="Regan";
name = "Regan";

Important Points...
• Text to be output can be enclosed in single quotes(') or
double quotes("). However, if the text contains double
quotes that have to be displayed, then use single
quotes to surround the text
document.write('<h1>Javascript is "NOT" Java</h1>');
• A similar case is when HTML attribute values have

been enclosed within double quotes
document.write('<font size="+4" color="#0000ff"> Blue denim</font>');

Important Points...
• Break up a Code Line
– You can break up a code line within a text
string with a backslash. The example
below will be displayed properly:
document.write("Hello \
World!");
• However, you cannot break up a code line
like this:
document.write \
("Hello World!");

Summary
You have learned about
• Variables
• Operators
• Comments
• Selection structures

Javascript Core: © 2009, DCST

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Core: © 2009, DCST

Uploaded by

Copyright:

Available Formats

PGDCET/NWT Department of Computer Science & Technology

© 2009, DCST Javascript Core 10.2

© 2009, DCST Javascript Core 10.3

// Now is a paragraph (single-line comment)

© 2009, DCST Javascript Core 10.4

• You can declare JavaScript variables with the var

© 2009, DCST Javascript Core 10.6

JavaScript Arithmetic Operators

JavaScript Assignment Operators

Operator Example Same As Result

© 2009, DCST Javascript Core 10.8

Operator Description Example

Operator Description Example

© 2009, DCST Javascript Core 10.13

© 2009, DCST Javascript Core 10.14

Output of switch Example

© 2009, DCST Javascript Core 10.21

© 2009, DCST Javascript Core 10.22

• A similar case is when HTML attribute values have

© 2009, DCST Javascript Core 10.23

© 2009, DCST Javascript Core 10.24

© 2009, DCST Javascript Core 10.25

You might also like