CSS & JS Basics: Shorthand Props, Selectors, Backgrounds, Fonts, JS Interpreter - Prof. Ne, Assignments of Computer Science

Download CSS & JS Basics: Shorthand Props, Selectors, Backgrounds, Fonts, JS Interpreter - Prof. Ne and more Assignments Computer Science in PDF only on Docsity! Announcements  Instructor: Nelson Padua-Perez (nelson@cs.umd.edu)  Class Web Site: http://www.cs.umd.edu/class/spring2009/cmsc122/  No posting of code in the forum  Check class announcements daily 1 2 Shorthand Property  Shorthand Property- allows you to specify several properties by using only one  If you don’t specify one of the properties a default value will be used  Commonly used shorthand properties  background  font  list-style  margin  border  padding  Example: NoShorthandProp.html, NoShorthandProp.css, ShorthandProp.html, ShorthandProp.css 5 Selectors  ID Selectors  Used to identify unique sections of a web page  ID Selectors + descendant selectors  Allow us to apply specific styles to elements in specific sections of a web page  Example:  #header h2 {font-weight: normal;}  #content h2 {font-weight: bold;} 6 Background  Background properties  background-color  background-image – location of image  background-repeat – how image repeats. Possible values  no-repeat – one instance of the image  repeat – tile  repeat –y  repeats on the y-axis  repeat –x  repeats on the x-axis  background-attachment – indicates attachment of the image to the containing element. Possible values are:  scroll  default value.  fixed  image will stay stationary as the scrolling takes place  background-position – Possible values (combination of are valid)  top, bottom, center, left, right  Background images can be used in elements other than body  Example: background.html, background.css  Shorthand property: backgroundShorthand.html, backgroundShorthand.css 7 Generic Font Families  sans-serif – (e.g., Verdana, Helvetica, Arial)  serif – (e.g., Times New Roman, Georgia, Times)  monospace – (e.g., Courier, MS Courier New)  cursive – (e.g., Lucida Handwriting)  fantasy – (e.g., Whimsey, Comic Sans) 10  HTML parser – Takes care of processing an html document  JavaScript interpreter – Takes care of processing JavaScript code  HTML parser – must stop processing an html file when JavaScript code is found (JavaScript interpreter will then be running) This implies a page with JavaScript code that is computationally intensive can take a long time to load Execution of JavaScript Programs 11  What is not possible with JavaScript  It is not possible to read and write files (security reasons)  The only networking support it provides is:  It can send the contents of forms to a server and e-mail addresses.  It can cause the browser to load a web page  JavaScript is not Java, however …  JavaScript constructs are similar to Java’s constructs (in many cases identical)  JavaScript can interact with java programs JavaScript 12  Unlike html JavaScript is a case-sensitive language  JavaScript relies on the Unicode character set  Let’s go over several basic constructs that allow us to define JavaScript programs.  Some definitions  string – Any set of characters in double quotes (“ “)  function/method  An entity that completes a particular task for us  It may take values necessary to complete the particular task  It can return values  Generating output with the document.writeln method  Allow us to add text to the html file (Example: Writeln.html) by providing the required text in “ “  You can specify html code and results of JavaScript constructs JavaScript