در حال بارگذاری ...

Using DevTools Console1:23

related to web development. Let me just go to the Lericast's homepage here. Now if you go to View, Developer, Developer Tools, or you can use the shortcut here, this should bring up the Developer Tools panel. You'll see a bunch of tabs here, but if you go into the Console tab, you'll see this prompt where you can write JavaScript code. So if I were to write alert('hi'), and hit enter, this will show the browser's native alert component, and that should show in the browser. If you wanted to log a message to the console, you can just write console.log('hello'), and that should just write something in the console.

Editing DOM Elements2:50

So we can say .remove if we wanted to remove that element within the DOM. If I hit enter, that should be removed, and it's gone. How about we change the style of one of the elements in here? So let's scroll down a bit, how about we change the style of this? So again, we can select it using this, select, you can see it's this P tag here, let's make sure that's selected. Let's go back to the console, let's say $0, we can use the style property, so this will create an inline style, let's change the color of it, and let's change it to green. And if we hit enter, that should change the text to green, and it does. How about we add an event listener on it?

Adding Click Listeners3:26

And if we hit enter, that should change the text to green, and it does. How about we add an eventListener on it? So whenever some sort of event happens, we want to run some sort of code. So again, I'll make use of that element with $0, let's add eventListener, and how about we listen for a click? And you can also see some autocomplete here, because I've done this before I recorded the second parameter. And of course, we'll get into the definition of functions and parameters within the series, but we can run some code that we want to have happen after we click this element. And how about we just alert, keep learning, make sure to close that out, let's hit enter.

Choosing the Right Tech3:53

but we can run some code that we want to have happen after we click this element. And how about we just alert, keep learning, make sure to close that out, let's hit enter. And now as we click on that element, we do get that alert. Now if you're just starting out, it might be confusing as to what technology is needed to accomplish something. For example, you might not be sure if you can do something with just HTML elements, you might not be sure if you can style something with just vanilla CSS, you're not sure if you need JavaScript for that, or you're not sure if you need some sort of server-side language like PHP. This will become more clear as you gain more experience working with these technologies.

JavaScript Interaction Examples5:36

But here within the testimonials, if I hover over one of these profile pictures here, you'll see that it changes on the right. So this requires some JavaScript. And also down here where we have our tabs. And as I click on Teams, this should update. It does. So this requires some JavaScript as well. So yeah, those are just some examples of what you can do with JavaScript. So take a look at the fundamentals from absolute scratch, including variables, functions, loops, conditionals, JavaScript types like objects and arrays, event listeners, DOM selectors,

Devtools usageComponents that require JavaScript

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟