HTML Input Types, Sensors, Random Numbers, and Loops in JavaScript

Radio Buttons

Radio buttons allow you to choose only one option among multiple. If an option wasn't previously selected, it can be automatically changed. Radio buttons with the same name are grouped together, ensuring that only one option within that group can be selected at a time.

Gender: Male Female

Checkboxes

Checkboxes allow you to choose one or more options from a list. Unlike radio buttons, a name attribute is not required for grouping.

Activities: Yoga Boxing

To check if a checkbox is selected in JavaScript, you can use the following code within a button's function:

if (document.getElementById("checkbox_id").checked == true)

To reset a checkbox, use:

document.getElementById("checkbox_id").checked = false;

Sensors

Senses allow us to collect information about the world and make decisions. For example, when we touch an object, sensors on our fingers send signals to the brain, allowing us to recognize its temperature.

A sensor is a device that detects energy signals and converts them into another form.

Examples of sensors include:

• Light sensors
• GPS sensors
• Temperature sensors
• Pressure sensors
• Fingerprint sensors
• Touch sensors
• Microphones

Random Numbers

A random number is an unpredictable number. An example is rolling a dice. All computer languages have functions to generate random numbers, which are used in games, simulations, and even cryptography.

Math.random()

Math.random() is a predefined JavaScript function that generates a random decimal number between 0 (inclusive) and 1 (exclusive), meaning it can generate numbers from 0 up to 0.999. It always rounds down and starts from 0.

var example = Math.random();

Math.floor()

Math.floor() rounds a number down to the nearest integer.

Math.floor(4.8); returns 4

Math.floor(Math.random() * upperLimit); generates a random integer between 0 and upperLimit - 1.

var example2 = Math.floor(Math.random() * 7); generates a random integer between 0 and 6.

Math.floor(Math.random() * 6) + 1; generates a random integer between 1 and 6.

Adding Images in JavaScript

To add images in HTML, use the src attribute within the <img> tag.

You can dynamically change the image source in JavaScript using the following code:

if (document.getElementById("male").checked == true) {

document.getElementById("image").src = "images/boy.png";

}

Loops and Iteration

A loop, also known as iteration, is the finite repetition of one or several lines of code.

Accumulating Totals

Accumulating totals involves keeping a running total by summing values during each iteration of a loop.

Validating Data

Validating data ensures that the data entered falls within an acceptable range.

Displaying Different Pictures or Text

Loops can be used to display different pictures or text sequentially, similar to a slideshow.

For Loops

A for loop executes instructions a fixed number of times. It is known as a count-controlled loop.