Basics of Javascript

What is JavaScript?
JavaScript is a premier client-side scripting language produced by Netscape for use
within HTML Web pages. JavaScript is loosely based on Java and it is built into all the
major modern browsers. It„s widely used in tasks ranging from the validation of form
data to the creation of complex user interfaces. JavaScript can be used to manipulate
the very markup in the documents in which it is contained.
JavaScript is:
JavaScript is a lightweight, interpreted programming language
Designed for creating network-centric applications
Complementary to and integrated with Java
Complementary to and integrated with HTML
Open and cross-platform

JavaScript Syntax
• A JavaScript consists of JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
•We can place the <script> tag containing our JavaScript anywhere within our web page
but it is preferred way to keep it within the <head> tags.
•The <script> tag alert the browser program to begin interpreting all the text between
these tags as a script. So simple syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>

The script tag takes two important attributes:
language: This attribute specifies what scripting language we are using. Typically,
its value will be javascript. Although recent versions of HTML (and XHTML, its
successor) have phased out the use of this attribute.
type: This attribute is what is now recommended to indicate the scripting language
in use and its value should be set to "text/javascript".
So our JavaScript segment will look like:
<script language="javascript" type="text/javascript">
JavaScript code
</script>

Our First JavaScript Script:
To print “Hello World”.
<html>
<body>
<script language="javascript" type="text/javascript">
document.write("Hello World!") ;
</script>
</body>
</html>
Above code will display following result:
Hello World!
•“Document.write” inserts the text into the page at current location.
•Every statement in javascript should end with semicolon.

Whitespace and Line Breaks:
•JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
•Because we can use spaces, tabs, and newlines freely in our program so we are free to
format and indent our programs in a neat and consistent way that makes the code easy to
read and understand.
Case Sensitivity:
•JavaScript is a case-sensitive language. This means that language keywords, variables,
function names, and any other identifiers must always be typed with a consistent
capitalization of letters.
•So identifiers Time, TIme and TIME will have different meanings in JavaScript.
•Care should be taken while writing variable and function names in JavaScript.

The <noscript> Element
In the situation that a browser does not support JavaScript or that JavaScript is turned
off, we should provide an alternative version or at least a warning message telling the
user what happened. The <noscript> element can be used to accomplish this very easily.
All JavaScript aware browsers should ignore the contents of <noscript> unless scripting
is off. Browsers that aren„t JavaScript-aware will show the enclosed message (and
they„ll ignore the contents of the <script> if we have remembered to HTML-comment it
out).
One interesting use of the <noscript> element might be to redirect users automatically
to a special error page using a <meta> refresh if they do not have scripting enabled in
the browser or are using a very old browser. The following example shows how this
might be done.
<noscript>
<meta http-equiv="Refresh" content="0;URL=/errors/noscript.html”/>
</noscript>

The following example illustrates a simple example of this versatile element„s use.
<html >
<head>
<title>noscript Demo</title>
</head>
<body>
<script type="text/javascript">

</script>
<noscript>
<em>Either your browser does not support JavaScript or it
is currently disabled.</em>
</noscript>
</body>
</html>

JavaScript Placement in HTML File:
There is a flexibility given to include JavaScript code anywhere in an HTML
document. But there are following most preferred ways to include JavaScript in our
HTML file.
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in and external file and then include in <head>...</head> section.

Variables
Like many other programming languages(java,c,c++), JavaScript has variables. A
variable stores data. Every variable has a name, called its identifier. Variables are
declared in JavaScript using var, a keyword that allocates storage space for new data
and indicates to the interpreter that a new identifier is in use. So,variables can be
thought of as named containers. We can place data into these containers and then refer
to the data simply by naming the container.
Before we use a variable in a JavaScript program, we must declare it. Variables are
declared with the var keyword as follows:
<script type="text/javascript">
var rollno;
var name;
</script>
Variables can be assigned initial values when they are declared:
var name= “Muskan”;
In addition, multiple variables can be declared with one var statement if the variables
are separated by commas:
var x, y = 2, z;

JavaScript Variable Scope:
The scope of a variable is the region of our program in which it is defined. JavaScript
variable will have only two scopes.
•Global Variables: A global variable has global scope which means it is defined
everywhere in our 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 function.

JavaScript Variable Names:
While naming variables in JavaScript ,we should keep following rules in mind:
 We should not use any of the JavaScript reserved keyword as variable name. For
example, break or boolean variable names are not valid.
 JavaScript variable names should not start with a numeral (0-9). They must begin
with a letter or the underscore character. For example, 123test is an invalid variable
name but _123test is a valid one.
JavaScript variable names are case sensitive. For example, Name and name are two
different variables.

JavaScript Reserved Words:
The following are reserved words in JavaScript. They cannot be used as JavaScript
variables, functions, methods, loop labels, or any object names.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
For
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
Private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
Void
volatile
while
with

JavaScript DataTypes:
Every variable has a data type that indicates what kind of data the variable holds. The
basic data types in JavaScript are strings, numbers, and Booleans. A string is a list of
characters, and a string literal is indicated by enclosing the characters in single or double
quotes. Strings may contain a single character or multiple characters, including
whitespace and special characters such as n (the newline). Numbers are integers or
floating-point numerical values, and numeric literals are specified in the natural way.
Booleans take on one of two values: true or false. Boolean literals are indicated by using
true or false directly in the source code.
An example of all three data types follows:
var stringData = "JavaScript has stringsn It sure does";
var numericData = 3.14;
var booleanData = true;
JavaScript also supports two other basic types: undefined and null.

What is Operator?
Operator is word and symbol in expressions that perform operations on one or two values
to arrive at another value. Any value on which an operator performs some actions is
called an operand. An expression may contain one operand and one operator (called a
unary operator) or two operands separated by one operator (called a binary operator).
JavaScript supports a variety of operators.
The types of operators are:
1. Arithmetic Operators
2. Comparison Operators
3. Logical Operators
4. Bitwise Operators
5. Assignment Operators
6. Miscellaneous Operator
a. Conditional Operator (? :)
b. typeof Operator

The Arithmetic Operators
Following are the arithmetic operators supported by javascript language.
Assume variable A holds 10 and variable B holds 20 then:
Operator Description Example
+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denominator B / A will give 2
% Modulus Operator and remainder of after an
integer division B % A will give 0
++ Increment operator, increases integer value
by one A++ will give 11
-- Decrement operator, decreases integer value
by one A-- will give 9

The Comparison Operators
Following are the comparison operators supported by JavaScript language.
== Checks if the value of two operands are
equal or not, if yes then condition becomes true. (A == B) is not true.
!= Checks if the value of two operands are equal or not,
if values are not equal then condition becomes true. (A != B) is true.
> Checks if the value of left operand is greater than the
Value of right operand, if yes then condition becomes true.
(A > B) is not true.
< Checks if the value of left operand is less than the value of
right operand, if yes then condition becomes true. (A < B) is true.
>= Checks if the value of left operand is greater than or equal
to the value of right operand, if yes then condition becomes true.
(A >= B) is not true.
<= Checks if the value of left operand is less than or equal to the value of right
operand, if yes then condition becomes true.
(A <= B) is true.

The Logical Operators
Following are the logical operators supported by JavaScript language .
&& Called Logical AND operator. If both the operands are
non zero then then condition becomes true. (A && B) is true.
|| Called Logical OR Operator. If any of the two operands
are non zero then then condition becomes true. (A || B) is true.
! Called Logical NOT Operator. Use to reverses the
logical state of its operand. If a condition is true then
Logical NOT operator will make false. !(A && B) is false.

The Bitwise Operators
Following are the bitwise operators supported by JavaScript language.
& Called Bitwise AND operator. It performs a Boolean
AND operation on each bit of its integer arguments. (A & B) is 2 .
| Called Bitwise OR Operator. It performs a Boolean
OR operation on each bit of its integer arguments. (A | B) is 3.
^ Called Bitwise XOR Operator. It performs a Boolean
exclusive OR operation on each bit of its integer
arguments. Exclusive OR means that either operand
one is true or operand two is true, but not both. (A ^ B) is 1.
~ Called Bitwise NOT Operator. It is a is a unary operator
and operates by reversing all bits in the operand. (~B) is -4 .

<< Called Bitwise Shift Left Operator. It moves all bits in
its first operand to the left by the number of places
specified in the second operand. New bits are filled with
zeros. Shifting a value left by one position is equivalent to
multiplying by 2, shifting two positions is equivalent to
multiplying by 4, etc. (A << 1) is 4.
>> Called Bitwise Shift Right with Sign Operator. It moves all
bits in its first operand to the right by the number of places
specified in the second operand. The bits filled in on the left
depend on the sign bit of the original operand, in order to
preserve the sign of the result. If the first operand is positive,
the result has zeros placed in the high bits; if the first operand
is negative, the result has ones placed in the high bits. Shifting a
value right one place is equivalent to dividing by 2 (discarding the
remainder), shifting right two places is equivalent to integer division
by 4, and so on. (A >> 1) is 1.
>>> Called Bitwise Shift Right with Zero Operator. This operator is just
like the >> operator, except that the bits shifted in on the left are
always zero, ( A >>> 1) is 1.

The Assignment Operators
Following are the assignment operators supported by JavaScript language:
= Simple assignment operator, Assigns
values from right side operands to left
side operand
C = A + B will assign value of
A + B into C
+= Add AND assignment operator, It adds right
operand to the left operand and assign the
result to left operand C += A is equivalent to C = C + A
-= Subtract AND assignment operator, It subtracts
right operand from the left operand and assign
the result to left operand C -= A is equivalent to C = C - A
*= Multiply AND assignment operator, It multiplies
right operand with the left operand and assign
the result to left operand
C *= A is equivalent to C = C * A

/= Divide AND assignment operator, It divides left
operand with the right operand and assign the
result to left operand C /= A is equivalent to C = C / A
%= Modulus AND assignment operator, It takes
modulus using two operands and assign the
result to left operand C %= A is equivalent to C = C % A

Miscellaneous Operator
The Conditional Operator (? :)
There is an operator called conditional operator. This first evaluates an expression
for a true or false value and then execute one of the two given statements
depending upon the result of the evaluation. The conditional operator has this
syntax:
? : Conditional Expression If Condition is true ? Then value X :
Otherwise value Y
The typeof Operator
The typeof is a unary operator that is placed before its single operand, which can be
of any type. Its value is a string indicating the datatype of the operand.
The typeof operator evaluates to "number", "string", or "boolean" if its operand is a
number, string, or boolean value and returns true or false based on the evaluation.
a = 3;
alert(typeof a); // displays number

JavaScript Statements
Every line of code that occurs between a <script>………</script> tag pair is a
JavaScript statement. Every statement of JavaScript should end with semicolon. The
carriage return(semicolon)denotes the end of the statement.
The statements must be in the script to for a purpose. Therefore, every statement does
“something” relevant to the script. The kinds of things that statements do are:
•Define or initialize a variable
•Assign a value to a property or variable
•Change the value of a property or variable
•Invoke an object's method
•Invoke a function routine
•Make a decision
The only statement that doesn‟t perform any explicit action is the comment.

Comments in JavaScript
JavaScript supports both C-style and C++ style comments, Thus:
Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.
JavaScript also recognizes the HTML comment opening sequence  is not recognized by JavaScript so it
should be written as //-->.

Basics of Javascript

Recommended

More Related Content

What's hot (20)

Similar to Basics of Javascript (20)

Recently uploaded (20)

Basics of Javascript