If you're a new software developer, Head First Software Development will get you started on the right side. Head first Object Oriented Analysis and Design (OOA&D) Head first HTML with CSS and XHTML.
Intro
Here you are trying to learn something while your brain is doing you a favor by making sure the learning doesn't stick. Your brain thinks, "You better leave room for more important things, like which wild animals to avoid and whether naked snowboarding is a bad idea." So how do you trick your brain into thinking your life depends on knowing jQuery.
1 Web page action
You want more for your web pages
2 Grab and go
3 Making things happen on your page
Use Filter Methods to Narrow Your Choices (Part 1) 161 Use Filter Methods to Narrow Your Choices (Part 2) 162.
4 Mod the DOM
Just because the page is finished loading doesn’t mean it has to keep the same structure. Back in
5 A little glide in your stride
Making things happen on you page is all well and good,
6 Luke jQuery, I am your father!
7 What have you done for me lately?
When you combine jQuery’s custom effects with
Take control of timing effects with the window object 256 Respond to browser events with continuous blur and focus 259 Timer methods tell your functions when to run 263 Write the stopLightning and goLightning 266 functions.
8 Please pass the data
Annual Bit to Byte 10K Run
9 Client, meet server
Extreme form makeover
10 The Web lives and dies by users and their data
Objects, objects everywhere
You need a place to practice your newfound PHP skills without making your data vulnerable on the Web
So what does your brain do with all the routine, ordinary, normal things you encounter. Your brain pays attention to things that are unusual, interesting, strange, striking, unexpected.
We think of a “Head First” reade r as a learner
The trick is getting your brain to see the new material you're learning as really important. Otherwise, you're in for a constant battle, with your brain doing its best to keep the new content from sticking.
Web page action
You want more for your web pages. You’ve got HTML and CSS
You already know how to build great-looking websites with clean, valid HTML and CSS. The browser requests a web page from a server when someone types a web address into the browser's URL bar.
Let's take a look at the web page from the browser's perspective - specifically, how jQuery can change the web page inside the browser. But unlike an X-ray, JavaScript and jQuery use the DOM to change the structure on the page.
What you see in the browser
The important part to keep in mind is that none of the original HTML and CSS changed when you clicked each button.
Behind the Scenes
This is the jQuery function, whose whole job is to grab the elements you put in parentheses. The main way you can do things with jQuery is to use selectors - the same selectors you used with CSS.
Your job is to play the browser and circle the HTML elements (on the right) that the
Here's our solution
It's optimized to run faster in a production environment, but it's somewhat harder to see what's going on. It's meant for anyone who wants to dig into the jQuery code to change or even extend it (it's open source, after all!).
NOTE
When thinking about your structure, it's always good to refer back to what you're trying to build. Now you're probably starting to see why so many people like jQuery.
Across
Down
CHAPTE R 1Your jQuery Toolbox
Grab and go
The page should have four sections with one of four "jump for joy" images per section. Great, now that we've worked out the project requirements, let's jump in and get started with jQuery. Use a JavaScript alert function to display the text "You clicked me" when the div is clicked. We have already prepared some for you.
We'll use it whenever we want to see the results of things we've added to the code like variables and functions. You should see the alert message now as you click around the images on the page. You can have one or more elements on the page that have the same class.
CSS Selector
In the CSS file, create a CSS class (called guess_box) and apply it to the html and script. Attach the click method only to the guess_box class and not all div elements. When a user clicks on one of the sections, the message should appear below the image in that section.
But beyond that, we need to have a number that will vary or change based on a random amount. We'll give you JavaScript code to create a variable called discount that contains a random number between 5 and 10. In many cases, especially when we need to display different messages to visitors, we'll mix HTML with these other types of data, giving our web pages even more power .
Like me, for instance
It implemented the click method so that every member of the guess_box class is clickable. When it comes to specificity, the simplest selector to write is $(this). All you have to remember is the pronoun "this." The $(this) selector gives us an easy way to point to the current element. The remove method allows us to remove an element, or a group of elements, from the page.
And here is the code for the button that will remove all list items from your list:. The remove statement cannot go on line 1 because it would be outside the click function for the guess box. I want to remove the last discount message before creating a new one, so I'll put it as the first line of the code block (inside curly brackets) for the guess_box click.
Making things happen on your page
Emily was happy with the work you did for her Jump for Joy promotion, but she met with her accountant and now wants you to make some changes. Visitors would still have to choose from four options to receive the discount. Visitors should only have one chance to find the discount code, which must be in a random square for each visit.
If a visitor finds the discount code when clicking, show it on the screen before continuing. Emily took a few photos of her accountant for his profile, but she couldn't get him to jump for joy. Making the promotion limited to just one square keeps Emily from handing out so many discount codes and keeps people clicking around the site.
Click!
Visitors should only get one chance to get the discount when they load the page. An event is a mechanism that allows you to run a piece of code when something happens on the page (such as a user clicking a button). When we do this, the event listener knows to tell the JavaScript interpreter which function to call.
Method 1 - the convenience method - is just a shortcut to method 2, but only if the DOM elements already exist. We use this method to add events to elements as the page loads. We use this method just like method 1, but we can also use it to add events to elements that are added to the page after it loads, such as when we create new DOM elements.
Ev ents
Once an element is created, you can still use the .bind method to assign an event listener to it. See if you can edit the magnets to move the code that checks the discount code into its own named function called checkForCode and use it as a handler for the fields click event. But really, you can think of your function as a recipe - in this case, let's say it's for making a drink.
Now that you can create your own functions, add a new function to your my_scripts.js file that takes a single argument (called num) and then returns a random number based on the argument you give it. Now that you can create your own functions, add a new function to your my_scripts.js file that takes a single argument (called number) and then returns a random number based on the argument you give it. Have a look at the list on page 82 and see if you can figure out which event to use.
We've started them for you; just type in the functions below. To help you, we've created these CSS classes that you can add to your my_styles.css file to indicate whether the code was found or not.
Mod the DOM
She maintains separate web pages for different versions of her menu: the regular menu and the menu with vegetarian substitutions. She wants you to create one page that adapts the menu to the restaurant's vegetarian clientele. We put our menu on the web a few years ago and our customers love it.
We would like you to add some buttons that our customers can change and highlight the web menu on the fly. Before we write any jQuery, let's take a look at the HTML and CSS files the web designer sent us, and see if their style and structure are up to par. I've had the web designer email me the files for the current menu so you can get started.
W e ebville Eat ery
Dig into the actual structure of the web menu by diagramming how the DOM sees it. Let's check these items out of the napkin and move on to the things that the "Go Vegetarian" button should do. We matched elements with class selectors and used remove to take elements out of the DOM in Chapter 2.
The decoupling method we just looked at is an example of DOM manipulation (i.e. we dynamically extract elements from the DOM). It will not work for deleting appetizers that contain fish, as ALL entree lists will be removed. The sibling method traverses all elements at the same level as the selected element.
We've seen variables throughout the first three chapters, but we've only used them to store numbers and text strings. If we want to keep them for use in our program later, it is a good idea to put them into a variable.
Placing a dollar sign in front of the variable indicates that it stores elements returned from jQuery. Add the line of code on the previous page, which will detach the parents from the parents of the #fish elements, inside the vegOn button click function in your my_scripts.js file. We've seen how to extract elements from the DOM, but how do we dynamically replace DOM content with different content.
You must match li elements in the hamburger class and replace them with a li element from the portobello class. We could replace the tofu with just one of the meat types, but that wasn't what we wanted at all. Fortunately for us, the creators of the jQuery library gave us many ways to insert things into the DOM.
