MarkLogic buddies up to JavaScript, throws shade at old pal XML

Database company MarkLogic has extended its NoSQL data store to work natively with JavaScript and the popular JSON data exchange format, in addition to the XML format it has long supported.

“All of the same features and functions we have for XML data are available for data that comes in from JSON,” said Joe Pasqua, MarkLogic executive vice president for products.

First-class JavaScript support could make MarkLogic Server more appealing to Web developers, providing an interface that’s more easily understood than the thickets of data conversions that typically accompany XML.

A precursor to the wave of NoSQL database servers that hit the market about six years ago, MarkLogic Server was introduced in 2005 as an alternative to standard SQL-based relational databases. The software used the then much-hyped XML format to store and deliver records.

To use MarkLogic, developers and database administrators had to learn the XML query language, called XQuery, a requirement that might have hampered wider adoption among shops with traditional SQL expertise. Nonetheless, the software was adopted for a number of large projects — such as helping to power the U.S. government’s healthcare.gov site and providing asset management needs for publishing giants Elsevier and Conde Nast.

The latest move to support JavaScript was a necessary one for MarkLogic. Despite the buzz around XML, Web developers largely eschewed the heavyweight XML-based Web services standards then being developed to ferry data across the network. Instead, many gravitated towards the simpler REST (Representational State Transfer) protocol, often in conjunction with JSON, which provided a lightweight alternative to XML.

Earlier releases of the MarkLogic Server came with add-ons that would allow the database system to work with JSON. The new version of MarkLogic, however, natively supports both JavaScript and JSON. That means the database system can store records directly in JSON with no translation layer needed. External programs can make database queries directly through the MarkLogic API (application programming interface).

MarkLogic Server 8 comes with a built-in V8 JavaScript engine from Google, allowing it to act as a Node.js server for JavaScript applications.

“It just doesn’t make sense to slurp out all of the data from the database to a middle tier and do all of the processing there,” Pasqua said. “It makes more sense to take a smaller amount of code, move it into the server, and have it operate there where it’s close to the data.”

MarkLogic isn’t the only database system to catch JSON fever — most traditional enterprise database systems now support the format in some way. The open source PostgreSQL supports the protocol as a native data type, and MongoDB was built from the ground up to use JSON as its primary format.

By offering the full set of processing capabilities it developed for XML, MarkLogic hopes to have an edge in the market.

Despite its ardor for JavaScript, MarkLogic still has a number of goodies for XML users as well. MarkLogic Server 8 is the first version to support “bitemporal data,” or data that records both when a transaction was recorded in the database as well as when the transaction actually took place. Such temporal information is particularly useful to the financial industries, whose moment-to-moment activities are closely monitored by regulators.

Also new for version 8: MarkLogic can make more inferences about a query, returning results that may be relevant but don’t include the actual query terms. That’s thanks to the new support of Sparql, a query language for rich Semantic web documents.

MarkLogic 8 starts at US$8,500 per year for in-house use or $0.99 per hour for a cloud version hosted by Amazon Web Services. As an enticement for new customers, the company is offering free use of an AWS-hosted version for one year.

News Source : (itnews.com) | Image Source : Searched via Google Images

MIT unifies Web development in a single, speedy new language

Building a moderately complex Web page requires understanding a whole stack of technologies, from HTML to JavaScript. Now a researcher from the Massachusetts Institute of Technology (MIT) has wrapped these technologies into a single language that could streamline development, speed up performance and better secure Web sites.

The language, called Ur/Web, provides a way for developers to write pages as self-contained programs. It incorporates many of the most widely used Web technologies, freeing the developer from working with each language individually.

“I think this is a language with potential broad applicability to reduce costs of Web development in many different settings,” said Ur/Web’s author, Adam Chlipala, an MIT computer science assistant professor. “It brings some well-ad understood software engineering advantages to aspects of the Web that have been handled in more ad hoc ways.”

Chlipala will present his work next month at the Association for Computing Machinery’s Symposium on Principles of Programming Languages.

Developing a Web site requires understanding a range of different languages, as well as how they interact.

Hypertext Markup Language (HTML) offers basic formatting for the Web page, but there is a whole range of adjoining Web technologies that are usually deployed as well: Cascading Style Sheets (CSS) provides a way to modify the look of a Web page, and the Extensible Markup Language (XML) structures data for additional processing and classification. JavaScript provides the foundation for writing the business logic for user interactions. And if data is stored in a database, a developer will need to know SQL (Structured Query Language) as well.

Ur/Web encapsulates all the capabilities of such Web development tools within a single language, which is compiled into machine executable code.

Because Ur/Web code is compiled, it can be substantially more efficient to run than code from commonly used Web development languages, Chlipala said.

“In Ur/Web, everything is based on transactions, where a single client request is handled by what looks like an uninterrupted execution of a single function,” Chlipala said. “The language implementation has optimizations in it to support running many requests in parallel, on real servers. But the programmer can pretend everything is a transaction and think in a simpler concurrency model.”

In addition to potentially lessening the cognitive burden for developers, Ur/Web’s top-down approach offers some safety mechanisms that could make Web sites more secure.

The language prohibits unintended interactions among different page elements. With this limit in place, embedded code for supplying ads could not interfere with a calendar widget elsewhere on the page, for example.

Also, like traditional programming languages such as C and Java — and unlike Web languages such as JavaScript — Ur/Web is strongly typed. This means all variables and functions must conform to a preset data type, which limits the ability of an attacker to send maliciously formatted data through a Web form. Ur/Web also supports variable scoping, or the ability to limit where a variable can be called within a program.

The language does have a potential downside. For the average Web developer, Ur/Web could require a “very steep” learning curve, Chlipala admitted. It is what is known as a functional programming language, a style of programming that treats programs as a series of functions, which can be computationally more efficient but harder to learn for a programmer versed in more widely used procedural or object-oriented languages.

Chlipala compared Ur/Web to Haskell, a functional programming language considered esoteric by many programmers yet loved by a dedicated community that praises its computational functionality.

Chlipala is one of a number of MIT researchers who have been pushing the frontiers of software programming languages of late. Another MIT researcher is designing a language called Sketch that can automatically complete sections of code for a program being written. Another MIT effort, dubbed Stack, is designed to identify parts of code that compilers routinely disregard but that nonetheless could be useful.

News Source : (itnews.com) | Image Source : Searched via Google Images

Opera pitches all-you-can-eat app stores to mobile operators

Opera Software thinks users are ready to subscribe to mobile apps just like music and is pitching curated versions of the company’s Mobile Store to operators.

With the Opera Subscription Mobile Store, operators can create their own stores and users pay a weekly fee to download as many apps as they want. The shorter subscription length was chosen to let users dip in and out and to keep the cost down, said Jay Hinman, vice president for Operator Solutions at Opera.

Taking inspiration from the success of the likes of Netflix and Spotify is a good way to try to differentiate a service. But competing with Apple and Google continues to be very difficult, and the all-you-can-eat model doesn’t take into account the popularity of in-app payments, according to Paolo Pescatore, director of multiplay and media at market research company CCS Insight.

But Opera is convinced more competition will be good for both developers and users, according to Hinman. For developers, the mobile operator stores offer more flexibility as they can sell apps for Android, BlackBerry and Java. The public Mobile Store adds iOS and Windows Phone. Users will have the freedom to download as many apps as they like.

The mobile operator stores will be curated versions of Opera’s existing Mobile Store, offering between 10 percent and 30 percent of the public store’s 300,000 apps. The company has already rolled out stores for MTS in Belarus, Russia and the Ukraine as well as for TIM in Brazil, and XL in Indonesia. The cost per week is less than US$1 for all of them.

The number of apps Opera offers still pales in comparison with Google and Apple, which have about 1.47 million and 1.4 million apps and games for their respective OSes, according to app store analytics company Priori Data. But Opera’s 300,000 titles and about 100 million visitors every month are still enough to make it a contender, it said.

News Source : (itnews.com) | Image Source : Searched via Google Images

Google delays demise of old-style Chrome plug-ins

Google on Monday gave traditional Google plug-ins a stay of execution and instead outlined a three-step plan that will finalize their demise in 10 months.

The delay was the latest move in a year-long plan by Google to ban plug-ins built to a decades-old standard, a decision it has pitched as a security enhancement.

NPAPI (Netscape Plug-in Application Programming Interface) is the plug-in standard that harks back to Netscape, the 1990s browser that Microsoft buried in its antitrust-triggering battle over the browser market. NPAPI has long been the most popular plug-in standard, and is still supported by Apple’s Safari, Mozilla’s Firefox and Opera Software’s Opera. (Microsoft’s Internet Explorer (IE) has always relied on its own proprietary ActiveX architecture.)

But NPAPI has been criticized for slack security, with years of plug-in hacking proving opponents right. In response, Google has pursued its own plug-in architecture, dubbed PPAPI (Pepper Plugin API), pronounced “pepper,” that runs code inside a “sandbox,” an anti-exploit technology designed to at least hinder hackers from pushing malware onto machines.

Opera is the only other browser that currently supports NPAPI — not surprising, since it’s built atop the same browser engine that powers Chrome.

In September 2013, Google announced it would pull support for all NPAPI plug-ins from Chrome by the end of 2014. The Mountain View, Calif. company reiterated that pledge in May, although it hedged by applying the word “probably” to the timeline.

The end-of-2014 deadline has now been extended.

In a blog post Monday, Justin Schuh, a Google software engineer, provided an update that spelled out a new three-step process to gradually reduce NPAPI support rather than yank it in one quick move.

“Although plug-in vendors are working hard to move to alternate technologies, a small number of users still rely on plug-ins that haven’t completed the transition,” Schuh said to explain the change.

Those “alternate technologies” for managing and playing video and audio, generating other content, and serving as foundations for Web-based apps are predominately, but not exclusively, based on HTML5 and JavaScript.

In January, Google will discontinue the “whitelist” that currently lets only a handful of NPAPI plug-ins, including Oracle’s Java and Microsoft’s Silverlight, run without popping up a warning. At that point, NPAPI plug-ins will continue to work within Chrome, but all will present a pop-up alert and require user approval.

Come April 2015, Chrome will stop supporting NPAPI plug-ins by default, although users can override the ban. Consumers can switch support back on via the chrome://flags options, while corporations running the browser can do the same through the Google Apps control panel or Windows’ Group Policy. Also in April, Google will pull add-ons that require a NPAPI plug-in from the Chrome Web Store.

Chrome will finally be stripped of all NPAPI support in September 2015, when even an override won’t work.

As Google continues to deprecate NPAPI plug-ins and eventually eliminate support, some users may need to run an alternate browser — such as Firefox, Opera or Safari — to interact with sites that require the older technology.

“What about Web pages, like most — if not all — banks in Brazil, that need Java?” asked one user in a comment appended to Schuh’s blog.

Google offered more information on its Chrome plug-in strategy in a developers guide available on its website.

News Source : (itnews.com) | Image Source : Searched via Google Images

Javascript Tutorial Part 8 – More Forms

Introduction

In the last part I explained a few of the things you can do using forms. In this, the final part, of the JavaScript tutorial I will explain how you can do some other things with your JavaScript forms.

Using The Submit Button

The most common use of forms is to submit data to a script so that it can be processed. This is fine if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form you will need to do things a little differently. The first part you must learn about is the return false; attribute. It can be used as follows:

<form name=”myform” onSubmit=”return false;”>
<input type=”submit” value=”Submit”>
</form>

You can try it out below:

<input type=”submit” value=”Submit”>

What this code does is tell the JavaScript that when the form is submitted it should do nothing. This stops Netscape from refreshing the page (as it would do if there was just a submit button and the form had no action). Now what you can do is to call a function using the submit button:

<form name=”myform” onSubmit=”MyFunction(); return false;”>

Which will tell the browser to run the function ‘MyFunction’ when the Submit button is clicked. You can, of course, use this without the:

return false;

part. This would be useful if, for example, you want to validate a form before it is sent to a CGI script. You would include the form’s action as normal. Then, in the onSubmit part you would call your function to check what had been entered.

Checkboxes

Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.

Checkboxes have two possible values:

<input name=”checkbox” type=”checkbox” value=”checkbox” />

</form>
Unchecked Box<br />
<input name=”checkbox2″ type=”checkbox” value=”checkbox” checked=”checked” />
Checked Box

As there are only two possible values, the JavaScript to refer to a checkbox is slightly different to that of a text box. In the example below the checkbox has been given the name my_checkbox and is in the form example1.

if(window.document.example1.my_checkbox.checked=true)
{
alert(‘The box is checked!’)
}
else
{
window.document.example1.my_checkbox.checked=true;
alert(‘The box was not checked so I have checked it!’);
}

I will now explain what this code does. It will check the value of the checkbox. If the value is ture (which means the checkbox is checked) then it will display an alert box which will tell you the box is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has done.

If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:

window.document.example1.my_checkbox.checked=false;

Remember that, when refering to check boxes you do not need to inclose true or false in quotations.

As with all other form objects you can use onBlur, onChange and onFocus.

Radio Buttons

Radio buttons are usually found in groups like this:

<input name=”radiobutton” type=”radio” value=”radiobutton” />
Blue<br />
<input name=”radiobutton” type=”radio” value=”radiobutton” checked=”checked” />
Red<br />
<input name=”radiobutton” type=”radio” value=”radiobutton” />
Green

Only one button in the group can be checked at a time. Radio buttons work in exactly the same way as a checkbox, having a .checked property which can either be true or false.

Selects and Menus

The two remaining form elements are selects and menus. I will cover menus first. Menus are drop down boxes with several options in them (they are mainly used for things like selecting your country on a form). Selects are really just menus with multiple lines and scrollbars. To show how they work I will show you a quick example of a menu in action and the code for it. For a select box I would just change the height propery. To see the example click here. The code used is below:

<form name=”go” onSubmit=”return false;”>
<select name=”select” onChange=”window.document.location=window.document.go.select.value;”>
<option value=”#” selected>Please Select</option>
<option value=”http://www.microsoft.com”>Microsoft</option&gt;
<option value=”http://www.yahoo.com”>Yahoo!</option&gt;
<option value=”http://www.gowansnet.com”>Gowansnet</option&gt;
</select>
</form>

What this code is doing is, when the select is changed it is telling the page in the browser to change its location to the value of the select box. The location of the document is accessed using:

window.document.location

As you can see, this is could be very useful, both for getting feedback from visitors and for redirecting them (as in the example above).

Javascript Tutorial Part 7 – Forms & Functions

Introduction

In part 6 I showed you how to use If and loops. In this part I will show you how you can manipulate HTML forms with JavaScript to improve your website.

Changing The Value Of A Text Box

Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.

Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):

<form name=”formname”>
</form>

In this form you can place a text box using:

<input type=”text” name=”boxname”>

Once you have this you can create your first JavaScript to refer to a form:

<input type=”text” name=”textfield” />

Move the mouse over here to add some text to the box

This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:

window.document.example1.first_text.value=’Hi there’;

This tells the browser to put ‘Hi there!’ into the value of the item called ‘first_text’ in the form called ‘example1’.

You can also do this with multiline text boxes. You can use
/n
to start a new line.

In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.

Events

Just like links, you can set events for items in a form. They are:

onBlur – Happens when the cursor is moved out of the field
onFocus – Happens when the cursor is moved into the field
onChange – Happens when the field is changed and the cursor moves out of it

These are placed into the code as part of the form’s item for example:

<input type=”text” onBlur=”dothis”>

JavaScript Functions

JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.

Functions take the following form:

function functionname(parameters)
{

}

For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):

function sayhi()
{
alert(Hi there!);
}

Then, anywhere in the text you could place this:

<a href=”#” onMouseOver=”sayhi();”>Say Hi</a>

Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.

Parameters

Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:

function say(what)
{
alert(what);
}

in the head, then:

<a href=”#” onMouseOver=”say(hi);”>Say Hi</a>
<a href=”#” onMouseOver=”say(bye);”>Say Bye</a>

What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word ‘what’. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what=’something’;). You can even do this with multiple pieces of information by separating th
em by commas.

As you can see functions and parameters are very useful.

Javascript Tutorial Part 6 – If and Loops

Introduction

In previous parts I have shown you how to declare a JavaScript, open windows and display information. In this part I will show you how to use two of JavaScripts most important functions, If and Loops.

If

The if function allows you to check to see if something is true or false. For example you could check to see if text entered by a user matches a piece of text you already have (like a password). To show if in action click here.

As you can see this could be very useful for many sites. The code is as follows:

var guess = prompt(“Please guess a number between 1 and 10″,””);
if(guess == 5)
{
alert(‘Correct! I was thinking of 5’);
}
else
{
alert(‘Wrong! I was thinking of 5’);
}

This code is made up of three main parts. The first part which gets the guess from the user, you have used before. This is followed by:

if(guess ==5)

Which is quite self explanitary. It checks to see if the variable guess is equal to 5. The if statement is followed by:

{
alert(‘Correct! I was thinking of 5’);
}

The important part of this is the curly brackets round the alert command. These contain the code which should be executed if the if statement returns ‘true’ (in this example if guess equals 5). The final part is the:

else
{
alert(‘Wrong! I was thinking of 5’);
}

This tells the browser that if the if statement does not return ‘true’ (in this example if guess does not equal 5) to execute the code between the curly brackets.

Together this code makes up the if statement.

More If

There are other conditions you can test with the if statement. Firstly, as well as using numbers you can compare variables or text:

if(variable == variable)

if(variable == “some text”)

As well as doing this you can check to see if one variable is greater than another, less than another or not the same as another:

if(variable < othervariable)
If variable is less than othervariable

if(variable > othervariable)
If variable is greater than othervariable

if(variable <= othervariable)
If variable is less than or equal to othervariable

if(variable >= othervariable)
If variable is greater than or equal to othervariable

if(variable != othervariable)
If variable is not equal to other variable

These can be very useful in your web pages. You can also check to see if two conditions are true before executing code using &&:

if(variable1 == variable2) && (variable1 < variable3)

This will only execute its code if variable1 is equal to variable2 and is less than variable3. You can also run the code if one of the conditions is true:

if(variable1 == variable2) || (variable1 < variable3)

This will only execute its code if variable 1 is equal to variable to or is less than variable3.

While Loops

While loops are pieces of code which will repeat until the condition is met. This is very useful for things like passwords when you want to keep asking the user until they get it correct. For example this code will repeat until the user enters the word ‘hello’:

var password = ‘hello’;
var input = prompt(‘Please enter the password’, ”);
while(input != password)
{
var input= prompt(‘Please enter the password”’);
}

This will continuously loop the code inside the { } until the test input does not equal password is false (the password is correct).

For Loops

For loops are used to do something a set number of times. For example:

for(loop=0; loop < 11; loop++)
{

document.writeln(loop);
}

This will start by setting the variable loop to 0, it will then loop, adding one to the value each time (using the loop++ code) as long as loop is less than 11. They take the form:

for(starting value; test; increment)

These have many uses.

Javascript Tutorial Part 5 – Link Events, Image Swaps & The Taskbar

Introduction

In this part I will show you how to use link events, do image swaps and display things in the browser status bar.

Link Events

A link event is a different way of including JavaScript on your page. Instead of having <script> tags in your HTML you can set JavaScript that will only be executed when certain things happen.

There are three ways of executing some JavaScript code in a link. They are:

onClick
onMouseOver
onMouseOut

They can have many different uses but the most common is for image swaps (mouseover images).

onClick

onClick works in exactly the same way as a standard HTML link. It is executed when someone clicks on a link in a page. It is inserted as follows:

<a href=”#” onClick=”JavaScript Code”>Click Here</a>

As you can see, one main difference is that the href of the link points to a #. This is nothing to do with the JavaScript, it just neabs that, instead of opening a new page, the link will not do anything. You could, of course, include a link in here and you would be able to open a new page AND execute some code at the same time. This can be useful if you want to change the content of more than one browser window or frame at the same time.

onMouseOver and onMouseOut

onMouseOver and onMouseOut work in exactly the same way as onClick except for one major difference with each.

onMouseOver, as the name suggests, will execut the code when the mouse passes over the link. The onMouseOver will execute a piece of code when the mouse moves away from the link. They are used in exactly the same way as onClick.

Rollover Images

This is one of the main ways of using link events. If you have not seen rollover images before, they are images (usually used on navigation bars like the one at the top of this page) and when the mouse moves over the link it changes the image which is displayed.

This is done using a combination of the onMouseOver and onMouseOut events. To explain – when the mouse passes over the link you want the image to change to the new image, when it moves away from the link, the old picture should be displayed again.

The first thing you must do is edit the <img> tag you use to insert the image you want to change. Instead of just having something like this:

<img src=”home.gif” alt=”Home”>

you would have the following:

<img src=”home.gif” alt=”Home” name=”home_button”>

The name for the image could be anything and, like the window names from the last part, is used to refer to the image later on.

Now you have given a name to the image you are using you will want to create the rollover. The first thing you must do is create the image for the rollover and save it. Then create a link round the image. If you don’t want to have a link on the image you can still do a rollover by specifying the href as # which will make the link do nothing eg:

<a href=”#”></a>

The following code will make a mouseover on your image (assuming you inserted the image as shown above and called your mouseover image homeon.gif):

<a href=”index.htm” onMouseOver=”home_button.src=’homeon.gif’;” onMouseOut=”home_button.src=’home.gif’;”><img src=”home.gif” alt=”Home” name=”home_button” border=”0″></a>

I will now explain this code:

Firstly you are creating a standard link to index.htm. Then you are telling the browser that when the mouse moves over the link the image with the name home_button will change to homeon.gif. Then you are telling it that when the mouse moves away from the link to change the image called home_button to home.gif. Finally you are inserting an image called home_button with an alt tag of ‘Home’ and no border round it.

If you have read the last part of the tutorial you will see t
hat onClick, onMouseOver and onMouseOut can be used with text links as well as images in exactly the same way as you did above. This, of course, means that you can create interesting effects by, when the mouse moves over an image, another image changes. This could be very useful for placing a description of a link on a page.

Status Bar

The status bar is the grey bar along the bottom of a web browser where information like, how much the page has loaded and the URL which a link is pointing to appears. You can make your own text apppear in the status bar using the JavaScript you already know using the following code:

window.status=’Your Text In Here’;

You can include this in standard code, onClick, onMouseOver or onMouseOut. This allows you to do things like display a description of a link when the mouse moves over it.

Javascript Tutorial Part 4 – Browser Windows

Introduction

In the last part I showed you how you can use JavaScript to prompt the user for information and how you can display HTML via JavaScript. In this part I will show you how you can create and manipulate browser windows using JavaScript.

Windows and HTML

Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.

Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

<a href=”link.html” target=”_blank”>Click Here</a>

This is the standard HTML code for opening a new window with the page in it.

A less common way of opening a new window is to use:

<a href=”link.html” target=”mywindow”>Click Here</a>

This will create a new window, just like the first set of code, but it will also name the window ‘mywindow’. This means that you can then have:

<a href=”page2.html” target=”mywindow”>Change the page</a>

which, when clicked, will change the page which appears in the window you opened.

Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.

Opening A Window With JavaScript

The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:

window.open

For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:

window.open(‘link.html’,’mywindow’);

This means that a window called ‘mywindow’ will open with the page link.html in it, exactly like with the HTML code above.

This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.

I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:

<a href=”#” onClick=”window.open(‘link.html’,’mywindow’);”>Click Here</a>

As you can see this is just the same window.open command inside an HTML tag.

Manipulating The Window

The main reason of using JavaScript to manipulate windows, though, is because you can set many things on the window which you could never do with HTML. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features:

window.open(‘link.html’,’mywindow’,’window features’);

There are many things you can include here. For example if you wanted a window that only has a location bar and a status bar (the part at the bottom of the browser) then you would use the following code:

window.open(‘link.html’,’mywindow’,’location, status’);

There are many different things you can include in your new window:

Feature	Function
menubar	The File, Edit etc. menus at the top of the browser will be shown
scrollbar	This will show scrollbars at the side of the window if they are needed
width	You can set the width of the window in pixels (see the next section)
height	You can set the height of the window in pixels (see the next section)
toolbar	This will display the browser toolbar with the Back, Stop, Refresh buttons etc.
location	The location bar (where you type in URLs) will be displayed in the browser
resizable	This will allow the window to be resized by the user
directories	This will show the directories in Netscape browsers like ‘Whats new’ and ‘Whats cool’

Examples Of Manipulating Windows

You may be a little confused by all these options so I will show you a few examples of opening a window in JavaScript:

This window will open with a location bar, toolbar and will be resizable:

window.open(‘window1.htm’,’the_first_window’,’location, toolbar, resizable’);

This will open another page in this window:

window.open(‘window2.htm’,’thefirstwindow’);

This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status bar and will scroll if necessary. This is a very commonly used combination:

window.open(‘window1.htm’,’thesecondwindow’,’height=300,width=200,status,scrollbars’);

Javascript Tutorial Part 3 – Displaying Information

Introduction

In the last part I showed you how to display alert boxes and how to get information from the user. I also explained how variables work.

document.writeln

This command is very useful as it will output information to a web page. I will start with a basic example of how to use it:

document.writeln(‘Hello there!’);

This basically tells the JavaScript to write to the document (web page) on a new line the text Hello there!. The really useful bit of this is that you can tell the JavaScript to output text, HTML and variables. First of all I will show you how to output HTML:

document.writeln(‘<font face=”Arial” size=”5″ color=”red”>Hello there!</font>’);

This will display the following on the page:

Hello there!

As you can see, this allows you to just put standard HTML code into a web page using JavaScript. If you can’t see a good reason for this it is not surprising at the moment but next I will introduce variables to the script.

Outputting Variables

If you look at the final example I did in the last part, where I took information from the user and added it to some other text before displaying the output in an alert box. This can also be displayed in the page. Before doing this, though, I will explain a little more about where you can put your JavaScript code.

Up until now all the JavaScrit code has been contained inside the <head> and </head> tags of the HTML document. The reason for this is that the JavaScript will be loaded and executed before the rest of the document. This works fine for most scripts but, as the scripts become more advanced, you may need to have them both in the document and the head. I will use this script to demonstrate.

To put JavaScript in the <body></body> section of the page is exactly the same as putting it in the <head></head> section of the page. I would suggest that you adopt the following way of creating scripts:

Put all your initialization code in the head of the page (like setting variables, prompts, alerts etc.) and then all display code (document.writeln etc.) in the body of the page. This is the code for the new improved version of the example which uses document.writeln:

<html>
<head>
<title>Variable Example</title>
<script>
<!– Start Hide

// Set Variables
var welcome_text = ‘Hello there ‘;
var closing_text = ‘! How are you?’;

// Display prompt
var your_name = prompt(‘Please enter your name’, ‘Your name’);

// Create Output Variable
var output_text = welcome_text + your_name + closing_text;

// End Hide–>
</script>
</head>
<body>
<script>
<!– Start Hide

// Display Text
document.writeln(‘<font face=”Arial” size=”4″>’ + output_text + ‘</font><Br><Br>’);

// End Hide–>
</script>

<a href=”index3.htm#variables”><font face=”Arial”>Back</font></a>
</body>
</html>

You can see this code in action here.

As you can see from the above code, variables are added into document.writeln by using the + signs. There are no quotes round the variable names.

Remote JavaScript

Now you have learnt how to use the document.writeln command you can now start using one of the most useful applications of JavaScript, remote scripting. This allows you to write a JavaScript in a file which can then be ‘called’ from any other page on the web.

This can be used for things on your own site which you may like to update site-wide (like a footer on the bottom of every page) or something used on remote sites (for e
xample newsfeed or some counters).

To insert a remote JavaScript you do the following:

<script language=”JavaScript” src=”http://www.yourdomain.com/javascript.js”&gt;
</script>

Which will then run the JavaScript stored at http://www.yourdomain.com/javascript.js. The .js file is also very simple to make, all you have to do is write your JavaScript (omitting the <script>, </script>, <!–Start Hide and // End Hide–> tags into a simple text file and save it as something.js.

If you want to include information for browsers which do not support JavaScript you will need to put the <noscript></noscript> tags in the HTML, not the JavaScript file.

There is one problem with using remote JavaScript which is that only the recent browsers support it. Some browsers which support JavaScript do not support Remote JavaScript. This makes it advisable not to use this for navigation bars and important parts of your site.