Great Ideas. Always Flowing.

We are not happy until you are happy. Client satisfaction guaranteed. Whatever your needs and requirements, we have the skills and resources for the job!

Popular Tags...

Tags

SnowCovered Top Sellers

Frustrated over the lack of customization for your user's registration fields? Dynamically setup your DNN Portal with custom registration fields, layout, questions, and other core integration options......

Ultra Video Gallery is a brother product of Ultra Media Gallery, UVG allows you to upload videos in various format and automatically encode them to flv or H264 format, you also can add videos from internet or record live videos from your webcam.

Build high performance, completely customizable data-entry forms and views driven by your DNN and external databases. New built-in tools make it a snap to quickly create data entry forms, data views, and even database tables. Plus, add your own HTML, CSS, Javascript, SQL commands, stored procedures,

The most advanced DotNetNuke shopping cart on the planet. Easy to use e-Commerce, Secure Shopping Cart Software and SEO friendly. B2C / B2B Ecommerce Sites.

One stop solution for events calendar and events registration! FREE DOWNLOAD is available now!

Recently Viewed...

To help you navigate to pages you most recently visited, select from the links below.    
Joomla VS DotNetNuke

JavaScript Getting Started Guide w/ JavaScript examples, error handling, and popular functions...

JavaScript is a straight-forward scripting language used for client-based Web development.  Despite the name, JavaScript is not related to Java other than in its general approach of using a C-like syntax in the language structure. Originally developed at Netscape under the name Mocha, it was later renamed to LiveScript and then JavaScript. Microsoft’s version of the language was sold as JScript to avoid copyright issues.

 

JavaScript is a dynamic, weakly-typed, prototype-based language based on functions. What does that really mean?  A dynamic weakly-typed language allows types that are associated with values, not variables (allowing a variable to change type as needed). A prototype-based language does not use classes to define object properties, but prototypes which include methods.  Finally, function-based languages have functions that are objects with properties themselves (called “first class” functions).

 

JavaScript HTML Tags

 

Coding with JavaScript requires code to be embedded in HTML tags on the client side.  This is done using the <script> HTML tags, with the JavaScript inside identified by the “language” attribute.  A simple JavaScript code chunk looks like this:

 

<script language=”text/JavaScript”>

   document.write(“Hello World!”);

</script>

 

The <script> and </script> tags mark the start and end of the JavaScript code block, and the language is specified as an attribute to allow the correct parsing of the code content.  The document.write method simply echoes back what is in quotation marks. Note that each JavaScript command line has a semicolon at the end.

 

To show this code in a browser, you need to embed it within the <html> and <body> tags, so the actual code to be stored in a file looks like this:

 

<html>

<body>

     <script type="text/javascript">

          document.write("Hello World!");

     </script>

</body>

</html>

 

If you then open this file in a browser, you should see the string appear (you may be prompted to override security restrictions; this is especially true with current versions of most browsers that try to restrict script activity for security reasons):

 

 

A problem with this simple bit of code crops up when it is executed by a browser that does not support JavaScript (or one that has JavaScript disabled).  This will display errors or show the JavaScript code on the browser window, neither of which is good. To prevent this happening, the easy fix is to put the JavaScript code inside HTML comment blocks like this:

 

<script language=”text/JavaScript”>

     <!--

   document.write(“Hello World!”);

// -->

</script>

 

Using comment blocks makes sure that if the browser cannot handle JavaScript, it interprets the contents as a comment and ignores it, removing the error condition.  The JavaScript parser itself knows the HTML comment blocks are used in this manner and also ignores them. JavaScript comments are embedded in C-like syntax, either as a single line or as a block of lines, like this:

 

<script language=”JavaScript”>

     <!--

     /*

This is a comment block

     This line is part of the comment block, too

     */  

document.write(“Hello World!”);

// This is a single line of comment

 

// -->

</script>

 

Usually, the JavaScript code is embedded in the <head> tags of the page, although there can be exceptions. Also keep in mind the code in these examples needs to be within the <html> tags of the page, as well.  The complete code for the example shown above should look like this:

 

<html>

<body>

     <!--

          <script type="text/javascript">

              document.write("Hello World!");

          </script>

     // -->

</body>

</html>

 

And, when executed, this will display the string in browsers that support JavaScript, and ignore the script lines in browsers that do not.

 

Simple JavaScript String Handling

 

In the code snippets above you saw the document.write command. This writes output to the browser window.  You can use multiple document.write commands to build up a single line of output, like this:

 

<script language=”JavaScript”>

   document.write(“Hello ”);

   document.write(“World”);

   document.write(“!”);

</script>

 

This will produce the same output as the code shown earlier, which is to write “Hello World!” to the browser:

 

 

 (Note that for illustration sake the comment tags are dropped in these examples so only the relevant JavaScript code remains; you should add the comment tags, as well as the <body> and <head> tags to your code.)

 

To use line breaks HTML <br> tags are used:

 

<script language=”JavaScript”>

   document.write(“This is a line.<br>”);

   document.write(“As is this.<br>”);

   document.write(“Goodbye!”);

</script>

 

A useful feature of JavaScript is the ability to add other HTML tags to format strings, such as this:

 

<script language=”JavaScript”>

   document.write(“<strong>This is a bold line.</strong><br>”);

   document.write(“Goodbye!”);

</script>

 

When run, this results in the following:

 

Any valid HTML character tag can be used in this way as part of a JavaScript string.

 

To split a string at some character (such as a delimiter), use the split method (part of the String object).  For example, to split the string "Good, Bad, Evil" at the commas and store the result in an array, you would use this code:

 

<script language=”JavaScript”>

   var myString = "Good, Bad, Evil";

   var myArray = myString.split(",";

   document.write("The second part is ", myArray[1]);

</script>

 

This will output the second value of the array created by the split.

 

JavaScript Variables

 

JavaScript uses variables like most other languages.  You simply define the variable name and give it a value.  Since JavaScript is not strongly type-enforced, you can define variable types as part of the definition or a redefinition of the value.  Simple examples of JavaScript code to create variables are:

 

<script language=”JavaScript”>

     var pi=3.14159;

     var goaway = “Goodbye!”;

     var myVar1 = “Tuesday”;

     var myVar2 = 68;

     var myVar3;

</script>

 

You do not have to assign a value to a variable immediately as the last example above shows.  This creates a variable called myVar3 that has no value (and no type) assigned yet. You can reassign a variable value any time, simply by using an assignment operation.

 

To output a variable value, use the document.write method with the variable name.  The last value assigned to the variable will be output:

 

<script language=”JavaScript”>

     var myPi=3;

     myPi=4;

     myPi = 3.14159

     document.write(“Pi is set to “, myPi);  ***check***

</script>

 

This will generate a string of “Pi is set to 3.14159” which reflects the last value assigned to the variable “pi”. (Note that "PI" is a reserved word so "myPi" was used to create the variable.)

 

 

JavaScript allows arrays to be created and managed easily.  To create an array, declare the variable name as an Array type with the number of elements to be included in the array in parentheses. You can then assign values by referring to the element number:

 

<script language=”JavaScript”>

     var myArray = new Array(5);

     myArray[0] = 0.1;

     myArray[1] = 0.2;

     myArray[2] = 0.3;

     myArray[3] = 0.4;

     myArray[4] = 0.5;

</script>

 

Keep in mind that JavaScript uses zero-origin subscripting for arrays, so myArray(0) is the first element in the array and myArray(4) is the fifth (and in the example above, the array has five elements).

 

You can initialize the values of the array when the variable is declared, as shown below for an array with the days of the week names:

 

<script language=”JavaScript”>

     var DOW = new Array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday);

</script>

 

This will create an array with seven elements (the number of arguments sets the array size).  You can call any element using the proper subscript.

Functions and JavaScript

JavaScript functions fall into two categories: those defined as part of the JavaScript language and those the user defines. Functions are used by simply calling them by name with the arguments specified if needed. This is usually done in the <head> section of the page's HTML code. To create a function, define the function by name and enclose the function code in curly braces:

 

<script language=”JavaScript”>

     <!--

     function sayHello() {

          document.write("Hello there!");

     }

     // -->

</script>

 

This function can then be called later in the <body> section of the page by calling the function:

 

<script language=”JavaScript”>

     <!--

     sayHello();

     // -->

</script>

 

To work with arguments in a function, they are added to the function definition and assigned when the function is called:

 

<script language=”JavaScript”>

     <!--

     function doMult(num1, num2) {

          var multresult = num1 * num2;

          document.write(multresult);

     }

     // -->

</script>

 

This is then called in the code in the <body> of the page by providing two parameters:

 

<script language=”JavaScript”>

     <!--

     doMult(2,4);

     // -->

</script>

 

If the number of arguments do not match, errors will result, otherwise, the string is executed from the function definition:

 

 

 

Finally, you can return values from a function.  This is easily shown by modifying the example we just used:

 

<script language=”JavaScript”>

     <!--

     function doMult(num1, num2) {

          var multresult = num1 * num2;

          return multresult;

     }

     // -->

</script>

 

The return keyword specifies what will be returned from the function call, and the calling script can then assign that returned result:

 

<script language=”JavaScript”>

     <!--

     num1 = doMult(2,4);

     document.write(num1);

     // -->

</script>

 

A useful feature of JavaScript is the ability to embed function calls into HTML tags.  This allows a JavaScript action when a user clicks an item on a generated page, for example.  In the code below, clicking a link launches the sayHello function shown earlier.  You can do this in two ways, typically, including using the <a href> tag. The code looks like this:

 

<head>

<script language=”JavaScript”>

     <!--

     function sayHello() {

          window.alert("Hello there!");

     }

     // -->

</script>

</head>

 

<body>

     <a href="javascript:sayHello();">Click here to say hello."

     </a>

</body>

 

This code uses the window.alert function to display a string in a dialog window when executed. When run this code will show the text line in a browser:

 

 

When the href link is clicked, a dialog pops up from the window.alert function:

 

 

Controlling Flow

As with most languages, there are the usual logic control structures provided for JavaScript.  The "if" statement checks to see if a value is true or false. If it is true, any code in curly braces following the condition (embedded in parentheses) is executed.  Optionally, if the condition is false, a second set of statements in curly braces can be executed. For example, the code below checks to see if a variable "x" has a value of 10:

 

<body>

          <script type="text/javascript">

          <!--

          x = 10;

         

          if (x == 10){

              document.write("The current value of x is 10");

          }   

          else {

              document.write("The current value of x is not 10");

          }

          // -->

          </script>

</body>

</html>

 

The variable value is explicitly defined in the code, but usually would come from a calculation or user input.  In this case, the if condition is true so the statement in the first set of curly braces is executed.  If we change the value of x to 9, for example, the condition is false and the second set of statements after the "else" are executed:

 

 

Instead of defining the value in the code, we can let the user choose input and then use the if statement.  We can use the window.confirm function to allow the user to choose either "OK" or "Cancel" and then use an if statement to execute other code based on the user's choice.  The code looks like this:

 

<body>

          <script type="text/javascript">

          <!--

          var myClick = window.confirm("Click OK or Cancel");

         

          if (myClick == true){

              document.write("You clicked OK");

          }   

          else {

              document.write("You clicked Cancel");

          }

          // -->

          </script>

</body>

</html>

 

 

This code hinges on the fact that clicking the OK button in the window.confirm dialog sets the value of the variable to "True".  When run, the window.confirm pops up the dialog:

 

 

If the user clicks the OK button, myClick is set true and the if statement condition evaluates to true:

 

 

The "for" loop is used to repeat execution of one or more statements for a set number of times.  The syntax is C-like:

 

for (initial declarations; execution condition; step){

}

 

The initial declaration is used to set one or more variables used in the for loop.  The execution condition is tested to see whether to execute the code in the curly braces or not, and the step is one or more statements executed every time the for loop completes.  A simple example showing a counter from 1 to 10 helps show how this works.  The complete code looks like this:

 

<html>

<body>

          <script type="text/javascript">

          <!--

         

          for (x = 1; x <= 10; x++){

              document.write("The current value of x is ", x, "<br>");

          }        

 

          // -->

          </script>

</body>

</html>

 

When executed, the browser shows the results of the looping until the value of x reaches 10:

 

 

 

Finally, the while statement allows you to perform one or more statements depending on a condition.  The code below does the same task as the for loop example:

 

<html>

<body>

          <script type="text/javascript">

          <!--

          x = 1;

         

          while (x <= 10){

                   document.write("The value of x is ", x, "<br>");

                   x++;

              }   

         

                   // -->

          </script>

</body>

</html>

 

And when run, this code produces the expected output:

 

 

 

Working with Windows

JavaScript has a number of ways to handle dialogs and new windows.  You've already seen a couple of these statements, such as window.confirm and window.alert.  This code pops up a dialog box using window.alert, and also sets the text at the bottom of the window:

 

<html>

<body>

          <script type="text/javascript">

          <!--

          window.status;

          window.status = "A JavaScript example";

          window.alert("Hi There!");

          // -->

          </script>

</body>

</html>

 

When run, this will set the status message (note that the status messages do not work with Firefox like they do with IE) and display a dialog:

 

 

You saw the window.confirm dialog earlier, which allows a user to select an OK or Cancel button.  To allow the user to enter a value, the window.prompt function is used:

 

<html>

<body>

          <script type="text/javascript">

          <!--

          var myString = window.prompt("Enter your name:");

          document.write("You entered ", myString);      

          // -->

          </script>

</body>

</html>

           

When run, this displays the prompt dialog with the string specified:

 

 

When you enter a string (such as "John") the result is displayed:

 

 

You can open a new browser window from inside JavaScript using the window.open function with the argument specifying the page or file to open.  For example:

 

<html>

<body>

          <script type="text/javascript">

          <!--

          window.open("http://www.google.com", "Google")

          // -->

          </script>

</body>

</html>

 

Keep in mind that security settings on most browsers will prevent a new window from being opened by a script, unless overridden by the user.

 

Handling Cookies

JavaScript can create, modify, and read cookies to store information on a client machine. To create a cookie, a value is assigned to the document.cookie object and a value is assigned to that cookie:

 

document.cookie = "myCookie=" + escape("My Cookie");

 

The escape is used to encode the string so it can be read on any device (it handles special characters properly). This creates a cookie with the value of "myCookie" set to "My Cookie" (the cookie actually stores this as a name/value pair set to "myCookie=My%20Cookie" with the space set to %20 (ASCII value).

 

The cookie can then be read using the split statement to cut the string at the equal sign (you saw the split earlier for strings):

 

var theCookie = document.cookie

var cookieParts = theCookie.split("=");

window.alert("The cookie value is ", unescape(cookieParts[1]));

    

Note the use of unescape to convert the escaped string to a normal string.

 

Wrapup

 

We've only just scratched the surface of JavaScript's language capabilities, but as you have seen so far it is relatively easy to work with and a lot less fussy than other languages.  JavaScript has a wealth of functions built in, and the ability to see the results of your coding in a bro3wser as you go is a welcome feature.  Of course, you can build complex programs in JavaScript, but most developers use it for relatively straight-forward coding tasks that can execute on the user's browser, instead of having to perform those tasks on the server.

 

 

Share the page?

JavaScript Getting Started Guide - share this page - email email - del.icio.us del.icio.us - digg digg - reddit reddit

Feedback Comments

Feedback

SharePoint Web Parts


All Data Springs Web Parts Support WSS 3.0, SharePoint 2007, and SharePoint 2010 Frameworks

Please select license option for each web part you wish to purchase. We highly recommend the SharePoint Bundle to get all Data Springs Web Parts for maximum value!

 

 

      
Cart


Data Springs Sharepoint Bundle

Best Value! The Bundle gives you all 5 web parts in one package at a very attractive price! Best Value! We think you will be very happy with the SharePoint bundle and great price discounts you will receive. With your purchase all of the web parts below will be included.
 
 
 
 

Random Image Web Part

With Random Image for Sharepoint 2007, you can select multiple images to display randomly when the web part loads...
 
 
 
 

Stock Quote Web Part

Giving your site visitors relevant information is critical. With the Data Springs Stock Web Part you can provide your users with up to date financial information
 
 
 
 

Dynamic Image Rotator Web Part

Who would have thought? Adobe Flash® with Sharepoint! The FIRST and ONLY image rotation web part for Sharepoint using Flash Technology from Adobe! The Dynamic Image Rotator displays selected images and then rotates between the images. Several extended and optional features allow you to select the time to rotate each image, fade between
 
 
 
 

SharePoint Charts Web Part

The MOSS Chart Web Part is a web part built by Data Springs for the purpose of rendering several chart types based on data from a SharePoint list on a MOSS 2007 or WSS 3.0 Site
 
 
 
 

Dynamic News Ticker Web Part

Provide current news items with a user-friendly news ticker for your Sharepoint Portal. With millions of web sites offering information you need a fun way to display information and the solution is Flash News Ticker....
 
 
 
 

Tailored Text Web Part

 Tailored Text Web Part allows you to add text/html to your web site that can be different for anonymous users, registered users,  and even individual users specifically.

 
 
 
 

Dynamic Views Web Part

Dynamic Views is an excellent tool to:
Personalization allows you to go the extra mile in communicating or connecting one to one with your clients. When it comes to technology and web site content, you now have the power to leverage this personalization directly with your users on your DotNetNuke® site

 
 
 
 

Dynamic Login Web Part

Your site content isn't vanilla, so why is your portal's login?

Add pizazz and functionality with Dynamic Login! Use custom templates, localization, redirection rules for various roles and many more features!
 
 
 
 


DNN Modules

DotNetNuke Modules


Data Springs offers cost-saving packages that fit your needs:

Purchase the Collection 6.0

Data Springs Collection 6.0

An entire tool chest to quickly build websites and construct complex, powerful, and relevant workflow. Elevate your design with custom registration, forms, displays, reports, user management, payments, Google maps,, SQL updates, and so much more!

Best Value!  Includes all DotNetNuke modules by Data Springs.

$ 495.00

Data Springs User Management Suite 3.0

All the tools you need to enhance user & profile management from A to Z!.  A comprehensive package with 5 feature-packed modules that offer extensive admin controls and easy user interface geared towards an effective and growth-oriented site!  .... more

 

Includes:  Dynamic Registration     Dynamic Login   ♦   Interactive User Import     Dynamic User Directory   ♦   Renewal Reminder    A value of more than $630.00!

 $ 369.00

 

 

Check out all our individual modules!

 

 View Dynamic Registration

Dynamic Registration 5.0 (new release on 6/12/2013)

Need custom fields and workflow for your registration? Get all the power and ease of use to create the registration and profile management just the way you want it... more

$ 199.00

View Dynamic Forms

Dynamic Forms 4.1 (released 5/16/2012)

Whether it's for marketing, sales, contact forms, scheduling, information requests, surveys, or to simply better understand your customer needs, the possibilities for creating powerfully effective forms are now easy and endless! ... more

$ 195.00

 

Dynamic Views 3.1 (new on 2/7/2013)

Now have an easy yet feature-rich reporting module with custom defined display templates and unlimited search options from  Dynamic Forms or any data source like a table, view or custom query!  ... more

$ 169.00

 View Dynamic Login Module

Dynamic Login 4.1 (released 10/19/2011)

Add pizazz and functionality to your site login! Dynamic Login gives you custom templates, localization, redirection rules, SQL Validation, and Single SignOn. Want more? How about Facebook Connect, LinkedIN, and Twitter, too? Your login has never been so exciting!.   ... more

$ 149.00

 View Interactive User Import

Interactive User Import 3.0 (released 8/17/2011)

Interactive User Import provides you with the functionality to easily and quickly import users into DotNetNuke and Dynamic Registration, through a streamlined and well-documented wizard that includes many advanced features... more

$ 149.00

 View Dynamic User Directory

Dynamic User Directory 4.1 (released 4/26/2012)

The perfect compliment for extending your portals users and community! An essential ingredient for managing dynamic user information, is being able to sort key fields and create useful user directories and custom report information... more

$ 179.00

 View Renewal Reminder

Renewal Reminder 1.3

Renewal Reminder provides you with the functionality to setup email notifications for users that their security role will soon expire. After installing your renewal / security role reminder module you can now setup scheduled notifications to be distributed to your users... more

$ 129.99
 View Opt In Email

Opt In Email 5.0 (new on 4/17/2013)

'Relationship Building' and 'Communication' are two essential nuts and bolts for a business to prosper. This module allows you to bridge both of these and easily generate continuous awareness of your web site, products and services. Your prospects and customers will greatly appreciate this feature... more

$ 179.00

 View Tailored Text

Tailored Text 3.0

Personalization allows you to go the extra mile in communicating or connecting one to one with your clients. Leverage the power personalized content on your DotNetNuke site... more

$ 109.99
 View Stock Quote

Stock Quote 1.2

Giving your site visitors relevant information is critical. With the Data Springs Stock Module you can provide your users with up to date financial information... more

$ 109.99
 View Presentation Archive

Presentation Archive 2.0

With so much content on your web site, its important to give users an easy method for finding and retrieving content. Presentation Archive allows you to categorize, organize and present content within your DotNetNuke site for presentations, educational material, videos, and almost any document... more

$ 124.99
 View Real Estate

Real Estate 2.3

Real Estate 2.3 is a feature rich and user-friendly module that allows your portal users the ability to create real estate listings on your site... more

$ 149.99
 View Dynamic Image Rotator

Dynamic Image Rotator 3.3

Dynamic Image Rotator displays selected images and then rotates between the images using the Adobe® Flash® platform.  Several extended and optional features allow you to select the time to rotate each image, fade between images, and also display the images in either sequental or random order... more

$49.99
 View Info Pics Gallery

Info Pics Gallery

The Info Pics Gallery Module allows you to display thumbnail pictures with information to the user about each picture, along with a detailed description regarding the set of pictures and several other optional links... more

 $ 69.99
 View Testimonials Module

Testimonials

The Testimonials Module allows you to display customer testimonials on your site, as well as an easy method for users to submit testimonials about your web site, services, or products... more

 $ 49.99
 View Dynamic Info Cube

Dynamic Info Cube

Take your web site out of the box! Looking for a creative and interesting way to showcase information and content on your site? With millions of web sites offering information you need a fun way to display information and the solution is Dynamic Info Cube... more

$ 99.95
 Search Engine Optimization Cloud Module for DotNetNuke

Dynamic Tags

Nearly every web site developer would agree that search engine optimization is one of key aspects to a successful web site. Part of search engine optimization requires providing search engines that crawl your web site with appropriate and meaningful content... more

$ 69.99
 View Page Tags

Page Tags

'Page Tags' pulls in search terms that users searched to find the current page. There are many benefits to displaying these search words that delivered the user to the site, find our more details ... more

$ 59.99
 Random Rounded Images

Random Rounded Images

Random Rounded Images is an easy to use upgraded version of the images module included with DNN. With RRI, you can select multiple images to display randomly when the module loads. For example, you can add 10 images to the module, and each time you refresh or load the page one of those images will... more

$ 49.99
 View Back on Track

Back on Track

Giving your site visitors fast access to areas of interest is vital to your web site's ease of use and ultimately - sales potential... more

$ 99.99
 

Dynamic News Ticker 2.0

Dynamic News Ticker allows you to scroll through news items in a horizontal or veritical direction with administrative features that allow you to easily customize the look of your news ticker. Each instance of Dynamic News Ticker can be set up to have different sizes, scroll directions, scroll speed... more

$ 39.00
 View Quick Poll

Quick Poll

Give your users a voice, while also providing an important way for you to gather opinions from your users and measure visitors' responses to questions on your site! Polls are significant because they can provide a way for your web site visitors to share ideas and vote on topics of your choosing... more

$ 39.99
 View Flash Contacts

Dynamic Contacts 2.0

Dynamic Contacts is the fastest and easiest way you can help visitors of your website connect with your key personnel... more

$ 79.99
     

 

 

 
 

Join our mailing list...

Get current news and events the easy way
 
 
   
Subscribe Me

Recent Blogs...

 
Copyright 2005 - 2011 by Data Springs, Inc.