Three2Tango » Study JavaScript http://www.three2tango.com Points To Ponder : The Latest news from the TechWorld,Automobiles,CellPhones and lots of useful Code Snippets Fri, 27 Jan 2012 09:03:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Study JavaScript Easy Part-4 http://www.three2tango.com/techcorner/study-javascript-easy-part-4.html/ http://www.three2tango.com/techcorner/study-javascript-easy-part-4.html/#comments Fri, 01 May 2009 08:22:37 +0000 LG http://www.three2tango.com/?p=561 Previous
I found a few more things which am posting in here.This is the continuation of JavaScript OBJECTS

Date Objects
These are used to work with date,day,month,year,time etc.

Eg:1(To get the current date)
<html>
<body>
<script type=”text/javascript”>
document.write(“Todays date:-”+Date( ));
</script>
</body>
</html>

Eg:2(To get the day of a week)
<html>
<body>
<script type=”text/javascript”>
var d=new Date();
document.write(“Today it is ” + d.getDay( ));
</script>
</body>
</html>

The above Eg: can be improvised a bit,check the Eg: below.
In Eg:2 the getDay( ) method returns an integer value equivalent to the day,in the Eg:3 it is more specific.

Eg:3
<html>
<body>
<script type=”text/javascript”>
var d=new Date();
var weekday=new Array(7);
weekday[0]=”Sunday”;
weekday[1]=”Monday”;
weekday[2]=”Tuesday”;
weekday[3]=”Wednesday”;
weekday[4]=”Thursday”;
weekday[5]=”Friday”;
weekday[6]=”Saturday”;
document.write(“Today is ” + weekday[d.getDay()]);
</script>
</body>
</html>

Eg:4 (Clock)

<html>
<head>
<script type=”text/javascript”>
function showTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById(‘div1′).innerHTML=h+”:”+m+”:”+s;
t=setTimeout(‘showTime()’,500);
}
function checkTime(i)
{
if (i<10)
{
i=”0″ + i;
}
return i;
}
</script>
</head>

<body onload=”showTime()” >
<div id=”div1″>
</div>
</body>
</html>

Math Objects
Is used for mathematical operations,it includes several mathematical constants and methods.

CONSTANTS:
Math.PI —for the constant 3.14(22/7)
Math.SQRT2—-Square root of 2
Math.LN2——-Natural Log of 2
Math.LN10——Natural Log of 10

METHODS:
Copy the codes to a notepad and save as an html file and see the output.

  • Math.round( )

    • <html>
    <body>
    <script type=”text/javascript”>
    document.write(Math.round(1.60) + “<br />”);
    document.write(Math.round(1.50) + “<br />”);
    document.write(Math.round(1.49) + “<br />”);
    document.write(Math.round(-2.40) + “<br />”);
    document.write(Math.round(-2.60));
    </script>
    </body>
    </html>

  • Math.max( )

    • <html>
    <body>
    <script type=”text/javascript”>
    document.write(Math.max(3,9) + “<br />”);
    document.write(Math.max(-3,6) + “<br />”);
    document.write(Math.max(-1,-8) + “<br />”);
    document.write(Math.max(7.25,7.30));
    </script>
    </body>
    </html>

  • Math.min( )

    • <html>
    <body>
    <script type=”text/javascript”>
    document.write(Math.min(3,4) + “<br />”);
    document.write(Math.min(-2,3) + “<br />”);
    document.write(Math.min(-3,-5) + “<br />”);
    document.write(Math.min(4.25,4.30));
    </script>
    </body>
    </html>

    Goto Previous Post

    ]]>     http://www.three2tango.com/techcorner/study-javascript-easy-part-4.html/feed/ 0     Study JavaScript Easy Part-3 http://www.three2tango.com/techcorner/study-javascript-easy-part-3.html/ http://www.three2tango.com/techcorner/study-javascript-easy-part-3.html/#comments Tue, 14 Apr 2009 10:57:43 +0000 LG http://www.three2tango.com/?p=301 Previous
    JavaScript study Continued….
    Special Symbols in JavaScript
    A backslash ( \ ) is used to add special symbols or characters in a javascript.The special symbols are quotes,newlines,tabs etc etc.

    Eg:1(check difference between both codes)
    document.write(“welcome to “ooty” nice to meet you”);
    document.write(“welcome to\”ooty\” nice to meet you”);

    Given below is a list of special characters that can be added to a text string with the help of a backslash sign.

    \’ Single quote
    \” Double quote
    \n New line
    \b BackSpace
    \& Ampersand

    JavaScript In Depth

    Believe it or not JS is an object oriented language.It allows our own objects and variable types.
    What is an object??
    An object is a special kind of data,it has properties and methods.Length is the property of a string.Methods are the actions that can be performed on objects.To change the size of a string,change its case etc etc are methods.
    I am writing down a few Eg:,which i think would help in one way or the other.

  • String Objects

    • Eg:2(To find the length of a string)
    <html>
    <body>
    <script type=”text/javascript”>
    var txt=”lloyd”;
    document.write(txt.length);
    document.write(“<p>Lowercase: ” + txt.toLowerCase() + “</p>”);
    document.write(“<p>Uppercase: ” + txt.toUpperCase() + “</p>”);
    document.write(“<p>Fontcolor: ” + txt.fontcolor(“Blue”) + “</p>”);
    </script>
    </body>
    </html>

    Result is:
    5
    Lowercase: lloyd
    Uppercase: LLOYD
    Fontcolor: lloyd

    Eg:3(indexOf( ):-To find the position of a word)
    <html>
    <body>
    <script type=”text/javascript”>
    var str=”india is mine”;
    document.write(str.indexOf(“india”) + “<br />”);
    document.write(str.indexOf(“is”) + “<br />”);
    document.write(str.indexOf(“mine”) + “<br />”);
    document.write(str.indexOf(“how”));
    </script>
    </body>
    </html>

    Result:
    0
    6
    9
    -1

    Note:The -1 in the result indicates that no such word in the string.

    Eg:4(replace( ):-To replace characters in a string)
    <html>
    <body>
    <script type=”text/javascript”>
    var str=”Visit Us”;
    document.write(str.replace(/Us/,”http:\\\\www.three2tango.com”));
    </script>
    </body>
    </html>

  • Array Objects

    • The use is same as normal arrays in C,C++.It is used to store multiple values in a single variable.I will come up with Eg: so that it is easily understood.

    Eg:5(How to create an array)
    <html>
    <body>
    <script type=”text/javascript”>
    var mypassion = new Array();
    mypassion[0] = “Dot net”;
    mypassion[1] = “C#”;
    mypassion[2] = “sql”;
    for (i=0;i<mypassion.length;i++)
    {
    document.write(mypassion[i] + “<br />”);
    }
    </script>
    </body>
    </html>

    Eg:6(Concatinating arrays)

    <html>
    <body>
    <script type=”text/javascript”>
    var t = new Array(3);
    t[0] = “I”;
    t[1] = “Love”;
    t[2] = “You”;
    var s = new Array(3);
    s[0] = “Because”;
    s[1] = “You are”;
    s[2] = “Good”;
    document.write(t.concat(s));
    </script>
    </body>
    </html>

    Result :
    I,Love,You,Because,You are,Good

    Note:In the above Eg: t,s are 2 arrays of size 3 each,they are concatenated using the method .”concat( )”.

    Eg:7(To sort an array)
    <html>
    <body>
    <script type=”text/javascript”>
    var arr = new Array(6);
    arr[0] = “vivek<br/>”;
    arr[1] = “dileep<br/>”;
    arr[2] = “shefeek<br/>”;
    arr[3] = “hari<br/>”;
    arr[4] = “arun<br/>”;
    arr[5] = “joseph<br/>”;
    document.write(arr + “<br />” );
    document.write(“sorted list<br/>”)
    document.write(arr.sort());
    </script>
    </body>
    </html>

    Result:

    vivek
    ,dileep
    ,shefeek
    ,hari
    ,arun
    ,joseph

    sorted list
    arun
    ,dileep
    ,hari
    ,joseph
    ,shefeek
    ,vivek

    Note:The method used to sort an array is shown above,it will sort a string array in alphabetical order.

    Goto Prev

    ]]>     http://www.three2tango.com/techcorner/study-javascript-easy-part-3.html/feed/ 0     Javascript study Part-2 http://www.three2tango.com/techcorner/javascript-study-part-2.html/ http://www.three2tango.com/techcorner/javascript-study-part-2.html/#comments Wed, 08 Apr 2009 11:14:57 +0000 LG http://www.three2tango.com/?p=257 Goto Prev Next

    JavaScript study continued. . . . .
    PopUp Boxes
    There are three types of popup boxes
    1)Alert
    Is used to make sure the user is interacting properly and also to make sure information comes through the user.

    Eg:1(to show alert popup box)
    <html>
    <head>
    <title>Untitled Page</title>
    <script type=”text/javascript”>
    function display_alert()
    {
    alert(“I am an alert popup box”+’\n’+”and this is how line breaks are used”);
    }
    </script>
    </head>
    <body>
    <div>
    <input type=”button” onclick=”display_alert()” value=”Show ME” />
    </div>
    </body>
    </html>

    2)Confirm
    This is used when we want the user to confirm,or if we want him to accept something.This popup will come with 2 options OK or CANCEL.

    Eg:2(Confirm popup box)
    <html>
    <head>
    <title>Untitled Page</title>
    <script type=”text/javascript”>
    function display_confirm()
    {
    var loy=confirm(“Press a button”);
    if (loy==true)
    {
    document.write(“You pressed OK!”);
    }
    else
    {
    document.write(“You pressed Cancel!”);
    }
    }
    </script>
    </head>
    <body>
    <div>
    <input type=”button” onclick=”display_confirm()” value=”Show ME” />
    </div>
    </body>
    </html>

    3)Prompt Box
    Is used when we want the user to be prompted before entering a page.This restricts the user from continuing without giving out a data.The prompt box is having 2 options “OK” or “CANCEL” ,OK will return the value in the box and CANCEL returns null.

    Eg:3(Prompt box)
    <html>
    <head>
    <script type=”text/javascript”>
    function display_prompt()
    {
    var name=prompt(“Please enter your name”);
    document.write(“Hello ” + name + “Hope this helps you”);
    }
    </script>
    </head>
    <body>
    <input type=”button” onclick=”display_prompt()” value=”Display a prompt box” />
    </body>
    </html>

    Notes:
    Try these codes in visual studio and find the results,this code works if you save as html also,but “document.write” is not working dont know why.
    FUNCTIONs In JavaScript
    Function can be placed inside the “head” or “body” ,But to make sure it is read and loaded it is wise to place the function inside the “head” tag.A function contains a code which is executed on its call or in the trigger of an event.Eg:1,2,3 consists of functions.

    Function Definition:
    Syntax: for parameterised function
    Function functionname(var1,var2)
    {
    statements
    }

    For a function with no parameters the function name is followed by an opening and closing parenthesis.
    Syntax:
    Function functionname()
    { }

    Eg:4How to use a return statement in a function…

    <html>
    <head>
    <script type=”text/javascript”>
    function myFunction()
    {
    var name=prompt(“Entr name”);
    return (name);
    }
    </script>

    </head>
    <body>
    <script type=”text/javascript”>
    document.write(myFunction());
    </script>
    </body>
    </html>

    Try….Catch
    Another important thing i would like to mention in here is use of try & catch in JavaScript.
    The try…catch statement allows us to debug a code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.

    Eg:5(For try….catch)

    <html>
    <head>
    <script type=”text/javascript”>
    var msg=”";
    function message()
    {
    try
    {
    adddlert(“Welcome guest!”);
    }
    catch(err)
    {
    msg=”There was an error on this page.\n\n”;
    msg+=”Error description: ” + err.description + “\n\n”;
    msg+=”Click OK to continue.\n\n”;
    alert(msg);
    }
    }
    </script>
    </head>
    <body>
    <input type=”button” value=”View message” onclick=”message()” />
    </body>
    </html>

    In the above eg: inside the “try” block the “alert” is mispelled,which will result in showing the alert message inside the “catch” block.Correct it and check it once more.And find the difference.
    Goto Prev Next

    ]]>     http://www.three2tango.com/techcorner/javascript-study-part-2.html/feed/ 1     Study Java Script Easy http://www.three2tango.com/techcorner/study-javascript/study-java-script-easy.html/ http://www.three2tango.com/techcorner/study-javascript/study-java-script-easy.html/#comments Wed, 01 Apr 2009 11:29:17 +0000 LG http://www.three2tango.com/?p=213 JavaScript is a scripting language,designed to add interactivity to an html page.
    The official name of javascript is ECMA script .ECMA-262 is the official JavaScript standard.The standard is based on JavaScript (Netscape) and JScript (Microsoft).

    How to put javascript into an HTML,??
    To insert a JavaScript into an HTML page, we use the <script> tag.Inside the
    <script> tag we use the type attribute to define the scripting language.

    Eg:1

    <body>
    <script type=”text/javascript”>
    document.write(“Hello World!”);
    </script>
    </body>

    JavaScripts can be put in <head> section or <body> also.JavaScripts in the body part will be executed onlt when the page loads.JavaScripts in the head section will be executed only when CALLED.

    Eg:2( Describing JS in <head> section)

    <html>
    <head>
    <script type=”text/javascript”>
    function message()
    {
    alert(“This alert box was called with the onload event”);
    }
    </script>
    </head>
    <body onload=”message()”>
    </body>
    </html>

    Eg:3 (Describing JS in <body> portion)
    same as Eg:1

    Script can be put in both head and body sections.
    Comments in JS is used to increase readability of the code.Single line comments use //.

    Eg4:(Use of single line comments)


    <script type=”text/javascript”>
    // This will write a header:
    document.write(“<h1>This is a header</h1>”);
    </script>

    For multi line commenting (/* */ ) is used.

    Variables in JavaScript
    JavaScript variables are used to hold values or expressions.Naming conventions are normal.Variable names are case sensitive (a and A are different).Variable names must begin with a letter or the underscore character.
    Declaring variable in JavaScript
    You can declare JavaScript variables with the ‘var’ statement:

    Eg:
    var x;
    var sample;
    Redeclaring a JavaScript variable, will not lose its original value.
    Eg:
    var a=5;
    var a;
    The redeclaration of ‘a’ wont lose its value ’5′ in the above Eg.
    Operators in JavaScript
    The operator = is used to assign values, + is used to add values,% is for modulus operation,++ for increment operation,– for decrement operation.

    Comparison Operators:
    <,>,<=,>=,==,!= etc are as usual
    A new thing is “===”,it means exactly equal to value and type.
    I will explain this with an
    Eg:
    x=3;
    x===3 is true.
    x===”3″ is false.
    Eg.5(Use of conditional operator)
    if (age<21)
    document.write(“Cant buy this”);
    Logical Operators:
    &&,||,! are same as that of other languages.
    Conditional Operator:
    This assigns a value to a variable based on a condition.
    Syntax:variablename=(condition)?value1:value2

    Eg:6(if statement)Simply copy this to a notepad save it as an html and open in your browser.

    <html>
    <body>
    <script type=”text/javascript”>
    var d = new Date();
    var time = d.getHours();
    var time1=d.getMinutes();
    if (time < 12 && time1 < 50 )
    {
    document.write(“<b>Good morning</b>”);
    }
    else
    {
    document.write(“<t>Time is past 12.50</t>”);
    }
    </script>
    <p>
    This example demonstrates the If statement.
    </p>
    <p>
    If the time on your browser is less than 12,
    you will get a “Good morning” greeting.
    </p>
    </body>
    </html>

    Notes:
    1) It is case sensitive.
    2) Semicolon is optional in javascript.
    3) It uses curly braces to seperate blocks of code.
    4)If you add a number and a string, the result will be a string.

    Goto   Next

    ]]>     http://www.three2tango.com/techcorner/study-javascript/study-java-script-easy.html/feed/ 1