How to Make Your Own JavaScript Site
Using JavaScript in your website allows you to make it dynamic and interactive. Even if you do not have much programming knowledge or experience, creating a site with JavaScript is often easy. As well as building your own JavaScript functions, there are many freely available JavaScript libraries and code excerpts that help to achieve sophisticated effects promptly and easily. You do not need to learn complex concepts in order to use JavaScript effectively, for you can begin by using small sections of code and build upon your knowledge incrementally. As with any interactive technology, JavaScript should only be used where it genuinely adds value to your site.
Other People Are Reading
Instructions
-
-
1
Create your site pages in HTML and build in JavaScript to enhance it. Include JavaScript functions within the head section of your pages or in separate files, linked to within the head section:
<script type='text/javascript' src='functions.js'></script>
Your JavaScript functions can be called when triggered by user interaction with the page, or by other events such as the page loading:
<body onload="my_function();">
In this example a JavaScript function named "my_function" would be executed as soon as the page loads. This type of function is often used to alter the page style for different browsers.
-
2
Use JavaScript to enhance styling and interactivity within your site. One of the most common uses of JavaScript is to alter style properties as a user interacts with a page. For example, menus and various other page elements can have JavaScript attached to them that determines what should happen when a user clicks or rolls their mouse over the area. The following simple example changes the color of a paragraph when the mouse moves over it. In the JavaScript code:
function onPara(para_id)
{ document.getElementById(para_id).style.color="#FF0000"; }
function offPara(para_id)
{ document.getElementById(para_id).style.color="#000000"; }
In the HTML within the page:
<p id="p1" onmouseover="onPara(this.id);" onmouseout="offPara(this.id);">Hello!</p>
-
-
3
Use external JavaScript libraries to create advanced effects. There are many free JavaScript samples and libraries available for download. Resources such as jQuery and Google Code help to give visitors a rich level of interactivity with your site. There are JavaScript resources available for a wide variety of functions, including styling, animated effects, image display galleries, navigation, forms and much more. These resources have often been created by experts and are extremely easy to use in many cases, with instructions normally included.
-
4
Use JavaScript to facilitate Server communication. Techniques such as AJAX can greatly enhance a website's effectiveness. AJAX allows you to request further data from the Server and present this within your current page, without having to reload the page or browse to a new one. This is commonly used for features such as polls and automatically updating news feeds. AJAX uses JavaScript in conjunction with Server-side technologies including PHP scripts and Web databases.
-
5
Test your site thoroughly in different browsers. JavaScript can often behave in vastly different ways in different Web browsers. You may find that some of your functions will not work as expected in certain browsers unless you make amendments to them. Additionally, the wide variety of devices that people currently use to access the Internet means that in many cases JavaScript may not be enabled. Take care to ensure that the content of your site will still be available without JavaScript functionality.
-
1
Tips & Warnings
Look at other sites you like and learn how they use JavaScript to achieve their effects. As well as providing inspiration for your own sites, this is a good way to familiarize yourself with how the language works.
Don't use JavaScript functions if they are in danger of detracting from the overall purpose of your site. A JavaScript effect is only worthwhile if it contributes to the aims that your site is working towards.
References
Resources
- Photo Credit mouse 4 image by Dr.Szirmai János from Fotolia.com
