JavaScript Validation API

Constraint Validation DOM Methods

Property Description
checkValidity() Returns true if an input element contains valid data.
setCustomValidity() Sets the validationMessage property of an input element.

If an input field contains invalid data, display a message:

The checkValidity() Method

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

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

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Continue reading JavaScript Validation API

JavaScript HTML DOM – Changing CSS

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

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 :

Example

<html>
<body>

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

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

Continue reading JavaScript HTML DOM – Changing CSS

JavaScript Comparison and Logical Operators

Comparison and Logical operators are used to test for true or false.

Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x = 5, the table below explains the comparison operators:

Operator Description Comparing Returns Try it
== equal to x == 8 false
x == 5 true
x == “5” true
=== equal value and equal type x === 5 true
x === “5” false
!= not equal x != 8 true
!== not equal value or not equal type x !== 5 false
x !== “5” true
x !== 8 true
> greater than x > 8 false
< less than x < 8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true

 

How Can it be Used

Comparison operators can be used in conditional statements to compare values and take action depending on the result :

if (age < 18) text = "Too young to buy alcohol";

You will learn more about the use of conditional statements in the next chapter of this tutorial. Continue reading JavaScript Comparison and Logical Operators

What’s the Popover API?

The Popover API provides a built-in way to create various types of popover used in web applications. Previously, these required you to use JavaScript, and take great care to implement them in an accessible manner. The API brings all of this to the browser, and a simple popover can be created declaratively in HTML.

Continue reading What’s the Popover API?

HTML Unicode (UTF-8) Reference

Unicode is a universal character set that defines all the characters needed for writing the majority of living languages in use on computers.

Unicode aims to be (and already is) a superset of all other encoded computer character sets.

The Unicode Standard covers (almost) all characters, punctuations, and symbols in the world and enables processing, storage, and transport of text independent of platform and language.

The Unicode Consortium

The Unicode Consortium develops the Unicode Standard. The goal is to replace existing character sets with UTF (Unicode Transformation Format).

The Unicode Standard is implemented in HTML, XML, JavaScript, E-mail, PHP, Databases and in all modern operating systems and browsers.


The Unicode Character Sets

Unicode can be implemented by different character sets. The most commonly used encodings are UTF-8 and UTF-16:

Charset Description
UTF-8 A variable-length character encoding (1 to 4 bytes long). UTF-8 is backwards compatible with ASCII and the preferred encoding for e-mail and web pages.
UTF-16 A variable-length character encoding. UTF-16 is used in all major operating systems like Windows, IOS, and Unix.

The first 128 characters of UTF-8 have the same binary values as ASCII, making ASCII text valid UTF-8.


The HTML Standard is Unicode UTF-8

The default character set in HTML-4 (ISO-8859-1) were limited in size and not compatible in multilingual environments.

The default character encoding in HTML-5 is UTF-8.

HTML5 pages using a different character set than UTF-8 must specify this a <meta> tag:

Example

<meta charset=”ISO-8859-1″>

Continue reading HTML Unicode (UTF-8) Reference

HTML Geolocation API

The HTML Geolocation API is used to locate a user’s position.

Locate the User’s Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Continue reading HTML Geolocation API

HTML Audio

The HTML <audio> element is used to play an audio file on a web page.


The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Continue reading HTML Audio

HTML Video

The HTML <video> element is used to show a video on a web page.

The HTML <video> Element

To show a video in HTML, use the <video> element:

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Continue reading HTML Video

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!


Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi. Continue reading HTML Multimedia

HTML SVG

SVG (Scalable Vector Graphics)

SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages.

SVG graphics are scalable, and do not lose any quality if they are zoomed or resized:

SVG is supported by all major browsers.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines graphics in XML format
  • Each element and attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript

The <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, rectangles, circles, polygons, text, and much more.

Continue reading HTML SVG