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>

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>

function changeImage() {

var image = document.getElementById('myImage');

if (image.src.match("bulbon")) {

image.src = "pic_bulboff.gif";

} else {

image.src = "pic_bulbon.gif";

}

</script>

<p>Click the light bulb to turn on/off the light</p>

</body>

</html>

o/p

http://www.w3schools.com/js/pic_bulboff.gif

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>

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>

<button type="button" onclick="myFunction()">Submit</button>

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>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

}

</script>

</head>

<body>

<p id="demo">A Paragraph.</p>

</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>

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>

<p id="demo">A Paragraph.</p>

<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>

</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>

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>

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

………………………..

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>

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>

out put
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":

<!DOCTYPE html>
<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:

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";

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;

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

Assign 5 to y, and display the result of y + 2:

Computer | PHP |NET JAVA|c/C++ |Wordpres |9889332475 | Website & Softawre work 7905079440

Thursday 21 August 2014

JavaScript Tutorial 2014

JavaScript Can Change HTML Elements

JavaScript Can Change HTML Attributes

JavaScript Can Change HTML Styles (CSS)

JavaScript Can Validate Data

JavaScript Where To

JavaScript in <head>

JavaScript in <body>

External JavaScripts

Writing to The HTML Document

JavaScript Variables

JavaScript Data Types

Declaring (Creating) JavaScript Variables

One Statement, Many Variables

Value = undefined

Re-Declaring JavaScript Variables

JavaScript Arithmetic

No comments:

Post a Comment

Featured post

Life Infotech now a leading brand in the field of technology training

Pages

Search This Blog