Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreA Gentle Introduction To JavaScript For Absolute Beginners
Rating: 4.5 out of 54.5(50 ratings)
455 students
A Gentle Introduction To JavaScript For Absolute Beginners
Learn Vanilla JavaScript Without Frameworks...A First Step
Created byCharlie Chiarelli
Last updated 8/2024
English
What you'll learn
- The basic building blocks of Javascript as well as some helpful tips on computer programming in general
- How to add a script to a Web page, store and manipulate information and add smarts to a program so it can respond to different situations.
- Create real world examples of JavaScript in action including making your own web form more usuable by adding validations
- Create rollover effects and simple animations
- Work with Selection and Repetition structures (if statements and loops)
- Work with the concept of Arrays (one and two dimensional)
- Learn to manipulate Strings
- Work with dates
Explore related topics
Course content
5 sections • 36 lectures • 8h 10m total length
- Welcome2:59
In this Lecture we will
Learn about the instructor for this course ... Charlie Chiarelli
Retired Highschool Computer Science Teacher with over 35 years experience
Online instructor for the past 10 + years
Udemy instructor for the past 4 years
6th course on Udemy
Learn about the Aim of the Course
What you will learn ( the vanilla version of Javascript for true beginners) and what you won't (REACT/ANGULAR)
Highlight some Helpful Skills to have
o Basic understanding of how a web page is created with HTML
o Some knowledge of CSS will help but is not required
Discuss what you need to succeed… a philosophy
Highlight some of the ways this course will help you succeed
o Each lecture starts with a list of objectives/speaking notes
o Every example covered in the lecture is available for download in the resources section … including the objectives/speaking notes
o Almost every lecture has a set of Practice problems with full solutions provided
o The instructor is available for help … replying most times within a day
- Why JavaScript3:26
In this Lecture we will
Learn that JavaScript has become an essential web technology along with HTML and CSS, as most browsers implement JavaScript. Thus, You must learn JavaScript if you want to get into web development, and you must learn it well if you're planning on being a front-end developer or on using JavaScript for backend development.
Learn that as with everything in this world, there are people who are against the learning of this language as well. And it has nothing to do with whether JavaScript is dying or not: It’s because due to the presence of so many JavaScript frameworks, many beginners skip learning the basic, vanilla JavaScript programming language and move directly towards learning how to implement its frameworks. Frameworks are awesome as they provide ready-to-use code that’s easier to read and debug. But because these frameworks provide an easier way to put code together, newbie programmers don’t get a solid foundation in JavaScript; something that annoys the more seasoned developers and programmers out there.
Learn that JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects.Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.
Learn that JavaScript can make web pages more useful by supplying immediate feedback. For example, a JavaScript-powered shopping cart page can instantly display a total cost, with tax and shipping, the moment a visitor selects a product to buy. JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing necessary information.
Learn that JavaScript doesn’t suffer from the frustrating delay associated with server-side programming languages like PHP, which rely on communication between the web browser and the web server. Because it doesn’t rely on constantly loading and reloading web pages, JavaScript lets you create web pages that feel and act more like desktop programs than web pages.
Learn that JavaScript is also becoming increasingly popular for server-side Development. The Node.js platform (a version of Google’s V8 JavaScript engine that runs JavaScript on the server) is being embraced eagerly by companies like Walmart, PayPal, and eBay. Learning JavaScript can even lead to a career in building complex server side applications. In fact, the combination of JavaScript on the front end (that is, JavaScript running in a web browser) and the back end (on the web server) is known as full stack JavaScript development.
- What You Need ... Course Specifics11:38
In this Lecture we will
Highlight the software you need to participate in the course
Editors
HTML-Kit
1st Page
These editors are fairly dated ,but at the end of the day, this is coding! It’s not supposed to be a pretty process, it’s supposed to help you create a pretty end product!
Visual Studio Code
7zip
- What You Are Going To Learn12:36
In this Lecture we will
Learn about some of the concepts and applications we will create ... a sampling of
JavaScript Basics
variables, assignment statements, simple user input and output
Core Concepts
Document Object Model,events, functions
Intermediate Concepts
Conditional statements, working with check boxes , radio buttons, image swapping and animation
Advanced Concepts
Repetition, One and Two Dimensional arrays, String commands, drop down lists, the window object and dates
- HTML ... The Structural Layer9:49
In this Lecture we will
Learn that a typical website is made up of three layers ... Structural (HTML) , Presentation (CSS) and Behavioral (Javascript)
If your web page were a movie, HTML would be the screenwriter, CSS would be the art director, scripting languages would be the special effects
Review the concept that HTML provides the structural layer, organizing content like pictures, and words in a meaningful way
HTML (Hypertext Markup Language) uses simple commands called tags to define the various parts of a web page. For example, this HTML code creates a simple web page:
<!DOCTYPE html>
<html>
<head>
<title>Hey, I am the title of this web page.</title>
</head>
<body>
Hey, I am some body text on this web page.
</body>
</html>
Learn how to create a simple HTML web page using HTML-Kit
Discuss how Historically, there have been many doctypes—HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict—but they required a long line of confusing code that was easy to mistype. HTML5’s doctype—<!DOCTYPE html>—is
short, simple, and the one you should use.
Learn that within the <body> tag, you commonly find tags like the following:
You tell a web browser where a paragraph of text begins with a <p> (opening paragraph tag), and where it ends with a </p> (closing paragraph tag).
The <strong> tag emphasizes text. If you surround some text with it and its partner tag, </strong>, you get boldface type. The HTML snippet <strong>Warning! </strong> tells a web browser to display the word “Warning!” in bold type.
The <a> tag, or anchor tag, creates a hyperlink in a web page. When clicked, a hyperlink—or link—can lead anywhere on the Web. You tell the browser where the link points by putting a web address inside the <a> tags. For instance, you
might type <a href="http://www.cnn.com">Click here!</a>.
- CSS ... The Presentation Layer8:33
In this Lecture we will
Review the concept that CSS (Cascading Style Sheets) provide the presentational layer, making the content in the HTML look good. Cascading Style Sheets specify how the HTML is presented...the colors, fonts, borders, margins, and the layout of your page. CSS gives you style, and it does it in a way that is separate from the structure of the page.
Learn that CSS, adds design flair to well-organized HTML content, making it more beautiful and easier to read. Essentially, a CSS style is just a rule that tells a web browser how to display a particular element on a page. For example, you can
create a CSS rule to make all <h1> tags appear 36 pixels tall, in the Verdana font, and in orange. CSS can do more powerful stuff, too, like add borders, change margins, and even control the exact placement of a page element.
A single style that defines the look of one element is a pretty basic beast. It’s essentially a rule that tells a web browser how to format something—turn a headline blue, draw a red border around a photo, or create a 150-pixel-wide sidebar box to
hold a list of links.
A style is, in fact, made up of two elements: the web page element that the browser formats (the selector) and the actual formatting instructions (the declaration block).
p { color: red; font-size: 1.5em; }
This style simply says, “Make the text in all paragraphs—marked with <p> tags—red and 1.5 ems tall.” (An em is a unit or measurement that’s based on a browser’s normal text size.)
Take a look at some simple HTML pages which incorporates styles
Style1.html
Style2.html ... uses the id selector (The id of an element should be unique within a page, so the id selector is used to select one unique element! )
Style3.html ... uses the class selector
- JavaScript ... The Behavioral Layer5:13
In this Lecture we will
Learn that JavaScript (“JS” for short) is a cross-platform, Object-oriented scripting language, a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites.
Dynamic vs Static code
Dynamic code: The word dynamic is used to describe both client-side JavaScript and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required.
Static code: A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.
Learn that JavaScript adds a behavioral layer , bringing a Web page to life so it interacts with Web visitors.
JavaScript can be run outside of the web browser by using something like Node.js. However, when run in a web page (aka one written with HTML and CSS), JavaScript has access to the page's HTML and CSS and can make changes to them. JavaScript's main purpose is to manipulate HTML and CSS.
By itself, HTML doesn’t have any smarts: It can’t do math, it can’t figure out if someone has correctly filled out a form, and it can’t make decisions based on how a web visitor interacts with it. Basically, HTML lets people read text, look at pictures, watch videos, and click links to move to other web pages with more text, pictures, and videos. In order to add intelligence to your web pages so they can respond to your site’s visitors, you need JavaScript.
Discuss the difference between Java and Javascript
Despite the unfortunate naming which causes a lot of confusion, there's a huge difference between Java and JavaScript.
Java is an object-oriented (class based) language and JavaScript is an object-based language. The difference here is very subtle.
Both languages treat "program "elements — such as a text field or a pop-up window — as objects, which can pass instructions to one another. But a true object-oriented language, as Java is, also makes heavy use of inheritance: Objects can be extended by inheriting functionality from existing objects and adding new attributes. JavaScript does not have this ability; with JavaScript, objects can be created, but cannot inherit properties. Object-oriented languages can also make use of encapsulation, overloading and polymorphism.
JavaScript is interpreted by the client , Java is compiled on server before execution on client
JavaScript code is integrated with and embedded in HTML whereas Java applets are distinct from HTML (accessed from HTML pages)
JavaScript variable data types are not declared (loose typing) whereas Java variables must be declared (strong typing)
Discuss the difference between Compiled vs Scripting (Interpreted) Languages
Most of the programs running on your computer are written using languages that are compiled. Compiling is the process of creating a file that will run on a computer by translating the code a programmer writes into instructions that a computer can understand. Once a program is compiled, you can run it on your computer, and because a compiled program has been converted directly to instructions a computer understands, it will run faster than a program written with a scripting language. Unfortunately, compiling a program is a time-consuming process: You have to write the program, compile it, and then test it. If the program doesn’t work, you have to go through the whole process again.
A scripting language, on the other hand, is only compiled when an interpreter (another program that can convert the
script into something a computer can understand) reads it. In the case of JavaScript, the interpreter is built into the web
browser. So when your web browser reads a web page with a JavaScript program in it, the web browser translates the JavaScript into something the computer understands. As a result, a scripting language operates more slowly than a compiled language, because every time it runs, the program must be translated for the computer. Scripting languages are great for web developers: Scripts are generally much smaller and less complex than desktop programs, so the lack of speed isn’t as important. In addition, because they don’t require compiling, creating and testing programs that use a scripting language is a much faster process.
Discuss the difference between Client Side and Server Side
Javascript is a client-side language which means that it works inside a Web browser.
The alternative type of Web programming language is called server side, which you will find in pages built around PHP, .NET etc. Server side programming languages as the name suggest run on a Web sever. They can exhibit a lot of intelligence by accessing databases, processing credit cards. The problem with server side languages is that they require the Web browser to send requests to the server, forcing visitors to wait until a new page arrives.
Client side languages on the other hand can react immediately and change what a visitor sees in his web brower without the need to download a new page. Content can appear and disappear or automatically update based on how a visitor interacts with the page.
Node.js lets developers use JavaScript for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm unifying web application development around a single programming language, rather than different languages for server side and client side scripts.
- Writing Your First Javascript Program6:14
In this Lecture you will
Get acquainted with using the HTML editor HTML-Kit
declaring Javascript is located in Objects Tab ... comment enclosures and type no longer required
prep preview in default browser
Write our first JavaScript Program
Create your page just like you always do, with HTML content and CSS style. And you also include JavaScript in your page. As you’ll see, just like HTML and CSS, you can put everything together in one file, or you can place JavaScript in its own file, to be included in your page.
Learn to put JavaScript code in the HEAD tag (FirstInternal.htm)
Create a simple script using the "alert" command
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<script>
alert('Hello World!');
</script>
</head>
Demo how to create an external JavaScript program (FirstExternal.htm/FirstExternal.js)
<script src="filename.js"> </script>
Notes:
Ctrl-Shft-J accesses Chrome's Developer Console Window
Visual Studio Code ... professional editor... powerful but not beginner friendly
- Simple Output Techniques9:20
In this Lecture we will
Highlight a number of techniques to display output on a Web Browser
document.write (Output1.html/Output2.html)
note: Save As ... HTML files (*.html; *.htm)
note: use of <BR> within document.write
revisit the alert command .... with a line feed '\n'
alert("Hello" + '\n' + "There");
Notes:
// is used for comments
; at the end of each statement
- Variables and Assignment Statements15:59
In this Lecture we will
Update the HTML-Kit editor to include a User created template (CCjavascript)
only <!doctype html> at the top of the html doc
comment enclosures and type statement no longer required
Learn how to declare storage locations (variables) for numbers and text (strings) and then place data (assignment statements) in those locations
var score is a variable declaration
var score=78 is an assignment statement
score=score+1 ... updates score to 79
score++ ... means the same thing
score = score + 10 ..... score +=10
Variables1.html (text declarations and assignments)
Variables2.html (numeric declarations, assignments, and calculations)
Unlike most programming languages Javascript doesn't allow you to explicitly set the type of variable. Instead the type is implied when you set the value of the data.
Javascript is a case sensitive language. This means that language keywords, variables, function names must always be typed with a consistent capitalization of letters.. eg while NOT WHILE. HTML is not case sensitive
- Simple User Input Techniques18:18
In this Lecture we will
Introduce several techniques that prompt the user to enter numbers or text and store those results for later processing and output
prompt and confirm commands
Input1.html
Input2.html (introduces parseInt to convert text to numbers in calculations)
Provide you with an exercise to practice the concepts covered in the Lecture.
InputExercise.html
- The Basics Quiz
- Events12:28
In this Lecture we will
Learn that HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Learn that when events happen, you may want to do something. JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
<element event="some JavaScript">
Work through a number of examples to demonstrate some simple events
Events1onload.html
Events2onclickonmouseover.html
Events3onmouseoveronmouseout.html
Events4onclickbutton.html
Provide you with an exercise to practice the concepts covered in the Lecture.
EventsExercise.html
- Functions Part 1 ... The Basics14:54
In this Lecture we will
Learn that a JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3)
{
// code to be executed
}A Function is much the same as a Procedure or a Subroutine, in other programming languages.
Learn that functions implemented in Javascript programs can reduce code redundancy and make code easier to follow
You can reuse code: Define the code once, and use it many times.
Create several simple examples to illustrate how a function works
FunctionIntro.html
move myfunction call into body and observe error
... when it's called within the body it must be part of an event
FunctionEventIntro.html
here we call a function within a button... can also be attached to a link
Functions with parameters
FunctionParameter1
FunctionParameter2 (passing color values... to change background)
Functions that return values
FunctionReturn.html
- Functions Part 2 ... The Document Object Model ( DOM)19:54
In this Lecture we will
Learn that the The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Learn that in the DOM, all HTML elements are defined as objects.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).
Look at an example that changes the content (the innerHTML) of the <p> element with id="demo" (DomIntro1.html)
<!DOCTYPE html>
<html>
<body><h2>My First Page</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
In the example above, getElementById is a method, while innerHTML is a property.
The most common way to access an HTML element is to use the id of the element. In the example above the getElementById method used id="demo" to find the element.
The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element, including <html> and <body>.
The HTML DOM Document Object
The document object represents your web page. If you want to access any element in an HTML page, you always start with accessing the document object.
document.getElementById(id) Find an element by element id
element.innerHTML = new html content Change the inner HTML of an element
Learn how to change the value of an HTML attribute, using this syntax: document.getElementById(id).attribute = new value
(DomIntro2.html)
This example changes the value of the src attribute of an <img> element:
<html>
<body>
<img id="myImage" src="redArrow.gif"><script>
document.getElementById("myImage").src = "blueArrow.gif";
</script>
</body>
</html>Go through a series of examples that which incorporate the DOM principles
DomIntro3Button.html
DomIntro4Function.html
DomIntro5StopGo.html
DomIntro6Mousedown.html
The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used.
In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In an event, this refers to the element that received the event.
- Functions ... Challenge Problem Set 110:30
In this Lecture we will
Challenge you to solve two problems
StopGoMouseDown.html
reviews mouse events, functions and DOM
HappySad.html
reviews onload event, styles, functions, variables, prompt, alert and DOM
- Functions Part 3 ... Working with Forms15:48
In this Lecture we will
Learn how to code some simple forms containing text boxes and buttons in HTML
Form1Intro.html
Learn that in order to work with forms in JavaScript, it is imperative to obtain references to the form object and its elements.
There are many ways of accessing form elements, of which the easiest is by using the cross-browser DOM document.getElementById() method.
Form2IntroFunction.html (note: use of '\n')
Form3MathCalculation.html
Form4onfocus.html
Provide you with an exercise to practice the concepts covered in the Lecture.
IntroFormExercise.html
- Challenge Problem Set 210:19
In this Lecture we will
Challenge you to solve three problems
Problem1.html
Problem2.html
Problem3.html
- Event Listeners13:25
In this Lecture we will
Learn that a fundamental problem event handlers is that we can’t assign multiple handlers to one event.
For instance, one part of our code wants to highlight some text on a button click, and another one wants to show a message.We’d like to assign two event handlers (usually calls to functions) for that. But a new DOM property will overwrite the existing one:
Web-standard developers understood that long ago and suggested an alternative way of managing handlers using special methods addEventListener and removeEventListener. They are free of such a problem.
Learn about the addEventListener() method and how it attaches an event handler to the specified element.
The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e two "click" events.
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
The addEventListener() method makes it easier to control how the event reacts to bubbling.
When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener() method.
Work through a number of examples illustrating how to use the addEventListener method
Listener1.html (simple case... one button, one event, one function)
Listener2.html (one button, two click events, two functions)
Listener3.html (one button, three different events, three functions)
Listener4.html (removeEventListener)
- Scope of Variables ... Local vs Global11:01
In this Lecture we will
Learn that Scope determines the accessibility (visibility) of variables.
Learn that In JavaScript there are two types of scope:
Local scope
Global scope
Take a deeper look at Local variables (LocalScope.html)
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables have Function scope: They can only be accessed from within the function.
Example
// code here can NOT use cityName
function myFunction() {
var cityName = "Toronto";
// code here CAN use cityName
}Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the function is completed.
Take a deeper look at Global variables (GlobalVariables.html)
A variable declared outside a function, becomes GLOBAL.
A global variable has global scope: All scripts and functions on a web page can access it.
Example
var cityName = "Toronto";
// code here can use cityName
function myFunction() {
// code here can also use cityName
Learn about automatic global variables (AutomaticGlobal.html)
If you assign a value to a variable that has not been declared (using var) , it will automatically become a GLOBAL variable.
This code example will declare a global variable carName, even if the value is assigned inside a function.
Example
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
Challenge you to determine what is wrong with some sample Javascript code that should work out Fahrenheit to Celsius conversions.
TempConversionWrong.html -> TempConversionFixed.html
- The Next Step Quiz
- Conditional Statements Part 118:07
In this Lecture we will
Learn that Conditional statements are used to perform different actions based on different conditions. Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
Learn that in JavaScript we have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed
Create several simple programs to demonstrate the basic IF Conditional
Conditional1.html (note the use of == for equality)
Conditional2.html (note the use of && || ... compound conditions
Conditional3.html (window.location)
Create several simple programs to demonstrate Conditionals using the else and else if structure
ifelse.html (guess the number)
ifelseif.html (real guess the number game using random numbers)
Provide you with an exercise to practice the concepts covered in the Lecture.
MaleFemale.html
GuessWithTries.html
- Conditional Statements Part 219:27
In this Lecture we will
Learn how to check for numeric and non-numeric values (NotANumberExample.html/ValidatingInput.html)
NaN (not a number)
alert (is NaN("Frank")) ... returns true
alert (isNaN(10)) ... returns false
alert (isNaN("10")) ... returns false
Learn how to implement the switch conditional statement
Switch1.html
Switch2.html
Challenge you to create several simple applications incorporating the new concepts covered in this lecture
SquareRoot.html
Burgers.html
- Conditional Statements Part 3 ... Checkboxes and RadioButtons19:52
In this Lecture we will
Learn how to add Checkboxes to HTML forms and reference them in Javascript
Check1.html
Check2.html
Check3.html
Check4.html
Learn how to add Radiobuttons to HTML forms and reference them in Javascript
Radio1.html
note that all the radio buttons have the same "name" that way they form a group where only one button can be chosen ... pick one the other ones are unchosen
Challenge you to create a simple applications incorporating some of the new concepts covered in this lecture
CheckBoxProblem.html
PassportProblem.html
- Image Swapping ... Rollovers Part 118:37
In this Lecture we will
Acquaint ourselves with Rollovers a fine old tradition in web design. They basically involve changing one thing to another thing when the cursor hovers over it. If you use an image for a link, for example, you could swap that image with another one when it is hovered over.
Learn that the earliest rollovers used JavaScript to swap one img element with another. (RolloversInto.html/RolloversIntro2.html)
<img id="img1" src="images/closed.jpg" onMouseOver="doMouseOver()" onMouseOut="doMouseOut()" />
<script >
function doMouseOver()
{
document.getElementById("img1").src="images/open.jpg"
}
function doMouseOut()
{
document.getElementById("img1").src="images/closed.jpg"
}
</script>
Then CSS came along and, using hover, we could easily change a background image in a link using.
a:hover { background-image: url(images/yourpic.jpg); }
Challenge you to create a simple rollover effect using the new concepts covered in this lecture
RollOverProblem.html
- Rollover Part 220:00
In this Lecture we will
Extend our knowledge of rollovers by demonstrating and creating more advanced applications
ImageMapRollover.html
Preloading Images (PreloadingImages.html)
To reduce loading times and unexpected behavior, it can be desirable to load images into the browser's cache as soon as a page is loaded, especially when those images will not be needed right away.
One of the built-in object types in JavaScript is the Image object. This object can be used to represent an HTML image tag on the page.
Complex Rollovers (ComplexRollovers.html)
Challenge you to create a menu that utilizes rollover effects using the new concepts covered in this lecture
rollovermenu
- Animation19:02
In this Lecture we will
Learn about JavaScript Timing Events and how they can be used to create simple animations
Learn that The window object allows execution of code at specified time intervals. These time intervals are called timing events. The two key methods to use with JavaScript are:
setTimeout(function, milliseconds) setTimeout.html
Executes a function, after waiting a specified number of milliseconds.
The first parameter is a function to be executed.The second parameter indicates the number of milliseconds before execution.
setInterval(function, milliseconds) setInterval.html
Same as setTimeout(), but repeats the execution of the function continuously.
The first parameter is the function to be executed.
The second parameter indicates the length of the time-interval between each execution.
Create two simple animations which utilize the setInterval and setTimeout commands
Animation1.html
Animation2.html
Challenge you to create your own animation
- Intermediate Concepts Quiz
- Using Javascript Arrays21:07
In this Lecture we will
Learn that The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type.
Use the following syntax to create an Array
var fruits = new Array( "apple", "orange", "mango" );
You can also create array by simply assigning values as follows .... this is the preferred method.
var fruits = [ "apple", "orange", "mango" ];
You will use index numbers to access and to set values inside an array as follows.
fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third elementThis single name, index access is why arrays are so useful. They reduce the amount of code you require.
Create a simple application which illustrates how to use Arrays
ArrayIntro1.html
Demonstrate an array application which loops through the array contents
ArrayIntro2.html
Work through several practical applications which implement arrays
slideshow (SlideShow1.html)
hyperlinked slideshow (SlideShow2.html)
note use of Javascript:newLocation() in anchor
randomized starting slide and external javascript file (SlideShow3.html)
user controlled slide show (SlideShow4.html) ... You create one like this
- Repetition ... The While Loop and For Loop18:12
In this Lecture we will
Learn that Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
Learn JavaScript supports a number of different kinds of loops:
for - loops through a block of code a number of times
while - loops through a block of code while a specified condition is true (check at the beginning)
do/while - also loops through a block of code while a specified condition is true (check at the end)
Create several simple examples which illustrate how a while loop works
While1.html
While2.html
While3.html
Create several simple examples which illustrate how a for loop works
For1.html
For2.html
Take a look at an application of Repetition with a simple Battle Ship game
BattleShip.html
- Arrays Revisited Part 118:45
In this Lecture we will
Add to our Array skills by
incorporating our new looping knowledge
declaring an empty array and adding contents to it
ArraysRevisited1.html
ArraysRevisited2.html
data entered via user input
note use of push method ... adds new data to end of list
Take a look at some practical applications of Arrays and Repetition
ArraysRevisited3.html
note use of ... var radioButtons= document.getElementsByName("group");
this creates a control array of radioButtons[0] ... radioButtons[2] that can be checked in a for loop
ArraySort.html
uses sort method of Arrays
Challenge you to create a simple applications incorporating some of the new concepts covered in this lecture ... like ArraysRevisited3.html
- Arrays Revisited Part 211:16
In this Lecture we will
Focus on one practical application of arrays involving a Reservation System for a car rental agency
RentalCar.html
Challenge you to create an application similar to the Car Rental Reservation System
Concert seats
Banquet Hall rooms
Airline seats
... etc
- Working with Two Dimensional Arrays19:37
In this Lecture we will
Learn that you can visualize one dimensional arrays as lists and two dimensional arrays as tables
Generally, creating two dimensional arrays is very similar to creating one dimensional arrays . Some languages allow you to create two dimensional arrays simply by adding an index item
int[,] intArray = new int[3,2]{{1, 2}, {3, 4},{5, 6}};
intArray[0,0] = 1 intArray[0,1] = 2
intArray[1,0]= 3 intArray[1,1]; = 4
intArray[2,0] = 5 intArray[2,1]= 6
However JavaScript doesn't support two dimensional arrays. JavaScript, does however, allow you to emulate a two dimensional array. You can do this by creating an "array of an array". (TwoDIntro.html)
Create a simple Quiz application incorporating Two Dimensional Arrays (Quiz.html)
Create and use a multidimensional arrays
Create and using functions
Use events (eg. load event) ... EventListener
Add user input such as radio buttons
then we use getElementsByName because we have an Radiobutton array which it will loop through
Use For loops to repeat code
Use if statements to test conditions
- Manipulating Strings13:35
In this Lecture we will
Acquaint ourselves with several of the String methods that you can use in JavaScript
Strings1.html
length
substr(start,length)
indexOf("letter")
String2.html
split (" ") converts a string to an array
Challenge you with the Reverse String Problem
StringReversal.html
- Working with Drop Down Lists16:32
In this Lecture we will
Learn how to create Drop Down Lists with HTML
Learn how to work with Drop Down Lists using JavaScript code ... a progression of simple examples
DropDownList1.html
DropDownList2.html
DropDownList3.html
DropDownList4.html
Challenge you to create the ChangeColors.html application
- Challenge Problem6:08
In this Lecture we will
Challenge you to create an application which implements a drop down list of politicians and displays an image of the selected individual.
ComboExercise.html
- The Window Object12:55
In this Lecture we will
Learn that The JavaScript window object has quite a few properties and methods, but beware because many of them are not supported in all major browsers. However, the information you can obtain using the window object can be extremely important depending on what you want to do. For example, maybe for some reason you want to know the size of the user’s window. Using the window object is the primary way you would get this information.
window.innerHeight gets or sets the inner height of the actual content area
window.innerWidth gets or sets the inner width of the actual content area
Discuss the Popups and windows methods
A popup window is one of the oldest methods to show additional document to user. Basically, you just run:
window.open('http://javascript.info/')
… And it will open a new window with given URL. Most modern browsers are configured to open new tabs instead of separate windows. (windows1.html/page2.html)
Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: JavaScript is able to send requests for server, so popups are rarely used. But sometimes they are still handy.
Modern Usage
many shops use online chats for consulting people. A visitor clicks on the button, it runs window.open and opens the popup with the chat.
window.open
The syntax to open a popup is: window.open(url, name, params):
url An URL to load into the new window.
name A name of the new window. Each window has a window.name, and here we can specify which window to use for the popup. If there’s already a window with such name – the given URL opens in it, otherwise a new window is opened.
paramsThe configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: width:200,height=100.
Settings for params:
Position:
left/top (numeric) – coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
width/height (numeric) – width and height of a new window. There is a limit on minimal width/height, so it’s impossible to create an invisible window.
Window features:
menubar (yes/no) – shows or hides the browser menu on the new window.
toolbar (yes/no) – shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
location (yes/no) – shows or hides the URL field in the new window. FF and IE don’t allow to hide it by default.
status (yes/no) – shows or hides the status bar. Again, most browsers force it to show.
resizable (yes/no) – allows to disable the resize for the new window. Not recommended.
scrollbars (yes/no) – allows to disable the scrollbars for the new window. Not recommended.
Examples
windows2.html/page2.html (note use of Javascript:close())
windows3.html/page2.html
OpenCloseWindows.html
ImagePopup.html
- Working with Dates21:15
In this Lecture we will
We take a closer look at the JavaScript Date Object
Learn that Date objects are created with the new Date() constructor.
new Date() (date1.html)
By default, JavaScript will use the browser's time zone and display a date as a full text string:
Tue Jan 08 2019 19:57:13 GMT-0500 (Eastern Standard Time)
new Date("2015-03-25" )
returns Tue Mar 24 2015 20:00:00 GMT-0400 (Eastern Daylight Time)
Learn that there are a number of methods that can be used for getting information from a date object:
getFullYear() Get the year as a four digit number (yyyy)
getMonth() Get the month as a number (0-11)
getDate() Get the day as a number (1-31)
getHours() Get the hour (0-23)
getMinutes() Get the minute (0-59)
getSeconds() Get the second (0-59)
getMilliseconds() Get the millisecond (0-999)
getTime() Get the time (milliseconds since January 1, 1970)
getDay() Get the weekday as a number (0-6)
Date.now() Get the time. ECMAScript 5.
Learn that there are generally 3 types of JavaScript date input formats:
ISO Date "2015-03-25" (The International Standard)
Short Date "03/25/2015"
Long Date "Mar 25 2015" or "25 Mar 2015"
Create several simple applications which implement the Date Object
date2.html
Give you an exercise which gives you an opportunity to practice creating your own Date Object applications
DateExercise.html
if time is between 12:00 am and 5:00 am
if time is between 5:00 am and 9:00 am
if time is between 9:00 am and 5:00 pm
if time is between 5:00 pm and 12:00 pm
Challenge ... Find a users age from their date of birth
BirthDateExercise.html
hints: recall ISO date format and use the split command to parse date
- The Wrap Up ... Where Do You Go From Here3:55
In this Lecture we will
Recap course content
Discuss appropriate content for future learning
Learn some more advanced JavaScript concepts
Dive into one of the popular Javascript Frameworks
Angular
React
Node
Discuss could I learn one of the Frameworks without knowing basic JavaScript
Can you learn how to ride a mountain bike uphill if you don't know how to ride a bicycle ?
... yes you can if you have a strong willpower, but it's going to be harder
React definitely needs more Javascript knowledge
Angular kind of uses it's own way of doing things so knowing Javascript isn't a huge advantage.
Take the time to understand the core principles of JavaScript before using shortcuts provided by the frameworks and libraries.
- Advanced Concepts Quiz
Requirements
- You should have a basic understanding of how to create simple web pages using HTML
- Having some knowledge of CSS will help but it's not required
- Programming is serious business. You’re going to have to work, sometimes hard. If you’ve already had some programming experience, then you know what we’re talking about. If you’re coming straight from HTML and CSS, then you’re going to find writing code is a little, well, different. Programming requires a different way of thinking. Programming is logical, at times very abstract, and requires you to think in an algorithmic way. But no worries; we’re going to do all that in a friendly way. Just take it a bit at a time. That way, these new programming concepts will really sink in.
Description
JavaScript has become an essential web technology along with HTML and CSS, as most browsers implement JavaScript. Thus, You must learn JavaScript if you want to get into web development, and you must learn it well if you're planning on being a front-end developer or on using JavaScript for backend development.
JavaScript is a good choice for your first programming language. JavaScript is nearly ubiquitous. And you can use to develop all sorts of applications. Many websites you probably use every day rely on JavaScript, including Gmail, Facebook, Twitter, Instagram, and Spotify.
JavaScript is easy. I’m not the first one or last one to point out this, because this fact is very well known across the industry. This is why it is a very good starting point for those interested in learning to code.
JavaScript is a real programming language: It doesn't work like HTML or CSS and it has its own set of rules... and although it's not always easy for Web Designers to switch gears and start thinking like computer programmers, my hope is that my gentle introduction will make your transition easier.
The goal of this course isn't to turn you into the next great programmer. This course is meant to familiarize Web Designers and Newbie Programmers with the ins and outs of JavaScript and then move on to more advanced concepts and tools for adding really useful interactivity to a Web site as quickly and easily as possible. Perhaps best of all, JavaScript is actually built into your browser, so you don’t have to install anything to start programming in it. That makes it incredibly accessible. There’s a good chance you’ll find the basics easy to learn, but don’t worry because there are plenty of advanced concepts to keep you busy learning for a very long time.
In the past several years, JavaScript has undergone a rebirth, fueled by high-profile websites like Google, Uber, Nexflix which use JavaScript extensively to create interactive web applications. There’s never been a better time to learn JavaScript. With the wealth of knowledge and the quality of scripts being written, you can add sophisticated interaction to your website—even if you’re a beginner.
And finally please do not judge a book by it's cover don't judge the course by the title or this small description section, if you want to know exactly all the topics covered please go to:
COURSE CONTENT
Sections
Lectures (press the down arrow) This will open up literally thousands of lines of very detailed lecture descriptions leaving no doubt what is and what is not covered.
Who this course is for:
- Beginner web developers/programmers who want to learn how to implement JavaScript to create interactive Web Applications
- This course can act as a stepping stone to learning more advanced JavaScript implementations that incorporate modern frameworks like React and Angular
- This course is not for experienced web developers