Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Java Script Introduction

The document discusses how JavaScript can be used to change HTML content, attributes, styles, hide and show elements, and where JavaScript code can be placed in an HTML document including using external JavaScript files. It provides examples of using JavaScript to modify the DOM and control HTML elements.

Uploaded by

kulwantchahar123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Java Script Introduction

The document discusses how JavaScript can be used to change HTML content, attributes, styles, hide and show elements, and where JavaScript code can be placed in an HTML document including using external JavaScript files. It provides examples of using JavaScript to modify the DOM and control HTML elements.

Uploaded by

kulwantchahar123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

JavaScript Can Change HTML Content


One of many JavaScript HTML methods is getElementById().

This example uses the method to "find" an HTML element (with id="demo") and
changes the element content (innerHTML) to "Hello JavaScript":

Program Example :

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello


JavaScript!"'>Click Me!</button>

</body>

</html>

Output :

What Can JavaScript Do?


JavaScript can change HTML content ---------------Change to-------Hello JavaScript!

Click Me!
JavaScript Can Change HTML Attribute Values
In this example JavaScript changes the value of the src (source) attribute of an
<img> tag:

Program Example :

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the


light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the


light</button>

</body>

</html>

Output:

What Can JavaScript Do?


JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.

Turn on the light Turn off the light


JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML
attribute:

Example
document.getElementById("demo").style.fontSize = "35px";
or
document.getElementById('demo').style.fontSize = '35px';

JavaScript Can Hide HTML Elements


Hiding HTML elements can be done by changing the display style:

Example
document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none';

JavaScript Can Show HTML Elements


Showing hidden HTML elements can also be done by changing the display style:

Example
document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display = 'block';
JavaScript Where To
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script>
tags.

Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript Functions and Events


A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.

For example, a function can be called when an event occurs, like when the user
clicks a button.

JavaScript in <head> or <body>


You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML


page, or in both.

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:


Example
<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>A Web Page</h1>


<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

External JavaScript
Scripts can also be placed in external files:

External file: myScript.js


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External JavaScript Advantages


Placing scripts in external files has some advantages:

 It separates HTML and code


 It makes HTML and JavaScript easier to read and maintain
 Cached JavaScript files can speed up page loads

To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

You might also like