Scribd
Upload
22 views

Javascript Output and Statement

Uploaded by

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

Javascript Output and Statement

Uploaded by

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

Javascript Output and

Statement
Computer Literacy 7
Javascript Output
Javascript Output
● Refers to the information, results, or content that a Javascript program displays for
users
● Javascript Output Display Properties
○ There are four output display properties for displaying output in Javascript.
■ innerHTML
■ console.log() method
■ document.write() method
■ window.alert() method
innerHTML
● display the HTML output on an <!DOCTYPE html>
element. <html>
<head>
● JavaScript can be used to select an <title>Javascript Output</title>
element using the </head>
document.getElementById(id) method, <body>
and then use the innerHTML property <p id="test"></p>
<script>
to display the output on the specified
element (selected element). document.getElementById("test").in
nerHTML = "Hello World!";
</script>
</body>
</html>
innerHTML
OUTPUT: <!DOCTYPE html>
<html>
<head>
<title>Javascript Output</title>
</head>
<body>
<p id="test"></p>
<script>

document.getElementById("test").in
nerHTML = "Hello World!";
</script>
</body>
</html>
console.log() method
● display the content on the browser <!DOCTYPE html>
<html>
console. <head>
● It is used for logging messages to the <title>Javascript Output</title>
console. </head>
<body>
● It is a debugging tool available in most <h1>Test</h1>
web browsers.
● It is used during development to output <script>
console.log("Hello World!");
information about the state of the </script>
program. </body>
</html>
console.log() method
OUTPUT: <!DOCTYPE html>
<html>
● Right-click Inspect Element then click <head>
Console <title>Javascript Output</title>
</head>
<body>
<h1>Test</h1>

<script>
console.log("Hello World!");
</script>
</body>
</html>
document.write() method
● displays the content on an HTML <!DOCTYPE html>
<html>
element. <head>
● This method is often used for directly <title>Javascript Output</title>
adding content to the HTML document </head>
<body>
while it is being parsed. <h1>Test</h1>
<script>
document.write("Hello World!");
</script>
</body>
</html>
document.write() method
OUTPUT <!DOCTYPE html>
<html>
<head>
<title>Javascript Output</title>
</head>
<body>
<h1>Test</h1>
<script>
document.write("Hello World!");
</script>
</body>
</html>
window.alert() method
● displays the HTML element to the <!DOCTYPE html>
<html>
output. <head>
● It is used to display an alert box with a <title>Javascript Output</title>
specified outut (or message) and an OK </head>
<body>
button. <h1>Test</h1>
● We can skip the window keyword in this <script>
method.. window.alert("Hello");
</script>
</body>
</html>
window.alert() method
OUTPUT: <!DOCTYPE html>
<html>
<head>
<title>Javascript Output</title>
</head>
<body>
<h1>Test</h1>
<script>
window.alert("Hello");
</script>
</body>
</html>
window.print() method
● The window.print() method is used to open the browserʼs print dialog, allowing the user to
print the current page. JavaScript does not contain any default print object or methods.

<button onclick="window.print()">Print this page</button>


Javascript Statement
Computer Program
● is a list of instructions to be executed by the computer.

Statements
● Are programming instructions in programming language
Javascript Statements
● Statements are made of: Values, Operators, Keywords, Expressions and
Comments.
● Are executed in the same order as they are written, line by line.
let a, b, c;
a = 2;
b = 3;
c = a + b;
console.log("The value of c is " + c + ".");
Semicolons
● Semicolons separate Javascript statements.
● It marks the end of a statement in Javascript
let a, b, c;
a = 2;
b = 3;
c = a + b;
● When separated by semicolons, multiple statements on one line are allowed:

a = 2; b = 3; c = a + b;
Code Blocks
● are JavaScript statements that are grouped together inside curly brackets.
● The purpose of grouping is to define statements to be executed together.

function myFunction() {
console.log("Hello");
console.log("How are you?");
}
myFunction();
White Space
● Javascript ignores white space. You can add white space to make it more readable.

let person = "Hege";


let person="Hege";

console.log(10*2);
console.log(10 * 2);
Line Length and Line Breaks
● JavaScript codeʼs preferred line length by most programmers is up to 80
characters.
● The best place to break a code line in JavaScript, if it doesnʼt fit, is after an
operator.

document.getElementById("hello").innerHTML = "Hello World!";


Keywords
● are reserved words and cannot be used as a variable name.
● it tells about what kind of operation it will perform.

You might also like