-
Notifications
You must be signed in to change notification settings - Fork 18
Week 3 Notes
This week we're adding Javascript into the mix of front-end technologies -- HTML and CSS -- that we worked with last week. Javascript was invented as a client-side, or browser-based, language, and that's still where it's most used.
With just HTML and CSS, there's only a limited amount of interactivity available, such as changing the color of a link when a user hovers over it. With Javascript, we have many more tools to respond to user input and make changes to a page once it's loaded. These three technologies each handle different aspects of a page:
- HTML - structure and content
- CSS - look and feel
- Javascript - behavior
One of the primary uses of Javascript is to change the HTML of a page once it's been loaded into the browser. When something on a page changes without the page having to reload, that's usually Javascript. For example, if you type into a search box and you see the search results on the page change as you are typing, that's Javascript.
Read:
- Intro to DOM manipulation and events in javascript
Examples on jsfiddle.net
Along with the code in this repo, I've put a few examples on jsfiddle.net so you can play around with them live.
- Accessing the DOM jsfiddle | github
- Dynamically create DOM elements jsfiddle | github
- Mouse listener jsfiddle | github
- Keyboard listener jsfiddle | github (Note: uses a switch statement)
- Button listener jsfiddle | github
- Add DOM elements with a button jsfiddle
For a walk-through of how to use jsFiddle, see the official tutorial. Note that the tutorial uses the MooTools library, which you won't need for my examples.
####Listeners
Here's a list of all Javascript Events. These are the possible options in the addEventListener() function. For example, in this code:
document.addEventListener('mouseup',doSomething);Some common events are keyup, click, drag, focus, blur.
Javascript has a rather unique way of dealing with functions compared to other programming languages. You can add function definitions within other function definitions. The syntax can be very confusing at first. You'll encounter a variety of different approaches when you research how to make things work in Javascript. Let's attempt to demystify a bit.
Named Functions
You're familiar already with defining a function and giving it a name, as in this code:
function doSomething(){
console.log("something!");
}In the event listener examples above, we passed the name of a function into another function as a parameter, as in:
document.addEventListener('click',doSomething);Anonymous Functions
Javascript also lets you write the function itself right into a function call, without giving it a name. That's called an anonymous function and looks like this:
document.addEventListener('click',function(){
console.log("something!");
});Why do this? Let's say the only thing you ever need the function doSomething() for is to respond to the click event. Since you only need it in that one place, javascript lets you skip the step of defining and naming it. It also means that you can see what the function does right there in the code, instead of having to search through the script and find the doSomething function. Some people find that easier to read. Others disagree. Whichever you choose to use personally, it's good to be able to understand both approaches.
If you find that your project needs a lot of fine-tuned DOM control, you might try using the jQuery library. jQuery makes it easy to access DOM elements using CSS syntax, and add event listeners to them. Start with this jQuery introduction to get a sense of how it works.