JavaScript Tutorial

JavaScript is the programming language of the Web. It can update and change both HTML and CSS.

JavaScript Introduction

JavaScript can change HTML content, HTML attributes, and CSS styles. It can also hide and show HTML elements.

Example

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
  Click me to display Date and Time.
</button>

<p id="demo"></p>

JavaScript Output

JavaScript can display data in different ways: writing into an HTML element, writing into the console, or using an alert box.

Example

document.getElementById("demo").innerHTML = 5 + 6;
console.log(5 + 6);
window.alert(5 + 6);

JavaScript Variables

Variables are containers for storing data values. Use let, const, or var.

Example

let x = 5;
let y = 6;
let z = x + y;

JavaScript Functions

A function is a block of code designed to perform a particular task. It is executed when something invokes it.

Example

function myFunction(p1, p2) {
  return p1 * p2;
}

Example

function zmenObrazek(urlObrazku) {
   document.getElementById("myDIV").style.backgroundImage = "url('"+urlObrazku+"')"
}

JavaScript Events

HTML events can trigger JavaScript. A common event is onclick.

Example

<button onclick="this.innerHTML = Date()">The time is?</button>

The HTML DOM

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

Example

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

JavaScript HTML DOM Style

The HTML DOM allows JavaScript to change the style of HTML elements.

Changing style.backgroundImage is a common way to swap a gallery photo without replacing the element.

Example

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

Example

document.getElementById("myDIV").style.backgroundImage = "url('"+urlObrazku+"')"

JavaScript Dates

The Date object is used to work with dates and times.

Example

const d = new Date();
document.getElementById("demo").innerHTML = d;