ppt - Computer Science

INLS 672 Web Applications II Tonight’s Agenda Who we are  Tools and Platforms  Programming Languages in General  Javascript background  Scripts and Event Handlers  Who am I?  bil hays (bil_hays@unc.edu) – – – – –   Network Manager in Computer Science MS degree in Comp Lit from UNC BS degree in Biology from W&M No formal training in IT/IS (a couple of 2-3 day courses) I've been working part or full time in IT at UNC since 1984 I am not a professor I'm doing this to learn myself, and some of you know more about some of this material than I do What I'm like Sometimes I talk really fast--if I go too fast, ask me to slow down  I will go into detail from time to time that I don't expect you to understand--you all vary widely in experience, and I will try to keep everyone comfortable with the material  I'm happy to meet with folks outside of class  I'm happy to answer question via email  Who are you? Your name, what experience you have with programming, and your favorite food and movie…. What we're going to look at Browser side programming: Javascript  Server side programming: PHP, Ruby on Rails  Maybe, server side control: bash  Why are we here? This is a project course, so if you’re interested in a topic, let me know  Take this as an opportunity to explore the technologies--it is as much your class as mine  More detail is at the class web site… http://www.cs.unc.edu/~hays/INLS668/  We need a venue to communicate, and folks seem reluctant to use the list to ask questions, any ideas?  What I expect of you Come to class prepared--do the readings before class, bring questions  Get your projects in on time  Let me know if you're having problems with any of the material or any other aspect of the class, as soon as possible  Follow the honor code  The Syllabus Tonight and Next Class    Tonight, we'll talk about some of the tools and workflow you might use, and start with javascript Next week, bring your laptops--the first half we'll go into javascript in greater detail, and then use the second half of class to play with some examples In the mean time, I want you to try some on your own--the first lab/portfolio aren't due for a few weeks, but there's every reason to go ahead and get started Tools you might use, things you'll need, and some general considerations…. Platforms  This is primarily a unix oriented class – You'll need an account on Ruby – We'll have some redhat servers for the group work You can use isis if you like, but I don't recommend it, since it's a more complex server setup  You can also use a windows box as a server, but I won't be much help with server setup for Ruby and PHP  A Sense of Security     Wherever you put your files and web pages, limit access to them with passwords or a domain restriction--some of the stuff we're going to play might be exploitable. Use inls672 and the class password for all of your work If you choose to run your own server, use a firewall and keep the software up to date The most important thing to do, always, is check any user input for your scripts--know what you want, reject anything else… All of the samples I show are on the class page behind a password, same id Browsers     Especially for the javascript portions, the choice of browser can be an issue We'll use firefox under windows as the primary target (since that's the biggest "audience") You should try out your work on other browsers, and across platforms I use a mac, so the first look I take will be through that, but I'll also run it through firefox under Windows and that's the platform I'll grade from if I run into any oddities Kinds of Editors “Simple” text editors: vi, emacs, notepad, BBEdit  Programmer's Editors: vim, bluefish, xcode (these support syntax highlighting)  WYSIWYG (or WYSIWYS and WYGIWYG) editors: Frontpage, Dreamweaver, NVu, Mozilla Composer  “Hybrid” editors: Word (blech!)  VI    Written by Bill Joy for an early BSD variant, designed to work over 300 baud lines Was the lowest common denominator for Unix, but has also be replaced mostly by VIM (when you call vi, you usually get vim instead) Dual Mode System – Command – Edit   If you’re going to work with unix, and we are, you need to know how to use this one! help.unc.edu has a good doc on vi Why do I have to learn these when I have a nice gui in Word? Because they are there  Because they are “simple”  Alternatives  – Other OS text editors: • Notepad • BBEdit • Ne, pico  Look around and pick one to use WYSIWYG Editors      Mozilla’s (and Netscape’s) Composer, now Seamonkey I use KompoZer Amaya (http://www.w3.org/Amaya) Dreamweaver--for this class I want you to avoid relying on Dreamweaver or any other editor that "helps" you perform complex tasks, since the point is to learn how this stuff works…. Word processors (eg. Word)--these tend to be pretty poor editors for what we're going to be doing A Rose with any Other Tags Why the choice of editor is important Simple Hello World  From: http://www.w3.org/TR/REC-html40/struct/global.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML> HomePage’s Hello World <HTML>  <HEAD> <META NAME=GENERATOR CONTENT="Claris Home Page 3.0"> <X-CLARIS-WINDOW TOP=68 BOTTOM=768 LEFT=8 RIGHT=538> <X-CLARIS-TAGVIEW MODE=minimal> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P>Hello world!</P> </BODY> </HTML> Word 2001’s Hello World <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta name=Title content="hello world"> <meta name=Keywords content=""> <meta http-equiv=Content-Type content="text/html; charset=macintosh"> <meta name=ProgId content=Word.Document> <meta name=Generator content="Microsoft Word 9"> <meta name=Originator content="Microsoft Word 9"> <link rel=File-List href="hello_world_word_files/filelist.xml"> <title>hello world</title>  <style> <!-/* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Times;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style> </head> <body bgcolor=white lang=EN-US style='tab-interval:.5in'> <div class=Section1> <p class=MsoNormal>Hello world!</p> </div> </body> </html> Cleaning Things Up HTML Tidy: http://www.w3.org/People/Raggett/tidy/  “Smart” Browsers and Editors  Validation Services: http://validator.w3.org/  So What Should you look for? Support for both WYSIWYG and source editing  Support for XHTML, XML  Support for validation  Something that doesn't insert a bunch of stuff you don't need  Syntax highlighting is also a bonus  Workflow To keep from going crazy, you need to come up with a reasonable workflow  Mostly, you'll be working with files that will be served from ruby or one of our servers  But you'll be working through a lab machine or your laptop….  Option: work in unixland via ssh Use ssh to connect to the server  Open at least two windows  In one window, you can open the file you're working on in vi and leave it open  In the other window, you can run the program, change permissions, move files, etc.  Test with a local browser  Option: work in unixland via vnc Since linux uses X11, you can use vnc to provide access to what looks like the local desktop  Performance on this is ok from campus, not so good from off campus  If you're interested in this, but don't know how to do it, let me know…..  Option: work with files locally You can also work with local tools  This means you need an easy way to move the files to the server, such as an open sftp session to your target  Another option is to use rsync to sync the local directory to the server (and rsync can be scripted, so this itself is an opportunity…)  Option: work with mounted drive     Servers can be set up as file servers allowing drive mounts via protocols such as NFS, AFS, AFP, SMB/CIFS, or DAV With a mounted drive, you can edit server files directly Performance can be an issue Fuse and SSHFS is another option, probably the best one, since it works with any server supporting SSH A few words about Carriage Returns and Linefeeds    Carriage Returns are ASCII 13 Line Feeds are ASCII 10 Different OSes use different conventions – Macs break lines with a carriage return – Unix breaks lines with linefeeds – DOS/Windows uses both  Use a utility program to convert – Dos2unix, unix2dos – BBEdit Control-C Some Terms What is a programming language?  What is an interpreted language?  What is a compiler?  Some Terms What is a variable?  What is a string?  A number?  Type?  An array?  A control structure?  Some Terms What is the difference between a compiler and an interpreter?  What does a web server send to a browser?  How does a browser work?  Javascript Developed by Netscape (Microsoft has a version called Jscript)  Now, ECMAScript (ECMA-262)  Syntax similar to C++ and Java  Is not Java!  Object oriented (sort of)  Dynamically typed  The Nice Thing about Standards     Javascript as a standard is ECMA 262, currently edition 3 is most widely supported This is equivalent to Javascript version 1.7 is supported in Mozilla/Gecko browsers Most browsers support a variant or superset of the standard language--Internet Explorer supports Jscript, for example For a table of dialects see: http://en.wikipedia.org/wiki/ECMAScript Javascript is an Interpreted Language    Program code is left in a text format, and interpreted “on the fly” Client side javascript is interpreted by a javascript aware browser Server side javascript is interpreted by the server, and the results are sent to the browser. See http://en.wikipedia.org/wiki/Server-side_JavaScript Javascript is general purpose    Although it's primary usage is in browsers, javascript is really just a language In addition to server side javascript, it can be used in desktop applications, and the interpreter is opensource-for example, Konfabulator/Yahoo Widgets is based on spidermonkey, one of the javascript interpreters released by Mozilla OS X Dashboard widgets are javascript applications What Javascript can do  Manipulate objects contained in the browser (via the Document Object Model) – – – – –  Write html Change the src of images Move things from one place to another Compare data Perform calculations Control user interactions via these methods What Javacript can't do     Read or Write files Make network connections Perform graphic manipulations (although it can control the browser's display of same) In fact, javascript itself doesn't have a concept of input and output-that has to be provided by a container (eg. the browser) – In our work we'll see how closely javascript intertwines with the document object model of the browser  Javascript can't force itself on a browser, some users disable it (see also: https://addons.mozilla.org/en-US/seamonkey/addon/722 Javascript is Object Oriented Object are just entities  Objects have properties  Objects take methods (think of a method as a command applied to the object, but in the syntax methods are associated with the object)  Strictly speaking, methods are a properties of an object that have a function value  For Example….  document is an object (a data object) – write() is a method that is taken by document – document.write(x) sends a message to document, telling it to write x  Strings and Numbers can also treated as objects – Their value is one property, but they have others – For example, "hello".length is 5 Javascript Comments !COMMENT YOUR CODE!  Single line comments start with //  // this is a comment  Multiple line comments start with /* and end with */  /*This is a multiple line comment so you can drone on and on and one as much as you care to*/ Embedding Javascript  Start with: <script language=“Javascript” type="text/javascript">  End with: </script>  In XHTML, you should also enclose the actual script in CDATA statements <![CDATA[ // Javascript here ]]>  This is one reason I’ve gone back to HTML from XHTML… Example of Embedded Script Script bounded by SCRIPT tag  Document is an object  Write is a method (you can tell that by the parentheses)  The string is a value passed to document via the write method  <script language="Javascript" type="text/javascript"> document.write("Hello world!<br />"); </script> A Simple Javascript      Script should be in contiguous lines, ending with a semicolon Individual commands on a single line can be separated with semi-colons Commands can span lines for readability Best practice is to use one command per line (unless the command is long), and end lines with semi-colon Digression: What does “Best Practice” really mean? External Scripts 10external_script.html     Javascripts need not be in the html page on which they will be displayed By convention, external scripts end in .js They contain no raw HTML (although you can used a document.write to pass HTML to the browser) Use a src statement to pull it into the html page: <script language=“Javascript” type="text/javascript src="date_modified.js">   Handy if you are using the same script in many pages Be aware of caching issues… Hiding Javascripts   Some very old browsers don’t understand Javascript, and display the code. You can use HTML comments to hide Javascripts, but these days you really don’t need to: <script language=“Javascript”>  </script>  The noscript tag allows display for non-javascript aware browsers-you should use this since some folks turn off javascript: <noscript>You need javascript to read this page </noscript> Document Object Properties         vlink colors--the color of visited links URL--the url of the document referrer--what url got us here title--you guessed it lastModified--the date/time stamp for the doc fgColor--the color attribute set in the body tag etc…. See 02DocumentObjectProperties.html Object Properties are Objects anchors--array of all anchors in a document  images--array of the images  image--one of the images, with it's own objects, eg. border, height, width name, src, lowsrc)  links--array of all the links  link--a link object, with it's own properties  parentWindow--the parent window of the document  see 05document_object.html Event Handlers Javascript events can be placed inside HTML Tags  Note that although event handlers are javascript, they do not occur within script tags  This is part of the real meat of javascript, since you can trigger browser side events  See 13simple_events.html  Text Literals Just a string of characters  Double and Single Quotes  Escape Sequences begin with “\”  – \b is backspace, \n is newline, \r is CR – \’ is single quote (so you can use it in a string as a literal) – \\ is backslash Document Object Events onmouseup  onkeyup  onClick  onMouseOver  onMouseOut  Onrowenter  See 04menu_mouseover.html  String Methods         About a dozen Don't confuse methods with properties subStr slice() search() replace() toLowerCase() 14events_and_strings.html Please Note In these last examples, I'm pushing strings into boxes in a form with events, changing a value of a named object  To alter text that has been rendered, eg. divs and ps, you have to manipulate them through the Document Object Model  We'll go into this extensively later  Another Example: 06last_modified.html Document has other properties and methods, for example, a lastModified stamp  Such properties also take methods  So these objects form a tree  var date_modified2 = new Date(document.lastModified); document.write("This page last modified " + (date_modified2.getMonth()+1) + " " + date_modified2.getFullYear()); Javascript Variables Cannot begin with a number  Cannot be a reserved word  Can only contain letters, numbers or underscores  Should be declared by var statement (you can get away without it, but it’s better to do it as a matter of habit)  Next Week That's all for tonight  Next week, bring your laptops, I’m going to get you all to do some coding during class 

ppt - Computer Science

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib