Sugi 26 How To Create Dynamic Html And Javascript Using -Books Pdf

SUGI 26 How to Create Dynamic HTML and JavaScript Using
01 Feb 2020 | 13 views | 0 downloads | 6 Pages | 262.80 KB

Share Pdf : Sugi 26 How To Create Dynamic Html And Javascript Using

Download and Preview : Sugi 26 How To Create Dynamic Html And Javascript Using


Report CopyRight/DMCA Form For : Sugi 26 How To Create Dynamic Html And Javascript Using



Transcription

Internet and Intranets, In order to page break after each full page of output and have HTML AND JAVASCRIPT. column headings roll to each page as requested by our users we. built some extra HTML code We used p p paragraph tags in After we re created our reports using out2htm and ODS we. still had to create a menu page for the retail web site so the. our footnote statement to instruct the web browser to break. users could access their market reports from the web Using. between paragraphs The SAS encode parameter allowed the. Microsoft FrontPage 98 we built a permanent HTML, browser to interpret these HTML tags and create the page break. document with links for each market Note HTML files can. code shown in bold in the HTML code above The style option. also be built in a regular text editor application A sample of. page break after always tells the web browser to page break. the HTML code is shown below, when the footnote is encountered This style option works only in. Internet Explorer, USING ODS TO PRODUCE HTML OUTPUT title Retail Reporting title. SAS Base Version 7 introduced the Output Delivery System ODS body BACKGROUND blueback gif. This system has several new web publishing tools The features of. p align center img SRC title jpg, ODS were enhanced even more in SAS Base Version 8 alt Retail Reporting HEIGHT 83.
WIDTH 495 p, For the purpose of this paper we used ODS instead of out2htm. because ODS creates more visually attractive reports ODS p align center font SIZE 2. controls the formatting of all output objects and transforms basic FACE Arial a href DayArizona htm b. monospace output to enhanced visual output by allowing us to Arizona Market Reporting b a font p. manipulate the color style and fonts of the reports as well as use. style sheets and templates p align center font SIZE 2. FACE Arial a href DayOhio htm b Ohio,Market Reporting b a font p. We updated several retail reports to enhance their visual. appearance using ODS ODS is utilized by placing a few lines of p align center font SIZE 2. code before and after the standard SAS procedure output code FACE Arial a href DayTexas htm b Texas. ODS combines the resulting data from your proc or data step with Market Reporting b a font p. a template or table definition to several available destinations body. Some of the destinations are HTML Listing Output and RTF rich html. text file The following program shows how to use ODS to convert. the same proc report shown above to HTML The ODS code is in Essentially this HTML code created a web page with several. bold links in which each market name referenced a different. location on the retail web site The resulting output in the. macro runrpt market browser is shown below,ODS LISTING OFF. ODS HTML FILE c Day market htm,proc report data RetailData headskip nowd. same code as above,ODS HTML CLOSE,mend runrpt,runrpt OHIO.
runrpt TEXAS,runrpt ARIZONA, When using ODS we turn off the regular output listing window and. redirect our output to an HTML file As you can see this code very. easily transforms standard SAS output to an HTML document but. As you can see we used an image for our title and, the resulting HTML code and document in the browser looks very. background,different than out2htm generated HTML, This menu page worked well so long as only market level. The result of this HTML as it appears in the browser is shown. reporting was needed however our users soon requested. below This example is using the default template since we did not. banking center level reporting We had to re examine our retail. specify a template in our SAS program, web site and make several changes to accommodate this new. level of reporting, If we added links for all our banking centers to the menu page.
our users would have to scroll through a long list of links in. order to make their selection To make it easier for our users. Internet and Intranets, we chose to rebuild our menu page and use drop down lists instead handler with an object it must be added to the HTML tag that. of links We needed two drop down lists to make banking center defines the object. level selections quickly one for market selection and one for. banking center selection The banking center drop down lists would Event Handler syntax. be limited to the banking centers available based on the market TAG onEventName do a function. selection made in the market drop down list This type of selection Example. limitation required additional programming not available in HTML select name MLevel. therefore we needed to add programming capabilities to the code onChange MktLevel select. Our option was to use either VBScript or JavaScript We selected. JavaScript due to its capabilities across browsers As mentioned earlier JavaScript programs are included in the. HTML code and are enclosed in the script tag They can. JavaScript is a unique programming language that also be saved in separate files MyJavaScript js and simply. functions only within a web browser A full referenced inside the HTML program by the script tag For. overview of the language is beyond the scope of example if we create a JavaScript program called RptRetail js. this paper but it is necessary to learn some we would include the following in our HTML code generally at. basic JavaScript code and syntax in order to the beginning of the HTML file. understand how to use SAS to build JavaScript script language javascript. src RptRetail js,INTRODUCTION TO JAVASCRIPT, JavaScript is a programming language that allows users to add It is always important to put comments in your code and this. interactive content to web pages The browser reads the code and remains true for JavaScript programs Comments are text or. executes its instructions JavaScript commands are included in the other characters ignored by the interpreter Surprisingly. HTML code for a web page and are enclosed in script tags The comments in JavaScript can be defined by using. browser knows to run the JavaScript program because it s combination similar to the comment syntax in SAS and C. enclosed in these tags It only works with HTML elements and can It is also useful to know that JavaScript is extremely case. enhance the interactivity of a web page by creating HTML sensitive. dynamically validating form fields and performing basic. calculations,ADDING JAVASCRIPT TO OUR HTML, After learning some basic JavaScript we moved forward to. JavaScript is essentially an object based event driven language An. rebuild our retail menu page using drop down lists. object is selected triggering an event and a piece of JavaScript. code is executed For example when a user clicks a button on a. web page the button object is selected triggering a click event First we built a new HTML file creating two drop down lists. which may activate certain instructions For JavaScript purposes one for market selection and one for banking center selection. objects are defined as computer entities that can be referenced in We analyzed the events that we wanted to take place based. code The major web objects are document elements form on the user s actions and decided that we needed functions to. frame image link window history and navigator Each object perform the following actions. consists of properties methods and events Set up the web page after a user enters it. Limit the selection list of banking centers available after a. A property is an attribute or characteristic of an object and can be user selects a market from the market drop down list. used to modify an object Each object has its own specific Display the report of the banking center level chosen. properties Some properties exist for several different objects while when the user selects the Display Report button. other properties only exist for certain objects For example the We named these functions Setup MktLevel and. document object has properties of title bgColor and fgColor A DisplayReport. form object also has a property of title but not bgColor or. fgColor Each object has several properties that describe it The following HTML code shows the JavaScript references in. bold with a brief description in italics, A method is a predefined action that an object can perform Certain. objects can perform certain methods For example the html. Write string method is used with the document object and head. requires a string parameter This method writes the string to the title Retail Banking Reporting title. current window script LANGUAGE JavaScript,SRC retailrpt js script.
JavaScript connects objects properties and methods using the dot. syntax notation This notation consists of placing a period or dot References the JavaScript program in which. between the objects properties and methods the SetUp MktLevel and DisplayReport. functions are defined,Object property syntax,Object property new value head. Example document MyForm MLevel length 0 body topmargin 0 leftmargin 0. onLoad Setup,Method syntax, Object method Defines the event handler to perform the. Example document MyForm MLevel focus function Setup when the body object is. completed downloading into the browser, Users interact with a web page by typing or clicking on the. elements within it These actions are called events In JavaScript p align center img src title jpg. event handlers process events An event handler is a script or alt Retail Reporting p. function that returns a True or False value Event handlers are also form name MyForm. predefined in JavaScript and are recognized by the event name p align center b. preceded by the word on such as onSubmit or onClick Certain font face Arial color 0000FF size 5. event handlers are appropriate for certain objects To use an event Market Level font b select name MLevel. Internet and Intranets, onChange MktLevel select p document MyForm BCLevel length 0. This code defines the event handler to perform This code defines both objects disabled. the function MktLevel when the select object property as true to disable the selection. changes objects while the function is running It also. defines their length property as 0 to clear, p align left nbsp nbsp b font face Arial out these selection lists.
color 0000FF size 5, Banking Center Level font b var OptElem1 document createElement OPTION. select name BCLevel select p OptElem1 text ARIZONA. OptElem1 value AZ, p input type button value Display Report document MyForm MLevel options add OptElem1. name DisplayBtn onClick DisplayReport p,This code creates option elements and adds. This code instructs the browser to perform the them to the selection object Mlevel It also. function DisplayReport when a user has pressed defines the text and value properties of these. and released the mouse button or keyboard options Similar code will generate several. equivalent on the button input object options in the Mlevel drop down list. body The MktLevel function creates elements or choices to show. html in the banking center level drop down list A sample of this. code is shown below, In the HTML code above the select tags are used to create the. drop down list or selection objects named MLevel and function MktLevel. BCLevel The display button named DisplayBtn is created with var ML document MyForm MLevel value. the input type button tag These objects are referenced. throughout the JavaScript program The first event handler This code creates a variable ML equal to the. referenced onLoad Setup basically tells the browser to Mlevel selection list value In other words. execute the function Setup when the web page is opened The the variable ML equals the market chosen in. second event handler onChange MktLevel instructs the the first drop down list. browser to execute the function MktLevel when the user changes. or selects an entry in the drop down list Mlevel Finally the third if ML AZ. event handler onClick DisplayReport tells the browser to run document MyForm BCLevel disabled true. the function DisplayReport when the user clicks on the button document MyForm BCLevel length 0. named DisplayBtn The result of this HTML as it appears in the. browser is shown below var OptElem1 document createElement OPTION. OptElem1 text GLENDALE MAIN,OptElem1 value 00002 HTM.
document MyForm BCLevel options add OptElem1,Basically this code creates option elements. if the Mlevel selection option equals AZ,and adds them to the selection object. BClevel It also defines the text and value,properties of these options Similar code will. generate several options in the BCLevel,drop down list. This code shows that by defining the banking center elements. if ML AZ we can control the options added to the, BCLevel selection list Additional code would use an else if.
statement For example after the statement else if ML OH. we would define the options added to BCLevel for this. Mlevel value,BUILDING THE JAVASCRIPT PROGRAM, The JavaScript program referenced in the script tags defines The DisplayReport function actually instructs the browser to. the three functions listed in the HTML Setup MktLevel and load a new page when you click the button object An example. DisplayReport of this code follows,function DisplayReport. The Setup function sets up the drop down lists on opening the. var Report document MyForm MLevel value, web page It creates the options or choices to show in our market. document MyForm BCLevel value, level drop down list such as Arizona Texas or Ohio It also. if Report location href Report, clears out any previous selections and automatically shows the first.
selection available in the market drop down list upon entering the. page The example below shows some of this code Note Due to In the DisplayReport function a new variable called Report. space limitation some spacing was removed from the following is created which tells the browser the name of the report the. programs to help readability user wants to display For example if the user selects the. function setup market selection value of AZ and the banking center. selection value of 00002 the function will concatenate these. document MyForm MLevel disabled true values and redefine the href property of the location object to. document MyForm MLevel length 0 a new HTML document called AZ00002 htm If the new. location exists the function will display it otherwise if the. document MyForm BCLevel disabled true,Internet and Intranets. HTML file does not exists the browser will generate an error put. message put document MyForm BCLevel disabled true,put document MyForm BCLevel length 0. All of the functions explained above contain other JavaScript code put. that this paper will not cover in detail Copies of the entire. JavaScript program will be available upon request do I 1 to nobs. set BANKCNTR point I nobs nobs, The majority of the JavaScript program was written and tested if MKTABBR EQ MKTABBR2 then do. within the Internet Explorer web browser only put var OptElem I 1. document createElement OPTION,put OptElem I 1 text. USING SAS TO BUILD THE JAVASCRIPT BCTRNAME 1, Now that we have explained the JavaScript code needed you put OptElem I 1 value.
probably realize how tedious it would have been to build a BANKCNTR 1 HTM. permanent JavaScript program for a market hierarchy that has over. 2000 banking centers,document MyForm BCLevel options add OptElem. We decided to let SAS do the work for us In order to achieve this put. we wrote three SAS programs The first program created distinct. market and banking center datasets using proc SQL The next. program actually built the JavaScript program described above. from these distinct datasets using put statements The final. This SAS code produced the JavaScript element, program produced all of the banking center level reports based on. options for every record in the distinct, the Direct Lending data The first program consisted of two simple. market banking center dataset thereby, proc SQLs and a copy of this program is available upon request. populating the banking center selection list, The second program consisted of two data steps The first data.
with only those banking centers within the, step built the Setup function whereas the second data step built. market directly from the data, the MktLevel and DisplayReport functions A sample of this SAS. program is shown below, Unfortunately the SAS code above is difficult to read in this. format and due to space limitations we were not able to show. the entire program A copy of the program will be available. file c RptRetail js,upon request,set MARKET end lastrec. if N 1 then do, For the third program we simply modified the above proc.
put function setup report by implementing macros to produce a report for every. banking center within each market,put document MyForm MLevel disabled true. put document MyForm MLevel length 0 After we rolled out these three SAS programs in batch we had. put document MyForm BCLevel disabled true reports and JavaScript that updated daily If a new branch was. put document MyForm BCLevel length 0 added or changed markets all three programs would. end automatically update from the Direct Lending data. This code is only produced once when n equals 1 USING SAS INTRNET TO CREATE DYNAMIC. because it is only needed in the JavaScript HTML,program once. When we learned of the SAS IntrNetTM application dispatcher. put var OptElem n 1, 2 0 we were generating over a thousand banking center level. document createElement OPTION retail reports in batch every night This product allows us to. put OptElem n 1 text have these reports generate dynamically from the web. MARKET 1 Basically we were able to discontinue running the program to. put OptElem n 1 value produce the banking center level reports in batch and only run. MKTABBR 1 it when the user clicks the Display Report button on the web. put site We rewrote our SAS program that created the banking. document MyForm MLevel options add OptElem center level reports in batch and changed it to only produce. n 1 the report needed based on macros passed to the program. put from the web site A sample of this program is shown below. This SAS code produced the JavaScript element out2htm capture on. options code for every record in the distinct or ODS HTML FILE c Mlevel BCLevel. market dataset thereby populating the market, selection list with all of the markets in the proc report data RetailData headskip nowd. dataset where market MLevel and bcenter, The SAS code needed to build the MktLevel function is slightly column DAY NAPP.
more complicated A sample of this code is shown below define DAY group Day of Application. define NAPP sum of Apps,data NULL title BCLevel Applications. file c RptRetail js mod footnote p style page break after. set MARKET end lastrec always Support Services p,put else if ML MKTABBR 1 out2htm capture off. Internet and Intranets,htmlfile c Mlevel BCLevel,openmode REPLACE runmode B encode N. tcolor BLUE bgtype COLOR ACKNOWLEDGMENTS, bg WHITE I would like to acknowledge the following people for assisting. or ODS HTML CLOSE with the editing process of this paper Stacy Ries Peggy. Fredricks Patricia Davis Janice Koger Sam Radobenko. Please remember these programs have been simplified for this. Jarrod Zaremba Jeanne Corello Tina Dunning Rowel, Fulinara Richard Reigelsberger and John Clark Thank you.
for helping out I would also like to thank Mark Moran for. In order to implement the SAS IntrNetTM product we had to make teaching me something new every day Lastly but definitely. certain changes per the requirements of the application Some of not least I would like to thank EJ Harank for taking a chance. the changes included modifying our configuration on our SAS on an administrative assistant with a new degree in. server as well as defining SAS IntrNetTM program and data Information Systems Thanks to Bank One for their support. libraries and resources, We also had to add specific code to our HTML file in order for the. values of the selections from our drop down lists to pass to the CONTACT INFORMATION. indicated SAS program as macros A sample of the enhanced Your comments and questions are valued and encouraged. HTML code from above with the additional SAS IntrNetTM code Contact the author at. required is shown below Jennifer Sinodis,p align center img src title jpg 201 N Central. alt Retail Reporting p Phoenix AZ 85004,602 221 4771. form name MyForm we removed the Email Jennifer R Sinodis mail bankone com. action http cspm bankone net cgi,bin broker exe method POST. OnSubmit returnValidate document TheForm,input tupe hidden name service value default.
input type hidden name program,value dynamic CreateRetailReports sas. the above code was added, By adding this code our select objects named MLevel and. BCLevel become macros that pass to the SAS program. CreateRetailReports sas SAS uses these macros in the proc. report program from above to generate the HTML of the specific. banking center level requested All of the required changes to. implement SAS IntrNetTM have been invisible to our users Their. reports are updated daily and easy to find using the drop down lists. on the web site,CONCLUSION, Since 1998 we have greatly enhanced our retail reporting and. increased report production Our users are very happy with the. visually attractive reports and our reporting capabilities Using SAS. to generate JavaScript and HTML has reduced errors decreased. maintenance and increased the friendliness of our web site By. combining Base SAS and SAS IntrNetTM the possibilities seem. endless Our department has been known to say we can do. anything and with SAS it s true,REFERENCES, LaFler Kirk Paul Creating HTML Output with Output Delivery. System Proceedings of the Twenty Fifth Annual SAS Users. Group Inernational Conference 2000, Sloan Faith R Introduction to Dynamic Web Publishing.
Proceedings of the Twenty Fifth Annual SAS Users Group. Inernational Conference 2000, Haworth Lauren HTML for the SAS Programmer Proceedings of. the Twenty Fifth Annual SAS Users Group Inernational. Conference 2000, Goodman Danny Dynamic HTML The Definitive Reference. O Reilly Associates Inc 1998, SAS Institute Inc SAS Web Tools Using Web Publishing Tools. with SAS Output Course Notes SAS Institute Inc 1998. SAS Institute Inc SAS Web Tools Running SAS Applications on. the Web Course Notes SAS Institute Inc 1998, The Professional Development Group Inc Introduction to. JavaScript The Professional Development Group Inc 1998.


Related Books

Junior Showmanship - American Kennel Club - The

Junior Showmanship American Kennel Club The

1 Regulations For Junior Showmanship Section 1. Approval of Classes. Any club that is approved to hold a licensed or member all-breed show or a specialty show held ...

H:HTRHTR WEBdocsprotocol 02 protocol.prn - EMMES

H HTRHTR WEBdocsprotocol 02 protocol prn EMMES

Jimmy Light (PI) CLUSTER 3 Mount Sinai School of Medicine (K,L) (Peds K) One Gustave L. Levy Place Box 1243 New York, NY 10029 Barbara Murphy (PI) CLUSTER 4

U01 Protocol Version 3 - Emmes

U01 Protocol Version 3 Emmes

Natasha Watson (National Institute ... Jimmy Light (PI) Rush University (K, L) ... volume transplant centers in areas of high HIV prevalence who have the most scientific

PROTOCOL HIVTR - Emmes

PROTOCOL HIVTR Emmes

PROTOCOL HIVTR Version 7.0 July, 2009 Solid Organ Transplantation in HIV: Multi-Site Study Sponsoring Institution ... Jimmy Light (PI) Rush University (K, L)

Collaborative Sociological Practice: the Case of Nine ...

Collaborative Sociological Practice the Case of Nine

sociology in practice. 9UB was subject to scrutiny through evaluative research3 as is the norm with publicly funded interventions. This was carried out by the author. This role was one of creating protected time and space where relations of trust, shared learning, debate and reflection could flourish. This critical and collaborative approach to evaluation diverges significantly from ...

MANUAL OF PROCEDURES (MOP) - web.emmes.com

MANUAL OF PROCEDURES MOP web emmes com

MANUAL OF PROCEDURES (MOP) ... Principal Investigator and Co-Investigator from the grantee institution, ... (PI) jimmy.a.light@medstar.net

Goldilocks, slip resistance and the wicked problem of ...

Goldilocks slip resistance and the wicked problem of

Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015 Goldilocks, slip resistance and the wicked problem of falls prevention Richard Bowman and Nick Graham-Bowman Intertile Research, Brighton East, VIC, AUSTRALIA

????????? ???????????? - Svetloff

 Svetloff

emme pi light 35. 6145/tl1 oro 1 6095/tl1 1 black grace a2 1 white grace tl1g 1 white grace stl1 1 magnifica 12+1 1 eternity 8+4 rose silver 1 gold royale tl3 1 ...

FEATURED PHOTO GREAT GRAy Owls NEsTiNG iN FREsNO COUNTy ...

FEATURED PHOTO GREAT GRAy Owls NEsTiNG iN FREsNO COUNTy

110 FEATURED PHOTO GREAT GRAy Owls NEsTiNG iN FREsNO COUNTy, CAliFORNiA DaviD E. QuaDy, 39 The Crescent, Berkeley, California 94708; davequady@att.net

Art and Design Skills Progression Subject area: Art and ...

Art and Design Skills Progression Subject area Art and

Art and Design Skills Progression Subject area: Art and Design skills Curriculum leader: Tom James Year 1 (KS1 skills) Year 2 (KS1 skills) Year 3 (Lower KS2 skills) Year 4 (Lower KS2 skills) Year 5 (Upper KS2 skills) Year 6 (Upper KS2 skills) Generic skills Record and explore ideas from first hand observations Ask and answer questions about the starting points for their work Develop their ...