Introductory JavaScript Made Easy Training Tutorial

An easy-to-follow beginner's guide to the JavaScript programming language.
4.0 (121 ratings) 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.
9,364 students enrolled
$20
Take This Course
  • Lectures 131
  • Contents Video: 6 hours
    Other: 4.5 hours
  • Skill Level Beginner Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 10/2014 English

Course Description

Learn Introductory JavaScript with this video course from TeachUcomp, Inc. Mastering Introductory JavaScript Made Easy features 128 video lessons with 6 hours of instruction. Watch, listen and learn as your expert instructor guides you through each lesson step-by-step. During this media-rich learning experience, you will see each function performed just as if your instructor were there with you. Reinforce your learning with the text of our printable classroom instruction manual, additional images and practice exercises. You will learn the JavaScript language from scratch, while exploring all of the techniques to add the various elements to your website.

The purpose of this course is to educate the student in the basic language skills necessary to use JavaScript. There are many resources available on the Internet that allow you to download code and place it into your HTML document or JavaScript code file. However, it is important to first understand the underlying language and components of JavaScript to be able to alter the code to work in your desired application, and easily troubleshoot any errors that may occur.

Whether you are looking to add interactivity to your website, control how a browser acts or alter your HTML document’s content, it is a good idea to have a firm grasp of the basics of JavaScript.

We begin this course by discussing the basic components and structure of JavaScript as well as learning the terminology. Then, we’ll advance through topics to cover some more advanced concepts and uses for JavaScript. If you are completely new to JavaScript, or just need a refresher, this course will empower you with the knowledge and skills necessary to be a proficient user of JavaScript. We have incorporated years of classroom training experience and teaching techniques to develop an easy-to-use course that you can customize to meet your personal learning needs. Simply launch the easy-to-use interface, click to start a video lesson or open the manual and you’re on your way to mastering JavaScript.

What are the requirements?

  • Basic Knowledge of HTML & CSS

What am I going to get from this course?

  • Understand the Basic JavaScript Syntax
  • Incorporate JavaScript Into HTML Pages
  • Troubleshoot Problems wtih JavaScript Implementation

What is the target audience?

  • New Web Designers
  • Those new to HTML & JavaScript

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.

Curriculum

Section 1: Course Introduction
01:47

This lecture provides a brief summary of the topics covered throughout the course and offers suggestions for further reading and learning materials.

Section 2: Getting Acquainted with JavaScript
01:43

JavaScript is considered a dynamic programming language. It was first released with Netscape Navigator in 1995. Originally called LiveScript, the name was changed when Netscape Navigator added support for the machine language Java. Learn this and more during this lecture.

01:16

Although the two programming languages Java and JavaScript have similar names, they are completely different in function. Java was created by Sun Microsystems and is used as a general programming language. JavaScript was created by the people who made the Web browser Netscape Navigator and is used to animate and add user interactions to webpages. Learn this and more during this lecture.

00:35

The <script>...</script> tag is used to insert JavaScript code into your HTML document. It tells the web browser where your JavaScript starts and the lines of code in between the tags contain all your coding. Learn this and more during this lecture.

01:09

The most effective use of JavaScript is to create an external .jsfile. Using an external JavaScript file allows your browser to preload, or cache, all the JavaScript code for your whole website. This minimizes your users wait time as pages on your website will load faster, making for a better user experience. Learn this and more during this lecture.

00:47

The uses for JavaScript are almost endless. They range from validating the information users input in a form to embedded games on your webpage. The most widely recognized use of JavaScript is probably the Google Search Engine homepage. JavaScript has allowed them to remove extraneous items from the page to leave a clean, minimalist look. Learn this and more during this lecture.

Section 3: The Makeup of JavaScript
01:01

JavaScript statements are the commands to the browser to execute the code you input.Much like CSS, the semicolon (;) is used to separate JavaScript statements and allows for many statements to be typed on a single line. Usually there is also a semicolon at the end of executable statements. Learn this and more during this lecture.

01:56

JavaScript code is simply a sequence of JavaScript statements. Each statement is executed by the browser in the order they are entered into your HTML document or external .js file. Learn this and more during this lecture.

00:47

In JavaScript, extraneous whitespace is ignored. Learn this and more during this lecture.

01:05

JavaScript is case sensitive. Cases in corresponding functions and variables must match exactly or they will not be rendered properly. Most JavaScript code is written in camelCase, which means compound words written with the first letter in lowercase and subsequent words with their first letter capitalized. Learn this and more during this lecture.

01:07

JavaScript allows you to break up a line of code within a text string with a backslash (\). Learn this and more during this lecture.

Section 4: JavaScript Comments
00:49

Comments in JavaScript are primarily used to explain what the code is for or to make it more readable. Single line comments start with a double forward slash (//), but do not have an end tag. Learn this and more during this lecture.

00:47

Multi-line comments in JavaScript start with a forward slash and an asterisk (/*) and end with an asterisk and a forward slash (*/). This allows for breaking your comments up into many lines, making it more readable for later editing. Learn this and more during this lecture.

00:42

You can also add comments to the end of a line of JavaScript code. These are considered single line comments and begin with a double forward slash (//). Learn this and more during this lecture.

01:05

You can use the single line comment "tag" (//), or the multi-line comment “tags” (/*…*/) to stop the execution of a line, or multiple lines, of code. This works because JavaScript ignores any text entered after the comment “tags”. Learn this and more during this lecture.

Section 5: JavaScript Variables
01:10

Much like algebra, JavaScript uses letters as containers for storing information, for example: var x=7;. In the previous example, the letter "x" is assigned a numerical value of 7, declaring that any variables with the letter "x" will have a value of 7. Learn this and more during this lecture.

00:58

JavaScript variables can have either a numerical or textual value. The syntax for each variable is different. When assigning a numerical value to a variable you only need to input the number: var a=7;. Learn this and more during this lecture.

01:14

When creating variables using JavaScript, you “declare” the variable by giving it a value. JavaScript variables are declared using the keyword var. For ease of reading within your code, you can declare a variable and on the next line assign a value to that variable. You can also assign a value on the same line as you declare a variable. Learn this and more during this lecture.

00:48

If you re-declare a JavaScript variable, that has previously been given a value, it does not lose its value. Learn this and more during this lecture.

00:38

In JavaScript a variable that is not given a specific value is considered undefined. The value of a variable is something that has to be calculated or something that may be provided later, like user inputted data. Learn this and more during this lecture.

01:20

When programming code with JavaScript, you can have many variables in one statement. This is achieved by starting the statement with var and listing your variables all separated bycommas. Learn this and more during this lecture.

01:49

In JavaScript a "local" variable is a variable that is contained within a function. It will not be recognized by any other function in your full JavaScript coding. Because of this, you can have local variables in other functions that have the same value. When a function is complete any local variables are deleted. Learn this and more during this lecture.

Section 6: Exploring JavaScript Data Types
00:36

Variables in JavaScript can have different data types. This allows variables to be considered "dynamic". Learn this and more during this lecture.

00:46

You can attribute a null value to variables to empty them. A null value data type is different from an undefined data type, because a null value data type has been labeled as "null" and not just left empty. Learn this and more during this lecture.

00:58

In JavaScript there is only one type of number. Numbers can be written with or without decimals and extra large or extra small numbers can be expressed using scientific or exponential notations. Learn this and more during this lecture.

00:58

A JavaScript String object is simply any variable ascribed a value in text form. Learn this and more during this lecture.

00:42

Boolean data types have only two values TRUE and FALSE. Any variable labeled with either TRUE or FALSE is considered a Boolean data type. Learn this and more during this lecture.

02:59

In JavaScript, arrays are actually objects, not a separate “data type”. An array is simply a single variable with many different values. You access the values by referencing index numbers allocated to each value. Defining variables in an array makes it easier to find a specific value in a long list of values. Learn this and more during this lecture.

01:20

In JavaScript an object is delineated by curly brackets ({ }). Inside the curly brackets are the object’s properties. Learn this and more during this lecture.

Section 7: JavaScript Objects
01:58

In JavaScript everything is an object. Strings, Dates, Arrays and Functions are just a few examples. You can also create your own objects using JavaScript. The only items in JavaScript that are not considered objects are data types that are either null or undefined. Learn this and more during this lecture.

01:05

Object properties determine the state of an object in JavaScript and are the values associated with the object. Learn this and more during this lecture.

01:22

Methods are actions that can be performed on objects. Similar to functions they are specific to the object they are associated with. Learn this and more during this lecture.

Section 8: JavaScript Functions
02:27

A function is a “subprogram” in JavaScript that is used to manipulate values or objects to achieve a specific result.Functions are code blocks that are executed when someone “calls” or initiates the function. Functions are first class objects and are considered FUNCTION objects in JavaScript. Learn this and more during this lecture.

01:19

Functions can also be used to return a value to where the “call” or initiation of the code, was made from. To do this you use the return statement. When using the return statement, the specific function will stop executing and return the value you specify. It is important to remember that the JavaScript code as a whole does not stop executing when a return statement is used, only the specific function containing the return statement. Learn this and more during this lecture.

02:47

When you call, or initiate, a function you pass values to it. These are called parameters and the values used for parameters are called arguments. When assigning arguments to parameters the values listed for the arguments must be in the same order as your listed parameters. Learn this and more during this lecture.

00:35

In JavaScript, when you assign values to any variables that have not previously been declared, those variables are considered to be global variables. It does not matter, in this instance, if the undeclared variable is contained within a function, it will still be considered a global variable. Learn this and more during this lecture.

Section 9: JavaScript Operators
02:18

Operators, in JavaScript are signs or symbols used to assign or calculate values, such as the plus sign (+). Arithmetic operators are used in the calculation of numerical values, just as in regular arithmetic. The values used with operators are called operands. Learn this and more during this lecture.

02:20

Assignment operators are used to assign different values to variables. Learn this and more during this lecture.

02:56

The + operator can be used to add strings, or text values, together and is called concatenation (combining into one). It can also be used to add strings and numbers together. Learn this and more during this lecture.

03:42

Comparison operators are generally used to test for true or false. They are used in logical statements to test for a difference or equality in variables or values, to return an answer of true or false. They can also be used in conditional statements to compare a set of values and take an action based on the result of the comparison. Learn this and more during this lecture.

02:37

Logical operators are used to determine the logic between values and variables. Logical operators are generally used with Boolean values and will return a Boolean result (true or false). However they can be used with non-Boolean values and can return a non-Boolean result. Learn this and more during this lecture.

03:48

The conditional, or ternary, operator is the question mark (?). It can be used as a shortcut to an if…else statement in JavaScript. It is used to evaluate a true/false statement and returns a value to a variable depending on the outcome. Learn this and more during this lecture.

Section 10: JavaScript Conditions
04:26

In JavaScript, conditional statements are used when you want to perform different actions for different choices. Learn this and more during this lecture.

03:20

The switch statement is used to select specific code to execute out of several code blocks. It is similar to an if…else statement, but is easier to use to allow the code to follow a specific path out of many. Learn this and more during this lecture.

Section 11: JavaScript Loops
03:39

Loops are useful in JavaScript when you want to execute the same code over and over with a different value each time. Learn this and more during this lecture.

02:38

The for…in loop is used to loop through an objects properties. This loop will continue through each property until they have all been exhausted. Learn this and more during this lecture.

03:20

The while loop is used to execute code as long as the test condition evaluates as true. The test condition in a while loop is evaluated before the execution of the code. If the condition evaluates as false, the while loop code is not executed. Learn this and more during this lecture.

03:09

The do…while loop is a variation of the while loop. Since the while (condition) is listed after the code to be executed, the code will be executed at least once before checking if the condition is true. The code will then repeat as long as the condition is true. Learn this and more during this lecture.

Section 12: JavaScript Break and Continue
02:50

The break statement is used to terminate, or “break out of”, the current switch, loop or label statement. Learn this and more during this lecture.

03:01

The continue statement breaks a single iteration of a loop, if a specific condition is met, and will then continue with the rest of the loop. The continue statement does not stop the loop from functioning altogether, it only tells the loop to stop, or “skip”, a certain iteration. Learn this and more during this lecture.

03:33

JavaScript labels are used to provide a statement with an identifier that you can then use a break or continue statement on. To “label” a statement in JavaScript you precede the statement with a colon (:). Learn this and more during this lecture.

Section 13: JavaScript Errors
04:02

There are many different errors that can occur in JavaScript when the engine is executing JavaScript code. They can be misspelled or missing features in the language or simple syntax errors, like a typographical error from the programmer. Learn this and more during this lecture.

04:49

The throw statement is a useful tool to control the way your JavaScript code displays error messages. When used together with the try…catch statement it allows you to display custom error messages when an error occurs in your code. Learn this and more during this lecture.

Section 14: JavaScript Form Validation
03:58

Form validation is used to ensure the user inputs all the necessary information into your form on your webpage. Before the advent of JavaScript form validation, all data input by a user was sent to the server and then checked for accuracy after the data was submitted. Learn this and more during this lecture.

03:57

You can use JavaScript to validate an Email address in a form field. The check is done to ensure the proper syntax and structure of an Email address has been entered by the user. Learn this and more during this lecture.

Section 15: JavaScript RegExp Object
07:27

RegExp stands for regular expression. In JavaScript it is an object that describes a pattern of characters. When searching in text you can use a regular expression to describe what you are looking for, be it a single character or a whole word. Learn this and more during this lecture.

06:50

Regular expression patterns are composed of simple characters, or a combination of simple and special characters, for example /abc/ or /ab*c/ or /Question (\d+)\.\d*/. Learn this and more during this lecture.

02:24

There are two basic methods when using the RegExp object. They are test() and exec(). The test() method is used to search a string for a specific value, and depending on the results, will return either a true or false value. The exec() method also searches a string for a specific value, but will return the value searched for, if it was found. Learn this and more during this lecture.

Section 16: JavaScript Hoisting
02:08

JavaScript always moves declarations to the top of the current script or function, these are also called the “scope”. The term for this default behavior is “hoisting”. When using JavaScript declarations, it is important to note that a variable can be used before it has been declared. Learn this and more during this lecture.

02:41

While JavaScript hoists declarations, it does not hoist initializations. An initialization, in JavaScript, is when a variable is defined and declared in the same expression. Learn this and more during this lecture.

Section 17: JavaScript USE STRICT Directive
01:58

The “use strict”; directive is not considered a statement in JavaScript. It is a literal expression with the purpose of executing all the code that follows it in strict mode. Strict mode does not allow for any undeclared variables and makes it easier to write secure JavaScript. Learn this and more during this lecture.

07:22

There are many restrictions placed on coding when using strict mode in JavaScript. Learn this and more during this lecture.

Section 18: JavaScript HTML DOM
01:43

Using the HTML DOM, in JavaScript, allows you to access and change all of the elements contained in your HTML document. DOM stands for Document Object Model. The browser creates a DOM for a web page, every time a page is loaded. Learn this and more during this lecture.

02:53

In JavaScript, the actions you can perform on HTML elements are called the DOM methods. You access the DOM using JavaScript, or other programming languages, and use the methods to interact with each object, or element, in your HTML page. Learn this and more during this lecture.

00:31

When using JavaScript to access the Document Object Model, the document object represents your webpage as a whole. It is the owner of all the objects, or elements, on your webpage. Learn this and more during this lecture.

04:03

You can use JavaScript to find your HTML elements in many different ways. As discussed in an earlier lecture, you can use getElementByIdto locate an element by its ID attribute. Learn this and more during this lecture.

03:10

In JavaScript, there are four basic functions, or methods, associated with changing the output stream in an HTML document. They are .close(), .open(), .write(), and .writeIn(). Using these four methods make it possible to modify the output stream of your HTML document. Learn this and more during this lecture.

01:35

You can easily change the value of an attribute in your HTML document using JavaScript. Learn this and more during this lecture.

02:36

You can use JavaScript to change the styling of your HTML elements. Learn this and more during this lecture.

Section 19: HTML DOM Events
03:50

JavaScript, in conjunction with the HTML DOM, allows you to use events on your web page to activate code. An event can be any interaction with the content of your web page. Learn this and more during this lecture.

02:41

The onchange event is most commonly used in conjunction with form fields and is used in the validation process. You can assign the onchange event to your form fields to execute an event after the user has input data. Learn this and more during this lecture.

Section 20: HTML DOM Navigation
00:54

When using the HTML DOM, everything that is contained in an HTML document is considered a node. Learn this and more during this lecture.

02:37

When considering the HTML DOM, each node in the node tree has a relationship to each other that is set in a hierarchical order. The terms parent, child and sibling are used to describe the basic relationships between nodes in a node tree. Learn this and more during this lecture.

02:33

As well as using the innerHTMLproperty to get the content of an element, you can use the childNodesand nodeValue properties. Learn this and more during this lecture.

03:16

There are several node properties that can be used to access and/or change elements in your HTML page. Learn this and more during this lecture.

04:36

In JavaScript, a nodelist is simply an array of nodes, similar to an array of HTML elements. You can use the getElementsByTagName() method to return a node list. When attempting to find certain nodes in your HTML document it is important to remember to use the index number ([1]) of your nodes to ensure the proper return value. Learn this and more during this lecture.

02:15

The “root node” has two properties that allow you to access the full HTML document. They are document.documentElement which is considered the full document. Learn this and more during this lecture.

Section 21: Adding and Removing DOM Nodes
04:59

When using JavaScript to create new elements, or nodes, there are several steps that need to be followed. Firstly, you must create the new element and then append it to an existing element. Learn this and more during this lecture.

03:06

JavaScript allows you to remove existing HTML elements to help control the content and style of your HTML document. To remove an existing HTML element you must know the parent node of the element you wish to remove. Learn this and more during this lecture.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

TeachUcomp, Inc., Quality Software Training

Founded in 2001, TeachUcomp, Inc. began as a licensed software training center in Holt, Michigan - providing instructor-led, classroom-style instruction in over 85 different classes, including Microsoft Office, QuickBooks, Peachtree and web design, teaching staff at organizations such as the American Red Cross, Public School Systems and the Small Business Association.

At TeachUcomp, Inc., we realize that small business software can be confusing, to say the least. However, finding quality training can be a challenge. TeachUcomp, Inc. has changed all that. As the industry leader in training small business software, TeachUcomp, Inc. has revolutionized computer training and will teach you the skills to become a powerful and proficient user.

In 2002, responding to the demand for high-quality training materials that provide more flexibility than classroom training, TeachUcomp, Inc. launched our first product - Mastering QuickBooks Made Easy. The enormous success of our first tutorial led to an ever-expanding product line. TeachUcomp, Inc. now proudly serves customers in over 80 different countries world-wide including individuals, small businesses, non-profits and many others. Clients include the Transportation Security Administration, NASA, Smithsonian Institution, University of Michigan, Merrill Lynch, Sprint, U.S. Army, Oracle Corporation, Hewlett-Packard and the U.S. Senate.

Our full-time staff of software training professionals have developed a product line that is the perfect solution for busy individuals. Our comprehensive tutorials cover all of the same material as our classroom trainings. Broken into individual lessons, you can target your training to meet your needs - choosing just the lessons you want (and having the option to watch them all if you like). Our tutorials are also incredibly easy to use.

You will listen and watch as our expert instructors walk you through each lesson step-by-step. Our tutorials also feature the same instruction manuals (in PDF) that our classroom students receive - and include practice exercises and keyboard shortcuts. You will see each function performed just as if the instructor were at your computer. After the lesson has finished, you then "toggle" into the application and practice what you've learned - making it the most effective interactive training solution to learn on your own.

Ready to start learning?
Take This Course