Kavoir » JavaScript Tips & Tutorials

How to include a JavaScript file inside a JavaScript file?

Yang Yang — Wed, 21 Jul 2010 16:47:18 +0000

This is a pretty odd question to ask in the first place if you have been using JavaScript for a while. JavaScript files are called from HTML web pages who need them to manipulate the HTML elements so that the users have extraordinary interactive experience. You can’t include a JavaScript file inside another JavaScript file like you can with PHP files, but you can only include JS files from HTML files.

If you need something that’s in a JavaScript file such as a predefined function, just include the file before wherever you are using the function and it should be fine. For example, you are calling A.js from a HTML file:

There is a rather sophisticated function in B.js that A.js relies on. You are wondering how to include B.js in A.js so A.js works properly. No you can’t. The answer is not to include B.js in A.js but include B.js in the HTML file before it includes A.js.

Now all the code in A.js should work fine. This is because all HTML code are read, parsed and executed in basic sequence from top to bottom. It’s the same with JavaScript code. When you need something from another JavaScript file and want to use it on the web page, just include it in the HTML web page. You can’t include a JavaScript file in a JavaScript file.

JavaScript: How to set focus to form elements?

Yang Yang — Wed, 21 Jul 2010 16:31:47 +0000

Normally, when users click on any label tag with the cursor, the corresponding input field will be focused ready for input or selection. Therefore, you can always achieve the focus effect by this native function of HTML’s. Otherwise, you’d need a small dime of JavaScript to set focus to any form element on the fly upon a certain event:

// FormName is the name value of the form.
// FieldName is the name value of the field
// to be focused.
document.FormName.FieldName.focus();

Or by element ID:

// FieldId is the id value of the field
// element to be focused.
document.getElementById('FieldId').focus();

There you go, the tiny focus() function is what we all need.

JavaScript: How to get the URL of the current web page?

Yang Yang — Wed, 21 Jul 2010 16:16:52 +0000

To get the URL address of the current page with JavaScript, simply return the value of window.location.href:

document.write(window.location.href);

Which is the same with:

document.write(location.href);

There’s much more you can do with the JavaScript Location Object such as redirecting to another URL.

PHP and JavaScript Variable / Value Transfer / Exchange: How to pass variable values from PHP to JavaScript or JavaScript to PHP?

Yang Yang — Fri, 09 Jul 2010 04:02:20 +0000

This is a rather common problem for novice web developers. While it may seem at first glance that it’s easy for PHP and JavaScript to communicate with each other, but they actually cannot interact with each other directly. They are very different technologies built for distinct purposes.

How to transfer or pass variable values from PHP to JavaScript?

To pass variables or values from PHP to JavaScript, just write the PHP code to generate the client side JavaScript code as you would with HTML code:

To embed PHP code in *.js files you have to first make the server to parse JavaScript .js files for any PHP code so that they will be executed. After that, you can create classes or call to functions or do whatever that is allowed in PHP in the .js files just as you can with .php files.

How to transfer or pass variable values from JavaScript to PHP?

Simply put, you have no other way to let some PHP script know any variable value than to send a request to it. So, you will use JavaScript to send a request to the PHP script by a GET or POST request that bears the variable value.

You can trigger a redirection to the PHP script and pass the values via URL:

var age = 24;
document.location = 'http://www.example.com/script.php?age=' + age;

Or you can perform an XMLHttpRequest request by GET or by POST.

How to execute / run PHP code inside JavaScript files?

Yang Yang — Fri, 09 Jul 2010 03:26:36 +0000

Static files of JavaScript would survive most applications but sometimes the ability to include PHP code inside JavaScript scripts and generate the content of the script files on the fly by PHP is a better option. How does one do that?

The simplest solution is to just include PHP code inside the section of your HTML templates / web pages because chances are, the file extension is .php:

Even if it’s not ending in .php, such as in .html or .htm, you can configure your server to parse all .html or .htm files for any PHP code, though with a little extra server burden.

Another solution for this is to make your server parse all files ending in .js. Just create a .htaccess if it doesn’t exist in the directory in which you wish to include and run PHP code inside all .js files. Add these lines at the end of .htaccess:

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js


SetHandler application/x-httpd-php

Now you can add all the PHP code you can inside any JavaScript files with a .js extension, the server will automatically parse and run them when the client side requests the file.

JavaScript: Confirmation / Warning before Leaving or Navigating Away from a Page

Yang Yang — Tue, 27 Apr 2010 02:00:40 +0000

Things couldn’t be worse when you were half way editing something and accidentally navigated away from the editing page after a whole hour of typing work. Hitting the back button of your browser neither helped, all you had done was gone anyway.

This must be remedied in some way, if you are creating an application that needs the user to input stuff, especially lengthy articles. One approach is to automate draft saving every a few minutes, the other is to warn the user before he or she either intentionally or inadvertently navigate away from the editor page. You can achieve this by a straightforward snippet of JavaScript:

var warning = false;
window.onbeforeunload = function() {
  if (warning) {
    return 'You have unsaved changes.';
  }
}

The warning variable can be timely altered according to the editing activities by the user. For instance, it is set true if the editing field is changed or does not equal to default value, or if the user triggers the onKeyUp / onChange event of any input fields:

var editor_form = document.getElementById("form_id");
for (var i = 0; i < editor_form.length; i++) {
	editor_form[i].onchange = function() {
		warning = true;
	}
}

This snippet must be put at the end of the page. Also, to avoid the warning when you press the form submit button, add this snippet after that:

document.getElementById("submit_button_id").onclick = function() {
    warning = false;
}

How to define multiple CSS rules / properties in jQuery?

Yang Yang — Wed, 03 Mar 2010 14:21:36 +0000

The simplest way to define a CSS rule in jQuery might be:

$(".sth").css("color", "#f00");

To define more than one CSS rule in a single jQuery line:

$(".sth").css("color", "#f00").css("font-style", "italic").css("text-decoration", "underline");

Which simply doesn’t look that good, especially if you intend to add more. A better way to specify multiple CSS rules or properties with jQuery is by a JSON object:

$(".sth").css( {'color' : '#f00', 'font-style' : 'italic', 'text-decoration' : 'underline'} );

However, it is recommended that you use .addClass() instead of .css() to separate the JavaScript logics and CSS styles for maintainability.

How to redirect the visitor to another page or website?

Yang Yang — Thu, 03 Sep 2009 07:24:24 +0000

This is one of the most common tasks in website development and also one of the most frequently asked question according to some of the keyword research tools. Well, you have 3 ways to achieve a web page redirection.

Use PHP header() function to modify and send a HTTP Location header:

header("Location: /thankyou.html"); // redirect the visitor to the /thankyou.html page on the same website

header("Location: http://www.microsoft.com"); // redirect the visitor to Microsoft
You will need to make sure there’s no output at all before the calling of the header function to avoid any headers already sent errors.
Use the meta tag of HTML:
<meta http-equiv="refresh" content="3;url=http://www.example.com/hi.html">

Which will simply refresh the visitor’s browser window and redirect to http://www.example.com/hi.html in 3 seconds.
Use JavaScript to manipulate the browser window location object:
onload="document.location='http://www.example.com/'">

PHP, JavaScript: Stop and prevent others from framing your site or web page

Yang Yang — Sun, 30 Aug 2009 02:05:17 +0000

Though it does increase traffic and the pageviews, it doesn’t feel quite good with someone who’s loading your website or page as a part of theirs in the form of a or , leeching your content as part of theirs. To prevent them from loading your pages this way, and make the visitor browser to load the entire window with your site on the "_top" level, you need some javascript:

Basically, this snippet checks if the URL location of this frame is the same with that of the top frame that is the browser window, if negative, meaning your site or page is being framed from another site, the entire window is then loading your site as the only page.

On the other hand, you can also do this by the help of PHP or a combination of both. Just check the global variable $_SERVER['HTTP_REFERER'] against the URL of a particular leeching site, if it’s a match, stop serving the content and redirect the visitors to a warning page so that they know they can come to your website directly instead of from a frame or iframe:

if (strpos($_SERVER['HTTP_REFERER'], 'leechsite.com') !== false) { // if a match
	header("Location: /warning.html"); // redirect to /warning.html
	exit();
}

Pretty much the simplest solution to this.

Interesting: Make sure you give a read to this Q&A thread at Stack Overflow.

How to change the browser window status bar text of Firefox with JavaScript?

Yang Yang — Sat, 22 Aug 2009 04:15:30 +0000

It’s strange that you can accomplish this in IE while you can’t make it happen in Firefox. Well, that’s because the development team has decided that it’s potentially annoying and harmful for web developers to change the text of Firefox status bar whatever way they want.

So the simple answer is, you can’t. But there’s always some sort of switch that would turn on or off the custom modification of the status bar text.

Simply type about:config in the Firefox address bar and it would take you to a vault of hidden advanced settings not meant for common users. Filter: disable_window_status_change and you will see that Firefox has come disabled of window status change by default.

You can switch it off by changing the Value to false. However that ain’t gonna help you much because the vast majority of other Firefox users have left it in default, thus the JavaScript trick won’t work on their browsers.

Best JavaScript Books for Learning JavaScript Programming and Development

Yang Yang — Wed, 17 Jun 2009 04:22:24 +0000

Thanks to the computer scientists who set the standards of JavaScript, in the arena of event programming and behavioral manipulations of windows and objects, it is the one programming script that is so powerful that you can virtually build any possible interactive applications with it.

That said, learning JavaScript to the mastery of it takes lots of time and practice. These are some JavaScript books I have selected from Amazon that may be a good guide to you when you are learning JavaScript front end programming.

Web Developers / Designers’ Books:

JavaScript: The Good Parts

JavaScript: The Definitive Guide

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

JavaScript: A Beginner’s Guide, Second Edition, Third Edition

Murach’s JavaScript and DOM Scripting (Murach: Training & Reference)

JavaScript(TM) Step by Step

Pro JavaScript Techniques

JavaScript & DHTML Cookbook (2nd edition)

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries

Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)

Beginning JavaScript

JavaScript: Open or Redirect to Another Page / Site / Location

Yang Yang — Tue, 16 Jun 2009 11:27:02 +0000

One of the most common uses of JavaScript is to redirect the user to or automatically open up another web page location. For example, when the user clicks a button, the JavaScript will redirect the user to the location selected in the drop down select menu. It’s just like the user has typed the web page location URL.

There are 2 ways to use JavaScript to navigate to another web page. The first is to rely on the window object:

The location method mimics the user behavior of typing a URL address in the address bar of the browser window. The browser then forwards to that web site, leaving the last web page in the previous entry of browsing history.

The second approach is to use the replace method of location object:

location.replace("http://www.microsoft.com");

This is trickier in that it’s not like what users would do. Instead of creating a new history entry, this method replaces the old history entry by the new one. Essentially, users cannot go back to the previous page with this approach, the previous web page is replaced by the new one: http://www.microsoft.com.

JavaScript: Split and Divide Text String by A Delimiter

Yang Yang — Tue, 16 Jun 2009 11:15:33 +0000

Spliting and dividing a string into several chunks is a rather basic need for text parsing. You can do it easily in PHP by the help of explode() function or preg_split(), in JavaScript, you can achieve this task by the split() string function.

The following example illustrates the usage of javascript split() function to slice a string into various parts in an array.

var str = "How are you";
var words = str.split(" "); //split using a single blank space as the delimiter
for (i = 0; i < words.length; i++) {
	alert(words[i]); //alerts "How", "are" and "you" sequentially
}

Note that split is a method of string objects in JavaScript, not standalone functions. Therefore, you can even use it this way:

var words = "How are you".split(" ");

jQuery: Protecting or hiding variables / functions in a specific local scope

Yang Yang — Fri, 17 Apr 2009 03:00:35 +0000

As everyone who’s well trained in software engineering would agree, that one of the principle of writing predictable code is to separate and hide something within only the scope that it’s needed. Controlled access to and from the outside world brings predictability and accountability of your code thus better debugging.

In jQuery, you need constantly extending the native features by writing extra plugins and adding new functions:

var newMethods = {
  check       : function() { ... },
  uncheck     : function() { ... },
  toggleCheck : function() { ... }
};
jQuery.each(newMethods, function(i) {
  jQuery.fn[i] = this;
});

Without proper fencing, the variable containing 3 functions newMethods is everything but protected from the global scope (outside world), increaseing the complexity of the code and difficulty in debugging. To solve this problem, you will want to embrace the code in an anonymous function.

(function() {
  var newMethods = {
    check       : function() { ... },
    uncheck     : function() { ... },
    toggleCheck : function() { ... }
  };
  jQuery.each(newMethods, function(i) {
    jQuery.fn[i] = this;
  });
})();

jQuery: Get the text and value of the selected option of HTML select element

Yang Yang — Thu, 16 Apr 2009 15:30:04 +0000

For instance, there’s a HTML select element identified by the ID #title, and after the user has selected one of the options, you want to get the text and value of the selected option.

Now that the user has selected the 2nd option: Mrs. To get the value (in this case, ‘2’):

$("select#title").val();

Which is also the common function to return the value of all other form controls.

To get the text of the selected option (in this case, ‘Mrs’):

$("#title option:selected").text();

Kavoir » JavaScript Tips & Tutorials

How to include a JavaScript file inside a JavaScript file?

Related Posts:

JavaScript: How to set focus to form elements?

Related Posts:

JavaScript: How to get the URL of the current web page?

Related Posts:

PHP and JavaScript Variable / Value Transfer / Exchange: How to pass variable values from PHP to JavaScript or JavaScript to PHP?

How to transfer or pass variable values from PHP to JavaScript?

How to transfer or pass variable values from JavaScript to PHP?

Related Posts:

How to execute / run PHP code inside JavaScript files?

Related Posts:

JavaScript: Confirmation / Warning before Leaving or Navigating Away from a Page

Related Posts:

How to define multiple CSS rules / properties in jQuery?

Related Posts:

How to redirect the visitor to another page or website?

Related Posts:

PHP, JavaScript: Stop and prevent others from framing your site or web page

Related Posts:

How to change the browser window status bar text of Firefox with JavaScript?

Related Posts:

Best JavaScript Books for Learning JavaScript Programming and Development

Web Developers / Designers’ Books:

JavaScript: A Beginner’s Guide, Second Edition, Third Edition

Related Posts:

JavaScript: Open or Redirect to Another Page / Site / Location

Related Posts:

JavaScript: Split and Divide Text String by A Delimiter

Related Posts:

jQuery: Protecting or hiding variables / functions in a specific local scope

Related Posts:

jQuery: Get the text and value of the selected option of HTML select element

Related Posts: