<head><script type="text/javascript">function testPopup() {window.open( "http://www.google.com/" )}</script></head><body><form><input type="button" onClick="testPopup()" value="Click"></form></body>OpenNewWindow =window.open('contact.html','help','toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350')JavaScript Window.Open ArgumentsWhen you open a window, you can set its URL, name, size, buttons, and other attributes, such as whether or...
Javascript Making a simple MouseOver
<a href="http://www.cit.cornell.edu"onMouseOver="document.logo.src='family.gif ' ; "onMouseOut ="document.logo.src='harry.gif ' ; " ><img name="logo" src="harry.gif " border=0></a>
The onMouseOver and onMouseOut attributes are “Event Handlers” that tell the browser whatcode to execute when the events occur. You can make it so that the mouseover affects another image onthe page by changing the name of the image accordingly in the event handler code.
We can use a MouseOver to animate a still image when themouse rolls over it....
Javascript String Constructor
String is the built-in object corresponding to the primitive string data type. It contains a very large number of methods for string manipulation and examination, substring extraction, and even conversion of strings to marked-up HTML, though unfortunately not standards-oriented XHTML.The String() constructor takes an optional argument that specifies its initial value:var s = new String();var headline = new String("Dewey Defeats Truman");Because you can invoke String methods on primitive strings, programmers rarely create String objects in practice.The...
JavaScript String Split Function
split()The split() method splits (for lack of a better word) a string up into substrings and returns them in an array. It accepts a string or regular expression argument containing the delimiter at which the string will be broken.<script type="text/javascript">var testString = "It is very nice script";var testSplitResult = testString.split(" ");for(i = 0; i < testSplitResult.length; i++){ document.write("<br /> Element " + i + " = " + testSplitResult[i]); }</script&g...
JavaScript Redirect
<script type="text/javascript">
window.location = "http://www.yoursite.com/"
</script>...
JavaScript System Dialogs alert(),confirm(),prompt()
The browser is capable of invoking system dialogs to display to the user through the alert(),confirm(), and prompt() methods. These dialogs are not related to the web page being displayedin the browser and do not contain HTML. Their appearance is determined by operating system and/or browser settings rather than CSS. Additionally, each of these dialogs is synchronous and modal,meaning code execution stops when a dialog is displayed, and resumesafter it has been dismissed.
The alert() method has been used throughout this book. It simplyaccepts...
JavaScript Variables
Variables store a value you can refer to later in the script. Variable namescan be nearly any valid identifi er. A JavaScript identifi er is a word thatcontains only letters, numbers, $, and _, and that doesn’t start with anumber.Variables are a great demonstration of how statements and expressionscan be combined. You use a variable declaration statement to create avariable.
var myVariable;
If you already have a variable, you can use a variable assignment expressionto assign it a value.
myVariable = 42;42You can combine a variable declaration...
JavaScript Alert
The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message.
1.
<form>
<input type="button" onclick=
"alert('Are you sure you want to call')"
value="See">
</form>
2.
function myFunc() {
alert("executing myFunc!");
return true;
}
3.
for (var i = 0; i < 10; i++) {
var link = document.createElement("a");
link.innerHTML = "Link " + i;
link.href = "#";
link.onclick = function() {
alert("This is link " + i);
return false;
};
document....
Web Application with PHP
PHP embedded in HTML
<html>
<head><title>Example 1</title></head>
<body>
<?php
/* If it is April 1st, we show a quote */
if (date('md' == '0401')) {
echo 'A bookstore is one of the only pieces of evidence we have '.
'that people are still thinking. <i>Jerry Seinfeld</i>';
} else {
echo 'Good morning!';
}
?>
</body>
</html>
The line
<?php
begins the PHP section embedded into the HTML code; the
line
?>
ends the PHP section. Notice that the code uses echo
to send the output.
When...
Creating A Function In Javascript
The basic structure of a function looks like this:
function functionName() {// the JavaScript you want to run}
The keyword function lets the JavaScript interpreter know you’re creating a function—it’s similar to how you use if to begin an if/else statement or var to create a variable.
function printToday()
{var today = new Date();document.write(today.toDateString());}
The function’s name is printToday. It has just two lines of JavaScript code that retrievethe current date, convert the date to a format we can understa...
Javascript Do While Loops
There’s another, less common type of loop, known as a do/while loop. This type ofloop works nearly identically to a while loop. Its basic structure looks like this:
do {// javascript to repeat} while (condition) ;
do {var luckyNumber = prompt('What is your lucky number?','');luckyNumber = parseInt(luckyNumber, 10);} while (isNaN(luckyNumber));
Save this file and preview it in a web browser. Try typing text and other nonnumericsymbols in the prompt dialog box. That annoying dialog box continuesto appear until you actually type a numbe...
Javascript For Loops
JavaScript offers another type of loop, called a for loop, that’s a little more compact(and a little more confusing). For loops are usually used for repeating a series ofsteps a certain number of times, so they often involve some kind of counter variable,a conditional test, and a way of changing the counter variable. In many cases,a for loop can achieve the same thing as a while loop, with fewer lines of code. Forexample.
for (var num=1; num<=100; num++) {document.write('Number ' + num + '<br>');}
var days = ['Monday', 'Tuesday', 'Wednesday',...
Javascript While Loops
A while loop repeats a chunk of code as long as a particular condition is true; in otherwords, while the condition is true. The basic structure of a while loop is this:
while (condition) {// javascript to repeat}
The first line introduces the while statement. As with a conditional statement, youplace a condition between the set of parentheses that follow the keyword while.
Say you want to print the numbers 1 to 5 on a page. One possible way to do that islike this:
document.write('Number 1 <br>');document.write('Number 2 <br>');document.write('Number...
Javascript Array
You can access the contents of a simple variable just by using the variable’s name.For example, alert(lastName) opens an alert box with the value stored in the variablelastName. However, because an array can hold more than one value, you can’t justuse its name alone to access the items it contains. A unique number, called an index,indicates the position of each item in an array. To access a particular item in an array,you use that item’s index number. For example, say you’ve created an array withabbreviations for the days of the week, and want...
Javascript Object Type
Objects are
created by using the new operator followed by the name of the object type to create. Developerscreate their own objects by creating instances of the Object type and adding properties and/ormethods to it, as shown here:
var o = new Object();
Each Object instance has the following properties and methods:constructor — The function that was used to create the object. In the previous example,the constructor is the Object() function.
hasOwnProperty(propertyName) — Indicates if the given property exists on the objectinstance (not on the...
HTML5 Constraint Validation API
HTML5 introduces the ability for browsers to validate data in forms before submitting to theserver. This capability enables basic validation even when JavaScript is unavailable or fails to load.The browser itself handles performing the validation based on rules in the code and then displaysappropriate error messages on its own (without needing additional JavaScript). Of course, thisfunctionality works only in browsers that support this part of HTML5, including Firefox 4+,Safari 5+, Chrome, and Opera 10+.Validation is applied to a form fi eld only...
Javascript Event Object
Properties
Different types of events have different properties, which you’ll learn
about later in the chapter. Here are a few properties common to all standard
Event objects:
■ type The type of the event, like “click,” “load,” or “keypress.”
■ target The element that originally dispatched the event. This may not
be the same as the element to which the event handler is attached.
■ currentTarget The element to which you attached the event handler.
In most cases, it is synonymous with the this keyword. If you change
the context of the event handler...
Javascript Cookies
Cookies are small strings that let you store data across page views andsessions. These are some common uses of cookies:1. Keeping track of whether the user has logged in to your site2. Remembering that a user has visited a page before3. Differentiating between fi rst-time visitors and repeat visitorsCookies are also sent to the server with every page request. That’s howthe server knows whether the user is logged in. Because cookies add datato the request and therefore increase the size of the request, cookie datais limited to 4KB.The window.document...
Javascript forEach
Looping over arrays using functions is increasingly common, especially incertain libraries. Modern browsers support the forEach() method, butyou can also build your own.function arrayForEach(array, loopFunc) {// If the browser support forEach, use it because// it will be fasterif ("forEach" in array) {return array.forEach(loopFunc);
// Otherwise, loop over the array and pass in// the array values to the loop function} else {for (var i = 0, l = array.length; i < l; i++) {loopFunc(array[i], i, array);}return array;}}function doSomeMath(num)...
Javascript Creating Arrays
The best way to create a new array is with the array literal syntax ([]),but the array constructor function is available too. If you pass a singlenumber value to the constructor function, you get an array fi lled withthat many undefi ned values.var myArray = [];var myFilledArray = new Array(4);myFilledArray;[undefi ned, undefi ned, undefi ned, undefi ned]PropertiesLike strings, arrays have one built-in property: length. This property isequal to the number greater than the last index in the array. This is trueeven if you skip some indices.["a",...
JavaScript String Length
The length returns the number of characters that are in a string, using an integer.<script type="text/javascript">var testString = "11111";var length = testString.length;document.write("The string length is: " + length);</script>output:-The string length is:...
Comparing strings in JavaScript
<script type="text/javascript">var username = "test";if(username == "test") document.write("Welcome"); else document.write("Access Denied!"); document.write("<br /><br />Try again?<br /><br />");</script>While '14' == 14 is true (because by converting either the left side value to a number or converting the right side value to a text string will result in both being the same) '123' === 123 is false since one value is a text string and the other is a number.The === operator...
JavaScript String indexOf
var p = navigator.platform;system.win = p.indexOf(“Win”) == 0;system.mac = p.indexOf(“Mac”) == 0;system.x11 = (p.indexOf(“X11”) == 0) || (p.indexOf(“Linux”) == 0);
This code uses the indexOf() method to look at the beginning of the platform string. To detectWindows, the platform-detection code simply looks for the string “Win” at the beginning of theplatform string (covers both “Win32” and “Win64”). Testing for a Mac platform is done in the sameway to accommodate both “MacPPC” and “MacIntel”. The test for Unix looks for both “X11” and“Linux”...
Why Use Sitemaps?
It is important to use Sitemaps because they help your visitors quickly get to the informationthey need, and they help web spiders find your site’s links.There is no universal Sitemap rule that you can apply to every site. Understandingdifferent Sitemap options should help you identify the right type for each situation. Thefollowing subsections discuss some of the reasons for using Sitemaps.
Crawl augmentationAlthough web spiders are continuously improving, they are far from perfect. Searchengines have no problems admitting this.
Poor linking...
AdSense Earnings
The Google ads you are able to display on your content pages can be either cost-per-click(CPC) or cost-per-1000-impressions (CPM) ads, while AdSense for search results pagesshow exclusively CPC ads. This means that advertisers pay either when users click onads, or when the advertiser’s ad is shown on your site. You’ll receive a portion of theamount paid for either activity on your website. Although we don’t disclose the exactrevenue share, our goal is to enable publishers to make as much or more than they couldwith other advertising networks.
Typically,...
Competitor Research and Analysis
Competitor research and analysis may seem like a copycat activity, but it is not (at leastnot entirely). It is about understanding what your competitors are doing. It is aboutexamining their keyword and linking strategies while realizing their current strengthsand weaknesses. The bottom line is that you are trying to understand what is makingyour competitors rank.This activity may comprise elements of emulation, but what you are really trying to dois be better than your competition. Being better (in a general sense) means providing asite with...
Link Building
There are countless opportunities for link building. Everything starts on your site. Yoursite should make it easy and intuitive for anyone wanting to link to it. To increase yourchances of people linking to your site, you need to provide something of value.Basic ElementsThe following subsections talk about the rudimentary elements that all sites need toconsider.Take out the guessworkTake out the guesswork for your web visitors by providing the HTML code fragment(s)for people to link to your site. Create “Link to Us” and “Tell a Friend” links....
JavaScript getElementById
getElementById() is a method of document object, it gets the tag element with the value "id" in its ID attribute.
To reference in a JS script to a HTML tag through its ID, use the following syntax:
document.getElementById("id")
So even though the Internet Explorer JavaScript engine uses a mark-and-sweep
implementation, any COM objects that are accessed in JavaScript still use reference counting,
meaning circular references are still a problem when COM objects are involved. The following
simple example demonstrates a circular...
JavaScript Objects
Each Object instance has the following properties and methods:constructor — The function that was used to create the object. In the previous example,the constructor is the Object() function.
hasOwnProperty(propertyName) — Indicates if the given property exists on the objectinstance (not on the prototype). The property name must be specifi ed as a string (forexample, dataObj.hasOwnProperty(“name”)).
isPrototypeOf(object) — Determines if the object is a prototype of another object.propertyIsEnumerable(propertyName) — Indicates if the given property...
JavaScript and HTML DOM
WORKING WITH THE DOM
In many cases, working with the DOM is fairly straightforward, making it easy to re-create withJavaScript what normally would be created using HTML code.
Dynamic Scripts
The <script> element is used to insert JavaScript code into the page, either using by the src attributeto include an external fi le or by including text inside the element itself. Dynamic scripts are thosethat don’t exist when the page is loaded but are included later by using the DOM. As with theHTML element, there are two ways to do this:...
JavaScript values, variables
If you try to declare a variable that already exists, JavaScript will
treat it as a simple assignment statement and assign any new value in
the declaration statement to the variable. If the duplicate declaration
has no assignment, then nothing happens. If you try to assign a value to
a non-existent variable, JavaScript will create the variable for you.
<script type="text/javascript">//Commented lines starting with the double //First we will declare a few variables//and assign values to themmyTxt = "Do IT"; mynum =13;//Note that myTxt...
Include Inline JavaScript code
To include inline JavaScript code, place JavaScript code inside the <script> element directly, as
follows:
<script type=”text/javascript”>
function sayHi(){
alert(“Hi!”);
}
</script>
When using inline JavaScript code, keep in mind that you cannot have the string “</script>” anywhere
in your code. For example, the following code causes an error when loaded into a browser:
<script type=”text/javascript”>
function sayScript(){
alert(“</script>”);
}
</script>
Because of the way that inline scripts are parsed,...
What Is JavaScript
What Is JavaScript? — Explains the origins of JavaScript: where it came from, how itevolved, and what it is today. Concepts introduced include the relationship betweenJavaScript and ECMAScript, the Document Object Model (DOM), and the BrowserObject Model (BOM). A discussion of the relevant standards from the European ComputerManufacturer’s Association (ECMA) and the World Wide Web Consortium (W3C) is alsoincluded.
Considered the JavaScript expert by many people in the
development community, author Douglas Crockford identifies the abundance
...
Robots Meta Tag
Not everyone has access to their web server, but they still want to have control over how crawlersbehave on their web site. If you’re one of those, you can still control the crawlers that come to yoursite. Instead of using the robots.txt file, you use a robots meta tag to make your preferences knownto the crawlers.
The robots meta tag is a small piece of HTML code that is inserted into the <HEAD> tag of yourweb site and it works generally in the same manner that the robots.txt file does. You include yourinstructions for crawlers inside the...
Key Factors Effecting Link Quality
According to SEO convention and the information gleaned from the Google patents, there
are a number of factors affecting the quality of your inbound links.
Link Density
Links from pages with fewer outbound links have more influence than from pages where
there are huge numbers of links – see FFAs. Additional outbound links dilute the value of
existing links on a page. My suggestion is to accept links from pages with no more than
10 to 12 links. Avoid pages with 20+ external links.
Site and Page Relevance
A link from a site and page carrying similar...
How to Optimise Your Site
Search engine optimisation is a marketing discipline. It is not a stand alone function.Before any specific optimisation activity is undertaken it is essential that two areas arenon-search areas are appraised:Understanding your Organisation’s Online Business StrategyGood SEO requires a through understanding of your organisation’s overall businessstrategy. How does search fit in with activities such as advertising, e-mail and directmarketing? Is there a marketing plan? What does it say about objectives, strategy andbudgets? What is the overall direction...
Table basics in HTML
It’s reasonably straightforward to create a simple table when hand-coding markup. Thebare essentials of a single table is an opening <table> tag, followed by at least one tablerow (a <tr>), followed by at least one table cell (a <td>, meaning “table data”). Here’s anexample:<table><tr><td>Some data</td></tr></table>
That’s about as minimalist as you can get when it comes to creating tables, but you’reunlikely to create a table with only one item of data, so let’s make things a touch moreinteresting....
Anatomy of an XHTML document
Finally, let’s look at how a strict XHTML 1.0 document is laid out:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Our title</title></head><body><p>Our content</p></body></html>Let’s now go through this markup one line at a time.Doctype declarationFirst we see a doctype declaration. A doctype declaration provides an indication as towhat Document Type Definition (DTD)...
XHTML vs. HTML
The question of whether to use XHTML or HTML will often not even come up in an averageweb project; most web designers these days will naturally gravitate toward XHTML, asit is perceived as being new, advanced, and the “X” makes it sound cool. The truth is,XHTML isn’t as different from HTML as people think, and the purpose of this section of thechapter is to discuss exactly how XHTML differs from earlier versions of HTML, debunksome myths and misconceptions about XHTML and HTML, examine the issues behindMIME types, and cover when it is (and isn’t)...
id and class attributes
The id attribute is used to identify elements and mark up specific functional areas of a
website, and the class attribute is used to classify one or more elements. These important
attributes help you target elements when it comes to styling or scripting. I refer to both of
these attributes throughout the book, but for now all you need to know is that a specific
id attribute value can be used just once per page, whereas a class attribute value can be
used multiple times (the attributes themselves can be used multiple times per page). For
example,...
Divs and spans
Divs and spans are two tags that, when used well, can help give your page a logical structureand some extra hooks to apply any CSS or DOM scripting that you might need later. Whenused badly, they can litter your document unnecessarily and make your markup, styling, andscripting needlessly complicated.
<div id="header">...</div><div id="mainContent">...</div><div id="secondaryContent">...</div><div id="footer">...</div>
A span is used for marking out sections within a block element and sometimes...
CSS and Canvas HTML5
As with most HTML elements, CSS can be applied to the canvas element itself to add borders, padding,margins, etc. Additionally, some CSS values are inherited by the contents of the canvas; fonts are a goodexample, as fonts drawn into a canvas default to the settings of the canvas element itself.Furthermore, properties set on the context used in canvas operations follow the syntax you mayalready be familiar with from CSS. Colors and fonts, for example, use the same notation on the contextthat they use throughout any HTML or CSS document.Browser...
Overview of HTML5 Canvas
When you use a canvas element in your web page, it creates a rectangular area on the page. By default,this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and setother attributes for your canvas element. A Basic Canvas Element<canvas></canvas>Once you have added a canvas element to your page, you can use JavaScript to manipulate it anyway you want. You can add graphics, lines, and text to it; you can draw on it; and you can even addadvanced animations to it.The Canvas API supports the...
Using the Selectors API HTML5
getElementById() -Returns the element with the specified id attribute value<div id="foo">getElementById("foo");
getElementsByName() -Returns all elements whose nameattribute has the specified value<input type="text" name="foo">getElementsByName("foo");
getElementsByTagName() Return all elements whose tag namematches the specified value<input type="text">getElementsByTagName("input");
With the new Selectors API, there are now more precise ways to specify which elements you wouldlike to retrieve without resorting to looping...
CSS File for the HTML5 Page
body {background-color:#CCCCCC;font-family:Geneva,Arial,Helvetica,sans-serif;margin: 0px auto;max-width:900px;border:solid;border-color:#FFFFFF;}header {background-color: #F47D31;display:block;color:#FFFFFF;text-align:center;
13}header h2 {margin: 0px;}h1 {font-size: 72px;margin: 0px;}h2 {font-size: 24px;margin: 0px;text-align:center;color: #F47D31;}h3 {font-size: 18px;margin: 0px;text-align:center;color: #F47D31;}h4 {color: #F47D31;background-color: #fff;-webkit-box-shadow: 2px 2px 20px #888;-webkit-transform: rotate(-45deg);-moz-box-shadow:...
Submitting to directories
By now you’ve figured out that directories work differently from search engines. You must completethe submission process to have your site included in most directories. But even when you’re submittinginformation about your site, there’s an art to doing it.How you list your site can mean the difference between the site being included in the directory ornot. Before you even begin to create your listing, it’s usually a good idea to navigate through thedirectory that you’re submitting to. Look at other listings and make note of what works in them.Keywords...
Yahoo! Search Marketing
Another type of search engine is the directory search engine. Directories don’t display search resultsbased on keywords; instead they display results by category and subcategory. Web sites are usuallycategorized by the site, not by pages on the site. What this means is that your overall listing in directorysearch results will depend largely on either paid placement or on correctly categorizing your siteas tightly as possible.Yahoo! Search Marketing is a PPC program that’s similar to AdWords, but there’s one big difference.Yahoo! is a very commercial...
Google AdWords
Google AdWords is the PPC company you’ve probably heard the most about. AdWords is one ofthe top search engine marketing programs, and Google is one of the biggest providers of search,and many other services as well.Being biggest doesn’t always mean being the best, though. When you’re evaluating the PPC companiesyou may use, be sure to check not only the traffic rate, but also the conversion rate if possible.It’s great if your ads receive lots of impressions, but if those impressions don’t turn to clicks, you’llfind your PPC campaign is not at...
Improving Click-Through Rates
Some of the efforts you take to reduce the cost of your PPC campaigns can also lead to improvedclick-through rates. It’s essential that you work toward increasing these rates. Even though moreclicks drive up the cost of your PPC campaign, they also lead to more sales or conversions.Aside from the efforts that you’ve already seen (like dayparting and better targeting) you can alsoimprove your click-through rates by improving the ad copy in your PPC campaigns.
Include special offers or incentives in ad text. If you have coupons to offer, discountsavailable,...
Improve the structure of your URLs
Creating descriptive categories and filenames for the documents on your website can not only helpyou keep your site better organized, but it could also lead to better crawling of your documents by
search engines. Also, it can create easier, "friendlier" URLs for those that want to link to your content.Visitors may be intimidated by extremely long and cryptic URLs that contain few recognizable words
www.example.com/products/bike-14.html
www.example.com/bikes/red-bicycles
URLs like these can be confusing and unfriendly. Users would have...
Good practices for page title tags
• Accurately describe the page's content - Choose a title that effectively communicates thetopic of the page's content.Avoid:• choosing a title that has no relation to the content on the page• using default or vague titles like "Untitled" or "New Page 1"
• Create unique title tags for each page - Each of your pages should ideally have a uniquetitle tag, which helps Google know how the page is distinct from the others on your site.Avoid:• using a single title tag across all of your site's pages or a large group of pages
• Use brief, but descriptive...
Create uniqueand accurate page titles
A title tag tells both users and search engines what the topic of a particular page is. The <title> tagshould be placed within the <head> tag of the HTML document. Ideally, you should create a uniquetitle for each page on your site.
A relevant, deeper page (its title is unique to the content of the page) on our site appears as aresult
If the user clicks the result and visits the page, the page's title will appear at the top of thebrowser
Titles for deeper pages on your site should accurately describe the focus of that particular...
Alt tags in graphic links
An example of an alt tag might be the description of a picture of the Mona Lisa on your web site.Your alt tag, then, should look like this:Alt=”Mona Lisa”The alt tag usually falls at the end of the image tag. An image tag might look something like this:<img width=”100”height=”100”src=”monalisa.jpg”alt=”Mona Lisa”>The image code breaks down like this:<img width=”100”: The width (in pixels) of the image.Height=”100”: The height (in pixels) of the image.Src=”monalisa.jpg”: The source of the image file.Alt=”Mona Lisa”>: The alternative...
Character Entities
Character Entities
The following table lists the defined standard and proposed
character entities for
HTML and XHTML, as well as several that are nonstandard but generally
supported.
Entity names, if defined, appear for their respective
characters and can be used in the character-entity
sequence &name; to define any character for display by the browser.
Otherwise, or alternatively for named characters, use the character's...