Practical JavaScript Techniques

233 Pages·2013·3.31 MB·English

by  Smashing Magazine (Editor) Smashing Magazine (Author)

Imprint

© 2013 Smashing Media GmbH, Freiburg, Germany
ISBN: 978-3-943075-59-5 (Version 1: February 2013)
Cover Design: Ricardo Gimenes.
PR & Press: Stephan Poppe.
eBook Strategy and Editing: Vitaly Friedman.
Technical Editing: Cosima Mielke.
Planning and Quality Control: Vitaly Friedman, Iris Lješnjanin.
Tools: Elja Friedman. Syntax Highlighting: Prism by Lea Verou.
Copywriter: Lucy Leiderman.
Idea & Concept: Smashing Media GmbH.

About This Book

Present across millions of websites and growing in popularity, JavaScript
is an essential and practical for all programmers, designers and coding
aficionados. Practical JavaScript Techniques offers expert instruction,
tips and methodologies relevant for all levels of knowledge. Learn
interactive CSS and jQuery techniques, how to take advantage of
JavaScript's versatile capabilities and even how to build JavaScript-
based gaming experiences. Whether you're perfecting Web design or
building jQuery plugins, this vital resource is a must-have.

TABLE OF CONTENTS
Imprint

Develop A One-Of-A-Kind CSS/JS-Based Game Portfolio
by Daniel Sternlicht

Five Useful Interactive CSS/jQuery Techniques Deconstructed
by Jon Raasch

Create An Animated Bar Graph With HTML, CSS And jQuery
by Derek Mack

A Beginner's Guide To jQuery-Based JSON API Clients
by Ben Howdle

How To Build A Real-Time Commenting System
by Phil Leggetter

The Developer's Guide To Conflict-Free JavaScript And CSS In
WordPress
by Peter Wilson
Optimizing Long Lists Of Yes/No Values With JavaScript
by Lea Verou

Building A Relationship Between CSS & JavaScript
by Tim Wright

About The Authors
Develop A One-Of-A-Kind CSS/JS-Based
Game Portfolio
BY DANIEL STERNLICHT ❧
A portfolio is a must-have for any designer or developer who
wants to stake their claim on the Web. It should be as unique
as possible, and with a bit of HTML, CSS and JavaScript, you
could have a one-of-a-kind portfolio that capably represents you
to potential clients. In this chapter, I'll show you how I created
my 2-D Web-based game portfolio.

1
The 2-D Web-based game portfolio of Daniel Sternlicht .

Before getting down to business, let's talk about portfolios.
Before getting down to business, let's talk about portfolios.

A portfolio is a great tool for Web designers and developers to show off
their skills. As with any project, spend some time learning to develop a
portfolio and doing a little research on what's going on in the Web design
industry, so that the portfolio presents you as an up to date, innovative
and inspiring person. All the while, keep in mind that going with the flow
isn't necessarily the best way to stand out from the crowd.

One last thing before we dive into the mystery of my Web-based game
portfolio. I use jQuery which has made my life much easier by speeding
up development and keeping my code clean and simple.

Now, let's get our hands dirty with some code.

The HTML

Let's warm up with a quick overview of some very basic HTML code. It's
a bit long, I know, but let's take it step by step.

<div id="wrapper">

<hgroup id="myInfo">
<h1>DDAANNIIEELL SSTTEERRNNLLIICCHHTT</h1>
<h2>WWeebb DDeessiiggnneerr,, FFrroonntt--EEnndd DDeevveellooppeerr</h2>
</hgroup>

<div id="startCave" class="cave"></div>
<div id="startCaveHole" class="caveHole"></div>
<div id="mainRoad" class="road"></div>
<div id="leftFence"></div>
<div id="rightFence"></div>

<div id="daniel"></div>

<div id="aboutRoad" class="road side"></div>
<div id="aboutHouse" class="house">
<div class="door"></div>
<div class="lightbox">......</div>
<div id="aboutSign" class="sign">
<span>AAbboouutt MMee</span>
</div>
……

……

<div id="rightTrees" class="trees"></div>
<div id="leftGrass" class="grass"></div>
<div id="endSea" class="sea"></div>
<div id="endBridge" class="bridge"></div>
<div id="boat" class="isMoored">
<div class="meSail"></div>
</div>

</div>

The HTML is not very complicated, and I could have used an HTML5
canvas2 element for this game, but I felt more comfortable using simple
HTML DOM elements.

Basically, we have the main ##wwrraappppeerr div, which contains the game's
elements, most of which are represented as div elements (I chose divs
because they are easy to manipulate).

Have a quick look at my game3. Can you detect what makes up the game
view?
The game view

We have roads, trees, fences, water, caves, houses and so on.

Back to our HTML. You'll find an element for each of these items, with
the relevant class and ID. Which brings us to the CSS.

The CSS

First of all, note that I prepared the HTML to follow the principles of
object-oriented CSS4 by determining global classes for styling, and not
using IDs as styling hooks. For example, I used the class ..rrooaadd on each
element that should look like a road. The CSS for the ..rrooaadd class would
be: .road {