• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript / Introduction to JavaScript

Introduction to JavaScript

21 September 1997 / Leave a Comment

JavaScript’s a great language. I love it. It may not have the speed or power of Java or C, or the tight integration of ActiveX, but on the plus side it’s interpreted (no messing about with compilers), fast to load, easy to debug and it embeds itself neatly into your web page.

Most important of all, it’s easy to learn. Hopefully if you’re fairly new to the language, these tips will help get you started. Even seasoned JavaScript coders may learn a thing or two from these tips – you never know!

This tutorial shows you how to get started with JavaScript. We’ll look at how to embed JavaScript in your web page, and how JavaScript talks to your web browser. I’ll illustrate these points by building a simple program to display an alert box when the page is first loaded.

Where in my web page do I put JavaScript?

The simple answer is… anywhere you like! Most folks, though, like to put it near the top of the page in one chunk, usually below the <body> tag or between the <head></head> section, for readability and ease of debugging. Putting it in the <head></head> section has the advantage that all of the code will be loaded before the page, which is more secure.

Regardless of where you place it, you must enclose it within the following HTML tags:


<script language="JavaScript">
<!--

(place your code here)

// --></script>

Why? Well, <script language="JavaScript"> tells the browser to interpret what follows as JavaScript, while the comment markers ( <!-- // --> ) make the JavaScript invisible to older browsers that don’t support the language.

How does JavaScript make the browser do stuff?

JavaScript talks to your browser through objects and methods. An object is something like a window, a frame, or an image – the things that make up your browser and the web pages it displays. A method is something that an object can do. For example, a window can be opened or closed.

As an example, we’re going to make your browser display an alert box when your page loads. Open the example page in a new window to see it in action.

Here’s the function that made that extremely witty box appear:


function showAlert ( )
{
  window.alert ( "ALERT! ALERT! KLINGONS ON THE STARBOARD BOW!" );
}

See? It’s easy! We’re calling the alert method of the window object, to make the alert box appear. The method takes one argument – the text to display in the box. Couldn’t be simpler.

But how does it come up automatically, when the page is first viewed? That’s done with a little trick called the onload event handler. In the standard <body> tag at the top of the page, we add this code:


<body bgcolor="#FFFFFF" onload="showAlert()">

This tells the browser to execute the JavaScript function showAlert() when the page is first loaded. (It will also be executed when you click Reload/Refresh.)

Congratulations — if you made it this far, you now understand the building blocks of JavaScript! Now have a browse through the other tutorials in this section. Start writing your own code. There are lots of helpful books available on the subject, and some great websites too! Good luck.

Filed Under: JavaScript Tagged With: beginner, coding, intro, java script, novice, programming, starter, starting out

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits