CSSBakery Table of Contents
feed
:
id
:tag:blogger.com,1999:blog-4843224028361594470
updated
:2012-05-18T11:59:35.103-07:00
category
(term='Image Captioning')
:
category
(term='a href')
:
category
(term='Descendants')
:
category
(term='list-style-type')
:
category
(term='Image Grid')
:
category
(term='outside')
:
category
(term='Unordered Lists')
:
category
(term='HTML5 Rocks')
:
category
(term='mysqli_num_rows')
:
category
(term='Google Font')
:
category
(term='border')
:
category
(term='PHP sort')
:
category
(term='Intermediate')
:
category
(term='Barrel Distortion')
:
category
(term='Global Object')
:
category
(term='Apache')
:
category
(term='IP Packet')
:
category
(term='Caltech')
:
category
(term='Raspberry Pi')
:
category
(term='Hollow Photoshop Circles')
:
category
(term='IPv6')
:
category
(term='Eric Meyer')
:
category
(term='RFC')
:
category
(term='SSH')
:
category
(term='CSS')
:
category
(term='Javascript')
:
category
(term='Network Address Translation')
:
category
(term='Substring Matching Attribute Selector')
:
category
(term='wf-inactive')
:
category
(term='font-style')
:
category
(term='Pseudo Element')
:
category
(term='networking')
:
category
(term='The Cascade')
:
category
(term='-moz-border-radius')
:
category
(term='Microsoft Security Essentials')
:
category
(term='WIFI')
:
category
(term='Life')
:
category
(term='Array')
:
category
(term='Firefox')
:
category
(term='INSERT INTO')
:
category
(term='Centering Images')
:
category
(term='z-index')
:
category
(term='IP Address')
:
category
(term='Sessions')
:
category
(term='Headings')
:
category
(term='FAT32')
:
category
(term='PNG Transparency Files')
:
category
(term='Internet Explorer')
:
category
(term='Modifying Blogger')
:
category
(term='Webkit')
:
category
(term='DIV')
:
category
(term='CDN')
:
category
(term='Inline Element')
:
category
(term='outline:none')
:
category
(term='wf-active')
:
category
(term='3 Column Layout')
:
category
(term='Bob Parsons')
:
category
(term='Microsoft')
:
category
(term='Chaining')
:
category
(term='gparted')
:
category
(term='Cache')
:
category
(term='hr')
:
category
(term='jQuery UI')
:
category
(term='Meddon')
:
category
(term='Router')
:
category
(term='CSS Resets')
:
category
(term='Browsers')
:
category
(term='Color Swatch')
:
category
(term='Photoshop Action')
:
category
(term='text-indent')
:
category
(term='USB Device')
:
category
(term='Variables')
:
category
(term='Browser Wars')
:
category
(term='a:hover')
:
category
(term='Notepad++')
:
category
(term='Shared Hosting')
:
category
(term='Particular Attribute Selector')
:
category
(term='Transparency')
:
category
(term='FOUT')
:
category
(term='Pullqutoes')
:
category
(term='mysqli_query')
:
category
(term='Inheritance')
:
category
(term='list marker')
:
category
(term='Size an Image Using CSS')
:
category
(term='Parallelism')
:
category
(term='watermark')
:
category
(term='IE6')
:
category
(term='td')
:
category
(term='ASCII')
:
category
(term='Secure Shell')
:
category
(term='Parsing RSS Feed')
:
category
(term='CSS 3')
:
category
(term='PHP')
:
category
(term='Value Attribute Selector')
:
category
(term='Google Chrome')
:
category
(term='CSS Tutorials')
:
category
(term='Unordered List')
:
category
(term='CSS3')
:
category
(term='Truncation')
:
category
(term='Browser Internals')
:
category
(term='Descendant Selector')
:
category
(term='Tools')
:
category
(term='Dedicated Server')
:
category
(term='CSS visibility')
:
category
(term='inline style')
:
category
(term='Horizontal Bar Graph')
:
category
(term='Blogger Template')
:
category
(term='Form Element')
:
category
(term='PHP Array of Arrays')
:
category
(term='MYSQLI_ASSOC')
:
category
(term='tbody')
:
category
(term='overflow: hidden;')
:
category
(term='Expand Widget Templates')
:
category
(term='clear')
:
category
(term='li')
:
category
(term='display')
:
category
(term='italic')
:
category
(term='Scrolling Tables')
:
category
(term='C')
:
category
(term='Networking Driver')
:
category
(term='CSS 3.0 Gradient')
:
category
(term='Stu Nicholls')
:
category
(term='PHP Syntax')
:
category
(term='PHP if')
:
category
(term='XAMPP')
:
category
(term='Computing News')
:
category
(term='HTTP')
:
category
(term='Photoshop')
:
category
(term='Foreign Keys')
:
category
(term='nav')
:
category
(term='IP Header')
:
category
(term='Flash')
:
category
(term='Sonet OC3')
:
category
(term='UDP')
:
category
(term='Form Tag')
:
category
(term='Google Privacy')
:
category
(term='Console')
:
category
(term='Safari')
:
category
(term='Google API')
:
category
(term='IP')
:
category
(term='top')
:
category
(term='Specificity')
:
category
(term='Escaping Characters in CSS')
:
category
(term='Inserting Records into Database')
:
category
(term='Adobe')
:
category
(term='Rounded Corners')
:
category
(term='jQuery')
:
category
(term='display:block; Cookie Cutter Method')
:
category
(term='IP Packets')
:
category
(term='Inserting MySQL Records')
:
category
(term='SFTP')
:
category
(term='Anti-Virus Software')
:
category
(term='mysqli_connect')
:
category
(term='Crop an Image Using CSS')
:
category
(term='Sprites')
:
category
(term='Developer')
:
category
(term='Padding and Margins')
:
category
(term='Objects')
:
category
(term='first-child')
:
category
(term='Transparent Border in Photoshop')
:
category
(term='Protocol')
:
category
(term='important')
:
category
(term='-webkit-gradient')
:
category
(term='background-image')
:
category
(term='CSS Bar Graphs')
:
category
(term='Photoshop Macro')
:
category
(term='VPS')
:
category
(term='FTP/SFTP Clients')
:
category
(term='Cookies')
:
category
(term='Recipes')
:
category
(term='Cufon')
:
category
(term='line-height')
:
category
(term='Google Maps')
:
category
(term='Graph')
:
category
(term='Cloud Hosting')
:
category
(term='Twitter')
:
category
(term='Multiple Backgrounds')
:
category
(term='PHP in_array')
:
category
(term='Dave Shea')
:
category
(term='Favicon')
:
category
(term='overflow:auto')
:
category
(term='gutter')
:
category
(term='Windows Driver')
:
category
(term='TCP/IP')
:
category
(term='Reset')
:
category
(term='print_r')
:
category
(term='Tweet')
:
category
(term='Friends of Apache')
:
category
(term='Embedded Styles')
:
category
(term='HTTP Headers')
:
category
(term='CSS3.0')
:
category
(term='Faux Columns')
:
category
(term='HTML Elements')
:
category
(term='CSS Zen Garden')
:
category
(term='CPU')
:
category
(term='background')
:
category
(term='Curl')
:
category
(term='Websites')
:
category
(term='User Style Sheet')
:
category
(term='IE Compatibility Mode')
:
category
(term='GraublauWeb')
:
category
(term='Menu')
:
category
(term='Virtual Private Server')
:
category
(term='LAMP')
:
category
(term='Internet')
:
category
(term='list-style-image')
:
category
(term='CSS Quote Property')
:
category
(term='Tantek Celik')
:
category
(term='Positioning Elements')
:
category
(term='NexStar')
:
category
(term='Definition Lists')
:
category
(term='CSS 3.0 Transforms')
:
category
(term='Drop Cap')
:
category
(term='Blogspot')
:
category
(term='Search')
:
category
(term='API')
:
category
(term='border-radius')
:
category
(term='C#')
:
category
(term='right-margin')
:
category
(term='Firebug Console')
:
category
(term=':before')
:
category
(term='p element')
:
category
(term='Blog Software')
:
category
(term='Data Cells')
:
category
(term='CSS 3.0 last-child')
:
category
(term='E Ink')
:
category
(term='article')
:
category
(term='Primary Keys')
:
category
(term='Pop-ups')
:
category
(term='Compiler')
:
category
(term='Ordered Lists')
:
category
(term='-moz-linear-gradient')
:
category
(term='Blockquotes')
:
category
(term='Google AdSense')
:
category
(term='Windows')
:
category
(term='WebFontConfig')
:
category
(term='Stephen Hawking')
:
category
(term='SELECT')
:
category
(term='Table Layout')
:
category
(term='thead')
:
category
(term='Backward Slash')
:
category
(term='External Stye Sheets')
:
category
(term='Search Engine Optimization')
:
category
(term='Cron Job')
:
category
(term='Hex Codes')
:
category
(term='Events')
:
category
(term='Forms')
:
category
(term='Relative Path')
:
category
(term='Background Property')
:
category
(term='Reader Style Sheet')
:
category
(term='Absolute Positioning')
:
category
(term='photo gallery')
:
category
(term='font-face')
:
category
(term='HTML Forms')
:
category
(term='Negative Margin')
:
category
(term='Origin')
:
category
(term='span')
:
category
(term='left')
:
category
(term='Captioning')
:
category
(term='p')
:
category
(term='MySpace')
:
category
(term='Firefox Personas')
:
category
(term='Margins between Floated and Cleared Elements')
:
category
(term='Styling a Page')
:
category
(term='server side')
:
category
(term='float next to ul')
:
category
(term='Cascade')
:
category
(term='HTML Blockquote')
:
category
(term='CSS Zen Garden Dave Shea')
:
category
(term='Parent-Child Relationship')
:
category
(term='Typekit')
:
category
(term='h1')
:
category
(term='cross-domain')
:
category
(term='Layout')
:
category
(term='Floating LI element')
:
category
(term='Creating MySQL Tables')
:
category
(term='HTTP Request Headers')
:
category
(term='Copyright Symbol')
:
category
(term='Eclipse')
:
category
(term='Search Engine')
:
category
(term='Order')
:
category
(term='CSS Syntax')
:
category
(term='Cross Browser Platforms')
:
category
(term='Navigation Menu')
:
category
(term='NTFS')
:
category
(term='PHP foreach')
:
category
(term='Sprite')
:
category
(term='HTTP GET')
:
category
(term='PHP empty')
:
category
(term='The Flow')
:
category
(term='display:block; Fonts and Text')
:
category
(term='Floats')
:
category
(term='Fluid Rose for Zen Garden')
:
category
(term='wf-loading')
:
category
(term='Background Positioning')
:
category
(term='Software Testing')
:
category
(term='CSS Content Property')
:
category
(term='Oracle')
:
category
(term='IDE')
:
category
(term='Google Search')
:
category
(term='Simple Attribute Selector')
:
category
(term='Selectors')
:
category
(term='The Site')
:
category
(term='Software Design')
:
category
(term='Margin Collapsing')
:
category
(term='Searching RSS Feed')
:
category
(term='CSS 3.0 Multiple Background Images')
:
category
(term='JSON')
:
category
(term='markup')
:
category
(term='Removing Hard Disk in a Laptop')
:
category
(term='Adjusting Blogger Profile Image')
:
category
(term='Image Captioning Tool')
:
category
(term='background-repeat')
:
category
(term='Margin')
:
category
(term='Classes and IDs')
:
category
(term='Disk Partitions')
:
category
(term='header')
:
category
(term='Server')
:
category
(term='CREATE TABLE')
:
category
(term='Relative Positioning')
:
category
(term='Beginner')
:
category
(term='PHP Short Tags')
:
category
(term='Google')
:
category
(term='Framing an Image')
:
category
(term='Functions')
:
category
(term='I'm not a witch')
:
category
(term='The Right To Be Forgotten Initiative')
:
category
(term='Bing')
:
category
(term='IPC')
:
category
(term='Content Delivery Network')
:
category
(term='Linux')
:
category
(term='Author Style Sheet')
:
category
(term='Ubuntu')
:
category
(term='Regular Expression')
:
category
(term='ul')
:
category
(term='Opacity')
:
category
(term='External Enclosure')
:
category
(term='hgroup')
:
category
(term='HTTPS')
:
category
(term='inside')
:
category
(term='Attribute Selectors')
:
category
(term='Technorati')
:
category
(term='img')
:
category
(term='visibility')
:
category
(term='PS Lens Flare')
:
category
(term='localhost')
:
category
(term='Scope')
:
category
(term='DOM')
:
category
(term='Image Replacement')
:
category
(term='RSS')
:
category
(term='Period in a Class/ID Name')
:
category
(term='Adobe Photoshop Tutorials')
:
category
(term='DSL')
:
category
(term='containing block')
:
category
(term='IP Route')
:
category
(term='Style Sheets')
:
category
(term='link')
:
category
(term='Float')
:
category
(term='IE Punches')
:
category
(term='Multi-Column Layout')
:
category
(term='Funny')
:
category
(term='Class')
:
category
(term='PS Mosaic')
:
category
(term='Block Element')
:
category
(term='HTTP Response Headers')
:
category
(term='MySQL')
:
category
(term='Rounding Corners of an Image')
:
category
(term='Input')
:
category
(term='aside')
:
category
(term='Positioning')
:
category
(term='Tables with Fixed Headings')
:
category
(term='th')
:
category
(term='Ubuntu 10.04')
:
category
(term='Browser Default Style Sheet')
:
category
(term='display: none; visibility')
:
category
(term='HTML')
:
category
(term='overflow property')
:
category
(term='list-style-position')
:
category
(term='Floating')
:
category
(term='Google Webfonts')
:
category
(term='text-align')
:
category
(term='multiple class')
:
category
(term='Relational Database')
:
category
(term='Kindle')
:
category
(term='Automated Tools')
:
category
(term='display:block;')
:
category
(term='width')
:
category
(term='Auto Margins')
:
category
(term='background-position')
:
category
(term='RSS Feed')
:
category
(term='Latency')
:
category
(term='overflow')
:
category
(term='Fonts and Text')
:
category
(term='Drop Shadow')
:
category
(term='Apache Server on Local Environment')
:
category
(term='$geo_status')
:
category
(term='Positioning Context')
:
category
(term='C++')
:
category
(term='PS Find Edges')
:
category
(term='display:block; display:none')
:
category
(term='How CSS Works')
:
category
(term='PS Perspective')
:
category
(term='CEO')
:
category
(term='IPv4')
:
category
(term='Dual Stack')
:
category
(term='height')
:
category
(term='Footer')
:
category
(term='XHTML')
:
category
(term='port')
:
category
(term='Flash of Unstyled Text')
:
category
(term='PHP Variable Dump')
:
category
(term='box-shadow')
:
category
(term='Digg')
:
category
(term='Floating IMG element')
:
category
(term='IETF.org')
:
category
(term='Toshiba R500')
:
category
(term='HTML5')
:
category
(term='StumbleUpon')
:
category
(term='Windows 7')
:
category
(term='PHP count')
:
category
(term='Godaddy')
:
category
(term='phpMyAdmin')
:
category
(term='background-color')
:
category
(term='Ethernet')
:
category
(term='border-bottom')
:
category
(term='Loading Times')
:
category
(term='h3')
:
category
(term='Fading Image')
:
category
(term='Microsoft Word')
:
category
(term='text-shadow')
:
category
(term='last-child')
:
category
(term='Caching')
:
category
(term='Art')
:
category
(term='PNG Format')
:
category
(term='MySpace Layout Tutorials')
:
category
(term='Website Design')
:
category
(term='ID')
:
category
(term='mysqli_fetch_array')
:
category
(term='FileZilla')
:
category
(term='SEO')
:
category
(term='HTML Table')
:
category
(term='IE')
:
category
(term='Code Igniter')
:
category
(term='Photoshop Action Palette')
:
category
(term=':after')
:
category
(term='Google GeoCoding')
:
title
(type='text')
:CSS Bakery
subtitle
(type='html')
:An interactive reference guide for Cascading Style Sheets - CSS. Also includes tutorials and information on HTML, PHP, Javascript, Adobe Photoshop and Blogger modifications.
link
(rel='http://schemas.google.com/g/2005#feed')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/posts/default')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default?max-results=10')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/')
:
link
(rel='hub')
(href='http://pubsubhubbub.appspot.com/')
:
link
(rel='next')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default?start-index=11&max-results=10')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
generator
(version='7.00')
(uri='http://www.blogger.com')
:Blogger
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-8705099842058581537
published
:2012-05-07T15:18:00.006-07:00
updated
:2012-05-07T15:23:41.386-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='PHP')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Javascript')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Variables')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Functions')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Events')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Global Object')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Scope')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Chaining')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='C++')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Objects')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Firebug Console')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Console')
:
title
(type='text')
:Introduction to Javascript
content
(type='html')
:![Javascript: Example Code<br>[with jQuery calls]<br>© 2012 Copyright www.cssbakery.com All Rights Reserved](http://pics.cssbakery.com/pics//javascsriptexample2.png)
Javascript is a client-side programming language that runs within the web browser providing access to all parts of a page including the markup, content, and CSS properties. If HTML is structure, CSS is style and presentation, Javascript is the functional arm of a page. Web browsers run Javascript based upon events. (note: for completeness, Javascript does run in other environments besides the web browser. For example, node.js uses Javascript on the server side).
From Javascript, you can also send data to and receive data from the server and use the data you receive to dynamically update part of the page. AJAX which is a technique for making pages more interactive - like when you click a button and it updates a small part of the page rather than doing a complete page reload - is built upon Javascript's capability to do this.
EVENTS AND EVENT ATTRIBUTES
A browser is a busy piece of software. It interfaces with a user via a mouse and keyboard, or touch interface (e.g. iPad) as well as the Internet and web servers. As it's interacting various events occur. The browsers allows your Javascript code to register event handlers that are called when specific events occur. So whenever an event occurs, the browser checks to see if there are event handler callbacks registered for that event. If so, it calls each of the handler for that event, passing in some information on the event context.
- click - onclick
- change - onchange
- submit - onsubmit
- load - onload
- mouseover - onmouseover
- mouseout - onmouseout
- focus - onfocus
- blur - onblur
- select - onselect
- dblclick - ondblclick
- keydown - onkeydown
- keyup - onkeyup
- keypress - onkeypress
- unload - onunload
- mousedown - onmousedown
- mousemove - onmousemove
- mouseup - onmouseup
- reset - onreset
JAVASCRIPT VARIABLES
Javascript has the following built-in datatypes:
You don't declare the type. Javascript figures it out from what you assign to the variable.
- var n=42;
- var s='a string';
- var b=true;
There is no distinction between floating point and integers, they are all just numbers:
You can inspect the type of any variable using the built in 'typeof' operator:
- typeof n => "number"
- typeof s => "string"
- typeof b => "boolean"
If you re-assign the variable with a different type of data, it's type changes:
- b="some string"
- typeof b will now return a "string"
If you haven't defined something, then it's type is: undefined.
- typeof x will return "undefined"
JAVASCRIPT ARRAYS
You can define an array of data like this:
Arrays indexes start at zero:
The data in an array doesn't have to all be the same type:
- var b=[42, 'a string', false]
You can find out how many elements are in an array:
You can also nest arrays:
- var c=[42,'a string',[3,9,2],false]
- c.length => 4
- c[2] => [3,9,2]
- c[2][1] => 9
There are a lot of built-in functions that can operate on arrays. We can look at those in a future post.
JAVASCRIPT OBJECTS
In addition to arrays, Javascript supports Objects, which you can think of as just a collection of data using name-value pairs. Here's an example:
var o = {
'airline':'United',
'flight':'1777',
'airport': 'LAX'
}
o.airline ==> United
Objects can also nest:
var o = {
'airline':'United',
'flight':{
'from':'LAX',
'to':'ORD',
'time:'9am'
}
}
o.flight.from => 'LAX'
So here 'flight' is an object that is nested inside another object, o. When you say o.flight, you are accessing the 'flight' object inside of o. The second dot operator then accesses the 'from' property of the flight object.
The dot operator works a lot like the dot operator in C structs, or C++ classes. It accesses a member of the object data structure. You can actually write the example above differently using square brackets. For example:
o['flight']['from'] => LAX
Using this uncommon syntax, it looks like an associative array. You can run this short example in the Firebug console to see the results yourself:
console.log(o['flight']['from']);
console.log(o.flight.from);
The syntax above that we used to define the variable o is called an object literal in Javascript. There are other ways to create an object but using the curly braces surrounding name-value pairs is the most common and is known as the object literal syntax. Because you are literally saying this is what the object contains. In other words, spelling it out...
FIREBUG JAVASCRIPT CONSOLE
If you use Firefox, chances are you are familiar with its built-in Firebug tool that comes in very handy debugging CSS. Same tool also provides a console for Javascript in which you can run your JS code. Let's try our example by adding member functions to the o object and then run it in the Firebug Console. I pressed on the bottom "Run" button after I pasted my JS into the right pane(red). The results showed up in the left pane(green).
var o = {
'airline':'United',
'flight':{
'from':'ORD',
'to':'CAS',
'time':'6am',
//Return the object's "time" object (just a string in this case)
getTime: function() { return this.time; }
},
// Return the object's "flight" object
getFlight: function() { return this.flight; }
}
console.log(o['flight']['to']);
console.log(o.flight.to);
console.log(o.getFlight().getTime());
When you run this code, you will get:
CAS
CAS
6am
CHAINING
In the above function calls the parser goes left to right, first it sees o.getFlight(), and it calls this function. It then takes the return value from getFlight() and calls getTime() on it. It's as if you did this instead:
var f=o.getFlight();
f.getTime();
The chaining syntax lets you shorten this to just:
o.getFlight().getTime();
Thus eliminating the need for you to use an extra variable to temporarily hold the return value from getFlight().
Objects have some other important features which we will look at in a future post.
CHAIN, CHAIN, CHAIN.... CHAIN OF FOOLS
If you get lost chaining your JS or are unlucky in love, you know which song to sing.
First I'm going to write a simple Javascript object:
var myJSobject = {
// two name-value pairs that are integers
// comma endings instead of semicolons because we are separating the items in
// in a list of properties of an object literal
a: 23,
b: 45,
// two name-value pairs where the returning value is a function
showa: function() {
console.log(this.a);
return this;
},
showb: function() {
console.log(this.b);
// returning an object so it can be used for the next
// call in the chain
return this;
}
};
Chaining Examples:
myJSobject.showa() .... will output the first 24 below
console.log(myJSobject.showa().a) .... will output 24 and 23
console.log("--------------")
console.log(myJSobject.showa().b) .... will output 24, 45
console.log(myJSobject.showa().showb()) ... 24, 45, and the whole object
console.log("--------------")
// a long chain:
myJSobject.showa().showb().showa().b will output 24, 45, 24.
Actual Console Output:
24
24
23
--------------
24
45
24
45
Object { a=23, b=45, showa=function(), more...}
will return a reference to the whole object which is the reason the chaining works because when you return a reference to the whole object you can now call another function on that object or the way I would say is another member function like we say in C++. Another word for it is a method.
--------------
24
45
24
45
The last 45 is an oddball which I believe the console is outputting since that's the last value seen in the code that was run in the console.
THE MEANING OF JAVASCRIPT this
Whenever a function is called, it is passed a hidden first parameter called 'this'. So when you see a function like this one:
function add3(x,y,z) {
return x+y+z;
}
You can think of it as being defined like this:
function myfunc(this,x,y,z) { // you would never write it this way.
return x+y+z;
}
Inside the function you can use the 'this' parameter just like any other parameter.
When you call a "stand alone" function, the this parameter will be a reference to the global object (window). So for the above function call, the 'this' parameter will be equal to window.
If the function is instead part of an object, then the 'this' parameter will be a reference to the current object instance. This is very much like the 'this' parameter passed to member functions of objects in C++, or PHP. In all of these languages, 'this' refers to the current instance of the object that the function is being run on.
this IN PHP
In a PHP object, 'this' is written as '$this', and the object must be referenced via a pointer operator, like this:
class SomePHPclass {
$message = "Hello world";
function sayMessage() {
echo $this->message;
}
}
$phpObj = new SomePHPclass;
$phpObj->sayMessage();
Here's the equivalent example in Javascript:
var SomeJSobject = {
message: "Hello world",
sayMessage: function() {
console.log(this.message);
}
}
SomeJSobject.sayMessage();
// Notice we don't need a new operator to create the object, since that was done
// via the object literal notation.
this IN C++
In C++ it would look something like this:
class SomeCPPclass {
public:
string message;
SomeCPPclass() { this->message = "Hello world"; }
void sayMessage() {
cout << this->message << "\n";
}
}
SomeCPPclass o;
o.sayMessage();
// or:
SomeCPPclass *optr;
optr = new SomeCPPclass;
optr->sayMessage();
In this C++ example, the compiler sets the 'this' pointer so that it points at the object instance in memory. That way, when a member function references this->message, it is going to memory where the object instance resides, and offsetting to the 'message' field.
In Javascript, there are no pointers, but there are references. When you call a function and pass an object, it's passed as a reference. Like a pointer, a reference knows the location in memory where the object resides and allows you to update that object directly. The difference is that the actual underlying pointer that a reference uses is hidden from you so you can't do things like pointer arithmetic. Syntactically you use the dot operator (.) with the Javascript reference, instead of the right arrow operator (->) in C++. Those differences aside, it's basically the same idea.
THE MEANING OF THE TRIPLE EQUAL SIGN
Javascript has both double equal and triple equal comparison operators. The difference is that double equals will try to perform type conversion to the same type and then compare values. Triple equal does not do type conversion, and if the types are different it will say they are not equal. Here are some examples:
3=="3" // true: because "3" is converted to a number before comparison.
3==="3" // false: because one is a number and the other is a string.
JAVASCRIPT GLOBAL OBJECT
Javascript has what's called the "global object". In Browsers, this global object is called "window". Whenever you create a global variable, it gets added to the global object. Here's an example:
//When a variable is declared outside of a function, it's always global
var x=45;
>x
45
>window.x
45
So the global variable 'x' can be referenced by just it's name, or via the global object. You can use either to change it:
>x=x+1
>x
46
>window.x=window.x+1
>x
47
Having this global object is considered a weakness of Javascript because your page could be mixing in Javascript code from various sources and they could collide in their use of global variables.
GLOBAL VS LOCAL SCOPE
You should always declare variables before using them with the 'var' keyword:
var x;
x=10;
Javascript does allow you to implicitly declare a variable by just using it (skipping 'var'):
y=11;
But it's not a good habit.
The problem occurs when you declare variables inside a function. If you do it the right way and use 'var', then the variable is made local to the function, not global. But if you skip the 'var', then any variable declared inside the function becomes global. This is bad. Example:
function f() {
var a=5;
b=6;
}
// call the function:
f()
console.log(a)
undefined
console.log(b)
6
console.log(window.b)
6
JAVASCRIPT FUNCTIONS
In Javascript, functions can be defined like this:
function addThreeNumbers(a,b,c) {
return a+b+c;
}
But they can also be defined like this:
var addThreeNumbers = function(a,b,c) {
return a+b+c;
}
In this second case, the function has been assigned to a variable.
You can then pass that variable as an argument to another function:
function callWith123(f) {
return f(1,2,3);
}
var total = callWith123(addThreeNumbers);
The result will be that total is set to 6.
Here's another way to do this:
var total2 = callWith123( function(a,b,c) { return a+b+c; } );
Here we didn't even bother to assign the function to a variable, we just passed it as a parameter. You will see this pattern a lot when using jQuery.
CALL BY VALUE, CALL BY REFERENCE
In Javascript, if you pass a built-in fundamental type (string, number, boolean) as an argument to a function, it is a call by value. That means the function gets it's own local variable representing the parameter and the value is copied in from the invocation. Here's an example:
function dosomething(a) {
a=10;
alert(a); // a is 10 (but a is local)
}
a=4;
dosomething(a);
alert(a); // a is still 4
If what you are passing in is an Object or Array, it's a different story. Now the call is by reference. (note for completeness: an Array in Javascript is really a type of object). Here's an example:
function dosomething(a) {
a[0] = 10;
alert(a[0]); // a[0] is 10
}
var a=[4,3,2];
dosomething(a);
alert(a[0]); // a[0] is 10 (it was changed by the function call)
// Lets try with an object literal:
function dosomething(o) {
o.a = 10;
alert(o.a); // o.a is 10
}
var o = { a: 4, b: 3, c: 2 };
dosomething(o);
alert(o.a); // o.a is 10 (it was changed by the function call)
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/8705099842058581537/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/05/introduction-to-javascript.html#comment-form')
(title='3 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8705099842058581537')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8705099842058581537')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/05/introduction-to-javascript.html')
(title='Introduction to Javascript')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-8219536020251856271
published
:2012-04-21T10:15:00.000-07:00
updated
:2012-04-21T10:15:08.042-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Fonts and Text')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Typekit')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Adobe')
:
title
(type='text')
:Fonts for the Web: Typekit by Adobe
content
(type='html')
:![Typekit Fonts<br>[Adobe]<br>© 2012 Copyright www.cssbakery.com All Rights Reserved](http://pics.cssbakery.com/pics/typekit.jpg)
Typekit Adobe provides online fonts for websites. You can sign up for different plans here. Here are the steps for using the service:
1. Go to www.typekit.com and Sign In (upper right).
2. In the pulldown at the upper right, select the site to work with.
3. Click "Launch Kit Editor"
4. Find a font and click "Add to Kit"
5. Now in the typekitEditor, add a selector for the new font and click Add.
6. There may be multiple weights and styles available, if so choose the ones you want. Note that the more you add, the more your kit download will grow in size.
7. In your markup, use the selectors that you added for the font.
Also: If you haven't already embedded the kit code in the section of your page that will be using the fonts, then in the typekitEditor, click "Embed Code" (at upper right). Cut and paste the two script sections into your document head.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/8219536020251856271/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/fonts-for-web-typekit-by-adobe.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8219536020251856271')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8219536020251856271')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/fonts-for-web-typekit-by-adobe.html')
(title='Fonts for the Web: Typekit by Adobe')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-8626216592485496306
published
:2012-04-18T18:57:00.004-07:00
updated
:2012-04-24T16:23:48.393-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Server')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Notepad++')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='FileZilla')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='FTP/SFTP Clients')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='SFTP')
:
title
(type='text')
:Using Notepad++ to Edit Files on the Server over SFTP
content
(type='html')
:![[city from moving car]<br>Winter 2010<br>© 2012 Copyright www.cssbakery.com All Rights Reserved](http://pics.cssbakery.com/pics/automaticSFTP2.jpg)
For quick tasks and transfers, FileZilla, an SFTP client, is great and I use it all the time. But manually uploading local files to the server via standalone FTP/SFTP clients can waste time if there's a lot of back and forth. By configuring the built-in SFTP client within Notepad++, you can edit files directly from the server, validate from the browser - Tools option in Firefox Web Developer Add-on gives you direct access to W3C HTML and CSS Validators - and be finished in a flash.
Notepad++, written in C++, is a source code editor, not a word processor.
SETTING IT UP
- In Notepad++ go to the Plugins menu and select NppFTP->Show NppFTP Window.
- Click on the "gear" icon (6th icon from the left).
- Choose "Profile Settings"
- Click the "Add new" button.
- Enter the name of the new profile and click OK.
- Enter the hostname which is the full URL.
- For connection type choose SFTP.
- Leave port number at 22.
- Enter username and password.
- For Initial remote directory, enter: public_html
- Click "Close"
CONNECTING
Click the connection list icon is NppFTP. and choose the server you want to connect to. The first time you connect to a given server you will be asked if you trust the host key. Say yes. You shouldn't be asked again after the first time. Now you should see the directory structure on the server. Choose a file to edit and double click it. Make your edits, and Save the file. Notepad++ will send the changed file up to the server.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/8626216592485496306/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/using-notepad-to-edit-files-on-server.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8626216592485496306')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8626216592485496306')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/using-notepad-to-edit-files-on-server.html')
(title='Using Notepad++ to Edit Files on the Server over SFTP')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-272059688419892767
published
:2012-04-17T13:04:00.014-07:00
updated
:2012-04-18T18:28:26.010-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Microsoft Word')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Windows 7')
:
title
(type='text')
:Changing File Associations in Windows 7
content
(type='html')
:![[unrequited love]<br>Image Source: Warner Brothers](http://pics.cssbakery.com/pics/microsoftword.jpg)
Microsoft Word's been driving me crazy, popping up every time I click on a text file. Thinking I’ll be on WordPad, I am taken to the trial version of Microsoft Word instead, which asks me for a key, and registration that I do not have. You are forced to click through a series of buttons before Microsoft lets you go.
Here are the instructions for changing file associations in Windows 7.
From the Start menu:
- Choose “Default Programs”
- Choose “Associate a file type or protocol with a program”
- Wait while it loads...
- Double Click on the extension (e.g. .doc, .rtf).
- Double Click on program to use: e.g. Wordpad.
- If you don’t see the program you want, click the little pulldown icon on the “Other Programs” line, then choose.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/272059688419892767/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/changing-file-associations-in-windows-7.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/272059688419892767')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/272059688419892767')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/04/changing-file-associations-in-windows-7.html')
(title='Changing File Associations in Windows 7')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-3836132176325692354
published
:2012-03-29T14:20:00.018-07:00
updated
:2012-03-30T09:01:22.815-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Javascript')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='CDN')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='jQuery UI')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Content Delivery Network')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Caching')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='jQuery')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Parallelism')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Latency')
:
title
(type='text')
:jQuery and jQuery UI
content
(type='html')
:
jQuery is a Javascript library that allows you to easily manipulate - compared to writing your own raw Javascript - your HTML document, handle events such as mouse clicks and perform AJAX calls to a server. It hides many cross-browser inconsistencies from you. It's also easy to extend by writing plug-ins.
jQuery UI provides reusable user interface components including things like datepicker, tabbed interface, accordion and dialog boxes. It also makes it easy to create drag and drop functionality. You can customize the appearance of the components - called widgets - using a number of predefined themes or you can roll your own.
When you download these libraries, you have the option of using a minified, smaller version or the more readable version that includes all the whitespace formatting and commentary.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/3836132176325692354/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/jquery-and-jquery-ui.html#comment-form')
(title='1 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/3836132176325692354')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/3836132176325692354')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/jquery-and-jquery-ui.html')
(title='jQuery and jQuery UI')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-7668877477442003004
published
:2012-03-17T21:02:00.062-07:00
updated
:2012-03-29T15:33:14.573-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Background Property')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='background-image')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='DIV')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='CSS 3')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Padding and Margins')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Multiple Backgrounds')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Background Positioning')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='p')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Funny')
:
title
(type='text')
:A Simple Plan
content
(type='html')
:"An attempt to rob a jewelry store failed dramatically when the shop owner shot one of the intruders. The men fled the store and jumped into a Ford minivan, where a waiting driver took them around the corner and they all switched to a Chevy Tahoe. The nervous robbers crashed their SUV into a parked car less than half a mile from the store, sending the four occupants running in different directions. All were quickly apprehended by police. The four uninjured suspects ages ranging from 18 to 22 who did not realize that the police station was only four blocks away from the jewelry store, were booked into the local jail." -Yahoo News
The styles for the quote:
.justforfun_div {
padding-right:51px;
background: url(images/smiley2.png) 97% 12% no-repeat;
background-color: #cdccc7;
border-radius:15px;
}
.justforfun_p {
background-color: #eeeeee;
padding:25px 30px;
font-family: tahoma, sans-serif;
}
The Markup is a paragraph enveloped in a div. We need the div to display the bitmap on the right padding. I did not start out with a bitmap. For me, a plain blue bar was more than enough but then I wanted to show how you would go about placing an image on the blue bar.
Initially I had drawn the bar via a simple border statement. Your first thought may be to place the image on that border but borders in CSS do not allow us to write over them. That's when the extra div for the smiling face came in.
Without any images, this would be even simpler with only a p tag, a right border and a right padding.
<div class="justforfun_div">
<p class="justforfun_p">
"An attempt to rob a jewelry store .... only four blocks away from the jewelry store, were booked into the local jail." <i>-Yahoo News</i>
</p>
</div>
MULTIPLE BACKGROUNDS OF CSS 3
How about outputting two bitmaps one on each side? The styling for the div changes and keep in mind this will only work in a browser that permits the multiple backgrounds of CSS 3.0 in which you list the backgrounds back to back, separating them with a comma. The left padding will give us the blue strip that will contain the new image. I'll just be using the same bitmap but you can use something new.
.justforfun_div {
background: url(images/smiley2.png) 97% 12% no-repeat,url(images/smiley2.png) 3% 90% no-repeat;
background-color: #aecae6;
padding-right: 51px;
padding-left: 51px;
border-radius:15px;
}
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/7668877477442003004/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/simple-plan.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/7668877477442003004')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/7668877477442003004')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/simple-plan.html')
(title='A Simple Plan')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-8293008602668521233
published
:2012-03-04T11:01:00.006-08:00
updated
:2012-03-29T21:13:42.881-07:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Internet Explorer')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Software Testing')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='IE Compatibility Mode')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Cross Browser Platforms')
:
title
(type='text')
:Testing in IE7/IE8 using IE Compatibility Mode
content
(type='html')
:
Microsoft has never supported installing multiple versions of IE on a single PC. (They do provide some virtual machine images for running older version of IE, but that's not the same as having multiple IE versions on the same Windows OS instance.) To run virtual machines, you have to own Windows 7 Pro or Ultimate, it will not work with Windows 7 Home Premium.
But there is still something that everyone can do: You can tell IE to go into "compatibility mode" where it behaves like an older version of IE. For example, if you are running IE8 or IE9, hit the F12 key to bring up Developer Tools. Now go to the "Browser Mode" pull down menu, and select IE 7. Your page will be re-rendered in IE7 mode.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/8293008602668521233/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/testing-for-ie7ie8-using-ie.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8293008602668521233')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/8293008602668521233')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/testing-for-ie7ie8-using-ie.html')
(title='Testing in IE7/IE8 using IE Compatibility Mode')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-263230890613133942
published
:2012-03-01T15:35:00.006-08:00
updated
:2012-03-01T16:08:43.822-08:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Computing News')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Raspberry Pi')
:
title
(type='text')
:A Computer Holga? $35 Raspberry Pi
content
(type='html')
:
Tiny but powerful $35 Raspberry Pi computer causes big stir on launch day. Image Credit: Schematic by Raspberry Pi
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/263230890613133942/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/holga-for-hacker-35-raspberry-pi.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/263230890613133942')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/263230890613133942')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/03/holga-for-hacker-35-raspberry-pi.html')
(title='A Computer Holga? $35 Raspberry Pi')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-2115344725696549271
published
:2012-02-27T10:37:00.005-08:00
updated
:2012-02-27T10:56:11.193-08:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Search Engine')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google Search')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google Privacy')
:
title
(type='text')
:Behind the Scenes When You Click a Search Result
content
(type='html')
:Although not visible to the user, Google takes you on a quick detour every time you click on one of your search results. So Google knows not only what you searched on, but where you went with that search. That would be Ok if they did not store these searches that are associated with you indefinitely in a database on their servers which was the topic of my previous post.
Take for example the following link that is supposed to take me to a newspaper article. The Google search results page certainly looks as if I will directly go to the newspaper's site but that's not what really happens behind the scenes. While the yellow portion of the link is where I chose to go - my actual and eventual destination - the unhighligted portion has been inserted into the link string by Google without my knowledge.
So before I view the newspaper article, I will go through Google where they will collect more information on me although this portion of my journey will be invisible to me.
If you want to see how this works, go to google.com and search on something. You'll get the usual search results page that all of us are familiar with. Right click on one of the links and choose "Copy Link Location". You'll find out that the link is reconstructed such as the one I have above and looks different than what Google's showing you on their search results page.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/2115344725696549271/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/02/behind-scenes-when-you-click-search.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/2115344725696549271')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/2115344725696549271')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/02/behind-scenes-when-you-click-search.html')
(title='Behind the Scenes When You Click a Search Result')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
entry
:
id
:tag:blogger.com,1999:blog-4843224028361594470.post-2476096751657975597
published
:2012-02-11T21:07:00.001-08:00
updated
:2012-02-27T10:40:49.906-08:00
category
(scheme='http://www.blogger.com/atom/ns#')
(term='The Right To Be Forgotten Initiative')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Computing News')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Search Engine')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google Search')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google')
:
category
(scheme='http://www.blogger.com/atom/ns#')
(term='Google Privacy')
:
title
(type='text')
:Google Knows Too Much About You
content
(type='html')
:
![A Boston Whaler<br>[yacht tender]<br>© 2012 Copyright www.cssbakery.com All Rights Reserved](http://pics.cssbakery.com/pics/jbs.jpg)
In her article titled, Google Knows Too Much About You, Ghitis says, "Google has every search you ever made and every e-mail you ever sent or received on Gmail. If you ever used Google while logged in to your account to search for a person, a symptom, a medical side effect, a political idea; all of this is on Google's servers. You've done it, said it, clicked it, searched it, Googled it. You can never undo it or unclick it. It stays there forever."
The tracking is not a revelation to anyone but storing the compiled information indefinitely sounds disturbing. The right to be forgotten initiative may be the way to protect users by providing them with the option to purge search engine data.
link
(rel='replies')
(type='application/atom+xml')
(href='http://www.cssbakery.com/feeds/2476096751657975597/comments/default')
(title='Post Comments')
:
link
(rel='replies')
(type='text/html')
(href='http://www.cssbakery.com/2012/02/google-knows-too-much-about-you.html#comment-form')
(title='0 Comments')
:
link
(rel='edit')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/2476096751657975597')
:
link
(rel='self')
(type='application/atom+xml')
(href='http://www.blogger.com/feeds/4843224028361594470/posts/default/2476096751657975597')
:
link
(rel='alternate')
(type='text/html')
(href='http://www.cssbakery.com/2012/02/google-knows-too-much-about-you.html')
(title='Google Knows Too Much About You')
:
author
:
name
:CSSBakery
uri
:http://www.blogger.com/profile/08756544695899161347
email
:noreply@blogger.com
