Web Design with HTML and CSS

222

Interactivity on the web

Web Design with HTML and CSS Digital Classroom

Recall the fi rst exercise and the section of code you added that was labeled

document.write (the seventh line from the top).

<script type="text/javascript">

function show_prompt()

{

var name=prompt("Please enter your name","Chris P. Bacon");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

}

</script>

This section of code is referred to as a function and the behavior demonstrated on your

page is one of the simplest examples in JavaScript because there are very few objects in the

document. Most HTML documents have multiple objects, and it is possible to pass a text

value to another part of the page, or to submit it via a form.

JavaScript frameworks.

Imagine the following scenario: A designer is starting a new project and her client is

interested in adding an interactive photo gallery to the site. The designer also needs to create

a form that requires JavaScript validation. Since the designer is new to JavaScript, she fi nds

code she can use for the photo gallery and the form validation, and adds it to her page. The

designer later gets another job similar to the fi rst, and she decides to reuse the code from her

fi rst project, so the designer saves the JavaScript code into an external fi le.

The designer now has a reusable library of code she can add to future projects. However,

there are a few problems with this approach:

• The designer needs to organize, maintain, and update her library.


• The code the designer found could be poorly written.


• Poorly written JavaScript might contain twice as much code as necessary, might be
  diffi cult to modify, or might become slow and cause other problems if it was designed
  for simple projects and it’s used for larger projects.
  JavaScript frameworks are a better solution. There are several professionally written libraries
  available for use by designers. These libraries are large collections of functions built and tested
  by other designers and developers to form a common library. These collections of functions
  are available for immediate use, so if a designer needs to add an accordion menu (a menu that
  collapses and expands based on user events), he might readily fi nd the code he needs.
  You will now use jQuery, one of the most popular and accessible JavaScript frameworks for
  designers. jQuery is useful for designers because it uses CSS syntax to search and access the
  page, thereby decreasing the amount scripting language you need to learn.