A web server (such as Apache), a server-side scripting language (PHP), a database (MySQL), and a client-side scripting language (JavaScript).
HyperText Markup Language: the web page itself, including text and markup tags.
Like nearly all database engines, MySQL accepts commands in Structured Query Language (SQL). SQL is the way that every user (including a PHP program) communicates with MySQL.
PHP runs on the server, whereas JavaScript runs on the client. PHP can communicate with the database to store and retrieve data, but it can’t alter the user’s web page quickly and dynamically. JavaScript has the opposite benefits and drawbacks.
Cascading Style Sheets: styling and layout rules applied to the elements in an HTML document.
Probably the most interesting new elements in HTML5 are <audio>, <video>, and <canvas>, although there are many others, such as <article>, <summary>, <footer>, and more.
Some of these technologies are controlled by companies that accept bug reports and fix the errors like any software company. But open source software also depends on a community, so your bug report may be handled by any user who understands the code well enough. You may someday fix bugs in an open source tool yourself.
It allows developers to concentrate on building the core functionality of a website or web app, passing on to the framework the task of making sure it always looks and runs its best, regardless of the platform (whether Linux, macOS, Windows, iOS, or Android), the dimensions of the screen, or the browser it finds itself running on.
WAMP stands for Windows, Apache, MySQL, and PHP. The M in MAMP stands for Mac instead of Windows, and the L in LAMP stands for Linux. They all refer to a complete solution for hosting dynamic web pages.
Both 127.0.0.1 and http://localhost are ways of referring to the local computer. When a WAMP or MAMP is properly configured, you can type either into a browser’s address bar to call up the default page on the local server.
FTP stands for File Transfer Protocol. An FTP program is used to transfer files back and forth between a client and a server.
It is necessary to FTP files to a remote server in order to update them, which can substantially increase development time if this action is carried out many times in a session.
Dedicated program editors are smart and can highlight problems in your code before you even run it.
The tag used is <?php...?>. It can be shortened to <?...?>, but that is not recommended practice.
You can use // for a single-line comment or /*...*/ to span multiple lines.
All PHP statements must end with a semicolon (;).
With the exception of constants, all PHP variables must begin with $.
A variable holds a value that can be a string, a number, or other data.
$variable = 1 is an assignment statement, whereas the == in $variable == 1 is a comparison operator. Use $variable = 1 to set the value of $variable. Use $variable == 1 to find out later in the program whether $variable equals 1. If you mistakenly use $variable = 1 where you meant to do a comparison, it will do two things you probably don’t want: set $variable to 1 and return a true value all the time, no matter what its previous value was.
In PHP, the hyphen is reserved for the subtraction, decrement, and negation operators. A construct like $current-user would be harder to interpret if hyphens were also allowed in variable names, and in any case would lead programs to be ambiguous.
Yes, variable names are case-sensitive. $This_Variable is not the same as $this_variable.
You cannot use spaces in variable names, as this would confuse the PHP parser. Instead, try using the _ (underscore).
To convert one variable type to another, reference it and PHP will automatically convert it for you.
There is no difference between ++$j and $j++ unless the value of $j is being tested, assigned to another variable, or passed as a parameter to a function. In such cases, ++$j increments $j before the test or other operation is performed, whereas $j++ performs the operation and then increments $j.
Generally, the operators && and and are interchangeable except where precedence is important, in which case && has a high precedence, while and has a low one.
You can use multiple lines within quotations marks or the <<<_END..._END; construct to create a multiline echo or assignment. In the latter case, the closing tag must be on a line by itself with nothing before or after it.
You cannot redefine constants because, by definition, once defined they retain their value until the program terminates.
You can use \' or \" to escape either a single or double quote.
The echo and print commands are similar in that they are both constructs, except that print behaves like a PHP function and takes a single argument, while echo can take multiple arguments.
The purpose of functions is to separate discrete sections of code into their own self-contained sections that can be referenced by a single function name.
You can make a variable accessible to all parts of a PHP program by declaring it as global.
If you generate data within a function, you can convey the data to the rest of the program by returning a value or modifying a global variable.
When you combine a string with a number, the result is another string.
In PHP, TRUE represents the value 1, and FALSE represents NULL, which can be thought of as “nothing” and is output as the empty string.
The simplest forms of expressions are literals (such as numbers and strings) and variables, which simply evaluate to themselves.
The difference between unary, binary, and ternary operators is the number of operands each requires (one, two, and three, respectively).
The best way to force your own operator precedence is to place parentheses around subexpressions to which you wish to give high precedence.
Operator associativity refers to the direction of processing (left to right, or right to left).
You use the identity operator when you wish to bypass PHP’s automatic operand type changing (also called type casting).
The three conditional statement types are if, switch, and the ?: operator.
To skip the current iteration of a loop and move on to the next one, use a continue statement.
Loops using for statements are more powerful than while loops because they support two additional parameters to control the loop handling.
Most conditional expressions in if and while statements are literals (or Booleans) and therefore trigger execution when they evaluate to TRUE. Numeric expressions trigger execution when they evaluate to a nonzero value. String expressions trigger execution when they evaluate to a nonempty string. A NULL value is evaluated as false and therefore does not trigger execution.
Using functions avoids the need to copy or rewrite similar code sections many times over by combining sets of statements so that they can be called by a simple name.
By default, a function can return a single value. But by utilizing arrays, references, and global variables, it can return any number of values.
When you reference a variable by name, such as by assigning its value to another variable or by passing its value to a function, its value is copied. The original does not change when the copy is changed. But if you reference a variable, only a pointer (or reference) to its value is used, so that a single value is referenced by more than one name. Changing the value of the reference will change the original as well.
Scope refers to which parts of a program can access a variable. For example, a variable of global scope can be accessed by all parts of a PHP program.
To incorporate one file within another, you can use the include or require directives, or their safer variants, include_once and require_once.
A function is a set of statements referenced by a name that can receive and return values. An object may contain zero or many functions (which are then called methods) as well as variables (which are called properties), all combined in a single unit.
To create a new object in PHP, use the new keyword like this:
$object = new Class;
To create a subclass, use the extends keyword with syntax such as this:
class Subclass extends Parentclass ...
To cause an object to be initialized when you create it, you can call a piece of initializing code by creating a constructor method called __construct within the class, and place your code there.
Explicitly declaring properties within a class is unnecessary, as they will be implicitly declared upon first use. But it is considered good practice as it helps with code readability and debugging, and is especially useful to other people who may have to maintain your code.
A numeric array can be indexed numerically using numbers or numeric variables. An associative array uses alphanumeric identifiers to index elements.
The main benefit of the array keyword is that it enables you to assign several values at a time to an array without repeating the array name.
Both the each function and the foreach...as loop construct return elements from an array; both start at the beginning and increment a pointer to make sure the next element is returned by the following call or iteration, and both return FALSE when the end of the array is reached. The difference is that the each function returns a single element, so it is usually wrapped in a loop. The foreach...as construct is already a loop, executing repeatedly until the array is exhausted or you explicitly break out of the loop.
To create a multidimensional array, you need to assign additional arrays to elements of the main array.
You can use the count function to count the number of elements in an array.
The purpose of the explode function is to extract sections from a string that are separated by an identifier, such as extracting words separated by spaces within a sentence.
To reset PHP’s internal pointer into an array back to the first element, call the reset function.
The conversion specifier you would use to display a floating-point number is %f.
To take the input string "Happy Birthday" and output the string "**Happy", you could use a printf statement such as this:
printf("%'*7.5s", "Happy Birthday");
To send the output from printf to a variable instead of to a browser, you would use sprintf instead.
To create a Unix timestamp for 7:11 a.m. on May 2nd, 2016, you could use the following command:
$timestamp = mktime(7, 11, 0, 5, 2, 2016);
You would use the w+ file access mode with fopen to open a file in write and read mode, with the file truncated and the file pointer at the start.
The PHP command for deleting the file file.txt is as follows:
unlink('file.txt');The PHP function file_get_contents is used to read in an entire file in one go. It will also read a file from across the internet if provided with a URL.
The PHP superglobal associative array $_FILES contains the details about uploaded files.
The PHP exec function enables the running of system commands.
In HTML5, you can use either the XHTML style of tag (such as <hr />) or the standard HTML4 style (such as <hr>). It’s entirely up to you or your company’s coding style.
The semicolon in MySQL separates or ends commands. If you forget to enter it, MySQL will issue a prompt and wait for you to enter it.
To see the available databases, type SHOW databases. To see tables within a database that you are using, type SHOW tables. (These commands are case-insensitive.)
To create this new user, use the GRANT command like this:
GRANT PRIVILEGES ON newdatabase.* TO 'newuser'@'localhost' IDENTIFIED BY 'newpassword';
To view the structure of a table, type DESCRIBE tablename.
The purpose of a MySQL index is to substantially decrease database access times by adding some metadata to the table about one or more key columns, which can then be quickly searched to locate rows within a table.
A FULLTEXT index enables natural-language queries to find keywords, wherever they are in the FULLTEXT column(s), in much the same way as using a search engine.
A stopword is a word that is so common that it is considered not worth including in a FULLTEXT index or using in searches. However, it is included in searches when it is part of a larger string bounded by double quotes.
SELECT DISTINCT essentially affects only the display, choosing a single row and eliminating all the duplicates. GROUP BY does not eliminate rows, but combines all the rows that have the same value in the column. Therefore, GROUP BY is useful for performing an operation such as COUNT on groups of rows. SELECT DISTINCT is not useful for that purpose.
To return only those rows containing the word Langhorne somewhere in the column author of the table classics, use a command such as this:
SELECT * FROM classics WHERE author LIKE "%Langhorne%";
When you’re joining two tables together they must share at least one common column, such as an ID number or, as in the case of the classics and customers tables, the isbn column.
The term relationship refers to the connection between two pieces of data that have some association, such as a book and its author, or a book and the customer who bought the book. A relational database such as MySQL specializes in storing and retrieving such relations.
The process of removing duplicate data and optimizing tables is called normalization.
The three rules of First Normal Form are as follows:
There should be no repeating columns containing the same kind of data.
All columns should contain a single value.
There should be a primary key to uniquely identify each row.
To satisfy Second Normal Form, columns whose data repeats across multiple rows should be removed to their own tables.
In a one-to-many relationship, the primary key from the table on the “one” side must be added as a separate column (a foreign key) to the table on the “many” side.
To create a database with a many-to-many relationship, you create an intermediary table containing keys from two other tables. The other tables can then reference each other via the third.
To initiate a MySQL transaction, use the BEGIN or START TRANSACTION command. To terminate a transaction and cancel all actions, issue a ROLLBACK command. To terminate a transaction and commit all actions, issue a COMMIT command.
To examine how a query will work in detail, you can use the EXPLAIN command.
To back up the database publications to a file called publications.sql, you would use a command such as:
mysqldump -u user -ppassword publications > publications.sql
To connect to a MySQL database with mysqli, call the mysqli method, passing the hostname, username, password, and database. A connection object will be returned on success.
To submit a query to MySQL using mysqli, ensure you have first created a connection object to a database and then call its query method, passing the query string.
When a mysqli error occurs, the error property of the connection object contains the error message. If the error was in connecting to the database, the connect_error property will contain the error message.
To determine the number of rows returned by a mysqli query, use the num_rows property of the result object.
To retrieve a specific row from a set of mysqli results, call the data_seek method of the result object, passing it the row number (starting from 0); then call fetch_array or another retrieval method to obtain the required data. This is not required if fetching all results.
To escape special characters in strings, you can call the real_escape_string method of a mysqli connection object, passing it the string to be escaped. Of course, for security, using prepared statements will serve you best.
If you neglect to properly close objects created with mysqli methods, your programs carry the risk of running out of memory, especially on high-traffic websites. If there’s a program flow logic error in your code, closing objects also ensures you won’t accidentally access old results.
The associative arrays used to pass submitted form data to PHP are $_GET for the GET method and $_POST for the POST method.
The difference between a text box and a text area is that although they both accept text for form input, a text box is a single line, whereas a text area can be multiple lines and include word wrapping.
To offer three mutually exclusive choices in a web form, you should use radio buttons, because checkboxes allow multiple selections.
You can submit a group of selections from a web form using a single field name by using an array name with square brackets, such as choices[], instead of a regular field name. Each value is then placed into the array, whose length will be the number of elements submitted.
To submit a form field without the user seeing it, place it in a hidden field using the attribute type="hidden".
You can encapsulate a form element and supporting text or graphics, making the entire unit selectable with a mouse click, by using the <label> and </label> tags.
To convert HTML into a format that can be displayed but will not be interpreted as HTML by a browser, use the PHP htmlentities function.
You can help users complete fields with data they may have submitted elsewhere by using the autocomplete attribute, which prompts the user with possible values.
To ensure that a form is not submitted with missing data, you can apply the required attribute to essential inputs.
Cookies should be transferred before a web page’s HTML because they are sent as part of the headers.
To store a cookie in a web browser, use the set_cookie function.
To destroy a cookie, reissue it with set_cookie, but set its expiration date in the past.
Using HTTP authentication, the username and password are stored in $_SERVER['PHP_AUTH_USER'] and $_SERVER['PHP_AUTH_PW'].
The password_hash function is a powerful security measure because it is a one-way function that converts a string to a long hexadecimal string of numbers that cannot be converted back, and is therefore very hard to crack as long as strong passwords are required from users (for example, at least 8 characters in length, including randomly placed numbers and punctuation marks).
When a string is salted, extra characters known only by the programmer are added to it before hash conversion (this should be left up to PHP to handle for you). This ensures that users with the same password will not have the same hash, and prevents the use of precomputed hash tables.
A PHP session is a group of variables unique to the current user, passed along with successive requests so that the variables remain available as the user visits different pages.
To initiate a PHP session, use the session_start function.
Session hijacking is where a hacker somehow discovers an existing session ID and attempts to take it over.
Session fixation is when an attacker attempts to force a user to log in using the wrong session ID, thus compromising the connection’s security.
To enclose JavaScript code, you use <script> and </script> tags.
By default, JavaScript code will output to the part of the document in which it resides. If it’s in the head, it will output to the head; if in the body, it outputs to the body.
You can include JavaScript code from other files in your documents by either copying and pasting them or, more commonly, including them as part of a <script src='filename.js'> tag.
The equivalent of the echo and print commands used in PHP is the JavaScript document.write function (or method).
To create a comment in JavaScript, preface it with // for a single-line comment or surround it with /* and */ for a multiline comment.
The JavaScript string concatenation operator is the + symbol.
Within a JavaScript function, you can define a variable that has local scope by preceding it with the var keyword upon first assignment.
To display the URL assigned to the link with an id of thislink in all main browsers, you can use the two following commands:
document.write(document.getElementById('thislink').href)
document.write(thislink.href)
The commands to change to the previous page in the browser’s history array are:
history.back() history.go(-1)
To replace the current document with the main page at the oreilly.com website, you could use the following command:
document.location.href = 'http://oreilly.com'
The most noticeable difference between Boolean values in PHP and JavaScript is that PHP recognizes the keywords TRUE, true, FALSE, and false, whereas only true and false are supported in JavaScript. Additionally, in PHP, TRUE has a value of 1, and FALSE is NULL; in JavaScript they are represented by true and false, which can be returned as string values.
Unlike PHP, no character is used (such as $) to define a JavaScript variable name. JavaScript variable names can start with and contain uppercase and lowercase letters as well as underscores; names can also include digits, but not as the first character.
The difference between unary, binary, and ternary operators is the number of operands each requires (one, two, and three, respectively).
The best way to force your own operator precedence is to surround the parts of an expression to be evaluated first with parentheses.
You use the identity operator when you wish to bypass JavaScript’s automatic operand type changing.
The simplest forms of expressions are literals (such as numbers and strings) and variables, which simply evaluate to themselves.
The three conditional statement types are if, switch, and the ?: operator.
Most conditional expressions in if and while statements are literals or Booleans and therefore trigger execution when they evaluate to true. Numeric expressions trigger execution when they evaluate to a nonzero value. String expressions trigger execution when they evaluate to a nonempty string. A NULL value is evaluated as false and therefore does not trigger execution.
Loops using for statements are more powerful than while loops because they support two additional parameters to control loop handling.
The with statement takes an object as its parameter. Using it, you specify an object once; then, for each statement within the with block, that object is assumed.
JavaScript functions and variable name are case-sensitive. The variables Count, count, and COUNT are all different.
To write a function that accepts and processes an unlimited number of parameters, access parameters through the arguments array, which is a member of all functions.
One way to return multiple values from a function is to place them all inside an array and return the array.
When defining a class, use the this keyword to refer to the current object.
The methods of a class do not have to be defined within the class definition. If a method is defined outside the constructor, the method name must be assigned to the this object within the class definition.
New objects are created via the new keyword.
You can make a property or method available to all objects in a class without replicating it within the object by using the prototype keyword to create a single instance, which is then passed by reference to all the objects in the class.
To create a multidimensional array, place subarrays inside the main array.
The syntax you would use to create an associative array is key : value, within curly braces, as in the following:
assocarray =
{
"forename" : "Paul",
"surname" : "McCartney",
"group" : "The Beatles"
}
A statement to sort an array of numbers into descending numerical order would look like this:
numbers.sort(function(a, b){ return b – a })
You can send a form for validation prior to submitting it by adding the JavaScript onsubmit attribute to the <form> tag. Make sure that your function returns true if the form is to be submitted, and false otherwise.
To match a string against a regular expression in JavaScript, use the test method.
Regular expressions to match characters not in a word could be any of /[^\w]/, /[\W]/, /^\w/, /\W/ /[^a-zA-Z0-9_]/, and so on.
A regular expression to match either of the words fox or fix could be /f[oi]x/.
A regular expression to match any single word followed by any nonword character could be /\w+\W/g.
A JavaScript function using regular expressions to test whether the word fox exists in the string The quick brown fox could be as follows:
document.write(/fox/.test("The quick brown fox"))
A PHP function using a regular expression to replace all occurrences of the word the in The cow jumps over the moon with the word my could be as follows:
$s=preg_replace("/the/i", "my", "The cow jumps over the moon");
The HTML attribute used to precomplete form fields with a value is value, which is placed within an <input> tag and takes the form value="value".
It’s necessary to write a function for creating new XMLHttpRequest objects because Microsoft browsers use two different methods of creating them, while all other major browsers use a third. By writing a function to test the browser in use, you can ensure that your code will work on all major browsers.
The purpose of the try...catch construct is to set an error trap for the code inside the try statement. If the code causes an error, the catch section will be executed instead of a general error being issued.
An XMLHttpRequest object has six properties and six methods (see Tables 17-1 and 17-2).
You can tell that an asynchronous call has completed when the readyState property of an object has a value of 4.
When an asynchronous call successfully completes, the object’s status property will have a value of 200.
The responseText property of an XMLHttpRequest object contains the value returned by a successful asynchronous call.
The responseXML property of an XMLHttpRequest object contains a DOM tree created from the XML returned by a successful asynchronous call.
To specify a callback function to handle asynchronous responses, assign the function name to the XMLHttpRequest object’s onreadystatechange property. You can also use an unnamed, inline function.
To initiate an asynchronous request, an XMLHTTPRequest object’s send method is called.
The main differences between asynchronous GET and POST requests are that GET requests append the data to the URL rather than passing it as a parameter of the send method, while POST requests pass the data as a parameter of the send method and require the correct form headers to be sent first.
To import one stylesheet into another, you use the @import directive, like this:
@import url('styles.css');
To import a stylesheet into a document, you can use the HTML <link> tag:
<link rel='stylesheet' href='styles.css'>
To directly embed a style into an element, use the style attribute, like this:
<div style='color:blue;'>
The difference between a CSS ID and a CSS class is that an ID is applied to only a single element, whereas a class can be applied to many elements.
In a CSS declaration, ID names are prefixed with a # character (e.g., #myid) and class names with a . character (e.g., .myclass).
In CSS, the semicolon (;) is used as a separator between declarations.
To add a comment to a stylesheet, you enclose it between /* and */ opening and closing comment markers.
In CSS, you can match any element using the * universal selector.
To select a group of different elements and/or element types in CSS, you place a comma between each element, ID, or class.
Given a pair of CSS declarations with equal precedence, to make one have greater precedence over the other, you append the !important declaration to it, like this:
p { color:#ff0000 !important; }The CSS3 operators ^=, $=, and *= match the start, end, or any portion of a string, respectively.
The property you use to specify the size of a background image is background-size, like this:
background-size:800px 600px;
You can specify the radius of a border using the border-radius property:
border-radius:20px;
To flow text over multiple columns, use the column-count, column-gap, and column-rule properties (or their browser-specific variants), like this:
column-count:3;
column-gap :1em;
column-rule :1px solid black;
The four functions with which you can specify CSS colors are hsl, hsla, rgb, and rgba. For example:
color:rgba(0%,60%,40%,0.4);
To create a gray shadow under some text, offset diagonally to the bottom right by 5 pixels, with a blurring of 3 pixels, use this declaration:
text-shadow:5px 5px 3px #888;
You can indicate that text is truncated with an ellipsis by using this declaration:
text-overflow:ellipsis;
To include a Google web font such as Lobster in a web page, first select it from http://fonts.google.com, then copy the provided <link> tag into the <head> of your HTML document. It will look something like this:
<link href='http://fonts.googleapis.com/css?family=Lobster'
rel='stylesheet'>
You can then refer to the font in a CSS declaration such as this:
h1 { font-family:'Lobster', arial, serif; }
The CSS declaration you would use to rotate an object by 90 degrees is:
transform:rotate(90deg);
To set up a transition on an object so that when any of its properties are changed, the change will transition immediately in a linear fashion over the course of half a second, use this declaration:
transition:all .5s linear;
The O function returns an object by its ID, the S function returns the style property of an object, and the C function returns an array of all objects that access a given class.
You can modify a CSS attribute of an object using the setAttribute function, like this:
myobject.setAttribute('font-size', '16pt')
You can also (usually) modify an attribute directly (using slightly modified property names where required), like this:
myobject.fontSize = '16pt'
The properties that provide the width and height available in a browser window are window.innerHeight and window.innerWidth.
To make something happen when the mouse passes over and out of an object, attach to the onmouseover and onmouseout events.
To create a new element, use code such as this:
elem = document.createElement('span')
To add the new element to the DOM, use code such as this:
document.body.appendChild(elem)
To make an element invisible, set its visibility property to hidden (set it to visible to restore it again). To collapse an element’s dimensions to zero, set its display property to none (setting this property to block is one way to restore it to its original dimensions).
To set up a single event at a future time, call the setTimeout function, passing it the code or function name to execute and the time delay in milliseconds.
To set up repeating events at regular intervals, use the setInterval function, passing it the code or function name to execute and the time delay between repeats in milliseconds.
To release an element from its location in a web page to enable it to be moved around, set its position property to relative, absolute, or fixed. To restore it to its original place, set the property to static.
To achieve an animation rate of 50 frames per second, you should set a delay between interrupts of 20 milliseconds. To calculate this value, divide 1,000 milliseconds by the desired frame rate.
The symbol commonly used as the factory method for creating jQuery objects is $. Alternatively, you can use the method name jQuery.
To link to minified release 3.2.1 of jQuery from the Google CDN, you could use HTML such as this:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/ 3.2.1/jquery.min.js'></script>
The jQuery $ factory method accepts CSS selectors in order to build a jQuery object of matching elements.
To get a CSS property value, use the css method, supplying just a property name. To set the property’s value, supply a property name and a value to the method.
To attach a method to the element elem’s click event to make it slowly hide, you could use code such as the following:
$('#elem').click(function() { $(this).hide('slow') } )
In order to be able to animate an element, you must assign a value of fixed, relative, or absolute to its position property.
You can run methods at once (or sequentially if animations) by chaining them together with periods, like this:
$('#elem').css('color', 'blue').css('background',
'yellow').slideUp('slow')
To retrieve an element node object from a jQuery selection object, you can index it with square brackets, like this:
$('#elem')[0]
or use the get method, like this:
$('#elem').get(0)To display the sibling element immediately preceding one with the ID of news in bold, you could use this statement:
$('#news').prev().css('font-weight', 'bold')
You can make a jQuery asynchronous GET request using the $.get method, like this:
$.get('http://server.com/ajax.php?do=this', function(data) {
alert('The server said: ' + data) } )
Using a CDN to deliver files means you do not have to rely on your own (or your client’s) bandwidth, which can save money. Additionally, you can speed up the user’s experience because, once a browser has downloaded a file, the same version can be reloaded locally from the cache. A downside is that your web page or web app may not run locally if the user’s browser is not connected to the internet at the time.
To define a page of content to jQuery Mobile, you should enclose it within a <div> element with a data-role attribute of page.
The three main parts of a jQuery page are its header, content, and footer. To denote these, you place them within <div> elements that respectively have their data-role attributes assigned the values header, content, and footer. These three elements must be children of the parent <div> discussed in Question 2.
To put multiple jQuery Mobile pages within a single HTML document you can include multiple parent <div> elements with a data-role attribute of page, each containing the three child <div>s discussed in Question 3. To link between these pages, you should assign each of these elements a unique id (such as id="news"), which can then be referenced from anywhere within the HTML document using an anchor such as <a href="#news">.
To prevent a web page from being loaded asynchronously you can either give the anchor’s or form’s data-ajax property a value of false, give its rel attribute a value of external, or supply a value to its target attribute.
To set the page transition of an anchor to flip, give its data-transition attribute a value of flip (or you can use any other of the supported values for the other available transition effects; for example, data-transition="pop").
You can load a page so that it displays as a dialog by giving its data-rel attribute a value of dialog.
To make an anchor link display as a button, give its data-role attribute a value of button.
To make a jQuery Mobile element display inline, you give its data-inline attribute a value of true.
To add an icon to a button, supply the name of a known jQuery Mobile icon as a value to its data-icon attribute; for example, data-icon="gear".
The new HTML5 element for drawing graphics in a web page is the canvas element, created with the <canvas> tag.
You need to use JavaScript to access many of the new HTML5 features, such as the canvas and geolocation.
To incorporate audio or video in a web page, use the <audio> or <video> tags.
In HTML5, local storage offers far greater access to local user space than cookies, which are limited in the amount of data they can hold.
In HTML5, you can set up web workers to carry out background tasks for you. These workers are simply sections of JavaScript code.
To create a canvas element in HTML, use the <canvas> tag and specify an ID that JavaScript can use to access it, like this:
<canvas id='mycanvas'>
To give JavaScript access to a canvas element, ensure the element has been given an ID such as mycanvas, and then use the document.getElementdById function (or the O function from the OSC.js file supplied with the examples archive on the companion website) to return an object to the element. Finally, call getContext on the object to retrieve a 2D context to the canvas, like this:
canvas = document.getElementById('mycanvas')
context = canvas.getContext('2d')
To start a canvas path, issue the beginPath method on the context. After creating a path, you close it by issuing closePath on the context, like this:
context.beginPath() // Path creation commands go here context.closePath()
You can extract the data from a canvas using the toDataURL method, which can then be assigned to the src property of an image object, like this:
image.src = canvas.toDataURL()
To create a gradient fill (either radial or linear) with more than two colors, specify all the colors required as stop colors assigned to a gradient object you have already created, and assign them each a starting point as a percent value of the complete gradient (between 0 and 1), like this:
gradient.addColorStop(0, 'green') gradient.addColorStop(0.3, 'red') gradient.addColorStop(0,79, 'orange') gradient.addColorStop(1, 'brown')
To adjust the width of drawn lines, assign a value to the lineWidth property of the context, like this:
context.lineWidth = 5
To ensure that future drawing takes place only within a certain area, you can create a path and then call the clip method.
A complex curve with two imaginary attractors is called a Bézier curve. To create one, call the bezierCurveTo method, supplying two pairs of x and y coordinates for the attractors, followed by another pair for the end point of the curve. A curve is then created from the current drawing location to the destination.
The getImageData method returns an array containing the pixel data for the specified area, with the elements consecutively containing the red, green, blue, and alpha pixel values, so four items of data are returned per pixel.
The transform method takes six arguments (or parameters), which are, in order, horizontal scale, horizontal skew, vertical skew, vertical scale, horizontal translate, and vertical translate. Therefore, the arguments that apply to scaling are the first and fourth in the list.
To insert audio and video into an HTML5 document, use the <audio> and <video> tags.
To guarantee maximum audio playability on all platforms, you should use at least two codecs: PCM and any of the others, or Vorbis and any of the others.
To play and pause HTML5 media playback, you can call the play and pause methods of an <audio> or <video> element.
To support media playback in a non-HTML5 browser, you can embed a Flash audio or video player inside any <audio> or <video> element, which will be activated if HTML5 media playing is not supported.
To guarantee maximum video playability on all platforms, you should use the MP4/H.264 codec, and the Ogg/Theora or VP8 codec to support the Opera browser.
To request geolocation data from a web browser, you call the following method, passing the names of two functions you have written for handling access to or denial of the data:
navigator.geolocation.getCurrentPosition(granted, denied)
To determine whether a browser supports local storage, test the typeof property of the localStorage object, like this:
if (typeof localStorage == 'undefined') // Local storage is not available}
To erase all local storage data for the current domain, you can call the localStorage.clear method.
The easiest way for a web worker to communicate with a main program is by using the postMessage method to send information. The program attaches to the web worker’s onmessage event to retrieve it.
To stop a web worker from running, issue a call to the terminate method of the worker object, like this: worker.terminate().
You can prevent the default action of disallowing dragging and dropping for the events that handle these operations by issuing a call to the event object’s preventDefault method in your ondragover and ondrop event handlers.
To make cross-document messaging more secure, you should always supply a domain identifier when posting messages, like this:
postMessage(message, 'http://mydomain.com')
And check for that identifier when receiving them, like this:
if (event.origin) != 'http://mydomain.com') // Disallow
You can also encrypt or obscure communications to discourage injection or eavesdropping.