I decided to read the examples in the book, but even there it is not possible to understand the Javascript language, and I don’t understand where the unclear values come from.
div id="pic">
<div id="car"><img src="old.jpg" alt="" id="car"></div>
</div>
document.getElementById("car").addEventListener("mousemove", opa)
let d=0
let i=0
function opa(){
let h=event.pageX
if(h-d>3){
if(i<=1){
i+=0.01
document.getElementById("car").style.opacity=i
d=h
}
else{
i=1
}
if(d-h>3){
if(i>0){
i-=0.01
document.getElementById("car").style.opacity=i
d=h
}
else{
i=0
d=0
}
}
}
}
the code, as always, does not work, the picture should appear if you move the frame from left to right,
in this code 90% I don’t know what is written there and why?)))
for example, what does it do and how does it work (h-d>3)?
and where do they get this to write something that is incomprehensible?
Hi @pinkod02, yeah that clearly shows the value of telling variable names… oO as far as I can tell from the code, i is the target opacity value, h is the pageX property of the mouse event (i.e. the horizontal coordinate where the event got fired), and d is a variable for comparison… e.g. the first if block reads:
If d minus h is greater than 3, then
Increment the target opacity i by 0.01
Set the element opacity to i
Set d to h for subsequent checks
The code is incomplete though and won’t run at all, there are at least two closing brackets missing which will throw a syntax error. There might be more code supposed to follow as well.
I don’t understand such answers that (h-d>3)i+=0.01 not a single student would think of writing this, it should work at the level of understanding, and not as usual))) this is a very stupid Javascript language, how can you explain this to students , this is messed up
It is possible. The naming conventions of the script make it a little difficult, but it’s possible.
But the big issue is the typo in there. One of the closing brackets is in the wrong place.
What this is essentially doing is adjusting the opacity of the image based on how far the mouse moves.
variable d is the last known X position of the mouse on the image.
variable i contains the current opacity of the image (opacity is scaled from 0 being invisible to 1 being completely visible, so anything in between is a range of it. 0.5 is 50% opaque.
The first thing the opa method does is capture the current X position of the mouse. It then compares it to the last place the mouse was. If moved right, it becomes more opaque. If it moved left, it becomes more transparent.
The code you posted contains a few errors, whether those are in the book or you make a mistake copying it I don’t know.
As pointed out, you cannot have multiple elements with the same ID
You have a brace that is misplaced, causing your if statements to be incorrectly nested.
I created a fiddle with the corrected code, and used verbose variable names so perhaps you can read it and understand what it does.
document.getElementById("car").addEventListener("mousemove", opa)
let lastHorizontalPosition = 0
let currentOpacity = 0
function opa() {
let currentHorizontalPosition = event.pageX
if (currentHorizontalPosition - lastHorizontalPosition > 3) {
if (currentOpacity <= 1) {
currentOpacity += 0.01
document.getElementById("car").style.opacity = currentOpacity
lastHorizontalPosition = currentHorizontalPosition
} else {
currentOpacity = 1
}
}
if (lastHorizontalPosition - currentHorizontalPosition > 3) {
if (currentOpacity > 0) {
currentOpacity -= 0.01
document.getElementById("car").style.opacity = currentOpacity
lastHorizontalPosition = currentHorizontalPosition
} else {
currentOpacity = 0
lastHorizontalPosition = 0
}
}
}
Basically, as you move the mouse across the page to the right, the opacity of the image increases. As you move the mouse back to the left, it decreases. The comparison to > 3 or < 3 is so that tiny mouse movements don’t cause a change. The mouse must move at least 3 pixels to make a change.
To be honest, not everyone is born to become a software developer….
From what I read in your posts is, that you do not have the basic understanding of how computer works and therefor how programming languages are designed and how developers use them.
Software development is based on physics and mathematics and if you have no affinity to this science, you should maybe look for something what is more related to any of your talents
trying to tell us that JavaScript is bad designed and unable to be explained to students does not help, as many of us use this language for decades and most of us love it as it is designed and yes we understand the logic and design of it and we are able to use its power to build good software.
It appears that you are using the window.event object, which isn’t recommended
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Note: This property can be fragile, in that there may be situations in which the returned Event is not the expected value. In addition, Window.event is not accurate for events dispatched within shadow trees.
The handler function will be passed an event object automatically/implicitly as an argument, which would be a better option to use.
// more descriptive naming helps
function opacityHandler (event) {
// using the event object that has been passed into the opacityHandler function
const mouseX = event.pageX
// no need to keep querying the DOM for the car image element inside this function
// e.g. document.getElementById("car").style.opacity = i
// instead use the target property of the event object
const carImage = event.target
let targetOpacity = 0
...
...
if (targetOpacity <= 1) {
targetOpacity += 0.01
carImage.style.opacity = targetOpacity
}
}
const carImage = document.querySelector('#car-image')
carImage.addEventListener("mousemove", opacityHandler)
where do they get this to write something that is incomprehensible
I tried googling the book you are referring to and came up with nothing. I agree with you about ‘incomprehensible’. More descriptive naming would make the job of understanding the code a lot easier.
I would suggest maybe finding an alternative book or tutorial to follow.
The fact that this is not mine, I understood 2 years ago when I decided to make sure of this, since many people told me that programming is nonsense, that it is impossible to understand it, I understand all this, but I never thought that basic things There are so many complexities in Javascript, why is it needed? If almost everything can be done in a simple and understandable style?
This was an easier answer years ago — there is so much out there now to choose from.
Of course you have the excellent sitepoint books and courses to checkout
In addition to that…
Net Ninja is a decent tutor. Clear English and well explained tutorials
I will also add that I did a course a couple of years ago called Advanced Javascript Concepts by Andrei Neagoie on Udemy. Albeit it has ‘advanced’ in the title, he covers the basics in great detail and has animations and images to go along with the dialogue. It is a premium course, but can regularly be picked up on sale. It is constantly updated and has a decent support forum — might be worth a look.
Hello, thanks for the video course, but I have questions about the examples, as always, it’s not clear what the author is doing,
const bill = function(products, tax){
let total =0
for(let i = 0; i < products.length; i++){
total += products[i] + products[i] * tax
}
return total
}
console.log(bill([10,15,30], 0.2))
total += products[i] + products[i] * tax, why the second product[i]? why [10,15,30]? and how did you get 66? This author confuses everything and does not explain in detail
