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
Take This Course
  • Lectures 84
  • Length 6 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2012 English

Course Description

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.


What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: JavaScript Basics
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…
  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…
  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…
  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 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…
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…
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…
Section 2: Variables, Arrays and Operators
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…
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…
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…
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…
  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.…
Section 3: JavaScript Functions
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…
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…
  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…
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…
Section 4: Built-In JavaScript Objects
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 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…
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…
Day of the Week Solution Demo
Section 5: Conditionals and Loops
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…
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…
Section 6: JavaScript Form Validation
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 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…
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…
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 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 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 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 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…
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…
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…
Section 7: Images, Windows and Timers
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 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…
  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…
  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…
Section 8: Navigator, History, and Location Objects
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…
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…
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…
  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…
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…
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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Webucator Training, 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?

Ready to start learning?
Take This Course