- JavaScript Concepts
- Open Window
- Change Property
- Creating a Cascading Menu
- Creating Fancy Rollovers
- Cookies and Code Snippet
- Debugging Your JavaScript
This chapter is from the book
This chapter is from the book
This chapter is from the book
Cookies and Code Snippets
One red flag that many people raise about the Web has always been the use of cookies. They are often cited as potential security or privacy breaches, but many sites still use them. Cookies can be quite useful in helping users remember their login names and in helping sites save personalization information on the user's computer rather than in a centralized database.
In this section, we'll show you how to use cookies, but you'll need to decide for yourself whether they're a good idea for your site.
To write a cookie, you need to use the readCookie and writeCookie functions that Dreamweaver provides in the Snippets panel.
The Snippets panel is a handy tool containing a fair number of useful JavaScript functions and fragments. They're quite easy to use, with a couple of caveats. You need to be sure to insert code snippets in Code view, and you need to add a <script> tag before you insert the snippets themselves.
To add JavaScript snippets to your page:
View your page in Code view.
If you are in Design view, the JavaScript code will be pasted in as text, not code (Figure 13.36)—and that won't do anyone any good.
Figure
13.36 You don't want to splatter code all over your page.From the menu bar, select Insert > Script Objects > Script.
The Script dialog box will appear (Figure 13.37).
Figure
13.37 We're not using this the way it was intended.Click OK.
What we just did probably seemed pointless, but when you insert a script snippet, Dreamweaver doesn't automatically surround it with a <script> tag, so unless you add the tag, the script won't work. We could have manually typed the tag, but we're lazy.
In the Snippets panel, expand the JavaScript Folder (Figure 13.38).
Figure
13.38 You may need to drill down a little to find the snippet you want to
insert.Still in the Snippets panel, expand the folder containing the snippet you wish to insert onto your page.
Double-click on the appropriate snippet. The snippet will be added to your page, inside the script tag (Figure 13.39).
Figure
13.39 Now there's code in the right place.
)
Figure
13.36 )
Figure
13.37 )
Figure
13.38 )
Figure
13.39 For more information on the Snippets panel, see the Built-in Tag Writing Shortcuts section of Chapter 11.
Now, on to cookies. We'll make a page on which the user can select a color, which gets written to a cookie, and then open a new page which gets its background color from that cookie.
To write a cookie:
Create a new HTML file.
In Code view, click at the very top of the document (Figure 13.40).
Figure
13.40 We'll add the code at the very beginning of the page.Follow the Steps 1-3 in the previous list to insert a <script> tag.
From the Cookies folder of the Snippets panel, insert Write Cookie.
From the menu bar, select Insert > Form to insert an empty form.
From the menu bar, choose Insert > Form Objects > List/Menu.
In the Property inspector, click the List Values button.
The List Values dialog box will appear (Figure 13.41).
Figure
13.41 Here's where you enter values for a list.Click the + (plus) button to add a new element, and in the Item Label column, type red.
In the Value column, enter red.
Repeat Steps 7 and 8 for blue and green.
Click OK to close the dialog box.
In the Initially Selected list box on the Property inspector, select one of the colors to be the default color (Figure 13.42).
Figure
13.42 You should set a default value for the menu. In the Property inspector, change the name of the menu to colormenu.
From the menu bar, choose Insert > Form Objects > Button to insert a button..
In the Property inspector, change the button's Label to Thank You.
In the Tag selector, select the <form> tag.
In the Property inspector, change the Action of the form to page2.html.
Select Default from the Property inspector's Method drop-down menu.
In Code view, find the HTML code for the button. It will look something like this:
<input name="thankyou" type=
"button" id="thankyou"
value="Thank You">Click in the code right after the value="Thank You" entry, and type the following code:
onClick="writeCookie('pagecolor',document.forms[0].colormenu.value,
'1');"It should look like Figure 13.43.This line of code writes a cookie called pagecolor, assigns it the value of whatever the user chose in the menu, and sets it to expire in one hour.
Figure
13.43 This is the code that calls the code that writes the cookie. Save the file as cookie.html.
)
Figure
13.40 )
Figure
13.41)
Figure
13.42)
Figure
13.43 That's all there is to the cookie-writing file. Now we'll create the file that reads the cookie and sets its background color from it.
To read a cookie:
Open a new HTML file.
In Code view, click at the very top of the document.
Following the instructions in To add JavaScript snippets to your page, earlier in this section, insert the Read Cookie snippet.
In Code view, find the opening <body> tag.
Directly after the <body> tag, type the following line of code (Figure 13.44):
<script language="JavaScript">
document.bgColor =
readCookie('pagecolor');</script>
Figure
13.44 Make sure this code is in the <body> section of the page.In Design view, add some text.
Save the file as page2.html.
Preview cookie.html (Figure 13.45). Click on the Thank You button. The next page should use the color you chose in the menu as its background color.
Figure
13.45 Here's the color selector page. We won't show you the next
page, because it'll just be gray in this book.
)
Figure
13.44 )
Figure
13.45