Modern JavaScript and Software Front-End Development

Discover why JavaScript drives modern front-end development and why becoming a JavaScript developer offers global opportunities. Follow a step-by-step path to join the programmer community and master the language.

Discover what a JavaScript developer does on the frontend, using JavaScript and CSS to build dynamic, interactive web pages and learn the process to become a proficient frontend developer.

Discover the basics of JavaScript, from setup with a text editor to writing hello world. Learn loops, arrays, the document object model (DOM), and select with query and select all.

Choose and use a JavaScript framework to speed web development by reusing prebuilt code and templates, while avoiding reinventing common features with plug-ins and libraries.

Explore the differences between JavaScript frameworks and libraries, defining frameworks as templates that provide a project skeleton, and libraries as pre-written code snippets for specialized features.

Explore the main frameworks and libraries in JavaScript, including angular, View, react, jquery, and d3, and learn when to use libraries versus frameworks for dynamic single-page and cross-platform web apps.

Learn how HTML, CSS, and JavaScript form the foundation of frontend development, focusing on DOM structure, tags and elements, script and style sections, and basic styling and scripting techniques.

Explore free editors for front-end work, including notepad, notepad plus plus, geni, and plaintext for mac, with guidance on downloading, saving, and editing HTML and JavaScript files.

Explore browser developer tools across Chrome, Firefox, and Edge to debug JavaScript, inspect sources and DOM, view line errors, and use the console for stepwise results.

Choose a design pattern early to make your JavaScript code flexible, reusable, and maintainable. Leverage proven, expressive design partners to solve problems efficiently, reduce refactoring, and lower code size.

Explore the difference between frontend and backend, showing how HTML and JavaScript create the visible web interface with styling, while servers, databases, and business logic power the backend.

Explore the document object model (DOM) as the object-oriented structure of a webpage that JavaScript uses to modify HTML elements, styles, and content via multiple APIs.

Learn how the front end communicates with the back end, contrasting synchronous operations with asynchronous updates via ajax, json, and xml while avoiding full page reloads.

Explore rest and GraphQL as front-end to back-end communication; rest follows representational state transfer for messaging, while GraphQL queries fetch the needed data from the server to suit client needs.

Identify essential frontend concepts beyond core technologies, including responsive design and accessibility. Learn how responsive design adapts layouts for mobile devices and how accessibility and inclusivity reach diverse users.

Learn how JavaScript adds interactivity to web pages by manipulating the DOM with HTML, displaying the date, and responding to mouse and click events.

Explore editing HTML and JavaScript files with common text editors, save and open documents, and choose suitable editors for front-end development.

Learn how to include JavaScript either via an external file with a script src or inline in the HTML, and how browser execution order governs variable and function availability.

Learn how to load scripts using external files, inline code, or references, and ensure scripts execute in the correct order.

Explore variables and functions in JavaScript, learn how to define and use variables with quotes and strings, and manage global or local scope while passing values to functions.

Learn how to declare variables using var and let in JavaScript, note the need for initialization, and see why modern practice favors let over var, with console log examples.

Explore types of variables in JavaScript—numbers, strings, booleans, arrays, and objects—through examples showing arithmetic, string concatenation, array indexing, and object property access.

Explore dynamic typing in JavaScript, where variable types are inferred from values without explicit definitions. See how quotes create strings and how the console reveals types.

Define constants to lock a value across scopes, inside a function or in a separate file, enabling reuse across the project. A constant cannot be changed, ensuring stable behavior.

Learn how to add single-line and multi-line comments in Java and JavaScript, place comments inside or outside functions, document code, and improve readability for other developers.

Explore JavaScript operators for numbers and strings, including +, -, *, /, and string concatenation. Use assignment and comparison operators like +=, ==, ===, >, and < in conditionals.

Explore JavaScript conditionals by building a number-guess form that uses if, else if, and else to compare input values, update labels, and handle a submit button click.

This lecture demonstrates building a browser-based number guessing game in JavaScript, using random numbers, input fields, and a submit button. It shows conditional logic, event handling, and DOM updates.

Explore how events interact with the DOM by selecting elements with querySelector, creating elements with createElement, and wiring click events to update game state, reset, and a random number.

Explore functions in JavaScript, including declaring, returning values, passing parameters, and calling one function from another to perform actions across files.

Learn to create strings with single or double quotes, concatenate them, and embed variables using template literals with ${}, while escaping quotes and noting numbers print as strings.

Explore strings as objects with length and substring, learn index-based access to characters, and practice dom updates by creating a paragraph and setting its text content.

Learn how to use the includes method to check if a string contains a substring, returning a boolean. See practical examples testing 'user' versus 'users' in a front-end JavaScript context.

Learn how to verify a string using starts with and ends with methods, and how to check for a substring within a string.

Explore locating substrings with indexOf, checking inclusion with includes, and handling positions in strings; learn to append via plus equal and verify results at runtime.

Explore locating multiple occurrences of a substring in a string by using the first position and offsetting searches for subsequent occurrences.

Demonstrate extracting substrings with slice using start and end positions, showing end-exclusion and zero-based indexing, and convert strings to upper or lower case with toUpperCase and toLowerCase.

Explore string methods with the update function, learning to replace the first occurrence or all occurrences of a substring, using a user-to-customer example in JavaScript front-end development.

Explore how arrays store multiple values as list-like objects and enable element-wise access. Iterate through the list, print prices, and sum totals for invoices.

Explore how arrays can hold multiple elements, access by position, check length, and update a single element with console demonstrations and diverse data.

Master array manipulation by pushing and unshifting elements, removing with pop and shift, and using splice and indexOf to locate and delete specific items.

Learn to print all items in an array by looping through an array of fruits and printing each fruit. The example shows accessing elements and printing them one by one.

Turn a string into an array by splitting on spaces or dots, then build an ordered list by iterating the tokens such as bananas, strawberry, papaya, and orange.

Use JavaScript to toggle the log in div visibility by switching its display between none and block, driven by a status variable and click interactions.

Use JavaScript to get the values of attributes of HTML elements, access elements by tag name, iterate over links, and display or log their attributes to build informative strings.

Use JavaScript to interact with a login form, adjusting button styles and layout, preventing default submit with return false, and validating name and password before alerting or processing.

Explore a hands-on example of a login form validation script in JavaScript, implementing email validation, form element access, and conditional logic to control submission.

Learn how to manage form input events with JavaScript, validate and submit forms, and transfer values between elements using events like onchange and keydown, including hidden fields for IP address.

Learn how to use JavaScript to dynamically alter HTML element styles, such as colors, borders, and backgrounds, by accessing elements via id or name and modifying element.style properties.

Learn the document object model by creating and appending elements, querying the DOM with a query selector and getElementsByTagName, and updating paragraphs and lists via createElement and appendChild.

Learn to use the document object in JavaScript to select elements by tag, class, or id, read inner text and title, and manipulate the document with properties, methods, and events.

Explore how the document object handles keyboard events by attaching a keydown listener that updates a paragraph and logs pressed keys.

Explore how the dollar sign enables embedding expressions in strings, enabling template-like interpolation and multi-line strings in JavaScript, using the exact keyboard symbol and curly brackets for expressions.

Explore the canvas API for 2D graphics in JavaScript, drawing shapes on a canvas element using getContext and fillStyle, with basics for animation, games, and data visualization.

Troubleshoot JavaScript by distinguishing syntax errors that halt execution from logic errors that produce incorrect results, using browser developer tools to locate and fix them.

Use developer tools to trace and fix JavaScript syntax errors, correct event listener references and capitalization, and validate fixes with console logs and class selector adjustments.

Fix a logic error by recognizing that a random number between zero and one becomes zero with floor; multiply by 100 to produce a 0–100 integer and correct gameplay.

Identify and fix common front-end JavaScript syntax errors, including missing semicolons, invalid assignments, unclosed braces or parentheses, and console errors, by carefully reviewing code and refreshing to reproduce issues.

Explore conditionals, loops, and functions in JavaScript to build reusable code and manage events. Build your own functions with return values and reusable logic across programs.

Explore advanced conditionals in JavaScript, using if, else if, and else, with boolean expressions, equality checks, and logical operators (and, or, not), including nested conditions and debugging with console.log.

Use the switch statement in JavaScript to handle conditionals. Update a paragraph when the weather select changes, using cases for sunny, rainy, snowing, overcast, and a default.

Demonstrates how the ternary operator tests a condition and returns one value or expression if true and another if false, with a live example updating background and text colors.

Explore looping with the for loop in JavaScript, including initialization, condition, and final expression. Learn to print sequences and iterate over arrays, using break and continue to control flow.

Explore looping structures in JavaScript by examining while and do-while loops, including initialization, conditions, and increments. See practical examples with a cats array and length-based iteration.

Explore the fundamentals of functions in JavaScript, including syntax, invoking, scope, and parameters, and see how built-in functions and methods like join and console.log use them.

Explore anonymous functions and arrow functions in JavaScript, including using them as one-time callbacks and as parameters to other functions, with practical event examples.

Explore JavaScript scope, including global and function scope and how variables behave. Note that loops and conditionals do not create the same scope, and reference errors arise.

Learn how JavaScript functions return values, with examples like square, cube, and factorial, and how to display these results via an input change event.

Explains that events are actions in the system that fire signals in the browser, triggering registered event handlers on elements, the document, or window. Examples include clicks, loads, or forms.

Learn to add an event listener on a button with addEventListener, changing the document body's background color via a color function, and reuse a separate named handler for other events.

Explore how various events fire from a baton element, including focus, blur, double-click, mouse over, and mouse out, and learn how to test them.

Explore handling mouse events on nested elements by wiring mouse over, mouse out, mouse move, and click events for parent and child, updating a text area log.

Remove one event listener from a button and observe that the second listener no longer fires after being killed, then refresh the page.

Learn how to define an event or assign a function to an event, compare inline onclick usage with separate listeners, and prefer modern event listeners for clearer, maintainable code.

Explore how the event object is automatically passed to an event handler, exposing e.target and methods to update the button’s background and log the event.

Explore properties and methods of event objects, including keyboard events with the key property. Attach a keydown handler to a text input to display the pressed key.

Learn how to prevent a form's default submission by using an event handler that checks first name and last name, and stops the submit action when fields are empty.

Explore the object-based nature of JavaScript, from arrays and strings to browser APIs, and master prototype chains, classes, and JSON data handling.

Explore how JavaScript objects use properties and methods through a person object with name and age, and learn to access, invoke methods, and display data in the dom.

Explore creating objects within objects in JavaScript using curly braces and dot notation to define and access nested properties like address, street, number, and zipcode.

Learn to access object properties in JavaScript using dot notation and bracket notation with strings, and see practical examples such as high school and grade properties.

Learn how to set and modify object members by updating properties, changing property values, and adding items to objects and arrays, illustrated through changing names and personnel data.

Learn to create objects in JavaScript using literals and constructors, and define properties and methods with this, including using new to instantiate objects.

Discover how prototypes let JavaScript objects inherit features and how prototype chains work, and learn to set and inspect an object's prototype with Object.getPrototypeOf and examples.

Discover how JavaScript objects have a built-in prototype and how the prototype chain traverses from object to prototype to its own prototype, guiding property lookups like toString via __proto__.

Trace the prototype chain using Object.getPrototypeOf to inspect a date object, revealing Date.prototype and Object.prototype and how methods like getMonth, getSeconds, and getTime are defined.

Explore shadowing properties in JavaScript objects, showing how a property or method with the same name on the prototype appears in the object's behavior, with console outputs.

Explore prototype setup in JavaScript: create an object with Object.create using a person prototype, and define a constructor with a prototype greet method that prints a greeting with the name.

Explore why methods live on the prototype while data properties live in the constructor, creating own properties like a person's name and checking them with hasOwnProperty.

Explore JavaScript prototypes to reuse code and combine objects. See how inheritance lets professors and students inherit from people and redefine shared properties to differ.