JavaScript/Intermediate JavaScript

Test Basic JavaScript

Advanced JavaScript

Subject classification: this is a design resource.

Subject classification: this is a technology resource.

Subject classification: this is an information technology resource.

Subject classification: this is an engineering resource.

Educational level: this is a tertiary (university) resource.

Statements

The following statements allow the coder to include further logical direction to the dynamic processing of the document.

If-Statements

If statements are used to tell the browser "if this condition is currently true, do this". An if statement is structured like this:

if (the condition) {
    code to run
}

For example you could make the loaded document (in the browser) prompt for the user to type in their age, and if it is below 21, it would then proceed to the instruction to write an output: "No beer for you!".

The code to embed would be this:

<script>
var age = prompt("How old are you?","");
if (age < 21) {
    document.write("No beer for you!");
};
</script>

Do-while

Do-while statements tell the browser "do this and check if the condition is still true, if it is, continue doing it as long as condition is satisfied". A do-while statement is structured like this:

do {
    code to run
} while (the condition);

For example, you could make the browser continue to prompt for the user to type in their age while it is below 21.

The code to embed would be this:

<script>
var age; //declares the variable
do {
    age = prompt("how old are you?", "");   //pops up the prompt input box.
} while (age < 21);   //returns a fresh prompt from the instruction above if the condition isn't met.
order = prompt("What would you like to drink?", "");   //users over 21 can now continue.
document.write("That'll be " + order + " coming right up."); //writes the output to the document.
</script>

As you might have noticed, do-while statement executes the given code at least once, which means if you run the following code, the code still will execute despite 1 being lesser than 2. This is because the code is run first, and then the condition is checked, if its true, the process is repeated.

<script>
do {
alert("Hello World!"); // this code will still run as condition hasn't been checked yet
} while (2<1) ;

</script>

From the script above we can immediately enter the one-line do-while script for testing. Some applications, browsers, or sites can be tested with Javascript. As an example use the folloing one line of code at writecodeonline.com (or in any equivalent reader):

javascript: var age = prompt("how old are you?",""); if (age < 21) {alert("No beer for you!");} 
else {order = prompt("What would you like to drink?", ""); document.write("That'll be " + order + " coming right up.");};

If you use the Firefox browser, then you can use Firebug to enter a similar one-line script for testing via the console:

var age = prompt("how old are you?",""); if (age < 21) {alert("No beer for you!");}
else {order = prompt("What would you like to drink?", ""); alert("That'll be " + order + " coming right up.");};

In the Firebug console we merely add the script to the command-line and select run. Other command-line consoles will run from the angle brackets: >> "our one-line script" + Enter

Grouping

If you want code to run together (for its purpose as a script) it can be achieved by a number of methods. Putting <script> before the code and </script> after the code is all that is needed to insert a group of instructions. See video example: The New Boston - Basic Syntax.. The alternative object areas for grouping process instructions include via functions, arrays, confirmations, conditional statements, objects, events, sourced scripts, or libraries.

<script>
var  cool = new Array();

cool.push(" vacation");
cool.push(" a");
cool.push(" need");
cool.push("I");
cool.push('This should read "I need a vacation": ')

document.write(cool.pop()); 
document.write(cool.pop()); 
document.write(cool.pop());
document.write(cool.pop());
document.write(cool.pop());

</script>

See examples: idiomatic-style-manifesto

The placement of the script will alter the behavior of the script. If it's within the HTML head-tag of the document the script will be viewed as a resource to be run when an instance of the document is created. Placing the script in the body after all other elements will allow it to be installed last at creation time. A dot-js (.js) file can be sourced by an HTML page as follows:

<script type="text/javascript" src="script.js"></script>

Inside of the JS File the <script></script> tags are not required. The document can call the script in a similar process to walk through instructions on the HTML document page. The script tags need to be placed where its timing will best represent the intended outcomes. Often a coder will install it at the end of the document so that all elements are loaded before running the script.

Running Script Blocks

Script Execution

A script reader is proprietary software. Each reader obeys the standard for JavaScript. Every executed script can behave differently in the different software environments. This is the same as people reading the same writing in different styles or contexts. Checking whether the style befits the script intention is absolutely necessary.

The procedure of a script will have lines of code that request to call new (program) executions. The script call will initiate different procedures beyond the current block. A script call can be just for JavaScript language features, or for anything the coder can request from the environment. As you have seen, with dot-js file sourcing, the execution can jump over to a new block of code.

• An error in the procedure can prevent anything that follows from appearing - the script-reader fails to process further.

Functions

A function allows the block of script to be run independently from other script blocks. The function can be either named for calls to run, or it can be executed by it's position in the script flow/process or logical selection.

• define: block - the group of code-lines that are listed for processing (similar to batch).

(function(){
  alert("This is a self-executing anonymous function that will be executed when the script is processed");
  // The parentheses around and after form an execution of this function. 
})();

Objects

According to the standard (for JavaScript), a script object is an unordered collection of properties each with (zero or more) attributes that determine how each property can be used. JavaScript Objects

Making Returns

When a script has executed a set of instructions the coder may need information returned. A global variable can be set to hold a value. Or another function can be initiated. A statement used for returning information is return;. In execution it can also operate as an exit to the function. It usually, either runs in a functions last-line position, or is placed in a logical break/exit point.

var SeasonScore = new Array;
    var lastweeksPoints = function () {
        var us = 3; //sample inputs
        var them = 4; 
        (us > them)? SeasonScore[1] = "for": SeasonScore[1] = "against";
        return lastweeksPoints = us;
    } ();
    alert("last week's game was " + SeasonScore[1] + ", and we scored " + lastweeksPoints + "goals");

return lastweeksPoints = us; returns the value to be assigned to the variable (where the function was declared).

Implementations

JavaScript is a standard for a programmatic language. Its use depends on the proprietor of the software. Variations will occur between each implementation of the language in new software. All browsers are normally run during extensive testing of any script. Any working script will potentially fail in another browser. New documents, scripts, and elements will also create bugs in the running of previously working snippets and scripts.

Debug

Alert

From the above scripts we've already been using the alert() instruction. This is also an immediate instruction to display what statements are currently in use. With the use of the alert() instruction you can ask for the characteristics of document elements:

javascript: alert(document);

or

javascript: alert(window);

But, for the purpose of the script, the alert() task can establish if/what variable has been kept in memory. The following example calls the variable to an alert:

javascript: var a = 34; alert(a);

Therefore, the coder can work through the chain of instructions. If an instruction doesn't work then an alert() can tell the coder what status is held after the last statement.

<script>
var c = null;
var a = 34;
var b = 45;
alert(c); // the coder examines the first variable setting
c = b * a;
alert(c); // the coder can examine the result before continuing the script.
</script>

When the coder is satisfied with the result they can continue through the script.

<script>
var c = null; var a = 34; var b = 45;
c = b * a;
document.writeln(c); //the coder removes the alerts and continues to process.
</script>

This is simple coder debugging. More complex debugging would employ software that stops at breakpoints.

Try this lesson: Debugging Challenges. Debugging is often no more challenging than rewriting a URL link properly. See also: Web Design/Getting to know JavaScript events

Console Log

Another method of debugging (or coding) is to write to the console.log.

var x = 3; console.log("%d",x);

• To use the console log, open the console log first.
• Also don't forget to add/enable a console log for your browser.

IDE

The IDE aids the JavaScript coder. IDEs format the code, color-highlight the code differences, and handle the project. The project can be run, tested, edited, improved, and checked.

An IDE is unnecessary considering almost any text-editor can save files with the extension dot-html after including a script. As shown earlier, JavaScript can be added to the browser on the fly. Also, many coders and developers will need to use the interface provided by the website host. But, an IDE will create more effective results due to the reduction of errors and ease of use.

Examples of JavaScript IDEs include Aptana Studio, Microsoft Visual Studio and PhpStorm.

Snippets

A collection of partial scripts can be kept as snippets. The coder community would prefer that new coders learn to include snippets for efficiency. A snippet is exactly the same as any of the code that has been included here so far.

Libraries

The web-development community would prefer developers examine the possibilities of using modern online JavaScript libraries with the use of JavaScript. Older JavaScript and HTML may be defunct or detrimental in the newer browsers.

This is an example of jQuery:

<!--  a normal link	 -->
   <a href="http://shouldbealink.com">bad site</a>
<!-- load the jQuery library    -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!--  run a script in the jQuery version of JavaScript  -->
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("misdirection"); // this establishes an alternate instruction for the anchor link.
         event.preventDefault();
       });
     });

   </script>

Coders use lists to follow the available libraries. See: JavaScript_library

Frameworks

Javascript Web application framework are available to develop task-orientated virtual systems. See: Comparison of JavaScript frameworks.

Generated content

Javascript allows an iteration in the script to generate content dynamically. Content includes the elements using HTML tags. Dynamic results can be inserted, appended, replaced, removed, or attributed. The iteration task can be completed programmaticallly as follows:

<script>
var  cool = new Array( " vacation", " a", " need", "I",'This should read "I need a vacation": ' );  // condensed array

var cold = cool.length; //the arrays length
 
for (var i=0; i < cold; i++) { //iterate through the array for output
   
document.write(cool.pop()); 
 
 };

</script>

Test Basic JavaScript

Advanced JavaScript