3sd4

onmouseout Event
The “onmouseout” event occurs when a user moves the mouse pointer out of the area
occupied by an HTML element like an image, a button, or a hyperlink.
When the event is triggered, a predefined function or script is execguted.
Here’s an example:
f
<img id="myImage" src="image.jpg" onmouseout="hideMessage()">
<script>
function hideMessage() {
alert("Mouse left the image area!");
}
</script>
In this example, we have an HTML image element with the “id” attribute set to
"myImage."
It also has an “onmouseout” attribute specified, indicating that when the user
moves the mouse cursor out of the image area, the "hideMessage()" function should
be executed.
Then, when the user moves the mouse cursor out of the image area, a JavaScript
function called “hideMessage()” is called.
The function displays an alert dialog with the message "Mouse left the image area!"
onload Event
The “onload” event executes a function or script when a webpage or a specific
element within the page (such as an image or a frame) has finished loading.
Here’s the code implementation for this event:
<body onload="initializePage()">
<script>
function initializePage() {
alert("Page has finished loading!");
}
</script>
In this example, when the webpage has fully loaded, the “initializePage()” function
is executed, and an alert with the message "Page has finished loading!" is
displayed.
onfocus Event
The “onfocus” event triggers when an HTML element like an input field receives
focus or becomes the active element of a user’s input or interaction.
Take a look at this sample code:
<input type="text" id="myInput" onfocus="handleFocus()">

<script>
function handleFocus() {
alert("Input field has received focus!");
}
</script>
In this example, we have an HTML text input element <input> with the “id” attribute
set to "myInput."
It also has an “onfocus” attribute specified. Which indicates that when the user
clicks on the input field or tabs into it, the "handleFocus()" function will be
executed.
This function displays an alert with the message "Input field has received focus!"
The “onfocus” event is commonly used in web forms to provide visual cues (like
changing the background color or displaying additional information) to users when
they interact with input fields.
onsubmit Event
The “onsubmit” event triggers when a user submits an HTML form. Typically by
clicking a "Submit" button or pressing the "Enter" key within a form field.
It allows you to define a function or script that should be executed when the user
attempts to submit the form.
Here’s a code sample:
<form id="myForm" onsubmit="handleSubmit()">

<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<script>
function handleSubmit() {
let form = document.getElementById("myForm");
alert("Form submitted!");
}
</script>
In this example, we have an HTML form element with the “id” attribute set to
"myForm."
It also has an “onsubmit” attribute specified, which triggers the "handleSubmit()"

function when a user submits the form.
This function shows an alert with the message "Form submitted!"
Numbers and Math

JavaScript supports lots of methods (pre-defined functions) to deal with numbers
and do mathematical calculations.
Some of the methods it supports include:
Math.abs() Method
This method returns the absolute value of a number, ensuring the result is
positive.
Here's an example that demonstrates the use of the “Math.abs()” method:
let negativeNumber = -5;

let positiveNumber = Math.abs(negativeNumber);
console.log("Absolute value of -5 is: " + positiveNumber);
In this code, we start with a negative number (-5). By applying “Math.abs(),” we
obtain the absolute (positive) value of 5.
This method is helpful for scenarios where you need to ensure that a value is non-
negative, regardless of its initial sign.
Math.round() Method
This method rounds a number up to the nearest integer.
Sample code:
let decimalNumber = 3.61;

let roundedUpNumber = Math.round(decimalNumber);
console.log("Ceiling of 3.61 is: " + roundedUpNumber);
In this code, we have a decimal number (3.61). Applying “Math.round()” rounds it up
to the nearest integer. Which is 4.
This method is commonly used in scenarios when you want to round up quantities,
such as when calculating the number of items needed for a particular task or when
dealing with quantities that can't be fractional.
Math.max() Method
This method returns the largest value among the provided numbers or values. You can
pass multiple arguments to find the maximum value.
Here's an example that demonstrates the use of the “Math.max()” method:
let maxValue = Math.max(5, 8, 12, 7, 20, -3);

console.log("The maximum value is: " + maxValue);
In this code, we pass several numbers as arguments to the “Math.max()” method.
The method then returns the largest value from the provided set of numbers, which
is 20 in this case.
This method is commonly used in scenarios like finding the highest score in a game
or the maximum temperature in a set of data points.
Math.min() Method
The “Math.min()” method returns the smallest value among the provided numbers or
values.
Sample code:
let minValue = Math.min(5, 8, 12, 7, 20, -3);

console.log("The minimum value is: " + minValue);
In this code, we pass several numbers as arguments to the “Math.min()” method.
The method then returns the smallest value from the given set of numbers, which is
-3.
This method is commonly used in situations like identifying the shortest distance
between multiple points on a map or finding the lowest temperature in a set of data
points.
Math.random() Method
This method generates a random floating-point number between 0 (inclusive) and 1
(exclusive).
Here’s some sample code:
const randomValue = Math.random();

console.log("Random value between 0 and 1: " + randomValue);
In this code, we call the “Math.random()” method, which returns a random value
between 0 (inclusive) and 1 (exclusive).
It's often used in applications where randomness is required.

Math.pow() Method
This method calculates the value of a base raised to the power of an exponent.
Let’s look at an example:
let base = 2;
let exponent = 3;
let result = Math.pow(base, exponent);
console.log(`${base}^${exponent} is equal to: ${result}`)
In this code, we have a base value of 2 and an exponent value of 3. By applying
“Math.pow(),” we calculate 2 raised to the power of 3, which is 8.
Math.sqrt() Method
This method computes the square root of a number.
Take a look at this sample code:
let number = 16;

const squareRoot = Math.sqrt(number);
console.log(`The square root of ${number} is: ${squareRoot}`);
In this code, we have the number 16. By applying “Math.sqrt(),” we calculate the
square root of 16. Which is 4.
Number.isInteger() Method
This method checks whether a given value is an integer. It returns true if the
value is an integer and false if not.
Here's an example that demonstrates the use of the “Number.isInteger()” method:
let value1 = 42;

let value2 = 3.14;
let isInteger1 = Number.isInteger(value1);
let isInteger2 = Number.isInteger(value2);
console.log(Ìs ${value1} an integer? ${isInteger1}`);
console.log(Ìs ${value2} an integer? ${isInteger2}`);
In this code, we have two values, “value1” and “value2.” We use the
“Number.isInteger()” method to check whether each value is an integer:
For “value1” (42), “Number.isInteger()” returns “true” because it's an integer

For “value2” (3.14), “Number.isInteger()” returns “false” because it's not an
integer—it contains a fraction
Date Objects
Date objects are used to work with dates and times.
They allow you to create, manipulate, and format date and time values in your
JavaScript code.
Some common methods include:
getDate() Method
This method retrieves the current day of the month. The day is returned as an
integer, ranging from 1 to 31.
Here's how you can use the “getDate()” method:
let currentDate = new Date();

let dayOfMonth = currentDate.getDate();
console.log(`Day of the month: ${dayOfMonth}`);
In this example, “currentDate” is a “date” object representing the current date and
time.
We then use the “getDate()” method to retrieve the day of the month and store it in
the “dayOfMonth” variable.
Finally, we display the day of the month using “console.log().”
getDay() Method
This method retrieves the current day of the week.
The day is returned as an integer, with Sunday being 0, Monday being 1, and so on.
Up to Saturday being 6.
Sample code:

let dayOfWeek = currentDate.getDay();
console.log(`Day of the week: ${dayOfWeek}`);
Here, “currentDate” is a date object representing the current date and time.
We then use the “getDay()” method to retrieve the day of the week and store it in
the “dayOfWeek” variable.
Finally, we display the day of the week using “console.log().”
getMinutes()Method
This method retrieves the minutes portion from the present date and time.
The minutes will be an integer value, ranging from 0 to 59.
Sample code:

let minutes = currentDate.getMinutes();
console.log(`Minutes: ${minutes}`);
time.
We use the “getMinutes()” method to retrieve the minutes component and store it in
the minutes variable.
Finally, we display the minutes using “console.log().”
getFullYear() Method
This method retrieves the current year. It’ll be a four-digit integer.
Here’s some sample code:

let year = currentDate.getFullYear();
console.log(`Year: ${year}`);
Here, “currentDate” is a date object representing the current date and time.
We use the “getFullYear()” method to retrieve the year and store it in the year
variable.
We then use “console.log()” to display the year.
setDate() Method
This method sets the day of the month. By changing the day of the month value
within the “date” object.
Sample code:

currentDate.setDate(15);
console.log(Ùpdated date: ${currentDate}`);
time.
We use the “setDate()” method to set the day of the month to 15. And the “date”
object is updated accordingly.
Lastly, we display the updated date using “console.log().”
How to Identify JavaScript Issues

JavaScript errors are common. And you should address them as soon as you can.
Even if your code is error-free, search engines may have trouble rendering your
website content correctly. Which can prevent them from indexing your website
properly.
As a result, your website may get less traffic and visibility.
You can check to see if JS is causing any rendering issues by auditing your website
with Semrush’s Site Audit tool.
Open the tool and enter your website URL. Then, click “Start Audit.”
Site Audit search bar

A new window will pop up. Here, set the scope of your audit.
Site Audit Settings pop-up window

After that, go to “Crawler settings” and enable the “JS rendering” option. Then,
click “Start Site Audit.”
Configure crawler settings in Site Audit tool

The tool will start auditing your site. After the audit is complete, navigate to
the “JS Impact” tab.
You’ll see whether certain elements (links, content, title, etc.) are rendered
differently by the browser and the crawler.

3sd4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3sd4

Uploaded by

Copyright:

Available Formats

onmouseout Event

When the event is triggered, a predefined function or script is execguted.

Here’s the code implementation for this event:

Take a look at this sample code:

<input type="text" id="myInput" onfocus="handleFocus()">

Here’s a code sample:

<form id="myForm" onsubmit="handleSubmit()">

It also has an “onsubmit” attribute specified, which triggers the "handleSubmit()"

This function shows an alert with the message "Form submitted!"

Numbers and Math

Some of the methods it supports include:

Here's an example that demonstrates the use of the “Math.abs()” method:

let negativeNumber = -5;

let decimalNumber = 3.61;

Here's an example that demonstrates the use of the “Math.max()” method:

let maxValue = Math.max(5, 8, 12, 7, 20, -3);

let minValue = Math.min(5, 8, 12, 7, 20, -3);

Here’s some sample code:

const randomValue = Math.random();

It's often used in applications where randomness is required.

Let’s look at an example:

Take a look at this sample code:

let number = 16;

Here's an example that demonstrates the use of the “Number.isInteger()” method:

let value1 = 42;

For “value1” (42), “Number.isInteger()” returns “true” because it's an integer

Some common methods include:

Here's how you can use the “getDate()” method:

let currentDate = new Date();

Finally, we display the day of the month using “console.log().”

let currentDate = new Date();

Finally, we display the day of the week using “console.log().”

The minutes will be an integer value, ranging from 0 to 59.

let currentDate = new Date();

Finally, we display the minutes using “console.log().”

Here’s some sample code:

let currentDate = new Date();

We then use “console.log()” to display the year.

let currentDate = new Date();

Lastly, we display the updated date using “console.log().”

How to Identify JavaScript Issues

As a result, your website may get less traffic and visibility.

Site Audit search bar

Site Audit Settings pop-up window

Configure crawler settings in Site Audit tool

You might also like