Web systems day 05-Topic: JavaScript Objects

I JavaScript Objects

1. Facts about JavaScript objects

• An object is just a special kind of data. An object has properties and methods.
• The String object is used to manipulate a stored piece of text.
• The Date object is used to work with dates and times.
• The Array object is used to store multiple values in a single variable.
• The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).
• The Math object allows you to perform mathematical tasks.
• The regular expression (RegExp) Object.

2. Properties are the values associated with an object.

3. Methods are the actions that can be performed on objects.

4. String object

5. Date object

6. Array object

• An array is a special variable, which can hold more than one value, at a time.

7. Boolean object

8. Math Object

9. RegExp Object

• A regular expression is an object that describes a pattern of characters.
• When you search in a text, you can use a pattern to describe what you are searching for.
• A simple pattern can be one single character.
• A more complicated pattern can consist of more characters, and can be used for parsing, format checking, substitution and more.
• Regular expressions are used to perform powerful pattern-matching and "search-and-replace" functions on text.

II. JavaScript Advance

• The Navigator object contains information about the visitor's browser.
• A cookie is often used to identify a user.
• A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

1. JavaScript Browser Detection

The Navigator Object

2. JavaScript Cookies

References

1. Wendy Willard (2010). Web Design DeMYSTiFieD. McGraw-Hill Osborne Media
2. http://www.w3schools.com/ accessed date 21 June 2012

Web systems day 04-Topic: JavaScript

JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box

1. An alert box is often used if you want to make sure information comes through to the user.
2. A confirm box is often used if you want the user to verify or accept something.
3. A prompt box is often used if you want the user to input a value before entering a page.

The following shows an example of an alert box.

The following shows an example of a confirm box.

The following shows an example of prompt box.

JavaScript Functions

Calling a Function with Arguments

Functions With a Return Value

JavaScript For...In Statement

JavaScript onMouseOver Event

The try...catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.

References

1. Wendy Willard (2010). Web Design DeMYSTiFieD. McGraw-Hill Osborne Media
2. http://www.w3schools.com/ accessed date 20 June 2012

Web systems day 03-Topic: JavaScript

JavaScript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all browsers since 1996.

Facts about JavaScript

• JavaScript is an Object Based Programming language. Meaning that, it allows you to define your own objects and make your own variable types.
• JavaScript is a sequence of statements to be executed by the browser
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
• JavaScript is case sensitive
• Single line comments start with //.
• Multi line comments start with /* and end with */.

Uses of JavaScript

1. Text animation
2. Graphic animation
3. Simple browser based application
4. HTML forms submission
5. Client-side forms data validation (relieving the server of this task)
6. Web site navigation
7. JavaScript can manipulate HTML elements - A JavaScript can read and change the content of an HTML element
8. JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
9. JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

Employ JavaScript in your HTML documents

• Create an external JavaScript (.js) file
• collect commonly used functions together into external function libraries on the server
• added benefit of privacy from curious users
• Insert a JavaScript section that is in-line with your HTML documents
• as an expression for an HTML tag attribute
• within some HTML tags as Event Handlers

Manipulating HTML Elements

• JavaScript is typically used to manipulate existing HTML elements.
• The HTML "id" attribute is used to identify HTML elements.
• To access an HTML element from a JavaScript, use the document.getElementById() method.
• The document.getElementById() method will access the HTML element with the specified id.

Write Directly into The HTML Document

The example below writes a <p> element into the HTML document:

JavaScript Functions and Events

• The JavaScript statement in the example above, is executed when the page loads, but that is not always what we want.
• Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button.
• Then we put the script inside a function.
• Functions are normally used in combination with events.

JavaScript Functions in <head>

The example below calls a function when a button is clicked:

JavaScript Functions in <body>

This example also calls a function when a button is clicked, but the script is placed at the bottom of the page:

You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time.

It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

Using an External JavaScript

• JavaScript can also be placed in external files.
• External JavaScript files often contain code to be used on several different web pages.
• External JavaScript files have the file extension .js.
• Note: External script cannot contain the <script></script> tags!
• To use an external script, point to the .js file in the "src" attribute of the <script> tag:

JavaScript Variables

• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter, the $ character, or the underscore character
• You declare JavaScript variables with the var keyword. E.g. var firstname;
• To assign a value to the variable, use the equal (=) sign. E.g. firstname="Tom";
• When you assign a text value to a variable, put quotes around the value.
• When you assign a numeric value to a variable, do not put quotes around the value, if you put quotes around a numeric value, it will be treated as text.
• If you redeclare a JavaScript variable, it will not lose its value.
• Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it.
• If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.

JavaScript Arithmetic

As with algebra, you can do arithmetic operations with JavaScript variables.

The + Operator Used on Strings

The + operator can also be used to add string variables or text values together.

JavaScript Comparison and Logical Operators

JavaScript If...Else Statements

References

1. Wendy Willard (2010). Web Design DeMYSTiFieD. McGraw-Hill Osborne Media
2. http://www.w3schools.com/ accessed date 19 June 2012

Operating Systems Day 08 File Manager

Files are made up of records. Records consist of fields.

File Manager is also called the file management system. It is software responsible for creating, deleting, modifying and controlling access to files. It also manages the resources used by the files.

File Manager performs its functions in collaboration with the Device Manager.

Responsibilities of File Manager include the following.


1. File storage tracking

• Determine where and how files are stored

2. Implement storage management policies

• Efficiently use available storage space
• Provide efficient file access

3. File allocation: open() system call

• Record file use

4. File access: read() system call

• Accesses and returns data and tracks position in file

5. File de-allocation: close() system call

• Return file to storage and make available for others

Field is a group of related bytes that can be identified by the user with a name, type, and size.

Record is a group of related fields.

File is a group of related records that contains information used by specific application programs to generate reports.

Database is a group of related files that are interconnected at various levels to give users flexibility of access to the stored data.

A program file contains instructions and a data file contains data.

Directories are special files with listings of filenames and their attributes.

Record format

Within each file, records are all presumed to have the same format. They may be (1) fixed length or (2) variable length.

whereas the variable-length formats are used in files accessed sequentially (text files, program files), or in files that use an index to access records.

Fixed-length record

• Defined number of characters
• Direct access is easy - use a formula to calculate byte position
• Record size is critical
• With fixed length fields, long fields are truncated
• Ideal for simple data files

Variable-length record

• Direct access: difficult
• No empty storage space and no character truncation
• File descriptor stores record format
• Used with files accessed sequentially - text or program files
• Used for files with index to access records
• Cannot be used with Random (Direct) files

References

1. McHoes, A., & Flynn, I.M. (2008). Understanding operating systems (5th ed.). CENGAGE Learning.
2. Melbourne Institute of Technology (Semester 1, 2012). BN104 Operating Systems Lecture Notes.

Web systems day 02-Topics: Designing for screens

Typical screen areas for common monitor sizes

Popular and widely supported web fonts

If you’re creating webpages for the general public, a good rule of thumb is to limit your main content pages to around 200K in size. HTML and CSS files typically weigh in at around 1 to 3K, so that leaves the vast majority of the total for other content such as graphics.

In fact, only 216 colors will display uniformly across all Mac and Windows systems (but even those colors can be affected by lighting and gamma issues). Those 216 colors are commonly referred to as “web-safe” colors.

Eye-tracking research

The above example is from a website's "About Us" pages. The heatmap clearly shows users' tendency to read in an "F" pattern, and their focus on information that's presented in bulleted lists. In this case, there's also a small amount of attention to the "see also" area, but no viewing of the promotions in the rightmost column.

Another eye-tracking research result

References

Wendy Willard (2010). Web Design DeMYSTiFieD. McGraw-Hill Osborne Media

http://www.useit.com/eyetracking/ accessed date 15 June 2012

Operating Systems Day 07

Seek time: the time required to position the read/write head on the proper track from the time the I/O request is issued.

First-come, first-served (FCFS): the simplest scheduling algorithm for direct access storage devices that satisfies track requests in the order in which they are received.

Shortest Seek Time First (SSTF): a scheduling strategy for direct access storage devices that’s used to optimize seek time. The track requests are ordered so the one closest to the currently active track is satisfied first and the ones farthest away are made to wait.

SCAN is a seek strategy in which it uses a directional bit to indicate whether the arm is moving toward the center of the disk or away from it. In this technique, the algorithm moves the arm methodically from the outer to the inner track, servicing every request in its path. When it reaches the innermost track, it reverses direction and moves toward the outer tracks, again servicing every request in its path. In addition, SCAN strategy moves to extreme tracks even when there is no need.

LOOK is a seek strategy which is the most common variation of SCAN. In this strategy, the arm does not necessarily go all the way to either edge unless there are requests, hence eliminating the possibility of indefinite postponement.

Direct Memory Access (DMA) technique that allows a control unit to access main memory directly and transfer data without the intervention of the CPU. This technique is used for high-speed devices such as disks. Without DMA, the CPU is responsible for the physical movement of data between main memory and the device, a time-consuming task that results in significant overhead and decreased CPU utilization.


1. FCFS effective with light loads

• Service time unacceptably long under high loads

2. SSTF effective with moderate loads

• Localization problem under heavy loads

3. SCAN effective with light to moderate loads

• Eliminates indefinite postponement

4. C(Cicular)-SCAN effective with moderate to heavy loads

• Very small service time variances

References

1. McHoes, A., & Flynn, I.M. (2008). Understanding operating systems (5th ed.). CENGAGE Learning. 
2. Melbourne Institute of Technology (Semester 1, 2012). BN104 Operating Systems Lecture Notes.

Web systems day 01-Topics: Ajax

What is the goal of the use of Ajax (Asynchronous JavaScript + XML) in a Web application?

Goal of Ajax is to provide Web-based applications with responsiveness approaching that of desk-top applications.

Non-Ajax applications often have only one or a few server-side response programs, each of which produces significant content.

Ajax applications often have a much larger number of response programs, each of which is small and handles only requests for changes in one small part of a web page (e.g. Google maps web app).

Ajax applications often return JavaScript code to the client. Such code could be modified by an intruder to include destructive operations. To protect against this, any JavaScript code returned by the server must be scanned before it is interpreted.

Ajax is much faster for web applications that require user and server interactions.

Ajax requests and receives a small part of a document, hence results in much faster responses.

Ajax does not use any new programming languages or markup languages

AJAX is a technique for creating fast and dynamic web pages.

• Client side: JavaScript, XML, XHTML, DOM, CSS
• Server side: any (PHP, servlets, ASP.NET, etc.)

AJAX is based on internet standards, and uses a combination of:

•     XMLHttpRequest object (to exchange data asynchronously with a server)
•     JavaScript/DOM (to display/interact with the information)
•     CSS (to style the data)
•     XML (often used as the format for transferring data)

References

Robert W. Sebesta (2010). Programming the World Wide Web (5th ed.). Pearson Education, Inc.
http://www.w3schools.com/ accessed date 7 July 2012