 We're going to take a look at an example of inline JavaScript. So we have this little box and if we click it It'll jump over here and notice it changes colors when we click it We've done something very similar before. Let's go ahead and take a look say rectangle Yeah, let's go ahead and say ID box Color for now. I'm just gonna say red with 100 height 100 Let's say X is going to be zero Y is gonna be a little bit more complex. All right, let's take a look save run There's our box now. We need to animate it a little bit I don't even want to call that animation because it's more you guessed it just a mouse area So we've got mouse area. Let's go ahead and fill it Now this is where we're going to implement two little JavaScripts first off the color, right? We're gonna say if the area dot pressed Notice the question mark. We're doing a ternary operator and the colon. So if it's not pressed, we're gonna say gray This is a JavaScript property binding not a true property binding mind you. We're just using JavaScript in the property Now we want to do In a signal handler we've done this before This should look very very familiar Sometimes using a ternary operator in a property is a little cumbersome and QML does not always pick that up So definitely test it for your specific version I'm gonna say print and let's go ahead and make a bear. We'll say bear max equals root dot height now we've talked about scope in JavaScript We have an ID root and because it's in the global scope actually the global scope is up here But it's in a upper scope. We can actually access it down here. That's how that works So we've got scope here scope here scope here scope here and we can access it all the way up Same thing with box. We can access that because it's right here. Ta-da works very elegantly Now we're gonna say box dot x equals Let's test this and see if it works We've got a gray box mouse down turns orange and ta-da pretty cool pretty easy Now some things you should understand right off the bat here Making mistakes is very very simple and because that is not a logical mistake JavaScript and the cute creator ID you're not gonna catch it. That's where testing comes in. Oh, oh, we did a very big booboo There we go with that could have been very very bad But that's what I mean. You have to do some testing Don't always trust that cute cute creator or the JavaScript engine is gonna catch your mistakes What's up everybody? This is Brian. I hope you enjoyed this video It's part of a larger series out on udemy.com called QML for beginners the QML for beginners course assumes, you know Absolutely zero QML. You're just starting off and it's designed specifically for Qt 5 I will re-record the entire series when Qt 6 comes out and just know that it's over a hundred videos and 13 and a half hours of video on-demand I'll put a link below so you can get a highly discounted rate and Before you dive in just understand it covers a lot more than what I can put into this list everything from what's QML to animations to? C++ integration JavaScript and on and on and on But one of the requirements up front is you have to know Qt core You should have some C++ under your belt and be very familiar with Qt 5 in case you have none of that I do have some courses for Qt core beginners intermediate and advanced out on udemy as well. Hope to see you there