JavaScript How to create Dynamic and Interactive Web pages

Get started with JavaScript coding in under 2 hours.  Fast paced course to get you coding quickly.  Dive right in start coding right away.   Learn the core and fundamentals needed to create interactive and dynamic web page content.  Let your web pages come to life.    Quick start with everything you need to code JavaScript.   Source code included - try it for yourself and see what you can do with JavaScript.

Course is designed to get viewers started with using JavaScript to develop web content.  We discuss all the basics of getting started and the basics of JavaScript.  Explore how you can write JavaScript Code

JavaScript is one of the basic languages used to create powerful web experiences.

We cover basic script tags and how they work demonstrating how to apply the code to make things happen.

The course will take students from the very basics of JavaScript teaching how to being to implement script tags and create basic JavaScript experiences then to connecting with Web page elements via the DOM document object model. 

Explore How to create Dynamic Web Pages with JavaScript

• Get ready to code Developer Setup Tools and resources to start JavaScript coding

• Create JavaScript code and run within the browser JavaScript Getting Started

• How to use JavaScript DataTypes and Objects and Array with example code

• Run blocks of code with JavaScript Functions how to apply functions within code

• How to create Interactive Web Pages with JavaScript select DOM elements

• Coding JavaScript Logic Conditions if statements switch and ternary operator

• How to apply loops iterate blocks of code JavaScript Loops For While foreach

• Common Built In methods JavaScript coding examples random values string methods

• Coding Project create an interactive Dynamic list with JavaScript code

Taught by an instructor with over 20 years of web development experience ready to help you learn more about JavaScript.

Join now start coding today.

Introduction to JavaScript

JavaScript is everywhere - all your favorite websites and also the ones you don’t like use JavaScript. Makes your web content come to life - JavaScript allows for interaction with content and makes things happen. JavaScript is the dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. Used in all browsers it's the most popular coding language ever. Websites and web apps everywhere are using JavaScript. It runs directly in your browser and you can create html files with a text editor directly on your computer to run in your browser. Select the html file and open it with any browser.

Code is a set of instructions for what you want to happen. Example : When a new person comes to your website, ask their name. Showing a welcome message with their name would be an example of something you might ask JavaScript to do. The instructions for the code would be to provide the user an input area, get the input value of their name, then use that value to return a response. Select a page element and update the contents of the element with the welcome message including the value of the input for the user's name.

The developer console shows you information about the currently loaded Web page, and also includes a console that you can use to execute JavaScript expressions within the current webpage. Open your browser, select the devtools and try it out, we will be using it in the lessons of this course. With most modern browsers you can write and execute javascript directly from your browser. Within the Chrome browser you can open DevTools when you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel.

You will need an editor to write your code. You can use Visual Studio code if you don’t already have an editor. First lesson will help you set up and start coding on your computer.

Getting started with JavaScript is easy: all you need is a modern Web browser. Create an index html file and open it in a browser Add JavaScript to the html either linking to a script file or JavaScript directly between the script tags in the HTML.

Getting Started with JavaScript

Double quotes and single quotes or backticks can be used to contain string content. A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons. It is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed. Whitespace is ignored in JavaScript code, you can use it for writing code that is more readable and understandable.

Creating variables -

var - Declares a variable, optionally initializing it to a value.

let - Declares a block-scoped, local variable, optionally initializing it to a value. Blocks of code are indicated by {}

const - Declares a block-scoped, read-only named constant. Cannot be changed.

Variables must be declared before you use them. Comma separate to declare multiple variables. Camelcase is more readable as in the example below.

let a,b,c,d;

let userfirstname = “Laurence”;

let userFirstName = “Laurence”;

Rules for naming variables must start with a letter, underscore (_), or dollar sign ($). Subsequent can be letters of digits. Upper or lower case. No spaces. No limit to the length of the variable name. Variable names are case sensitive. Cannot use reserved words.

JavaScript Data Types and JavaScript Objects

JavaScript uses different data types, JavaScript dynamically assigns the data type that it presumes is desired, you can also change data types of the variable if needed. Arrays are objects that have a preset order of items, using the index of the item to select and identify the item within the array list. Arrays also have built in methods which make them a powerful way to use the data and manipulate and select items contained in the array. Objects also can contain multiple items in the same variable, they are identified by a property name which is used in order to select the item from the object. Each property name can only be used once and is unique within the object. Property names can be set with quotes or as single words within the objects. They get assigned values as a pair with the property name, using the colon to assign the value and comma separate multiple named pair values.

JavaScript Functions

Functions provide a powerful way within code to run blocks of code, also they contain their own scope so variables set within the function can live only within that function. Create functions in code to do repeat code tasks, and handle specific coding objectives. You can pass values into a function then use those values within the function code, and return a result back from the function code. Functions can use arguments within the parameters, although they are not mandatory. Function also can use return although not mandatory to return a response from the function. You can pass values into function to be used within the code.

There are two types of functions, function declaration which uses the keyword function to assign the function code, or a function expression which is similar to assigning a variable a value, but in this case it's the function code.

// Function declaration

function test(num) {

return num;

}

// Function expression

var test = function (num) {

return num;

};

Interactive Web Pages JavaScript

JavaScript can connect to web page elements using the document object. The document object is built by the browser as a tree type structure to represent the entire web page contents of elements and their properties. Using JavaScript to access the DOM or Document Object Model from the browser allows us to within the code select page elements, and even update the page elements. The document object is a massive object that has its own set of methods and properties values that can all be selected and manipulated with JavaScript Code.

Using querySelector or querySelectorAll make a selection of your page elements, assign a variable to the element object in order to be able to easily use that object within your code.

You can update the textContent of the page element using the property value of textContent.

You can add event listeners on your elements with the onclick event object, assigning a function that gets invoked once the event is triggered. Try it out select a page element, add an event listener and then make some updates to the element using the various element property values.

Logic Conditions with JavaScript

Conditions can be used within code to apply logic, and run different actions based on the result of the condition. Depending on the value either True or False the code can run different blocks of code.

The if statement will check a condition, if true it runs the specified code. If false it does not run the code. Else provides an alternative if the condition is not true then else statement allows us to run a block of code on false if none of the previous conditions are true. You can also use the else if statement to check another condition with a separate block of code to be run if the previous condition came back as false.

Using the switch statement allows us to specify several alternatives checking to see if any of the conditions match and allow the corresponding code to be executed.

JavaScript code can use Comparison Operators to check if a statement is true or false. To check multiple conditions you can apply Logical Operators to check logic between conditions. The example below will show how to use the Logical operators and the results that can be expected with the various combinations of true or false.

JavaScript Loops For and While

Loops allow us to execute blocks of code a number of times, they also allow us to iterate through a list of items such as items in an array or other iterable list.

Loops will always require several parameters, such as a starting value, a condition to stop the loop and a way to move through the items to the next item in the loop. We can setup a simple for loop by setting a variable to use with a starting value, then applying a condition to continue the loop if the condition is true, and incrementing the value of the variable so that eventually the condition is no longer true.

Built In methods JavaScript

JavaScript has many built in methods, which are prebuilt functions that allow us to perform a certain predefined action. Math is an object in JavaScript that allows you to perform mathematical tasks on numbers, we can also generate random values with Math.

String methods help you to work with strings and do manipulations of the string values. Strings all have a length property with a returned value of the length of the string. Every character in the string has its own index value which allows us to use JavaScript code to select those characters.

JavaScript List Maker Course Project

Course project is designed to challenge you in applying what you have learned in the previous lessons. Use JavaScript to transform the index.html code, with three divs. Change the page elements to have one as an updatable field, the second into a submit button, and the third into a dynamic list that adds new items when the submit button is pressed. Take the value of the intake field, when the button is clicked and add that value as a new list item to the list in the last element. Clear the first element content and allow users to once again update the element with new content to be again added to the bottom of the list. Create event listeners so that when list items are clicked they update the font color either to red or toggle to black.