Introduction to JavaScript
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
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
English
Price: $50
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 49 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
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.

</p>
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
00:54

  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
00:58

  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
02:06

Using the 'window.prompt()' Method
03:42

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
02:49

HTML Event Handlers Demo
01:56

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
01:58
+
Variables, Arrays and Operators
10 Lectures 29:33
Lesson Introduction
00:29

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
02:17

Declaring JavaScript Variables
02:22

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
00:44

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…
Arrays
03:06

Using Arrays
08:03

  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
00:51

Modulus and Ternary
06:11

  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
03:30

  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
01:58
+
JavaScript Functions
7 Lectures 12:34
Lesson Introduction
00:40

  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
03:02

Using the Global Number() Function
01:24

  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
01:29

  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
02:07

Declaring and Calling Functions
02:22

  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
01:30
+
Built-In JavaScript Objects
12 Lectures 35:33
Lesson Introduction
01:24

  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…
String
02:12

Using the String.split() Method
03:43

  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…
Math
01:18

Using Math.random()
05:29

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…
Date
02:20

Using Date Methods
05:49

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
00:19

'typeof' Operator Demo
03:11

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
00:33

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
01:06

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

  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
05:32

Conditionals Explained
12:20

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
02:08

Loops There are several types of loops in JavaScript. while do...while for for...in 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…
Loops
02:03

Using Loops
09:50

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
02:42
+
JavaScript Form Validation
17 Lectures 57:54
Lesson Introduction
01:39

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
01:10

Accessing the value Property
04:55

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
01:30

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
03:59

Explaining Basic Form Validation
17:11

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
02:58

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
01:15

Validating Radio Buttons Explained
05:16

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
00:46

Validating Checkboxes Explained
03:35

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
00:45

Validating Select Menus Explained
03:42

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
01:38

onFocus, onBlur, and onChange Demo
05:08

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
00:58

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
01:27
+
Images, Windows and Timers
10 Lectures 28:09
Lesson Introduction
01:19

  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
01:14

Image Rollover Demo
02:55

  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
01:16

  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
01:58

  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 = window.open(URL, name, features, replace); All four parameters are options: URL - the URL…
Windows
02:05

Opening a New Window
10:06

  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…
Timers
00:50

Timeouts and Intervals
05:38

  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
00:46
+
Navigator, History, and Location Objects
10 Lectures 43:45
Lesson Introduction
01:20

  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
01:41

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
00:48

Detecting Browser Features
11:33

  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
01:18

  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
01:33

Using history and location Objects
05:37

  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
01:59

Simple Quiz Review
17:48

Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/JSC101
Class Files
00:06
About the Instructor
Webucator Training
3.8 Average rating
29 Reviews
739 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?