Scribd
Upload
17 views22 pages

JAVASCRIPT DISPLAY POSSIBILITIES

Uploaded by

sohamghaware654
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views22 pages

JAVASCRIPT DISPLAY POSSIBILITIES

Uploaded by

sohamghaware654
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

JavaScript Output

• JavaScript Display Possibilities


JavaScript can "display" data in different ways:
1. Writing into an HTML element, using
document.getElementById(id).innerText
document.getElementById(id).innerHTML
document.getElementById(id).textContent
2.Writing into the HTML output
using document.write().
3. Writing into an alert box, using window.alert()
1) Script code  i. body ii. Head
2) Script code  External file  document, alert and
function
3) getElementById DOM
1. Using innerText :
To access an HTML element, JavaScript can use
the document.getElementById(id) method.
The id attribute defines the HTML element.
The InnerText is the variable of the element object and
whatever is provided as a value is written inside that
element. But it should be text only. So it is good if we
want to display data on text elements like, headings or
paragraph.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo">Text only</p>
<script>
document.getElementById("demo").innerText =
“Overwrite”;
</script>
</body>
</html>
OUTPUT:
My First Web Page
My First Paragraph.
Overwrite

This will change the text inside the paragraph. We


first select the paragraph element by its ID, then we
change its text, ie, display output
via innerText variable
innerText returns only the text without any of the
excess spacing or the html tags
2. Using innerHTML :
Just like innerText, innerHTML is a variable of
element object, but unlike innerText which only sets
the innerText, innerHTML changes the HTML.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo">Hello <b> World </b> </p>
<script>
document.getElementById("demo").innerHTML;
</script>
</body>
</html>
OUTPUT:
My First Web Page
My First Paragraph.
hello World
3. Using textContent:

This property is similar to the innerText property, however there


are some differences:
• textContent returns the text content of all (including hidden
text ) elements, while innerText returns the content of all
elements
• innerText will not return the text of elements that are hidden
with CSS but textContent will.
<html>
<body>
<i id="test">Hello
<b style="display:none">hidden bold content</b>
<i>World</i>
</i>
<p id="demo"></p>
<script>
alert(document.getElementById("test").textContent);
alert(document.getElementById("test").innerText);
</script>
</body>
</html>
Practical Question: Write an HTML program with JavaScript
to get the following output
Programming Fundamentals of JavaScript

 Variables,
Operators,
Control Flow Statements,
Popup Boxes
JavaScript Comment
The JavaScript comments are meaningful way to
deliver message. It is used to add information about
the code, warnings or suggestions so that end user
can easily interpret the code.
The JavaScript comment is ignored by the JavaScript
engine i.e. embedded in the browser.
Advantages of JavaScript comments
There are mainly two advantages of JavaScript
comments.
1. To make code easy to understand It can be used to
elaborate the code so that end user can easily
understand the code.
2. To avoid the unnecessary code It can also be used
to avoid the code being executed. Sometimes, we add
the code to perform some action. But after sometime,
there may be need to disable the code. In such case, it
is better to use comments.
Types of JavaScript Comments
There are two types of comments in JavaScript.
1. Single-line Comment
2. Multi-line Comment

1. JavaScript Single line Comment


It is represented by double forward slashes (//).
Everything is ignored after // double forward slashes.
Let’s see the example of single-line comment i.e.
added before the statement.
Syntax : // comment
<html>
<body>
<script>
// It is single line comment
document.write(“Hello JavaScript");
</script>
</body>
</html>

OUTPUT:
Hello JavaScript
2. JavaScript Multi line Comment
It can be used to add single as well as multi line
comments. So, it is more convenient.
It is represented by forward slash with asterisk then
asterisk with forward slash.
Syntax:
/* your code here */
Example:
<html>
<body>
<script>
/* It is multi line comment.
It will not be displayed */
document.write(“Example of javascript
multiline comment");
</script>
</body>
</html>
OUTPUT:
Example of javascript multiline comment
JavaScript variable
A JavaScript variable is simply a name of storage
location.
There are two types of variables in JavaScript :
1. local variable and 2. global variable.
There are some rules while declaring a JavaScript variable
(also known as identifiers).
1. Name must start with a letter (a to z or A to Z),
underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example
value1.
3. JavaScript variables are case sensitive, for example x
and X are different variables.
Variables are used to store values (name = "John") or
expressions (sum = x + y).
Declare Variables in JavaScript
Before using a variable, you first need to declare it. You
have to use the keyword var to declare a variable like
this:
Syntax:
var var_name;
Example:
var name;
Assign a Value to the Variable
We can assign a value to the variable either while
declaring the variable or after declaring the variable.
Syntax:
var var_name = “value”;
Example:
var name = "John";
OR
var name;
name = "John";
1. JavaScript local variable
A JavaScript local variable is declared inside block or function.
It is accessible within the function or block only. For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
OR
<script>
If(10<13){
var y=20;//JavaScript local variable
}
</script>
2. JavaScript global variable
A JavaScript global variable is accessible from any function. A variable
i.e. declared outside the function is known as global variable. For
example:
<html>
<body>
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
a();
</script>
</body>
</html>

OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy