Javascript for Advertisers

History Lesson

-Netscape Navigator ( Live Script then later Javascript )-Internet Explorer ( VbScript then later Jscript )

Early 1990’s

1996- ECMAScript or ECMA-262

Browser Wars

Why Javascript?

-Language of the Web-Huge install base-Very expressive-Very flexible-Universally Hated!

Javascript BasicsVariables

var iAmALocalVariable = "hello";iAmAGlobalVariable = "hello world";

Javascript BasicsFunctions

function iSayHello(){ alert("hello");}

Javascript BasicsParameters

function iSayHelloToYou(name){ alert("hello "+name);}

Javascript BasicsFlow Control

if( theWorldIsAboutToEnd ){ alert("Panic!");}else{ alert("Have a nice cup of tea and a sit down");}

Javascript BasicsLoops

for( var counter = 0; counter < 10; counter+=1 ){ alert("counter is at: "+counter);}

Javascript Basics

document.write("<img src='trackingImage.gif'/>");

Element.onclick= callFunctionHere;

Broswer Interaction

Tracking ExampleScripts

<script src="%h/879366/flashwrite_1_2.js"></script>

<SCRIPT LANGUAGE="JavaScript">…

Tracking ExampleFunction and Variable Declarations

function DCFlash(id,pVM){var swf = "%h/1436076/LW_gifting_728x90.swf";var gif = "%h/1436076/LW_gifting_728x90.gif";var minV = 8;var FWH = ' width="728" height="90" ';var url = escape("%c%u");var fscUrl = url;var fscUrlClickTagFound = false;var wmode = "opaque";var bg = "";var dcallowscriptaccess = "never";

var openWindow = "false";var winW = 0;var winH = 0;var winL = 0;var winT = 0;

var moviePath=swf.substring(0,swf.lastIndexOf("/"));var sm=new Array();

Tracking ExampleSetting up Flash Variables 1/2

var fv='"moviePath='+moviePath+'/'+'&moviepath='+moviePath+'/';

//This bit is essentially ignored:for(i=1;i<sm.length;i++){

if(sm[i]!=""){fv+="&submovie"+i+"="+escape(sm[i]);

}}

var defaultCtVal = escape("%c%u");var ctp=new Array();var ctv=new Array();ctp[0] = "clickTag"; ctv[0] = "";

Setting up Flash Variables 2/2

for(var ctIndex = 0; ctIndex < ctp.length; ctIndex++) {var ctParam = ctp[ctIndex];var ctVal = ctv[ctIndex];if(ctVal != null && typeof(ctVal) ==

'string') {if(ctVal == "") {

ctVal = defaultCtVal;}else {

ctVal = escape("%c" + ctVal);

}if(ctParam.toLowerCase() ==

"clicktag") {fscUrl = ctVal;fscUrlClickTagFound = true;

}else if(!fscUrlClickTagFound) {

fscUrl = ctVal;}fv += "&" + ctParam + "=" + ctVal;

}}

FV now has the value:"moviePath=%h/1436076/&moviepath=%h/1436076/&clickTag=%25c%25u"

function FSWin(){

if((openWindow=="false")&&(id=="DCF0"))alert('openWindow is wrong.');var dcw = 800;var dch = 600;// IEif(!window.innerWidth){

// strict modeif(!(document.documentElement.clientWidth == 0)){

dcw = document.documentElement.clientWidth;dch = document.documentElement.clientHeight;

} else if(document.body) // quirks mode{

dcw = document.body.clientWidth;dch = document.body.clientHeight;

}} else // w3c{

dcw = window.innerWidth;dch = window.innerHeight;

}

if(openWindow=="center"){winL=Math.floor((dcw-winW)/2);winT=Math.floor((dch-winH)/2);

}

window.open(unescape(fscUrl),id,"width="+winW+",height="+winH+",top="+winT+",left="+winL+",status=no,toolbar=no,menubar=no,location=no");}

ua=navigator.userAgent;

if( minV <= pVM && (openWindow =="false" || (ua.indexOf("Mac") < 0 && ua.indexOf("Opera") < 0 ) ) ){

var adcode='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="'+id+'"'+FWH+'>'+'<param name="movie" value="'+swf+'"><param name="flashvars" value='+fv+'><param name="quality" value="high"><param name="wmode" value="'+wmode+'">'+'<param name="base" value="'+swf.substring(0,swf.lastIndexOf("/"))+'"><PARAM NAME="AllowScriptAccess" VALUE="'+dcallowscriptaccess+'">'+bgo+

'<embed src="'+swf+'" flashvars='+fv+bge+FWH+' type="application/x-shockwave-flash" quality="high" swliveconnect="true" wmode="'+wmode+'" name="'+id+'" base="'+

swf.substring(0,swf.lastIndexOf("/"))+'" AllowScriptAccess="'+dcallowscriptaccess+'"></embed></object>';

if(('%eenv!'!="j")&&(typeof dclkFlashWrite!="undefined")){dclkFlashWrite(adcode);

}else{document.write(adcode);}

}

Tracking ExampleNoScript

<noscript><a target="_blank" href="%c%u">

<img src="%h/1436076/LW_gifting_728x90.gif" width="728" height="90" border="0" alt="" galleryimg="no">

</a></noscript>

Spot the Problems!

//Call the functionmyFunction();

var myfunction = function myFunction(){ if iWantToDoThis { doSomethingCrazyExciting( 'iAmAParameter ) doAnotherCrazyExcitingThing() }else{ iDontGetCalled(); }

Hint: there are 6

Resources

-Firefox + Firebug-W3C http://www.w3schools.com/jsref/-http://jsfiddle.net/