11/2/15

IT 232 -- 11/2/15

Review Exercise

What is a self-referential join? How does it differ from a one-to-many relationship?
Ans: A self-referential join is a join where the foreign key refers to rows in the same table. See the EmployeeRoster Example.

Clickable Images

In the LinkIcons Example, clickable images were used instead of hyperlinks with text.

Here is an alternative. Substitute an image for the text the link_to tag:

<%= link_to(image_tag 'img.jpg'), controller_view_path, title: "Tooltip Text" %>

The title argument specifies the text that appears when the mouse hovers over the image.
Practice Problem: use these Hello and Goodbye images in the start page as links to the hello and goodbye pages in a non-scaffold-based controller

JavaScript

JavaScript is one of three essential technologies for client-side programming:
1. HTML specifies content.
2. CSS specifies presentation.
3. JavaScript specifies behavior.
JavaScript code is executed by the browser.
To make full use of JavaScript, one must understand the DOM (Document Object Model).

Consider this HTML page:

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta content="text/html" charset="utf-8">
  <title>Sample HTML Page</title>
</head>

<body>
  <h1>Sample HTML Page</h1>
  <p>This is the first paragraph.</p>
  <p>This is the <span style="color:red">second</span>.</p>
</body>
</html>

This is a vanilla HTML page, which has this DOM tree.
Look at the JQuery Examples 1 and 2.

jQuery

jQuery is the most popular JavaScript library in use today.
This library is designed to simplify client-side programming.
jQuery selectors are used to manipulate the DOM.
For example, the following line sets all paragraphs to italic:
```
$("p").css("font-style", "italic")
```
In the preceding line, $("p") is a jQuery selector, which selects all paragraphs (delimited by <p> and </p>) in the document.

Here are some more typical jQuery selectors:

Selector	Meaning
$("*")	All elements in the DOM.
$("h2")	All h2 tags elements.
p("#firstname")	The element with id="firstname".
$(".field")	All elements having class="field".
$("p:first")	The first paragraph.
$("p:last")	The last paragraph.

jQuery encourages the complete separation of HTML and JavaScript.

For jQuery to work with a standalone HTML file, include this script at the top:

<script type="text/javascript" 
  src="http:/code.jquery.com/jquery-1.5.min.js">
</script>

In Rails projects, jQuery is loaded automatically; the link to the JavaScript source code is not needed.
Look at the JQuery Examples 3 through 9.

CoffeeScript

CoffeeScript is a language inspired by Ruby, Python, and Haskell.
It simplifies JQuery and JavaScript code.
Some sources claim that CoffeeScript is dead or on its way out. This opinion is not universal.
Look at the JQuery Example 10.

More Examples

See these examples: HideTableCells HighlightFocused.

AJAX

AJAX means Asynchronous JavaScript and XML.
It is a set of client side web development technologies, which provide methods for exchanging data between the server and browser to allow for partial page refreshes, that are faster than reloading the entire page.
Look at the AjaxTime Example.