javascript note

Friday, April 29, 2011

form, input, onclick

When do things like this:

<form id="formtest" action="#">
    <p>
      <input id="buttontest" type="button" name="testbutton" value="Button Test"
         onclick="testingButton(this.form)" />

what needs to passed is: this.form

For the called fuction (this case testingButton),
do it like thie:

    function testingButton(note) {
        alert(note.testbutton.value);

It will print, Button Test

Above won't work for multiple inputs.
For multiple inputs, do this:

<form id="formtest" action="#">
    <p>
    <input id="buttontest" type="button" name="testbutton" value="Button Test"
      onclick="testingButton('test')" />

For the called fuction, do it like this:

<script type="text/javascript">
    function testingButton(note) {
        if (note == 'test') {
            alert "here! 2");
        }

.

action="#" in form, what does it mean?

Some thins like this:

<form id="pizzaform" action="#">

What does it mean?
It means that the form won't be submitted,
but it will be handled by script.

Wednesday, April 20, 2011

Wait until page is loaded + Closure and Delay stuff

Note on closure:
Closure are means through which inner function can refer to the variables present in their outer function after their parent function have already terminated.

A statement like,
    document.getElementById("main");
needs to wait until the page is loaded.
Until the page is fully loaded, id like "main" might not exist.

To wait until page is loaded, do this:
    window.onload = loaded;
    function loaded() {

Snippets

    window.onload = loaded;
    function loaded() {

        // find the element with id of 'main'
        var obj = document.getElementById("main");
        // change it's border styling
        obj.style.border = "1px solid red";
        // initialize a call back that will occur in one second
        setTimeout(function() {
            // which will hide the object
            obj.style.display = 'none';
        }, 1000);
    }

.

Monday, April 11, 2011

Regular Expression

Extracting domain name from URL.
Example:

URL: http://www3.braingia.org
Domain Name: braingia.org

JavaScript:

var myString = "http://www3.braingia.org";
var myRegex = /http:\/\/\w+\.(.*)/;
var results = myRegex.exec(myString);
alert(results[1]);

Regular Expression:
/http:\/\/\w+\.(.*)/

The Idea:
What's inside of ( ) will be extracted.
Here's how it works.

http: looks for http:
\/\/ looks for //
   Note that \(back slash) is an escape charactor
\w looks for any numaric charactor
+ makes it continue until it find non-numaric charactor
   Note that /w+ doesn't mean “w”!
\. looks for . Now, it came up to the beginning of braingia.org
.* means match any character, and any and all of the previous charactors
And finally, ( ) extracts what parsed by .*

Posted below are the files just do that

HTML File (index.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel ="stylesheet" type = "text/css" href = "style.css">
    <script type ="text/javascript" src ="extractDomain.js"></script>
</head>
<body>
    <div id="wrapper">
      <div id ="innerWrapper">
        <h2>JavaScript: Learning Regular Expression</h2>
        <div id="ex">
            <p>Using RegExp object, extract domain name from URL</p>
            <p>In this example, it extracts
                <span class = "hilight">braingia.org</span>
                from <span class ="hilight"> http:\\www.braingia.org</span>
            </p>
        </div>
      </div>
    </div>
</body>
</html>

CSS File (style.css)

body {
text-align:center;
font-family:"arial",verdana,sans-serif;
color: gray;
background-color: #f2f2f2;
}
#wrapper{
margin: 0 auto;
width: 900px;
text-align: left;
background: white;
}
#innerWrapper{
margin-left: 20px;
}
#ex{
    color: gray;
}
.hilight{
    color: orangered;
}

JavaScript File (extractDomain.js)

var myString = "http://www3.braingia.org";
var myRegex = /http:\/\/\w+\.(.*)/;
var results = myRegex.exec(myString);
alert(results[1]);

Sunday, April 10, 2011

what is "\&\n\b\s\p" ?

It 's a space (no-breaking-space).

use it like this:

<P>

&nbsp; &nbsp; &nbsp; This first line of text is    supposed to be indented.  However, many browsers    will not render it as intended.

</P>

Saturday, April 9, 2011

This is what ":" do!

var o = {
    r: 'some value',
    t: 'some other value'
};

above means, this.

var o = new Object();
o.r = 'some value';
o.t = 'some other value';