Tutorials in ‘Java script’ Category

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

Introduction to JavaScript Pop Up Boxes

Boxes of joy
As annoying as they may be, JavaScript popup boxes are a good way to alert users to some relevant information, confirm a user’s decision, or collect some text input from a user. JavaScript offers three popup boxes to help us accomplish this. They are the alert box, the confirm box, and the prompt box which prompts the user to input some text. Let’s take a closer look at what these boxes can do for us.

The alert box
If you want to be absolutely sure that some information gets through to a user, you may want to try using an alert box. This is a simple (slightly annoying) but effective way of getting your message across. The syntax for an alert box is alert(“……..”); and is very easy to implement in your code. Have a look at the following code:

<html><head><title> Alert Boxes </title><script type="text/javascript">function showAlertBox(){alert(" Yay! My first alert box ") };</script></head><body><input type="button" onclick="showAlertBox();" value="Show Alert box" /></body></html>

As you can see above, we’ve created a function called ShowAlertBox(). All this function will do is make an alert box popup with the text that we specify in our alert() method. With an alert box, the user will have to click ok to proceed. Save the above code to your desktop as alertboxes.html, load it up into your browser, and click the button. You should see an alert box appear in the center of the screen. Fun, right? Let’s move on to our next oh so amazing box, the confirm box.

The Confirm Box
Similar to the alert box, the confirm box will pop up in the center of the screen once it is called. The main difference is that, unlike the alert box, the confirm box allows a user to select yes or no, and will return a value of true or false based on which option they’ve selected. Combining this with the alert box and an if statement, our next code example will popup a confirm box for the user,and then alert them to which option they’ve chosen. Here’s what the code looks like:

<html><head><title>Confirm Boxes </title><script type="text/javascript">function showConfirmBox(){var c = confirm("Would you like to continue"); if (confirm == true) { alert ("You clicked Ok"); } else { alert("Ahhh, you clicked Cancel"); }};</script></head><body><input type="button" onclick="showConfirmBox()" value="Show Confirm box" /></body></html>
As you can see, this is very similar to the alert() function, except, once again, it gives the user an option to select either OK or Cancel.

The Prompt Box

The prompt box creates a popup box that a user may enter text into. If we set the value of the prompt box to a variable, we can take the text that the user provides and use that to manipulate our program. In this example, we’ll prompt the user to enter their name. Once that’s done, we’ll take the name and write it back out to the screen with a warm and fuzzy greeting using document.write(). Let’s take a look at the code to see how it works:

<html><head><title>Prompt Boxes </title><script type="text/javascript">function getName(){ var name = prompt("What is your name"); var theDiv = document.getElementById(”greeting”); theDiv.innerHTML = "Hello, " + name + " How are you today?";};</script></head><body><div id="greeting"> </div><input type="button" onclick="getName()" value="Enter your name" /></body></html>

Running this script and pressing the “enter your name” button will result in an oh-so-awesome prompt box being presented to you, and if you enter your name, you’ll be cordially greeted by the browser. Two quick things to point out. One is that I’ve used the getElementById() method on the document. This tells JavaScript to scan the entire current document and find any element with the ID that I’ve specified. Get used to this one, you’ll use it a lot. In our case, the method returns the div element with the ID of greeting. Once JavaScript finds the right div, it takes the name from our prompt box and injects it, along with some other friendly text, into the div via the innerHTML attribute.

Final thoughts

We’ve now seen how we can alert a visitor to something important in our program, how to confirm that they’d like to perform an action, and how to accept a text input from them. These tools will come in plenty handy in the future, and are just plain fun to mess around with anyway. Now, I think it’s a good time to learn about unobtrusive javascript. This notion basically states to you should never use JavaScript to be a jerk. Repeated pop ups and alerts will only shy your users away, so be sure to implement these techniques only when needed. Join me in my next tutorial for a more thorough look at JavaScript functions, what they accomplish, and how to write your own. See you then! Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.1/10 (11 votes cast)

Using JavaScript Popup Boxes

You’ve seen them all around the Web. Little popup boxes that pop right inside your browser. If you are wondering “How do websites do that thing?”, then wonder no more. It’s all a matter of a simple JavaScript command. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 3.0/10 (1 vote cast)

Comparison and Logical Operators in JavaScript

Even the simplest program uses comparison and logical operators to implement its own logic. Logical and comparison operators in JavaScript are pretty much standard and provide all the functionality that is expected from a programming language. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

Circular Buffer Algorithm: A Definitive Guide

Circular Buffers aren\”t difficult to implement as an extension of Queues and are particularly useful for processing arbitrarily large of infinite amounts of data such as data streams. If you like Algorithms, try out the B-Tree Data Structure. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 1.0/10 (1 vote cast)

jQuery for Beginners – Step by Step Tutorial (Part 3)

Here we will continue from previous part of jQuery for Beginners Tutorial.

Filters for visibility

:hidden – Select all elements which have attribute to be hidden

:visible – Select all elements which not have attribute to be hidden

Filter for attributes

[attribute] – Select all elements which have specified attribute Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.7/10 (26 votes cast)

jQuery for Beginners – Step by Step Tutorial (Part 2)

Here we will continue from previous part of jQuery for Beginners Tutorial.

Selectors

The selectors in jQuery seems like this: $(…). By using them we can call elements by his name, id, class, tag (a, td, div) with initializing jQuery object.

If you have and DIV element and want by moving mouse over it, to execute some code, you can do this: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.1/10 (10 votes cast)

jQuery for Beginners – Step by Step Tutorial (Part 1)

jQuery is JavaScript framework, which makes very easy development of JavaScript applications. Moreover jQuery will guaranty you that your application will work on most popular web browsers used today. jQuery makes available many DHTML effects, AJAX requests, DOM modifications, etc. to be used with light source code and rapid development by web programmers.

Main advantages of jQuery is this, that you don”t need to add anything to document body, but you can separate all interactivity JavaScript in separate functions in external files. You can see this later in this tutorial.

If you want to make any modification on any DOM object will need to load completely entire document. To be sure this is a true, and without using jQuery you have to write something like this: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.1/10 (20 votes cast)

Debug Java Script Applicatons with Firebug

Java Script is very popular scripting language tool, because he use small source code, cross platform within many browser and the execution of the script is fast for this, because calculation of the script is made on user”s computer and your server will stay available for main applications.

Like in and other developer language and script, while developing in Java Script, developer can dismiss or mess up something and an error wile rise up. This will stop the script or will give a malfunction in web application.

For this we will use some debug tool for catching the errors and to fix them. In this tutorial I will show you How to Debug Java Script with Firebug

Firebug also can debug HTML, CSS sources. Can edit your html in real time, to try different layout with css on the fly, to measure network activity, etc.

Firebug can be called be pressing F12 key, and you have to note that the Firebug have to called after fully page loading. Otherwise he will notify you to reload the webpage. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 1.0/10 (11 votes cast)

Change IMG SRC picture with Java Script Dynamically

If you have some photo gallery, with many folders of your events and each folder give to user a list with all photos you probably want to display one large photo and the others are small (thumbnails) in some list bar. And when visitors clicks on the thumbnails, on the place of large image to appear large image of the clicked thumbnail.

Of course, you can do this with PHP by sending GET request with image name stored in the url, but this will reload entire webpage, visitor will get sad and more traffic will be generated from your photo gallery (If your photo gallery have many visitors and many photos, probably your internet hosting provider will tell yoo – Go to higher plan, you eat too bandwidth!). Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.3/10 (3 votes cast)