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 ([email protected])

 Class Web Site:

 http://www.cs.umd.edu/class/spring2009/cmsc122/

 No posting of code in the forum

 Check class announcements daily

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

Kinds of Selectors

 Descendant selector  Override the type and class selector styles  Typically with two elements where the second is a descendant  li a {font-size: 2em}  Example: descendantSelector.html, descendantSelector.css  Child selector  Element is styled if it is a direct descendant of its parent  p > em {text-decoration: underline;}  Example: childSelector.html, childSelector.css  Universal selector  Applies to all elements  Example: * {font-family: arial, Helvetica; }

 Pseudo-elements

 Allows you to style an item that is not marked by elements  Two pseudo-elements: :first-letter, and :first-line  Example : pseudoElements.html, pseudoElements.css

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;}

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)

 JavaScript – programming language that can appear in html pages.

 It allow us to:

 To dynamically create web pages

 To control a browser application

 Open and create new browser windows

 Download and display contents of any URL

 To interact with the user

 Ability to interact with HTML forms

 Process values provided by checkbox, text, buttons, etc.

 Example: SqrTable.html

JavaScript

 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

 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

 Example: JavaScriptTable.html

 Illustrates how we can create a table using document.writeln

 Notice how we can use Date() to specify a particular date format. Date() is part of JavaScript

 The + allow us to concatenate strings

 Example: “Mary” + “Land”  “MaryLand”

 Example: “Time is: “ + new Date()

 Notice how we have specified the border size. If you use “ “ the table borders will not be generated. You need to use \”

 Keep in mind that this example could have been written without using JavaScript

JavaScript (Output)

 Variable – A memory location. In JavaScript variables are declared using var

var temperature;

 Variables names must start with a letter, underscore or dollar sign and can be followed by any number of letters, underscores, dollar signs or digits

 Variables must be declared before they are used  A variable can hold different type of values

 Values we can assign to variables

 Integer – 0, 10, 40, 6, -

 Floating-point – 3.2, .67, 1.48E-

 String literals – “hello”, “goodbye”

 Operators

 Assignment operator (=)

 Typical arithmetic operators (+, -, *, /)

 Example: Variables.html

JavaScript (Variables)