Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Introduction to JavaScript to your Wishlist.

Add to Wishlist

Introduction to JavaScript

Learn how to use JavaScript effectively from the experts at Webucator JavaScript Training
1.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8 students enrolled
Published 9/2012
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 49 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

In this JavaScript training for beginners: JavaScript Basics course, students will learn how to use JavaScript effectively to make their web pages more dynamic and functional and to reduce the number of round trips to the server.

Take this JavaScript Training course and learn JavaScript Basics.

Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 84 Lectures Collapse All 84 Lectures 06:07:05
JavaScript Basics
11 Lectures 18:32
Lesson Introduction

  The Name "JavaScript" In this course, we refer to the language we are learning as JavaScript , which is what it is usually called. However, JavaScript was invented by Netscape Communications and is now owned by Oracle Corporation . Microsoft calls its version of the language JScript . JavaScript a…
Preview 00:58

  Accessing Elements Dot Notation In JavaScript, elements (and other objects) can be referenced using dot notation, starting with the highest-level object (i.e, window ). Objects can be referred to by name or id or by their position on the page. For example, if there is a form on the page named "log…
Preview 01:03

  Where Is JavaScript Code Written? JavaScript code can be written inline (e.g, within HTML tags called event handlers), in script blocks, and in external JavaScript files. The page below shows examples of all three. Code Sample: JavaScriptBasics/Demos/javascript-1.html Red | White As this page load…
Preview 00:48

  javascript: Pseudo-Protocol Try this: Open your browser. In the location bar, type in javascript:alert("Hello world!"); like so: Press Enter. You should get an alert reading "Hello world!". The javascript: prefix is called a pseudo-protocol, because it mimics the protocol syntax (e.g, like http: ,…
javascript: Pseudo-Protocol

  JavaScript Objects, Methods and Properties JavaScript is used to manipulate or get information about objects in the HTML DOM. Objects in an HTML page have methods (actions, such as opening a new window or submitting a form) and properties (attributes or qualities, such as color and size). To illus…
JavaScript Objects, Methods and Properties

Using the 'window.prompt()' Method

Event Handlers In JavaScriptBasics/Demos/javascript-2.html, we used the onclick event handler to call JavaScript code that changed the background color of the page. Event handlers are attributes that force an element to "listen" for a specific event to occur. Event handlers all begin with the letter…
Event Handlers

HTML Event Handlers Demo

Using Event Handlers Duration: 15 to 25 minutes. In this exercise, you will use event handlers to allow the user to change the background color of the page. Open JavaScriptBasics/Exercises/color-changer.html for editing. Modify the page so that... when it is finished loading an alert pops up reading…
Using Event Handlers
Variables, Arrays and Operators
10 Lectures 29:33
Lesson Introduction

JavaScript Variables Variables are used to hold data in memory. JavaScript variables are declared with the var keyword. var age; Multiple variables can be declared in a single step. var age, height, weight, gender; After a variable is declared, it can be assigned a value. age = 34; Variable declarat…
JavaScript Variables

Declaring JavaScript Variables

Using Variables Duration: 5 to 15 minutes. In this exercise, you will practice using variables. Open VariablesArraysOperators/Exercises/Variables.html for editing. Below the ADD PROMPT HERE comment, write code that will prompt the user for her first name and assign the result to a variable. Add a bu…
Using Variables

Arrays An array is a grouping of objects that can be accessed through subscripts. At its simplest, an array can be thought of as a list. In JavaScript, the first element of an array is considered to be at position zero (0), the second element at position one (1), and so on. Arrays are useful for sto…

Using Arrays

  Working with Arrays Duration: 15 to 25 minutes. In this exercise, you will practice working with arrays. Open VariablesArraysOperators/Exercises/Arrays.html for editing. Below the comment, declare a rockStars array and populate it with four values entered by the user. Add functionality to the butt…
Working with Arrays

Modulus and Ternary

  JavaScript Operators Operator Description + Addition - Subtraction * Multiplication / Division % Modulus (remainder) ++ Increment by one -- Decrement by one Arithmetic Operators Operator Description = Assignment += One step addition and assignment ( a+=3 is the same as a=a+3 ) -= One step subtract…
JavaScript Operators

  Working with Operators Duration: 15 to 25 minutes. In this exercise, you will practice working with JavaScript operators. Open VariablesArraysOperators/Exercises/Operators.html for editing. Add code to prompt the user for the number of albums she owns of her favorite and second favorite rockstars.…
Working with Operators
JavaScript Functions
7 Lectures 12:34
Lesson Introduction

  Global Functions JavaScript has a number of global functions. We will examine some of them in this section. Number(object) The Number() function takes one argument: an object, which it attempts to convert to a number. If it cannot, it returns NaN , for "Not a Number." Code Sample: JavaScriptFuncti…
Global Functions

Using the Global Number() Function

  Working with Global Functions Duration: 10 to 15 minutes. In this exercise, you will practice working with JavaScript's global functions. Open JavaScriptFunctions/Exercises/BuiltinFunctions.html for editing. Modify the file so that it outputs the sum of the two numbers entered by the user. Code Sa…
Working with Global Functions

  User-defined Functions Writing functions makes it possible to reuse code for common tasks. Functions can also be used to hide complex code. For example, an experienced developer can write a function for performing a complicated task. Other developers do not need to know how that function works; th…
User-defined Functions

Declaring and Calling Functions

  Writing a JavaScript Function Duration: 15 to 25 minutes. In this exercise, you will modify a page called ColorMania.html, which will contain a form with four buttons. Each button will show the name of a color (e.g, red) and, when clicked, call a function that changes the background color. The but…
Writing a JavaScript Function
Built-In JavaScript Objects
12 Lectures 35:33
Lesson Introduction

  String In JavaScript, there are two types of string data types: primitive strings and String objects. String objects have many methods for manipulating and parsing strings of text. Because these methods are available to primitive strings as well, in practice, there is no need to differentiate betw…

Using the String.split() Method

  Math The Math object is a built-in static object. The Math object's properties and methods can be accessed directly (e.g, Math.PI ) and are used for performing complex math operations. Here are two commonly used properties of the Math object. Property Description Math.PI Pi (Π) Math.PI; //3.141592…

Using Math.random()

Date The Date object has methods for manipulating dates and times. JavaScript stores dates as the number of milliseconds since January 1, 1970. The sample below shows the different methods of creating date objects, all of which involve passing arguments to the Date() constructor. Code Sample: BuiltI…

Using Date Methods

typeof Operator The typeof operator is used to find out the data type of a variable. As we learned earlier in the course, we can have variables that hold String values, Numeric values, and more. Using the typeof operators lets us identify the type of data the variable references. The screenshot belo…
'typeof' Operator

'typeof' Operator Demo

Helper Functions Some languages have functions that return the month as a string. JavaScript doesn't have such a built-in function. The sample below shows a user-defined "helper" function that handles this and how the getMonth() method of a Date object can be used to get the month. Code Sample: Buil…
Helper Functions

Returning the Day of the Week as a String Duration: 15 to 25 minutes. In this exercise, you will create a function that returns the day of the week as a string. Open BuiltInObjects/Exercises/DateUDFs.html for editing. Write a dayAsString() function that returns the day of the week as a string. Write…
Returning the Day of the Week as a String

Day of the Week Solution Demo
Conditionals and Loops
7 Lectures 35:17
Lesson Introduction

  Conditionals There are two types of conditionals in JavaScript. if - else if - else switch / case if - else if - else Conditions The structure of an if - else if - else condition is shown below: if (conditions) { statements; } else if (conditions) { statements; } else { statements; } Like with fun…

Conditionals Explained

Conditional Processing Duration: 20 to 30 minutes. In this exercise, you will practice using conditional processing. Open ConditionalsAndLoops/Exercises/Conditionals.html for editing. Notice that there is an onload event handler that calls the greetUser() function. Create this function in the script…
Conditional Processing

Loops There are several types of loops in JavaScript. while do...while for while Loop Syntax while (conditions) { statements; } Something, usually a statement within the while block, must cause the condition to change so that it eventually becomes false and causes the loop to end. Otherwise…

Using Loops

Working with Loops Duration: 20 to 30 minutes. In this exercise, you will practice working with loops. Open ConditionalsAndLoops/Exercises/Loops.html for editing. You will see that this file is similar to the solution from the last exercise. Declare an additional variable called greeting . Create an…
Working with Loops
JavaScript Form Validation
17 Lectures 57:54
Lesson Introduction

Accessing Form Data All forms on a web page are stored in the document.forms[] array. As we learned, JavaScript arrays having a starting index of 0, therefore the first form on a page is document.forms[0] , the second form is document.forms[1] , and so on. However, it is usually easier to give the f…
Accessing Form Data

Accessing the value Property

Textfield to Textfield Duration: 15 to 25 minutes. In this exercise, you will write a function that bases the value of one text field on the value of another. Open FormValidation/Exercises/TextfieldToTextField.html for editing. Write a function called getMonth() that passes the month number entered…
Textfield to Textfield

Basics of Form Validation When the user clicks on a submit button, an event occurs that can be caught with the form tag's onsubmit event handler. Unless JavaScript is used to explicitly cancel the submit event, the form will be submitted. The return false; statement explicitly cancels the submit eve…
Basics of Form Validation

Explaining Basic Form Validation

Validating a Registration Form Duration: 25 to 40 minutes. In this exercise, you will write code to validate a registration form. You may find it useful to reference the Common String Methods table in the String activity that we covered in the "Built-in" JavaScript Objects" lesson. Open FormValidati…
Validating a Registration Form

Validating Radio Buttons Radio buttons that have the same name are grouped as arrays. Generally, the goal in validating a radio button array is to make sure that the user has checked one of the options. Individual radio buttons have the checked property, which is true if the button is checked and fa…
Validating Radio Buttons

Validating Radio Buttons Explained

Validating Checkboxes Like radio buttons, checkboxes have the checked property, which is true if the button is checked and false if it is not. However, unlike radio buttons, checkboxes are not stored as arrays. The example below shows a simple function for checking to make sure a checkbox is checked…
Validating Checkboxes

Validating Checkboxes Explained

Validating Select Menus Select menus contain an array of options. The selectedIndex property of a select menu contains the index of the option that is selected. Often the first option of a select menu is something meaningless like "Please choose an option..." The checkSelect() function in the exampl…
Validating Select Menus

Validating Select Menus Explained

Focus, Blur, and Change Events Focus , blur and change events can be used to improve the user experience. Focus and Blur Focus and blur events are caught with the onfocus and onblur event handlers. These events have corresponding focus() and blur() methods. The example below shows how to set focus o…
Focus, Blur, and Change Events

onFocus, onBlur, and onChange Demo

Validating Textareas Textareas can be validated the same way that text fields are by using the checkLength() function shown earlier. However, because textareas generally allow for many more characters, it's often difficult for the user to know if he's exceeded the limit. It could be helpful to let t…
Validating Textareas

Improving the Registration Form Duration: 15 to 25 minutes. In this exercise, you will make some improvements to the registration form from the last exercise. Open FormValidation/Exercises/FormValidation2.js in your editor. You will see that the functions discussed above have been added: checkRadioA…
Improving the Registration Form
Images, Windows and Timers
10 Lectures 28:09
Lesson Introduction

  Image Rollovers Image rollovers are commonly used to create a more interesting user experience and to help highlight navigation points. When the user hovers the mouse over an image, the source of the image is modified, so that a different image appears. When the user hovers the mouse back off the…
Image Rollovers

Image Rollover Demo

  Preloading Images When working with files on a local machine, image rollovers like the ones we have seen in previous examples work just fine. However, when the user first hovers over a rollover image, the new image file has to be found and delivered to the page. The time it takes to load the image…
Preloading Images

  Creating a Slide Show Duration: 20 to 30 minutes. In this exercise, you will practice working with images by creating a slide show. Open ImagesWindowsTimers/Exercises/SlideShow.html for editing. Write code to preload Images/Banner.jpg, Images/Hulk.jpg, Images/Bruce.jpg, and Images/Batman.jpg. The…
Creating a Slide Show

  Windows These days, popup windows are generally frowned upon; however, they can be useful in some cases. We'll look at a couple of examples, but first, let's see how to open a new window. Syntax var newWin =, name, features, replace); All four parameters are options: URL - the URL…

Opening a New Window

  Timers Timers are started and stopped with the following four methods of the window object: setTimeout(code_to_execute, wait_time_in_milliseconds) clearTimeout(timer) setInterval(code_to_execute, interval_in_milliseconds) clearInterval(interval) Let's take a look at how setTimeout() and clearTimeo…

Timeouts and Intervals

  Popup Timed Slide Show Duration: 15 to 25 minutes. In this exercise, you will create a popup slideshow that runs by itself. Open ImagesWindowsTimers/Exercises/Timed-SlideShow.html in your editor. Add code to the startShow() function to pop up popup-show.html in a new 200px by 300px window. Make su…
Popup Timed Slide Show
Navigator, History, and Location Objects
10 Lectures 43:45
Lesson Introduction

  The navigator Object In the days of Netscape 4, it was common practice to branch code based on your user's browser. This is almost always a bad idea. It's better practice to check for and respond to feature support than to base your code on the type or version of the user's browser. That said, in…
The navigator Object

Feature Detection Although browsers have come a long way in the past several years, they unfortunately do not all support the W3C specifications to the same degree. This is particularly true with the introduction of HTML5. It is often necessary to branch the code based on the browser's support of a…
Feature Detection

Detecting Browser Features

  history Object Like navigator , the history object is a property of the window object. For security and privacy reasons, the information you can get about the user's session history is limited to the number of entries, which you get by reading the history.length property. That's generally not so u…
history Object

  location Object The location object is also a property of the window object, therefore you can call the methods directly in your JavaScript like a global function. Here are a few properties and methods of the location object. Property Description href Returns the full location of the page. The val…
location Object

Using history and location Objects

  Creating a Simple Quiz Duration: 15 to 25 minutes. In this exercise, you will create a simple quiz that asks one question per page and does not allow the user to navigate back to past questions. Open NavigatorHistoryLocation/Exercises/question1.html for editing. Add code so that the page tries to…
Creating a Simple Quiz

Simple Quiz Review

Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files.
Class Files
About the Instructor
3.9 Average rating
27 Reviews
740 Students
12 Courses
Global training company. Trained over 26,000 students. Thousands of student testimonials.
  • Founded in 2003.
  • Webucator provides technical and business training.
  • Webucator is a Microsoft Certified Partner for Learning Solutions (CPLS)
  • Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for its training courses.
  • Webucator has a GSA Contract (GS-35F-0556S).
  • We have provided training to over 70% of the Fortune 100 companies (See Partial Client List).
Why should you choose us?
Report Abuse