PHP Notes

➔
a multiline string can be assigned as follows:
$a_string = <<< TEST
~~~~~~~~~~~
~~~~~~~~~~~
~~~~~~~~~~~
TEST;
echo $a_string;

➔
PHP tags are embedded within:
<?php
?>

➔
period('.') is concatenation operator for strings:
echo "this concatenates a variable value".$my_var."and some more text";

can use the usual combination of assignment & arithmetic operators.
'.=' is a new one. $a.="hello"; equals $a = $a."hello";

Pre && Post-fix operators exist, unlike javascript where only postfix is allowed


various comment styles are supported: <!-- --> AND /* */ AND // AND #

include command: <?php include("menu.php"); ?>
require command: <?php require("menu.php"); ?> returns a FATAL error if include file isn't found

➔ language features
if-elseif-else AND switch-case-default constructs are supported

PHP creates an associative array when an html form is used with method="POST". The indices to be used correspond to each name attribute defined in the html form. _POST is the array name for "POST", while _GET is array name for method="GET". However method=GET displays the var values appended to the URL. They will appear visible using this form:
"?item=##&quantity=##" the question mark signals to the browser that variables follow.

PHP arrays are actually maps, with each key being mapped to a value. To loop thru an associative array, use the foreach loop:
foreach ($arrayname as $key => $value) { ~~~~~ }
Yes, 'as' and '=>' are needed as specified.

➔
mysql_real_escape_string(), function to help prevent SQL Injection attacks.

magic quotes assisted in earlier releases in these attacks. this is how to test&deal with them:

// Remove those slashes
if(get_magic_quotes_gpc())
echo stripslashes($_POST['question']);
else
echo $_POST['question'];

➔
use htmlentities function for similar protection when allowing a user to enter text:
The htmlentities function takes a string and returns the same string with HTML converted into HTML entities. For example, the string "<script>" would be converted to "<script>".

$userInput = "I am going to hax0r your site, hahaha!
<script type='text/javascript'>
window.location = 'http://www.example.com/'
</script>'";

$userInputEntities = htmlentities($userInput);
echo $userInputEntities;

Class5 homework assignment

The class5 eCommerce assignment brings together class1-5 topics, including xhtml, css, and javascript. My solution was an exotic fruit site shown here. Mousing over the image grid displays an associated [text] image which purports to describe details of the image. This dynamic behavior was implemented by assigning mouseover & mouseout event handlers using features of the prototypejs framework. This framework assists in traversing thru the DOM[Document Object Module]. With a small amount of code, we can identify the moused-over image, retrieve the src attribute, clone the element, reassign the src attribute w/ use of a regex expression: /(\.{2}\/?\w+\/)*(\w+\d+)(\.\w+)/ . When mousing out, we reverse the element's attr assignment back to the original image.

➔
prototypejs introduces quite a bit of functionality, difficult to find a reason not to use it ...

most fundamentally:

for (var index=0; index<myArray.length; index++) {
var item = myArray[index];
// working code ...
}

is replaced by:

myArray.each( function(item) {
// working code ...
} );

'each' is a reserved keyword, 'item' is not.

$w( string ) ➝Array

➔
a few string method offerings ...

truncate( length=n, suffix='...' )
appends suffix to truncated string

blank() ➝ Boolean
empty() ➝ Boolean

camelize() ➝string
converts string seperated by dashes to camel case

escapeHTML() ➝ string
useful for protecting against possible malicious user entry

gsub( pattern, replacement ) ➝ string

strip()
strips all leading/trailing whitespace

➔
misc ...

$('~~~').childElements() ➝ returns an array of ... child elements ... of element '~~~'

$('nyc').adjacent('li.us') ➝ returns an array of sibling elements that match the 'li.us' selector. '.us' represents a class="us"; 'nyc' represents an element with #nyc

uniq()
method returning a duplicate free version of an array

clonePosition( element, source [,options] ) ➝returns an object cloning the dimensions and position of a source element.


$(element).wrap('div').setStyle(
{backgroundImage: 'url(images/rounded-corner-top-left.png) top left'} );
➝ set the style for selector div of element with the background image

binding ...

'this' refers to the object holding a reference to the function

Class4 Assignment Repost

This is an upgrade to earlier posted solution to class4 assignment. Added are:

• use of RegEx expression to perform email address validation


• DOM traversal combined w/ regex processing to assign a runtime an event handler to a group of properties.


Lessons learned:

• know when to use the two argument RegExp constructor versus the one arg. The 2nd arg is needed when want to set runtime flags, such as suspending exact case matches.


• Submit and Reset form types have implied default actions. Reset clears all of a forms fields, which isn't precisely what was wanted in this one-form design.

assignment 4

assign4 java script caveats ...

• Strings are objects, not primitives. Assigning string2=string1 makes string1 AND string2 references equal and pointing to the same object. This did not bode well when attempting to only reset string2. String1 was reset also because they referred to the same object.


• The String class constructor needed to be invoked: string2 = new String(string1);
  string1 and string2 now their own separate copies, so wiping one out has no effect on the other.

Javascript Notes

Javascript is a lightweight progr language, typically used to animate certain behaviors, create cookies, validate data, generate html ...

<script type="text/javascript"> must envelop JS cmds and can appear in &<head> and <body> tags. Declaring function in the head section ensures that it will be loaded and accessible when function calls are placed from within the <body> section.

External scripts declaration goes in head tag: <script src="external-script-file.js">

May need to envelope scripting command in comments for browsers not supporting JS.



Many of the same programming constructs as C and Java is supported. Only new, unfamiliar relational operator is '==='. It checks for equality in value and type.

While JS is said to be an object-oriented progr lang, it doesn't appear to support inheritance, polymorphism, etc. It does support however object decl and creation, environment defined classes, system libraries with useful methods. User defined classes supported. Its not clear whether constructors are needed. Function overload doesn't appear to be supported.

Many different types of events are recognized, too many to remember. Some of them are:
mouseclick, web page or image loading, mousing over hot spot, selecting input block in HTML form, submitting an HTL form, tracking keystrokes.

There were three types of functions that throw up dialog boxes: { alert, confirm, prompt }.
alert() has no return type, confirm returns boolean, and prompt supports a return value.

Try, Catch construct supported, w/ Error object being available as a Catch argument.

User generated exception can be thrown too.

Many string methods available that can be used to style text. big(), small(), bold(), toLowercase, toUpperCase, link() are a few examples:

For example: String object instance:
var mystring="I am an hyperlink";
mystring.link("http://www.w3schools.com");

There is extensive spport for Date objects and Regular expressions. Need to refamiliarize with regexpr patterns.


The HTML DOM defines a standard set of objects, and a standard way to access and manipulate.
For example: screen object properties
* availHeight
* logicalXDPI - horizontal dots/inch

Browser info avail too thru navigator object
i.e.
function detect_Browser() {
var browser = navigator.appname;
var b_version= navigator.appVersion;
var version = parseFloat(b_version); // which pulls out 1st thing resembling a decimal#.

<body onload ="detectBrowser()";

more-to-follow on {cookies, validation, and object creation} ...

Personal page link here.

class2 homework assignment

class2 homework assignment here.

Class2 Notes

1. installed firefox add-ons: web developer toolbar, firebug, fireshot[for screen shot capture], and a clear cache button. Also IM client pidgin was downloaded, but not installed.



2. xhtml docs require a DTD statement, we are using xhhtml 1.0 strict version. Include a the head of each html doc ...
   <!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


3. Page layout w/ using tables is old school.

Containers are used and defined w/ div statements.

4. z-index element introduced. It must be used w/ absolute positioning.


5. a href="#" defines a dummy link anchor point.


6. &<a class="~~~", href="~~~" target="_blank"> follows the referenced link in a new browser window.


7. float:left; and clear:both; is commonly used to affect positioning flow. clear:both says to clear the left and bottom edges of the preceding element.


8. Three ways of introducing CSS styling:
   
   
   
   • via external file <link rel="stylesheet" type="text/css" href="main.css" />
     
   
   
   • via the doc header, w/ following: <style type="text/css">
     
   
   
   • inline, by combining w/ html element via: <span style="font-weight:bold;">
     

This week, read about:

• pseudo classes :link, :visited, :hover, :active, :first-child
  Sequence is important. :hover if present, must follow link & visited.
  :active if present, must follow :hover
  
• why isn't first-child considered a pseudo element? hmmm. Allows different treatment of the first element in a sequence of the same [x]html element.
  
• pseudo elements, :first-line, :first-letter, [and :before, :after]. The latter two don't work in IE.
  

Added style sheet for petshop page from class2.

Attempted to build page in disciplined fashion by establishing document first ... before styling. Page is anything but bullet-proof though. Layout is sensitive [in particular,] to change in width of individual components. Ran into this issue when attempting to fine tune pixel alignment of page's components.

Isn't clear which is best ... work to define dimensions of page's components from outer containers in ... or define physical dimensions of lowest[inner] elements and allow containing components to inherit size [so-to-speak].

What doesn't work well is mixing the two techniques. It becomes difficult to predict how layout [behavior] is affected through minor change.

Anyway, there seems to be merit in reviewing coded css [in 2nd and 3rd passes] to look for opportunity to reduce/consolidate classes and identifiers.