Contents


Get started with the JavaScript language, Part 1

The basics

Comments

Content series:

This content is part # of 8 in the series: Get started with the JavaScript language, Part 1

Stay tuned for additional content in this series.

This content is part of the series:Get started with the JavaScript language, Part 1

Stay tuned for additional content in this series.

Editorial note: This series has been updated with interactive code capabilities. When you see Run on a code listing, it means you can run the code, check the results, make modifications, and run it again.

So, you want to learn JavaScript. You came to the right place. This interactive tutorial series is packed with information to help you move your skills from a working knowledge of HTML, to an understanding of JavaScript. It should take approximately 2 hours to complete the entire 7-part series, but feel free to jump around and practice what interests you.

In each section there are exercises and a quiz so you can practice as you learn. The best part is, there’s no setup for you. You’ll interact directly on this web page. You don’t even have to worry about opening another tab or window; you can do it all right here, in the sandboxes like the one below.

Your turn! Try changing the code

Try icon Hello World is always a good place to start. Click Run to see the console.log function write the data to this page. You can change the words, change the code, then click Run again and see what happens.

Show Result+

The JavaScript language has become increasingly popular and is arguably one of the most prominent languages on the Internet. You can use it across various platforms and browsers, and it does not discriminate against back-end languages. There are many different libraries—some that are great—to help with development, speeding up development time and so on. The issue is that sometimes these libraries are so removed from the original language that beginning developers lack an understanding of the language fundamentals. This article explains the language fundamentals by covering basic JavaScript concepts to give beginners a foundational understanding of the language. Code examples are provided throughout to show how it's all done.

Understanding the JavaScript language

The JavaScript language is a free, client-side scripting language that lets you add interactivity to Hypertext Markup Language (HTML) pages. Client-side means that the JavaScript language runs in the browser and is not used on the server side. Client-side scripting is what allows user interactivity with a web page after the web page is served by the server and loaded by the browser. Google Maps, for example, uses the JavaScript language to allow users to interact with a map by moving it around, zooming in and out, and so on. Without the JavaScript language, the web page needs to be refreshed for each and every user interaction, unless, of course, it uses a plug-in such as Adobe Flash or Microsoft® Silverlight. The JavaScript language does not require a plug-in.

Because the JavaScript language provides user interactivity with a web page after the page loads, developers commonly use it for some of the following functions:

  • Dynamically add, edit, and remove HTML elements and their values
  • Validate web forms before submission
  • Create cookies to store and retrieve data on a user's computer for future visits

JavaScript syntax

Before getting started, there are just a few language basics to be aware of:

  • To include JavaScript code in an HTML file, you must place the code inside script tags and include the text/javascript type attribute.
  • All JavaScript statements end with a semicolon.
  • The language is case sensitive.
  • All variable names must begin with a letter or underscore.
  • You can use comments to identify certain lines of your script. You write comments using a double forward slash (//) followed by the comment.
  • You can also use comments to comment out script. A good way to comment out multiple lines of script is by using /* your script goes here */. Any script within the stars /**/ doesn't run during execution.
The script tags and type attribute are required to include JavaScript code in an HTML file
<script type="text/javascript"></script>

To hide JavaScript code from browsers that do not support it or if a user has it turned off, simply use the comment tag before and after the JavaScript statement, as shown below.

Use comments to hide JavaScript code from browsers that do not support it
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

External JavaScript files

The most commonly used way to include JavaScript code in a web page is to load it from an external JavaScript file using the src attribute in the script tag. Here's what to type:

Including an external JavaScript file in an HTML file
<script type="text/javascript" src="path/to/javascript.js"></script>

External JavaScript files are the most common way to include JavaScript code for a number of practical reasons:

  • Search engines can crawl and index your web site faster if there is less code within your HTML page.
  • Keeping your JavaScript code separate from your HTML is cleaner and ultimately easier to manage.
  • Because you can include multiple JavaScript files in your HTML code, you can separate the JavaScript files into different folder structures on your web server, similar to images, which is an easier way to manage your code. Clean, organized code is always key to easily managing your website.

Summary and next steps

This tutorial introduced you to the basics of JavaScript. You learned some of the ways to use it, some of the language pitfalls. Continue on to part 2, variables.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=644430
ArticleTitle=Get started with the JavaScript language, Part 1: The basics
publish-date=05082017