Kids Code & Computer Science

Click on the box under ‘Frameworks & Extensions’

Select ‘jQuery 3.2.1’

jQuery is a popular extension of JavaScript. It makes it easy to move and modify the elements of a webpage.

2. HTML

HTML can be seen as the ‘bones’ of a webpage. It contains all the important structural information, like what the text says and how it’s separated.

In the top left-hand editor, type:

<div id="cat"> 
=^.^=
</div>

<div id=“cat”> 

An html ‘div’ is a type of container. This one’s id — or ‘name’ — is ‘cat’. Inside the tags we’ll put the ASCII art for our JavaScript kitten.

=^.^=

See how the ‘=‘ are whiskers, and the ‘^’ are ears, and the ‘.’ is a nose? The result is an adorable, minimalist kitten. ASCII at is a way of making pictures using letters and other typed symbols.

</div>

Every ‘opening’ HTML tag needs a matching ‘closing’ HTML tag. Picture it as putting a lid on a container.

3. CSS

If HTML is the bones, then CSS is the ‘skin’. It wraps around the bones and makes everything look pretty.

In the top right-hand editor, type:

#cat {
position:absolute;
}

The #cat references the container we’ve just created.

position: absolute;

The ‘position’ property controls — big surprise — the position of its container. ‘Absolute’ means that the div will be positioned relative to another element. In this case, we’re moving our div based on the mouse’s position.

There are other ways of positioning elements. For example, you could use the browser window as a reference. Or, you could force an element to be frozen in place.

4. JavaScript

JavaScript will be the ‘muscles’ of our webpage. It makes things move!

In the bottom left-hand editor, type:

$(document).mousemove(function(mouse){
    $("#cat").stop().animate({left:mouse.pageX, top:mouse.pageY});
});

Looks like a lot, right? Don’t worry, it’s simpler than you think!

$(document).mousemove( X );

The ‘$’ in JavaScript means that jQuery is being used behind the scenes. This piece of code registers an event handler for mouse movements. That’s a fancy way of saying ‘the browser window nows pays attention when the mouse moves around’. The ‘X’ dictates what the browser does when it detects a moving mouse. Don’t forget to end this statement with a semi-colon!

function(mouse) { Y }

This piece of code replaces the above ‘X’. It translates to: ‘If you see the user moving the mouse, do the action described in Y.’

$(“#cat”).stop().animate( Z )

This piece of code replaces the ‘Y’. It’s what actually moves our cat. The first part — $(“#cat”) — uses jQuery to locate the ‘#cat’ div on the screen. If the cat is running around, the ‘.stop()’ forces it to freeze in its tracks, while ‘.animate( Z )’ tells the cat where to run next.

{left: mouse.pageX, top: mouse.pageY}

This piece of code replaces the ‘Z’. It tells the cat where to find the mouse. The ‘left’ and ‘top’ properties determine the cat’s position. Here, they’re matched up to the mouse’s ‘left’ and ‘top’ — or X and Y — coordinates. The result is that the cat zooms toward the mouse.

5. Run

Hit the ‘Run’ button at the top of the screen.

The bottom right-hand console contains the output of the program. Move your cursor around the square and watch the cat chase your mouse!

Psst! If the cat isn’t moving but the code is correct, you might have forgotten to add jQuery. Go back to step 1 and go through everything carefully.

Learn More

jQuery vs JavaScript

https://learn.onemonth.com/jquery-vs-javascript-4f26b98e3136

Web Design for Kids

https://webdesign.tutsplus.com/tutorials/web-design-for-kids-welcome-to-tuts-town–cms-23680

Web Coding Resources

https://www.kidscodecs.com/html-coding-for-beginners/
https://www.kidscodecs.com/resources/programming/javascript/

CSS Position Property

https://www.w3schools.com/cssref/pr_class_position.asp

jQuery animate

https://www.w3schools.com/jquery/jquery_animate.asp