240 likes | 332 Views
JavaScript Pattern Matching & .NET 2.0 Master/Content Pages. Materials for this lecture are handouts from Beginning JavaScript by Wilton and Chapter 2 of Beginning ASP.NET 2.0 Please continue to use either .NET 2.0 IDE or Visual Web Developer for exercises and labs.
E N D
JavaScript Pattern Matching &.NET 2.0 Master/Content Pages • Materials for this lecture are handouts from Beginning JavaScript by Wilton and Chapter 2 of Beginning ASP.NET 2.0 • Please continue to use either .NET 2.0 IDE or Visual Web Developer for exercises and labs. • Following the text step-by-step through Chapter 2, starting with the BEGIN code for this chapter downloaded from the site is an excellent learning experience. IS 460 Week 2: Pattern matching & Master Pages
Pattern Matching • A universally applicable task in any development environment • Forms validation • Database work • We will look at two techniques for accomplishing the same end • JavaScript string function coding • Using regular expressions in JavaScript IS 460 Week 2: Pattern matching & Master Pages
The Pattern Matching Task • Pattern: a string (a template) of symbols defining a set of actual strings that ‘fit’ the pattern • Example: SSN pattern = NNN-NN-NNNN where N=any digit, 0-9 and ‘-’ = the character ‘-’ • Given a pattern of ASCII (or UNICODE) characters, determine if a string variable matches that pattern • String to be tested can be entered by a user or read from a database IS 460 Week 2: Pattern matching & Master Pages
General pattern matching method 1: The coding approach • Relies on string functions • String handling – checking, synthesizing and parsing strings – probably occupies more business code than any other single functionality • Strings in JavaScript are objects. See the Beginning JavaScript handout for the functions and examples we’ll use: IS 460 Week 2: Pattern matching & Master Pages
String functions • str.length – the length attribute • charAt() and charCodeAt() methods • indexOf() and lastIndexOf() methods • substr(startc, endc ) and substring(startc, #chars) methods • split() method IS 460 Week 2: Pattern matching & Master Pages
String function technique 1: brute force • Hardcode the pattern in if statements • (1) Determine the length of the string (== length of the pattern) – else, ERROR • (2) Extract each character in the string individually with charAt() • (3) compare for the length of the string • Example: patterns.html: Pattern = A-NNN IS 460 Week 2: Pattern matching & Master Pages
String function technique 2: loop through the pattern • (1) Determine the length of the string (== length of the pattern) – else, ERROR • (2) Set up a switch test for each general symbol in the pattern, i.e. ‘N’ or ‘A’ • (3) Set up a loop that runs through the switch tests for each character in the string • (4) if match, continue, else exit loop w/ error • Example: patterns.html: Pattern = A-NNN IS 460 Week 2: Pattern matching & Master Pages
General pattern matching method 2: Regular Expressions • Regular expressions are a powerful means for describing patterns in text strings. • Familiar ‘patterns’ are • the SSN pattern: nnn-nn-nnnn (n is 0-9) • The date pattern: mm/dd/yy • In the UNIX environment, utilities such as GREP (program search and replace) and entire languages such as AWK (generating reports from text files) are based on regular expressions. IS 460 Week 2: Pattern matching & Master Pages
Regular Expressions (2) • Once we have described the patterns as a regular expression, most of JavaScript’s string functions will accept the RE in place of a string variable (search, find, replace etc.) • There are three ‘sets’ of RE pattern descriptors( the ‘alphabet’ used to describe patterns): • Character class (BJS p. 300) • Repetition specifiers (BJS p. 304) • Position Characters (BJS p. 305) IS 460 Week 2: Pattern matching & Master Pages
Character class specifiers • ANY character or group of characters can be specified • Typically, a class and its logical inverse are specified, i.e. • ‘\d’ a digit; \D NOT a digit • ‘\s’ whitespace; \W NOT whitespace • The regular expression itself is specified inside forward slashes ‘/’ IS 460 Week 2: Pattern matching & Master Pages
Mini spec • Understand BJS 8.2 • Hack it to • Add additional button to check the entered string to assure all alphabetic characters, case independent • Add an additional button to check the entered string to assure all numeric characters • ch8_example2460html IS 460 Week 2: Pattern matching & Master Pages
Repetition specifiers • It is frequently convenient to be able to specify that the class characters are to be used variable numbers of times. • Repetition specifiers allow this. • ‘*’ 0 or more ‘+’ 1or more • ‘?’ 0 or 1 ‘{n}’ n is a digit • Impossible to duplicate without programming IS 460 Week 2: Pattern matching & Master Pages
Position Specifiers • It is frequently desirable to match a pattern only (or never) at: • The start of a line (^) (note: ‘^’ also used as the ‘not’ character when inside [ ]) • The end of a line ($) • Within word boundaries (\b) • Or outside word boundaries (\B) IS 460 Week 2: Pattern matching & Master Pages
And Finally • Characters can be grouped using parentheses to indicate “must match the exact group” i.e. (VB) matches exactly ‘VB’, letters and case. • And groups can be OR’ed using the vertical bar ‘|’ • (VB|Java) matches ‘VB’ or ‘Java’ exactly. • The parentheses are NOT matched IS 460 Week 2: Pattern matching & Master Pages
Mini Spec • Reverse the logic of BJS 8.3, that is • The current program specifies everything between words as the delimiter • Change this so that everything between the numbers is the delimiter • There are multiple ways to do this • See JBS 8.3 460 • Join (p. 138) and split are inverse functions IS 460 Week 2: Pattern matching & Master Pages
Regular expression ‘gotcha’s’ • A RE that does not explicitly specify that the pattern is a ‘word’ will give a true match inside a larger string. This frequently is NOT what is desired. Ex: /\d\d[a-z]/ will find any digit-digit-alpha string OR SUBSTRING inside any string. Add \b at beginning and end to specify the pattern must be a ‘word’ • Inverted logic is the best way to test for many patterns, but is NOT INTUITIVE. Practice ;-) IS 460 Week 2: Pattern matching & Master Pages
Master & Content pages in .NET 2.0 • New in .NET 2.0 are Master pages • Previous methods of maintaining ‘look and feel’ used <!include> and frames • A Master page is a template page which contains: • The ‘common look and feel’ elements for multiple pages • ‘placeholders’ for individual page content IS 460 Week 2: Pattern matching & Master Pages
Master pages (cont.) • .NET, within the IIS server, merges Master and Content pages to render the complete HTML (and maybe JavaScript) page which is sent to the user • You create links to content pages which specify master pages IS 460 Week 2: Pattern matching & Master Pages
Master + content = actual page • See also diagram on BAN2.0 p. 32 Content N Final Rendered page Master Content 2 Content1 IS 460 Week 2: Pattern matching & Master Pages
Steps in site creation • Design and create 1 or more master pages • Design and create 1 or more CSS specifications • Link the CSS into your master pages • Design content pages specifying the master in which the content will be included • Link to the content pages - .NET does the rest IS 460 Week 2: Pattern matching & Master Pages
Master and Content page creation • To create a master page • Open a web site with VWD or IDE • Right click on the root, choose add new master page • Set the appearance of the page with HTML and with CSS • The page also contains a placeholder for .NET code you wish to run for all pages using this master. Leave this blank. We will discuss this fully later in the course. • To include CSS in the master page • Define the CSS file with any tool (CSS files are text) • Add CSS to the master page <head> in Design Mode: <link rel=“stylesheet” type=“text/css” href=“myCSS” runat=“server”> IS 460 Week 2: Pattern matching & Master Pages
Content page creation • To create a content page • Open a web site with VWD or IDE • Right click on the root, choose add new content page • Specify the master page to include • Add content in design mode IS 460 Week 2: Pattern matching & Master Pages
Demo: Chapter BAN2.0 Chapter 2 ‘end’ IS 460 Week 2: Pattern matching & Master Pages
Self directed learning • BAN2 Ch. 2 also includes direction on creation and use of a “site map”. You must include one in your project. This is a simple concept but requires some understanding of XML. If necessary, GOOGLE “XML tutorial”. Choose the one you like from the 100’s retrieved. • Ch. 2 also covers Web.config and Global.asax files. We will discuss these in later classes. IS 460 Week 2: Pattern matching & Master Pages