Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Setting up our core files


From:

JavaScript: Events

with Ray Villalobos

Video: Setting up our core files

Alright, so it's time to start preparing our document. And right now, we've got an images folder with a bunch of svg documents, and I've already created a few blank index.html, script.js, and style.css files. So let's get started with some code, I'm going to click on this index file, and I'll start with a plain html document. I'm going to name this snowman, and I'm going to call my CSS file by using the link tag and linking it to style.css.
please wait ...
Watch the Online Video Course JavaScript: Events
2h 11m Intermediate Sep 17, 2013

Viewers: in countries Watching now:

Learn about the different types of JavaScript events available to use in your applications, including traditional events like mouse, form, and window events, plus events that allow you to manage the DOM and HTML5 events that deal with media. Author Ray Villalobos shows how to propagate and register events during the capturing and bubbling phases, cancel an event or default behavior, and respond to clicks, mouse-overs, right-clicks, following the mouse, and loading images. Plus, Ray demos an audio jukebox project and a drag-and-drop game that shows JavaScript desktop and touch events in action.

Topics include:
  • Understanding event registration and propagation
  • Analyzing event properties
  • Creating and removing DOM elements with events
  • Removing an event
  • Canceling and preventing default events
  • Playing media events
  • Handling media pauses
  • Dragging and dropping
  • Adding touch events
Subjects:
Developer Web
Software:
JavaScript
Author:
Ray Villalobos

Setting up our core files

Alright, so it's time to start preparing our document. And right now, we've got an images folder with a bunch of svg documents, and I've already created a few blank index.html, script.js, and style.css files. So let's get started with some code, I'm going to click on this index file, and I'll start with a plain html document. I'm going to name this snowman, and I'm going to call my CSS file by using the link tag and linking it to style.css.

And, I'm going to go over here right before the closing body tag and type in a script tag that links this to the script.js document. (NOISE) Right so our files are linked, really the rest of the page is just a bunch of image tags, but the image tags are built in a very specific way. So let me just go through one of them, And then we'll copy the rest from the code snippets.md file. So I'm going to use an image tag right here. And as the source of the image file I just want one of the images in my folder, so let's just pick images/body.svg.

And I'll put an Alt tag here, this is going to be my snowman. And there is a few other things that I want to add here. First of, I'm going to be dragging all of these I want to include the draggable attribute, going to set that to true for all the files. And the next thing I'm going to do is to set the style attributes for every one of the images in the HTML. This is not something I would normally do but in this document it makes a lot of sense because we're going to be using JavaScript to control the positioning.

And JavaScript is going to end up injecting these into your HTML any ways. And this is a great place of previewing where the images are going to go, and helping us lay them out. This will make sense in just a minute. So let me just go ahead and type it in. So the attribute that we need is the style attribute, and then we're going to pass it along some CSS. Just like we would normally do on this style.css file. So I'll do style, and then set the position of the object to absolute. What that will do is, allow me place any one of the elements at a specific X and Y position because none of the containers of these images are set to relative.

These will all align to the body tag, if you need help with CSS layouts, make sure you check out with excellent course CSS page layouts with James Williamson. There's a chapter right here called Positioning Elements. This would be really good reading if you're not familiar with positioning absolute. Let's go back here we'll do position absolute and then we set up x and y coordinate here. Left, in this case, it would be 50 pixels. And top will be 120 pixels and I am also going to set the z index. The z index is the layering from top to bottom so think of these elements as a stack of cards anything with a z index higher than nothing will be on top of everything else.

So in here we were just going to set them all to 5 And this is pretty much what we do for any one of the other elements. So I don't want to sit here and type all these in. I already have a file here called codesnippets.md with all the images already placed at their right positions. So if I just grab all these and copy this to the clipboard and switch back to the index file, then I can just replace the one that I did right here. (SOUND) And just paste all of my images. So, you can see that they're all pretty much the same. Everything has an individual ID as well, so I just create an ID attribute, and make sure that everything has a unique name.

They're pretty much matching the name of the files as well. So, I've got all that done, let me go ahead and save this. And now before we do anything else, I'm going to go into my style.css, and set that up. This is going to be probably the easiest CSS you've ever seen. All we have to do is set the body tag, and set a background color. So I'm going to set my background color to #E4 And just clear out the normal margin that you see on any webpage, so margin and padding are going to be zero. And then set up a width, I'm going to be dealing with static sizes, so I'm going to use a static page width.

This is not going to be a responsive layout. And I'm also going to set a height. Normally I wouldn't set up a height, but in this kind of document you want to make sure that when you drag things there's going to be something behind. And since we're positioning all these elements absolutely, you're going to need the background to have a certain amount of height. So. It doesn't really matter what you put here. You can put in like 1000 or 600. Whatever will work for the layout that you're generating is fine right here. So, other than that all we need to do here is create a style for what happens when the element is draggable.

So I'll do draggable. And all I need to do here is modify the cursor. And offset the cursor to be the move attribute, so when you roll over these images, it's going to switch to a special cursor that's designed to work with moving images. So this is pretty much all the CSS you're going to do, all the other CSS is going to be in the index of that HTML document. So let's come over here and see if we can preview this in a browser. So you can see that everything is where it belongs. Right now we can't really move anything but everything is laid out nice and were we want it.

Now you are probably thinking I've spend a tone of time figuring out exactly the X and Y position of each one of these documents, but I am actually going to show you a cool short cut that you can use when you are doing a project like this. What I've done is gone to the finished version of this file. So, I've already got these laid out exactly how I want to, but if I wanted to change the way these were laid out all I have to do is look at the complete version of this project. And move these where ever I want em to lay em out. So, if I didn't like this layout and I want to spread things out a little bit or I wanted to just change the position of any one of these elements.

I can just go to the finished version of this project and then manually move things where I want them. And then, right click on any of these elements and select inspect element. And that will tell me the code for every one of those images and the new positions that I've placed them in. So, if we're right here at the very top, let's go ahead and hit this magnifying glass. And click on this one right here, so that's this element right here, since I have moved these with Java Script take a look at this positioning numbers right here.

If I move it again you'll see that they will change and now its just 344 px so whatever I do in the finished version of the code. I can just grab my HTML from here so I can right click on any of these and select Copy as HTML. And once I do that, then I can switch over to this version of the code, and just paste this into my layout. So if I paste this, you'll see that you get the new position for this element. So really, I didn't spend the time mathematically calculating where everything was going to go. I just simply lay them out as I wanted to, and then re-arrange them manually, and then copy all the html.

If you don't know where they're going to go, then what you could do also is get rid of the positioning attributes, so just get rid of all this. Positioning stuff right here. And then layout the file manually. I can't do that with this because we don't have the JavaScript done. But if you just get rid of the left and top positioning here then all the elements will arrange sort of right on top of each other. And then you can just move them around and then copy the HTML for any one of those positions. So, although I never use in-line style sheets, in this project it's going to make a lot of sense.

The JavaScript you create eventually is going to inject this in-line code into your projects any ways. And it's really going to help you design the project if you keep this code in your HTML at the beginning.

There are currently no FAQs about JavaScript: Events.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript: Events.

Return to your organization's learning portal to continue training, or close this page.


OK

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.