Java程序辅导
C C++ Java Python Processing编程在线培训 程序编写 软件开发 视频讲解
C C++ Java Python Processing编程在线培训 程序编写 软件开发 视频讲解
Web Application Development Lab Class 5 Autumn 2009 Aim: This lab class has two main aims. Firstly, we are going to show you how to remove details of interaction style from the body of an html document (Remember that html should be used to mark up content, not styling information. So should we really be adding JavaScript event handlers into the body of an HTML document?). Secondly, we are going to show you how to move away from low‐level JavaScript and use a higher‐level JavaScript library instead. This will enable you to produce results much more rapidly. In order to “do more with less”, we will use the jQuery library: http://jqueryui.com/ Introduction – Unobtrusive JavaScript: You may not have thought about the following, but it is certainly something that troubles me when I talk about separating style from content in HTML. I hope you remember by now that best practice is to use HTML to add semantics to content, and to describe how that is presented using CSS. So I do not expect to see, for example, , or tags used in HTML. Instead, you should specify which fonts to use, how to emphasise a statement or how to render a strong statement using CSS rules – preferably recorded in an external style sheet. However, now we are using JavaScript to produce rich client interfaces, we are once again moving away from marking up pure content in the body of an html document. But this time, instead of adding styling information, we are adding behaviour. But if we stick to our earlier reasoning, the body of a document is not necessarily the correct place to specify behaviour. Consider, for example, the following markup: This turns an element with identifier ‘xyz’ red when the button is clicked. In fact, here we have mixed some behavioural information with some styling information and inserted them into the content of the document. The following would be more in keeping with our focus on pure content in the body of a document: COM2017 Lab Class 5 2 The trouble is, though, it doesn’t do anything! What we could do is to move the markup for the behaviour out of the body of the document, and insert it between some This is better. We could even go a step further and factor out the script into a separate .js file. But the trouble is, we have ended up with more code, and more work to do. Fortunately, there is a better way! Task 1: jQuery fundamentals We will introduce some basic functionality of jQuery in this task. Specifically, we will look at using jQuery to select elements in a document, and to modify attributes of elements. Some basics first. You should remember how to select elements in CSS rules. For example, p a refers to the group of all links ( elements) that are nested inside a paragraph (elements). Core to jQuery is a function that will return a special object that contain the elements that match a selector. The “magic” is that this object has a large number of predefined methods that let you then manipulate the elements in the returned set. To collect a group of elements using this function, we use the simple syntax: jQuery(selector) or, even simpler: $(selector) For example, $(“p a”) COM2017 Lab Class 5 3 will return the set of elements as described above. Let’s try this out. Click on the link: http://www.computing.surrey.ac.uk/courses/COM2017/chapter2/lab.selectors.html This example “Selectors Lab” is taken from jQuery in Action by Bibeault and Katz, published by Manning. If you type a selector into the text field on the l.h.s. the Lab will generate the appropriate jQuery function call (displayed under the text field) and highlight the selected elements in the sample DOM on the r.h.s. Type “li” in the text field and click “Apply”. You should see that all the list items are highlighted in red. Do a page refresh to reset the Lab. If you are familiar with selectors you may like to experiment with a few more. One interesting thing is that jQuery allows you to be quite specific in a selector. For example: a[href^=http://] will select a link whose href begins (signified by the “^”) with exactly http://. Try it. You should see that only the link to jquery.com is highlighted. Now let’s look at modifying some element properties. For this you will use a different lab class from the same book. Try this link: http://www.computing.surrey.ac.uk/courses/COM2017/chapter2/lab.wrapped.set.html What we will also see here is that you can chain methods together to accomplish a complex action in a single statement. Here we will collect a set of image elements with alt attributes, apply a predefined class that gives them a thick border, then add image elements that have title attributes, and finally apply a new class that applies transparency to this final set: $('img[alt]').addClass('thickBorder').add('img[title]') .addClass('seeThrough') Do note that this should be entered into the Lab as a single line. When you click “Execute”, the pictures of the flowers should get a thick border, and all but the coffee pot will be rendered transparent. Task 2: Using jQuery to Enhance the Appearance and Usability of a Web Page COM2017 Lab Class 5 4 The first task provided a very basic introduction to jQuery. Now it is time to see it really deliver some useful input into developing a web interface. For this you will use another of the NetBeans tutorials. Please work through the tutorial at the following link: http://www.netbeans.org/kb/docs/web/js‐toolkits‐jquery.html Use the Java Web option when setting up your project.