Javascript Operators

Operators are the symbols which are used to work with variables. You are already familiar with simple arithmetic operators, plus and minus.

Important: While the x++ and ++x operators both add one to x, they are not identical. x++ increments x after the assignment and ++x before. If x is 4, y = x++ results in y is 4 and x is 5. y = ++x sets y = 5 and x = 5. The x– and –x operators work similar.

If you mix numeric and string values when adding to values together, the result is a string. HTMLcenter + 69 results in HTMLcenter69.



Operators

OPERATOR

x + y (numbers)

x + y (string)

x – y

x * y

x / y

x % y

x++, ++x

x–, –x

-x


WHAT IT DOES

Adds x + y

Adds x and y string

Subtracts y from x

Multiplies x and y

Divides x by y

Remainder of x / y

Adds one to x

Subtracts one from x

Reverses the sign of x

Read More
Javascript Image Rollovers

An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one. Image rollovers are often used for a site’s interface. Currently this is the most popular JavaScript function.

The following script listening shows you how create your own.

Image Rollover Examples:

<html>
<head>
<title>JavaScript Image Rollovers</title></head>
<body>
  <a href="link.html"
   onMouseOver="document.image1.src='onImage.gif'"
   onMouseOut="document.image1.src='outImage.gif'">

   <img src="outImage.gif" name="image1">

  </a>
</body>
</html>

This is the easiest rollover there is. onMouseOver=”document.image1.src=’onImage.gif’” replaces “outImage.gif” with “onImage.gif”. onMouseOut=”document.image1.src=’outImage.gif’” swapps “outImage.gif” back when the user moves his mouse away from it.

The image tag defines the source of the original image and contains the very important “name” option (name=”image1″).

The disadvantages of this kind of rollover are, that although it is simple, it produces an error message in older browsers, such as Netscape 2.0, Internet Explorer 3.0 and earlier and America Online 2.7 browser. Also, because the second image is downloaded from the server at the same time, there can be a delay when the user rolls over the first image, before it’s replaced with the second.

Rather than using the first method, we suggest you take a look on the next script and use this one.

Image Rollover Example:

<html>
<head>
<title>JavaScript Image Rollovers</title>
<script>
<!-- Hide Script
	function move_in(img_name,img_src) {
	document[img_name].src=img_src;
	}

	function move_out(img_name,img_src) {
	document[img_name].src=img_src;
	}
//End Hide Script-->
</script>
</head>
<body>
  <a href="link.html"
   OnMouseOver="move_in('image1','image_on.gif')"
   OnMouseOut="move_out('image1','image_out.gif')">

  <img src="image_out.gif"
   alt="Move your mouse over here!" name="image1">

  </a>
</body>
</html>

We define two functions, “move_in” and “move_out”. Inside those we set the parameters img_name (image name) and img_src (image source) to be able later to identify the image and its rollover.

Next we have to give our image a name (name=”image1″) in order to be able a apply an rollover to it. To complete the rollover we use onMouseOver, to call the function “move_in”, which includes the source for the rollover image, and onMouseOut, to call the function “move_out”, which includes the information for the initial image and kind of resets the situation, when you move your mouse away from the image.

Read More
Javascript Events

Events are actions that the user performs while visiting your site. Submitting a form or moving the mouse over an image are two examples for events.

JavaScript applies commands called Event Handlers to these events. An action of a user is recognized by an Event Handler in your script. For example, if the user clicks the button to abort loading your page, the Event Handler onAbort() will take a notice of it and perform whatever action you have assigned.

When you write a script you don’t have to define scenarios for every possible action there is. An image button will display just fine without using onMouseOver and onMouseOut. But if you want to add a little more excitement to your page’s interface, you should try it.


Event Handlers

EVENT

onAbort

onBlur

onChange

onClick

onError

onFocus

onLoad

onMouseOver

onMouseOut

onSelect

onSubmit

onUnload


WHAT IT HANDLES

User aborted page loading.

User left the object.

User changed the object.

User clicked on an object.

Script encountered an error.

User made an object active.

Object finished page loading.

Cursor moved over an object.

Cursor moved off an object.

User selected content of a page.

User submitted a form.

User left window.

Read More
Javascript Comparisons

Often you want to compare a value of one variable with one of another variable, or the value of a variable against a literal value, for example the value in an if-statement.

Example for a comparison is if you want to compare the value of the day of week to “Sunday”, you can do this by checking todaysDate == “Thursday”.

Don’t mix up ‘=’ with ‘==’, the first is an assignment, the second one is a comparison.

Comparisons

COMPARISON
x == y

x != y

x > y

x >= y

x < y

x <= y

x && y

x || y

!x


WHAT IT DOES
True if x and y are equal

True if x and y are not equal

True if x is greater than y

True if x is greater or equal to y

True if x is less than y

True if x is less or equal to y

True if x and y are true

True if x or y are true

True if x is false

Read More
Javascript Assignments

When you try to put a value in a variable you try to assign the value to the variable. To assign it, you have to use an assignment operator to get the job done. For example, use the equals to create an assignment, such as siteName = “HTMLcenter”.

Besides the equals sign, the other assignment operators serve as shortcuts for modifying the value of a variable. For example the shortcut for x = x + 5 is to use x += 5. If you don’t like the short way, just use the long version, it will not change the outcome, just a little more to type.

Assignments

ASSIGNMENT

x = y

x += y

x -= y

x *= y

x /= y

x %= y


WHAT IT DOES

Sets x to the value of y

x = x + y

x = x – y

x = x * y

x = z / y

x = x % y

Read More
Javascript Alert

Alert boxes are used to provide the user with important information. When users enter your site and you want to make sure that they sign your guestbook, you can use an alert box to remind them. Keep in mind, that overusing this function can get very annoying and your visitors might decide not to come back.

Alert Box Example:

<html>
<head>
<title>Alert Boxes</title>
<script>
<!-- Hide Script
	alert("My Own JavaScript Alert Box!")
//End Hide Script-->
</script>
</head>
<body>
<noscript>
  This page uses JavaScript.
  Please enable it or upgrade your browser.
</noscript>
</body>
</html>

alert(“My Own JavaScript Alert Box!”), that’s the code for your alert box. Put any text inside the quotation marks in alert() and it will pop up next time you load the page.

The JavaScript alert box will always say “JavaScript Application” and there’s no way to code around it. We suppose it’s a security feature so that a site owner can’t trick visitors into something using an alert box.

You might have seen that we used the <noscript> tag above. That’s because in non-JavaScript browsers (JavaScript turned off or not supported) a message will show up saying “This page uses JavaScript. Please enable it or upgrade your browser.”.

Read More
Hello World!

“Hello World!” is generally the first program you learn to write when you start with a programming or scripting language. Are you are new to JavaScript? In this tutorial you will learn how to use the document.write function to place text on a page using JavaScript. This tutorial will also show you, how to hide your scripts from older browsers and how to place comments in your scripts.

Hello World Example:

<html><head><title>Hello World</title></head>

<body>

<script>

 document.write("Hello, World!")

</script>

</body>

</html>

Our script is in between the <script> tags; <script> tells the browser to expect our JavaScript, </script> tells the browser to expect HTML again. You can have as many scripts as you want in your source code, this also means you can therefore run multiple scripts on the same page.

document.write(“Hello, World!”) is your JavaScript. It takes the document window and writes “Hello, World!” into it.

Of course your script can not be interpreted by old browsers, such as Netscape 1.x, Internet Explorer 3.x and earlier, and the America Online browser before version 4. While well working browsers are told to ignore what they do not “understand”, we use a technique to make sure.

Script Listening 1.2:

<html><head><title>Hello World</title></head>

<body>

<script><!-- Hide Script

 document.write("Hello, World!")

//End Hide Script-->

</script>

</body>

</html>

This will look like a comment to older browser and they will simply ignore it and not produce an error. In case you want to display a message to your site?s user if his browser doesn?t support JavaScript, add your message into the <noscript> tag.

The more advanced your scripts get, the more it becomes necessary for you to write comments inside your scripts. For example we could forget what a certain statement means and in order not to need to look it up in a book or here at HTMLcenter, you can write a comment next to it which explains what it does. If you distribute your scripts on your website, you could use comments to write a short notice, that tells who it was written by and where to find it, and other scripts.

Script Listening 1.3:

<html><head><title>Hello World</title></head>

<body>

<script>/* Script name: Hello, World!

   HTMLcenter - JavaScript Tutorial

   Date: 03-07-1999

*/

<!-- Hide Script

 document.write("Hello, World!")

// document.write prints text on the screen

//End Hide Script-->

</script>

</body>

</html>

There are two different ways to write comments. You can use “/*” and “*/” if the comments are more than one single line, instead of writing “//” at the beginning of each. We use “//” if your comments fit on one single line.

This is the end of our “Hello World” tutorial. You learned how to print a message on the screen, how to hide your scripts from older browsers or browsers that have JavaScript turned off, and you learned how to write comments inside your JavaScript. We suggest that you check out our next JavaScript tutorial and keep on scripting!

Please note, that if any of the HTML tags, you have read while going over this tutorial confuse you, or you are not quite sure about their meaning, please check out our HTML tutorials (Basics) at HTMLcenter.

Read More
PHP Form Validation – Part II

This tutorial is a second part of PHP Form Validation tutorial I wrote some time ago. In this part I want to show you how to do email address validation using PHP programming language. PHP is running on a server-side, and this means all validation will be caried out on the web server without dependency on user client-side (web browser, javascript support etc.). It is a good security practice to double the efforts and validate an email on the client side as well. But this time its all about PHP.

Read More
Why Usability?
This tutorial brought to you by Webnauts Net

The Usability Expert Jakob Nielsen says: “On the Web, usability is a necessary condition for survival. If a web site is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a web site, they leave. If a web site’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a web site manual or otherwise spending much time trying to figure out an interface. There are plenty of other web sites available; leaving is the first line of defense when users encounter a difficulty.” -

Full Story: http://www.useit.com/alertbox/20030825.html

Is your web site usable?

There are several definitions for usability, but basically products which have the following 6 characteristics, can be considered as usable.

  • Quick and easy to learn

  • Efficient to use
  • Allows rapid recovery from errors
  • Easy to remember
  • Using is enjoyable
  • Aesthetically pleasing

Does your product have the above characteristics?

User and Provider benefits:

Usability increases benefits for both parties: the User and the web site Provider.

Users benefits:

  • Users are satisfied, instead of being frustrated when interacting over the web site.

  • They achieve their goals effectively and efficiently.
  • They cultivate confidence and trust in the product.

In other words, satisfied users, become loyal, going on using the web site, and also recommend to others.

Providers benefits:

  • Reduced development time and costs.

  • Reduced support costs.
  • Reduced user errors.
  • Reduced training time and costs.
  • Return on Investment.

Usability Can Save Your Company!

John S. Rhodes, Editor and Webmaster at WebWorldPro says: “Data indicate that usability offers a better return on investment than almost any other business action. When times get rough, usability shines. The benefits are huge. Usability is a weapon that can save you money, improve your competitive position, and improve customer loyalty. Now is the time to invest in the research.” -

Full Story: http://webword.com/moving/savecompany.html

After all, making your web site usable, you will make your visitors and your wallet more comfortable and happier!

Read More
Web Credibility
Web usability: It’s old news

If you’ve been developing websites on Mars for the past few years then you’ll be forgiven for not knowing about web usability. You’ll still be creating splash intro pages, having pages with massive download times and using more images than you can shake a stick at. Well, back in Earth these days have long gone and today web usability rules the web development world. For those of you who have been on Mars please read some of the things that Jakob Nielson has to say and try to catch up.

As for the rest of us Earth-based developers, well we’ve learnt a whole bunch about usability and we’re all using it as best we can in our websites. Right, guys? After all, web usability does have huge benefits.

Now that usable websites have become so commonplace, especially among the major web players, it’s time to start looking to the future. Suddenly, a usable website isn’t going to be enough to separate us from our competitors (apart from those using the developers who’ve been based on Mars). There is a solution. It’s two words long. Enter our new best friend…

Web credibility.

What is web credibility & why is it important?

According to BJ Fogg, the world’s leading researcher on web credibility, web credibility is about making your website in such a way that it comes across as trustworthy and knowledgeable. Don’t just take my word for it – read his book if you like. This book is so good that even Jakob Nielson himself (he’s the self-appointed web usability guru for all you Mars-based developers), dedicated a whole alertbox to it.

Fogg will tell you, as can I, and numerous other organisations, that a credible website can reap huge benefits on to your website and your business. So, here’s a few statistics to prove this point:

  • Just 52.8% of web users believe online information to be credible (source: UCLA)
  • Four in five users say that being able to trust the information on a site is very important to them in deciding to visit a website (source: Princeton Survey Research Associates)

So, web credibility’s pretty important then. But how do you implement it on to your website? Fear not, all the answers lie within the realms of this article. Now, before I go further, I must stress that most of this stuff falls under the category of ‘it’s obvious once you know it’. You know, like if someone sets you a puzzle and you can’t do it but when they tell you the answer it’s really obvious. Web credibility is all common sense – you just don’t tend to think about this stuff. So without further ado, here are five guidelines for making a credible website.

1. You must prove there’s a real organisation behind your website

Anyone can put up a website promising to deliver the ‘best service at the lowest prices’. Web users must be able to believe there’s a real organisation behind your website. A few things you can do are:

  • Make it very easy to contact you
  • Link to external websites that reference your organisation
  • Provide staff bios
  • Show photos of the office, staff, products etc.

This basically says that you should have a really good contact us and about us section. Don’t bury your contact us link in some obscure place in the website or on the page. Make out like you really want your site visitors to get in contact with you. In fact, I won’t talk anymore about your contact us page because Miles Burke’s has already written an excellent article about it, The Lost Art of Conversation – Encouraging Contact Online.

As for the about us section, don’t underestimate its importance. Don’t be afraid to show who you are (stand tall and be proud!), what you stand for, what your goals are, and a bit about your history (of the organisation, not you). People will read this stuff – it certainly won’t be the first thing they’ll read on your website but it could be the last thing they read before deciding whether or not to do business with you.

Can you think of other ways you can prove your organisation’s real? Have a look at a website you visit quite often – what is it about this website that you trust?

2. Your website needs to provide ‘sensitive’ information

A website is akin to a one-way conversation between you and your site visitors where you have 100% control over the dialogue. If site users perceive you to be lacking in credibility then you’ll be unable to defend yourself. As such, you must ensure that you answer any questions your site visitors may have, for example:

  • What is the purpose of your organisation?
  • How much does your product cost?
  • What happens if I’m not happy with your service
  • What will you do with my email address once I give it to you?

There are about 35 million websites on the Internet – by 2014 there’ll be an estimated 150 million, not including personal websites. With so many people online and so many websites competing with yours, if you can’t persuade Internet users to be loyal to your website then someone else will.

3. All statements should be backed up by third-party evidence

"We helped our clients achieve an average of 70% growth last year." Really? Well prove it! Every single point you make on your website must, without fail, be backed up with hard evidence – preferably from a third-party website. How else can a reader know for sure that you’re telling the truth?

Client testimonials, for example, are great – they’re even better if the testimonial links to the client’s website. You can improve them even more if the name of the person making the testimonial is linked to their bio on their website. You could notch up even more credibility points if the testimonial itself is on the client’s website and you link to it!

If you’ve won any awards or belong to any industry bodies, then proudly display these emblems too. Even better, have them link to the external website. Better still, would be a direct link to the section of the website showing your membership details or a list of the award winners.

4. There has to be proof that the organisation is growing and has clients

An organisation that can prove it has clients and is experiencing growth instantly achieves credibility. By showing you’ve offered your services plenty of times before, and expect to do so in the future, your organisation comes across as being firmly established within your industry. You can prove this by providing:

  • A client list
  • Testimonials
  • Case studies of your work
  • A latest news section
  • A jobs page
  • Free newsletter
5. Your website needs to have an air of professionalism and confidence

Your website is your organisation’s online representation – it’s essential that it matches up in quality to the rest of your marketing materials. Even if you don’t think your website’s important to the success of your organization, (potential) clients will make judgments about your organisation based on your website.

So, what is the number one most important aspect of Web credibility? The about us section? No. Quality of outbound links? No-siree. Studies have consistently proven that the most important criteria of Web credibility is… the way the website looks. That’s it.

It’s been suggested that this is due to the short amount of time we spend on websites so we tend to rely on initial judgements. Make sure that you create a great first impression by having a crisp, professional layout with sharp graphics. Other good things to do are:

  • Provide some free information to prove your expertise
  • Ensure there are no dead links
  • Send out an automated confirmation e-mail when someone contacts you

There are many more! Just visit any website you perceive to be professional and confident and see what they do.

What next?

Have a look at your website and check to see if it does all this stuff. A handy program to check that there are no broken links is Xenu’s link sleuth. You can also check out Stanford University’s 10 guidelines for credibility and the best online resource to keep up to date with web credibility, the Consumer WebWatch.

This article was written by Trenton Moss. He’s crazy about web accessibility and usability – so crazy that he went and started his own web accessibility and usability consultancy, Webcredible, to help make the Internet a better place for everyone.

Read More

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!