As we all know, JavaScript is used for creating interactions on your website. JavaScript allows you to"teach" an element to behave a certain way in response to a user's actions. For example, you can make changes on HTML content and CSS styles, and display an alert in the browser as well.
Events
Any time you interact with a webpage, you generate all kinds of events. An event is something you do on the web page, like moving your mouse around, scrolling, or clicking a button. Browsers"listen" for events and, with JavaScript, we can do something in response to an event.
We’ve learned how to change styles when users hover on an element with CSS. You can do this with JavaScript as well. Hover in JS is split into two events–mouseover(when the mouse pointer hovers over the element) and mouseout(when the pointer moves off the element). So you will need to define the two states separately.
The click event is another interaction that is commonly used in a website. We can’t create click events with CSS, but we can do it with JavaScript. So let’s start learning how JavaScript works with the click events.
There are 2 ways to create a click interaction. Here we’ll start with the simple way:
Event handler attributes
We already learned that JavaScript code should be put inside the <script> tags, but HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. The following code shows how to create an click interaction by adding an onclick attribute in your HTML code:
<buttononclick="alert('You just clicked a button')">click me!</button>
This line of code means that an alert saying“You just clicked a button” will be displayed in the browser when users click on the button that says”click me!”.
Like the other HTML attributes, the onclick attribute is followed by an = and double quotes"" where you can put your JavaScript code inside. So you should use single quotes in your JS code to avoid errors, or use backslashes \ to escape it.
The alert() is a function that allows you to display a message in a dialogue box popped up in the browser.
List of other mouse event handler attributes that you can use:
Functions are one of the essential concepts in JavaScript programming.
JavaScript functions let you store code inside a defined block that can be reused, so that you won’t need to type the same code again and again. After you write a function, it will not be executed until"something" invokes it(calls it).
JavaScript functions make your code faster, more organized, and less error-prone.
Declare a Function
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses(). The code to be executed, by the function, is placed inside curly brackets: {}.
functionfunction_name() {
// your code
}
Function names can contain letters, digits, underscores, and dollar signs(same rules as variables).
You know you're dealing with a function when a word has() after it. If there is some data in the parentheses, that's called an argument. Function arguments are the values received by the function when it is invoked.
For example, we’ve already talked about two functions: console.log() and alert().
The sentences in the parentheses are the arguments.
console.log("My JS file is loading successfully!");
alert('You just clicked a button');
Functions like these two are built into the browser, so you can directly call them without declaring them in advance.
We can also put functions inside another function that you created:
Events
Event handler attributes
<button onclick="alert('You just clicked a button')">click me!</button>Functions
Declare a Function
function function_name() { // your code}console.log("My JS file is loading successfully!");alert('You just clicked a button');function alertMessage() { alert('You just clicked a button');}