Lesson 3: Elements and tags You are now ready to learn the essence of HTML: elements. Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag. "Tags"? Tags are labels you use to mark up the begining and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. HTML is all about elements. To learn HTML is to learn and use different tags. Can you show me some examples? Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".) Example 1: <em>Emphasised text.</em> Will look like this in the browser: Emphasised text.
Transcript
Lesson 3: Elements and tagsYou are now ready to learn the essence of HTML: elements.
Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.
"Tags"?Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
Can you show me some examples?Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".)
Example 1:
<em>Emphasised text.</em>
Will look like this in the browser:
Emphasised text.
The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.
Example 2:
<h1>This is a heading</h1><h2>This is a subheading</h2>
Will look like this in the browser:
This is a heading
This is a subheading
So, I always need an opening tag and a closing tag?As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.
Should tags be typed in uppercase or lowercase?Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.
Where do I put all these tags?You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.
If you continue to the next lesson in 10 minutes you will have made your first website.
Lesson 3: Elements and tagsYou are now ready to learn the essence of HTML: elements.
Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.
"Tags"?
Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
Can you show me some examples?Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".)
Example 1:
<em>Emphasised text.</em>
Will look like this in the browser:
Emphasised text.
The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.
Example 2:
<h1>This is a heading</h1><h2>This is a subheading</h2>
Will look like this in the browser:
This is a heading
This is a subheading
So, I always need an opening tag and a closing tag?As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.
Should tags be typed in uppercase or lowercase?Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.
Where do I put all these tags?You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.
If you continue to the next lesson in 10 minutes you will have made your first website.
Lesson 5: What have you learned so far?Always start with the basic template we made in the previous lesson:
<html> <head> <title></title> </head>
<body> </body>
</html>
In the head section, always write a title: <title>The title of your page</title>. Notice how the title will be shown in the upper left corner of your browser:
The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.
In the body section, you write the actual content of the page. You already know some of the most important elements:
<p>Is used for paragraphs.</p><em>Emphasis text.</em><h1>Heading</h1><h2>Subhead</h2><h3>Sub-subhead</h3>
Remember, the only way to learn HTML is by trial and error. But don't worry, there is no way you can destroy your computer or the Internet. So keep experimenting - that is the best way to gain experience.
What is that supposed to mean?Nobody becomes a good website creator by learning the examples in this tutorial. What you get in this tutorial is simply a basic understanding of the building blocks - to become good you must use the building blocks in new and creative ways.
So, get out in the deep water and stand on your own two feet... Okay, maybe not. But give it a go and experiment with what you have learned.
So what's next?
Try to create a few pages yourself. For instance, make a page with a title, a heading, some text, a subhead and some more text. It is perfectly okay to look in the tutorial while you make your first pages. But later, see if you can do it on your own - without looking.
Lesson 6: A few more elementsDid you manage to make a few pages on your own? If not, here is an example:
<html>
<head> <title>My website</title> </head>
<body> <h1>A Heading</h1> <p>text, text text, text</p> <h2>Subhead</h2> <p>text, text text, text</p> </body> </html>
Now what?Now it is time to learn seven new elements.
In the same way you emphasise the text by putting it between the openning tag <em> and the closing tag </em>, you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>.
Example 1:
<strong>Stronger emphasis.</strong>
Will look like this in the browser:
Stronger emphasis.
Likewise, you can make your text smaller using small:
Example 2:
<small>This should be in small.</small>
Will look like this in the browser:
This should be in small.
Can I use several elements at the same time?You can easily use several elements at the same time as long as you avoid overlapping elements. This is best illustrated by an example:
Example 3:
If you want to emphasise small text, it must be done like this:
<em><small>Emphasised small text</small></em>
And NOT like this:
<em><small>Emphasise small text</em></small>
The difference is that in the first example, we closed the tag we first opened last. This way we avoid confusing both ourselves and the browser.
More elements!As mentioned in Lesson 3 there are elements which are opened and closed in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels. An example of such a tag is <br /> which creates a forced line break:
Example 4:
Some text<br /> and some more text in a new line
Will look like this in the browser:
Some textand some more text in a new line
Notice that the tag is written as a contraction of an opening and closing tag with an empty space and a forward slash at the end: <br />.
Another element that is opened and closed in the same tag is <hr /> which is used to draw a horizontal line ("hr" stands for "horizontal rule"):
Example 5:
<hr />
Will look like this in the browser:
Examples of elements that needs both an opening tag and a closing tag - as most elements do - is ul, ol and li. These elements are used when you want to make lists.
ul is short for "unordered list" and inserts bullets for each list item. ol is short for "ordered list" and numbers each list item. To make items in the list use the li tag ("list item"). Confused? See the examples:
Example 7:
<ul> <li>A list item</li> <li>Another list item</li></ul>
will look like this in the browser:
A list item Another list item
Example 8:
<ol> <li>First list item</li> <li>Second list item</li>
</ol>
will look like this in the browser:
1. First list item2. Second list item
Phew! Is that all?That is all for now. Again, experiment and make your own pages using some of the seven new elements you learned in this lesson:
Lesson 7: AttributesYou can add attributes to a number of elements.
What is an attribute?As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example,<br /> informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute.
Example 1:
<h2 style="background-color:#ff0000;">My friendship with HTML</h2>
Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. The semicolon after the attribute is for separating different style commands. We will get back to that later.
What is the catch?There are many different attributes. The first one you will learn is style. With the style attribute you can add layout to your website. For instance a background colour:
Example 2:
<html> <head> </head>
<body style="background-color:#ff0000;"> </body>
</html>
will show a completely red page in the browser - go ahead and see for yourself. We will explain in greater detail how the colour system works in a few moments.
Note that some tags and attributes use US spelling i.e. color instead of colour. It is important that you are careful to use the same spelling as we use in the examples in this tutorial - otherwise, browsers will not be able to understand your codes. Also, don't forget to always close the inverted commas (quotation marks) after an attribute.
How did the page become red?In the above example, we asked for the background colour with the code "#ff0000". This is the colour code for red using so called hexadecimal numbers (HEX). Each colour has its own hexadecimal number. Here are some examples:
A hexadecimal colour code consists of # and six digits or letters. There are more than 1000 HEX codes and it is not easy to figure out which HEX code is tied to a specific colour. To make it easier we have made a chart of the 216 most commonly used colours: 216 Web Safe Colour Chart.
You can also use the English name for the most common colours (white, black, red, blue, green and yellow).
Enough about colours. Let's get back to the attributes.
Which elements can use attributes?Different attributes can be applied to most elements.
You will often use attributes in tags such as the body tag while you will rarely use attributes in, for example, a br tag since a line break normally is a line break without any parameters to adjust.
Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different element. And vice versa: some elements can only contain one kind of attribute while others can contain many.
It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide.
This tutorial will introduce you to the most important attributes.
Exactly what parts does an element consist of?Generally an elements consist of a start tag with or without one or more attributes, some content and an end tag. Simple as that. See the illustration below.
Lesson 8: LinksIn this lesson, you will learn how to make links between pages.
What do I need to make a link?
To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:
Example 1:<a href="http://www.html.net/">Here is a link to HTML.net</a>
Would look like this in the browser:
Here is a link to HTML.net
The element a stands for "anchor". And the attribute href is short for "hypertext reference", which specifies where the link leads to - typically an address on the internet or a file name.
In the above example the attribute href has the value "http://www.html.net", which is the full address of HTML.net and is called a URL (Uniform Resource Locator). Note that "http://" must always be included in URLs. The sentence "Here is a link to HTML.net" is the text that is shown in the browser as the link. Remember to close the element with an </a>.
What about links between my own pages?If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:
Example 2:<a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:
Example 3:<a href="subfolder/page2.htm">Click here to go to page 2</a>
The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:
"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".
Did you understand the system? Alternatively, you can always type the complete address for the file (URL).
What about internal links within a page?You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".
Use the id attribute to mark the element to which you want to link. For example:
<h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example:
<a href="#heading1">Link to heading 1</a>
All will become clear with an example:
Example 5:<html> <head> </head>
<body>
<p><a href="#heading1">Link to heading 1</a></p><p><a href="#heading2">Link to heading 2</a></p>
<h1 id="heading1">heading 1</h1><p>Text text text text</p>
<h1 id="heading2">heading 2</h1><p>Text text text text</p>
</body>
</html>
will look like this in the browser (click on the two links):
Link to heading 1
Link to heading 2
Heading 1Text text text text
Heading 2Text text text text
(Note: An id attribut must start with a letter)
Can I link to anything else?You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document:
Example 6:<a href="mailto:[email protected]">Send an e-mail to nobody at
HTML.net</a>
will look like this in the browser:
Send an e-mail to nobody at HTML.net
The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto: followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. Please note that this function will only work if there is an e-mail program installed on your computer. Give it a try!
Are there any other attributes I should know of?To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:
Example 7:<a href="http://www.html.net/" title="Visit HTML.net and learn
HTML">HTML.net</a>
Would look like this in the browser:
HTML.net
The title attribute is used to type a short description of the link. If you - without clicking - place the cursor over the link, you will see the text "Visit HTML.net and learn HTML" appears.
Lesson 9: ImagesWouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page?
That sounds like a bit of a challenge...Maybe, but in fact it is pretty easy to do. All you need is an element:
All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.
"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:
GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.
Where do I get my images from?To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.
Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or
Macromedia Fireworks, which are three of the best image editing programs currently on the market.
However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program IrfanView which is so-called freeware and therefore costs nothing.
Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:
1. Right-click on an image on any image on the Internet.2. Choose "Save picture as..." in the menu that appears.3. Choose a location for the image on your computer and press "Save".
Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):
Now you can insert the image into one of your own pages. Try it yourself.
Is that all I need to know about images?There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:
will look like this in the browser (try clicking on the image):
Are there any other attributes I should know about?You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:
Example 5:
<img src="logo.gif" alt="HTML.net logo" />
Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.
The title attribute can be used to add information to the image:
Example 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.
If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:
Example 8:
<img src="logo.gif" width="32px" height="32px" />
will look like this in the browser:
However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by
using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.
That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.
That's enough about David Hasselhoff and images for now.
Lesson 10: TablesTables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.
Is it difficult?Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Example 1:
<table> <tr>
<td>Cell 1</td><td>Cell 2</td>
</tr> <tr>
<td>Cell 3</td><td>Cell 4</td>
</tr></table>
Will look like this in the browser:
Cell 1 Cell 2
Cell 3 Cell 4
What's the difference between <tr> and <td>?As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:
The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
<tr> stands for "table row" and starts and ends horizontal rows. Still logical. <td> is short for "table data". This tag starts and ends each cell in the rows of your
table. All simple and logical.
Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
Cell 1 Cell 2
Cell 3 Cell 4
Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.
In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.
Are there any attributes?Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:
Example 3:
<table border="1"> <tr>
<td>Cell 1</td><td>Cell 2</td>
</tr> <tr>
<td>Cell 3</td><td>Cell 4</td>
</tr></table>
Will look like this in the browser:
Cell 1 Cell 2
Cell 3 Cell 4
The thickness of the border is specified in pixels (See lesson 9)
As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:
Example 4:
<table border="1" width="30%">
This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.
More attributes?There are lots of attributes for tables. Here are two more:
align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.
Example 5:
<td align="right" valign="top">Cell 1</td>
What can I insert in my tables?Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.
In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.
Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.
Lesson 11: More about tablesThe title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.
What is left then?The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
Example 1:
<table border="1"> <tr>
<td colspan="3">Cell 1</td> </tr> <tr>
<td>Cell 2</td><td>Cell 3</td><td>Cell 4</td>
</tr></table>
Will look like this in the browser:
Cell 1
Cell 2 Cell 3 Cell 4
By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been
necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
Example 2:
<table border="1"> <tr>
<td colspan="2">Cell 1</td><td>Cell 2</td>
</tr> <tr>
<td>Cell 3</td><td>Cell 4</td><td>Cell 5</td>
</tr></table>
Will look like this in the browser:
Cell 1 Cell 2
Cell 3 Cell 4 Cell 5
What about rowspan?As you might already have guessed, rowspan specifies how many rows a cell should span over:
Example 3:
<table border="1"> <tr>
<td rowspan="3">Cell 1</td><td>Cell 2</td>
</tr> <tr>
<td>Cell 3</td> </tr> <tr>
<td>Cell 4</td> </tr></table>
Will look like this in the browser:
Cell 1
Cell 2
Cell 3
Cell 4
In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.
Lesson 12: Layout (CSS)Wouldn't be great if you could give your pages the layout they deserve?
Sure, but how?To give your website layout use Cascading Style Sheets (CSS). In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from scratch in our CSS tutorial. So please consider this lesson only as an appetizer.
CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
As shown in Lesson 7, CSS can be added with the style attribute. For example, you can set the font type and size on a paragraph:
Example 1:
<p style="font-size:20px;">This is typed in size 20px</p><p style="font-family:courier;">This is typed in Courier</p>
<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>
Will look like this in the browser:
This is typed in size 20px
This is typed in Courier
This is typed in Courier size 20px
In the example above we use the style attribute to specify the type of font to be used (with the command font-family) and the font size (with the command font-size). Notice how in the last paragraph we set both the font type and size with a separating semicolon.
It seems like a lot of work?One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:
Example 2:
<html>
<head> <title>My first CSS page</title>
<style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body>
</html>
Show example
In the example above CSS has been inserted in the head section and therefore applies to the entire page. To do this, just use the tag <style type="text/css"> which tells the browser that you are typing CSS.
In the example all headings on the page will be in Arial in size 30px. All subheads will in Courier size 15. And all text in normal paragraphs will be in Times New Roman size 8.
Another option is to type the CSS in a separate document. With a separate CSS document you can manage the layout of many pages all at once. Pretty smart if you want to change the font type or size on a large website with hundreds or thousands of pages. We won't go into that now but you can learn it later in our CSS tutorial.
What else can I do with CSS?CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with:
<p style="color:green;">Green text</p>
<h1 style="background-color: blue;">Heading on blue background</h1>
Try inserting the examples in some of your pages - both as shown above and also as CSS inserted in the head section.
Is CSS nothing but colours and font types?Besides adding layout such as colors, font types etc., CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
Example 3:
<p style="padding:25px;border:1px solid red;">I love CSS</p>
Will look like this in the browser:
I love CSS
With the property float an element can either be floated to the right or to the left. The following example illustrates the principle:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
doloremagna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
Will look like this in the browser:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
In the example, one element (the image) floats to the left and the other element (the text) fills the hole.
With the property position, you can place an element exactly where you want it in your page:
In the example the image is placed 50 pixels from the bottom and 10 pixels from the right in the browser. But you can place it exactly where you want it. Give it a try. Pretty easy and pretty cool, eh?
Cool, sure. But easy?You do not learn CSS in 10 minutes. And as mentioned above, this lesson is only meant as a brief introduction. Later you will learn much more in ourCSS Tutorial.
For now, concentrate on HTML, and move on to the next lesson where you will learn how to get your website out on the Internet so the whole world can see it!
Lesson 13: Uploading pagesUntil now, only you have had the satisfaction of viewing your pages. Now it is time for the rest of the world to see your masterpieces.
Is the world ready for that?The world is ready - you soon will be too. To get your website on the internet, you just need some server space and a free FTP program.
If you have Internet access, you might already have some free server space for your website. Your server space will then probably be called something like http://home.provider.com/~usernumber. But you might need to activate it first. Read more about this in the papers from your Internet provider or on their support pages.
Another option is to get some free server space on the Internet. In the same way that you set up an e-mail account (at for example Hotmail), you can register for free server space on the Internet. Several companies offer such a service - among them 000webhost.com (click "Order Now" under "Free Hosting") - it will only take a couple of minutes to register.
To have access to the server, you need to know the "Host Name" (For example, ftp.htmlnet.site50.net) and have your username and password ready.
Is that all I need?To access the server and upload your pages, you also need an FTP program. FTP is short for File Transfer Protocol. A FTP program is used to connect two computers over the Internet so that you can transfer files from your computer to another computer (the server). You might not have such a program yet, but fortunately, this can be downloaded for free.
There are many different FTP programs. One of the better is FileZilla, which is entirely free. So now you can download FileZilla atfilezilla.sourceforge.net.
And how do I upload the pages?
Described below is how you upload your pages to a free account at 000webhost.com with FileZilla. But the procedure is, more or less, the same for all providers and FTP programs.
Open the FTP program while connected to the Internet. Insert "Host Name" ("ftp.htmlnet.site50.net" under "Address"), username (under "User") and password (under "Password") and click "Connect". You should now have access to the server. In one side of the program you can see the contents of your computer ("Local Site"), and in the other side, you can see the content of the server ("Remote Site"):
Find your HTML documents and images on your computer (on the "Local site") and transfer them to the server (the "Remote site") by double clicking on them. Now the whole world can see them! (For example, at the address http://htmlnet.site50.net/page1.htm).
Name one of the pages "index.htm" (or "index.html") and it will automatically become the start page. i.e. if you type http://htmlnet.site50.net (without any filename) you will actually open http://htmlnet.site50.net/index.htm.
In the long run, it might be a good idea to purchase your own domain (for example www.your-name.com or www.your-name.net) and avoid the long and complicated addresses you are being assigned by your Internet provider or from providers of free server space. You can find and purchase domains at for example Speednames or NetworkSolutions.
Lesson 14: Web standards and validationIn this lesson, you will get a little more theoretical knowledge on HTML.
What more is there to know about HTML?HTML can be coded in many different ways. And browsers can read HTML in just as many ways. You could say that HTML has many dialects. That is why some websites look different in different browsers.
There have been attempts to make a common standard of HTML through the World Wide Web Consortium (W3C) founded by Tim Berners-Lee (yep! the great guy who invented HTML). But it has been a long and tough road.
In the old days - when browsers where something you had to pay for - Netscape was the dominate browser. Back then, the most supported HTML standard where called 2.0 and later 3.2. But with a market share of over 90% Netscape did not have to - and did not - care much about common standards. On the contrary, Netscape invented their own strange elements, which did not function in other browsers.
For many years Microsoft almost completely ignored the Internet. After a while they took up the competition with Netscape and introduced a browser. The first versions of Microsoft's browser, Internet Explorer, were not any better than Netscape at supporting the HTML standards. But Microsoft chose to give away their browser for free (always a popular thing to do) and Internet Explorer soon became the most popular browser.
From version 4 and 5 Microsoft aimed to support more and more of the HTML standards from W3C. Netscape did not manage to develop a new version of their browser and continued to distribute the outdated version 4.
The rest is history. Today the HTML standards are called 4.01 and XHTML. Now it is Internet Explorer that has a market share of over 90%. Internet Explorer still has its own strange elements but it also supports the W3C HTML standards. And so do all of the other browsers, such as Mozilla, Opera and Netscape.
So, when you code HTML following the W3C standards, you make websites that can be seen in all browsers - both now and in the future. And luckily, what you have learned in this tutorial is a new and stricter and cleaner version of HTML called XHTML.
How do I tell which version is used?With all the different types of HTML you need to tell the browser which "dialect" your HTML is in, in your case XHTML. To do that, you use a Document Type Declaration. The Document Type Declaration is always written in the top of the document:
Example 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Besides the Document Type Declaration (the first line in the example above), which tells the browser that you want to write XHTML, you also need to insert some extra information in the html tag with the two attributes xmlns and lang.
xmlns is short for "XML-Name-Space" and should always have the value http://www.w3.org/1999/xhtml. That is all you need to know. But if you have a big hunger for complicated knowledge you can read more about namespaces on W3C's website.
In the lang attribute you state which language the document is written in. For this the ISO 639 standard is used, which lists codes for all the languages in the world. In the example above the language are set to English ("en").
With a DTD the browser knows exactly how it should read and show your HTML. Hence, use the example above as template for all your future HTML documents.
The DTD is also important when you want to validate your pages.
Validate? Why and how should I do that?Insert a DTD in your pages and you can always check your HTML for errors by using W3C's free validator.
To test this out, make a page and upload it to the Internet. Now, go to validator.w3.org and type the address (the URL) of your page and validate it. If your HTML is correct you will get a congratulations message. Otherwise you will get an error report telling you exactly what and where you have done something wrong. Make some errors on purpose to see what happens.
The validator is not just helpful to locate an error. Some browsers try to compensate for lack of skills among web developers by trying to fix errors in the HTML and showing the page as they guess it should look. With such browsers, you might never see an error in your own browser. However, other browsers might guess differently or not show the page at all. The validator can help you find errors you did not even know existed.
Always validate your pages to be sure they will always be shown correctly.
Congratulations, you have now reached the final lesson.
So now I know everything?You have learned a lot and you are now capable of making your own websites! However, what you have learned are the basics and there is still a lot more to be mastered. But you now have a good foundation from which to build on.
In this last lesson, you will get some final tips:
First, it is a good idea to maintain order and structure in your HTML documents. By posting well arranged documents you will not only show others your mastery of HTML but will also make it considerably easier for yourself to keep an overview.
Stick to the standards and validate your pages. This cannot be stressed enough: Always write clean XHTML, use a DTD and validate your pages on validator.w3c.org.
Give your page contents. Remember that HTML is a tool, which enables you to present information on the Internet, so make sure that there is information to present. Pretty pages may look nice but most people use the Internet to find information.
Avoid overloading your pages with heavy images and other fancy stuff you have found on the Internet. It slows down the loading of the page and could be confusing for visitors. Pages that take more than 20 seconds to load can lose up to 50% of their visitors.
Remember to add your website to search engines/directories so people other than your closest family can find and enjoy it. On the front page of all search engines, you will find a link to add new pages (The most important is Google, but there are also others like DMOZ, Yahoo, AltaVista,AlltheWeb and Lycos).
In this tutorial, you have learned to use Notepad, which is a simple and very easy to use editor, but perhaps you will find it helpful to use a more advanced editor which gives a better overview and more possibilities. You can find a summary and reviews of different editors on Download.com.
How do I learn more?First of all, it is important that you continue to work and experiment with the things you have learned in this tutorial. Study other people's websites and if you find something you like see how it was made with "View Source" (Click "View" in the menu in your browser and choose "Source").
Search the Internet for examples and articles on HTML. There are lots of websites with great contents on HTML.
Read and ask questions in the Forums. This is where you meet the real experts from whom you can learn a lot.
Last, but not least, you should - whenever you feel ready - continue learning CSS in our CSS Tutorial.
The only thing left is to wish you hours of fun with your new friend, HTML.
See you on the Internet :-)
Lesson 1: What is CSS?Maybe you already heard about CSS without really knowing what it is. In this lesson you will learn more about what CSS is and what it can do for you.
CSS is an acronym for Cascading Style Sheets.
What can I do with CSS?CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.
After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.
What is the difference between CSS and HTML?HTML is used to structure content. CSS is used for formatting structured content.
Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon.
Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.
As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout - and not structure.
This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites.
CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.
Which benefits will CSS give me?CSS was a revolution in the world of web design. The concrete benefits of CSS include:
control layout of many documents from one single style sheet; more precise control of layout; apply different layout to different media-types (screen, print, etc.); numerous advanced and sophisticated techniques.
In the next lesson we take a closer look at how CSS actually works and how you get started.
Lesson 2: How does CSS work?In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.
Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example.
The basic CSS syntaxLet's say we want a nice red color as the background of a webpage:
Using HTML we could have done it like this:
<body bgcolor="#FF0000">
With CSS the same result can be achieved like this:
body {background-color: #FF0000;}
As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model:
But where do you put the CSS code? This is exactly what we will go over now.
Applying CSS to an HTML documentThere are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external.
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:
Another way is to include the CSS codes using the HTML tag <style>. For example like this:
<html> <head>
<title>Example</title>
<style type="text/css"> body {background-color: #FF0000;}</style>
</head> <body>
<p>This is a red page</p> </body></html>
Method 3: External (link to a style sheet)
The recommended method is to link to a so-called external style sheet. Throughout this tutorial we will use this method in all our examples.
An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.
For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this:
The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code:
This link tells the browser that it should use the layout from the CSS file when displaying the HTML file. The really smart thing is that several HTML documents can be linked to the same style
sheet. In other words, one CSS file can be used to control the layout of many HTML documents.
This technique can save you a lot of work. If you, for example, would like to change the background color of a website with 100 pages, a style sheet can save you from having to manually change all 100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet.
Let's put what we just learned into practice.
Try it yourselfOpen Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file - with the following contents:
Now place the two files in the same folder. Remember to save the files with the right extensions (respectively ".htm" and ".css")
Open default.htm with your browser and see how the page has a red background. Congratulations! You have made your first style sheet!
Hurry on to the next lesson where we will take a look at some of the properties in CSS.
Lesson 3: Colors and backgroundsIn this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained:
color background-color background-image background-repeat background-attachment background-position background
Foreground color: the 'color' propertyThe color property describes the foreground color of an element.
For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.
h1 {color: #ff0000;
}
Show example
Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgb-values (rgb(255,0,0)).
The 'background-color' propertyThe background-color property describes the background color of elements.
The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element.
You can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to<body> and <h1> elements.
body {background-color: #FFCC66;
}
h1 {color: #990000;background-color: #FC9804;
}
Show example
Notice that we applied two properties to <h1> by dividing them by a semicolon.
Background images [background-image]The CSS property background-image is used to insert a background image.
As an example of a background image, we use the butterfly below. You can download the image so you can use it on your own computer (right click the image and choose "save image as"), or you can use another image as you see fit.
To insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.
body {background-color: #FFCC66;background-image: url("butterfly.gif");
}
h1 {color: #990000;background-color: #FC9804;
}
Show example
NB: Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif") or even on the Internet indicating the full address of the file:url("http://www.html.net/butterfly.gif").
Repeat background image [background-repeat]In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The propertybackground-repeat controls this behaviour.
The table below outlines the four different values for background-repeat.
Value Description
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated
For example, to avoid repetition of a background image the code should look like this:
body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;
}
h1 {color: #990000;background-color: #FC9804;
}
Show example
Lock background image [background-attachment]The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.
The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.
Value Description
Background-attachment: scroll The image scrolls with the page - unlocked
Background-attachment: fixed The image is locked
For example, the code below will fix the background image.
body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;
}
h1 {color: #990000;background-color: #FC9804;
}
Show example
Place background image [background-position]By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.
There are numerous ways to set the values of background-position. However, all of them are formatted as a set of coordinates. For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window.
The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The model below illustrates the system:
The table below gives some examples.
Value Description
background-position: 2cm 2cm The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25% The image is centrally positioned and one fourth down the page
background-position: top right The image is positioned in the top-right corner of the page
The code example below positions the background image in the bottom right corner:
body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;
}
h1 {color: #990000;background-color: #FC9804;
}
Show example
Compiling [background]The property background is a short hand for all the background properties listed in this lesson.
With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.
If a property is left out, it will automatically be set to its default value. For example, if background-attachment and background-position are taken out of the example:
These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.
SummaryIn this lesson, you have already learned new techniques that would not be possible using HTML. The fun continues in the next lesson which examines the broad range of possibilities when using CSS to describe fonts.
Lesson 4: FontsIn this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:
font-family font-style font-variant font-weight font-size font
Font family [font-family]The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.
There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below.
Family-nameExamples of a family-name (often known as "font") can e.g. be "Arial", "Times New Roman" or "Tahoma".
Generic familyGeneric families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without "feet".
The difference can also be illustrated like this:
When you list fonts for your web site, you naturally start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.
An example of a prioritized list of fonts could look like this:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Show example
Headlines marked with <h1> will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used to show the headlines.
Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.
Font style [font-style]The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.
Font variant [font-variant]The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Confused? Take a look at these examples:
If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead.
Font weight [font-weight]The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font.
Font size [font-size]The size of a font is set by the property font-size.
There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include:
There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality. To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'.
Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet Explorer. Try it yourself - neat feature, don't you think?
Compiling [font]Using the font short hand property it is possible to cover all the different font properties in one single property.
For example, imagine these four lines of code used to describe font-properties for <p>:
p {font-style: italic;font-weight: bold;font-size: 30px;
font-family: arial, sans-serif;}
Using the short hand property, the code can be simplified:
SummaryYou have now learned about some of the possibilities related to fonts. Remember that one of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. CSS saves time and makes your life easier. In the next lesson we will look at text.
Lesson 5: TextFormatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described:
Text indention [text-indent]The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:
p {text-indent: 30px;
}
Show example
Text alignment [text-align]The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right orcentred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines.
In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified:
th {text-align: right;
}
td {text-align: center;
}
p {text-align: justify;
}
Show example
Text decoration [text-decoration]The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.
h1 {text-decoration: underline;
}
h2 {text-decoration: overline;
}
h3 {text-decoration: line-through;
}
Show example
Letter space [letter-spacing]The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.
h1 {letter-spacing: 6px;
}
p {letter-spacing: 3px;
}
Show example
Text transformation [text-transform]The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.
An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:
capitalizeCapitalizes the first letter of each word. For example: "john doe" will be "John Doe".
uppercaseConverts all letters to uppercase. For example: "john doe" will be "JOHN DOE".
lowercaseConverts all letters to lowercase. For example: "JOHN DOE" will be "john doe".
noneNo transformations - the text is presented as it appears in the HTML code.
As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.
Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.
h1 {text-transform: uppercase;
}
li {text-transform: capitalize;
}
Show example
SummaryIn the last three lessons you have already learned several CSS properties, but there is much more to CSS. In the next lesson we will take a look at links.
Lesson 6: LinksYou can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes.
What is a pseudo-class?A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.
Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore use a as a selector in CSS:
a {color: blue;
}
A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links.
a:link {color: blue;
}
a:visited {color: red;
}
Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link.
We will now go through each of the four pseudo-classes with examples and further explanation.
Pseudo-class: link
The pseudo-class :link is used for links leading to pages that the user has not visited.
In the code example below, unvisited links will be light blue.
a:link {color: #6699CC;
}
Show example
Pseudo-class: visited
The pseudo-class :visited is used for links leading to pages that the user has visited. For example, the code below would make all visited links dark purple:
a:visited {color: #660099;
}
Show example
Pseudo-class: active
The pseudo-class :active is used for links that are active.
This example gives active links a yellow background color:
The pseudo-class :hover is used when the mouse pointer hovers over a link.
This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this:
a:hover {color: orange;font-style: italic;
}
Show example
Example 1: Effect when the cursor is over a linkIt is particular popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class:hover.
Example 1a: Spacing between letters
As you will remember from lesson 5, the spacing between letters can be adjusted using the property letter-spacing. This can be applied to links for a special effect:
In lesson 5 we looked at the property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links:
The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects - give it a try!
Example 2: Remove underline of linksA frequently asked question is how to remove the underlining of links?
You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. People are used to blue underlined links on web pages and know that they can click on them. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.
That said, it is very simple to remove the underlining of links. As you will recall from lesson 5, the property text-decoration can be used to determine whether text is underlined or not. To remove underlining, simply set the value of text-decoration to none.
a {text-decoration:none;
}
Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.
SummaryIn this lesson you have learned about pseudo-classes, using some of the properties from the previous lessons. This should give you an idea of some the possibilities CSS provides.
In the next lesson we will teach you how to define properties for specific elements and groups of elements.
Lesson 7: Identification and grouping of elements (class and id)Sometimes you want to apply a special style to a particular element or a particular group of elements. In this lesson, we will take a closer look at how you can use class and id to specify properties for selected elements.
How can you color one particular headline differently than the other headlines on your website? How can you group your links into different categories and give each category a special style? These are just examples of questions we will answer in this lesson.
Grouping elements with classLet's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this:
<p>Grapes for white wine:</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li>
<p>Grapes for red wine:</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul>
Show example
Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.
To achieve this, we divide the links into two categories. This is done by assigning a class to each link using the attribute class.
Let us try to specify some classes in the example above:
<p>Grapes for white wine:</p><ul><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ch.htm" class="whitewine">Chardonnay</a></li><li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li></ul>
<p>Grapes for red wine:</p><ul><li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li></ul>
We can hereafter define special properties for links belonging to whitewine and redwine, respectively.
a {color: blue;
}
a.whitewine {color: #FFBB00;
}
a.redwine {color: #800000;
}
Show example
As shown in the example you can define the properties for elements which belong to a certain class by using .classname in the style sheet of the document.
Identification of element using idIn addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.
What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:
Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:
#c1-2 {color: red;
}
Show example
As shown in the example above you can define the properties in a specific element by using #id in the stylesheet of the document.
SummaryIn this lesson we have learned that through the use of the selectors, class and id, you are able to specify properties for specific elements.
In the next lesson, we will take a closer look at two HTML-elements which is widely used in connection with CSS: <span> and <div>.
Lesson 8: Grouping of elements (span and div)The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.
In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.
Grouping with <span> Grouping with <div>
Grouping with <span>The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.
An example of this could be this Benjamin Franklin quotation:
<p>Early to bed and early to risemakes a man healthy, wealthy and wise.</p>
Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:
<p>Early to bed and early to risemakes a man <span class="benefit">healthy</span>,<span class="benefit">wealthy</span>and <span class="benefit">wise</span>.</p>
The CSS belonging to it:
span.benefit {color:red;
}
Show example
Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.
Grouping with <div>Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.
Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:
<div id="democrats"><ul><li>Franklin D. Roosevelt</li><li>Harry S. Truman</li><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li></ul></div>
<div id="republicans"><ul><li>Dwight D. Eisenhower</li><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li></ul></div>
And in our style sheet, we can utilize the grouping in the exact same way as above:
#democrats {background:blue;
}
#republicans {background:red;
}
Show example
In the examples above, we have only used <div> and <span> on very simple things such as text and background colors. Both elements have the potential to do much more advanced things. However this will not be introduced in this lesson. We will look into these later in this tutorial.
SummaryIn lesson 7 and 8, you have learned about the selectors id and class and the elements span and div.
You should now be able to group and identify, more or less, all parts of a document, which is a big step in the direction of mastering CSS. In lesson 9 we will introduce you to the box model.
Lesson 9: The box modelThe box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:
The box model in CSS
The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):
<h1>Article 1:</h1>
<p>All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in aspirit of brotherhood</p>
By adding some color and font-information the example could be presented as follows:
The example contains two elements: <h1> and <p>. The box model for the two elements can be illustrated as follows:
Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.
<% '
The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:
''
Lesson 10: The box model - margin & padding
'
Lesson 11: The box model - border
''
When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.
%>
SummaryIn this lesson you have been introduced to the box model. In the following three lesson we will take a closer look at how to create and control elements in the box model.
Lesson 10: Margin and paddingIn the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.
Set the margin in an element Set the padding in an element
Set the margin in an elementAn element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.
As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.
The CSS code for this would look as follow:
body {margin-top: 100px;margin-right: 40px;
margin-bottom: 10px;margin-left: 70px;
}
Or you could choose a more elegant compilation:
body {margin: 100px 40px 10px 70px;
}
Show example
You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:
body {margin: 100px 40px 10px 70px;
}
p {margin: 5px 50px 5px 50px;
}
Show example
Set padding in an elementPadding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.
The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:
h1 {background: yellow;
}
h2 {background: orange;
}
Show example
By defining padding for the headlines, you change how much filling there will be around the text in each headline:
h1 {background: yellow;padding: 20px 20px 20px 80px;
}
h2 {background: orange;padding-left:120px;
}
Show example
SummaryYou are now on your way to master the box model in CSS. In the next lesson, we will take a closer look at how to set borders in different colors and how to shape your elements.
Lesson 11: BordersBorders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.
border-width border-color border-style border
The width of borders [border-width]The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:
The color of borders [border-color]
The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .
Types of borders [border-style]There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.
The values none or hidden can be used if you do not want any border.
Examples of defining bordersThe three properties described above can be put together by each element and thereby produce different borders. To illustrate this, we will take a look at a document where we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty but it illustrates some of the many possibilities:
Compilation [border]As it is also the case for many other properties, you can compile many properties into one using border. Let us take a look at an example:
p {border-width: 1px;border-style: solid;border-color: blue;
}
Can be compiled into:
p {border: 1px solid blue;
}
SummaryIn this lesson you have learned about the endless options CSS gives you when using borders in your pages.
In the next lesson, we will look at how you define the dimensions in the box model - height and width.
Lesson 12: Height and widthUp until now, we have not cared much about the dimensions of the elements we have worked with. In this lesson, we will take a look at how you easily can define the height and width of an element.
width height
Setting the width [width]With the width-property, you can define a certain width of an element.
The simple example below provides us with a box wherein text can be typed:
In the example above notice how the height of the box is set by the content of the box. You can affect the height of an element with the property height. As an example let us try to make the box in the example 500px high:
SummaryLesson 9, 10, 11 and 12 have given you an introduction to the box model in CSS. As you can probably see, the box model gives you many new options. You might have been using tables in HTML to create your layouts until now, but with CSS and the box model you should now be able to achieve elegant layouts more precisely and in accordance with the recommendations of W3C.
Lesson 13: Floating elements (floats)An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle:
If we for example would like to have a text wrapping around a picture, the result would be like this:
How is it done?The HTML code for the example above, look as follows:
<p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture and thereafter set the property float to left:
#picture {float:left;width: 100px;
}
Show example
Another example: columns
Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML-code with<div> as follows:
<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt...</p>
</div>
<div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3"><p>nam nihil esset in nostra potestate si res ita se haberet...</p>
</div>
Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by defining the property float:
#column1 {float:left;width: 33%;
}
#column2 {float:left;width: 33%;
}
#column3 {float:left;width: 33%;
}
Show example
float can be set as either left, right or none.
The property clearThe clear property is used to control how the subsequent elements of floated elements in a document shall behave.
By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates.
The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.
<p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
To avoid the text from floating up next to the picture, we can add the following to our CSS:
#picture {float:left;width: 100px;
}
.floatstop {clear:both;
}
Show example
SummaryFloats are useful in many situations and will often be used together with positioning. In the next lesson we will take a closer look at how to position a box, either relative or absolute.
Lesson 14: Positioning of elementsWith CSS positioning, you can place an element exactly where you want it on your page. Together with floats (see lesson 13), positioning gives you many possibilities to create an advanced and precise layout.
The following will be discussed in this lesson:
The principle behind CSS positioning Absolute positioning Relative positioning
The principle behind CSS positioningImagine a browser window as a system of coordinates:
The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates.
Let's say we want to position a headline. By using the box model (see lesson 9) the headline will appear as follows:
If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS:
h1 {position:absolute;top: 100px;left: 200px;
}
The result will be as follows:
As you can see, positioning with CSS is a very precise technique to place elements. It is much easier than trying to use tables, transparent images or anything else.
Absolute positioningAn element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:
Relative positioningTo position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on the page. Notice how the pictures leave empty spaces at their original positions in the document:
SummaryIn the previous two lessons, you learned how to float and position elements. These two methods give you many opportunities to construct your pages without having to use some of the old-fashioned methods with tables and transparent images in HTML. Use CSS instead. It is more precise, gives you more advantages, and it is also far easier to maintain.
Lesson 15: Layer on layer with z-index (Layers)CSS operates in three dimensions - height, width and depth. We have seen the first two dimensions in previous lessons. In this lesson, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.
Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:
In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. The important thing is the chronological sequence of the numbers (the order).
The code in the card example could look like this:
The method is relatively simple but the possibilities are several. You can place images on text or text above text etc.
SummaryLayers can be used in many situations. For example, try to use z-index to create effects in headlines instead of creating these as graphics. For one thing, it is faster to load text and for another, it provides a potentially better ranking in search engines.
Lesson 16: Web-standards and validationW3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others). Microsoft, The Mozilla Foundation and many others are a part of W3C and agree upon the future developments of the standards.
If you have been working just a bit with web design, you probably know that there can be a big differences in how a webpage is presented across different browsers. It can be very frustrating and time-consuming to create a webpage which can be viewed in Mozilla, Internet Explorer, Opera and all the rest of the existing browsers.
The idea of having standards is to agree upon a common denominator on how to use web technologies. This means that by observing the standards, a webdeveloper has a certainty that what he or she does will work in a more appropriate manner across different platforms. We therefore recommend that you back up the work carried out by the W3C and validate your CSS in order to observe the standard.
CSS validatorTo make it easier to observe the CSS standard, W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validate.
To make it easier for you to validate your stylesheet, you can do it directly from this webpage. Simply replace the URL with the URL of your stylesheet below and click to validate. You will then be informed by the W3C site if there are any errors found.
If the validator does not find any errors; this picture will be shown, which you can put on your website to illustrate that you are using validated coding:
The validator can also be found at this link: http://jigsaw.w3.org/css-validator/
Lesson 1: What is PHPWhenever anyone is learning PHP, the most common questions that first come up are: What is PHP? And how does it work?
It is precisely these questions we will look at in this lesson. It's a big help to understand such basics related to PHP before you start developing you own PHP pages. Such basic understanding will increase the speed of learning significantly.
So, let's get started!
http://w w w .ht
Click to check stylesheet
What is PHP?PHP was originally an acronym for Personal Home Pages, but is now a recursive acronym for PHP: Hypertext Preprocessor.
PHP was originally developed by the Danish Greenlander Rasmus Lerdorf, and was subsequently developed as open source. PHP is not a proper web standard - but an open-source technology. PHP is neither real programming language - but PHP lets you use so-called scripting in your documents.
To describe what a PHP page is, you could say that it is a file with the extension .php that contains a combination of HTML tags and scripts that run on a web server.
How does PHP work?The best way to explain how PHP works is by comparing it with standard HTML. Imagine you type the address of an HTML document (e.g.http://www.mysite.com/page.htm) in the address line of the browser. This way you request an HTML page. It could be illustrated like this:
As you can see, the server simply sends an HTML file to the client. But if you instead type http://www.mysite.com/page.php - and thus request anPHP page - the server is put to work:
The server first reads the PHP file carefully to see if there are any tasks that need to be executed. Only when the server has done what it is supposed to do, the result is then sent to the client. It is important to understand that the client only sees the result of the server's work, not the actual instructions.
This means that if you click "view source" on a PHP page, you do not see the PHP codes - only basic HTML tags. Therefore, you cannot see how a PHP page is made by using "view source". You have to learn PHP in other ways, for example, by reading this tutorial.
What you learn in this tutorial is to write commands to a server!
So, the first thing you need to get ahold of is... a server! But don't worry - you don't need to buy a new computer. You just need to install some software on your computer that makes it function as a server. Another option is to have a website on a hosted server that supports PHP. Then you just need to be online while coding.
The next lesson is about how to get your computer to act as a server.
Lesson 2: ServersPHP is a server-side technology. Therefore, you need to have a server to run PHP. But it doesn't need to cost you anything to make this upgrade and there are several options for doing so.
Since you ultimately only need to choose one option, this lesson is divided into three parts. First comes a little introduction on the different options (just choose the one that suits you best). When your server is up and running, we'll pick up with Lesson 3 to make your first PHP page.
Option 1: Website on a hosted serverYou can choose to have a website on a host that supports PHP.
Test whether your host supports PHP If you don't already have a website on hosted server you can create a free account
on 000webhost.com which supports PHP.
Option 2: Install PHP on your computerIt's no walk in the park to install PHP on your computer. This option is only recommend for experienced computer users, but it can obviously be done. Here are links to downloads and installtion guides:
Windows Installation Guide Mac Installation Guide Linux Installation Guide
Option 3: XAMPPXAMPP is a program that makes it easy and possible for us ordinary folks to run the PHP directly on our computer without having to install PHP on our own.
Learn how to install XAMPP
Lesson 3: Your first PHP pageFrom lesson 1 and 2, you now know a little about what PHP is, and you've installed (or have access to) a server. Now we are ready to begin making our first PHP page. We keep it simple and easy, but after you have gone through this lesson, you will understand much more about what PHP is and what you can do with it.
Basically, a PHP file is a text file with the extension .php which consists of:
Text HTML tags PHP Scripts
You already know what text and HTML tags are. So let's look a little more at PHP scripts.
PHP ScriptsPHP Documentation Group has issued detailed documentation for PHP. Throughout the tutorial, there will be many links to the documentation. The goal is that you become accustomed to looking up and finding answers to your questions. PHP is so extensive that
you can't to learn all facets in this tutorial. But PHP is not difficult! On the contrary, PHP is often very similar to plain English.
Let's get started with your first PHP page.
Example: Hello World!Start by making an ordinary HTML document, but name the file page.php and save it in the root of the site:
If you use XAMPP (see lesson 2), the path for the root is "c:\xampp\htdocs\page.php" on your computer (which is now a server). Read more abot saving PHP files in XAMPP.
If you have a website on a host that supports PHP, you simply upload/ftp the file to your web host.
The HTML code should look like this:
<html><head><title>My first PHP page</title>
</head><body>
</body></html>
As you probably remember from lesson 1, PHP is all about writing commands to a server. So let's write a command to the server.
First, we need to tell the server when the PHP will start and end. In PHP you use the tags <?php and ?> to mark the start and end for the PHP codes that the server must execute (on most servers it will be suficient to use just <? as start tag, but <?php is the most correct to use the first time PHP is used.)
Now try to add the following simple code snippet to your HTML code:
<html><head><title>My first PHP page</title></head><body>
<?php
echo "<h1>Hello World!</h1>";
?>
</body></html>
When we look at the PHP document in a browser, it should look like this:
But it gets interesting when you look at the HTML code in the browser (by selecting "view source"):
The PHP codes are gone! As you may remember from lesson 1, it is only the server that can see the PHP codes - the client (the browser) only sees the result!
Let's look at what happened. We asked the server to write <h1> Hello World!</h1>. In a more technical language, one would say that we used the string function echo to write a specified string to the client where the semicolon ends the command. But do not worry! In this tutorial, we try to keep the technical language at a minimum.
Our first example is obviously not particularly exciting. But just wait! From now on, it's only going to be more and more interesting. Let's look at another example.
Example: Now!Let's make the server write something else. We could, for example, ask it to write the current date and time:
We make the server write the date and time when the PHP page is displayed. Note that if you refresh the page in the browser, a new time is written. The server writes the current date and time each time the page is sent to a client.
It is also important to note that the HTML code contains only the date - not the PHP codes. Therefore, the example is not affected by which browser is used. Actually, all functionalities that are made with server-side technologies always work in all browsers!
And again, notice the semicolon after the code line. It is a separator and very important to include - otherwise the script won't work.
In the example, we used date, which is a function that returns the current date and time on the server.
Let's try to extend the example by writing both a string and a function - separated by "." (a period) - it's done like this:
<html><head><title>My first PHP document</title></head><body>
<?php
echo "<p>Current date and time: " . date("r") . "</p>";
In the next lesson, we will take a closer look at the date function and the different formats for date and time.
Lesson 4: Working with time and datesIn this lesson, we will try to look at the many different options for working with time and dates in PHP. We went through some very simple examples in the previous lesson mostly to show you what PHP is. In this lesson, we will take a closer look at the date function.
Time and date functionsPHP provides a wide range of funtions in relation to time and date. In this lesson, we will look at the most important of these functions: date.
With different parameters, the date function can return the current date / time in many different formats. Some of the most useful parameters are:
date("y")Returns the current year from a date - with today's date, it returns: 12
date("m")Returns the current month from a date - with today's date, it returns: 07
date("n")Returns the current month from a date without leading zeroes ( eg. "1" instead of "01") - with today's date, it returns: 7
date("F")Returns the current month name from a date - with today's date, it returns: July
date("d")Returns the current day of the month from a date - with today's date, it returns: 28
date("l")Returns the name of the current weekday from a date - with today's date, it returns: Saturday
date("w")Returns the current day of the week from a date - with today's date, it returns: 6
date("H")Returns the current hour from a time - with the current time, it returns: 09
date("i")Returns the current minute from a time - with the current time, it returns: 28
date("s")Returns the current second from a time - with the current time, it returns: 05
This example illustrates the use of the date function:
<html><head><title>Time and date</title>
</head><body>
<?php
echo "<p>Today it's " . date("l") . "</p>";
?>
</body></html>
Show example
The time is 1343460485And now hold on... because now it becomes a little nerdy! The function time() returns the current time as the number of seconds since January 1, 1970, 12:00 PM, GMT.
<html><head><title>time and date</title></head><body>
<?php
echo "<p>It's been exactly " . time() . " seconds since January 1, 1970, 12:00 PM, GMT </ p> ";
Time expressed in the number of seconds since January 1, 1970, 12:00 PM GMT is a so-called "timestamp" (UNIX timestamp) and is quite useful when you work with dates/times in the future or the past.
By default, the date function uses the current timestamp (i.e. the current value of time()). But with an extra parameter you can specify a different time stamp and thus work with the future or the past. In the example below, we set the timestamp to 0 seconds from January 1, 1970 12:00 PM, GMT. Thereby we can check what day of week January 1, 1970 was.
<html><head><title>time and date</title></head><body>
<?php
echo "<p>January 1, 1970 was a " . date("l",0) . "</p>";
?>
</body></html>
Show example
Unless you are a mathematical genius, it quickly becomes complicated to count the number of seconds since January 1, 1970 to a specific time in the future or past. But here you can get help from another nifty function: mktime, which does the calculations for you.
The syntax for mktime is (hour, minute, second, month, day, year). The example below converts the time of the first step on the Moon (July 21, 1969, 02:56):
<html><head><title>time and date</title></head><body>
Notice that it's returning a negative number as the date is earlier than January 1, 1970.
We can now put this together with the date function and find out which weekday this historic day took place.
<html><head><title>time and date</title></head><body>
<?php
echo date("l", mktime(2,56,0,7,21,1969));
?>
</body></html>
Show example
What can you use it for?All this may seem a bit theoretical at this stage. After all, what on earth can you use a function like time() for? More importantly, when will you learn something you can actually use on your pages?
The answer is that what you learn here are building blocks - the only limitations to what you can build are your creativity and imagination! I would venture to say that you have already learned more than you think. For example, do you think you can make a website with different background images each day of the week and that works in all browsers?
The example above, with a dynamic background image, simply requires that you make seven images and name them background_1.png, background_2.png, background_3.png, etc.
If a user then enters your site on a Tuesday, the site will have background_2.png as background, and the next day, background_3.png. Easy and simple!
In the next lesson, you will be introduced to new building blocks that can be used to make loops and repetitions in your codes.
PHP is fun, don't you think?
Lesson 5: LoopsIn PHP, it is possible to manage the execution of scripts with different control structures. In this lesson, we will look at loops. Loops can be used to repeat parts of a script a specified number of times or until a certain condition is met.
"while" loopsThe syntax for a while loop is:
while (condition) {Statement
}
The syntax can almost be directly translated into English: do something while a condition is met.
$x = 1; while ($x <= 50) { echo "<p>This text is repeated 50 times</p>"; $x = $x + 1;}?>
</body>
</html>
Show example
In the example, a variable named "$x" is used. As you can see, variables in PHP always start with a "$" character. It's easy to forget this at first, but it's absolutely necessary to remember or else the script doesn't work.
Apart from that, the example is almost self-explanatory. First the variable $x is set to be equal to 1. Then the loop asks the server to repeat the text while $x is less or equal to 50. In each loop, the variable $x will be increased by 1.
"for" loopsAnother way to make a loop is with for on the form:
for (Initialization; Condition; Step) { Statement
}
The statement is repeated as long as 'Initialization' + 'Step' meets the 'Condition'. If that doesn't make sense, look at this example:
In the example above, $x is growing with the value 5 in each loop. The loop will continue as long as $x is below or equals 50. Also note how the value $x is used as part of the sentence.
Do you get it? First we set the value of $x to 1. Then in each loop, we write a heading at level $x (h1, h2, h3, etc.) until $x is equal to six.
Loops within loopsIn principle, there are no limitations on how loops can be used. For instance, you can easily put loops inside loops and thereby create many repeats.
But be careful! PHP becomes slower the more complicated and extensive the scripts. For instance, look at the next example where, with three loops, we can write over 16 million colors!
In order not to make the page slow, we have drastically reduced the number by putting the step to 30 and thereby limited the number of colors to 512.
<html>
<head><title>Loops </title></head><body>
<?php
for ($intRed=0; $intRed<=255; $intRed=$intRed+30) {
for ($intGreen=0; $intGreen<=255; $intGreen=$intGreen+30) {
for ($intBlue=0; $intBlue<=255; $intBlue=$intBlue+30) {
In this example, each of three primary colors (red, green and blue) can have a value between 0 and 255. Any combination of the three colors creates a color on the form rgb(255,255,255). The color code is used as color in a <span>.
Loops becomes more useful when you've learned a little more. When you understand the principle in a loop, you can proceed to the next lesson, where we look at conditions.
Lesson 6: ConditionsConditions are used to execute part of a script only if some predefined requirements (conditions) are fulfilled. For example, a condition could be that a date must be after January 1, 2012 or that a variable is greater than 7.
If...The first type of condition we will look at is if, which has the following syntax:
In lesson 4, you learned how to find the number of a month. In the following example, we will use the month number in an if else condition to find out what season it is:
if (date ("m") == 3) { echo "<p>Now it's spring!</p> ";}else { echo "<p>I do not know what season it is!</p> ";}
?>
</body></html>
Show example
As you can see, this condition is not a particularly smart condition - it only works when it's March!
However, there are plenty of ways to improve the condition and make it more precise. Below are listed comparison operators that can be used in the condition:
== Equals< Less than> Greater than<= Less than or equal to>= Greater than or equal to!= Not equal to
In addition, there are some logical operators:
&& And|| Or! Not
The operators can be used to develop more precise conditions, so now we can expand the above example to include all the spring months:
if (date("m") >= 3 && date("m") <= 5) { echo "<p> Now it's spring!</p> ";}else { echo "<p> Now it's either winter, summer or autumn!</p> ";} ?>
</body></html>
Let's take a closer look at the extended condition:
date("m") >= 3 && date("m") <= 5
The condition can be translated into:
If the month is greater than or equal to 3,and the month is less than or equal to 5
Smart, eh? Operators play a significant role in many different parts of PHP.
But it still only works with March, April and May. All other months are not yet covered by the condition. So let's try to develop the condition a little more.
if ... elseif ... else...Using elseif, we can expand the condition and make it work for all months:
To write conditions is all about thinking logically and being methodical. The example above is pretty straightforward, but conditions can get very complex.
switch ... caseAnother way of writing conditions is to use the switch method:
switch (expression) {
case 1: statement break;case 2: statement break; default: statement break;}
This method is based on an expression and then lists different "answers" or "values" with related statements. The easiest way to explain the method is to show an example.
As you may remember from lesson 4, the function date("w") returns the current weekday. This can be used in an example where we write the name of the day (instead of a number):
Often switch can be a good alternative to if else conditions. What you should use in a given situation depends on which method you find easiest and most logical. Making your scripts logical and clear can be a great challenge.
In the next lesson, we will look at how you can add comments to your scripts to explain how they work. Good comments can be crucial if you or somebody else has to make changes in your codes at a later stage.
Lesson 7: Comment your scriptsAs you may have noticed, PHP scripts can easily look confusing. In this lesson, we cover why comments are important and how to insert them into your scripts.
Why is it important to comment your scripts?When you are coding, you are writing commands to a server/computer and need to use a highly formal language that may not clearly reflect your thoughts when making the script.
Therefore, it can be difficult for others (or yourself) to understand how the script is structured, and thus hard to identify and correct errors in the script.
Comments can be used to write short explanatory text in the script. The server completely ignores the comments, and the comments do not affect the actual functionality of the script.
In the business world, it is often a requirement that scripts and programming are commented, otherwise it would be too risky for a company to take over a system in which it would be too difficult to find and correct errors.
How do you insert comments?It is quite easy to insert a comment. You simply start the comment with a double slash: "//".
Take a look at this example from lesson 5, now with comments:
<html><head><title>Loops</title></head><body>
<?php
// Here we write color codes using three loops
// Red can be between 0 and 255 for ($intRed=0; $intRed<=255; $intRed=$intRed+30) {
// Green can be between 0 and 255 for ($intGreen=0; $ intGreen<=255; $intGreen=$intGreen+30) {
// Blue can be between 0 and 255 for ($ intBlue=0; $intBlue<=255; $intBlue=$intBlue+30) {
// The color code is made on the form rgb(red,green,blue) $strColor = "rgb(" . $intRed . "," . $intGreen . "," .
$intBlue . ")"
// Now we write the color code to the client echo "<span style='color:" . $strColor . "'> " .
$strColor . " </span>";
// Closes the loops } }}
?>
For the sake of the example, we have included many extra comments, so it should be clear that you are far better off debugging a script with comments than without.
Therefore, remember to comment your scripts!
Lesson 8: ArraysIn this lesson, we will look at what an array is, how it is used, and what it can do.
Understanding arrays can be a little difficult in the beginning. But give it a try anyway... we've tried to make it as easy as possible.
What is an array?An array is a set of indexed elements where each has its own, unique identification number.
Sound confusing? It's actually not that complicated.
Imagine a list of words separated by commas. It is called a comma-separated list, and it could, for example, look like this:
apples, pears, bananas, oranges, lemons
Then try to imagine dividing the list at each comma. Next, give each section a unique identification number like this:
What you see is an array. We can, for example, name the array "fruits". The idea is that we can access the array with a number and get a value back, like this:
This is the idea behind arrays. Let us try to use it in practice.
How do you use an array?We will continue with the fruit example. Step by step, we will make it work as a real array. First, we set a variable equal to the list of fruits:
This example is very simple, and it might be a bit difficult to see the advantage of using an array for this particular task. But just wait... arrays can be used for many very useful things.
Loop through an arrayBack in lesson 5 you learned about loops. Now we will look at how you can loop through an array.
When you know how many elements an array contains, it is not a problem defining the loop. You simply start with 0 and let the loop continue to the number of items available. In the example with the fruits, you would loop through the array like this:
<html><head><title>Array</title>
</head><body>
<?php
// Comma separated list$fruitlist = "apples, pears, bananas, oranges, lemons"; // Create an array by splitting the list (with a comma as
delimiter)$arrFruits = explode (",", $fruitlist); echo "<p>The list of fruits:</p>"; echo "<ul>"; // Loop through the array $arrFruits for ($x=0; $x<=4; $x++) { echo "<li>" . $arrFruits[$x] . "</li>"; } echo "</ul>";
?> </body></html>
Show example
As you can see, the variable $x (which increases from 0 to 4 in the loop) was used to call the array.
How to find the size of an arrayBut what if we add another fruit to the list? Then our array will contain one element more - which will get the identification number 5. Do you see the problem? Then we need to change the loop, so it runs from 0 to 5, or else not all of the elements will be included.
Wouldn't it be nice if we automatically could find out how many elements an array contains?
That's exactly what we can do with the function foreach. Now we can make a loop that works regardless of the number of elements:
<?php foreach ($arrFruits as $x) { echo $x; }?>
This loop will work regardless of how many or few elements the array contains.
// Call the array with the number of the month - write to the
clientecho $arrMonths[date("n")];?>
</body></html>
Show example
Notice that we use the function array instead of the function explode to create an array.
Ok. Enough about arrays! In the next lesson, you'll learn how to write your own functions.
Lesson 9: FunctionsIn previous lessons you have learned to use functions like date() and array(). In this lesson, you will learn to create your own functions using function.
What is a function?A function process inputs and returns an output. It can be useful if, for example, you have a wide range of data you have processed or if you have calculations or routines that must be performed many times.
This way, we can make a very simple function that can add the value 1 to a number. It could look like this:
function AddOne($x) { $x = $x + 1; echo $x;}
Our function is named AddOne and must be called with a number - e.g. 34....
echo AddOne(34);
... which (surprise!) will return 35.
The example above processes a number, but functions can work with text, dates or anything else. You can also create functions that are called by many different parameters. In this lesson you will see different examples of functions.
Example 1: Function with more parametersAs mentioned above, you can easily create a function that can be called with more parameters. In the next example, we'll create a function that is called with three numbers and then returns the value of the three numbers added together:
Ok. Now that was almost too simple! But the point was just to show you that a function can be called with more parameters.
Example 2: English date and timeLet us try to make a slightly more complex function. A function that's called with a date and time returns it in the format: Wednesday, 15 February, 2012, 10:00:00 AM
<html><head><title>Functions</title></head><body>
<?php
function EnglishDateTime($date) { // Array with the English names of the days of the week $arrDay =
Please note how '$arrMonth' and '$EnglishDateTime' are constructed over several lines. This is done so that users with a low screen resolution can better see the example. The method has no effect on the code itself.
The function above works on all web servers regardless of language. This means that you can use such a function if your website, for example, is hosted on a French server, but you want English dates.
At this stage, we will not go into more depth with functions, but now you know a little about how functions work.
Lesson 10: Passing variables in a URLWhen you work with PHP, you often need to pass variables from one page to another. This lesson is about passing variables in a URL.
How does it work?Maybe you have wondered why some URLs look something like this:
http://html.net/page.php?id=1254
Why is there a question mark after the page name?
The answer is that the characters after the question mark are an HTTP query string. An HTTP query string can contain both variables and their values. In the example above, the HTTP query string contains a variable named "id", with the value "1254".
Here is another example:
http://html.net/page.php?name=Joe
Again, you have a variable ("name") with a value ("Joe").
How to get the variable with PHP?Let's say you have a PHP page named people.php. Now you can call this page using the following URL:
people.php?name=Joe
With PHP, you will be able to get the value of the variable 'name' like this:
$_GET["name"]
So, you use $_GET to find the value of a named variable. Let's try it in an example:
// The value of the variable name is foundecho "<h1>Hello " . $ _GET["name"] . "</h1>";
?>
</body></html>
Show example (keep an eye on the URL)
When you look at the example above, try to replace the name "Joe" with your own name in the URL and then call the document again! Quite nice, eh?
Several variables in the same URLYou are not limited to pass only one variable in a URL. By separating the variables with &, multiple variables can be passed:
// The value of the variable name is foundecho "<h1>Hello " . $_GET["name"] . "</h1>"; // The value of the variable age is foundecho "<h1>You are " . $_GET["age"] . " years old </h1>";
?>
</body></html>
Show example (keep an eye on the URL)
Now you have learned one way to pass values between pages by using the URL. In the next lesson, we'll look at another method: forms.
Lesson 11: Passing variables with formsInteractive websites require input from users. One of the most common ways to get input is with forms.
In this lesson, we will look at how to build forms and process inputs on the server.
<form>When you code a form, there are two particular important attributes: action and method.
actionIs used to enter the URL where the form is submitted. It would be the PHP file that you want to handle the input.
methodCan either have the value "post" or "get", which are two different methods to pass data. At this point, you don't need to know much about the difference, but with "get", the data is sent through the URL, and with "post", the data is sent as a block of data through standard input service (STDIN). In the last lesson, we looked at how data is retrieved through the URL using $_GET. In this lesson, we look at how data submitted through a form using the method "post" is retrieved.
An HTML page with a formThe page that contains the form doesn't need to be a PHP file (but it can be). It need not even be on the same site as the file that will receive the data.
In our first example, we will look at a very simple form with one text field:
Which returns the value of a field in the form. Let us try to use it in an example.
First create a page with a form as above. Then make a PHP page named "handler.php" (notice that this is the name of the page we wrote in the action attribute in our <form>).
The file "handler.php" shall have the following content:
<html><head><title>Form</title></head>
<body>
<?php
echo "<h1>Hello " . $_POST["username"] . "</h1>";
?>
</body></html>
Show example
User input and conditionsIn the next example, we will try to use user input to create conditions. First, we need a form:
<html><head><title>Form</title></head><body>
<form method="post" action="handler.php">
<p>What is your name:</p><input type="text" name="username"></p>
<p>What is your favorite color:<input type="radio" name="favoritecolor" value="r" /> Red <input type="radio" name="favoritecolor" value="g" /> Green <input type="radio" name="favoritecolor" value="b" /> Blue </p>
<input type="submit" value="Submit" />
</form>
</body></html>
Which will look like this in the browser:
Now we will use these inputs to create a page that automatically changes background color according to what the user's favorite color is. We can do this by creating a condition (see lesson 6) that uses the data the user has filled out in the form.
</head><body style="background: <? echo $strBackgroundColor; ?>;">
<? echo $strHeading; ?>
</body></html>
The background color will be white if the user has not chosen any favorite color in the form. This is done by using default to specify what should happen if none of the above conditions are met.
But what if the user does not fill out his name? Then it only says "Hello" in the title. We will use an extra condition to change that.
<title>Form</title></head><body style="background: <? echo $strBackgroundColor; ?>;">
<? echo $strHeading; ?>
</body></html>
Show example.
In the example above, we use a condition to validate the information from the user. In this case, it might not be so important if the user did not write his name. But as you code more and more advanced stuff, it's vital that you take into account that the user may not always fill out forms the way you had imagined.
Example: contact formWith your new knowledge of PHP and forms, you are able to create a contact form using the function mail, which has the following syntax:
Please note that the example will only work if you have access to a mail server. By default, this is not the case in XAMPP and most free hosts. Also, some hosts may require that you include a from header, which is done with an extra parameter:
Lesson 12: SessionsWhen you visit a website, you do a number of different things. You click from one page to another. Perhaps you also fill out a form or purchase a product.
As a web developer, such information is of great importance to developing successful web solutions.
Suppose, for example, that you want to make a site where some pages are protected with login and password. To make this protection effective, the password-protected pages should have access to information on whether the user has logged in at an earlier time. You must, in other words, be able to "remember" what the user did earlier.
This is exactly what this lesson is about - how you can use sessions in PHP to store and retrieve information during a user's visit to your site.
Session
PHP session allows you to manage information about a user's session. You can write smart applications that can identify and gather information about users.
A session can begin in different ways. We will not go into technical details here but focus on the case where a session starts by a value being stored. A session ends/dies if the user hasn't requested any pages within in a certain timeframe (by the standard 20 minutes). Of course, you can also always end/kill a session in your script.
Let us say that 50 people are clicking around on the same site, e.g. a web shop, at the same time. Information on what each of them have in their shopping cart would best be stored in a session. In order to identify the individual users, the server uses a unique user ID that is stored in a cookie. A cookie is a small text file stored on the user's computer (more about cookies in lesson 13). Therefore, sessions often require support of cookies in the user's browser.
An example of using sessionsWhen you requested this page, I stored the current time in a session. I did this so that I can now show you an example of how a session works.
I named the item "StartTime" and stored it by adding the following line in my PHP script:
Thereby, a session was started. As described above, each session is given an ID by the server.
Your session has the following ID: 51674855c875ba3e9d63da05c261b648
At any time, I can call the "StartTime" from the session by writing:
<?php
session_start();echo $_SESSION["StartTime"];
?>
Which would reveal that the page was requested at Sat, 28 Jul 2012 09:32:58 +0200 (according to the clock on this web server).
But what is interesting is that the information remains in the session, even after you have left this page. The information will follow you until your session ends.
By default, a session lasts till the user closes the browser, then it dies automatically. But if you want to stop a session, it can always be killed in this way:
<?php
session_destroy();
?>
Let us try to look at another example where sessions are used: a password solution.
Login system with sessionsIn the following example, we will make a very simple login system. We will use many of the things we have learned in previous lessons.
The first thing we need is a form where people can enter their username and password. It could look like this:
In this file, we check whether it is the correct username and password that has been entered. If that is the case, we set a session that says that this user is logged in with the correct username and password.
<html>
<head><title>Login</title>
</head><body>
<?php
// Check if username and password are correctif ($_POST["username"] == "php" && $_POST["password"] == "php")
{ // If correct, we set the session to YES session_start(); $_SESSION["Login"] = "YES"; echo "<h1>You are now logged correctly in</h1>"; echo "<p><a href='document.php'>Link to protected
file</a><p/>"; }else { // If not correct, we set the session to NO session_start(); $_SESSION["Login"] = "NO"; echo "<h1>You are NOT logged correctly in </h1>"; echo "<p><a href='document.php'>Link to protected
file</a></p>"; }
?>
</body></html>
In the protected files, we want to check whether the user is logged in properly. If this is not the case, the user is sent back to the login form. This is how the protection is made:
<?php
// Start up your PHP Session session_start();
// If the user is not logged in send him/her to the login formif ($_SESSION["Login"] != "YES") { header("Location: form.php");}
?>
<html><head><title>Login</title></head>
<body><h1>This document is protected</h1>
<p>You can only see it if you are logged in.</p></body></html>
Click here to test the login system
Now you've been introduced to the Session object. In the next lesson, we are still working in the same area but will take a closer look at cookies.
Lesson 13: CookiesHow and what kind of information websites are collecting from their users, and especially how they use it, is a hot topic. Cookies are often mentioned as an example of how information is collected and pose a threat to your privacy. But are there reasons to be worried? Judge for yourself. Once you have gone through this lesson, you will know what can be done with cookies.
What is a cookie?A cookie is a small text file in which a website can store different information. Cookies are saved on the user's hard drive and not on the server.
Most cookies expire (delete themselves) after a predetermined time period, which can range from one minute to several years. But the user can also identify and delete any cookies on his/her computer.
Most browsers, such as Microsoft Internet Explorer, Mozilla Firefox and Google Chrome, can be configured to let the user choose whether or not he/she will accept a cookie. But then, why not just say no to all cookies? It is possible. But many websites would not work as
intended without cookies, since cookies in many contexts are used to improve the usability and functionality of the website.
How is information stored in a cookie?
It's easy to set or modify a cookie in PHP with setcookie. In the first example, we will create a cookie and set the value.
First, you need a name for the cookie. In this example we will use the name "HTMLTest". Next, you set the value of the cookie like this:
<?php
// Setting the cookiesetcookie("HTMLTest", "This is a test cookie");
?>
By default, a cookie is kept untill the browser is closed, but it can easily be modified by adding another parameter setting the expiry time:
"Time()+3600" specified that the cookie should expire in 3600 seconds (60 minutes) from now.
In the example above, we stored information about a user's name and interests. This information can, for example, be useful to target the website specifically for the individual visitor.
How do you retrieve the value of a cookie?To get the value of the cookie, $_COOKIE is used. For example, if we need the information from the example above, we do it like this:
// Retrieve values from the cookie$strName = $_COOKIE["Name"]; $strInterest = $_COOKIE["Interest"]; // Write to the clientecho "<p>" . strName . "</p>" echo "<p>Your interest is . " strInterest . "</p>"
?>
Who can read the cookie?By default, a cookie can be read at the same second-level domain (e.g. html.net) as it was created. But by using the parameters domain and path, you can put further restrictions on the cookie using the following syntax:
setcookie(name, value, expiration time, path, domain);
Let us look at an example:
<?php
// Setting the cookie: name, value, expiration time, path, domain
In the example above, we set a cookie called "Name" with the value "C. Wing." The cookie expires after one year (60 seconds * 60 minutes * 24 hours * 365 days) and can be read only by sites located in the directory "/tutorials/php/" on the (sub-)domain "www.html.net".
Example of a cookieWe can try to save a sample cookie on your computer and then see how it looks.
The following code sets the cookie:
<?php
// Setting the cookiesetcookie("HTMLTest", "This text is in a cookie!", time()
+60*60*24, "/tutorials/php/", "www.html.net"); // Write the information to the clientecho $_COOKIE ["HTMLTest"];
?>
Show example
The cookie is being placed on your hard drive. Depending on what operating system you use, your cookies may be saved in different places. Once you find them, they will probably look like this:
As you can see, a cookie is a normal text file that can be open with Notepad, for example. The contents of the cookie we have just created will probably look something like this:
We will not go into detail with the different codes, but simply note that the user has full control over cookies on his/her computer.
In this lesson, we have looked at what cookies can do but not what they can be used for. It's a common concern that some sites use cookies for inappropriate activities. But in most cases, cookies are used to make sites more user-friendly or relevant for the individual users.
If you choose to use cookies on your site, it might be a good idea to tell your users that your site uses cookies. This can, for example, be communicated in a privacy policy or registration process.
Lesson 14: Filesystem
With PHP, you can access the server's filesystem. This allows you to manipulate folders and text files in PHP scripts.
For example, you can use PHP to read or write a text file. Or you can list all files in a specified folder. There are many possibilities and PHP can save you lots of tedious work.
Here, we'll look at how you can use PHP to work with folders and files. The goal is to give you a quick overview. In the next lessons, we will look more closely at the different possibilities. We will not go through all the different possibilities. Again, see the documentation for a complete listing.
filemtimeReturns the time for which the contents of a file was last edited (as UNIX timestamp - see lesson 4)).
fileatimeReturns the time when a file was last accessed / opened (as a UNIX timestamp - see lesson 4)).
filesizeReturns the size of a file in bytes.
Let us try to find the three properties of the file you are looking at now: "/tutorials/php/lesson14.php"
<html>
<head><title>Filesystem</title></head><body>
<?php // Find and write propertiesecho "<h1>file: lesson14.php</h1>";echo "<p>Was last edited: " . date("r",
filemtime("lesson14.php")); echo "<p>Was last opened: " . date("r",
PHP also allows you to work with folders on the server. We will not go through all the different possibilities - only show an example. Again, see the documentation for more information.
opendirOpens a specified folder.
readdirReturns the filename of the next file in the open folder (cf. opendir)
closedirCloses a specified folder.
The example below lists the contents of the folder "tutorials/php/".
<?php // Opens the folder$folder = opendir("../../tutorials/php/");
// Loop trough all files in the folderwhile (($entry = readdir($folder)) != "") { echo $entry . "<br />";}
// Close folder$folder = closedir($folder);
?>
</body>
</html>
Show example
In the example the directory "../../tutorials/php/" is first opened. Then a loop is used to write the name of the next file in the folder as long as there are more files. At the end, the folder is closed.
In the next lessons, we will look at how to read from and write to a text file.
In the previous lesson, we learned how to use PHP to access the server's filesystem. In this lesson, we will use that information to read from an ordinary text file.
Text files can be extremely useful for storing various kinds of data. They are not quite as flexible as real databases, but text files typically don't require as much memory. Moreover, text files are a plain and simple format that works on most systems.
Open the text fileWe use the fopen function to open a text file. The syntax is as follows:
fopen(filename, mode)
filenameName of the file to be opened.
modeMode can be set to "r" (reading), "w" (writing) or "a" (appending). In this lesson, we will only read from a file and, therefore, use "r". In the next lesson, we will learn to write and append text to a file.
The examples in this lesson use the text file unitednations.txt. This is a simple list of the Programmes and Funds of the United Nations and their domains. You can either download the file, or you can create your own file and test the examples with it.
First, let's try to open unitednations.txt:
<?php
// Open the text file$f = fopen("unitednations.txt", "r");
// Close the text filefclose($f);
?>
Example 1: Read a line from the text fileWith the function fgets, we can read a line from the text file. This method reads until the first line break (but not including the line break).
<head><title>Reading from text files</title></head><body>
<?php
$f = fopen("unitednations.txt", "r");
// Read line from the text file and write the contents to the client
echo fgets($f);
fclose($f);
?>
</body></html>
Show example
Example 2: Read all lines from the text file
<html>
<head><title>Reading from text files</title></head><body>
<?php
$f = fopen("unitednations.txt", "r");
// Read line by line until end of filewhile(!feof($f)) { echo fgets($f) . "<br />";}
fclose($f);
?>
</body></html>
Show example
In the example, we loop through all the lines and use the function feof (for end-of-file) to check if you are at the end of the file. If this is not the case ("!" - see lesson 6), the line is written.
Instead of looping through all the lines, we could have achieved the same result with the
function fread. If you work with very large text files with thousands of lines, be
aware that the fread function uses more resources than the fgets function. For smaller files, it makes very little difference.
Example 3: A simple link directoryAs mentioned at the beginning of this lesson, text files can be excellent for data storage. This is illustrated in the next example where we create a simple link directory from the contents of the text file unitednations.txt.
The file is systematically written with the name of the program, then a comma, and then the domain. As you can probably imagine, more information could easily be stored in this comma-separated data file.
To get the information in each line, we use an array. See Lesson 8 for more information on arrays.
<html><head><title>Reading from text files</title>
</head><body>
<?php$f = fopen("unitednations.txt", "r");
// Read line by line until end of filewhile (!feof($f)) {
// Make an array using comma as delimiter $arrM = explode(",",fgets($f));
// Write links (get the data in the array) echo "<li><a href='http://" . $arrM[1] . "'>" . $arrM[0].
Quite handy, right? In principle, you could now just expand the text file with hundreds of links or perhaps expand your directory to also include address information.
In the next lesson, we will look at how to write to a text file.
Lesson 16: Writing to a text fileIn the previous lesson, we learned to read from a text file. In this lesson, we will learn to write to a text file.
The two methods are very similar, but there is one very important difference: You must have write permissions to the file. This means that the file will have to be located in a folder where you have the necessary permissions.
If you work locally on your own computer, you can set the permissions yourself: right-click on the folder and choose "Properties". With most web hosts, you will normally have one folder with write permissions. It's often called something like "cgi-bin", "log", "databases" or something similar. If your web host permits it, you might also be able to set permissions yourself. Usually you can simply right-click on a folder in your FTP client and choose "properties" or "permissions" or something similar. The screendumps below shows how it's done in FileZilla.
Read more on your web host's support pages.
Note that it is the text file that needs to be in the folder with write permissions - not the PHP file.
Open the text file for writingIn the same way as when reading from a text file, the fopen function is used for writing, but this time we set the mode to "w" (writing) or "a" (appending).
The difference between writing and appending is where the 'cursor' is located - either at the beginning or at the end of the text file.
The examples in this lesson use an empty text file called textfile.txt. But you can also create your own text file if you like.
First, let us try to open the text file for writing:
<?php
// Open the text file$f = fopen("textfile.txt", "w");
// Close the text filefclose($f);
?>
Example 1: Write a line to the text fileTo write a line, we must use the function fwrite, like this:
<html>
<head><title>Writing to a text file</title></head><body>
<?php
// Open the text file$f = fopen("textfile.txt", "w");
// Write text linefwrite($f, "PHP is fun!");
// Close the text filefclose($f);
// Open file for reading, and read the line$f = fopen("textfile.txt", "r");echo fgets($f);
Since we opened the file for writing, the line is added at the top, and thus overwrites the existing line. If we instead open the file appending, the line is added at the bottom of the text file, which then will increase by one line each time it's written to.
Example 2: Adding a text block to a text fileOf course, it is also possible to add an entire text block, instead of just a single line, like this:
<html><head><title>Write to a text file</title></head><body>
<h1>Adding a text block to a text file:</h1><form action="myfile.php" method='post'><textarea name='textblock'></textarea><input type='submit' value='Add text'></form>
<?php
// Open the text file$f = fopen("textfile.txt", "w");
// Write textfwrite($f, $_POST["textblock"]);
// Close the text filefclose($f);
// Open file for reading, and read the line$f = fopen("textfile.txt", "r");
// Read textecho fgets($f); fclose($f);
?>
</body>
</html>
Show example
In the next lessons, we look at another way of storing data: databases.
Lesson 17: DatabasesA database is a collection of information / data that is organized so that it can easily be retrieved, administrated and updated. Databases thereby enable the opportunity to create dynamic websites with large amounts of information. For example, all data on members of HTML.net and all posts in the forums are stored in databases.
A database usually consists of one or more tables. If you are used to working with spreadsheets, or maybe have used databases before, tables will look familiar to you with columns and rows:
There are many different databases: MySQL, MS Access, MS SQL Server, Oracle SQL Server and many others. In this tutorial, we will use the MySQL database. MySQL is the natural place to start when you want to use databases in PHP.
You need to have access to MySQL in order to go through this lesson and the next lessons:
If you have a hosted website with PHP, MySQL is probably already installed on the server. Read more at your web host's support pages.
If you have installed PHP on your computer yourself and have the courage to install MySQL as well, it can be downloaded in a free version (MySQL Community Edition) at the MySQL's website.
If you use XAMPP (see lesson 2), MySQL is already installed and ready to use on your computer. Just make sure MySQL is running in the Control Panel:
In the rest of this lesson, we will look more closely at how you connect to your database server, before we learn to create databases and retrieve and update data in the following sessions.
Connection to database serverFirst, you need to have access to the server where your MySQL database is located. This is done with the function mysql_connect with the following syntax:
mysql_connect(server, username, password)
Pretty straightforward: First, you write the location of the database (server), and then type in the username and password.
If you have your own website, you should read about location of your MySQL server on your host's support pages. Username and password will often be the same as those you use for FTP access. Otherwise contact your provider.
Example of a MySQL connection on a hosted website:
mysql_connect("mysql.myhost.com", "user001", "sesame") or die(mysql_error());
Example of a MySQL connection with XAMPP (default settings):
mysql_connect("localhost", "root", "") or die (mysql_error());
In the examples are added or die(mysql_error()) which, in brief, interrupts the script and writes the error if the connection fails.
Now we have made a connection to a MySQL server, and can now start creating databases and retrieve and insert data. This is exactly what we will look at in the next lessons.
By the way, keep in mind that it is good practice to close the database connection again when you're finished retrieving or updating data. This is done with the function mysql_close.
Lesson 18: Create databases and tablesIn the previous lesson we looked at how to create a connection to a database server. Next step is to create databases and tables.
We'll look at two ways to create databases and tables. First, how it is done in PHP, and then how it's made with the more user-friendly tool PhpMyAdmin, which is standard on most web hosts and in XAMPP.
If you have a hosted website with PHP and MySQL, a database has probably been created for you already and you can just skip this part of the lesson and start creating tables. Again, you should consult your host's support pages for more information.
Create a database and tables with PHP
The function mysql_query are used to send a query to a MySQL database. The queries are written in the language Structured QueryLanguage (SQL). SQL is the most widely used language for database queries - not only for MySQL databases - and is very logical and easy to learn. In this lesson and the next, you will learn the most important SQL queries.
When creating a database, the SQL query CREATE DATABASE is used with the following syntax:
table_name and column_name are of course the name of the table and the columns, respectively. DATA_TYPE are used to specify the data type to be inserted into the column. The most commonly used data types are:
INTFor numbers without decimals
DECIMALFor numbers with decimals
CHARShort text up to 255 characters
TEXTFor plain text up to 65,535 characters
LONGTEXTFor long passages of text up to 4,294,967,295 characters
For date and time in the format YYYY-MM-DD HH:MM:SS
All in all, logical and relatively easy. Let's try to put it into an example:
mysql_connect("mysql.myhost.com", "user", "sesame") or die(mysql_error());
mysql_select_db("people") or die(mysql_error());
mysql_query("CREATE TABLE MyTable ( id INT AUTO_INCREMENT, FirstName CHAR, LastName CHAR, Phone INT, BirthDate DATE PRIMARY KEY(id))") Or die(mysql_error());mysql_close ();
In the example, we start by connecting to the MySQL server. Next we use the function mysql_select_db to select the database "people". Then we create the table "persons" with 5 columns.
Note that at the "id" column, we first use INT to specify that the column contains numbers and then add AUTO_INCREMENT to automatically increase the number and ensure a unique ID for each row.
At the end, we use PRIMARY KEY to set the "id" column as the primary key. The primary key uniquely identifies each record (/row) in the table, which becomes very useful later when we update the database.
Create database and tables with phpMyAdminIt can be useful to be able to create databases and tables directly in PHP. But often, it will be easier to use phpMyAdmin (or any other MySQL administration tool), which is standard on most web hosts and XAMPP. The screendumps below shows how to create a database and tables in phpMyAdmin.
Start by logging onto phpMyAdmin. Often, the address will be the same as your MySQL server (eg. "http://mysql.myhost.com") and with the same username and password. In XAMPP, the address is http://localhost/phpmyadmin/.
When you are logged on, simply type a name for the database and press the button "Create":
At some hosts, it's possible the have already created a database, and you may not have the rights to create more. If that is the case, you obviously just use the assigned database.
To create a table, click on the tab "Databases" and choose a database by clicking on it:
Then there will be a box titled "Create new table in database", where you type the name of the table and the number of columns and press the button "Go":
Then you can name the columns and set the data type, etc., as in the SQL example above.
An error occurs if you, for example, attempt to insert text or numbers in a date field. Therefore, try to set the data types as precisely as possible.
Below is the most common data types listed:
Setting Data Type
CHAR Text or combinations of text and numbers. Can also be used for numbers that are not used in calculations (e.g., phone numbers).
Up to 255 characters - or the length defined in the "Length"
TEXT Longer pieces of text, or combinations of text and numbers. Up to 65,535 characters.
INT Numerical data for mathematical calculations. 4 bytes.
DATE Dates in the format YYYY-MM-DD 3 bytes.
TIME Time in the format hh:mm:ss 3 bytes.
DATETIME Date and time in the format YYYY-MM-DD hh:mm:ss 8 bytes.
SQL statements with quotes or backslash
If you try to insert text that contains the characters single quote ('), double quote (") or backslash (\), the record may not be inserted into the database. The solution is to add backslashes before characters that need to be quoted in database queries.
This can be done with the function addslashes this way:
<?php
$strText = "Is your name O'Reilly?";$strText = addslashes($strText);
?>
All single quotes ('), double quotes (") and backslashs (\) will then get an extra backslash before the character. This would only be to get the data into the database, the extra \ will not be inserted. Please note that PHP runs addslashes on all $_GET, $_POST, and $_COOKIE data by default. Therefore do not use addslashes on strings that have already been escaped.
In the next lesson you will learn to retrieve data from your database. But first, try to insert some more people in your database (as shown in the example above with Gus Goose).
Lesson 20: Get data from databaseNow it's time to retrieve data from our database to our PHP pages.
This is really one of the most important lessons in this tutorial. Once you have read and understood this lesson, you will realize why database-driven web solutions are so powerful, and your views on web development will be expanded dramatically.
SQL queriesTo retrieve data from a database, you use queries. An example of a query could be: "get all data from the table 'people' sorted alphabetically" or "get names from the table 'people'".
Again, the language Structured Query Language (SQL) is used to communicate with the database. Try looking at this simple example:
The syntax is pretty self-explanatory. Just read on and see how SQL statements are used in the examples below.
Example 1: Retrieve data from a tableThis example uses the database and table from lesson 19 and lesson 18. Therefore, it is important that you read these lessons first.
The example shows how data in the table "people" is retrieved with an SQL query.
The SQL query returns a result in the form of a series of records. These records are stored in a so-called recordset. A recordset can be described as a kind of table in the server's memory, containing rows of data (records), and each record is subdivided into individual fields (or columns).
A recordset can be compared to a table where each record could be compared to a row in the table. In PHP, we can run through a recordset with a loop and the function mysql_fetch_array, which returns each row as an array.
The code below shows how to use mysql_fetch_array to loop through a recordset:
<html><head><title>Retrieve data from database </title></head><body>
<?php// Connect to database servermysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Select databasemysql_select_db("mydatabase") or die(mysql_error());
// SQL query$strSQL = "SELECT * FROM people";
// Execute the query (the recordset $rs contains the result)$rs = mysql_query($strSQL);
// Loop the recordset $rs// Each row will be made into an array ($row) using
// Write the value of the column FirstName (which is now in the array $row)
echo $row['FirstName'] . "<br />";
}
// Close the database connectionmysql_close();?></body></html>
Show example
Notice that for every record how we get the content of the column "FirstName" by typing $row['FirstName']. Similarly, we can get the content of the column "Phone" by writing $row['Phone'], for example.
The order of the recordset is exactly the same as in the table in the database. But in the next example, it will be shown how to sort recordset.
Example 2: Sort the data alphabetically, chronologically or numericallyOften it can be helpful if a list or table of data is presented alphabetically, chronologically or numerically. Such sorting is very easy to do with SQL, where the syntax Order By ColumnName is used to sort according to the column contents.
Look at the SQL statement from the example above:
strSQL = "SELECT * FROM people"
The records can, for example, be sorted alphabetically by the first name of the people this way:
strSQL = "SELECT * FROM people ORDER BY FirstName"
Or chronologically by date of birth like this:
strSQL = "SELECT * FROM people ORDER BY BirthDate"
Until now, our SQL statement retrieves all rows from the table. But often you need to set criteria in the SQL query for the data to be retrieved, for instance, if we only want the rows for those who have a particular phone number or a certain last name.
Say, we only want to retrieve people from the database who have the phone number "66554433". That could be done like this:
strSQL = "SELECT * FROM people WHERE Phone = '66554433 '"
There are six relational operators in SQL:
= Equals< Less than> Greater Than<= Less than or equal to>= Greater than or equal to!= Not equal to
In addition, there are some logical operators:
ANDORNOT
See lesson 6 for more information on how to set up conditions.
In the next example, we use conditions to set up an address book.
Example 3: Address bookIn this example, we will try to combine many of the things you have just learned. We will make a list of the names from the database where each name is a link to further details about the person.
For this, we need two files - list.php and person.php - with the following code:
The code of list.php<html><head><title>Retrieve data from the database</title></head><body>
</dl><p><a href="list.php">Return to the list</a></p>
</body>
</html>
Show example
The address book example is rather simple, but it shows the potential of working with PHP and databases.
Imagine that the database had contained 10,000 products with detailed descriptions. By making a few changes in the above files, you could easily create a product catalogue with more than 10,000 pages with only one database and two PHP files.
Welcome to a world with extensive websites that are easy to develop and maintain! Once you've learned to work with databases, your web solutions will never be the same again.
Lesson 21: Delete data from databaseIn the two previous lessons, you have learned to insert and retrieve data from a database. In this lesson, we'll look at how to delete records in the database, which is considerably easier than inserting data.
Delete data using SQLThe syntax for an SQL statement that deletes records is:
Example: Delete a recordWhen deleting a record, you can use the unique AutoNumber field in the database. In our database, it is the column named id. Using this unique identifier ensures that you only delete one record. In the next example, we delete the record where id has the value 24:
<html><head><title>Delete data in the database</title></head>
<body>
<?php// Connect to database servermysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Select databasemysql_select_db("mydatabase") or die(mysql_error());
// The SQL statement that deletes the record$strSQL = "DELETE FROM people WHERE id = 24";mysql_query($strSQL);
// Close the database connectionmysql_close();?>
<h1>Record is deleted!</h1>
</body></html>
Remember that there is no "Recycle Bin" when working with databases and PHP. Once you have deleted a record, it is gone and cannot be restored.
Lesson 22: Update data in a databaseIn previous lessons, you have learned to insert, retrieve and delete data from a database. In this lesson, we will look at how to update a database, i.e., edit the values of existing fields in the table.
Update data with SQLThe syntax for an SQL statement that updates the fields in a table is:
UPDATE TableName SET TableColumn='value' WHERE condition
It is also possible to update multiple cells at once using the same SQL statement:
UPDATE TableName SET TableColumn1='value1', TableColumn2='value2' WHERE condition
With the knowledge you now have from the lessons 19, 20 and 21, it should be quite easy to understand how the above syntax is used in practice. But we will of course look at an example.
Example: Update cells in the table "people"The code below updates Donald Duck's first name to D. and changes the phone number to 44444444. The other information (last name and birthdate) are not changed. You can try to change the other people's data by writing your own SQL statements.
<html><head><title>Update data in database</title>
</head><body>
<?php// Connect to database servermysql_connect("mysql.myhost.com", "user", "sesame") or die
(mysql_error ());
// Select databasemysql_select_db("mydatabase") or die(mysql_error());
// The SQL statement is built$strSQL = "Update people set "; $strSQL = $strSQL . "FirstName= 'D.', "; $strSQL = $strSQL . "Phone= '44444444' ";
$strSQL = $strSQL . "Where id = 22";
// The SQL statement is executed mysql_query($strSQL);
// Close the database connectionmysql_close();?>
<h1>The database is updated!</h1></body></html>
This example completes the lessons on databases. You have learned to insert, retrieve, delete and update a database with PHP. Thus, you are actually now able to make very advanced and dynamic web solutions, where the users can maintain and update a database using forms.
If you want to see a sophisticated example of what can be made with PHP and databases, try to join our community. It's free and takes approximately one minute to sign up. You can, among other things, maintain your own profile using the form fields. Maybe you will get ideas for your own site.
This also ends the tutorial. PHP gives you many possibilities for adding interactivity to your web site. The only limit is your imagination - have fun!
Lesson 1: What is Active Server Pages (ASP)Whenever anyone is learning ASP, the most common questions that first come up are: What is ASP? And how does it work?
It is precisely these questions we will look at in this lesson. It's a big help to understand such basics related to ASP before you start developing you own ASP pages. Such basic understanding will increase the speed of learning significantly. So, let's get started!
What is ASP?As you can see by the title, ASP is an acronym for Active Server Pages.
ASP is developed by Microsoft. It is not really a standard ASP is neither a real programming language nor is it a programming language, but it's a Microsoft technology that lets you use so-called scripting in your documents.
To describe what an ASP page is, you could say that it is a file with the extension .asp that contains a combination of HTML tags and scripts that run on a web server.
The best way to explain how ASP works is by comparing it with standard HTML. Imagine you type the address of an HTML document (eg.http://www.mysite.com/page.htm) in the address line of the browser. This way you request an HTML page. It could be illustrated like this:
As you can see, the server simply sends an HTML file to the client. But if you instead type http://www.mysite.com/page.asp - and thus request anASP page - the server is put to work:
The server first reads the ASP file carefully to see if there are any tasks that need to be executed. Only when the server has done what it is supposed to do, the result is then sent to the client. It is important to understand that the client only sees the result of the server's work - not the actual instructions.
This means that if you click "view source" on an ASP page, you do not see the ASP codes - only basic HTML tags. Therefore, you can not see how an ASP page is made by using "view source". You have to learn ASP in other ways, for example, by reading this tutorial.
What you learn in this tutorial is to write commands to a server!
So, the first thing you need to get hold of is... a server! But don't worry - you don't need to buy a new computer. You just need to install some software on your computer that makes it function as a server. Another option is to have a website on a hosted server that supports ASP. Then you just need to be online while coding.
The next lesson is about how to get your computer to act as a server.
Lesson 3: Your first ASP pageFrom lesson 1 and 2, you now know a little about what ASP is, and you've installed (or have access to) a server. Now we are ready to begin making our first ASP page. We keep it simple and easy, but after you have gone through this lesson, you will understand much more about what ASP is and what you can do with it.
Basically, an ASP file is a text file with the extension .asp which consists of:
Text HTML tags ASP Scripts
You already know what text and HTML tags are. So let's look a little more at ASP scripts.
ASP ScriptsASP scripts can be written in different languages. The examples in this tutorial are written in Microsoft Visual Basic Scripting Edition (VBScript), but could also be written in another language - eg. JScript.
Microsoft has issued detailed documentation for VBScript and documentation for ASP Objects. Throughout the tutorial, there will be many links to the documentation. The goal is that you become accustomed to looking up and finding answers to your questions. VBScript is so extensive that you can manage to learn all facets in this tutorial. But VBScipt is not difficult! On the contrary, VBScript is often very similar to plain English.
Let's get started with your first ASP page.
Example: Hello World!Start by making an ordinary HTML document. But name the file default.asp and place it in the root of the site. On your computer (which is now a server), the path is c:\inetpub\wwwroot\default.asp.
As you probably remember from lesson 1, ASP is all about writing commands to a server. So let's write a command to the server.
First, we need to tell the server when the ASP will start and end. In ASP you use the tags <% and %> to mark the start and end for the ASP codes that the server must execute.
Now try to add the following simple code snippet to your HTML code:
<html><head><title>My first ASP page</title></head><body>
<% Response.Write "<h1>Hello World!</h1>"%>
</body></html>
When we look at the ASP document in a browser, it should look like this:
But it gets interesting when you look at the HTML code in the browser (by selecting "view source"):
The ASP codes are gone! As you may remember from lesson 1, it is only the server that can see the ASP codes - the client (the browser) only sees the result!
Let's look at what happened. We asked the server to write <h1> Hello World!</h1>. In a more technical language, one would say that we used the object Response and the method Write to write a specified string to the client. But do not worry! In this tutorial we try to keep the technical language at a minimum.
Our first example is obviously not particularly exciting. But just wait! From now on, it's only going to be more and more interesting. Let's look at another example.
Example: Now!Let's make the server write something else. We could, for example, ask it to write the current date and time:
We make the server write the date and time when the ASP page is displayed. Note that if you refresh the page in the browser, a new time is written. The server writes the current date and time each time the page is sent to a client.
It is also important to note that the HTML code contains only the date - not the ASP codes. Therefore, the example is not affected by which browser is used. Actually, all functionalities that are made with server-side technologies always work in all browsers!
In the example, we used Now - which is a function that returns the current date and time on the server.
Let's try to extend the example by writing both a string and a function - separated by & - it's done like this:
<html><head><title>My first ASP document</title></head><body>
<% Response.Write "<p>Current time: " & Time & "</p>" %>
</body></html>
Will look like this in the browser:
And the corresponding HTML code:
As you can see, the function Time returns the current time. There are several functions that relate to time and date. And that's exactly what we'll look at in the next lesson.
Lesson 4: Working with time and datesIn this lesson, we will try to look at the many different options for working with time and dates in ASP. We went through two very simple functions in the previous lesson mostly to show you what ASP is. In this lesson, we will look at some more functions and advanced techniques.
Time and date functionsVBScript contains three important functions that return the current time and/or date on the server:
NowReturns the current date and time on the server.
DateReturns the current date on the server.
TimeReturns the current time on the server.
This example illustrates the three functions:
<html><head><title>Time and date</title>
</head><body><% Response.Write "<p>The function Now returns: " & Now & "</p>"
Response.Write "<p>The function Date returns: " & Date & "</p>"
Response.Write "<p>The function Time returns: " & Time & "</p>"
%></body></html>
Show example
Formatting time and datesAs you've probably noticed, the functions returns the date and time in some very "raw" formats. But there are, of course, different ways to format both the date and time.
The option we want to cover in this lesson is based on the function FormatDateTime. In a later lesson, we will make our own function that can return exactly the format we want. But first, let us look at the predefined options in VBScript.
FormatDateTimeReturns a time in specified format
FormatDateTime is a function exactly like the functions above but the function FormatDateTime must be called with arguments. This means that you call the function in the following form:
FormatDateTime(Date[, NamedFormat])
The NamedFormat argument may take the following values:
vbLongDate vbShortDate vbLongTime vbShortTime
Let us look at an example that shows the different date and time formats. In the example below, we call the function with Now. But it can be called with any date and time (eg. "14-02-2011 12:34:01")
<html><head><title>time and date</title></head><body>
<% Response.Write "Today it is " & datetime format (Now,
vbLongDate)Response.Write " and the time is " & Format datetime (Now,
vbShortTime)
%></p>
</body></html>
Show example
More functions related to date and timeThere are a number of other functions that return parts of a date or time. They are all called with a date or time as an argument. We will not go into depth with them all here, but just show one example and briefly describe the others.
As an example, we look at the function Minute which returns a number corresponding to the minutes in the argument (the specified time). The function is called in the following form:
Minute(time)
Therefore, to find out what minute we're in right now, we write:
Minute(Time)
The function returns the number 42 - which is exactly the minutes in the time right now: 09:42:48
The following functions relate similarly to dates or times. As an example they are called with Now (28-07-2012 09:42:48)
YearReturns the current year from a date - with today's date, it returns: 2012
MonthReturns the current month from a date - with today's date, it returns: 7
DayReturns the current day of the month from a date - with today's date, it returns: 28
WeekdayReturns the current day of the week from a date - with today's date, it returns: 6NOTE: this function has to be called with the argument "the first day of the week"
(eg. Monday or Sunday) as well- like this: Weekday(Now,vbMonday)
HourReturns the current hour from a time - with the current time, it returns: 9
MinuteReturns the current minute from a time - with the current time, it returns: 42
SecondReturns the current second from a time - with the current time, it returns: 48
What can you use it for?All this may seem a bit theoretical at this stage. After all, what on earth can you use a function like Second for? More importantly, when will you learn something you can actually use on your pages?
The answer is that what you learn here are building blocks - the only limitations to what you can build are your creativity and imagination! I would venture to say that you have already learned more than you think. For example, do you think you can make a website with different background images each day of the week and that works in all browsers?
The example above, with a dynamic background image, simply requires that you make seven images and name them background_1.png, background_2.png, background_3.png, etc.
If a user then enters your site on a Tuesday the site will have background_2.png as background, and the next day, background_3.png. Easy and simple!.
In the next lesson, you will be introduced to new building blocks that can be used to make loops and repetitions in your codes.
In VBScript it is possible to manage the execution of scripts with different control structures. In this lesson, we will look at loops. Loops can be used to repeat parts of a script a specified number of times or until a certain condition is met.
For ... NextThe syntax for a For ... Next loop is:
For Initializion To Expressions
StatementNext
The statement is repeated 'expression' minus 'initialization' number of times. If it doesn't make sense, look at this example:
<html><head><title>Loops</title>
</head><body>
<%Dim t
For t = 1 to 50 Response.Write "<p>This text is repeated 50 times</p>"
Next%>
</body>
</html>
Show example
In the example, a variable named "t" is used. As you can see, we start by writing Dim t, this is called to declare a variable. You do not need to declare your variables, but it's considered to be good code practice, and it makes your code more clear and easier to understand if someone else at a later time has to read through your code.
Otherwise the example is almost self explanatory. The loop asks the server to repeat the text while t is between 1 and 50. Each time the loop reaches "Next" the variable t will be increased by 1.
It is possible to specify what value that the variable t should be increased by in each loop. This is done with Step as shown in the following example:
<html><head><title>Loops</title>
</head><body>
<%Dim t
For t = 1 to 50 Step 5 Response.Write "<p>variable t is now = " & t & "</p>"
Next
%>
</body></html>
Show example
In the example above, t is growing with the value 5 in each loop. Also note how the value t is used as part of the sentence.
Do ... LoopAnother way to make a loop is with Do ... Loop on the form:
Do {While | Until} condition StatementLoop
Or you can set the condition after Loop instead (no practical difference):
Do StatementLoop {While | Until} condition
Regardless of whether you use While or Until, the syntax is almost normal English:
Response.Write "<h" & t & ">Heading Levels</h" & t & ">"
t = t + 1
Loop%>
</body></html>
Show example
Did you catch it? First we declare the variable t and set the value to 1. Then in each loop, we write a heading at level t (h1, h2, h3, etc.) until t is equal to six.
Loops within loopsIn principle, there are no limitations on how loops can be used. For instance, you can easily put loops inside loops and thereby create many repeats.
But be careful! ASP becomes slower the more complicated and extensive the scripts. For instance, look at the next example where, with three loops, we can write over 16 million colors!
In order not to make the page slow, we have drastically reduced the number by putting the step to 30 and thereby limited the number of colors to 512.
<html>
<head><title>Loops </title></head><body>
<%Dim intRed, intGreen, intBlue, strColor
For intRed = 0 to 255 Step 30
For intGreen = 0 to 255 Step 30 For intBlue = 0 to 255 Step 30
In the example, each of three primary colors (red, green and blue) can have a value between 0 and 255. Any combination of the three colors creates a color on the form rgb(255,255,255). The color code is used as color in a <span>.
Loops becomes more useful when you've learned a little more. When you understand the principle in a loop, you can proceed to the next lesson, where we look at conditions.
Lesson 6: ConditionsConditions are used to execute part of a script only if some predefined requirements (conditions) are fulfilled. For example, a condition could be that a date must be after 1/1 2012 or that a variable is greater than 7.
If... Then ... ElseThe first type of condition we will look at is the If-Then-Else condition, which has the following syntax:
Again, the syntax is very close to ordinary English: If a condition is met Then execute something or Else execute something else.
In lesson 4, you learned how to find the number of a month. In the following example, we will use the month number in If-Then-Else condition to find out what season it is:
<html><head><title>Loops</title></head><body><%
If Month (Date) = 3 Then
Response.Write "<p>Now it's spring!</p>"Else Response.Write "<p>I do not know what season it is!</p>"
End If
%></body></html>
As you can see, it's not a particularly smart condition - it only works when it's March!
However, there are plenty of ways to improve the condition and make it more precise. Below are listed comparison operators that can be used in the statement:
= Equals< Less than> Greater than<= Less than or equal to> = Greater than or equal to<> Not equal to
The operators can be used to develop more precise conditions, so now we can expand the above example to include all the spring months:
<html><head><title>Loops</title>
</head><body><%
If Month(Date)> = 3 AND Month(Date) <= 5 Then
Response.Write "<p>Now it's spring!</p>"
Else Response.Write "<p>Now it's either winter, summer or autumn!
</p>"
End If
%></body></html>
Let us take a closer look at the extended condition:
Month(Date)> = 3 AND Month(Date) <= 5
The condition can be translated into:
If the month is greater than or equal to 3, and the month is less than or equal to 5
Smart, eh? Operators play a significant role in many different parts of ASP.
But it still only works with March, April and May. All other months are not yet covered by the condition. Let us try to develop the condition a little more.
If ... Then ... ElseIf ... Else
Using ElseIf, we can expand the condition and make it work for all months:
<html><head><title>Loops</title>
</head><body><%
If Month(Date)> = 3 AND Month(Date) <= 5 Then
Response.Write "<p>Now it's spring!</p>"
Elseif Month(Date)> = 6 AND Month(Date) <= 8 Then Response.Write "<p>Now it's summer!</p>"
Elseif Month(Date)> = 9 AND Month(Date) <= 11 Then Response.Write "<p>Now it's autumn!</p>"
Else
Response.Write "<p>Now is the winter!</p>"End If
%></body></html>
To write conditions is all about thinking logically and being methodical. The example above is pretty straightforward, but conditions can get very complex.
Select ... CaseAnother way of writing conditions is to use the Select Case method:
This method is based on an expression and then list different "answers" or "values" with related statements. The easiest way to explain the method is to show an example.
As you may remember from lesson 4, the function Weekday returns the current weekday. This can be used in an example where we write the name of the day (instead of a number):
<html><head><title>Loops </title></head><body><%
Select Case Weekday(Now,vbMonday)
Case 1 Response.Write "Monday"Case 2 Response.Write "Tuesday"Case 3
Response.Write "Wednesday"
Case 4 Response.Write "Thursday"Case 5 Response.Write "Friday"
Case 6 Response.Write "Saturday"Case Else
Response.Write "Sunday"
End Select
%></body></html>
Often Select Case can be a good alternative to If-Then-Else. What you should use in a given situation depends on which method you find easiest and most logical. Making your scripts logical and clear can be a great challenge.
In the next lesson, we will look at how you can add comments to your scripts to explain how they work. Good comments can be crucial if you or somebody else has to make changes in your codes at a later stage.
Lesson 7: Comment your scriptsAs you may have noticed, ASP scripts can easily look confusing. In this lesson, we cover why comments are important and how to insert them into your scripts.
Why is it important to comment your scripts?When you are coding, you are writing commands to a server/computer and need to use a highly formal language which may not clearly reflect your thoughts when making the script.
Therefore, it can be difficult for others (or yourself) to understand how the script is structured, and thus hard to identify and correct errors in the script.
Comments can be used to write short explanatory text in the script. The server completely ignores the comments, and the comments do not affect the actual functionality of the script.
In the business world, it is often a requirement that scripts and programming are commented, otherwise it would be too risky for a company to take over a system in which it would be too difficult to find and correct errors.
How do you insert comments?It is quite easy to insert a comment. You simply start the comment with an apostrophe: " ' ".
Take a look at this example from lesson 5, now with comments:
<html><head><title>Loops</title></head><body>
<%' Here we write color codes using three loops
' Three variables for the colors (red, green and blue)' and a variable for the color code:Dim intRed, intGreen, intBlue, strColor
' Red can be between 0 and 255For intRed = 0 to 255 Step 30
' Green can be between 0 and 255
For intGreen = 0 to 255 Step 30
' Blue can be between 0 and 255 For intBlue = 0 to 255 Step 30
' The color code is made on the form rgb(red,green,blue)
For the sake of the example, we have included many extra comments, so it should be clear that you are far better off debugging a script with comments than without.
Therefore, remember to comment your scripts!
Lesson 7: Comment your scriptsAs you may have noticed, ASP scripts can easily look confusing. In this lesson, we cover why comments are important and how to insert them into your scripts.
Why is it important to comment your scripts?When you are coding, you are writing commands to a server/computer and need to use a highly formal language which may not clearly reflect your thoughts when making the script.
Therefore, it can be difficult for others (or yourself) to understand how the script is structured, and thus hard to identify and correct errors in the script.
Comments can be used to write short explanatory text in the script. The server completely ignores the comments, and the comments do not affect the actual functionality of the script.
In the business world, it is often a requirement that scripts and programming are commented, otherwise it would be too risky for a company to take over a system in which it would be too difficult to find and correct errors.
How do you insert comments?
It is quite easy to insert a comment. You simply start the comment with an apostrophe: " ' ".
Take a look at this example from lesson 5, now with comments:
<html><head><title>Loops</title></head><body>
<%' Here we write color codes using three loops
' Three variables for the colors (red, green and blue)' and a variable for the color code:Dim intRed, intGreen, intBlue, strColor
' Red can be between 0 and 255For intRed = 0 to 255 Step 30
' Green can be between 0 and 255
For intGreen = 0 to 255 Step 30
' Blue can be between 0 and 255 For intBlue = 0 to 255 Step 30
' The color code is made on the form rgb(red,green,blue)
For the sake of the example, we have included many extra comments, so it should be clear that you are far better off debugging a script with comments than without.
Therefore, remember to comment your scripts!
Lesson 8: ArraysIn this lesson we will look at what an array is, how it is used, and what it can do.
Arrays can be a little difficult in the beginning. But give it a try anyway... we've tried to make it as easy as possible.
What is an array?An array is a set of indexed elements where each has its own, unique identification number.
Sound confusing? It's actually not that complicated.
Imagine a list of words separated by commas. It is called a comma separated list, and it could, for example, look like this:
apples, pears, bananas, oranges, lemons
Then try to imagine dividing the list at each comma. Next, give each section a unique identification number like this:
What you see is an array. We can, for example, name the array "fruits". The idea is that we can access the array with a number and get a value back, like this:
This is the idea behind arrays. Let us try to use it in practice.
How do you use an array?We will continue with the fruit example. Step by step, we will make it work as a real array. First, we set a variable equal to the list of fruits:
This example is very simple, and it might be a difficult to see the advantage of using an array for this particular task. But just wait... arrays can be used for many very useful things.
Loop through an arrayBack in lesson 5 you learned about loops. Now we will look at how you can loop through an array.
When you know how many elements an array contains, it is not a problem defining the loop. You simply start with 0 and let the loop continue to the number of items available. In the example with the fruits, you would loop through the array like this:
' Create an array by splitting the list (with comma as delimiter)
arrFruits = Split(fruit list ,",")
Response.Write "<p>List of fruits:</p> Response.Write "<ul>"
' Loop through the array arrFrugt
For t = 0 to 4 Response.Write "<li>" & arrFruits (t) & "</li> Next
Response.Write "</ul>"%>
</body></html>
Show example
As you can see, the variable t (which increase from 0 to 4 in the loop) was used to call the array.
How to find the size of an arrayBut what if we add another fruit to the list? Then our array will contain an element more - which will get the identification number 5. Do you see the problem? Then we need to change the loop, so it runs from 0 to 5, or else not all of the elements will be included.
Wouldn't it be nice if we automatically could find out how many elements an array contains?
That is exactly what we can do with the functions Ubound and Lbound, which return respectively the highest and lowest identification number in an array.
With these two functions, we can determine the size of any array. This can be used to create a loop that works regardless of the number of elements:
<% For t = LBound(arrFrugt) to UBound(arrFrugt) Response.Write arrFruits(t) Next%>
This loop will work regardless of how many or few elements the array contains.
Notice that we use the function Array instead of the function Split to create an array.
Ok. Enough about arrays! In the next lesson, you will learn how to write your own functions.
Lesson 9: FunctionsIn previous lessons you have learned to use functions like Ubound and Weekday. In this lesson, you will learn to create your own functions using Function .
What is a function?A function process inputs and return an output. It can be useful if, for example, you have a wide range of data you have processed or if you have calculations or routines in other ways that must be performed many times.
Function Name(list of parameters) StatementEnd Function
This way, we can make a very simple function that can add the value 1 to a number. It could look like this:
Function AddOne(t) t = t + 1 AddOne = tEnd Function
Our function is named AddOne and must be called with a number - e.g. 34....
Response.Write AddOne(34)
... which (surprise!) will return 35.
The example above processes a number, but functions can work with text, dates or anything else. You can also create functions that are called by many different parameters. In this lesson you will see different examples of functions.
Example: Function with more parametersAs mentioned above, you can easily create a function that can be called with more parameters. In the next example, we'll create a function that is called with three numbers and then returns the value of the three numbers added together:
Ok. Now that was almost too simple! But the point was just to show you that a function can be called with more parameters.
Example: English date and timeLet us try to make a slightly more complex function. A function that's called with a date and time returns it in the format: Wednesday, 15 February, 2012, 10:00:00 AM
<html><head><title> Loops </title></head><body>
<%Function EnglishDateTime(strDate)
' Array with the English names for days of the week arrDay = "Monday, Tuesday, Wednesday, Thursday, Friday,
' Test functionResponse.Write EnglishDateTime(Now)
%></body></html>
Show example
Please note how 'ArrMonth' and 'EnglishDateTime' are constructed over several lines. This is done so that users with a low screen resolution better can see the example. The method has no effect on the code itself.
The function above works on all web servers regardless of language. This means that you can use such a function if your website, for example, is hosted on a French server, but you want English dates.
At this stage, we will not go into more depth with functions, but now you know a little about how functions work.
Lesson 10: Passing variables in a URLWhen you work with ASP, you often need to pass variables from one page to another. This lesson is about passing variables in a URL.
How does it work?Maybe you have wondered why some URLs looks something like this:
http://html.net/page.asp?id=1254
Why is there a question mark after the page name?
The answer is that the characters after the question mark are a HTTP query string. A HTTP query string can contain both variables and their values. In the example above, the HTTP query string contains a variable named id, with the value 1254.
Here is another example:
http://html.net/page.asp?navn=Joe
Again, you have a variable (name) with a value (Joe).
How to get the variable with ASP?
Let's say you have an ASP page named people.asp. Now you call this page using the following URL:
people.asp?name=Joe
With ASP you will be able to get the value of variable 'name' like this:
Request.QueryString("name")
So, you use the object Request and QueryString to find the value of a named variable. Let's try it in an example:
When you look at the example above, try to replace the name "Joe" with your own name in the URL and then call the document again! Quite nice, eh?
Several variables in the same URLYou are not limited to pass only one variable in a URL. By separating the variables with &, multiple variables can be passed:
Response.Write "<h1>You are " & Request.QueryString("age") & " years old</h1>"
%>
</body></html>
Show example (keep an eye on the URL)
Now you have learned one way to pass values between pages by using the URL. In the next lesson, we'll look at another method: forms.
Lesson 11: Passing variables with formsInteractive websites require input from users. One of the most common ways to get input are with forms.
In this lesson, we will look at how to build forms and process inputs on the server.
<form>When you code a form, there are two particular important attributes: action and method.
action
Is used to enter the URL where the form is submitted. It this case it would be the ASP file that you want to handle the input.
methodCan either have the value "post" or "get" which are two different methods to pass data. At this point, you don't need to know much about the difference, but with "get", the data is sent through the URL, and with "post", data is sent as a block of data through standard input service (STDIN).
An HTML page with a formThe page that contains the form doesn't need to be an ASP file (but it can be). It need not even be on the same site as the file that will receive the data.
In our first example, we will look at a very simple form with one text field:
Now we come to the fun part: receiving and handling the data with ASP.
Requesting form data with ASPWhen you need to request data from a form - and many other places (we will come back to that) - you use the object request. Since our data was submitted through a form using the method "post", we write:
Request.Form("fieldname")
Which returns the value of the text field in the form. Let us try to use it in an example.
First create a page with a form as above. Then make an ASP page named "handler.asp" (notice that this is the name of the page we wrote in the action attribute in our <form>).
The file "handler.asp" shall have the following content:
User input and conditionsIn the next example, we will try to use user input to create conditions. First, we need a form:
<html><head><title>Form</title></head><body>
<form method="post" action="handler.asp">
<p>What is your name:</p>
<input type="text" name="username"></p>
<p>What is your favorite color:<input type="radio" name="favoritecolor" value="r" /> Red
<input type="radio" name="favoritecolor" value="g" /> Green <input type="radio" name="favoritecolor" value="b" /> Blue </p>
<input type="submit" value="Submit" />
</form>
</body></html>
Which will look like this in the browser:
Now we will use these inputs to create a page that automatically changes background color according to what the user's favorite color is. We can do this by creating a condition (see lesson 6) that uses the data the user has filled out in the form.
Select Case Request.Form ("favoritecolor")Case "r"
strBackgroundColor = "rgb(255,0,0)"Case "g"
strBackgroundColor = "rgb(0255.0)"
Case "b"strBackgroundColor = "rgb(0,0,255)"
Case ElsestrBackgroundColor = "rgb(255,255,255)"
End Select%>
<html><head><title>Form</title>
</head><body style="background: <% = strBackgroundColor %>;">
<% Response.Write strHeading %>
</body></html>
The background color will be white if the user has not chosen any favorite color in the form. This is done by using Case Else to specify what should happen if none of the above conditions are met.
But what if the user does not fill out his name? Then it only says "Hello" in the title. We will use an extra condition to change that.
<title>Form</title></head><body style="background: <% = strBackgroundColor %>;">
<% Response.Write strHeading %>
</body></html>
Show example.
In the example above we use a condition to validate the information from the user. In this case, it might not be so important if the user did not write his name. But as you code more and more advanced stuff, it's vital that you take into account that the user may not always fill out forms the way you had imagined.
Lesson 12: SessionsWhen you visit a website, you do a number of different things. You click from one page to another. Perhaps you also fill out a form or purchase a product.
As a web developer, such information is of great importance to developing successful web solutions.
Suppose, for example, that you want to make a site where some pages are protected with login and password. To make this protection effective, the password-protected pages should have access to information on whether the user has logged in at an earlier time. You must, in other words, be able to "remember" what the user did earlier.
This is exactly what this lesson is about - how you can use Sessions in ASP to store and retrieve information during a user's visit to your site.
Session objectThe Session object allows you to manage information about a user's session. You can write smart applications that can identify and gather information about users.
A session can begin in different ways. We will not go into technical details here but focus on the case where a session starts by a value is being stored in the Session object. A session ends/dies if the user hasn't requested any pages within in a certain timeframe (by the standard 20 minutes). Of course, you can also always end/kill a session in your script.
Let us say, 50 people are clicking around on the same site, eg. a web shop, at the same time. Information on what they each of them have in their shopping cart would best be stored in the Session object. In order to identify the individual users the server uses a unique user ID that is stored in a cookie. A cookie is a small text file stored on the user's computer - more about cookies in lesson 13. Therefore, sessions often require support of cookies in the user's browser.
When you requested this page, I stored the current time in a session. I did this so that I can now show you an example of how a session works.
I named the item "StartTime" and stored it by adding the following line in my ASP script:
<%Session ("StartTime") = Now%>
Thereby, a session was started. As described above, each session is given an ID by the server.
Your session has the following ID: 51674855c875ba3e9d63da05c261b648
At any time, I can call the "StartTime" from the session by writing:
<%Response.Write Session("StartTime")%>
Which would reveal that the page was requested at 7/28/2012 9:48:43 (according to the clock on this web server).
But what is interesting is that the information remains in the Session object, even after you have left this page. The information will follow you until your session ends.
By default, a session lasts for 20 minutes, then it dies automatically. But if you want a session to last longer or shorter, you can define the desired time in minutes this way:
<%Session.Timeout = 60%>
In this case, the session will last for 60 minutes before it dies. Too many sessions at the same time overload the server. Therefore, you should not let sessions run longer than necessary.
If you want to stop a session, it can always be killed in this way:
<%
Session.Abandon
%>
Let us try to look at another example where sessions are used: a password solution.
Login system with sessionsIn the following example, we will make a very simple login system. We will use many of the things they have learned in previous lessons.
The first thing we need is a form where people can enter their username and password. It could look like this:
In this file, we check whether it is the correct username and password that has been entered. If that is the case, we set a session that says that this user is logged in with the correct username and password.
<html>
<head><title>Login</title>
</head><body><%' Check if username and password are correctIf Request.Form("username") = "asp" AND Request.Form("password")
= "asp" Then
' If correct, we set the session to YES Session("login") = "YES" Session.Timeout = 30 Response.Write "<h1> You are now logged in</h1>"
Response.Write "<p><a href='document.asp'>Link to protected file</a> </p>"
Else
'If not correct, we set the session to NO
Session("login") = "NO" Session.Timeout = 30 Response.Write "<h1>You are NOT logged in</h1>"
Response.Write "<p> <a href='document.asp'>Link to protected file</a></p>"
End If%>
</body></html>
In the protected files, we want to check whether the user is logged in properly. If this is not the case, the user is sent back to the login form. This is how the protection is made:
<%' If the user is not logged in' send him/her to the login form
If Session ("login") <>"YES" Then
Response.Redirect "form.asp"End If%>
<html><head><title>Login</title></head>
<body><h1>This document is protected</h1>
<p>You can only see it if you are logged in.</p></body></html>
Click here to test the login system
Now you've been introduced to the Session object. In the next lesson we are in same alley and take a closer look at cookies.
Lesson 13: CookiesHow and what kind of information websites are collecting from their users, and especially how they use it, is a hot topic. Often cookies are mentioned as an example of how information is collected and pose a threat to your privacy. But are there reasons to be worried? Judge for yourself. Once you have gone through this lesson, you will know what can be done with cookies.
What is a cookie?A cookie is a small text file in which a website can store different information. Cookies are saved on the user's hard drive and not on the server.
Most cookies expire (delete themselves) after a predetermined time period, which can range from one minute to several years. But the user can also identify and delete any cookies on his/her computer.
Most browsers - such as Microsoft Internet Explorer, Mozilla Firefox and Google Chrome - can be configured to let the user choose whether or not he/she will accept a cookie. But then, why not just say no to all cookies? It is possible. But many websites would not work as intended without cookies, since cookies in many contexts are used to improve the usability and functionality of the website.
How is information stored in a cookie?It easy to set or modify a cookie in ASP with Response. Cookies . In the first example, we will create a cookie and set the value.
First, you need a name for the cookie. In this example we will use the name "HTMLTest". Next, you set the value of the cookie like this:
In this example, we stored information about a user's name and interests. This information can, for example, be useful to target the website specifically for the individual visitor.
How do you retrieve the value of a cookie?To get the value of the cookie, Request. Cookies is used. For example, if we need the information from the example above, we do it like this:
<% ' Retrieve values from the cookiestrName = Request.Cookies("HTMLTest")("Name") strInterest = Request.Cookies("HTMLTest")("interest")
' Write to the clientResponse.Write "<p>" & strName & "</p>"
Response.Write "<p> Your interest is " & strInterest & "</p>"
%>
Who can read the cookie?By default, a cookie can be read at the same second-level domain (eg. html.net) as it was created. But by using the attributes domain and path, you can put further restrictions on the cookie.
' The cookie can only be read by pages in this folderResponse.Cookies ("HTMLTest").Path = "/tutorials/asp"
' Write the information to the clientstrText = Request.Cookies("HTMLTest")("text") Response.Write "<p> & strText & "</p>"
%>
Show example
The cookie is being placed on your hard drive. Depending on what operating system you use, your cookies may be saved in different places. Once you find them, they will probably look like this:
As you can see, a cookie is an normal text file that can be open with for example Notepad. The contents of the cookie we have just created will probably look something like this:
We will not go into detail with the different codes, but simply note that the user has full control over cookies on his/her computer.
In this lesson we have looked at what cookies can do but not what they can be used for. It's a common concern that some sites use cookies for inappropriate activities. But in most cases, cookies are used to make sites more user-friendly or relevant for the individual users.
If you choose to use cookies on your site it might be a good idea to tell your users that your site uses cookies. This can, for example, be communicated in a privacy policy or registration process.
Lesson 14: The File System ObjectWith the FileSystemObject you can access the server's filesystem. This allows you to manipulate drives, folders and text files in ASP scripts.
For example, you can use the {0}{1/}FileSystemObject{/0} to read or write a text file. Or you can list all files in a specified folder. There are many possibilities and the FileSystemObject can save you lots of tedious work.
Here, we'll look at how you can use the FileSystemObject to work with drives, folders and files. The goal is to give you a quick overview. In the next lessons, we will look more closely at the different possibilities with the FileSystemObject.
DrivesWe start by looking at the computer's drives. Not because this is what you will be using the most, but because it's sensible to start with drives before digging into the topic of folders and files.
In the example below, we get all the drives on the server listed. This is done by the FileSystemObject, which creates an array with the drives. Each drive letter is then written as we run through the array.
' Loop through the array and write the drive letterFor Each d in dc Response.Write d.DriveLetter & "<br />"
Next%>
</body></html>
Show example
Now we have listed all the drives on the server. It is also possible to retrieve additional information about each drive. For example, let's look closer at the E drive and examine what type of drive it is. For this, we use the property DriveType:
At this time, we will not go into more depth with drives. See Drive Object in the VBScript documentation if you want more information on the different properties, etc.
FoldersThe FileSystemObject also allows you to work with folders on the server. But before we begin to look at the Folder object, we need to be able to find the physical location of a folder or file.
The problem is that your website normally is hosted on a web-hosting server. Therefore, you probably don't know the physical location of a folder or a file. But help is near: You can use the method Server. Mappath to find the physical location of any file or folder.
For example, to find the physical location of the folder we are in right now, we write:
We now know that we are in the folder "www2" on drive d at the web server - a very nifty feature!
Let's now use this method together with the FileSystemObject and the FolderObject. We will not go through all the different possibilities - only a few selected. Again, see the documentation for a complete listing.
DateCreatedReturns the date and time when a file or folder was created.
DateLastModifiedReturns the date and time when a file or folder was edited/modified.
SizeReturns the size of a file or a folder (including all files and subfolders) in bytes.
Let us try to find the three properties of the folder we are in now, which is http://www.html.net/tutorials/asp/.
In the next lesson, we will continue to look at the FileSystem object. Among other things, we will look at how to read from and write to a text file.
Lesson 15: Reading from a text fileIn the previous lesson, we learned how to use the FileSystemObject to access the server's filesystem. In this lesson, we will use this learning to read from an ordinary text file.
Text files can be extremely useful for storing various kinds of data. They are not quite as flexible as real databases, but text file typically don't require as much memory. Moreover, text files are a plain and simple format that works on most systems.
Open the text fileWe use the OpenTextFile method to open a text file. The syntax is as follows:
Mode can set to 1 (ForReading), 2 (ForWriting) or 8 (ForAppending). In this lesson we will only read from a file and, therefore, use ForReading. In the next lesson, we will learn to write to a file.
The examples in this lesson use the text file unitednations.txt. This is a simple list of the Programmes and Funds of the United Nations and their domains. You can either download the file, or you can create your own file and test the examples with it.
' Find the physical location of the text filefilespec = Server.Mappath("/tutorials/asp/unitednations.txt")
' Open the text fileSet f = fso.OpenTextFile(filespec,1)
' Close the text filef.Close%>
Example 1: Read a line from the text fileWith the method readline, we can read a line from the text file. This method reads until the first line break (but not including the line break).
<html>
<head><title>Reading from text files</title></head><body><%Dim fso, f, filespec
Set fso = CreateObject("Scripting.FileSystemObject")filespec = Server.Mappath("/tutorials/asp/unitednations.txt")
' Read line from the text file and write the contents to the client
Response.write f.readline
f.Close%></body></html>
Show example
Example 2: Read all lines from the text file
<html>
<head><title>Reading from text files</title></head><body><%Dim fso, f, filespec
Set fso = CreateObject("Scripting.FileSystemObject")filespec = Server.Mappath("/tutorials/asp/unitednations.txt")
Set f = fso.OpenTextFile (filespec,1)
' Read line by line until end of file
Do While Not f.AtEndOfStream Response.write f.ReadLine & "<br />" Loop
f.Close
%>
</body></html>
Show example
In this case we chose to loop through all the lines, but we could have achieved the same result with the method ReadAll . If you work with very large text files, be aware that the ReadAll method uses more resources than the ReadLine method. For smaller files, it makes very little difference.
You don't need to read all lines in a file. With the method SkipLine, you can skip lines.
This is shown in the example below, where the first 5 lines in the file are skipped and whereafter the sixth line is read:
<html><head><title>Reading from text files</title>
</head><body><%Dim fso, f, filespec
Set fso = CreateObject("Scripting.FileSystemObject")filespec = Server.Mappath("/tutorials/asp/unitednations.txt")Set f = fso.OpenTextFile(filespec,1)
' Skip the first five lines
For intLine = 1 to 5 f.SkipLine Next
' Write the sixth lineResponse.write f.readline & "<br />"
f.Close
%></body></html>
Show example
Example 4: A simple link directoryAs mentioned at the beginning of this lesson, text files can be an excellent data storage. This is illustrated in the next example where we create a simple link directory from the contents of the text file unitednations.txt.
The file is systematically written with the name of the program, then a comma, and then the domain. As you can probably imagine, more information could easily be stored in this comma-separated data file.
To get the information in each line, we use an array. See Lesson 8 for more information on arrays.
Quite handy, right? In principle, you could now just expand the text file with hundreds of links or perhaps expand your directory to also include address information.
In the next lesson, we will look at how to write to a text file.
Lesson 16: Writing to a text fileIn the previous lesson, we learned to read from a text file. In this lesson, we will learn to write to a text file.
The two methods are very similar, but there is one very important difference: You must have write permissions to the file. This means that the file will have to be located in a folder where you have the necessary permissions.
With most web hosts, you will normally have one folder with write permissions. It's often called something like "cgi-bin", "log", "databases" or something similar. Read more on your
web host's support pages. If you work locally on your own computer, you can set the permissions yourself: right-click on the folder and choose "Properties".
Note that it is the text file that needs to be in the folder with write permissions - not the ASP file.
Open the text file for writingIn the same way as when reading from a text file, the OpenTextFile method is used for writing, but this time we set the mode to 2 (ForWriting) or 8 (ForAppending).
The difference between ForWriting and ForAppending is where the 'cursor' is located - either at the beginning or at the end of the text file.
In the examples in this lesson we use an empty text file called textfile.txt - but you can, of course, make your own text file if you like.
First, let us try to open the text file for writing:
<%' VariablesDim fso, f, filespec
' FileSystemObject
Set fso = CreateObject("Scripting.FileSystemObject")
' Find the physical location of the text filefilespec = Server.Mappath("/tutorials/asp/textfile.txt")
' Open the text fileSet f = fso.OpenTextFile(filespec,2)
'Close the text filef.Close
%>
Example 1: Write a line to the text fileTo write a line we must use the method WriteLine, like this:
<html>
<head><title>Reading from text files</title></head>
Set fso = CreateObject("Scripting.FileSystemObject")filespec = Server.Mappath("/tutorials/asp/textfile.txt")
Set f = fso.OpenTextFile(filespec,2)
' Write a text line
f.WriteLine "VBScript and ASP is fun!"
'Open file for reading, and read the line Set f = fso.OpenTextFile(filespec,1)Response.write f.ReadLine
f.Close%>
</body></html>
Show example
Since we opened the file "ForWriting", the line is added at the top, and thus overwrites the existing line. If we instead open the file "ForAppending", the line is added at the bottom of the text file, which then will increase by one line each time it's written to.
Example 2: Adding a text block to a text fileOf course, it is also possible to add an entire text block, instead of just a single line. This is done with the method Write, like this:
<html><head><title>Reading from text files</title></head><body><%
Dim fso, f, filespec
Set fso = CreateObject("Scripting.FileSystemObject")filespec = Server.Mappath("/tutorials/asp/tekstfil.txt")Set f = fso.OpenTextFile(filespec,2)
Do While Not f.AtEndOfStream Response.write f.ReadLine & "<br />"
Loop f.Close%></body>
</html>
Show example
In the next lessons, we look at another way of storing data: databases.
Lesson 17: DatabasesThere are many different databases: MS Access, MS SQL Server, Oracle SQL Server, MySQL and many others. In this tutorial, we will use the Microsoft Access database. Access is the natural place to start when you want to use databases in ASP.
In this lesson, we will start by looking at the Access database that we will use in the next lessons. Access is part of the Microsoft Office family and is included in some of the Office suites. You need to have Microsoft Access installed on your computer in order to go through this lesson and the next lessons. A trial version can be downloaded at http://office.microsoft.com.
Below you can download the database used in the examples in this tutorial. In the examples, Access 2010 is used but there are no significant differences in the screens that appear.
Download the database
About Microsoft AccessOnce you've downloaded and opened the database, you will see a screen with a list of the tables in the database. We will only use one table in the database. The table is named "people" and contains names and birth dates.
You open the table by double clicking on it. There are many different ways you can work with tables in Access. We will not go into depth with Access as a tool, but only look at the very basics you need to know to use Access as a database for your ASP applications.
The table opens by default in Datasheet View. If you are used to working with spreadsheets, or maybe has used Access before, the table view will look familiar to you with columns and rows:
As you can see, in the table, we have listed some of the residents from Duckburg.
There are primarily two different ways of viewing a table in Access: Design View and Datasheet View. Above, you see the table in Datasheet view, meaning that you see the table with all the values. In the upper left corner of the program you can switch between the two view types:
The Design View gives you an overview of the columns and the data types. In a database, it does matter what type of content there is in a column. In our database, three different data types are used: text, number and date. There are many different options in the Design View. See the help feature in Access for more information.
This was a short introduction to Microsoft Access. In the beginning, you don't need to change anything in the database and can use it as is. Later, you can create your own databases, which is actually easy and straightforward.
In the next lesson, we will look at where to place the database and how to create a database connection.
vsLesson 19: Get data from databaseIn the previous lessons, we have learned to create a database in Access and to make a database connection. Now it is time to retrieve content from the database to our ASP pages.
This is really one of the most important lessons in this tutorial. Once you have read and understood this lesson, you will realize why database-driven web solutions are so powerful, and your views on web development will be expanded dramatically.
SQL queries
To retrieve data from a database, you use queries. An example of a query could be: "get all data from the table 'people' sorted alphabetically" or "get names from the table 'people'."
To write such queries, you use the language Structured Query Language (SQL).
Fortunately, SQL is very easy to learn. Try looking at this simple example:
Get all data from the table 'people'
Will be written like this in SQL:SELECT * FROM people
The syntax is pretty self-explanatory. Just read on and see how SQL statements are used in the examples below.
Example 1: Retrieve data from a tableThis example uses the database from lesson 17 and the database connection from lesson 18. Therefore, it is important that you read these lessons first.
The example shows how data in the table "people" is retrieved with a SQL query.
The SQL query returns a result in the form of a series of records. These records are stored in a so-called recordset. A recordset can be described as a kind of table in the server's memory, containing rows of data (records), and each record is subdivided into individual fields (or columns).
A recordset can be compared to a table, as you know it from the Datasheet View in Access:
Viewed this way, each record can be compared to a row in the table. You can move around in a recordset using the methods MoveNext (go to next record), MovePrevious (go to previous record), MoveFirst (go to the first record), and MoveLast (go to the last record).
The code below shows how to use a recordset:
<html><head><title>Retrieve data from database </title></head><body>
<%' Database connection - remember to specify the path to your
' SQL QuerystrSQL = "SELECT * FROM people"' Execute the query (the recordset rs contains the result)Set rs = Conn.Execute(strSQL)
' Loop the recordset rsDo
' Write the value of the column FirstName
Response.Write rs("FirstName") & "<br />"
' Move to next record in rs rs.MoveNext
' Continue until end of recordset (EOF = End Of File)
Loop While Not rs.EOF
' Close the database connectionConn.CloseSet Conn = Nothing%></body></html>
Show example
Notice that for every record how we get the content of the column "FirstName" by typing rs("FirstName"). Similarly, we can get the content of, for example, the column "Phone" by writing rs("Phone").
The order of the recordset is exactly the same as in the table in the database. But in the next example, it will be shown how to sort recordset.
Example 2: Sort the data alphabetically, chronologically or numericallyOften it can be helpful if a list or table of data is presented alphabetically, chronologically or numerically. Such sorting is very easy to do with SQL, where the syntax Order By ColumnName is used to sort according to the column contents.
Look at the SQL statement from the example above:
strSQL = "SELECT * FROM people"
The records can, for example, be sorted alphabetically by the first name of the people this way:
strSQL = "SELECT * FROM people ORDER BY FirstName"
Or chronologically by date of birth like this:
strSQL = "SELECT * FROM people ORDER BY BirthDate"
The sorting can be charged from ascending to descending by adding DESC:
strSQL = "SELECT * FROM people ORDER BY BirthDate DESC"
In the following example the people are sorted by age:
<html><head>
<title>Retrieve data from database </title>
</head><body><%' Database connection - remember to specify path to your
' Continue until end of recordset (EOF = End Of File)Loop While Not rs.EOF
' Close the database connectionConn.Close
Set Conn = Nothing%>
</body></html>
Show example
Try to change the SQL statement yourself and sort the records by first name, last name or phone number.
Retrieve selected dataUntil now, our SQL statement retrieves all rows from the table. But often you need to set criteria in the SQL query for the data to be retrieved. For example, if we only want the rows for those who had a particular phone number or a certain last name.
Say, we only want to retrieve people from the database who hav the phone number "66554433". That could be done like this:
strSQL = "SELECT * FROM people WHERE Phone = '66554433 '"
= Equals< Less> Greater Than<= Less than or equal to> = Greater than or equal to<> Not equal to
In addition, there are some logical operators:
ANDORNOT
See lesson 6 for more information on how to set up conditions.
In the next example, we use conditions to set up a address book.
Example 3: Address bookIn this example we will try to combine many of the things you have just learned. We will make a list of the names from the database where each name is a link to further details about the person.
For this, we need two files - liste.asp and people.asp - with the following code:
The code of list.asp<html><head><title>Retrieve data from the database</title></head><body>
<ul><%
' Database connection - remember to specify path to your database
Conn.CloseSet Conn = Nothing%></dl><p><a href="list.asp">Return to list</a></p>
</body>
</html>
Show example
The address book example is rather simple, but it shows the potential of working with ASP and databases.
Imagine that the database had contained 10,000 products with detailed descriptions. By making a few changes in the above files, you could easily create a product catalogue with more than 10,000 pages with only one database and two ASP files.
Welcome to a world with extensive websites that are easy to develop and maintain. Once you've learned to work with databases, your web solutions will never be the same again.
Lesson 20: Insert data into a databaseWhen you have to insert new data in your Access database, you could download the entire database, manually entering data and then uploading the entire database again. But there is an easier way. In this lesson, we look at how you can insert data into the database directly from your ASP scripts.
Insert data using SQLYou retrieve data from a database in the same way that you use SQL queries to insert data into the database. The syntax of the SQL statement is:
INSERT INTO TableName(column1, column2, ...) VALUES(value1, value2, ...)
As you can see, you can update multiple columns in the SQL statement by specifying them in a comma-separated list. But of course, it is also possible to specify just one column and one value. The columns that are not mentioned in the SQL statement will just be empty.
Example: Insert a new person in the tableAgain, we use the database from lesson 17 . Let's say we want to update the database with an additional person. It could be the person Gus Goose with the phone number 99887766 and 20-04-1964 as the date of birth.
strSQL = "INSERT INTO person(FirstName,LastName,Phone,BirthDate) VALUES('Cousin','Gus','99887766 ','20-04-1964')" Conn.Execute(strSQL)
As you can see, SQL statements can get quit long, and you can easily lose track. Therefore, it can be an advantage to write the SQL statement in a slightly different way:
' The SQL statement is executed Conn.Execute (strSQL)
' Close the database connectionConn.CloseSet Conn = Nothing%>
<h1>The database is updated!</h1></body></html>
Save user input into a databaseOften you want to save user input in a database.
As you've probably already figured out, this can be done by creating a form as described in lesson 11 - where the values from the form fields can be inserted in the SQL statement. Suppose you have a simple form like this:
The form submits to the file insert.asp where you, as shown in lesson 11, can get the user's input by requesting the form content. In this particular example, an SQL statement could look like this:
strSQL = "INSERT INTO people (FirstName) values('" & Request.Form ("FirstName") & "')"
In the same way, it is possible to retrieve data from cookies, session, QueryString, etc.
Most common beginner mistakesIn the beginning, you will probably get a lot of error messages when you try to update your databases. There is no room for the slightest inaccuracy when you work databases. A misplaced comma can mean the database is not being updated, and you get an error message instead. Below, we describe the most common beginner mistakes.
The field doesn't allow zero length
In Design View (see screenshot below), you can set the parameter "Allow Zero Length" for each column. If this parameter is set to "No", and you attempted to insert a null value in this column, it would not be possible to insert the record in the database.
Wrong data types
It is important that there is consistency between the type of data and column. Each column can be set to a data type. The screenshot below shows the data types for table "people" in our example.
An error occurs if you, for example, attempt to insert text or numbers in a date field. Therefore, try to set the data types as precisely as possible.
Below is the most common data types listed:
Setting Data Type
Text (Default) Text or combinations of text and numbers. Can also be used for numbers that are not used in calculations (e.g. phone numbers).
Memo Longer pieces of text, or combinations of text and numbers.
Number Numerical data for mathematical calculations.
Date/Time Dates and times.
Currency Currency values.
AutoNumber A unique number (incrementing by 1) inserted by Microsoft Access whenever a new record is added to the database. AutoNumber fields cannot be updated.
Yes/No Fields that can contain only one of two values, such as Yes/No, True/False, On/Off.
OLE Object An object (e.g. a Microsoft Excel spreadsheet, a Microsoft Word document, graphics, audio, or other binary data).
SQL statements with single quotes ( ' )
If you allow users to type some text in a form, and this text contains the character ' (single quote), the record cannot be inserted into the database. The solution is to replace a single quote (') with double quote ('').
This can be done with the function Replace this way:
<%strTekst = Request.Form ("TextField")
strTekst = Replace(strTekst, "'", "''")%>
All ' characters will be replaced with double ' characters, which will be interpreted as single quotes by the database.
Lesson 21: Delete data from databaseIn the two previous lessons, you have learned to retrieve and insert data into a database. In this lesson, we'll look at how to delete records in the database, which is considerably easier than inserting data.
Delete data using SQLThe syntax for an SQL statement that deletes records is:
DELETE FROM TableName WHERE condition
Example 1: Delete a recordWhen deleting a record, you can use the unique AutoNumber field in the database. In our database, it is the column named Id. Using this unique identifier ensures that you only delete one record. In the next example, we delete the record where Id has the value 24:
<html><head><title>Delete data in the database</title></head>
<body><%' Database connection - remember to specify the path to your
' The SQL statement that deletes the recordstrSQL = "DELETE FROM people WHERE Id = 24"Conn.Execute(strSQL)
' Close the database connection
Conn.CloseSet Conn = Nothing%><h1>Record is deleted!</h1>
</body></html>
Remember that there is no "Recycle Bin" when working with databases and ASP. Once you have deleted a record, it is gone and cannot be restored.
Lesson 22: Update data in a database
In previous lessons, you have learned to retrieve, insert and delete data from a database. In this lesson, we will look at how to update a database, i.e. edit the values of existing fields in the table.
Update data with SQLThe syntax for an SQL statement that updates the fields in a table is:
Update TableName Set TableColumn='value' Where condition
It is also possible to update multiple cells at once using the same SQL statement:
Update TableName Set TableColumn1='value1', TableColumn2='value2' Where condition
With the knowledge you now have from the lessons 19, 20 and 21, it should be quite easy to understand how the above syntax is used in practice. But we will of course look at an example.
Example: Update cells in the table "people"The code below updates Donald Duck's first name to D. and changes the phone number to 44444444 The other information (last name and birthdate) are not changed. You can try to change the other people's data by writing your own SQL statements.
<html><head><title>Update data in database</title>
</head><body><%' Database connection - remember to specify the path to your
' The SQL statement is builtstrSQL = "Update people set " strSQL = strSQL & "FirstName= 'D.', " strSQL = strSQL & "Phone= '44444444' "
strSQL = strSQL & "Where Id = 24"
' The SQL statement is executed Conn.Execute(strSQL)
' Close the database connectionConn.Close
Set Conn = Nothing%><h1>The database is updated!</h1></body></html>
This example completes the lessons on databases. You have learned to retrieve, insert, delete and update a database with ASP. Thus, you are actually now able to make very advanced and dynamic web solutions, where the users can maintain and update a database using forms.
If you want to see a sophisticated example of what can be made with ASP and databases, try to join our community. It's free and takes approximately one minute to sign up. You can, among other things, maintain your own profile using the form fields. Maybe you will get ideas for your own site. (Note: HTML.net is coded in PHP but could have been made in ASP).
ASP gives you many possibilities for adding interactivity to your web site. The only limit is your imagination - have fun!
Lesson 1: What is JavaScript?By Maria Antonietta Perna
The first thing that creates some confusion about JavaScript is its name. In fact, one of the most common questions students raise when approaching JavaScript is:
"Is JavaScript the same as Java?".
Clearing up this basic but important question is our first order of business in this lesson, but by no means the only one. By the end of this lesson you will also know:
the difference between JavaScript and Java; what JavaScript can and cannot do.
Are JavaScript and Java the same thing?No, they are not.
Java (developed by Sun Microsystems) is a powerful and much more complex programming language in the same category as C and C++.
JavaScript was created by Brendan Eich at Netscape and was first introduced in December 1995 under the name of LiveScript. However, it was rather quickly renamed
JavaScript, although JavaScript’s official name is ECMAScript, which is developed and maintained by theECMA (European Computer Manufacturer's Association) International organization.
JavaScript is a scripting language, that is, a lightweight programming language that is interpreted by the browser engine when the web page is loaded.
The fact that the JavaScript interpreter is the browser engine itself accounts for some inconsistencies in the way your JavaScript-powered page might behave in different browsers. But don't worry: thankfully, well-established techniques and powerful JavaScript libraries such as jQuery (which will be introduced in later lessons) are here to make things wonderfully easier on us.
Things you can't do with JavaScriptYou can't force JavaScript on a browser.
JavaScript runs in the client, that is, the brower. If you use an older browser without support for JavaScript, or if you simply choose to disable JavaScript in your browser, then a JavaScript script can't work.
Conclusion: unlike what happens with languages that run on the server, such as PHP, you never fully know for sure the impact that the browser your website visitors are going to use will have on your script, or whether your visitors will choose to turn JavaScript support off.
You can't access or affect resources from another internet domain with JavaScript.
This is called the Same Origin Policy. Well, how would you like it if all of a sudden all the nice comments your visitors left on your website started to disappear, or to change place in your page because of a naughty JavaScript script running on another website?
This is exactly the kind of nasty situation that the Same Origin Policy is designed to prevent. Conclusion: your JavaScript script can only access resources in your website.
You can't access server resources with JavaScript.
Because JavaScript is a client-side language, it's limited to what can be done in the client, that is, usually in the browser environment. A JavaScript script cannot access server resources such as databases.
Zillion things you can do with JavaScript
With JavaScript you can:
Put text in an HTML page on-the-fly.
Say you want to display a nice thank you message to a user who has just submitted a comment form on your website. Obviously, the message needs to be added after the user has submitted the form.
You could let the server do that. However, if your website is very busy and your server processes hundreds of forms a day, it might take a little while for your thank you message to appear to the user.
Here's JavaScript to the rescue. Because JavaScript runs in the user's browser, the thank you note can be added and displayed on the page almost instantaneously, making your website users happy.
Make your web pages responsive.
Web environments are dynamic, things happen all the time: the web page loads in the browser, the user clicks a button or moves the mouse over a link, etc. These are called events (which will be the topic of lesson 3).
With JavaScript you can make the page immediately react to these events the way you choose: for example, by showing or hiding specific page elements, by changing the background color, etc.
Detect visitors' browsers.
You can use a JavaScript script to detect the visitor’s browser, or, even better, you can detect what features a certain browser does or does not support. Depending on the browser and its capabilities, you can choose to load a page specifically tailored to that kind of browser (lesson 14).
Create cookies.
A JavaScript script is great if you want to create cookies so that your visitors can enjoy a personalized experience the next time they visit your website (lesson 15).
Validate web form data.
You can use a JavaScript script to validate form data before the form is submitted to a server. This saves the server from extra processing (lesson 16).
And much ... much more.
Learning JavaScript will enable you to add cool animation effects to your web pages without using an external Flash plug-in, use the newest features of HTML5 such as canvas (to draw directly on your web page) and drag and drop capabilities, integrate your website with external web services such as Facebook, Twitter, etc.
SummaryIn this lesson you learned what JavaScript is, who invented it, and that the body responsible for its maintenance and continuous development isECMA. Now you know what you cannot do with JavaScript, but also the great things that you can do with it.
At this point you might say:
"That's all well and good. I'm convinced, JavaScript is fantastic. But, how can I start using it in my HTML page?"
That's easy: learn how this is done in the next lesson.
Lesson 2: Your First JavaScriptBy Maria Antonietta Perna
Now that you know what JavaScript is and what you can do with it, it's time to get to the practical stuff.
In this lesson you are going to learn:
how to embed your JavaScript in the HTML page; how to reference your JavaScript from a separate file; how to comment your JavaScript code and why it is recommended; how to create your first JavaScript-powered web page.
The HTMLTo insert a JavaScript script in an HTML page, you use the <script> ... </script> tag. Don't forget the closing </script> tag! Now get ready to fire off your text editor of choice and let's get coding!
Let's start with a basic HTML page, like this one:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title>
The JavaScript script is inserted either in the HTML page itself or in a separate file.
Embed JavaScript in the HTML pageThe <script> tag and its type attribute tell the browser: "Hey, browser! There's a script coming up, and it's a JavaScript script."
You can do this either in the <head> section, as follows:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title>
<script type="text/javascript"> //JavaScript code goes here
</script>
</head> <body>
</body> </html>
Or or at the very bottom of the document just before the closing </body> tag, like so:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title> </head> <body>
<script type="text/javascript"> //JavaScript code goes here </script>
</body> </html>
If you're wondering whether it's best to place your <script> tag in the <head> or the <body> tag, then you're not alone.
It mostly comes down to personal preference. However, because most of the times you'll want your JavaScript code to run after the web page and all its resources, e.g., stylesheets, graphics, videos, etc., have finished loading in the browser, I suggest you dump your JavaScript <script> tag at the bottom of your page.
Comments, comments, comments
One final thing to note about both code snippets above is the two forward slashes // before the text "JavaScript code goes here". This is how youcomment a one-line JavaScript code.
When a comment spans over more than one line, you use /* Comment goes here */ to delimit a comment, just like you do in a stylesheet. Here's how it's done:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title> </head> <body>
<script type="text/javascript">
/* JavaScript code goes here */
</script>
</body> </html>
When the JavaScript interpreter in your browser comes across either '//' or '/* */', it just ignores whatever text is placed in between. Use comments in your code to remind your future self of what your code is designed to do. One day you'll be happy to have done so, just take my word for it!
Insert JavaScript in a separate fileIf your script is longer than a few lines, or you need to apply the same code to several pages in your website, then packaging your JavaScript code into a separate file is your best bet.
In fact, just like having your CSS all in one place, well away from HTML code, having your JavaScript in its own file will give you the advantage of easily maintaining and reusing your scripts.
Here's how it's done:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title>
As you can see, the <script> tag references an external file, "yourjavascript.js" that has the .js extension and contains the script that puts the magic into your web page.
Your first JavaScript-powered page: Hello WorldWithout further ado, let's see if JavaScript works in your browser.
Try out: embedded JavaScript in an HTML page
Between the <script> and </script> tags either in the <head> or the <body> of your HTML document, add the following line of code, just after the comment:
<!DOCTYPE html> <html> <head> <title>My first JavaScript page</title> </head> <body>
<script type="text/javascript"> //JavaScript code goes here alert('Hello World!');
</script>
</body> </html>
This is your first JavaScript statement, that is, you've just instructed your web page to do something. Don't worry about the code just yet, we'll be coming back to the alert() command again and again in the following lessons.
Just notice the semicolon ( ; ) at the end of the statement. This is important: it tells the JavaScript interpreter that the statement is finished and whatever comes next is a different statement.
Now save your work and run the page in your favorite browser. You'll see an alert box popping up on page load. This is how the page looks in Firefox:
If your alert box is not popping up, then check that you've typed the JavaScript command exactly as it is in the sample code.
Make sure your <script>...</script> tags are there, that the text between the brackets is surrounded by quotes (' '), and that there is a semicolon ( ; ) at the end of the statement. Then try again.
Try out: JavaScript in a separate file
Create a new document in your text editor and save it as "helloworld.js". Important: the file extension has to be .js (this is the appropriate JavaScript file extension).
In the new document, paste in the JavaScript command from the previous example (no need to type the <script> ... </script> tags here):
alert('Hello World!');
Now, go back to the HTML page, delete the previous JavaScript code, and add the <script> ... </script> tags in the <head> section of the page with a reference to the helloworld.js JavaScript file, like so:
Save all your documents and run the HTML page in the browser. You should view the same alert box popping up as in the previous example.
If the code doesn't work, in your HTML document check that the filepath to the JavaScript file is correct, the filename spelling is accurate, and double-check that you've added a closing </script> tag. In helloworld.js make sure your JavaScript command is typed exactly the same as in the sample code above, then try again.
SummaryYou've actually learned a lot in this lesson. You know how and where to include JavaScript in your web page, how to comment your JavaScript code and why this is a good idea, and finally you've just seen your web page come alive with your first JavaScript script.
Admittedly, an alert box saying "Hello World!" looks a bit dumb, but even alerts can be useful to quickly and easily test that JavaScript is enabled in your browser and your code is working.
It's time for a well deserved break. In lesson 3 you'll be tackling another core topic in your JavaScript journey: events. Get ready!
Lesson 3: EventsBy Maria Antonietta Perna
The web is a dynamic environment where a lot of things happen. Most appropriately, they're called events. Some of these events, like a user clicking a button or moving the mouse over a link, are of great interest to a JavaScript coder.
By the end of this lesson you will know:
what events are; what JavaScript can do with events and how.
What are events?Events are occurrences taking place in the context of the interactions between web server, web browser, and web user.
For instance, if you're on a web page and click on a link, there are at least 3 important events being triggered:
1. onClick event: triggered by you as you click the link;2. onUnload event: triggered by the web browser as it leaves the current web page;3. onLoad event: triggered by the browser as the new web page content is loaded.
Which events should I focus on from a JavaScript point of view?It all depends on the JavaScript program you're writing, that is, on the objectives you want to achieve with your script.
However, the most common events you're likely to deal with in your JavaScript are:
onLoad/onUnload; onClick; onSubmit (triggered by the user submitting a form); onFocus / onBlur (triggered by a user as, for example, she clicks in a textbox or
clicks away from a textbox respectively); onMouseOver / onMouseOut (triggered by the user moving the mouse over or
away from an HTML element respectively).
There are other events that might eventually be of interest to you as you write sophisticated JavaScript scripts, such as scroll events (as users scroll up and down a web page), onTextChanged events (as users type in a textbox or textarea), even touch events , which are likely to gain interest in today's mobile and tablet-invaded world.
However, for the purposes of this tutorial, you're mostly going to come across the core events listed above.
What do I do with events from a JavaScript point of view?As you write a JavaScript program, events become interesting because they give your script a hook for gaining control on what happens in the web page.
Once your script gets hold of the hook provided by the event, your script is boss. The jargon for this is event-driven programming: an event happens and JavaScript handles it, for instance by displaying an alert box with a message for the user.
Hey, an onClick event going on!
Conclusion: events bend to JavaScript commands by means of event handlers. These are statements in your JavaScript script that are appropriatelyattached to those events.
How does JavaScript handle events?In this tutorial you've already hooked an event handler to an event. More precisely, you attached the alert() command to the onLoad event.
The alert() command is a command which is part of the JavaScript language. The JavaScript interpreter in the browser translates it along these lines:
"Hey, browser, display an alert box that contains the message typed within the () enclosing brackets"
(Notice: JavaScript is case sensitive. If you write Alert instead of alert, your script won't work!).
As you saw in the previous lesson, simply by writing a JavaScript statement between <script> ... </script> tags achieves the execution of that statement as the onLoad event fires up.
However, your JavaScript scripts are capable of doing more interesting stuff when they handle events in response to user actions, for example an onClick event. How do we do that?
Try out: handle an onClick event with JavaScriptThe browser already has its own ways of handling events. For instance, when a page has loaded, the browser fires the onLoad event and displays the page contents; when a user clicks a link, the browser communicates to the server to access the requested page, etc. These are called default actions.
The fun of being in charge, though, is not to let the browser do what it likes, but of letting JavaScript do its job and decide what's to be done.
The simplest way to attach an event handler to an event is to insert the required JavaScript code within the HTML element that produces the event. Let's have a go by simply preventing the browser default action as the user clicks a link on the page. Fire off your text editor and let's get coding!
Prepare a new basic HTML document displaying a simple link like the one shown below:
<!DOCTYPE html> <html> <head> <title>Lesson 3: Events and Event Handlers</title> </head> <body> <h1>Lesson 3: Events and Event Handlers</h1>
<a href="http://html.net">Click Me!</a>
</body> </html>
Run the page in the browser. If you click on the link now, you'll be landing straight to the HTML.net website. This is the browser default action, as explained above.
Now go back to your HTML document and type the following JavaScript command within the <a> tag, as follows:
<!DOCTYPE html> <html> <head> <title>Lesson 3: Events and Event Handlers</title> </head> <body> <h1>Lesson 3: Events and Event Handlers</h1>
<a href="http://html.net" onclick="alert('Going anywhere? Not so fast!'); return false;">Click Me!</a>
</body> </html>
Go ahead, run the page in the browser, and ... you're stuck! JavaScript is in control!
What's just happened there?That's how easy it was to take control of a link with JavaScript! All you did was to insert a couple of JavaScript statements to the onclick attribute of the HTML <a> tag.
You already know about the good old alert() command, so I'll skip over it. The return false; command tells the JavaScript interpreter to return a value, in this case the value equals false, which prevents the browser from performing its default action. You'll be using this little command quite often in your JavaScript programming life.
You handle the other events listed above in the same way: just insert the JavaScript command as the value of the onfocus, onblur, onmouseover, onmouseout and onsubmit attributes of an HTML element.
SummaryThat'll be all for this lesson. You learned what events are, why events are important in JavaScript programming, and how to use event handlers to let JavaScript be in control of your web page behavior.
But this is just a tiny taste of what JavaScript can do once it's in charge. Follow on to find out.
Get ready for the major topic of lesson 4: variables and constants.
sLesson 4: Variables and ConstantsBy Maria Antonietta Perna
Variables and constants are like containers where you store data and values for processing in JavaScript.
The difference between a variable and a constant is this: once you give a value to a constant the value is meant to be kept unchangedthroughout the script. In all circumstances where you reasonably foresee that the original value is modified through the script, by all means use avariable as your storage room. In fact, you're going to use variables most of the times.
In this lesson, you're going to learn:
how to create variables and constants; how to assign values to variables and constants; how to use variables in your code; how to name variables and constants correctly.
How to create variables and constantsYou declare, that is, create variables and constants in a similar way.
Here's how you declare a variable:
/*To declare a variable you give it a name preceded by the JavaScript keyword var*/ var amountDue;
In the sample code above you declare a variable named amountDue.
The variable declaration ends with a ( ; ) semicolon, which makes it a self-contained statement.
Also, because JavaScript is case sensitive, every time you refer to the amountDue variable, make sure you keep the letter case exactly the same as the original declaration (this particular notation is called camelCase because it looks like a camel's hunch).
Here's how you declare a constant:
/*To declare a constant you give it a name preceded by the JavaScript keyword const Also take note: const is not supported by Internet Explorer use var instead: it's safer*/ const taxRate;
In the sample code above, you declare a taxRate constant. As you can see, the declaration is very similar to the variable declaration, the only difference being the keyword used: var in the case of a variable and const in the case of a constant.
How to assign values to variablesAfter you create a variable, you must assign (give) a value to it (or said in Geeeky talk "initialize a variable") . The ( = ) equal sign is calledassignment operator: you assign the value of what is on the right side of the = sign to whatever is on the left side of the = sign. Notice: you cannot perform operations with empty variables.
Ready to fire off your text editor? Let's get coding!
Prepare a basic HTML document with the JavaScript code illustrated below:
<!DOCTYPE html> <html> <head> <title>Lesson 4: Variables and Constants</title> </head> <body> <h1>Lesson 4: Variables and Constants</h1> <script type="text/javascript"> //Create a variable var amountDue; /* Assign a value to it: you do not know the value yet so for now it is 0 */ amountDue = 0; /* Create 2 more vars and assign a value to each at the same time */ var productPrice = 5; var quantity = 2; /* Assign a value to amountDue by multiplying productPrice by quantity */ amountDue = productPrice * quantity; /* Notice how the value of amountDue has
changed from 0 to 10 - -Alert the result to check it is OK Notice: you do not use ' ' with var name in alert() */ alert(amountDue); </script>
</body> </html>
Did you see the good old alert box displaying the number 10 popping up? If you didn't, make sure your code is typed exactly the same as in the snippet above (Notice: When tracing bugs (errors) in your JavaScript code, look out for brackets, semicolons ( ; ), quotes (' '), and letter casing).
That's great! Try experimenting with the code above. For example, change the value of quantity and productPrice, or just come up with your own variables.
How to name variables (and constants)Choose descriptive names for your variables (var amountDue; rather than var x;): this way your code will be more readable and understandable.
While this can be called good programming practice (but also common sense), there are also syntax rules (yes, just like any natural language) when it comes to naming variables, and they must be obeyed, at least if you want your JavaScript script to work.
Keep an eye on the following simple rules when you name variables:
1) The first character must be a letter, an ( _ ) underscore, or a ( $ ) dollar sign:
5total is wrong: var name cannot start with a number
2) Each character after the first character can be a letter, an ( _ ) underscore, a ( $ ) dollar sign, or a number:
3) Spaces and special characters other than ( _ ) and $ are not allowed anywhere:
to tal is wrong: spaces are not allowed; total# is wrong: # character is not allowed; total£ is wrong: £ character is not allowed.
SummaryVariables and constants are the building blocks of any programming language. In this lesson you learned the part they play in JavaScript, how you declare and assign values to them, how to name your variables correctly, and you also had a taste of using variables in JavaScript.
In the next lesson you're going to learn about JavaScript operators and do more and more practice with variables.
Take a break and get ready for lesson 5.
Lesson 5: Smarter Scripts with OperatorsBy Maria Antonietta Perna
In the previous lesson you already employed an assignment operator ( = ) and an arithmetic operator, specifically the multiplication operator ( * ), to write a basic JavaScript shopping cart script.
We can easily see that to do something useful with JavaScript, we need a way to manipulate data and variables. We do this with operators.
In this lesson you are going to learn how to use:
arithmetic operators; the + sign to concatenate text (concatenation operator); comparison operators; logical operators.
Also, you'll get plenty of opportunities to practice coding with variables. Let's get started!
Arithmetic operatorsAs you might have guessed, arithmetic operators are used to perform arithmetic operations between values or variables. Here's a table for your reference.
I guess you're quite familiar with most arithmetical operators. The odd ones might be the ( % ) modulus, the ( ++ ) increment, and the ( -- ) decrementoperators.
Modulus: the remainder left over after division.
Increment: take a number and add 1 to it.
Decrement: take a number and subtract 1 from it.
Time to get coding! Get your hands on the text editor and prepare a new HTML document like the one below:
Try out: add 2 values and print the result <!DOCTYPE html> <html> <head> <title>Lesson 5: Operators and Comparisons</title> </head> <body> <h1>Lesson 5: Operators and Comparisons</h1> <script type="text/javascript"> //Create and initialize your variables var result = 0; var firstNum = 20; var secondNum = 5; //Addition: result = 25 result = firstNum + secondNum; //write result on the page document.write(result); </script>
</body> </html>
Nothing new here except for the JavaScript command document.write(). This command is translated by the JavaScript interpreter as saying:
"Hey browser, get the value within brackets and print it on the HTML document!"
In our case the value is a variable, therefore no ( ' ' ) quotes are used to enclose it. If you want to print some text instead, the command must be:document.write('some text.');. It's all very similar to the alert() command you've been using so far.
Now experiment with the code sample above by trying out all the other arithmetic operators and printing the result on the page.
Concatenation operatorIf you want to add pieces of text together to form one long line of text, use the + sign. In Geeky talk a piece of text is called string, and it appears enclosed either in (' ') quotes or (" ") double-quotes (remember the 'Hello World' text you used in the alert() command? That is an instance of string).
Try out: concatenate strings and print a message on the page
<!DOCTYPE html> <html> <head> <title>Lesson 5: Operators and Comparisons</title> </head> <body> <h1>Lesson 5: Operators and Comparisons</h1> <script type="text/javascript"> //Create and initialize your variables var firstText = "Hello"; var secondText = "World!"; //Resulting value of assignment is Hello World! var message = firstText + ' ' + secondText; //write result on the page document.write(message); </script>
</body> </html>
If you typed your code correctly, you should see the famous Hello World! text smack on the web page. Notice: you separate Hello and World! by concatenating quotes (' ') in-between each piece of text or variable.
Now get some practice concatenating strings before moving on.
Comparison operatorsOften you need to compare different values and make your JavaScript program take different directions accordingly.
For example, you're coding a JavaScript script for a shopping cart application. At one point, your script will have a statement saying something along these lines: if the total amount to be paid is greater than or equal to $50 apply a 5% discount, if it's less than or equal to $50 do not apply 5% discount. Don't be impatient, you will learn how to code this kind of conditions in the next lesson.
It's here that comparison operators, such as equal to, less than, etc. enter the scene. Here below are listed all comparison operators for your reference.
If x = 10 we have:
Operator What is it? Example
== equal to x == 5 is false
=== exactly equal to value and type x === 10 is true x === "10" is false
!= not equal x != 2 is true
> greater than x > 20 is false
< less than x < 20 is true
>= greater than or equal to x >= 20 is false
<= less than or equal to x <= 20 is true
Logical operatorsYou use logical operators when you need to determine the logic between certain values.
Going back to the shopping cart script example, you might want your script to apply a 5% discount if the following 2 conditions are both true: a given product costs more than $20 and is purchased before the 31st of December.
Here come logical operators to the rescue. Given that x = 10 and y = 5:
Operator What is it? Example
&& and (x < 20 && y > 1) is trueboth conditions must be satisfied
|| or (x == 5 || y == 5) is trueat least 1 condition must be satisfied
! not !(x == y) is true
Questions, questions, questionsThe tables above are self-explanatory, except for the following 2 questions:
1. When you talk about === , what do you mean by equality of value and type?2. What's the difference between ( = ), ( == ), and ( === ) ?
Answer to question 1.
Values are the specific data, either directly in your JavaScript statements or contained in JavaScript variables. For example:
var price = 5;
In the code snippet above, the variable price has value 5.
What's the type?
The type, or more precisely the data type, is the way JavaScript classifies data. You've come across 2 data types, that is, number and string (text). A third data type is Boolean, that is, true and false statements.
Therefore, when you compare 2 values using ( === ), the 2 values are compared on the basis of both their value and their data type:
var firstNum = 4; var secondNum = 4; //this is true: both values are 4 //and both values are of type number firstNum === secondNum; //let's use a string data type. A string uses ' '. var stringNum = '4'; //Now === is false: 4 and '4' are different types firstNum === stringNum;
Answer to question 2.
The ( = ) operator is used to assign or give a value to a variable. It is not a sign for equality.
The ( == ) and ( === ) operators instead, do stand for equality. They do not assign values to variables. ( == ) compares only values, ( === ) compares both values and data type.
SummaryYou've made it all the way through this lesson, congratulations! Now your scripts are not limited to just popping up messages. They start to be smart: they can make calculations, comparisons, and set truth conditions to evaluate their data.
In the next lesson you keep adding intelligence to your JavaScript with if ... else and switch statements.
Take a break and get ready for it!
Lesson 6: Even Smarter Scripts with if…else and switchBy Maria Antonietta Perna
Now that our JavaScript code can calculate, compare, and determine true and false conditions, things start looking a lot more interesting.
The days of dumb message boxes popping up are long gone, the new era of smart message boxes has begun.
In this lesson you're going to inject the power of choice into your scripts with conditional statements. These statements enable your script to evaluate given conditions on the basis of which to execute one or more actions. More specifically, you're going to learn how to use:
if statements; if ... else statements; if ... else if ... else statements; switch statements.
In the process, you're also going to learn how to use shortcut assignment operators.
if StatementThe if keyword is used in JavaScript to perform a basic test for the truth or falsity of a given condition and execute a piece of code accordingly. Here's its structure:
//if the condition in brackets is true
if (condition)
{
//do some stuff here
}
Let's translate the code
Translated into English, the if statement above says:
"Hey browser, if the condition in the round brackets is true, execute the commands between those odd curly braces. If the condition is not true, then ignore everything and move on!"
Important: do not forget either the brackets ( ) or the braces { }.
if ... else statementUse this statement to execute a command if the condition is true and another command if the condition is false. Here's its structure:
//if the condition is true
if (condition)
{
//do this stuff
}
//otherwise
else
{
//do this other stuff
}
if ... else if ... else statementUse this statement if you want your code to evaluate several conditions on the basis of which to execute the appropriate commands. Here's its structure:
//if the condition is true
if (condition)
{
// do this stuff
}
//if this other condition is true instead
else if (condition)
{
// do this other stuff
}
//if none of the above condition is true
else
{
// do this instead
}
switch statementsIn alternative to an if ... else if ... else statement you can switch to a ... well a switch statement. Here's its basic structure:
//condition to evaluate
switch(condition)
{
//in this case do this
case 1:
execute code block 1
//stop here: no need to keep going
break;
//in this other case do that
case 2:
execute code block 2
//stop here: no need to keep going
break;
//otherwise fall back on this
default:
code to execute when all previous conditions evaluate to false
}
It's time to put your new knowledge to work right away. In this try out you're going to check a product price and decide whether to apply a discount. Prepare a new HTML document and get coding!
Try out: check product price with if
<!DOCTYPE html> <html> <head> <title>Lesson 6: Even Smarter Scripts with if…else and
switch</title> </head> <body> <h1>Lesson 6: if statements</h1> <script type="text/javascript">
//store 5% discount value in a var
var discountRate = 0.05;
//store price of 1 apple in a var with a value of 2
var applePrice = 2;
//store quantity value in a var
var quantity = 5;
//declare a var for the discounted total value
//because we don't know the value we initialize it with 0
var discountedTotal = 0;
//store the value of the total in a var
//you use the ( * ) multiplication operator to calculate the total
//and the ( = ) assignment operator to assign the value to the var
var total = quantity * applePrice;
//use if to check the total is entitled to a discount
//if total is greater or = to 10 it's entitled
if (total >= 10)
{
alert("You're entitled to a discount!");
//apply 5% discount on the total
//and assign it to discountedTotal var
//Take note: multiplication is in brackets because it has to be
//performed before subtraction (remember the good old school math?)
discountedTotal = total - (discountRate * total);
//create a var to store text to display to user
var infoText = "You'll get your delicious apples at $" + discountedTotal;
//you add more text to the same infoText var with a shortcut assignment operator
//this technique is useful when you have long text strings to manipulate
infoText += " instead of at $" + total;
//display message to the user
document.write(infoText);
} </script>
</body> </html>
Save your work, run the page in the browser, and enjoy your discount!
Questions, questions, questionsIt's almost like I can hear you saying something like:
Hey, what's going on there? What's that += sign all about?
Here's the answer:
Shortcut operators
When you add several values to a variable, a shortcut operator is very handy.
The expression x += 2 is the same as x = x + 2.
As you can see, the given value of x is taken as the starting point, 2 is added to it, and the resulting value is reassigned to x. Using a shortcut operator spares you from having to retype x.
When applied to the code snippet above, the expression infoText += " instead of at $" is the same as infoText = infoText + " instead of at $". If we simply use an ( = ) assignment operator in this case, the text already stored in infoText will be wiped out by the new value. But this is not what we want in this script.
Handy shortcuts are also available to all other mathematical operators:
-= *= /= %=
Try out: check product price with if ... elseJust after the closing curly brace } from the previous example, add the following snippet.
else
{
alert("Sorry, you're not entitled to a discount");
var infoText = "Your delicious apples cost $" + total;
document.write(infoText);
}
Change the value in the quantity variable to be less than 5, save your work and run the page in the browser. Now, JavaScript should give you the not so good news that you're not entitled to a discount.
Try out: check product price with if ... if else ... else
Still using the previous example, between the first if block and the last else block, insert the following else if block.
//if the total equals to 8
else if (total == 8)
{
alert("Just add a couple more apples and get your discount!");
var infoText = "Be a sport, buy a bit more and pay a bit less";
document.write(infoText);
}
Change the quantity variable to be 4, save your work and run the page in the browser. Now you should fall for the persuasive power of such a great discount.
Your code can detect if the purchase qualifies for a discount, if it almost qualifies for a discount, and finally if the discount is inapplicable by a long shot. In each case, your code can take appropriate action.
Have fun practicing with if ... else if ... else statements, and shortcut operators.
Try out: days of the week with switchNow get a fresh HTML document ready and type the following code block:
<!DOCTYPE html> <html> <head> <title>Lesson 6: Even Smarter Scripts with if…else and
//in case value corresponds to Saturday or to Sunday do this:
case "Saturday":
case "Sunday":
alert("It's the weekend: great!");
document.write("Today is " + today);
//no need to keep going:
break;
//in case value corresponds to Friday do this
case "Friday":
alert("Almost weekend time!");
document.write("Today is " + today);
//no need to keep going
break;
//in all other cases do this instead
default:
alert("Just an ordinary weekday: keep up the good work");
document.write("Today is " + today);
}
</script>
</body> </html>
Save your work and run the page in the browser: a great Friday message should be there to greet you. Keep changing weekday and make sure the alert box displays the appropriate message each time.
SummaryNow you know how to write scripts that implement different actions on the basis of different conditions. Well done!
Keep experimenting with all the tools you've learned so far. If you have doubts, drop a line in the forum dedicated to this tutorial. When you're ready, move on to the next big topic: loops.
Lesson 7: Leave Boring Repetitive Stuff to JavaScript with loopsBy Maria Antonietta Perna
Your JavaScript scripts can do all sort of clever stuff like calculating discounts, comparing values, and making choices. However, don't forget we're dealing with machine language, and machines are very good at doing some things us humans would keep a mile off if only we could.
One really boring thing most of us would happily avoid doing is repetitive stuff. You might find it hard to believe this, but JavaScript loves repetition. So much so that it has a special construct for it: the loop.
Here's what you will learn in this lesson:
the for loop; the while loop; the do ... while loop.
In the process, you will also learn how to:
use getElementById(element Id) to manipulate an HTML element with JavaScript; generate random numbers with random() and floor(number); insert HTML mark-up dynamically with innerHTML.
This is going to be a meaty lesson. Get ready for it!
LoopsAt times you will have to repeat some piece of code a number of times:
for instance: a web page has 10 radio buttons and your script needs to find out which radio button was checked by the user.
To do so, your script has to go over each single radio button and verify whether its checked attribute is set to true or false. Does this mean having to write this kind of verification code 10 times?
Thankfully, it does not. You dump the code in a loop once, and it's going to execute any number of times you set it to.
Any loop is made of 4 basic parts:
1. the start value
An initial value is assigned to a variable, usually called i (but you can call it anything you like). This variable acts as counter for the loop.
2. the end value or test condition
The loop needs a limit to be set: either a definite number (loop 5 times) or a truth condition (loop until this condition evaluates to true). Failing this, you run the risk of triggering an infinite loop. This is very bad: it's a never-ending repetition of the same code that stops users' browsers from responding. Avoid infinite loops at all costs by making sure you set a boundary condition to your loops;
3. the action or code to be executed
You type a block of code once and it'll be executed the number of times between your start value and end value;
4. the increment
This is the part that moves the loop forward: the counter you initialize has to move up (or down in case you opt for looping backwards). As long as the loop does not reach the end value or the test condition is not satisfied, the counter is incremented (or decremented). This is usually done using mathematical operators.
The for LoopThis kind of loop, well ... loops through a block of code a set number of times. Choose a for loop if you know in advance how many times your script should run.
Here's its basic structure:
//loop for the number of times between start value
//and end value. Increment the value each time
//the limit has not been reached.
for (var=startvalue; var<=endvalue; var=var+increment)
{
//code to be executed
}
The while LoopIf you don't know the exact number of times your code is supposed to execute, use a while loop.
With a while loop your code executes while a given condition is true; as soon as this condition evaluates to false, the while loop stops.
Here's its basic structure:
//loop while initial value is less than or equal to end value
//Take note: if the condition evaluates to false from the start,
//the code will never be executed
while (variable <= endvalue)
{
//code to be executed
}
do ... while LoopThis kind of loop is similar to the while loop. The difference between the two is this:
In the case of the while loop, if the test condition is false from the start, the code in the loop will never be executed.
In the case of the do ... while loop, the test condition is evaluated after the loop has performed the first cycle. Therefore, even if the test condition is false, the code in the loop will execute once.
Here's the basic structure of a do ... while loop:
//the command is given before the test condition is checked
do
{
//code to be executed
}
//condition is evaluated at this point:
//if it's false the loop stops here
while (variable <= endvalue)
Try out: add random number of images with a for loopTime to get coding: prepare a fresh HTML document with a div tag and an id of "wrapper" and add the following JavaScript magic:
var container = document.getElementById("wrapper");
//use Math.random to generate a random number
//between 0 and 1. Store random number in a var
var randomNumber = Math.random();
//use Math.floor() to round off the random number
//to an integer value between 0 and 10 and store it in a var
var numImages = Math.floor(randomNumber * 11);
//just for testing purposes, lets alert the resulting random number
alert(numImages);
//the loop will run for the number of times indicated
//by the resulting random number
for (var i=1; i <= numImages; i++)
{
//code to be executed:
//create a var and store a string made of a new HTML img element
//and the iteration variable i (use + concatenation operator):
//i contains the iteration number
//Take note:make sure the img src corresponds to a real image file
var newImage = '<img src="loop.gif" alt="#" />' + i;
//use the container var that stores the div element
//and use innerHTML to insert the string stored in the newImage var
//Use shortcut assignment += so previous values do not get wiped off
container.innerHTML += newImage;
}
</script>
</body> </html>
Show example
Prepare a graphic file and store it in the same directory as your document, save your work, run the page in the browser and keep reloading it: the alert box will display a random number each time, then an img element is dynamically added to the web page as many times as indicated by the random number.
I know, there's a lot to ask about the code sample above. More specifically: 1) What's this document.getElementById(element Id)? 2) What areMath.random() and Math.floor(number)? And finally, 3) what's innerHTML? Let's tackle each question in turn:
1. Get hold of HTML elements with document.getElementById(element Id)
JavaScript can perform all sorts of magic on any HTML element once it gets hold of it. This can be done in more than one way. However, the most straightforward way is by using the document.getElementById(element Id) command. The JavaScript interpreter reads it as follows:
"Hey browser, find the HTML element with the id name like the one in brackets."
Because JavaScript usually does something with the element, this gets conveniently stored inside a variable. What you did in the sample code above was to grab hold of the div with the id attribute named wrapper and store it in a variable named container.
2. Generate random numbers with Math.random() and Math.floor(number)
JavaScript has built-in commands to perform complex mathematical operations quickly and easily.
Math.random() generates a random number between 0 and 1. Try it out on your own by typing var randomNum = Math.random(); alert(randomNum); inside a <script> tag.
Math.floor(number) rounds a number downwards to the nearest integer, and returns the result. The JavaScript interpreter reads it as follows:
"Hey browser, take the number in brackets and round it down to the nearest integer number."
Try it out on your own by typing var roundedNumber = Math.floor(6.2); alert(roundedNumber); inside a <script> tag. Keep changing the number in brackets and see how JavaScript returns the corresponding integer number.
In the previous example, you used Math.floor() together with Math.random(number) to generate a random integer number between 0 and 10 (you typed 11 rather than 10 because the round number returned by Math.random() starts at 0 not 1).
3. Add new mark-up inside HTML elements with innerHTML
A JavaScript script can make HTML elements appear and disappear, change place or color, and much more.
There's more than one way to add new mark-up in your HTML document, but using innerHTML makes it very easy and straightforward. The JavaScript interpreter reads the command as follows:
"Hey browser, take the string to the right of the assignment operator and insert it into the HTML mark-up."
What you did in the sample code above was to take the variable storing the wrapper div element and applying innerHTML to it to insert an img tag inside the div.
Try out: add images to the page with a while loopUse the same HTML document from the previous example, but delete all the JavaScript between the <script> ... </script> tags. Now, type in the following JavaScript code:
<script type="text/javascript">
//Grab the html div by its id attribute
//and store it in a var named container
var container = document.getElementById("wrapper");
//create the var containing the counter
//and give it an initial value of 0
var numImages = 0;
//start the loop: while the number of images is less than or
//equal to 10 (loop starts at 0 not 1, so type 9 not 10),
//keep cycling and increase the counter by 1
while (numImages <= 9)
{
//this is the block of code to be executed:
//build the string to insert in the HTML document
//and store it in the newImage var
//Take note:make sure the img src corresponds to a real image file
var newImage = '<img src="loop.gif" alt="#" />' + numImages;
//use the container var that stores the div element
//and use innerHTML to insert the string stored in the newImage var
//Use shortcut assignment += so previous values do not get wiped off
container.innerHTML += newImage;
//increase the counter by 1 using the increment operator
numImages ++;
}
</script>
Show example
Make sure the image file is in place, save your work and run the page in the browser. You should see something similar to the example page indicated in the link above.
Run a while loop with a false condition
Now make just a small change to the code above: replace var numImages = 0; with var numImages = 12;. Now the initial condition is false from the start: the counter is a number greater than 10.
Save your work, run the page and see what happens. If all works fine, nothing at all should happen: the loop doesn't even get started.
Try out: add images to the page with a do ... while loopUse the same HTML document as the previous example. Also, the JavaScript code is very similar to the previous example: simply move the while (condition) outside the action block and type do in its place, like the example below:
<script type="text/javascript">
var container = document.getElementById("wrapper");
var newImage = '<img src="loop.gif" alt="#" />' + newImage;
container.innerHTML += newImage;
numImages ++;
}
//here's the condition to evaluate:
//the first cycle has already executed.
while (numImages <= 9);
</script>
Show example
Save your work and run the page in the browser. You should see something similar to the example page indicated in the link above.
Run a do ... while loop with a false condition
Make just a small change to the code above: once again, replace var numImages = 0; with var numImages = 12;. Now the initial condition is false from the start: the counter is a number greater than 10.
Save your work, run the page and see what happens. Unlike what happened with the while loop, now you should see one image displayed on the web page: the loop has completed the first cycle and only afterwards the test condition is evaluated. In this instance the condition is false and the loop stops after the first iteration completes.
SummaryThat's all for this lesson. Your JavaScript toolbox is getting richer and richer: you can write repetitive code with loops, manipulate HTML content dynamically, and write scripts that generate random numbers.
Pat yourself on the back and take a well deserved break before moving on to the next big topic: functions.
Lesson 8: Package your JavaScript Code with FunctionsBy Maria Antonietta Perna
You can already add quite a bit of JavaScript functionality to web pages, and that's great. However, what if you decide to implement the same kind of functionality on more than one page, or in different places on the same page?
This is where JavaScript functions come into play.
In this lesson, you will learn:
what functions are and how they are used in JavaScript; how to retrieve information from functions; how to give information to functions; what variable scope is all about.
In the process you will also learn how to:
get today's date dynamically; change the value of an HTML button element dynamically.
Functions: what they are and what they are forIn previous lessons you used JavaScript functions to perform some actions quickly and easily like generating random numbers, writing something on a web page, etc. In fact, JavaScript has a great many built-in functions like write(), alert(), getElementById(), random(), floor(), and several others. Wherever you spot a pair of round brackets there's likely a function in action.
JavaScript also gives you the option to craft your own functions.
A function is a way of packaging your JavaScript commands so you can easily reuse them every time you need the same piece of functionality implemented in your website.
This suggests that there are 2 distinct phases to a function:
1. The phase where the function is declared (created);2. The phase where the function is called (used).
Let's go through each phase in turn.
Declare a functionThe basic structure of a JavaScript function looks like this:
//keyword function followed by your
//chosen name for the function
//Don't forget the round brackets!
function functionName()
//the code block is inside curly braces
{
//code you want to run goes here
}
Call a functionOnce you put a block of code into a function, you can use it anywhere you need that functionality in your website. What you need to do is just call the function.
You do this by typing the function name followed by brackets and the function will do its job - just like you did with alert(). Here's how it's done:
//Type the function name (without the keyword function)
//Don't forget the round brackets!
functionName();
That's all you need: whatever code you stuffed into your function gets executed at this point.
Let's see how this works in practice. Fire off your text editor: it's time to get coding!
Try out: declare your functionPrepare a simple HTML page like the one below. The program we're going to build has the following goals:
to get today's date dynamically when the user clicks a button; to display today's date on the web page; to change the value attribute of the button after it's clicked: to have the button still
displaying Get Date after the date has been displayed looks a bit confusing to the user.
<!DOCTYPE html> <html> <head> <title>Lesson 8: Declare a function</title>
</head> <body> <h1>Lesson 8: Declare a function</h1>
var myCalendar = document.getElementById("calendar");
//get hold of the button:you need this when it comes
//to change its value attribute
var myButton = document.getElementById("myButton");
//insert the date in the span element.
//toDateString() changes the date just retrieved
//into a user-friendly format for display
myCalendar.innerHTML = today.toDateString();
//change the value attribute of the button
//to say something more appropriate once the date is displayed
myButton.value = "Well done!";
}
</script>
</body> </html>
Try out: call your functionIf you review your program's goals as set out at the beginning, you'll see that all the action takes place after the user clicks the button on the page. This tells us that we need to handle the button's onclick event.
If you go back to lesson 3 for a moment, you remember that one way in which this can easily be done is to put some JavaScript code as the value of theHTML element onclick attribute.
Just add an onclick attribute to the button element and plug your showDate() function right in there, like so:
Save your work and run the page in the browser. Click the button and you should see today's date displayed on the page and the button value attribute giving you an appropriate message.
Questions, questions, questionsI know, there's some new stuff in the code samples above. You might be wondering: 1) what's this new Date() business? And 2) What does toDateString() do to the date? Let's tackle each question in turn.
1. What's new Date() all about?
The new keyword creates a new instance of a JavaScript object, in this case a Date object based on the user's computer clock. Objects are the topic of the next lesson, and the Date object is the topic of lesson 11. Therefore, I keep things really short at this point.
The important thing you need to know now is that once you've created an instance of the Date object, you've got all sorts of useful functions (called the object's methods) at your fingertips to manipulate date and time.
Following on from the previous point, toDateString() is only one of the numerous methods you can use with the Date object. The JavaScript interpreter reads it as follows:
"Hey browser, take the date you've been attached to and make it a bit more human-friendly!"
This is what I mean. Type the following inside enclosing <script> tags of an HTML page: var myDate = new Date(); document.write(myDate);
Save the page and run it in the browser: your date should be displayed in a format like the one below (obviously I expect the date to be different):
Sun Nov 06 2011 14:45:30 GMT+0000 (GMT Standard Time)
Ugly! Luckily, the Date object has its own beauty remedy. Rewrite the previous code snippet as follows: var myDate = new Date(); document.write(myDate.toDateString());
And here's what the date above looks like after its beauty treatment with toDateString():
Sun Nov 06 2011.
Much better, less scary, and far more readable for us humans.
Feed information to and retrieve information from a functionFunctions manipulate data: the alert() function has messages to display as its data, the write() function has text to write on the web page as its data, etc.
You can also feed data to a function for manipulation. The way you do this is through arguments (or parameters). An argument is placed inside the function's brackets when the function is declared. You can place one or more arguments separated by commas( , ) inside a function.
Here's what the basic structure looks like:
function functionName(arg1, arg2, arg3)
{
//body of the function goes here
}
The function argument is like a placeholder for the value that gets fed when the function is called. This will appear clearer in the example below.
Finally, one useful thing functions can do with data, once it's been manipulated, is to return it.
For example, take the floor(number) function that you already know from the previous lesson. This function takes in a number argument andreturns an integer number.
If your script does something with the returned value then it needs to assign the function to a variable when calling the function.
Let's put this knowledge into practice right away. Create a function and then call it to use its return value in your document.
Declare a function with a parameter
Prepare a simple HTML page and type the following JavaScript code within <script> ... </script> tags:
<!DOCTYPE html> <html> <head> <title>Lesson 8: Function Arguments and Return Values</title> </head> <body> <h1>Lesson 8: Function Arguments and Return Values</h1> <script type="text/javascript">
//declare a function with two arguments of type number
function addNumbers(num1, num2)
{
//this is a simple function:
// just return the sum of the two number arguments
return num1 + num2;
//your function ends here
}
</script>
</body>
</html>
Call your function and use its return value
Continue on from the previous code. Outside your function, just after the } closing curly brace, type the following:
//Call your function: create a var
//and assign the value returned by your function to it
//Also, give a value to the number arguments
//by typing 2 comma-separated numbers within brackets
var total = addNumbers(3, 5);
//Display the returned data on the page
document.write(total);
Save your work and run the page in the browser. If all goes well, the sum of the numbers you inserted as arguments of your addNumbers() function should be displayed on the web page.
Function arguments are not limited to a specific data type. You can also use strings and booleans, and even other functions. However, we don't want to be too involved at this stage.
Variables inside and outside functions: scopeA variable can have local or global scope on the basis of whether it's declared inside or outside a function block.. But, what does this mean exactly?
Simply put, a variable having local scope means that it's visible, or accessible, only within the function in which it lives. No other portion of your code can see a local variable.
On the other hand, a variable having global scope means that it's accessible, that is, it can be used, anywhere in your script.. Let's see this in practice. Get your text editor ready and type the following snippet between opening and closing <script> tags in an HTML page:
//create 2 global variables
var message = "outside global message";
var otherGlobalVariable = "other global variable";
//create a function with a local variable
//having the same name as the first global variable
function getMessage()
{
var message = "inside local variable";
//the function alerts the message variable
alert(message);
//and it also alerts the second global variable
alert(otherGlobalVariable);
//the function ends here
}
//call the function
getMessage();
//alert the message variable
//(which one will it be, local or global?)
alert(message);
Save your work and preview the page in your browser. As you can see, the alert() function outside the variable doesn't have access to the message variable inside the function. On the other hand, the function can have access both to its local variable and to any variable in the global space.
This might seem a bit confusing at first, but it's all a matter of practicing your coding skills as often as you can. The important thing to remember is that, if at times the variables seem not to have the values you expect, it might be a scope-related bug.
SummaryThat's all for this lesson. You can now package your JavaScript code into reusable and manageable functions, input and output data via a function, use the Date object to retrieve and display the current date, change the value of an HTML button element on-the-fly, and distinguish between local and global variables. You've accomplished a great deal, congratulations!
Take a break and get ready for the next big topic, a core feature of contemporary programming languages, objects.
Lesson 9: A Gentle Introduction to ObjectsBy Maria Antonietta Perna
Object Oriented Programming (OOP) is a programming model used by most contemporary programming languages. JavaScript offers significant object oriented capabilities, has its own built-in objects, and offers you the option of creating your own custom objects.
This is a wide and complex subject and we're only going to scratch the surface in this tutorial series. However, because as soon as you start coding in JavaScript you can't avoid dealing with objects, it's important that you get familiar with some core concepts of OOP.
This short lesson is introductory to the more detailed and practical lessons on specific JavaScript objects that follow.
Here is what you will learn:
the concept of object in web programming; what object properties are; what object methods are.
What is an object in Geeky talk?Real world objects are things like books, cars, balls, etc. We humans deal with the world around us by interacting with and manipulating things, that is, objects.
What most computer programs do is manipulate, manage, and reuse data of various kinds. Therefore, using the real world object metaphor, contemporary programming languages like JavaScript deal with their virtual environment by populating it with packaged data modelled after the concept of an object.
Everything in JavaScript is an object and you've already used plenty of objects without realizing it. In fact, you're already familiar with:
the Document object that you used to print your JavaScript messages on the web page;
the Math object, that you used to generate random numbers and round off decimals; HTML elements like the button object that you used to manipulate its value
attribute; the Date object that you used to retrieve the current date.
Properties and methodsBut how exactly does JavaScript manipulate objects?
The answer is: not much differently from the way we humans manipulate real world objects. We do this by interacting with the qualities and capabilities that belong to individual objects.
Let's take a ball as our example. We interact with the ball by means of some of its qualities (its roundness, its hardness, its size, etc.). Also, we interact with the ball on the bais of what we expect the ball's behavior to be like (we expect that we can launch the ball without breaking it, that we can throw it against a wall and it bounces back, etc.).
Similarly, a JavaScript script interacts with its object-modelled data by means of the objects' qualities and behavior. These are called properties and methods.
Properties are values associated with an object. For example, an HTML element object has a value property (like the button object you're familiar with), and an innerHTML property, that you used to add new mark-up to the web page.
Methods represent what an object can do, its behavior, and are very much like functions.
How do you associate an object with a property or a method?If you wondered what that odd-looking ( . ) dot notation in document.write() or Math.random(), and so on, meant in previous lessons, here's the answer.
You use the object.property and object.method syntax to interact with JavaScript objects.
//use the random() method of the Math object
Math.random();
//use the write() method of the document object
document.write();
//use the length property of the string object
myStringText.length;
SummaryThis lesson has been a short introduction to the concept of JavaScript objects, their properties and methods.
In the next lesson you will learn about the most widely used properties and methods of the String object.
Lesson 10: JavaScript Objects - StringsBy Maria Antonietta Perna
In the previous lesson you were introduced to the concept of Object Oriented Programming (OOP). You're now familiar with the use of objects and their properties and methods in JavaScript programming.
Starting from this lesson and for the next 3 lessons, we will be getting up close and personal with some of the most common properties and methods of widely used JavaScript objects: String, Date, Math, and Array. However, because JavaScript as a programming language is mostly made of objects, you will keep learning to use more objects and related properties and methods throughout the rest of this tutorial.
In this lesson you will learn how to use the following properties and methods of the string object:
In the process, you will also practice putting your JavaScript code into an external file.
The String objectYou've had plenty of practice with the string object through this tutorial. In fact, the JavaScript interpreter reads any piece of text enclosed in quotes ' ' (or double quotes " ") as an instance of the string object. This puts the magic of all the properties and methods belonging to the string object in our hands.
The beauty of Object Oriented Programming is that we can use all that JavaScript goodness to achieve our script's goals without needing to have any clue whatsoever of the inner workings of those properties and methods. All we need to know is what a property or method can do for us, nothow it does it.
For example, if we need to know the length of a piece of text, just using pieceOfText.length will achieve this. This is accomplished without us knowing anything of the programming virtuosity responsible for the power of the length property of the string object.
Let's have a taste of such power.
How to use lengthThe length property of the string object contains the number of characters (including spaces) in the text value of a string.
Here's a basic code snippet to demonstrate its use:
//create and initialize a string variable
var myString = "Hello JavaScript"
//apply the length property to the string
document.write(myString.length);
//JavaScript will print 16:
//spaces are included in the count
//If the string is empty length returns 0
Try out for yourself: insert the code above between enclosing <script> tags and have fun experimenting with it.
How to use toUpperCase()The toUpperCase() method of the string object turns the text value of a string into, well ... uppercase letters. Its companion toLowerCase() does the opposite: it turns the text value of a string into lowercase letters.
Here's a basic code snippet to demonstrate its use:
//create and initialize a string variable
var myString = "Hello JavaScript"
//apply the toUpperCase() method to the string
document.write(myString.toUpperCase());
//JavaScript will print HELLO JAVASCRIPT
//Try using myString.toLowerCase() on your own
Have a try: insert the code above between enclosing <script> tags and switch uppercase into lowercase.
How to use match()The match() method of the string object is used to search for a specific value inside a string.
Here's a basic code snippet to demonstrate its use:
//create and initialize a string variable
var myString = "Hello JavaScript"
//apply the match() method to the string.
//match(stringToMatch) takes the value to search for as argument
document.write(myString.match("JavaScript"));
//JavaScript will print JavaScript
//If no match is found the method returns null
Experiment on your own: insert the code above between enclosing <script> tags and try matching different string values.
How to use replace()The replace() method of the string object is used to replace a value for another value inside a string.
Here's a basic code snippet to demonstrate its use:
//create and initialize a string variable
var myString = "Hello JavaScript"
//apply the replace() method to the string.
//replace() takes 2 arguments and returns the new string value:
Have a go: insert the code above between enclosing <script> tags and try replacing different string values.
How to use indexOf()The indexOf() method of the string object is used to know the position of the first found occurrence of a value inside a string.
Here's a basic code snippet to demonstrate its use:
//create and initialize a string variable
var myString = "Hello JavaScript"
//apply the indexOf() method to the string.
//indexOf() takes in the value to look for in the string as argument
//and returns the position number (index)
//indexOf(valueToFind)
document.write(myString.indexOf("Java"));
//JavaScript will print 6
//indexOf() includes spaces and starts counting at 0
//if no value is found the method returns -1
Have a go on your own: insert the code above between enclosing <script> tags and print the index position of different letters inside the string.
Try out: guessing gameYou're going to build a simple guessing game application using all the new knowledge you've acquired in this lesson. Your application is expected to check a name entered by the user and respond accordingly:
Your JavaScript code will be placed in its own external file and referenced from the HTML document. Separation of concerns, that is,separation between structure (HTML mark-up), appearance (CSS), and behavior (JavaScript), reflects contemporary best practices in web design.
Let's start with the HTML document. This is a simple web page with a textbox, a button, and a div where the JavaScript result will be displayed:
Pay attention to the enclosing <head> tags. These contain a reference to an external JavaScript file named lesson10.js located in the same directory as the HTML file (you're free to place the JavaScript file in its own directory, if you prefer. However, make sure this is reflected in the src value of your <script> tag in the HTML document).
Also, take note of the fact that the elements that are going to play a role in our script all have an id attribute. This gives JavaScript a hook on those elements and the data they will eventually contain.
Now open the JavaScript file lesson10.js and type the following code:
//This is the function that initializes our program
function init()
{
//Store a reference to the HTML button element in a variable:
//use the id of the HTML button element to do this
var myButton = document.getElementById("btnAnswer");
//use the onclick event of the button
//and assign the value of the getAnswer() function to it.
//This function performs the main job in your application //and runs after the user clicks the button on the page.
//Take note: getAnswer is assigned without brackets.
//This is so because otherwise getAnswer() would be called
//as soon as the page loads (and we don't want that).
myButton.onclick = getAnswer;
//the init function ends here
}
//Assign the init() function to the onload event:
//this event fires when the HTML page is loaded in the browser.
//Take note: init is assigned without brackets
onload = init;
//Now write the getAnswer() function
function getAnswer()
{
//Create all the vars you need to manipulate your data:
//secretName stores the correct answer the user is expected to guess:
var secretName = "Harry Potter";
//Turn the value of secretName into lower case:
//you do this because you're going to compare this value
//to the value entered by the user of your application.
//Given that users might type the answer either in upper or lower case,
//reducing the relevant text values to the same casing automatically
//ensures that only the content and not also the letter case plays a role in the comparison.
var secretNameLower = secretName.toLowerCase();
//Get the value the user types into the textbox
var myTextBox = document.getElementById("txtName");
var name = myTextBox.value;
//Also turn the value entered by the user to lower case
var nameLower = name.toLowerCase();
//Get a reference to the HTML paragraph that will display your result
//after the script has run by storing its id value in a var
var message = document.getElementById("message");
//These are the test cases your application needs to evaluate
//and respond to: if the user clicks the button but did not
//enter any value in the textbox:
if(nameLower.length <= 0)
{
alert("I didn't quite catch your answer. Please enter an answer");
}
//If the user gets right the first half but not the latter half of the name:
//Take note of the use of the logical operator &&
//(go back to lesson 5 if you need to revise logical operators)
//If the secret name and the name entered by the user match:
else if(nameLower.match(secretNameLower))
{
alert("You got it!");
message.innerHTML = "Congratulations, you win!";
}
//Default case - if the user types in the wrong answer:
else
{
alert("Wrong!");
message.innerHTML = "Sorry. The correct answer is: ";
message.innerHTML += name.replace(name, "Harry Potter");
}
//the getAnswer() function ends here
}
Show example
Save all your files and run the HTML page in the browser. You should see something similar to the example page indicated in the link above.
If you click the button without entering any value in the textbox, an alert will pop up inviting you to enter an answer.
If you get right the first half ("Harry") - indexOf() returns 0 ("Harry" is at position 0, which is the start of the index) - but not the latter half ("Potter") - indexOf() returns -1 (it finds no corresponding value inside the string), you get an alert letting you know that your answer is almost right.
If you enter the correct answer, well you'll get a prize.
Finally, if your answer is totally wrong, your application will say so and give you the correct answer.
The above code sample employs all the JavaScript tools you learned in this lesson and most of those you encountered in previous lessons. Experiment with it as much as you can. If you have doubts, leave a message in our JavaScript forum.
The really new stuff in the guessing game application is the way JavaScript functions work from an external file. This is the technique I'm going to use for our Try out exercises in most of the remaining part of this tutorial - at least until jQuery makes its appearance. This means that you'll be getting plenty of practice with it.
SummaryIn this lesson you started to have a taste of the power of objects. You also started to use an external JavaScript file for your Try out exercise, thereby conforming to best practice in contemporary web design techniques. Now have a break and get yourself ready for the next topic: the Date object.
Lesson 11: JavaScript Objects - Date ObjectBy Maria Antonietta Perna
In the previous lesson, you had a go at manipulating text by taking advantage of the powerful properties and methods of the String object.
Here we continue to explore the power of JavaScript objects: we will be looking into the magical virtues of the Date object.
Here's what you will do in this lesson:
create a Date object; set dates; compare dates.
The Date objectIn lesson 8 you learned how to retrieve the current date and display it on the web page in user-friendly format. This could be done dynamically thanks to the JavaScript goodness offered by the Date object.
The Date object exposes plenty of methods to manipulate dates and times, some of which we're going to examine here.
I recommend you try out all the demos below by inserting the code snippets between enclosing <script> tags in an HTML page (for such short demos we can get away with not using an external JavaScript file ). Also, feel free to experiment with each demo as much as possible before moving on to the next example.
Create a Date objectYou create a date object by using one of the following ways:
//First way:
//the var today is initialized with a Date object
//containing the current date and time
//on the basis of the user's computer
//use toLocaleDateString() to adjust the date
//to the local time zone and format it automatically
var today = new Date().toLocaleDateString();
//Second way:
//you pass a millisecond argument that starts at 1970/01/01:
//new Date(milliseconds)
var date = new Date(1000).toLocaleDateString();
//On my system this outputs: 01 January 1970
//Third way:
//You pass a string as argument:
//new Date(dateString)
var date = new Date("10 November, 2011").toLocaleDateString();
//Below you pass the year in a 4-digit format, and the month in number form:
//months are represented by numbers from 0 (January) to 11 (December)
var date = new Date(2011, 10).toLocaleDateString();
//On my system this outputs: 01 November 2011
After a Date object is created, you can use its methods to get and set dates and times.
Use getDate() to retrieve a date
//Create a Date object containing the current date and time
var myDate = new Date();
//use getDate() to extract the day of the month
document.write(myDate.getDate());
//At the time of writing, this prints 11
//days of the month range from 1 to 31
Use getTime() to retrieve a time
//Create a Date object containing the current date and time
var myTime = new Date();
//use getTime() to extract the time
document.write(myTime.getTime());
//At the time of writing, this prints 1321021815555
//This is the millisecond representation of the current
//date object: the number of milliseconds between
//1/1/1970 (GMT) and the current Date object
Get Date object componentsOnce you have a Date object, one interesting thing you can do with it is to get its various components. JavaScript offers some interesting methods to do just that.
Use getFullYear() to extract the year component//Create a Date object containing the current date and
time
var myDate = new Date();
//extract the year component and print it on the page
document.write(myDate.getFullYear());
//At the time of writing, this prints 2011
Use getMonth() to extract the month component//Create a Date object containing the current date and
time
var myDate = new Date();
//extract the month component and print it on the page
document.write(myDate.getMonth());
//At the time of writing, this prints 10
//which represents the month of November - months are represented
//with numbers starting at 0 (January) and ending with 11 (December)
Use getDay() to extract the day component//Create a Date object containing the current date and
time
var myDate = new Date();
//extract the day component and print it on the page
document.write(myDate.getDay());
//At the time of writing, this prints 5
//which represents Friday - days are represented
//with numbers starting at 0 (Sunday) and ending with 6 (Saturday)
Use getHours() and getMinutes() to extract time components
//Create a Date object containing the current date and time
var myDate = new Date();
//extract the hours component
var hours = myDate.getHours();
//extract the minutes component
var minutes = myDate.getMinutes();
//format and display the result on the page:
//check the minutes value is greater than 1 digit
//by being less than 10
if (minutes < 10)
{
//If it's just a one digit number, then add a 0 in front
minutes = "0" + minutes;
}
var timeString = hours + " : " + minutes;
document.write(timeString);
//Based on my computer clock, this prints:
//14 : 44
Set datesYou can also set dates and times as easily as calling the appropriate methods. Here are a few examples.
Use setFullYear() to set a specific date
In this demo, you will set a specific date and then retrieve its day component for display
//Create a Date object containing the current date and time
var myDate = new Date();
//set the Date object to a specific date: 31 October, 2011
var mySetDate = myDate.setFullYear(2011, 9, 31);
//Now retrieve the newly set date
var mySetDay = myDate.getDay(mySetDate);
//mySetDay will contain a number between 0 - 6 (Sunday - Saturday).
//Use mySetDay as test case for a switch statement
//to assign the corresponding week day to the number value
switch (mySetDay)
{
case 0:
mySetDay = "Sunday";
break;
case 1:
mySetDay = "Monday";
break;
case 2:
mySetDay = "Tuesday";
break;
case 3:
mySetDay = "Wednesday";
break;
case 4:
mySetDay = "Thursday";
break;
case 5:
mySetDay = "Friday";
break;
case 6:
mySetDay = "Saturday";
break;
}
//display the result on the page
document.write("The 31st October 2011 is a " + mySetDay);
//If you check the date on a calendar, you'll find that
//the 31st Oct 2011 is indeed a Monday
Compare 2 datesIn this demo you will compare 2 Date objects.
//Create a Date object
var myDate = new Date();
//set the Date object to a specific date: 31 October, 2011
var mySetDate = myDate.setFullYear(2011, 9, 31);
//Create a second Date object
var now = new Date();
//Make the comparison: if the set date is bigger than today's date
if (mySetDate > now);
{
//the set date is in the future
document.write("The 31st October is in the future");
}
//if the set date is smaller than today's date, it's in the past
else
{
document.write("The 31st October is in the past");
}
SummaryIn this lesson you looked into some of the methods of the Date object and had the chance to experiment with them.
In the next lesson you will be exploring JavaScript mathematical wizardry: get ready for the Math object.
Lesson 12: JavaScript Objects - Math ObjectBy Maria Antonietta Perna
We continue on our journey through JavaScript built-in objects by offering a quick overview of the Math object.
You already had occasion to taste the power of the Math object back in lesson 7, where you used its random() method to generate a random number between 0 and 1, and its floor() method to round down the resulting random number.
The Math object allows you to write scripts that perform complex mathematical tasks in the blink of an eye.
In this lesson you will use:
Math.PI to calculate the circumference of a circle; Math.sqrt() to calculate a square root value.
In the process, you will learn how to use:
parseInt()/parseFloat() to convert strings to numbers; isNaN() to check whether a value is or is not a number;
Math.PIThis property stores the value of PI, a mathematical constant that amounts to approximately 3.14159.
Let's quickly refresh our school math. Here are some definitions:
Circle
A circle is a shape with all points the same distance from the center:
the round border surrounding the shape (the color blue in the graphic above), is the circle circumference;
the line cutting the circle horizontally in half (the color red in the graphic above) is the circle diameter;
each half of the diameter represents a radius.
PI is the ratio of the circumference of a circle to the diameter.
If you need this value in your JavaScript program, use Math.PI. Just try this one out between enclosing <script> tags of an HTML page:
//store and display the value of PI:
var pi = Math.PI;
document.write(pi);
Try out: use Math.PI to find out the circumference of a circleIt's time for this lesson's first try out exercise. We're going to build a simple application where the user enters a number representing the radius of a circle, clicks a button, and the program calculates the circumference and displays it on the page.
Keeping in mind that the radius is half the diameter, and that the formula to calculate the circumference is PI * diameter, our JavaScript statement to calculate the circumference given the radius will be: 2 * (Math.PI * radius).
First things first: prepare an HTML document like this one:
<!DOCTYPE html><html><head>
<title>Lesson 12: JavaScript Objects - Math Object</title>
The HTML page above references an external JavaScript file, lesson12_tryout1.js, and contains an inputbox, a button, and a paragraph where the result of the calculation will be displayed. Make sure these 3 crucial elements have an id value so your JavaScript script will have an easy to reach hook on those elements.
Now create a JavaScript document and name it lesson12_tryout1.js. This file will contain 3 functions:
1. init() initializes the script by binding the processAnswer() function to its appropriate event, that is, the btnSubmit onclick event;
2. processAnswer() checks the answer submitted by the user, calls the function that performs the calculation, and displays the result;
3. getCircumference(rad) gets passed the radius value as argument, performs the actual calculation, and returns the circumference.
//init() function binds the processAnswer() function
//to the onclick event of the button
function init()
{
var myButton = document.getElementById("btnSubmit");
myButton.onclick = processAnswer;
}
/*********************************************/
//Bind the init function to the onload event
onload = init;
/*********************************************/
//This function checks the user's input,
//calls the function that performs the calculation,
//and displays the result
function processAnswer()
{
//store a reference to the inputbox
var inputBox = document.getElementById("txtRadius");
//get the radius value entered in the inputbox
//make sure to convert the string (text) to a number:
//calculations can only be performed with numbers,
//and the value in the inputbox is processed as string.
//parseInt(string) and parseFloat(string)
//take a string as input and return an integer
//or a floating point number respectively.
var radius = parseInt(inputBox.value);
//get a reference to the paragraph to display result
var result = document.getElementById("result");
//create and initialize a var to store the result
var resultString = "";
//Perform some validation on the user's input:
//if the value entered by the user is not a number
//alert the user. isNaN(value) takes
//a value as input and returns true if the value is not a number,
//it returns false if the value is a number.
//the expression below is short for:
//if (isNaN(radius) == true)
if (isNaN(radius))
{
alert("Please, enter a number");
}
else
{
//if the user has correctly entered a number,
//call the function that performs the calculation
//and display the result on the page
var circ = getCircumference(radius);
resultString = "Circumference is: " + circ;
result.innerHTML = resultString;
}
}
/*********************************************/
//This is the function that performs the calculation:
//it takes the radius as input and returns the circumference
Save all your files and run the HTML page in the browser. You should see something like the page indicated by following the example link above.
If you click the button without entering any value in the inputbox, or if you enter a letter rather than a number, the program asks you to enter a number value.
As you click the button, the calculation is performed and the result is displayed on the page.
Math.sqrt()Math.sqrt(number) takes a number as argument and returns the square root of that number.
If a negative number is entered as argument, for instance Math.sqrt(-5), the function returns NaN, that is, a value that JavaScript does not treat as a number.
Brushing up on our school math, the square root of 25, for example, is that number that multiplied by itself yields 25 as a result, that is, 5.
The formula is: square of n = n * n. JavaScript performs this calculation automatically. Here's a quick demo: type the following code between enclosing <script> tags of an HTML page:
var squareRoot = Math.sqrt(25);
document.write("The square root of 25 is: " + squareRoot);
//This should print:
//The square root of 25 is: 5
Try out: square root calculatorYou will build a simple square root calculator. Here are the requirements for this little application:
the user will be able to enter a number value into an inputbox; the user will be able to click a button that calculates the square root of the number
entered into the inputbox; the result will be displayed on the web page.
Create a fresh HTML page with an inputbox, 1 button, and a paragraph where the result will be displayed. These HTML elements contain id attributesthat will provide a handy hook for our JavaScript code.
<!DOCTYPE html><html><head><title>Lesson 12: JavaScript Objects - Math
Now create the lesson12_tryout2.js file. This file will contain 3 functions:
1. init() initializes the script by binding the displaySquare() function to its appropriate event, that is, the btnSubmit onclick event;
2. displaySquare() checks the answer submitted by the user, calls the function that performs the calculation, and displays the result;
3. calculateSquare(input) gets passed the number value entered by the user as argument, performs the actual calculation, and returns the the square root.
//write the function to initialize the script
function init()
{
//Bind function that processes the result to
//the onclick event of the button
var myButton = document.getElementById("btnSubmit");
Save all files and preview your work in a browser. You should see something similar to the example indicated by following the link above.
Enter a number into the inputbox and click the button. If you enter anything but a number into the inputbox (or if you leave the inputbox empty), you'll be alerted by a popup box asking you to enter a number. If all goes well, the square root of the number you enter in the inputbox will be displayed on the page.
If the application is not working, check your typing, especially letter casing, brackets, and semi-colons ( ; ). If you have any doubts, just drop us a line in the forum dedicated to this tutorial.
SummaryYou've made it to the bottom of the page, congratulations! After this lesson you've added new tools to your JavaScript toolbox: the PI property and sqrt() method of the Math object. You also know how to convert a string (text) to a number data type with parseInt() and parseFloat(), so that you can use the value to perform calculations. Finally, you learned how to check user input with isNaN().
It's time for your break before the next big topic: the Array object.
Just using a few properties and methods of common JavaScript objects has opened your eyes to the amazing things that Object Oriented Programming enables you to accomplish with a few lines of code. In this lesson, you will learn to use what is a very powerful object in most programming languages, including JavaScript of course: the Array object.
In particular, in this lesson you will learn:
what the Array object is for; how to create arrays; how to access, sort, add, and remove data inside an array.
In the process, you will learn how to use the for ... in loop to access data inside an array.
What is the Array object for?An object's job is that of storing and allowing for the easy manipulation of data. We can safely say that the Array object performs both tasks wonderfully.
From the perspective of data storage, an array works a bit like a variable. The difference is that you are not limited to one piece of data, as it's the case with common variables. You can stuff several items at once inside an array and retrieve whichever you need at the right time in your program.
Imagine if you had to have a storage place for each pair of socks. This would be a nightmare! Having a drawer to store all your socks in one place makes much more sense. In this respect, arrays are a bit like drawers, but much more powerful.
From the point of view of data manipulation, the Array object offers a wealth of properties and methods, some of which you will examine in this lesson.
How do you create an Array object?You create an array in 1 of 3 ways:
1) use new Array()This is the most verbose approach. It works as follows:
2) use new Array(item0, item1, item2 ...)This approach also employs the new Array() constructor, but does so using a more concise formulation. Here's what it looks like:
var colors = new Array("green", "red");
3) use the literal array approach
This is the shortest way of creating and populating an array, and it's the most widely used approach. It looks like this:
var colors = ["green", "red"];
All 3 approaches illustrated above, create an array object called colors containing 2 string values, "green" and "red" - but arrays can store all other data types: numbers, booleans, even other arrays! The items in our array occupy position 0 and 1 respectively.
As you might have guessed, you count the index position of an item inside an array starting at 0.
But, is this index position important? Well, yes it is, at least if you want to use the items inside the array, which is most likely the case.
Here's what I mean.
How do I access data inside the Array object?Arrays are great to store several values using only 1 variable. However, they wouldn't be so great if you couldn't also access those values quickly and easily. Here's how it's done:
//"green" is at index position 0, "red" is at index position 1, etc.
var colors = ["green", "red", "yellow", "orange", "blue"];
var red = colors[1];
document.write(red);
Enter the code snippet above between enclosing <script> tags in an HTML page, save your work, and run the page in the browser. You should see the word red displayed on the page.
What you did was to access the second value in the colors array by using its index position within the array starting to count at 0.
Access all items in the array with a loop
You might have probably guessed this, but loops and arrays go together like cookies and milk. Here's how you would access all values inside an array by looping over each of them:
//use the array from the previous example
var colors = ["green", "red", "yellow", "orange", "blue"];
//use a for loop to access each item in colors
//The array object has a length property
//that contains the size of the array: you can use it in the for loop
for (var i=0; i < colors.length; i++)
{
//You use the counter i to access the index position
document.write(colors[i] + "<br />");
}
Save your file and preview the page in a browser. You should see the color names displayed on the page.
There's also a special type of for loop that you can use with the Array object, the for ... in loop. Here's how it works:
//use the array from the previous example
var colors = ["green", "red", "yellow", "orange", "blue"];
for (color in colors)
{
//color is the variable that marks the index position
document.write(colors[color] + "<br />");
}
Run the HTML document containing the code snippet above inside <script> tags in a browser. The web page should look the same as it did in the previous example.
Once you access a value inside an array you can simply retrieve it, as you did in the previous example, or you can modify it, as follows:
var colors = ["green", "red", "yellow", "orange", "blue"];
colors[2] = "pink";
//Now you've replaced the item at index position 2,
//the third item called "yellow",
//with "pink"
document.write(colors);
//The code should print:
//green,red,pink,orange,blue ("pink" has replaced "yellow")
Can I sort array items?You can do amazing stuff with values stored inside an array. For example, you can sort items alphabetically, in descending or ascending order, or numerically. Let's see how this is done.
You sort array elements with a fantastic method most appropriately called sort(). Here it is in action:
//sort the colors array alphabetically and ascending:
var colors = ["green", "red", "yellow", "orange", "blue"];
var ascendingColors = colors.sort();
//display each value
document.write(ascendingColors);
//This should print:
//blue, green, orange, red, yellow
If you want to sort numerical values inside an array, either in ascending or descending order, you need to build a simple custom function and pass this function as argument to the sort() method. It sounds a bit harder than it actually is. Here's how it's done:
//build a new array containing number values
var myNumbers = [4, 2, 10, 6, 9];
//build your custom function: this is a simple formula
function sortAscending(a, b)
{
//the formula return a - b sorts the numbers
//from the smaller to the bigger,
//the formula return b - a sorts numbers in descending order,
//that is, from the bigger to the smaller number
return a - b;
}
//pass the sortAscending function as argument to sort()
var sortedAscending = myNumbers.sort(sortAscending);
//print result on the page
document.write(sortedAscending);
//This should print:
//2,4,6,9,10 . Now try sorting in descending order on your own.
How do I add data to the Array object?You can add new items inside an array in different ways. Which method you choose depends largely on your program's requirements.
Add items to the end of the array with push()
What feels more like the natural order of things, that is, adding an item to the end of an array, is easily achieved using the push() method. Here's how it works:
//use our old colors array
var colors = ["green", "red", "yellow", "orange", "blue"];
//use push() to add the color "pink" at the end
colors.push("pink");
//print the enlarged array
document.write(colors);
//This should print:
//green,red,yellow,orange,blue,pink
Add items to the beginning of an array with unshift()
Use unshift() to add new items to the start index position of an array. This is easily done.
Just replace push() with unshift() in the previous example, save your work and run the page in a browser. The page should display the color name "pink" at the very start, like so:
pink,green,red,yellow,orange,blue.
How do I remove data from the Array object?If you want to remove the last item in an array you use pop(). If you want to remove the first item in an array you use shift().
var colors = ["green", "red", "yellow", "orange", "blue"];
//remove "blue" from colors
colors.pop();
document.write(colors);
//This prints: green,red,yellow,orange
//remove "green" from colors
colors.shift();
document.write("<br />" + colors);
//This prints: red,yellow,orange
//on a new line break
Have fun experimenting with the examples above and come back to our try out challenge as soon as you're ready.
Try out: Username registrationYou will build a mock Username registration program with the following requirements:
the user can enter a Username in the inputbox, and click a button to register; if the Username already exists, the program informs the user; if the Username is not already stored in the program, the new Username is added,
the user is informed, and all stored Usernames are displayed on the page in alphabetical order.
A real registration program would ask for more information, the data would be permanently stored in a database, and existing Usernames would never be printed out for everybody to see.
However, this is a mock application: our Usernames are stored in a global array. This ensures that the values inside will be accessible from any function in the script, and the newly added Usernames will be preserved for as long as the program runs. Displaying the Usernames on the page will show the workings of the global variable (see Lesson 4 for a refresher on global variables) as well as of the array methods push() and sort().
Enough talking, let's get coding! Prepare an HTML page with an inputbox, a button, and a paragraph to display messages to the user. Make sure each element has an id value so that your code can have an easy handle on them.
The HTML document<!DOCTYPE html><html><head><title>Lesson 13: JavaScript Objects - Arrays</title><script type="text/javascript"
src="lesson13_tryout.js"></script></head><body><h1>Lesson 13: Register with us</h1>
<p>Register a Username: <input type="text" id="txtName" /></p>
//set the success flag to false so the rest of the program knows
//that registration failed
success = false;
//stop further program execution
return false;
}
//else - if the Username entered by the user
//is not already stored in the application, register new user:
else
{
message = "Great, you've successfully registered with us as " + newName;
result.innerHTML = message;
//set the success flag to true, so the program knows
//the new Username can be added
success = true;
}
}
//Now you're out of the loop
//if registration was successful (success flag is true),
//add new Username to the array with push()
if (success)
{
userNames.push(newName);
}
//display Usernames sorted alphabetically on a new line
result.innerHTML += "<br />" + userNames.sort();
}
Show example
Save all your files and run the HTML document in a browser. You should see something similar to the example page indicated by following the link above.
Try clicking the button without entering anything in the inputbox, then enter a Username already present in the array - for example, supercoder - and try to register; finally, enter a new name and see it getting added to the array. As you enter new names, these get added to the array and displayed alphabetically.
SummaryYou've worked really hard in this lesson, well done! You're now familiar with the Array, a powerful JavaScript object, and some of its fantastic methods. You can also use a for in loop to access array values, and you've built a challenging little demo application.
Take your well-deserved break, the next topic awaits you: get ready for an exploration of the very environment that makes JavaScript possible, thebrowser.
Lesson 14: JavaScript Living Space - the Browser EnvironmentBy Maria Antonietta Perna
As we have seen, the JavaScript language is made up of objects, their properties and methods. Your JavaScript code is interpreted and executed by a web browser. Therefore, JavaScript lives and comes alive in the browser environment.
This environment, in its turn, is also present in the JavaScript language, and obviously it is so in object form. Better yet, in the form of several objects, their properties and methods.
In this lesson you will be presented with a quick overview of the main objects making up the browser environment.
In particular, you will learn about:
the Browser Object Model (BOM); the Document Object Model (DOM); accessing, adding, and removing DOM elements and attributes.
What is the Browser Object Model (BOM)?The BOM is a a collection of objects that represent the browser and the computer screen. These objects are accessible through the global objectswindow and window.screen.
The window object is global to the extent that it represents the very host environment of all other JavaScript objects. It's so fundamental, that you've already used it without needing to invoke it explicitly.
In fact, you already used alert() and onload. You didn't need explicitly to write window.alert() because the global window object was already presupposed.
Also, you could think about the window object as being at the top of a tree-like hierarchy of other objects, its descendants, or children. In fact, it's quite common for programming languages to use family-related metaphors to refer to objects representing their environment.
You will have occasion to work further with the window object through the rest of this tutorial. For now, let's move on to the Document Object Model (DOM).
What is the Document Object Model (DOM)?One of the most interesting children of the window object, certainly from the point of view of JavaScript, is the Document object. This gives access to the all the elements that make up your HTML document.
The DOM is an ever evolving standard defined by the World Wide Web Consortium (W3C) implemented with varying degrees of consistency among different kinds of browsers. It contains a wealth of properties and methods that enable you to access and manipulate anything you can think of in an HTML document. So far you've used document.write() to write on the HTML page, and document.getElementById() to get a hook on an HTML element. But there's a lot more.
For example, here's all the info the document object can be made to yield when appropriately nudged. Insert the following code inside enclosing <script> tags of an HTML page and preview its content in a browser:
//Set up your variables to represent
//bits of info about your document:
var myTitle = document.title;
var myUrl = document.URL;
var myLastModification = document.lastModified;
var myInfoString = "The title of my document is: " + myTitle + "<br />";
myInfoString += "My document's URL is: " + myUrl + "<br />";
myInfoString += "My document was last modified on: " + myLastModification;
document.write(myInfoString);
That's so cool. Let's have a look at how the HTML page is represented in the DOM.
What does a DOM representation of an HTML page look like?The DOM represents HTML elements in a top-down tree-like structure. For instance, let's consider the following simple HTML document:
The DOM representation of the elements in the HTML page above is as follows:
The DOM elements are also known as nodes. Family-related metaphors are also used to represent the relationships and the position of each node with respect to the others. In connection to the DOM tree graphic above, we find:
1. The <html> node
The <html> element or node, is parent to all other nodes. In fact, all other DOM nodes are nested inside the <html> node;
2. <head> and <body> nodes
Next, we find 2 elements: the <head> and the <body>. These have a parent/child relationship with the <html> element (the parent). Because both are on the same level, they're siblings with respect to each other;
3. <title> and <p> nodes
The next level down is occupied by the <title> as child of the <head>, and 3 <p> elements as children of the <body>. In our sample HTML page above, <title> and <p> tags are siblings when considered with respect to each other;
4. Text nodes
The text inside the <p> tags, and the text inside the anchor tag are called text nodes. In this case they're children of the <p> element and the <a> element respectively;
5. Anchor tag
The next level down is occupied by an anchor tag, which is child to one of the <p> tags.
How do I access DOM elements?Use one of the 2 following methods of the document object to access DOM elements.
Get the DOM element by its id attribute
The most widely used method of the document object to access DOM elements is certainly our old friend document.getElementById(elementId). This is the most appropriate way of accessing 1 HTML element at a time.
var inputBox = document.getElementById("txtHello");
alert(inputBox);
//if you run this code in an HTML page containing
//an input element called txtHello, you should see
//[object HTMLInputElement] displayed in an alert box.
Get DOM elements by tag name
Another popular way of accessing DOM elements is by using their tag name in the HTML mark-up. This is a handy way of grabbing all HTML elements in one go that have a tag name in common, such as images, links, list items, etc. You can store a reference to these elements in an array and manipulate them via JavaScript.
For example, in an HTML page containing a list and 3 list items, you can access each list item and modify their color and background-color style properties by inserting the following code in enclosing <script> tags:
//Retrieve all 3 list items and store them in an array
var listElems = document.getElementsByTagName("li");
//loop over each list item and access the style property
for (var i = 0; i < listElems.length; i++)
{
//Notice how you write backgroundColor,
//NOT background-color as you would in CSS:
listElems[i].style.backgroundColor = "red";
listElems[i].style.color = "white";
}
Show example
Run your HTML page in the browser. You should see something like the page indicated by following the example link above.
How do I add DOM elements?In previous lessons you used the practical and easy innerHTML property of an HTML element to add new stuff to your web page, be it new mark-up or new text.
However, innerHTML, although widely used, has not been recognized as a standard by the W3C. The DOM standard way to add new elements to an HTML page via JavaScript is done as follows. Enter the code below in enclosing <script> tags inside an HTML page:
//First create a <p> element with createElement(element):
var newParagraph = document.createElement("p");
//Then add <p> to the <body> tag with appendChild():
document.body.appendChild(newParagraph);
//Now create the text that goes inside the new <p> element
//with createTextNode():
var newTextPara = document.createTextNode("Hello DOM standard");
You can also add attributes to the newly created DOM nodes with setAttribute(attrType, attrName), and later retrieve them withgetAttribute(attrType). Using the code snippet above, you can add an id called newParagraph to the newly created paragraph like so:
var newParagraph = document.createElement("p");
//setAttribute has 2 string arguments: the attribute we want to set
//and the name we want to apply to the attribute.
//Here we create an id attribute called newParagraph:
newParagraph.setAttribute("id", "newParagraph");
document.body.appendChild(newParagraph);
var newTextPara = document.createTextNode("Hello DOM standard");
newParagraph.appendChild(newTextPara);
//getAttribute() has one string argument: the type of attribute
//we want to retrieve:
alert("The Id of the new paragraph is: " + newParagraph.getAttribute("id"));
Show example
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above.
As you can see, there are at least 2 steps you need to take to insert fresh stuff inside an HTML page with JavaScript:
1. create the new content: to do this you use either createElement(element) in case of an HTML tag, or createTextNode(text) in case of new text content;
2. append the newly created DOM node to the appropriate location in the HTML document.
I know, it's a bit more involved than the straightforward innerHTML, but it's standard-compliant.
How do I remove DOM elements?That's pretty simple stuff. First grab the DOM node you want to remove, then use removeChild(elementToRemove).
Note that the onclick attribute of the button element contains a call to the deleteParagraph() function. Let's write this function inside enclosing <script> tags in the <body> of our HTML page:
function deleteParagraph()
{
//retrieve the element you want to remove:
var remove = document.getElementById("remove");
//use removeChild(elementToRemove) to delete the element
document.body.removeChild(remove);
}
Show example
Save your work, run it in a browser, and click the button. You should see something like the page indicated by following the example link above: after you click the button the paragraph should be removed from the page.
SummaryIn this lesson you got introduced to the concepts of Browser Object Model (BOM) and Document Object Model (DOM). You also learned a few methods of the document object to access, modify, add, and delete HTML elements in a standard-compliant manner.
Well done! It's time to take a break and get ready for the next lesson where you tackle your first real-world task: setting and retrieving cookies.
Lesson 15: Useful Tasks (I) – Setting and Retrieving CookiesBy Maria Antonietta Perna
You've come a long way in this tutorial. You're ready to look more closely at how JavaScript performs a real world task: setting and retrieving cookies.
In this lesson, you will learn:
what a cookie is; how you can store cookies on your website visitors' computer; how you can retrieve the cookie and use the values stored in it on the web page.
In the process, you will have occasion to use the global escape() function, the split() method of the String object, and the toGMTString() method of the Date object.
What's a cookie?The values stored in JavaScript variables are destroyed as soon as the browser is closed or the page is reloaded. Therefore, if you use an input box on your web page to store visitors' names in a variable, that value is lost as soon as they leave the page.
A common feature present in most websites today is some sort of personalization mechanism whereby web visitors are recognized. Some instances of this personal touch can be things like greeting returning visitors by their name, indicating how long it's been since the last visit to the website, showing some products that might be of interest to the user based on past purchases, etc.
As you might have guessed, we're dealing with values, and if we want to use them in our JavaScript program, we need a storage place for them. However, all storage places examined so far are temporary. We need something that persists in between visits to our web page.
This is where cookies enter the scene.
Cookies are strings of text containing small pieces of data about your website visitors. They are stored by the browser in your visitors' computers. Each cookie has a name and an expiration date, and is separated from other cookies by a semicolon ( ; ). The fact that cookies are all stored in the same place, retrieving a specific cookie out of the collection to read its values calls for some little work on our part.
However, before we can retrieve a cookie, we need to write one and store it in the visitor's browser.
How do I set cookies with JavaScript?Cookie data is stored in the document object's cookie property. The data is stored as "name=value" pairs, in which the values may not contain any whitespace, commas ( , ) and semicolons ( ; ). This is why we use the escape() method, which enables us to encode the string in Unicode format(e.g., a space is represented as %20).
By default the lifespan of cookies is limited to the current browser session. However, by setting an expiry date in the form of an "expires=date" pair, we can prolong the cookie's life (unless the user decides to delete the cookies stored on her machine). The date value is a GMT string, which can be obtained by using the Date object and its toGMTString() method.
If you insert the code snippet below inside enclosing <script> tags of an HTML page, you set a cookie named "myCookie" on your visitor's computer, thatexpires after a minute starting from the time of its creation:
//If no cookie is present, we create one
if (! document.cookie)
{
var cookieName = "Test Cookie";
//escape the string to make sure there are
//no unallowed characters
var myCookie = escape(cookieName);
//set the expiry date to 1 minute from creation date:
//get current date and add 1 minute reduced to milliseconds:
document.write("Thank you, " + cookieName + " is your cookie");
}
That's all set. The browser running a page containing the code snippet above, will store a cookie by the name "myCookie" with a value of "Test Cookie", that expires after 1 minute.
How do I retrieve and use cookies in my web page?Retrieving cookies to read their values requires the use of a couple of methods. First, you need to unescape the name value that you previously escaped. This means that, if your name value contained a space, it was escaped by replacing the space with %20. Now that you're reading the value back from the cookie name, you need to replace %20 with a space character. This is easily done with the unescape() method.
Secondly, you need to extract each name-value pair separately from the cookie string. You do this with the split() method of the String object.
split() is used to split a string into an array of comma ( , ) separated substrings. It takes an optional argument called separator. This specifies the character to use for splitting the string.
The code snippet below will check if cookies are present in the cookie property of the document object. If they are, the script extracts and displays the values of the "myCookie" cookie.
//continue from the previous code snippet
else
{
var myCookieString = unescape(document.cookie);
//create a comma-separated array of substrings from the string
//containing the cookie values by using
//split() with "=" as separator.
//Remember name/value pairs in the cookie
//string are separated by an = sign:
var dataList = myCookieString.split("=");
//check that the name at index position 0 is
//"myCookie" (remember the cookie name from previous example):
if (dataList[0] === "myCookie")
{
//let's extract the value of myCookie
//by using split() once again. Now the items in
//dataList array are separated by " , ".
//This will be our separator in the split() method.
//Item 1 (index 0) is the cookie name,
//item 2 (index 1) is the value, which is what we need:
var data = dataList[1].split(",");
//Now we have a new array of strings called data.
//containing only the cookie value ("Test Cookie"),
//which is at index 0. We extract it:
var cookieName = data[0];
}
//Now we display a personalized greeting
document.write("Welcome back, here's your cookie, " + cookieName);
}
SummarySetting and retrieving cookies to make your website visitors feel welcome is a widely used practice on the web, therefore it's a great new skill to add to your JavaScript toolbox.
Our next useful JavaScript task is how to make sure your website visitors submit a validly filled out form. This is the topic of our next lesson: form
Lesson 16: Useful Tasks (II) – Form ValidationBy Maria Antonietta Perna
A web form is a staple feature of almost any website today. Nothing can be more frustrating for your visitors than filling out all form fields, clicking the submit button, and have the entire form come back, emptied of all their carefully entered values, and displaying a cryptic error message expecting them to start all over again.
Any data that comes from users must be validated. This means that programs must check that no empty values are submitted, that submitted values are of the right type and length, etc. However, such checks are necessarily performed after the user has filled out and submitted the form to the server.
If the server is busy and takes a while before alerting the user that the form could not be accepted due to errors, users might get quite annoyed and decide not to come back to your otherwise fantastic website.
Thankfully, this rarely happens nowadays, thanks to JavaScript. In fact, although it's crucial that checking user input must be done on the server (e.g., php, .net, ruby, etc.), client-side JavaScript can do a lot to make the experience less painful and time consuming.
JavaScript runs in the user's browser, therefore it executes immediately. There's no need for the form to be submitted to the server before alerting the user that, for example, she has left one of the required fields empty.
In this lesson, you will learn how to:
make sure users fill out all required form fields; make sure users enter a valid email.
How do I validate empty form fields?In previous lessons you already performed some validation tasks. For example, you used isNaN() to make sure users entered a number data type. You also checked users didn't submit an empty value by using something like if (inputboxValue == "") { alert user...}. Let's see what else you could do to prevent users from submitting an empty form field.
Prepare an HTML document with a form and a button, like the one below:
<!DOCTYPE html><html><head>
<title>Lesson 16: Form validation</title></head><body><h1>Lesson 16: Form validation</h1>
In between <script> tags write the validate() function as follows:
function validate()
{
var userName = document.getElementById("txtName").value;
//if the length of the string value is 0,
//it means the user has entered no value:
if (name.length == 0)
{
alert("Please, enter your name");
return false;
}
else
{
alert("Thank you, " + userName);
}
}
Save your work and run the page in a browser. Try submitting the form leaving the inputbox empty, and see what happens. Can you post the form? I hope not.
How do I validate email addresses?Email addresses present a characteristic pattern. We know that they have one @ character and at least a dot ( . ) character.
More detailed patterns of email addresses, as well as of domain names, zip codes, telephone numbers, etc., can be validated using a powerful feature called regular expression. A treatment of regular expressions is beyond the scope of this tutorial. However, if you're interested the web offers a wealth of material on the subject.
In our code snippet we use some string manipulation methods to make sure the value entered by the user has an @ character and a dot.
<!DOCTYPE html><html><head><title>Lesson 16: Form validation</title></head><body><h1>Lesson 16: Form validation</h1>
var email = document.getElementById("txtEmail").value;
//still check user entered a value
if (email.length == 0)
{
alert("Please, enter an email address");
return false;
}
//if the index position of the @ or . characters
//is -1 (any value bigger than this, including 0,
//means the character is present)
else if (email.indexOf("@") == -1 || email.indexOf(".") == -1)
{
alert("Please, enter a valid email address");
return false;
}
//if we get here, all went well
else
{
alert("Thank you");
}
}
Save your work and preview the page in a browser. Now, enter an email address with no @ character or no dot charachter. Is your form submitting the value to the server? Hopefully, it isn't.
Try out: form validation demoIn this try out you will build a JavaScript program that checks user input (name and email) before web form submission. Prepare an HTML page containing a form with 2 inputboxes and a button, and add a paragraph with an id attribute called result to display messages to the user, like the one below:
<!DOCTYPE html><html><head><title>Lesson 16: Form validation</title><script type="text/javascript"
src="lesson16.js"></script></head><body><h1>Lesson 16: Form validation</h1>
Now create the lesson16.js file. This contains 5 functions:
1. init() binds the main function, validate(), to the form's onsubmit event;2. validate() examines the results returned by functions validating required fields and
email format and displays an appropriate message;3. validateRequired(input) checks the input box has a value. It returns true if it has
and false if it hasn't;4. validateEmail(email) checks the email is valid and returns true if it is, false if it isn't;5. writeMessage(text) displays a message to users when something goes wrong. It
would be annoying to have alerts popping up every time an error occurs.
function init()
{
var myForm = document.getElementById("myForm");
myForm.onsubmit = validate;
}
/********************************/
//bind init() function to onload event
onload = init;
/******************************************/
//validate() checks answers from validateRequired()
//and validateEmail() and displays appropriate messages.
//If an error occurs program execution is stopped:
function validate()
{
var name = document.getElementById("txtName").value;
var email = document.getElementById("txtEmail").value;
//validateRequired() and validateEmail()
//return true/false values: create
//variables to store the result
var isRequiredNameSet = false;
var isRequiredEmailSet = false;
var isEmailValid = false;
//create variable that holds message to display
var message = "";
isRequiredNameSet = validateRequired(name);
isRequiredEmailSet = validateRequired(email);
isEmailValid = validateEmail(email);
//if all values are valid, prepare thank you message
//and allow form submission
if (isRequiredNameSet && isRequiredEmailSet && isEmailValid)
{
message = "Thank you, your details have been successfully posted!";
}
//if the name field is empty, write message to user and stop submission:
else if (! isRequiredNameSet)
{
message = "Please, enter a name";
writeMessage(message);
return false;
}
//If the email field is empty, write message to user and stop submission:
else if (! isRequiredEmailSet)
{
message = "Please, enter an email";
writeMessage(message);
return false;
}
//If the email is not in a valid format (no @ or . characters),
//we write a message to the user and stop program execution:
else if (! isEmailValid)
{
message = "Please, enter a valid email";
writeMessage(message);
return false;
}
//If we are here validation is successful:
//display the thank you message with an alertbox:
alert(message);
}
/***********************************************/
//This function takes an argument
//that represents the input element and checks
//that it's not empty - it returns true if input is valid
//and false if input is not valid:
function validateRequired(input)
{
var isValid = false;
if (input.length == 0)
{
isValid = false;
}
else
{
isValid = true;
}
return isValid;
}
/**********************************************/
//validateEmail(email) checks the email is in valid
//format and returns true if it is, false if it isn't:
function validateEmail(email)
{
var isValid = false;
if (email.indexOf("@") == -1 || email.indexOf(".") == -1)
{
isValid = false;
}
else
{
isValid = true;
}
return isValid;
}
/**********************************************/
//writeMessage(text) has the message to
//display to the user as argument, clears any previous
//content from the paragraph with the id of result
//and inserts the appropriate message for display
//using DOM compliant techniques (lesson 14):
function writeMessage(text)
{
var paragraph = document.getElementById("result");
//The content inside the paragraph is the paragraph's
//first child. We check if there is any content and remove it:
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above.
Try clicking the submit button without filling out the form properly. If all goes as expected, you should not be able to submit your form unless it's values are complete and appropriate.
Obviously, your script can't verify an email address, but it can validate its format. Finally, keep in mind that for a detailed check of the email pattern, the best tool for the job is a regular expression.
SummaryYou've come a long way in your JavaScript journey, well done!
Now get ready for the next lesson: time to start exploring the world of JavaScript animation with the timing functions.
Lesson 17: JavaScript Timing Events
By Maria Antonietta Perna
The global window object offers a few little functions that are great if you want to create the effect of movement or of passing time on the web.
In the process, you will also learn how to preload images with JavaScript and how to build a simple photo gallery application.
How do I use setTimeout()?If your program has a chunk of code that needs to be executed after a specified time, then setTimeout(actionToExecute, timeInMilliseconds) is your function.
Let's see it in action. In this simple example, we will call up an alertbox 2 seconds after page load. Type the code below in enclosing <script> tags on a simple HTML page:
//Package the code to insert in the
//timer in a simple function:
function sayHello()
{
alert("Hello");
}
//Package the timer into its own function
function timeGreeting()
{
//assign the timer to a variable:
//you need to do this so the timer can be
//referenced by another function when you want
//to stop it:
var greeting = setTimeout(sayHello, 2000);
//Notice how the time is set in milliseconds.
}
//Now call the timer function
timeGreeting();
Save your work and run it in a browser. After 2 seconds, an alertbox should pop up to greet you.
How do I use setInterval()?If you need to execute a chunk of code at specified time intervals, then setInterval(codeToExecute, timeIntervalInMilliseconds) is your function.
To see it in action in its most annoying manifestation, just replace setTimeout with setInterval in the previous example and you're done.
Now you should see an alertbox greeting you every 2 seconds! That's enough, just close that window in your browser and let's modify our script so that we can put a stop to that nuisance.
How do I stop the timer?JavaScript offers 2 handy methods to get rid of timers: clearTimeout(timerVariable) if your timer uses setTimeOut(), andclearInterval(timerVariable) if your timer uses setInterval(). Let's put clearInterval() to good use right away by stopping that annoying alertbox. First of all, add an inputbox to your HTML page, like so:
Next, rewrite the preceding JavaScript code and then add the new function as follows:
//Make the variable holding the timer
//global, so that it can be accessed both
//by the function setting the timer and by the function
//stopping the timer:
var greeting;
//sayHello() remains unchanged from the previous example
function sayHello()
{
alert("Hello");
}
//we increase the time interval
//to give more time to the user to
//click the button that stops the alert:
function timeGreeting()
{
greeting = setInterval(sayHello, 5000);
}
timeGreeting();
//package the code that cancels the timer
//in its own function that will be called when
//the button on the page is clicked:
function stopTimer()
{
//you call clearInterval() and pass the variable
//containing the timer as argument
clearInterval(greeting);
}
Save your work and preview it in a browser. Just click the button and the annyoing alertbox disappears: that's much better, great! I leave you to experiment with clearTimeout() on your own.
Try out: a photo gallery applicationJavaScript timers are often used to produce animation effects on the web. Photo galleries are one of those widely used applications that often employ JavaScript timers.
It's easy to find a number of sophisticated photo gallery widgets on the web, that you can download and readily plug into your own web page.
However, it's still nice to be able to build a simple prototype, just to really challenge yourself with your newly gained knowledge. In any case, your application can be considered a work in progress, something that evolves and grows as your JavaScript programming skills evolve and grow.
At this stage, your photo gallery will consist of a photo container and 2 buttons: one button to stop the gallery, and one button to restart the gallery. As soon as the page loads, the gallery automatically displays its images one at a time every 2 seconds.
You will also need a few images, possibly all of the same size. For this demo, I prepared four 620px X 378px graphics and saved them in their ownimages folder.
Let's start from the HTML page. This is made of a <div>, an <img> tag, and 2 <input> tags. Also included are: 1) a small style declaration in the <head> of the document to the effect that the <div> element that contains the gallery will be centered and sized to the same width and height as the gallery graphics; and 2) a reference to an external JavaScript file at the bottom of the <body> element of the HTML page. This location is the most appropriate one because we need to make sure the HTML page and, most importantly, the image referenced by the <img> tag, are fully loaded before the script kicks in.
Now prepare the lesson17.js file. Your JavaScript code consists of 3 functions:
1. init() contains initialization routines: it preloads the photo gallery images so that they will be ready for display as soon as the script calls them. In addition, it binds event handlers to the 2 button elements to stop and restart the gallery;
2. startGallery() displays each graphic in the gallery every 2 seconds;3. stopGallery() stops the gallery so that the photo that comes next with respect to the
current photo is not displayed.
Furthermore, the code contains a few global variables at the top that need to be accessed by all the functions in the script. Let's get started.
//Global variables: a reference to the
//photo currently displayed on the page,
var curImage = document.getElementById("photo");
//a variable to store the timer,
var galleryStarter;
//a variable to store a true/false value indicating
//to the program whether the gallery is on or off,
var isGalleryOn = true;
//an array containing 4 strings representing the filepaths
//to the image files in the images folder,
var images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];
//an empty array that will be filled with 4 preloaded
//image objects: the src property of these image objects will correspond
//to the filepaths contained in the images[] array,
var preloadedImgs = [];
//a variable that works as our counter to
//advance from one image to the next. It starts at 0.
var counter = 0;
/**************************************/
//Init() starts with the image preloading routine.
//First fill the preloadedImgs[] array with a
//number of image objects corresponding to the length
//of the images[] array:
function init()
{
for (var i = 0; i < images.length; i++)
{
preloadedImgs[i] = new Image();
}
//now assign the value of the strings contained in the
//images[] array to the src property of each image object
//in the preloadedImgs[] array, using one more loop:
for (var i = 0; i < preloadedImgs.length; i++)
{
preloadedImgs[i].src = images[i];
}
//Now, assign event handlers to the 2 buttons
//to restart and stop the gallery:
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
btnStart.onclick = startGallery;
btnStop.onclick = stopGallery;
//Finally, check the isGalleryOn flag is true. If it is
//call the function that starts the gallery:
if (isGalleryOn)
{
startGallery();
}
}
/*********************************************/
//Assign the init() function to the onload event
onload = init;
/***********************************************/
//startGallery() contains the functionality
//to extract the photos from the preloadedImgs[] array
//for display and to set the timer in motion:
function startGallery()
{
//extract the image filepath using the counter
//variable as array index and assign it to the src
//property of the curImage variable:
curImage.src = preloadedImgs[counter].src;
//advance the counter by 1:
counter ++;
//if the counter has reached the length of the
//preloadedImgs[] array, take it back to 0, so the
//photo gallery redisplays the images from the start:
if (counter == preloadedImgs.length)
{
counter = 0;
}
//Set the timer using this same function as one
//of the arguments and 2000 (2 milliseconds) as the other argument.
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above. Try stopping and restarting your gallery.
Questions, questions, questionsI imagine you might be wondering what this business of preloading images is all about. Well, here's a short explanation.
When an HTML page is first loaded, all the resources needed by the page, including external CSS files, scripts, images, videos, etc., are downloaded as well.
In the case of inserting a resource, such as an image, dynamically into an HTML page after the page has fully loaded in the browser, as it's the case with our photo gallery, the following issue might arise: the requested image has to be sent to the client browser by the server, and this might take a few seconds. Although this is not terrible, it might seriously spoil the magic JavaScript effect we intend to create.
Here's where preloading the images in JavaScript comes to the rescue. By doing the preloading routine, the image object is created on page load, and by assigning the image
filepath as value to the image object's src property, we make sure that the image we intend to add dynamically to the page is ready to be grabbed by our script for immediate use.
This is the image preloading routine simplified to the bare minimum:
//Create an Image object:
var myNewImage = new Image();
//assign the filepath of your desired image
//to the src property of the newly created image object:
myNewImage.src = "images/testimage.jpg";
//Now myNewImage has been preloaded: your
//JavaScript can use it, display it, etc. without fear of
//having to wait too long for a server request.
SummaryYou've made it to the end of the lesson, congratulations! You've learned a great deal: you can set and stop timers with JavaScript, preload images for dynamic display, and build an automatic photo gallery with JavaScript.
It's time for your break before tackling your next lesson's topic, a major feature of contemporary web applications: AJAX.
Lesson 18: Making AJAX CallsBy Maria Antonietta Perna
One core feature of 21st century web applications is their fantastic responsiveness. A pioneer in the business of making the web more and more similar to a desktop application has been Google: as soon as you start typing a character in a Google box, all kinds of suggestions and search results keep popping up to speed up your search; and again, just type something using Google maps, and you're instantly catapulted to almost any street on the planet.
Behind this amazing feat of human cleverness is the coming together of a few technologies collectively known as AJAX.
In this lesson you will learn:
what AJAX stands for and what it is all about; how to make an AJAX request; how to handle an AJAX response.
I recommend you get access to a web server to carry out the example code illustrated in this lesson. In fact, AJAX is all about client-server communication. In view of this, you can upload your files to a hosted server or to a local server. The PHP tutorial on this website provides an excellent guide on this topic.
What's AJAX all about?The acronym AJAX stands for Asynchronous JavaScript And XML.
In actual fact, it's a combination of internet standards made up of:
standards-based presentation using HTML and CSS; dynamic display using the DOM; data interchange and manipulation using XML; asynchronous data retrieval using the XMLHttpRequest object; JavaScript magic to orchestrate the whole process.
In non-AJAX web applications, the interaction between servers and clients can be a tedious business:
1. a user action from the client sends a request to the web server via HyperText Transfer Protocol (HTTP);
2. the web server receives the request and processes it by invoking server-side scripts, database data, etc., and sends a response back to the client via HTTP;
3. the client browser receives the response and loads the entire updated page.
Having to go from browser to server and back again each time a user requests some piece of data from the server, in addition to undergoing an entire page refresh at each update, can be quite stressful on servers and on users alike.
AJAX helps in at least 2 respects: piecemeal page updates and asynchronous communication between server and client.
What this means in a few words, is that every time the user interacts with the web page, only those bits that need updating are refreshed, not the entire page. Furthermore, the fact that AJAX operations are performed asynchronously, means that during the time that it takes for the server to respond, the page is not locked and the user can still interact with the website.
How do I make an AJAX request?An AJAX request is made using the XMLHttpRequest object and its open() and send() methods. This is supported by all major browsers. However, older browsers, namely older
varsions of Microsoft Internet Explorer (vesions 5 and 6), support an ActiveXObject. This little hurdle is easily overcome by testing for feature support in the script.
The open(retrievalMethod, url, bool) method has 3 arguments:
1. retrievalMethod: this can either be a GET (used to fetch data from the server), or a POST (used to send data to the server);
2. url: this is the location where the data is made available. It can be a text file, an XML document, or a server-side script that processes data coming from a database;
3. bool: this is a true/false value. If it's false the request is made synchronously, if it's true the request is made asynchronously, which is what we usually want.
The XMLHttpRequest object has an onreadystatechange property that deals with the response from the server. This proceeds over the following 5 stages:
0) the request is uninitialized because open() has not been called; 1) the request is specified, but send() has not been called yet; 2) the request is being sent, because now send() has been called; 3) the response is being received, but not yet completed; 4) the response is complete and data is available for manipulation and display.
Upon completion (stage 4), the XMLHttpRequest object's status property gets assigned an HTTP status code that describes the result of the request as follows:
200: success! 401: unauthorized - authentication is required and was not provided; 403: forbidden - the server refuses to respond; 404: not found - the requested resource cannot be found.
This is a simple code snippet that translates what's just been said into practice:
//Global variable to store the XMLHttpRequest object
var myRequest;
//Package the request into its own function
function getData()
{
//Feature-testing technique to make sure the browser
//supports the XMLHttpRequest object
if (window.XMLHttpRequest)
{
//create a new instance of the object
myRequest = new XMLHttpRequest();
}
//else - the XMLHttpRequest object is not supported:
//create an instance of ActiveXObject
else
{
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//Use the open(retrievalMethod, "myDataFile.txt", bool) method
myRequest.open("GET", url, true);
//Use send() with a null argument - we have nothing to send:
myRequest.send(null);
//attach a function to handle onreadystatechange,
//that is, the response from the server:
myRequest.onreadystatechange = getData;
}
How do I handle the AJAX response?If the client browser requests text data, the server response is automatically stored in the responseText property.
If the client browser requests data in XML format, the server response is stored in the responseXML property.
Here's a code snippet that illustrates this in practice.
//Package the response-handling code in a function
function getData()
{
//Make sure the response is at the completion stage (4):
if (myRequest.readyState ===4)
{
//if it is, make sure the status code is 200 (success):
if (myRequest.status === 200)
{
//if all is well, handle the response:
var text = myRequest.responseText;
alert(text);
}
}
}
Let's tackle two examples that include both request and response using AJAX. The first example will be dealing with a response in plain text format, the second example with a response in XML format.
AJAX request - response example: plain text responseTo follow along, you need a server and 1 simple text file uploaded to the same server that hosts your JavaScript code.
The page you're going to build allows the user to click a button to display some text stored in your text file using AJAX.
Here's a simple HTML page with a <header> tag and a button element:
<!DOCTYPE html><html><head>
<title>Lesson 18: Making AJAX Calls</title>
</head><body><h1>Lesson 18: Making AJAX Calls - Plain Text
Response</h1>
<div>
<h2 id="myHeader">Click the button to call your data</h2>
Here's the JavaScript code that goes in enclosing <script> tags in the HTML page above:
//Prepare the global variable for the request
var myRequest;
//Write the getText(url) function
function getText(url)
{
//check support for the XMLHttpRequest object
if (window.XMLHttpRequest)
{
myRequest = new XMLHttpRequest();
}
//else, create an ActiveXObject for IE6
else
{
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//Call the open() method to make the request
myRequest.open("GET", url, true);
//Send the request
myRequest.send(null);
//Assign the getData() function to the
//onreadystatechange property to handle server response
myRequest.onreadystatechange = getData;
}
/**********************************************/
//This function handles the server response
function getData()
{
//Get a reference to the header element where
//the returned result will be displayed
var myHeader = document.getElementById("myHeader");
//Check the response is complete
if (myRequest.readyState ===4)
{
//Check the status code of the response is successful
if (myRequest.status === 200)
{
//Store the response
var text = myRequest.responseText;
//Assing the returned text to the nodeValue
//property of the header element (you can also use
//innerHTML here if you feel it simplifies your task)
myHeader.firstChild.nodeValue = text;
}
}
}
Show example
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above.
Notice how the result is returned from the server with no page flashing, no change of URL, no whole page refresh: that's the AJAX magic.
AJAX request - response example: XML format responseThe page you're going to build in this second example allows the user to click a button to display a series of programming languages coming from an XML file using AJAX.
To follow along in this exercise, prepare a simple XML document and an HTML page.
Here's what my XML document looks like:
<?xml version="1.0" ?>
<languages> <language>PHP</language> <language>Ruby On Rails</language> <language>C#</language>
<language>JavaScript</language></languages>
Save the file above as lesson18_test.xml in the same location as your HTML page.
Here's the HTML page:
<!DOCTYPE html><html><head><title>Lesson 18: Making AJAX Calls</title>
</head><body><h1>Lesson 18: Making AJAX Calls - XML Response</h1>
<div id="test">
<h2>Click the button to get a list of programming languages</h2>
//You can also assign the returned result to myDiv.innerHTML
//if you feel it would be simpler.
}
}
}
}
Show example
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above.
Notice how the result is returned from the server without a whole page refresh. That's terrific!
SummaryThat's it for this lesson. You worked really hard, but now you can write JavaScript code that retrieves data from the server without a whole page refresh using AJAX techniques.
You're not limited to text format files or to XML files, though. In fact, databases are the most commonly used tools to permanently store data on a server. AJAX techniques are as easily applied to deal with database retrieved information. However, you'll need PHP or a server-side programming language to retrieve data from or post data to a database.
In any case, we will return to this topic in our last lesson and see how jQuery greatly simplifies the whole Ajaxification process.
But first, we need to get some familiarity with the most popular library in the JavaScript programming world today, jQuery, which is the topic of our next lesson.
Lesson 19: Short Introduction to jQueryBy Maria Antonietta Perna
You've come a long way in your JavaScript journey. Now it's time to get to the fun part.
This lesson, together with the next 2 lessons, will introduce you to jQuery, the fantastic JavaScript library invented by John Resig.
However, this is a wide topic and these 3 lessons cannot but give you just a taste for what jQuery can really do.
Therefore, I encourage you to visit the jQuery website after you finish this tutorial, and explore and experiment with jQuery's numerous methods, events, effects, etc., for yourself.
In this lesson you will learn:
about the benefits of using jQuery; how to include jQuery in your project; about jQuery selectors to manipulate DOM elements in code; how jQuery handles events; how to use anonymous functions with jQuery; how to add and remove DOM elements with jQuery.
Why should I use jQuery?Here are some good reasons why using jQuery in your JavaScript projects is a great idea.
extremely light-weight (just 31 kb in its latest minified and zipped production-ready version);
it's free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network;
it's continually upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet;
it helps overcoming inconsistencies in the way some JavaScript features are implemented across different browsers;
and last but not least, it offers a wealth of ready-made animation effects that are a joy to use.
How do I include jQuery in my website?Including jQuery in your project is fast and easy. You have the choice of downloading a copy of the library and save it locally, or you can use a Content Delivery Network (CDN) to serve jQuery to your website on the Internet.
Go to the jQuery website download page
How to include a local copy of jQuery
If you prefer having a local copy of jQuery:
1. go to the Download jQuery section of the download page and click on the minified version of the latest release of jQuery. At the time of writing this is version 1.7;
2. copy and paste the code in a text file;3. save the file in your web project directory (better if you save it in its own subfolder);4. in your html page include the appropriate <script> tags in the following order:
<!DOCTYPE html><html><head><title>Lesson 19: Introduction to jQuery</title>
3. place a <script> tag with a reference to your own JavaScript file underneath the jQuery <script> tag, like you did in the previous example.
That's it, you're done!
How to make sure jQuery is working
Now the jQuery library can be used in your project. To make sure things work as expected, create a text file and call it jquery_test.js. Enter the following code:
//Most of your code goes inside
//the jQuery ready() function:
$(document).ready(function()
{
alert("jQuery is working!");
});
//Make sure you keep track of braces, brackets, and semi-colons ( ; )
Save all your files and run the HTML page in a browser. If you typed the code exactly like the example above, you should be greeted by ... well, the good old alert box.
The $ sign is an alias for jQuery. You could replace it with the keyword jQuery and your jQuery-powered JavaScript code would work just fine. However, less typing is jQuery's (and all coders') motto, so using $ is the accepted convention.
.ready(function() { //JavaScript code here ... } );
is where most of your JavaScript code will be placed. This is jQuery's clever way of making sure your code runs when the document is ready for it: that is, when the html is fully loaded.
How do I access DOM elements using jQuery?jQuery appeals so much to web designers also because it enables us to select DOM elements in code just like we do with CSS. Let's see it in action.
Select html elements by id
Remember our old document.getElementById()? Well, jQuery makes selection by id much shorter. Here's how it's done:
$(document).ready(function()
{
var myDiv = $("#myDiv");
});
The $ sign in front of ("#myDiv") can be translated like: "Hey, browser, get me the element with the id of myDiv!"
As you can see, the id attribute is grabbed by using the # sign, the same as CSS.
Select html elements by tag name
You also came across document.getElementsByTagName(). This method allows us to grab all html elements by their tag.
Look how jQuery makes it a lot snappier:
$(document).ready(function)
{
//store all images on the page in an array
var images = $("img");
});
As you can see, the magic $ does most of the talking.
Select html elements by class name
A quick way to target html elements that share the same class is as follows:
$(document).ready(function()
{
var redElements = $(".classRed");
});
Now redElements contains an array of all the html elements on your page with a class of classRed.
Once again, notice how jQuery facilitates selection by using the same notation you use in your CSS declarations to target classes: .className.
Select html elements using jQuery filters
jQuery enables you to be as precise as a surgeon when targeting html elements and attributes on the page. jQuery offers a filtering syntax to query the DOM that is both simple and efficient.
Here's a list of the most common filters:
Filter Description
:first The first item in a matched set$(‘p:first’) returns the first paragraph.
:last The last item in a matched set$(‘p:last’) returns the last paragraph.
:odd The odd-indexed items in a matched set$(‘tr:odd’) returns table rows indexed at 1, 3, etc.
:even The even-indexed items in a matched set$(‘tr:even’) returns table rows indexed at 0, 2, etc.
:has finds elements having the child element specified$(‘p:has(span)’) returns all paragraphs containing a span element.
:eq returns the element with the matched index$(‘p:eq(1)’) returns the second paragraph starting to count at 0.
:contains(x) Returns all elements containing the text x$(‘div:contains(foo)’) targets all divs with the text 'foo'.
A complete list of all selection methods and filters is available on the jQuery website. Have a look and experiment with the available code samples to gain more familiarity with the new approach.
How do I assign event handlers using jQuery?Event handlers are code blocks, usually functions, that specify what your application should do when a specified event like, for example, a button click, occurs.
So far, you've used 2 approaches:
1. hard-wiring a function to the html element itself: <input type="button" onclick="doSomething()" />
2. assigning a function to the DOM object's appropriate property: myElement.onclick = doSomething;
Both approaches are fine. However, the first one sins against the separation of concerns principle. In fact, it mixes in JavaScript code with HTML code.
The second approach complies with the separation of concerns principles, but comes short in case we want to attach more than a function to the same element.
There's actually a third approach that overcomes all shortcomings but one: it's implemented differently in Internet Explorer browsers with respect to all other major browsers.
The good news is: jQuery is here to make event handling quick and easy. Here are a few jQuery approaches to choose from.
Suppose you have an html element with an id of myElement, and a function called sayHello(). You want sayHello() to kick in when the user clicks on the html element. This is how you achieve this using bind():
$(document).ready(function()
{
//create the sayHello function
function sayHello()
{
alert("Hello jQuery");
}
//Attach the handler using .bind():
myElement.bind('click', sayHello);
});
You can find more details on the bind() method on http://api.jquery.com/bind/.
The ready-made approach
jQuery offers some ready-made handlers corresponding to JavaScript events. Here's a list of the most widely used ones:
Handler Description
click() Binds a handler to an onclick event.
hover() Binds a handler to the onmouseover and onmouseout events.
change() Binds a handler to the onchange event (when the content of a field
select() Binds a handler to the onselect event (when text is selected).
submit() Binds a handler to the onsubmit event of a form element.
focus() Binds a handler to the onfocus event (when an element gets focus).
keypress() Binds a handler to the onkeypress event (when a key on the computer keyboard is pressed).
Assuming you have an html element with an id attribute of myElement, and a function called sayHello() - as in the previous example - you can bind sayHello() to the onclick event of myElement inside jQuery's ready() function like so:
myElement.click(sayHello);
The on() method
With this latest version of jQuery (v.1.7), a brand new method to handle events has been introduced.
The on() method is highly recommended by the jQuery team if you start a new project.
It can be used to attach handlers both to elements already present in the HTML page from the start and on dynamically added elements (unlike bind()). Here's how it's used.
Using the same sayHello() function, inside jQuery's .ready() function simply write:
myElement.on('click', sayHello);
More details on the on() method can be found on http://api.jquery.com/on/.
Code samples using jQuery often employ anonymous functions. These are functions without a name, and can be quite handy, although I find names more helpful in terms of code readability. If we replace the sayHello() function with an anonymous function, we have:
//Using bind():
myElement.bind('click', function()
{
alert("Hello jQuery");
});
/********************************/
//Using click(), we have:
myElement.click(function()
{
alert("Hello jQuery");
});
/**************************************/
//Using on(), we have:
myElement.on('click', function()
{
alert("Hello jQuery");
});
Add and remove DOM elements
Once grabbed by your JavaScript code, DOM elements can easily be manipulated with jQuery.
You've had a taste of standards-compliant DOM manipulation techniques in this tutorial. Therefore, you will readily appreciate the jQuery way of performing the same tasks.
Add new DOM elements
You can both retrieve html elements and add new html elements to the page using jQuery's .html() method. When you don't pass any arguments, html() retrieves a DOM element, if you pass a string argument, html() adds that string to the page.
If you just need to add new text inside an html element, you can use jQuery's .text() method and pass a string argument representing the text you intend to add. Like .html(), you can use .text() without passing any arguments to retrieve text content from the HTML page.
To test .html() prepare an HTML page containing a <div> tag with an id of myElement, a <p> tag and some text. First we retrieve the existing paragraph element, then we create a new paragraph.
var newParagraph = $('#myElement').html('<p>Hello new Paragraph!</p>');
//close off all your brackets:
});
Save all your files and preview the result in a browser. The alert should display the original paragraph's content, and the page should subsequently display the new paragraph's content.
The way you implement .text() is the same as .html(). I leave you to experiment with it on your own. More details on .html() can be found onhttp://api.jquery.com/html/, and on .text() can be found on http://api.jquery.com/text/.
Remove DOM elements
A simple way of doing this is with jQuery's remove() method. Let's put it to the test.
Use the same HTML page from the previous example and add a button element with an id of btnDelete.
In a fresh JavaScript file, add the following code:
$(document).ready(function()
{
//use a click handler and an anonymous function
//to do the job
$('#btnDelete').click(function()
{
//delete all <p> elements
$('p').remove();
});
});
Save all your files and preview the HTML page in a browser. Click the button and see the paragraphs on the page disappear.
More on .remove() can be found on http://api.jquery.com/remove/.
SummaryThere's a lot to digest in this introduction to jQuery and you've done a great job coming as far as you did.
jQuery is such a rich library that it can't be covered in a few lessons. Therefore, I invite you to practice with all the code samples in this lesson and the following lessons as much as you can.
Also, it's crucial that you explore the jQuery website and experiment with the code samples available in their documentation and tutorials. If you have doubts, don't hesitate to send us a line in the forum dedicated to this tutorial.
More on jQuery coming up in the next lesson: get ready for some fabulous JQuery effects in just a few lines of code!
Lesson 20: Cool Animation Effects with jQueryBy Maria Antonietta Perna
jQuery is so rich with ready-made functions that adding fancy effects on your web page is a breeze. It's hard not to get carried away with it.
Here, we are going to explore the most commonly used jQuery effects. Once again, my recommendation is that of integrating this lesson with a visit to the jQuery website for more code samples and detailed explanations.
In this lesson you will learn how to:
add effects by dynamically manipulating styles; use jQuery's show()/hide()/toggle() methods; use jQuery's fadeIn()/fadeOut()/fadeToggle() methods; use jQuery's slideUp()/slideDown()/slideToggle() methods.
In the process, you will build a simple sliding menu and get more practice with the new jQuery approach.
How do I add and remove CSS classes with jQuery?jQuery enables you to manipulate CSS styles in code with $.css(styleName, styleValue). It also enables you to add and remove CSS classes in relation to DOM elements.
Because $.css() would sprinkle your HTML page with inline CSS style rules, we will focus on applying and removing CSS classes with$.addClass(className), $.removeClass(className), and $.toggleClass(className). This approach uses the CSS class declarations stored
either in the <head> of your HTML page or in a separate file, therefore it's better suited to current best practices in web design.
If you're curious about $.css(), by all means visit http://api.jquery.com/css/ for more details.
Suppose you want to replace the CSS class bigDiv with the CSS class smallDiv when the user clicks inside the div element. This is how you could do the task with jQuery:
$(document).ready(function()
{
//Store a reference to the div in a variable using its id:
var myDiv = $('#myDiv');
//Attach a click handler to manipulate the CSS classes:
myDiv.click(function()
{
//Remove the existing CSS class and replace it with the new one.
//Because the element is the same, chain both methods:
myDiv.removeClass('bigDiv').addClass('smallDiv');
});
});
What about toggling between the CSS bigDiv and smallDiv classes by clicking inside the div? That's easy: jQuery has this little handy method for you -$.toggleClass(). Assuming the CSS class bigDiv is hard-coded in the class attribute of the div element, you can toggle the CSS class smallDiv using jQuery, like so:
$(document).ready(function()
{
var myDiv = $('#myDiv');
myDiv.click(function()
{
myDiv.toggleClass('smallDiv');
});
});
Now, keep clicking inside the div element, and you'll see it getting smaller and bigger at each click of the mouse.
How do I use jQuery show()/hide()?If you want to show/hide HTML elements on a page, you can do so easily with jQuery's show()/hide(). You can also modulate the way elements are revealed or hidden by adding the 'slow' or 'fast' arguments, or even the number of milliseconds you'd like the transition to last.
Let's say you have a paragraph element inside a div with an id of myDiv. You want the paragraph to slowly disappear when the user clicks inside the div element. Here's how you could accomplish this with jQuery hide().
$(document).ready(function()
{
var myDiv = $('#myDiv');
myDiv.click(function()
{
//Replace 'slow' with 2000 for a slower transition.
$('p').hide('slow');
});
});
Clicking inside the div element results in the paragraph slowly disappearing from view. jQuery show() works the same way. I leave you to experiment with it on your own.
What if you wanted to toggle between show/hide transitions as the user clicks inside the div element? No problem, jQuery offers the $.toggle() method. To see it in action, simply replace hide() with toggle() in the previous example, like so.
$(document).ready(function()
{
var myDiv = $('#myDiv');
myDiv.click(function()
{
$('p').toggle('slow');
});
});
How do I make DOM elements fade in and out of the page?For a more sophisticated fading effect, use $.fadeIn()/$.fadeOut()/$.fadeToggle(). You use these methods the same way as you used $.show()/$.hide()/$.toggle() in the previous examples.
Here's the paragraph from the previous code sample toggling between visible and hidden using $.fadeToggle().
$(document).ready(function()
{
var myDiv = $('#myDiv');
myDiv.click(function()
{
$('p').fadeToggle('slow');
});
});
The effect is very similar to that of $.toggle('slow'). Just try it out.
How do I make DOM elements slide up and down with jQuery?You can easily make DOM elements appear and disappear with a sliding effect using $.slideUp()/$.slideDown()/$.slideToggle(). You implement these methods similarly to the previous ones.
For example, let's say you want to slide the paragraph element from the previous example up and down as the user clicks inside the div element. Here's how you would accomplish this with $.slideToggle().
$(document).ready(function()
{
var myDiv = $('#myDiv');
myDiv.click(function()
{
$('p').slideToggle('slow');
});
});
Now keep clicking inside the div element and see the paragraph inside the div sliding up and down.
I recommend you experiment with the code samples above as much as you can before moving on with the next challenge.
Try out: sliding menuHere we are at our jQuery try out exercise. You will build a simple sliding menu similar to what you might have already seen on many websites.
The user moves the mouse over a main menu item and a list of sub-menu items slides down. As the user moves the mouse away from the menu item, its sub-menu items slide back up away from view.
The HTML page above has a reference to a CDN-served copy of jQuery and to an external JavaScript file in the <head> section.
The <body> section has a div element with an id of myDiv that contains a list with 3 main menu items and 3 sub-menu items nested inside the second main menu item. The sub-menu items are contained inside a div element.
Style your menu so that the main menu items are horizontally lined up and the nested sub-menu items are vertically stacked under their parent li element (take a peek at the example page if you like).
We want the div element that wraps the sub-menu items to slide down when the user moves the mouse over its parent li element.
Prepare your lesson24_ex.js file and write the following code.
$(document).ready(function()
{
//retrieve the menu subitems (div element child of the list element)
//with the powerful jQuery selectors
//and store them in a variable
var subItems = $('ul li div');
//retrieve the main menu items that
//have the retrieved subitems as children.
//Notice the handy .has() method:
var mainItems = $('ul li').has(subItems);
//Hide all subitems on page load
subItems.hide();
//Attach the .hover() function to the main
//menu items:
$(mainItems).hover(function()
{
//Apply .slideToggle() to the sub-menu
subItems.slideToggle('fast');
});
});
Show example
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above, only reflecting your own CSS styles.
Move your mouse over the second menu item and if all goes as expected you'll see the sub-menu sliding down. It's taken us just a few lines of code to accomplish an animation effect that in raw JavaScript would have made us sweat quite a bit.
SummaryYou've achieved a lot in this lesson. You know how to use several jQuery functions to manipulate styles. Also, you know how to add fancy effects to your web pages with very little code. Finally, you put your new knowledge to the test by building a core website component - a horizontal sliding menu - using jQuery.
I still advise you to pop over to the jQuery website for a detailed coverage of everything this fabulous library has to offer.
Our next lesson revisits a topic we covered back in lesson 18, get ready for AJAX done the jQuery way.
Lesson 21: Easy AJAX Calls with jQueryBy Maria Antonietta Perna
jQuery provides a rich set of handy methods you can use to Ajaxify your web pages.
Back in lesson 18 you used AJAX by dealing directly with the XMLHttpRequest object. You also performed some feature testing for Internet Explorer browsers that didn't support the XMLHttpRequest object.
jQuery provides wrapper methods that shield you from the inner mechanisms of an AJAX request.
In this lesson, you will learn how to use:
$.load() to request content from an HTML page; the shorthand $.get() method; the shorthand $.post() method; the full-blown $.ajax() method.
To follow along with the examples in this lesson, you need to have access to a server, just as you did back in lesson 18.
How do I load HTML content with jQuery AJAX?jQuery offers a very simple approach to loading HTML content on your web page asynchronously. Just use the $.load() function and you're done.
If you use $.load(htmlPageUrl) passing only the URL of the HTML document as argument, the entire content of the HTML document is loaded into the calling page.
Instead, I like to use $.load(htmlPageUrl fragmentIdentifier), which exactly targets the bit of content I intend to retrieve.
Here's how this is done in practice.
Prepare an HTML page containing a div element with an id of content and a paragraph element with some dummy content. Save it as content.html (or anything you like), and upload it to your server. This document provides the content to retrieve using AJAX.
Prepare a second HTML page containing a link element, a div element with an id of result, a reference to the jQuery library in the <head> section, and enclosing <script> tags in the <body> section for your own jQuery-powered JavaScript code.
<!DOCTYPE html><html><head><title>Lesson 21: Easy AJAX Calls with jQuery</title><script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.min.js"></script></head><body><h1>Lesson 21: Easy AJAX Calls with jQuery load()</h1>
<p><a href="#">Click here to fetch HTML content</a></p>
<div id="result">
</div>
<script type="text/javascript">
//JavaScript AJAX code here
</script>
</body></html>
For these simple demos, we're going to embed our JavaScript code inside the HTML page. However, keep in mind that, if you write code for a website, it's highly recommended that you use external JavaScript files.
When the user clicks on the link on your HTML page, an AJAX request will be made to content.html targeting the text inside the div element with an id ofcontent. This text is dynamically inserted in the div with an id of result in the calling page.
To achieve this, enter the following code snippet inside the enclosing <script> tags:
$(document).ready(function()
{
//Attach a handler to the click event
//of the link on the page:
$('a').click(function()
{
//Target the div with id of result
//and load the content from the specified url
//and the specified div element into it:
$('#result').load('content.html #content');
});
});
Show example
Save your work and preview it in a browser. You should see something like the page indicated by following the example link above.
Click the link, and if all goes well, the dummy text from content.html is loaded inside the div element on the page. The operation takes place asynchronously without a full page refresh.
How do I use $.get()?
As nice and simple as $.load() is, it can't perform all types of content requests. A more flexible approach is offered by the $.get() method.
You can use $.get() to load data from the server with a GET HTTP request - that is, via a query string (see Lesson 10: Passing variables in a URLin the PHP tutorial on HTML.net for a great introduction to query strings).
1. theURL where the data you want to retrieve is stored;2. optionally, some data, if you want to send data to the server with the request. This is
done using either a string or what is called object literal or map, that is, comma-separated key:value pairs inside curly braces. For instance: {'First Name' : 'John', 'Last Name' : 'Smith'} sends the First Name and Last Name values to the server together with the AJAX GET request;
3. and a function that deals with the returned data if you want to display or process the successful response in any way.
Let's see how to use jQuery .get() to retrieve the XML document you used back in lesson 18.
The HTML page that makes the AJAX request remains unchanged from the previous example. Rewrite the JavaScript code as follows:
$(document).ready(function()
{
//Store the URL value in a variable
var url = "content.xml";
/*************************************/
//Package the result-handling code
//in its own function: it's more readable
function processData(data)
{
//This variable will hold the result
//converted into a string for display
var resultStr = "";
//use jQuery .find() to extract the language
//element from the returned data
//and store it in an array
var items = $(data).find('language');
//loop over each language item with
//jQuery .each() function
$(items).each(function(i)
{
//extract the text of each language item and
//add it to the resultStr variable with a line break.
//Notice the use of $(this)
//to refer to the item currently being
//inspected by the loop
resultStr += $(this).text() + '<br />';
//add the final string result to div element
//with the id of result using .html()
$('#result').html(resultStr);
});
}
/****************************************/
//Attach a click handler to the link element:
//when the user clicks on the link, the AJAX
//request is sent to the server:
$('a').click(function()
{
//use $.get() passing the url variable and
//the name of the result-handling function
//as arguments:
$.get(url, processData);
});
});
Show example
Save all your files on the server and click on the link. If all goes well, you should see a list of programming languages being displayed on the page without a full page refresh.
In the example above, you came across jQuery .find() and jQuery .each().
$.find() is used to find a DOM element's descendants or children. In the example above, you used it to find all children called language of the root XML element contained in the variable called data. Further details on $.find() can be accessed on http://api.jquery.com/find/.
$.each(index) is a for ... loop done the jQuery way. It's extremely concise and efficient. Notice the use of $(this) inside the $.each() function block. This is a snappy way of referring to the item the loop is currently processing: in our example above $(this) refers to one of the language items in the items array.
More details on $.each() can be found on http://api.jquery.com/each/.
How do I use $.post()?If you want to use POST instead of GET in your AJAX calls, you can use $.post().
Unlike GET requests, POST requests don't use a query string to send data. If you intend to send more than a few bits of data to the sever, or if you intend to send sensitive data, it's recommended you use an HTTP POST request.
The way you implement $.post() is very similar to the way you implemented $.get() in the previous example. I invite you to experiment with it on your own and to visit http://api.jquery.com/jQuery.post/ for more code samples and useful details.
How do I use $.ajax()?If you need greater flexibility, the full-blown $.ajax() function offers a great number of settings.
For instance, let's say you want to retrieve a list of programming languages from the XML document you used in the previous example. You might want to specify the following options:
1. the request must be an HTTP GET;2. the page from which the result is returned must not be in the browser's cache;3. the response returned by the server is of data-type XML;4. the request is made in html;5. there must be a function that handles the returned result if all goes well;6. and, finally, there must be a function that handles errors in case the request is not
successful.
Use the HTML page and the XML document from the previous example. Also, keep the url variable and the processData() function from the previous exercise - you will use both as the url and the success arguments respectively inside the $.ajax() function. Delete everything else inside the document.ready() function. Just below the processData() function, write the following code:
//Package the code that handles
//error message in case the request
//is not successful:
function errorAlert(e, jqxhr)
{
alert("Your request was not successful: " + jqxhr);
}
/*************************************/
//Attach a click handler to the
//link element on the page
$('a').click(function()
{
//Prepare the AJAX request that
//will be sent when the user clicks the link:
$.ajax(
{
type: "GET",
cache: false,
url: url,
dataType: "xml",
contentType: "text/html",
success: processData,
error: errorAlert
}); //end of $.ajax
}); //end of click handler
}); //end of $.ready function
Save your work and preview it in a browser. The result should be similar to the previous example. If an error occurs, you'll be presented with an alert box. The errorAlert() function has an e argument that represents the type of error, and an jqxhr argument that represents the request as a jQuery object.
In case an error occurs, details about the error are automatically contained in the arguments provided and will be displayed in the alert box.
Do you want to test the error catching function? Simply replace dataType: "xml" in the $.ajax() function with dataType: "text/xml". Save all your files and run the HTML page. Now, when you click the link, an alert box should pop up displaying a parser error message.
More on $.ajax() can be found on http://api.jquery.com/jQuery.ajax/.
SummaryYou got to the end of the lesson, and also to the end of this JavaScript tutorial. Congratulations!
Now you're familiar with the core JavaScript syntax and objects. You know how to include the jQuery library in your projects to add flair to your web pages and make AJAX calls easily and efficiently.
I encourage you to keep experimenting with code samples and to be an active participant in JavaScript forums. Why not starting from the forums on HTML.net? It's easy to register and meet with the real experts in your programming language of choice.
As you might have already guessed, the best way to learn coding is to keep coding ... a lot.
The only thing left is for me to wish you hours of fun with your new friends, JavaScript and jQuery.
