Scribd
Upload
14 views

Javascript Output and Statement

Uploaded by

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

Javascript Output and Statement

Uploaded by

mrloquinario
Copyright
© © All Rights Reserved
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