Javascript – Writing Cookie

//Have this on your HTML page

<form action=”#”>
<h1>Enter your name: <input type=”text” id=”nameField”/></h1>
<h1>Enter your name: (without cookie) <input type=”text” /></h1>
</form>

// This is the script

<script>
window.onload = initialize;

function initialize(){
var userName = “”;
if(document.cookie != “”){ userName = document.cookie.split(“=”)[1];}

document.getElementById(“nameField”).value = userName;
document.getElementById(“nameField”).onblur = setCookie;
}

function setCookie(){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth() + 6);

var userName = document.getElementById(“nameField”).value;
document.cookie = “username=” + userName + “;path=/;expires=” + expireDate.toGMTString();
}
</script>

 

Javascript – split() function

<script>
<!–
window.onload = splitString;

function splitString(){
var name = “John Martel Reyes”;
var i=0;
var nameIndex = new Array();

// Split the name by a space
while(nameIndex[i] = name.split(” “)[i]){
document.write(nameIndex[i] + “<br/>”)
i++;
}
}
//
</script>

 

Javascript – get keyboard numeric value

Have this on your HTML page

<p id=”here”></p>

<script>
<!–
window.onkeydown = keyHit;
var thisKey;

function keyHit(evt){

// diff. browsers stores the values in any of these locations, evt.which or window.event.keyCode
if(evt){
thisKey = evt.which;
}else{
thisKey = window.event.keyCode;
}
document.getElementById(“here”).innerHTML = thisKey;
}
//
</script>

 

Javascript Open New Window

window.open(URL, window name, specs, replace)

URL – Optional. Specifies the URL of the page to open.

Window Name – Optional. The name “Title tag of the window”.

Specs – Optional. A comma-separated list of items that give properties to the window.

Here are the list of specs you can use:

channelmode=yes|no|1|0 – Whether or not to display the window in theater mode. Default is no. IE only

directories=yes|no|1|0 – Whether or not to add directory buttons. Default is yes. IE only

fullscreen=yes|no|1|0 – Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only

height=pixels – The height of the window. Min. value is 100

left=pixels – The left position of the window

location=yes|no|1|0 – Whether or not to display the address field. Default is yes

menubar=yes|no|1|0 – Whether or not to display the menu bar. Default is yes

resizable=yes|no|1|0 – Whether or not the window is resizable. Default is yes

scrollbars=yes|no|1|0 – Whether or not to display scroll bars. Default is yes

status=yes|no|1|0 – Whether or not to add a status bar. Default is yes

titlebar=yes|no|1|0 – Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box. Default is yes

toolbar=yes|no|1|0 – Whether or not to display the browser toolbar. Default is yes

top=pixels - The top position of the window. IE only

width=pixels - The width of the window. Min. value is 100

Replace -  Optional.Specifies whether the URL creates a new entry or replaces the current entry in the history list.

• true – URL replaces the current document in the history list.
• false – URL creates a new entry in the history list.

To close the window:

onclick=”window.close()”

 

Using Math.max() and Math.min()

<script>
<!–
window.onload = initialize;

function initialize(){
var i = 10;
var j = 20;

var larger = Math.max(i, j);
var lesser = Math.min(i, j);
document.write(“if i=10 and j=20, “);
document.write(“The larger number is ” + larger + ” and the lesser number is ” + lesser);
}
//
</script>

 

Return offset of the mouse cursor

Add this on your html page

<span>Horizontal Position: </span><p id=”position-x”></p>
<span>Vertical Position: </span><p id=”position-y”></p>

Put this on the head tag

<script>
<!–
document.onmousemove = moveHandler;

function moveHandler(evt){
if(!evt){evt = window.event;}
getPos(evt.clientX, evt.clientY);
}

function getPos(xPos, yPos){
document.getElementById(“position-x”).innerHTML = xPos;
document.getElementById(“position-y”).innerHTML = yPos;
}
//
</script>

 

Javascript – Handle Many Onloads

<script>
<!–HIDE
//Each functions you want to run every onload.
stackEachLoad(init1);
stackEachLoad(init2);
stackEachLoad(init3);

function stackEachLoad(newFunction){
var prevLoad = window.onload;

//checks if prevLoad is a “function” type
if(typeof prevLoad == “function”){
window.onload = function(){
if(prevLoad){prevLoad();}
newFunction();
}
}else{window.onload = newFunction;}
}

function init1(){document.write(“1″);}
function init2(){document.write(“2″);}
function init3(){document.write(“3″);}
//FINISHED
</script>