JavaScript Tutorial
JavaScript
is the most popular programming language in the world.
It is
the language for HTML, for the Web, for computers, servers, laptops, tablets,
smart phones, and more.
JavaScript
Can Change HTML Elements
JavaScript can manipulate the
DOM (change HTML contents).
The following example changes
the content (innerHTML) of an HTML element identified with
id="demo":
Exp :
<!DOCTYPE
html>
<html>
<body>
<h1>My
First JavaScript</h1>
<p>JavaScript
can change the content of an HTML element:</p>
<button
type="button" onclick="myFunction()">Click
Me!</button>
<p
id="demo">This is a demonstration.</p>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
}
</script>
</body>
</html>
O/p
My First JavaScript
JavaScript can change the
content of an HTML element:
Click Me!
This is a demonstration
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
The method document.getElementById() is one
of many methods in the HTML DOM.
You can use JavaScript to:
- Change
HTML elements
- Delete
HTML elements
- Create
new HTML elements
- Copy
and clone HTML elements
- And
much more ...
JavaScript
Can Change HTML Attributes
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
var image =
document.getElementById('myImage');
if
(image.src.match("bulbon")) {
image.src =
"pic_bulboff.gif";
} else {
image.src =
"pic_bulbon.gif";
}
}
</script>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100"
height="180">
<p>Click the light bulb to turn on/off the light</p>
</body>
</html>
o/p
Click the light bulb to
turn on/off the light
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JavaScript
Can Change HTML Styles (CSS)
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<script>
function myFunction() {
var x =
document.getElementById("demo");
x.style.fontSize =
"25px";
x.style.color =
"red";
}
</script>
<button type="button"
onclick="myFunction()">Click Me!</button>
</body>
</html>
Out put
My First JavaScript
JavaScript can change
the style of an HTML element.
Click Me!
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JavaScript
Can Validate Data
JavaScript is often used to
validate input:
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="text">
<button type="button"
onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
//Get the value of input field
with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less
than one or greater than 10
if (isNaN(x) || x < 1 || x
> 10) {
text = "Input not
valid";
} else {
text = "Input
OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Out put
Please input a number
between 1 and 10:
Submit
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JavaScript Where To
JavaScript
in <head>
In
this example, a JavaScript function is placed in the <head> section of an
HTML page.
The
function is invoked (called) when a button is clicked:
<!DOCTYPE
html>
<html>
<head>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<h1>My
Web Page</h1>
<p
id="demo">A Paragraph.</p>
<button
type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
Out put
My Web Page
A Paragraph.//////////////// Paragraph changed.
Try it///////////////////
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JavaScript
in <body>
In
this example, a JavaScript function is placed in the <body> section of an
HTML page.
The
function is invoked (called) when a button is clicked:
<!DOCTYPE
html>
<html>
<body>
<h1>My
First Web Page</h1>
<p
id="demo">A Paragraph.</p>
<button
type="button" onclick="myFunction()">Try
it</button>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</body>
</html>
Out put
My First Web Page
A Paragraph.
Try it
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
External
JavaScripts
Scripts
can also be placed in external files.
External
scripts are practical when the same code is used in many different web pages.
JavaScript
files have the file extension .js.
To
use an external script, put the name of the script file in the source (src)
attribute of the <script> tag:
<!DOCTYPE
html>
<html>
<body>
<h1>My
Web Page</h1>
<p
id="demo">A Paragraph.</p>
<button
type="button" onclick="myFunction()">Try
it</button>
<p><strong>Note:</strong>
myFunction is stored in an external file called
"myScript.js".</p>
<script
src="myScript.js"></script>
</body>
</html>
My Web Page
A Paragraph.
Try it
Note: myFunction is stored in
an external file called "myScript.js"
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Writing to
The HTML Document
<!DOCTYPE
html>
<html>
<body>
<h1>My
First Web Page</h1>
<p>My
first paragraph.</p>
<script>
document.write(Date());
</script>
</body>
</html>
Out put
My First Web Page
My first paragraph.
Thu
Aug 21 2014 09:57:44 GMT+0530 (India Standard Time)
JavaScript Variables
JavaScript variables are
"containers" for storing information:
<!DOCTYPE html>
<html>
<body>
<p
id="demo"></p>
<script>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML
= x + y;
//document.getElementById("demo").innerHTML
= x;
//document.getElementById("demo").innerHTML
= y;
</script>
<p>Try
to experiment with the // comments.</p>
</body>
</html>
OUTPUT
………………………..
11
Try to experiment
with the // comments.
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JavaScript Variables
As with algebra, JavaScript variables can be used to hold values (x = 5) or expressions (z = x + y).
Variable can have short names (like x and y) or more descriptive names (age, sum, totalVolume).
Variable names can contain letters, digits, underscores, and dollar signs.
- Variable names must begin with a letter
- Variable names can also begin with $ and _ (but we will not use it)
- Variable names are case sensitive (y and Y are different variables)
- Reserved words (like JavaScript keywords) cannot be used as variable names
JavaScript Data Types
JavaScript variables can hold many types of data, like text values (person = "John Doe").
In JavaScript texts are called strings or text strings.
There are many types of JavaScript variables, but for now, just think of numbers and strings.
When you assign a string value to a variable, you put double or single quotes around the value.
When you assign a numeric value to a variable, you do not put quotes around the value.
If you put quotes around a numeric value, it will be treated as a text string.
<!DOCTYPE html>
<html>
<body>
<p>Create variables of different types:</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
//document.getElementById("demo").innerHTML = pi;
document.getElementById("demo").innerHTML = person;
//document.getElementById("demo").innerHTML = answer;
</script>
<p>Try to experiment with the // comments.</p>
</body>
</html>
Create variables of different types:
John Doe
Try to experiment with the // comments.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Declaring (Creating) JavaScript Variables
Creating a variable in JavaScript is called "declaring" a variable.
You declare JavaScript variables with the var keyword:
var carName;
After the declaration, the variable is empty (it has no value).
To assign a value to the variable, use the equal sign:
carName = "Volvo";
You can also assign a value to the variable when you declare it:
var carName = "Volvo";
In the example below, we create a variable called carName and assign the value "Volvo" to it.
Then we "output" the value inside an HTML paragraph with id="demo":
<html>
<body>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
out put
Create a variable, assign a value to it, and display it:
<html>
<body>
<p>Assign 5 to y, and display the result of y + 2:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = 5;
document.getElementById("demo").innerHTML = y + 2;
}
</script>
</body>
</html>
Assign 5 to y, and display the result of y + 2:
Create a variable, assign a value to it, and display it:
Volvo
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
One Statement, Many Variables
You can declare many variables in one statement.
Start the statement with var and separate the variables by comma:
var lastName = "Doe", age = 30, job = "carpenter";
Your declaration can also span multiple lines:
var lastName = "Doe",
age = 30,
job = "carpenter";
age = 30,
job = "carpenter";
In JavaScript you can always separate statements by semicolon, but then you cannot omit the var keyword.
Wrong:
var lastName = "Doe"; age = 30; job = "carpenter";
Right;
var lastName = "Doe"; var age = 30; var job = "carpenter";
Value = undefined
In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. Variable declared without a value will have the value undefined.
The variable carName will have the value undefined after the execution of the following statement:
var carName;
Re-Declaring JavaScript Variables
If you re-declare a JavaScript variable, it will not lose its value:.
The value of the variable carName will still have the value "Volvo" after the execution of the
following two statements:
var carName = "Volvo";
var carName;
var carName;
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
<!DOCTYPE html><html>
<body>
<p>Assign 5 to y, and display the result of y + 2:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = 5;
document.getElementById("demo").innerHTML = y + 2;
}
</script>
</body>
</html>
OUT PUT
What
is Domain