Categories
JavaScript Web development

HTML DOM Style perspective property/ perspectiveOrigin Property

In my previous tutorial, you could learn about the CSS Perspective property and the CSS Perspective-origin property. You can make a step forward and define the 3d shape also using JavaScript by HTML DOM Style perspective property, and perspective-origin property.

HTML DOM Style Perspective property

HTML DOM Style Perspective Property

The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Note: The perspective property only affects 3D transformed elements!

Syntax:

object.style.perspective = "length|none"

Where:

length– how far the element is placed from the view

none- default value. Same as 0. The perspective is not set

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 200px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too. </div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspective = "100px";
}
</script>
</body>
</html>

Output:

HTML DOM Style PerspectiveOrigin Property

The perspectiveOrigin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspectiveOrigin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Syntax:

object.style.perspectiveOrigin = "x-axis y-axis|initial|inherit"

Where:

x-axis– defining where the view is placed at the x-axis (left, center, right, lenght, %). Default value: 50%.

y-axis– defining where the view is placed at the y-axis (top, center, bottom, lenght, %). Default value: 50%.

initial- sets this property to its default value.

inherit- inherits this property from its parent element.

Example:

!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 125px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid green;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too.</div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspectiveOrigin = "10px 50%";
}
</script>
</body>
</html>

Output:

To see more examples of the perspective-property and 3d cube click here, here and here.

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/Events

HTML DOM allows JavaScript to react to HTML events.

JavaScript HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Examples of HTML events:

  1. When a user clicks the mouse
  2. When a web page has loaded
  3. When an image has been loaded
  4. When the mouse moves over an element
  5. When an input field is changed
  6. When an HTML form is submitted
  7. When a user strokes a key

In this example, the content of the <h1> element is changed when a user clicks on it:

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>

Output:

HTML Event Attributes

To assign events to HTML elements you can use event attributes.

Assign an onclick event to a button element:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

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

</body>
</html> 

Output:

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

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

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html> 

Output:

The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with cookies.

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

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

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

Output:

The onchange Event

The onchange event is often used in combination with validation of input fields.

Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

</body>
</html>

Output:

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:lightblue;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

<script>
function mOver(obj) {
  obj.innerHTML = "Thank You"
}

function mOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html> 

Output:

The onmousedown, onmouseup and onclick Events

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:yellow;width:90px;height:20px;padding:40px;">
Click Me</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "Release Me";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="Thank You";
}
</script>

</body>
</html> 

Output:

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/Animations

Learn to create HTML animations using JavaScript.

JavaScript HTML DOM Animations
  1. Create an Animation Container – all animations should be relative to a container element.
<div id ="container">
  <div id ="animate">My animation will go here</div>
</div>

2. Style the Elements:

The container element should be created with style =“position: relative”

The animation element should be created with style =“position: absolute”.

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>

Output:

3. Animation Code – JavaScript animations are done by programming gradual changes in an element’s style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}

Try it yourself:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

Output:

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/CSS

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

JavaScript HTML DOM CSS

Changing HTML Style

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "green";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Output:

Using Events

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when “things happen” to HTML elements:

  1. An element is clicked on
  2. The page has loaded
  3. Input fields are changed

You will learn more about events in the next chapter of this tutorial.

This example changes the style of the HTML element with id=”id1″, when the user clicks a button:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'yellow'">
Click Me!</button>

</body>
</html>

Output:

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/HTML

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

JavaScript HTML DOM/HTML
Do you like this gif? Check more gifs in the store.

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML

This example changes the content of a <p> element:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Output:

Example explained:

The HTML document above contains a <p> element with id=”p1“. We use the HTML DOM to get the element with id=”p1″. A JavaScript changes the content (innerHTML) of that element to “New text!”

This example changes the content of an <h1>element:

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html> 

Output:

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax: 

document.getElementById(id).attribute = new value

This example changes the value of the src attribute of an <img> element:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

Output:

Example explained:

The HTML document above contains an <img> element with id=”myImage”. We use the HTML DOM to get the element with id=”myImage”. A JavaScript changes the src attribute of that element from “smiley.gif” to “landscape.jpg”.

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/Methods

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

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

JavaScript HTML DOM
Document Object Model

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  1. JavaScript can change all the HTML elements in the page
  2. JavaScript can change all the HTML attributes in the page
  3. JavaScript can change all the CSS styles in the page
  4. JavaScript can remove existing HTML elements and attributes
  5. JavaScript can add new HTML elements and attributes
  6. JavaScript can react to all existing HTML events in the page
  7. JavaScript can create new HTML events in the page

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The W3C DOM standard is separated into 3 different parts:

  1. Core DOM – standard model for all document types
  2. XML DOM – standard model for XML documents
  3. HTML DOM – standard model for HTML documents

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  1. The HTML elements as objects
  2. The properties of all HTML elements
  3. The methods to access all HTML elements
  4. The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

JavaScript – HTML DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties are values (of HTML Elements) that you can set or change.

The DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming languages).

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

property is a value that you can get or set (like changing the content of an HTML element).

method is an action you can do (like add or deleting an HTML element).

Example:

The following example changes the content (the innerHTML ) of the <p> element with id=”demo“:

<!DOCTYPE html>
<html>
<body>

<h2>My First Page</h2>

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

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

Output:

The innerHTML property can be used to get or change any HTML element, including <html> and <body>.

Enjoy coding!