Mypages.valdosta.edu



Lab 2 – CS 3340, Spring 2016Lab Objectives:Build a webpage that utilizes CSS, JavaScript, and jQueryOpen the Visual Designer (Design mode) in VS.This lab is composed of 8 Stages and each stage consists of a number of steps you will complete. The Stages are:Create a Website Locally – You will create your Lab 2 website.Add a Web Page – You will add a webpage and show how to open it in Design mode.Add some CSS – You will create a style sheet, attach it to the webpage, and then apply some styles to elements of your webpage.Add some JavaScript – You will write some JavaScript functions and then use them on your page to provide dynamic behavior.Add some 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.Add another Page and Link – You will add another page to your website and provide a link from the original page to this page as well as a link from this page back to the original page.Upload Work to Lucius – Open your website on LuciusModify Your Homepage to Link to Lab 2 – You will open your website on Lucius, open your homepage (the webpage created in Lab 1), and create a link from it to the webpage created in Stage 2 above.Follow the steps below to complete this lab.Stage 1 – Create a Website LocallyCreate you work folder – Create a folder on a disk (or thumb drive) with the name, Lab2. This should not be under your CS3340 folder from Lab 1.Create Your Lab 2 Website LocallyChoose: File, New Web Site…Choose or specify the items shown below. Make sure and choose, File System, and then Browse when complete.Browse to the location of your lab2 folder and choose, Open.The Solution Explorer (SE) should be open in the right (otherwise: View, Solution Explorer). You will see a node representing your Lab 2 website (lab2) and one file there, Web.config.Stage 2 – Add a Web PageAdd a Web PageRight-click your website in Solution Explorer (SE). Choose: Add, Add New ItemDo these things:The new file (default.html) is displayed in the SE, and the page is displayed in Source view. Close the file.Open your Web Page in Visual DesignerIf you double-click your web page (default.html) in the SE it will open in Source view allowing you to edit the HTML directly. It is useful to open your page in a WYSIWYG editor which is what we will do next.Right-click default.html in the SE and choose: Open With.Select the value shown below, HTML (Web Forms) Editor:The page will be displayed the same as before except that there is now a tab at the bottom listing: Design, Split, Source. Choose: Design.Now, the page is displayed in Design view. Choose, Heading 2 from the drop down menu as shown below.You can edit in Design view just by typing. Put your cursor in the h2 block and type: Lab 2 as shown below. Then press Enter and enter the other text shown.Switch to Source view by selecting Source at the bottom of the window. Note that the html has been added.Type a title in: Lab 2.Stage 3 – Add some CSSAdd a CSS Style Sheet to ProjectRight-click the website in SE and choose: Add, Style SheetSupply the name, siteStyles and choose OK.The style sheet is displayed in the editor with an empty body selector. Also, a node is created in the SE.Add a Simple Style RuleType the style rules for the body as shown below.Save the style sheet and close it.Apply Style SheetRedisplay default.html in Source view.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.Display the page in Design view (Select the Design tab in lower left. If you don’t see the Design tab, refer to step 4 above.) You should see that the body style has taken affect.Create a Class Selector – Display the style sheet (siteStyles.css). Add the class selector, .special as shown below. Apply a Class Selector to HTMLOpen the web page, default.html in Source view.Modify the second p tag as shown below. E.g. add the text: class=”special”. Display the page in Design view (button in lower left). You should see that the special style has taken affect.Add a TableMake sure your page is in Design view. Choose: Table, Insert Table. Accept all the defaults (2 rows and 2 columns, etc) and then choose: OK.Type the text shown below into the table (use your favorite Artist and Album).Create a Contextual Selector – Display the style sheet (siteStyles.css). Add the Styles shown below (comments are shown in green and can be added exactly as written)./* Simple Style*/td{ color:darkblue;}/* Contextual Style*/td.header{ font-style:italic; border:dotted; border-color:green;}Apply the Contextual Selector to HTMLOpen the web page, default.html in Source view.Modify the first two td tags as shown below. E.g. add the text: class=”header”. Display the page in Design view (button in lower left). You should see that the styles have taken affect.Stage 4 – Add some JavaScriptAdd and Call a JavaScript FunctionWe will add a button to the web page. When it is pressed, it will call a JavaScript function.Open the web page, default.html in Source view.Add the script tag in the head section: <script type="text/javascript"> </script>Add a function named squareRoot: <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>Add button – Add this text to the body section of the web page after the table: <p> <input id="Button1" type="button" value="Press Me" onclick="squareRoot()" /></p>View the page on localhost (Right-click, View in Browser). The page should display and the button should perform as expected.Add some more JavaScriptAdd 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>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; }View the page on localhost (Right-click, View in Browser). Type in a name and press Enter. The page should perform as expected.Stage 5 – Add some jQueryAdd another Button and TextField – Open your page in Source view and copy this HTML to the bottom (just inside the closing body tag) <p id="ageStuff"> How old are you? <input id="txtAge" type="text" /> <input id="btnAge" type="button" value="Enter" /> </p> <p id="result2" class="special"></p>Download and Include the jQuery Library Go to the Schedule on the website (where the link for Lab 2 is) and download jQuery.js. Copy the file to your lab2 folder.Select your lab2 website in the SE in VS. Right-click and choose: Add, Existing Item.Select jquery-1.11.2.js and press AddYou will see jquery-1.11.2.js in the SE.Select jquery-1.11.2.js in the SE and drag into the head section. This statement will include the library into this page.Add a Custom jQuery Function – Open your page in Source view Copy the code below: $(document).ready(function () { $("#btnAge").click(function () { var but = $(this); var butText = but.prop('value'); if (butText == "Enter") { $("#result2").text("You are " + $("#txtAge").prop('value') + " years old"); but.prop('value', 'Reset'); } else { $("#ageStuff").fadeOut(1000); $("#ageStuff").promise().done(function () { $("#result2").text(""); $("#txtAge").prop('value', ''); but.prop('value', 'Enter'); $("#ageStuff").fadeIn(1000); $("#txtAge").focus(); }); } }); });Find this markup in the Source and paste where indicated below <script src="jquery-1.11.2.js"></script><script type="text/javascript">***PASTE HERE*** function squareRoot() {... } function greeting() {... }</script>2022948272910Test Page – Right-click in page and choose: View in Browser. Test the new buttonEnter a value and press Enter.235331514619800The resulting display. Now press Reset and see what happens.Stage 6 – Add another Page and LinkAdd Another Page – Right-click lab2 in the SE, choose: Add, Add New Item. Add a new HTML page with name, page2.html.Close page2 and reopen with Visual Designer (right-click page in SE and choose, Open With, HTML (Web Forms) Editor and then OK.Add these paragraphs in the body section<p>This is page 2</p><p>Back to main page for Lab 2</p>Put the page in Design view. Select the text, Back. Then, choose: Format, Convert to Hyperlink.Select Browse.Select, default.html and then OK and then OK again.Return to Source view and see the anchor (hyperlink) tag that was added:<a href="default.html">Back</a>View page2 on localhost (right-click in page and choose, View in Browser). Test the link.Open default in Design view. Change the textThis is Lab2toThis is Lab2, page 2Select the text, page 2. Choose: Format, Convert to Hyperlink, Browse, page2.html, OK.View default on localhost (right-click in page and choose, View in Browser). Test the link.Stage 7 – Upload Work to LuciusOpen a connection (RDC) to Lucius (see instructions from Lab 1).Copy the lab2 folder to your folder on LuciusInside the lab2 folder you should have the files shown below.Test your page on Lucius. Open a browser on Lucius and type the URL to your page and test.Test your page live. Open a browser not on Lucius and test.Stage 8 – Modify Your Homepage to Link to Lab2Launch VS on Lucius and open your website. You should see lab2 in the SEOpen default.html (your course homepage, the one in the root folder) in Source view. Replace everything in the body section with this text (substitute your name!) <p>CS 3340 - Dave Gibson</p> <table border="1"> <tr> <td>Labs</td> <td>Homework</td> </tr> <tr> <td>Lab 2</td> <td>HW 1</td> </tr> <tr> <td>Lab 3</td> <td>HW 2</td> </tr> <tr> <td>Lab 4</td> <td>HW 3</td> </tr> </table>Make a hyperlink from the text Lab 2 (in the table above) to default.html in the lab2 folder (Select “Lab 2”, choose: Format, Convert to Hyperlink, Browse…). In Source view it will look like this: <td><a href="lab2/default.html">Lab 2</a></td>Test your page on localhost.Open lab2/default.html. Add some text near the top that says, “Homepage”. Make this a hyperlink back to your course homepage.Test your page on localhost.Test your page live on Lucius.Test your page live.This Lab is now complete. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download