Latest web development tutorials
×

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript output

JavaScript does not have any print or output functions.

JavaScript displays data

JavaScript can output data in different ways:

  • Use window.alert () pop-up warning box.
  • Using document.write () method to write the contents of an HTML document.
  • Using innerHTML to write HTML elements.
  • Use console.log () is written to the browser console.

Use window.alert ()

You can pop up a warning box to display the data:

Examples

<! DOCTYPE html>
<Html>
<Body>

<H1> My first page </ h1>
<P> My first paragraph. </ P>

<Script>
window.alert (5 + 6);
</ Script>

</ Body>
</ Html>

try it"

Manipulate HTML elements

To access an HTML element from JavaScript, you can usedocument.getElementById(id) method.

Please use the "id" attribute to identify HTML elements, and innerHTML to get the contents or insert elements:

Examples

<! DOCTYPE html>
<Html>
<Body>

<H1> My first Web page </ h1>

<P id = "demo"> My first paragraph </ p>

<Script>
document.getElementById ( "demo") innerHTML = "paragraph has been modified..";
</ Script>

</ Body>
</ Html>

try it"

More JavaScript statements (in the <script> tag) may be performed in a web browser:

document.getElementById ( "demo") is to use the id attribute to find HTML elements JavaScript code.

innerHTML = "paragraph has been modified." is used to modify the HTML content element (innerHTML) JavaScript code.


In this tutorial

In most cases, in this tutorial, we will use the methods described above to output:

The following example directly to the id = "demo" of the <p> element is written to the output HTML document:


Writes HTML document

For testing purposes, you can directly write JavaScript in the HTML document:

Examples

<! DOCTYPE html>
<Html>
<Body>

<H1> My first Web page </ h1>

<P> My first paragraph. </ P>

<Script>
document.write (Date ());
</ Script>

</ Body>
</ Html>

try it"

Note

Please use the document.write () simply writing content to a document output.

If you do document.write after the document has finished loading, the entire HTML page will be overwritten.


Examples

<! DOCTYPE html>
<Html>
<Body>

<H1> My first Web page </ h1>

<P> My first paragraph. </ P>

<Button onclick = "myFunction () "> point I </ button>

<Script>
function myFunction () {
document.write (Date ());
}
</ Script>

</ Body>
</ Html>

try it"


Written to the console

If your browser supports debugging, you can use console.log () method to display the value of JavaScript in your browser.

Browser use F12 to enable debug mode, the debug window, click on the "Console" menu.

Examples

<! DOCTYPE html>
<Html>
<Body>

<H1> My first Web page </ h1>

<Script>
a = 5;
b = 6;
c = a + b;
console.log (c);
</ Script>

</ Body>
</ Html>

try it"

Examples console Screenshot:


Did you know?

Note Debugging is testing a program to find and reduce the bug (error) process.