Review

Review of the Web Design Process

1. Identify the types of users you need to communicate with
2. Identify what each user type needs to be able to do
3. Organize your content semantically
4. Compose appropriate layouts for your content
5. Create visual hierarchies for your content with type
6. Apply design principles to emphasize relationships between elements
7. Create mood and enhance your visual hierarchies and element relationships using color
8. Breath life into your design with behavioral feedback
9. Test, rinse & repeat!

Introduction to Javascript

What is Javascript?

Javascript is dynamic programming language that most common web browsers can interpret. It is most often used to create dynamic web interfaces, but can also be used for server-side programming, or to develop desktop and mobile applications. Check out the Javascript Wikipedia entry for more details on its history, implementations and usage.

jQuery's Javascript 101 and W3School's Javascript Tutorial provide a good introductions to Javascript as well.

Adding Javascript to Our Pages

We can include Javascript in our pages in three ways:

• link external Javascript files
• embed Javascript directly in our page
• use it inline inside our HTML elements

The <script></script> Tag

To include external Javascript files or embed Javascript locally, we use the script tag:

<script>
...
</script>


Linking External Javascript Files

When using the script tag to include external javascript files, we use the src attribute to include to path to our Javascript file.

<script src="/path/to/my/javascript_file.js"></script>

Embedding Javascript

When embedding our Javascript locally, we simply write our javascript between the <script> tag and the </script> tag.

<script>
    /* here's my Javascript */
    var myVariable = 0;
    console.log(myVariable);
</script>

Inline Javascript

When using inline Javascript, you attach the javascript as an attribute to your target HTML element:

<a href="javascript:alert( 'Hello World' );">Click Me!</a>

Using Javascript

Variables

Variables Deck

Types

Data Types Deck

Type examples in jQuery documentation

Operators

Operators Deck

Operator examples in jQuery documentation

Conditionals

Conditionals Deck

Conditional examples in jQuery documentation

Loops

Loops Deck

Loop examples in jQuery documentation

Exercise

Create a simple HTML page and add Javascript using the three methods above:

1. Create an external Javascript file called "myscript.js" and include the line alert("My first linked Javascript!");
2. Link in your external Javascript file using the <script src="/path/to/my/javascript_file.js"></script> tag
3. Add some embedded Javascript using another <script> </script> tag and include the line alert("My first embedded Javascript!"); between them
4. Create a link using the <a href=""></a> and include the line javascript:alert("My first inline Javascript!"); inside the href attribute

Introduction to jQuery

What is jQuery?

jQuery is a Cross-Browser Javascript library that is designed to simplify using Javascript for common tasks including user interface enhancements, special effects, managing events, handling forms and more. For more information on jQuery and its background, checkout the jQuery Wikipedia entry.

Using jQuery

Adding jQuery to your project

To include jQuery in your project, you can either download it and link it in as you would your other Javascript files, or you can use jQuery's CDN:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Download jQuery

$( document ).ready()

$(document).ready() Deck

$( document ).ready() documentation

Selecting Elements

Selecting Deck

Selecting Elements with jQuery

Chaining Selections

Chaining Deck

Chaining jQuery Selections

CSS & Styling

CSS & Styling Deck

Styling & CSS with jQuery

Attributes

Attributes Deck

Manipulating HTML Element Attributes with jQuery

Introduction to jQuery Plugins

What is a jQuery Plugin?

jQuery Plugins are extensions to jQuery written and packaged by third party developers that provide some specific feature not covered by jQuery Core. If you're looking for a photo gallery feature, a parallax feature or many, many others, chances are, someone has made a jQuery Plugin for it.

Finding Plugins

You can find plugins in the jQuery Plugin Registry. They're organized by tag, so you can explore them based on the funtionality you're looking for.

Installing & Using Plugins

Every plugin has it's own installation requirements, but generally speak, you'll only need to link in the plugin's javascript file and possibly a stylesheet or two. Some plugins may require other plugins, so it's important to check out the documentation for any plugins you're considering using to see it's requirements and usage instructions.

Assignment 10

Reading

• Review the Javascript 101 section of the jQuery documentation.
• Review the Using jQuery Core section of the jQuery documentation.

Design

Differentiate External Link Behavior with jQuery

You can use jQuery to differentiate the behavior of any external links in your project by having them target new browser tabs instead of navigating away from your site in the current tab.

• Create a new HTML page on your TCNJ web account
• Link in jQuery
• Create 2 lists of links (one for internal links and one for external links
• Add a class to the external link anchor tags identifying them as "external"
• Use jQuery selectors to select all the external links (and only the external links) and attach the target attribute with a value of "_blank" to each*

*hint: use .attr("target","_blank");

Implement an Image Gallery jQuery Plugin in an HTML page

Head over the the jQuery Plugin Registry and find an Image Gallery Plugin.

• Create a new HTML page on your TCNJ web account
• Link in jQuery
• Follow the instuctions for the Image Gallery Plugin you chose and implement a simple image gallery on your page