Lab 2 – CS 3340

To make this document easier to read, it is recommend that you turn off spell checking and grammar checking in Word:

1. Choose: File, Option, Proofing2. At the very bottom, check: “Hide spelling errors…” and “Hide grammar errors…”

Lab Objectives

1. Build a webpage that utilizes CSS, JavaScript, and jQuery2. Link two pages together.

Lab Organization

This lab is composed of 8 Stages and each stage consists of a number of steps you will complete. The Stages are:

1. Create Lab 2 Project2. Add a Page3. Add CSS – You will create a style sheet, attach it to the webpage, and then apply some styles to elements of your

webpage.4. Add another Page – This page will show several JavaScript examples.5. Add JavaScript – You will write some JavaScript functions and then use them on your page to provide dynamic

behavior.6. Add another Page – This page will show a jQuery example.7. Add jQuery – jQuery is a library built on top of JavaScript. It allows you to program dynamic behavior much

more quickly in many cases. You will add some jQuery functions to your page and use them.8. Package Assignment for Submission

Follow the steps below to complete this lab.

1

Stage 1 – Create Lab 02 Project

1. Create your lab02 project:

a. Use File Explorer to create your solution folder, lab02_lastName.b. Launch VS.c. Choose: File, New, Project and then do the following on the New Project dialog:

i. From the left pane, choose: Visual C#ii. From the middle pane, choose: ASP.NET Web Application (.NET Framework)

iii. Type the name: “lab02”iv. Choose: Browse to set the Location to your solution folder (lab02_lastName)

v. Uncheck: Create directory for solution.vi. On the next dialog, select Empty and OK.

d. Choose: OK.

You should be able to create a project for an assignment without these explicit instructions from this point forward. For future assignments, I will just say, “create your labXX project” and you will follow these steps.

To avoid a deduction of points stop now and verify you did the steps above correctly by doing the following:

i. Verify that your lab02_lastName solution folder is indeed named: lab02_lastName (your last name, of course).

ii. Navigate to your lab02_lastName solution folder and display the contents.iii. There must be a lab02.sln file present in this folder (not in a subfolder). If there is a problem, start over.

2

Stage 2 – Add a Page

2. Add a Web Page

a. Create a new HTML page named default.html in your lab02 project (right-click your lab02 project in the SE and choose: Add, HTML Page)

b. Make sure your page is in Design mode. Then, c

c. Choose, Heading 2 from the drop down menu as shown below. (If your display is not large enough, you won’t see this drop down. However, if you click the Formatting Toolbar Options immediately to the right in the figure below, you will see it.)

d. An h2 block is shown on the page. Put your cursor in the h2 block and type: Lab 2. This is a level 2 heading.

e. Press Enter and a p block is shown. Put your cursor in the p block and type the text shown. This creates a paragraph.

f. Press Enter and and type the text shown. Then save.

3

g. Switch to Source view (selecting Source at the bottom of the window). Note the following:

The contents of a webpage is marked up with HTML tags.

Each tag has an opening tag (e.g. <h2>) and a closing tag (e.g. </hw>).

Tags can be nested. For example the h2 and p tags are inside the body tag.

h. Type a title between the to title tags in: Lab 2.

<title>Lab 2</title>

i. View the page on localhost (right-click in page and choose: View in Browser).

4

Stage 3 – Add CSS

3. Add a CSS Style Sheet to Project

a. Right-click the project in the SE and choose: Add, Style Sheetb. Supply the name, siteStyles and choose OK.

c. The style sheet is displayed in the editor with an empty body selector. Also, a node is created in the SE.

4. Add a Simple Style Rule

a. Type the style rules for the body as shown on the right. Just start typing and auto-complete will help you.

b. (Read, no action required) The body{…} construct is called an element selector. It specifies that any content inside a body tag in the HTML will use the font family and color specified in the style sheet.

c. Save the style sheet and close it.

5. Apply Style Sheet

a. Redisplay default.html in Source view.

b. Next, we must apply the style sheet to our web page. Drag the style sheet (siteStyles.css) from the SE into the head section of the web page. A line will be added as shown below that links the style sheet to this page.

c. Display the page in Design view (Select the Design tab in lower left). You should see that the body style has taken affect.

5

d. View the page on localhost (right-click in page and choose: View in Browser).

6. Create and Apply a Class Selector

a. Display the style sheet. Add the class selector, .special as shown on the right (simply type the text in as shown, be sure and preface with a “.”, or copy/paste).

.special {color:black;font-weight:bold;

}

b. Open the web page, default.html in Source view and modify the second p tag as shown on the right by adding the text: class=”special” at the end of the opening paragraph tag and save. Do not preface “special” with a “.”

class="special"

c. (Read, no action required) This style rule will only be applied to tags that have a class=”special” attribute inside an HTML opening tag.

d. Display the page in Design view. You should see that the special style has taken affect.

e. (Read, no action required) This style rule overrode the body element style defined earlier as it is more specific, i.e it is inside the body tag.

f. View the page on local host.

7. Create and Apply another Element Selector

a. Display the style sheet. Add the element selector, p as shown below and save. p{ margin-left:20px;}

b. (Read, no action required) An element selector affects all instances of the element (tag) in the web page. Thus, in our page both paragraphs will have a left margin of 20 pixels. Note that the class selector ( .special) will still apply to the second paragraph.

6

c. Display the page in Design view. You should see that the the two paragraphs are indented. Note that the second paragraph also has the .special style applied.

d. View the page on local host.

8. Add a Table

a. Make sure your page is in Design view. Position your cursor at the end of the text.b. Choose: Table, Insert Table.

c. Do the following on the Insert Table dialog:

i. Change the Borders, Size property to 1. ii. Change the Background, Color property to some light color (choose: More colors) (don’t choose red as

we will use that for something else)iii. Accept all the other defaults (2 rows and 2 columns, etc)iv. Choose: OK. The result is shown below. You should see the faint outline of the 4 cells.

7

d. Type the text shown below into the table (use your favorite Artist and Album). Note that the body style (purple text, verdana font-family) is applied.

e. View the page in Source mode. Note the following:

i. The table is defined with table tags: <table>…</table>

ii. The table is composed of rows: <tr>…</tr>

iii. Each row contains table data: <td>…</td>

iv. VS added the “auto-style1” shown on the table tag.

v. The style is defined in the head section as a class style as shown below. It could be moved to the (external) style sheet, siteStyles.css; however, we will leave it where it is. In class I will talk about when to put styles in an external style sheet and when to put them in the head section of the page itself.

9. Create and Apply another Element Selector

a. Display the style sheet. Add the element style shown below/

td{ color:red;}

b. View your page in design mode, and then view on localhost.

8

10. Create and Apply a Contextual Selector

a. Display the style sheet. Add the contextual style shown below. This is similar to a class selector, but only applies to a <td> tag.

/* Contextual Style*/td.header{ font-style:italic; border:dotted; border-color:green;}

b. Open the web page, default.html in Source view and modify the first two td tags as shown on the right. E.g. add the text: class=”header”.

c. Display the page in Design view. You should see that the styles have taken affect. View the page on localhost.

Stage 4 – Add another Page

11. Add new page, jsExamples and link to default:

a. Add a new HTML page named: jsExamples.html. Open in Design mode.b. Type this text at the top of your new page: “Lab 2 Home”c. Select the text and then choose: Format, Convert to Hyperlinkd. Choose: Browse, select default.html, OK, OK.e. View the Source and verify that anchor tag was added:

<p><a href="default.html">Lab 2 Home</a></p>

f. Set the title to: “Lab 2 – JS Examples”g. View the page on local host and verify that the link works correctly.

12. Link default to jsExamples

a. Open default.html in Design viewb. At the bottom of the page, type this text: “JS Examples”c. Select the text and then choose: Format, Convert to Hyperlinkd. Choose: Browse, select jsExamples.html, OK, OK.e. View the Source and verify that anchor tag was added:

<p><a href="jsexamples.html">JS Examples</a></p>

f. View the page on local host and verify that the links works correctly.

9

Stage 5 – Add JavaScript

13. Add and Call a JavaScript Function

We will add a button to the web page. When it is pressed, it will call a JavaScript function that prompts the user for a number and then displays the square root.

a. Open the web page, jsExamples.html in Source view.b. Add a function named squareRoot in the head section . Typically, script tags are placed below the title tag.

<script type="text/javascript">

function squareRoot() { var val = window.prompt("Gimme a number", 483); var x = parseFloat(val); var result = Math.sqrt(x); window.alert("The sq.root of " + x + " is " + result.toFixed(3)); }

</script>

Note: Variables can hold any type of value (int, double, Boolean, string, object) and do not have to be

declared. I prefer to declare them with the var keyword. window.prompt displays a message in a modal dialog. The user can type in a value and dismiss the dialog

with an OK or Cancel. The user’s response is returned. window.prompt displays a message in a modal dialog. The user can dismiss the dialog with an OK or

Cancel.

c. Add button – Add this text to the body section, below the link:

<p><button id="btnSqRoot" onclick="squareRoot()">Square Root</button></p>

Note: There is an id attribute that is intended to uniquely (though not enforced) identify this button should

code need to use the button. There is an onclick attribute which specifies the behavior that is to occur when the button is pressed. In

this case, the squareRoot javascript function is called. Earlier versions of HTML used: <input id="Button1" type="button"... to render a button. HTML

5 also defines the button tag as shown above. An identical version of the button above is shown below using the earlier syntax. You may see this style in the notes from time to time.

<p> <input id="Button1" type="button" value="Press Me" onclick="squareRoot()" />

</p>

10

d. View the page on localhost. The page should display and the button should perform as expected.

14. Add some more JavaScript

a. Add this text to the end of the body section

<p> What is your name? <input id="txtName" type="text" /> <input id="Button2" type="button" value="Enter" onclick="greeting()" /></p><p id="result" class="special"></p>

Note: The first input tag has a type attribute that is set to “text.” This will display a text field where the use can

type something. The id attribute, “txtName” uniquely identifies this text field so that the code can access the value that was typed in.

The second input tag is a button, and when it is pressed, the greeting javascript function is called.

11

b. Add this function inside the script tag in the head section:

function greeting() { var name = document.getElementById("txtName"); var result = document.getElementById("result"); result.innerHTML = "Hi, " + name.value;}

Note: This line:

var name = document.getElementById("txtName");

finds the HTML element with an id attribute of “txtName”, which is of course is the text field. Thus, the text field object is referenced by the name variable. Similarly, the second line finds the HTML element with an id attribute of “result”, which is a paragraph. Thus, the paragraph object is referenced by the result variable.

The third line sets the innerHTML property of the result paragraph to contain the text shown above. The value typed in by the user is contained in name.value

c. View the page on localhost. Type in a name and press Enter. The page should perform as expected.

Stage 6 – Add another Page

15. Add new page, jQueryExamples and link to default:

a. Add a new HTML page named: jQueryExamples.html. Open in Design mode.b. Type this text at the top of your new page: “Lab 2 Home”c. Select the text and then choose: Format, Convert to Hyperlinkd. Choose: Browse, select default.html, OK, OK.e. View the Source and verify that anchor tag was added:

<p><a href="default.html">Lab 2 Home</a></p>

f. Set the title to: “Lab 2 – jQuery Examples”g. View the page on local host and verify that the link works correctly.

12

16. Link default to jQueryExamples

a. Open default.html in Design viewb. At the bottom of the page, type this text: “jQuery Examples”c. Select the text and then choose: Format, Convert to Hyperlinkd. Choose: Browse, select jQueryExamples.html, OK, OK.e. View the Source and verify that anchor tag was added:

<p><a href="jQueryExamples.html">jQuery Examples</a></p>

f. View the page on local host and verify that the links works correctly.

You should be able to create and link two pages without these explicit instructions from this point forward.

Stage 7 – Add jQuery

17. Add a Button and TextField – Open your jQueryExamples page in Source view and copy this HTML to the bottom (just above the closing body tag)

<p id="ageStuff">How old are you? <input id="txtAge" type="text" /> <button id="btnAge">Enter</button></p><p id="result" class="special"></p>

18. Download and Include the jQuery Library

a. Add this line to the head section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

19. Add a Custom jQuery Function –

a. Open your page in Source view b. Copy the code below into the head section:

<script type="text/javascript">

$(document).ready(function () { $("#btnAge").click(function () {

var but = $(this); var butText = but.text();

if (butText == "Enter") { $("#result").text("You are " + $("#txtAge").prop('value') + " years old"); but.text("Reset"); } else { $("#ageStuff").fadeOut(1000); $("#ageStuff").promise().done(function () { $("#result").text(""); $("#txtAge").prop('value', '');

but.text("Enter"); $("#ageStuff").fadeIn(1000);

13

$("#txtAge").focus(); }); } }); });</script>

Note: jQuery will be covered in another tutorial and in class.

20. Test Page – Right-click in page and choose: View in Browser. Test the new button

a. Enter a value and press Enter.

b. The resulting display. Now press Reset and see what happens: everything fades out, then fades back in with the text field empty and the text on the button changed back to “Enter”

Stage 8 – Package Assignment for Submission

21. Close VS and zip your lab02_lastName solution folder and submit on Blazeview in the lab 02 dropbox.

If you need further directions, follow step 11 from Lab 1, exactly, substituting lab02 for lab01.

To avoid points deduction, verify that your lab02.sln file is in your lab02_lastName solution folder. It should NOT be inside your lab02 project folder.

To avoid a deduction of points verify the following:

i. The name of your zip file is: lab02_lastName (your last name, of course).ii. Inside the zip file, verify that your lab02_lastName solution folder is indeed named: lab02_lastName

iii. Inside your lab02_lastName solution folder there should be:

A lab02.sln file A lab02 folder Some other folders.

14