JavaScript Overview:
JavaScript is a scripting language for web browsers. It was developed at Netscape Communication Corporation and was originally named “LiveScript”. It was later changed to “JavaScript” after an agreement with Sun Microsystems, the developers of Java.JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript is a
scripting language that can be used to create web pages that are highly
interactive. Java and JavaScript are not the same. Java and JavaScript are two
completely different languages in both concept and design! JavaScript
however has the same syntax as Java, a very popular programming language for
the Internet.
JavaScript
is interpreted by the client program, the browser.
JavaScript code is placed within an HTML document. When the page that contains
the script is loaded, the web browser’s built-in interpreter takes the code and
executes the instructions.
JavaScript has built in objects such as Navigator, Window, Date. Through these objects JavaScript can access many of the browser elements like windows, links, images etc.
JavaScript is a case-sensitive, object-oriented scripting language which can be used for the following:
- User interaction with form elements (input fields, text area, buttons, radio buttons, check boxes, and selection lists)
- Access java Applet methods
- Validate form-processing the data on the client side before submission to the server.
- Animation and live image swapping.
What is JavaScript?
- JavaScript was designed to add interactivity to HTML pages
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
- Everyone can use JavaScript without purchasing a license
What can a JavaScript do?
JavaScript gives HTML designers a programming tool: JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages.
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>” + name + “</h1>”) can write a variable text into an HTML page.
JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.
JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element.
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser.
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer.
Basic way to run a JavaScript Program:
JavaScript
can be implemented using JavaScript statements that are placed in an HTML file, between <script>
</script>tags.
You can place the <script> tags, containing your JavaScript anywhere within the 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 …>
</script>
The script tag takes two important attributes:
Language:
This attribute specifies what scripting language you 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 your JavaScript Syntax will look as follows:
<script language="javascript" type="text/javascript">
</script>
Example:
<html>
<head>
<script
type="text/javascript">
document.write ("<font
color='red'>Welcome to JavaScript World</font>")
</script>
</head>
</html>
Output:
Welcome to JavaScript World
Comments in JavaScript:
These are commands that comment out text in the script. JavaScript supports both C-style and C++ style comments. In JavaScript single line comment as well as multi-line comments can be used. To indicate a comment entry, double slash (//) is used at the beginning of the line. The double slash is called a single line comment. You have to have double slashes at the beginning of each new line. Multiple comment lines are denoted by using /* at the beginning and */ at the end.- JavaScript also recognizes the HTML comment opening sequence <!--JavaScript treats this as a single-line comment, just as it does the // comment.
- The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.
VARIABLES:
JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of value the variable will hold. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.
A variable can have a short name, like x, or a more descriptive name, like rollnumber.
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
Note:
Because JavaScript is
case-sensitive, variable names are case-sensitive.
Declaring
(Creating) JavaScript Variables:
Variables should be declared with the var keyword
var x;var name;
We can assign values to the variables when you declare them. Storing a value in a variable is called variable initialization.
var x=10;
var name="Binoy";
Note: When we assign a text value to a variable, we use quotes around the value.
Example:
<html>
<body>
<script language= "javascript">
var name, roll;
name="Eliza";
roll=1;
document.write("Name: ",name);
document.write("<br />");
document.write("Roll Number: ",roll);
</script>
</body>
</html>
Output:
Name: Eliza
Roll Number: 1
JavaScript
Variable Scope:
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
function.
DATA
TYPES:
One of the most fundamental characteristics of a
programming language is the set of data types it supports. These are the type
of values that can be represented and manipulated in a programming language.
Numbers:
Numbers are values that can be
processed and calculated. You don't enclose them in quotation marks. The
numbers can be either positive or negative
Strings:
Strings are a series of letters and numbers
enclosed in quotation marks. JavaScript uses the string literally; it doesn't
process it. You'll use strings for text you want displayed or values you want
passed along.
Boolean:
Boolean (true/false) lets you evaluate whether
a condition meets or does not meet specified criteria.
Null:
Null
is an empty value. null is not the same as 0. 0 is a real, calculable number, whereas
null is the absence of any value.
|
Data types |
Examples |
|
Number
|
Any
number, such as 100,-99.99, 0.00001 |
|
Strings
|
“welcome”,
“4500” |
|
Boolean
|
Either
true or false |
|
Null
|
A
special keyword with a null value (that is, nothing) |
Looping
Statements:
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.
JavaScript has two looping statements. The for statement and the while statement. In general, we use For loops when we know how many times we want to perform a loop. When we are not sure how many times we want to perform a loop, we use while loops.
For
Loop:
The for loop structure is given below:
for([initial expression]; [condition];[update expression])
{
code to be executed
}
Example:
The
example below defines a loop that starts with i=1. The loop will continue to
run as long as i is less than, or equal to 10. i will increase by 1 each time
the loop runs.
<html>
<body>
<script language="javascript">
var i=1;
for(i=1;i<=10;i++)
{
document.write("The number is " + i);
document.write("<br>");
}
</script>
</body>
</html>
Output:
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
While
Loop:
The while loop is used when you want the loop to execute and continue executing while the specified condition is true.
Here is the standard syntax for a while loop:
while (condition)
{
code to be executed
}
Example: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
<html>
<body>
<script
language="javascript">
var
i=1;
while
(i<=10)
{
document.write("The
number is " + i);
document.write("<br>");
i=i+1;
}
</script>
</body>
</html>
Output:
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
Functions:
You may call a function from anywhere within the
page. A function contains code that will be executed by an event or by a call
to that function. Functions
can be defined both in the <head> and in the <body> section of a
document. Normally function is placed between <HEAD> and </HEAD>
tag.
Coding functions is very useful in developing
easy-to-maintain applications. Like a variable, a function is identified by a
name. A function is coded starting with the keyword function and the set of statements that represent the function are
enclosed within flower brackets or braces.
The
syntax for creating a function is: Functions are declared
using the function keyword
function functionname(var1,var2,...,varn)
{
body of the function
}
var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.
A function with no parameters must include the parentheses () after the function name:
function functionname()
{
body of the function
}
Example:
<html>
<head>
<script language="javascript">
function displaymsg()
{
alert("Hello JavaScript");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click
me!"
onclick="displaymsg()" >
</form>
</body>
</html>
The
return Statement:
The return statement is used to specify the value
that is returned from the function. So, functions that are going to return a
value must use the return statement.
Example:
<html>
<head>
<title> The Return Statement</title>
</head>
<body>
<h3>JavaScript's return statement
</h3>
<script>
function sum(x, y)
{
return x + y;
}
var result = sum(12, 30);
document.write(result);
</script>
</body>
</html>
Arrays:
An array is collection of data elements. It is a way
of organizing data into groups. An array can contain any number of elements,
and each element can be any type of data including another array. The entire
group of elements will have one name and each element in the group can be
referenced through the name and the element number. The element number is the
index or subscript of the element. The starting index is 0.
To
create an array of five elements:
var x=new Array(5)
The array is named x and its elements are:
x[0], x[1], x[2], x[3] and x[4]
Array
can be created without specifying the number of elements and then subsequently
assigning values.
var x=new Array()
x[3]= “HELLO”
An
array can be initialized as it is created.
var x=new Array(“welcome”, “To, “Assam”)
will create an array of 3 elements
Array
Property:
length:
The length property gives the number of elements
in the array.
for(i=0; i<x.length;i++)
document.write(“<br>” + x[i]);
Objects:
JavaScript has built-in objects such as Navigator, Window,
Date. Through these objects JavaScript can access many of the browser elements
like windows, links, images.
Alerts,
Prompts and Confirms:
Alert:
The alert() method pops up a small dialog box with
text written across an OK button.
Prompt:
Prompt
command
is used to give appropriate message
to the user and allow user to input data. You will use prompts only when you
want to allow the user to input any data.
Prompt is a method that pops up a message box providing space for the user to input data. Here’s the format of the prompt command:
var variable_name=prompt(“ Text on the gray box”, “Text in the white box”)
var roll=prompt(“What is your Roll Number?”, “101”)
Confirm:
Confirm
method
is used to ask the confirmation of the user before proceeding. Confirm dialog
box has two buttons okay and cancel. Okay returns true and cancel returns false.
0 Comments
if you have any doubts plz let me know...