
Master fundamental JavaScript concepts and build interactive web pages by manipulating html with JavaScript, covering numbers, strings, booleans, arrays, objects, and dom events.
Explore JavaScript fundamentals and how it runs in the browser to create interactive web pages. Learn numbers, strings, booleans, variables, arrays, functions, objects, control flow, DOM, and events.
Learn to set up a HTML page and test JavaScript by adding inline code, a head script, and an external test.js file; create a button that alerts hello on click.
Explore working with numbers in JavaScript via the console, perform arithmetic and modulo operations, respect order of operations, and use the Math and Number objects for constants and functions.
Learn how to declare and use variables in JavaScript, store and retrieve data in memory, and grasp assignment, naming rules, and case sensitivity for readable code.
Learn essential JavaScript fundamentals by exploring strings, including single and double quotes, escaping, concatenation with plus, and length for character counts.
Explore JavaScript string manipulation with practical demos on charAt, indexing, slice, substring, case conversion, replace, and split to extract and transform text.
Master JavaScript arrays as lists of numbers, strings, booleans, or nested arrays. Initialize with square brackets, access with zero-based indexing, and modify content using length, push, splice, pop, and sort.
Explore objects in JavaScript, modeling data and behavior with properties like owner and balance and methods like withdraw and deposit, using constructors with the new keyword.
Explore how conditionals guide decisions in JavaScript, using if, else if, and else, plus switch statements and the ternary operator for outcomes.
Learn how to loop in JavaScript using while, do while, and for loops to repeat code. See how to iterate arrays, apply operations to multiple elements, and implement retry scenarios.
Learn how to handle JavaScript errors by converting user input to numbers, throwing errors for non-numeric or negative inputs, and using try, catch, and finally to control flow.
Explore the document object model with JavaScript: locate elements by id, class, name, or tag name; access text, input values, and attributes; and dynamically add, modify, and remove elements.
Learn how to handle events in JavaScript by counting clicks on a title, responding to hover and mouseleave, and using event listeners and event.target to update text.
Create a JavaScript function calculator that computes sin and cos for user input, validates empty and non-numeric input, and allows adding new functions via attributes.
Overview
JavaScript is a programming language that can be run by all modern web browsers. It is downloaded alongside the HTML code of a webpage. Unlike HTML, which can only be used to display content, JavaScript allows web designers to add functionality and interactivity to their websites.
What you will learn
We will begin the course by learning where to write JavaScript. We will look at writing JavaScript directly inside an HTML tag, then inside of a <script> tag, and then finally in a file separate from the HTML document. We will discuss some of the reasons for using each method.
After that, we will learn about how to manipulate some basic data types. We will learn about how to do simple arithmetic, and also look at some of JavaScript's built-in mathematical capabilities. Then, we will learn about working with words and characters, using a data type known as the "string". We will also cover the Boolean type, which is a representation of True and False inside of a programming language.
Then we will move on to more complex types. We will learn about the array, which is essentially a list. We will look at how to create arrays, how to access elements inside them, and how to modify the contents of an array. Functions will also be covered, which will allow us to organize code into simple, reusable pieces. We will also learn about objects, which are a way of grouping together data and behaviors.
We will then move on to control flow. We will look at the "if" statement, which allows the script to decide whether or not to execute a block of code based on some condition. We will also look at looping. Looping refers to repeatedly executing a block of code until some condition is met. Then, we will learn about errors, and how to handle them properly so that they do not halt execution of the script.
Next, we will look at the Document Object Model ( DOM ). This is what allows JavaScript to interact with the HTML code of a webpage. We will look at several ways of finding any particular HTML element on the page. Then we will see what information we can extract from that element (tag name, attributes,etc.). We will learn about adding and removing elements from a page. Finally, we will learn about events, which allows JavaScript to react to things like mouse clicks, mouse movement, key presses, and many others.
We will end the course with a practical exercise, in which we will build a simple JavaScript-based webpage. We will put to use most of the concepts covered in the course. We will look at how to validate user input, how to display results, and how to display meaningful error message to the user.
Prerequisites
HTML: The student must know how to use HTML tags and attributes. Only a very basic understanding of HTML is assumed.
Google Chrome (Recommended): Google Chrome is a free web browser and it will be
used to execute all the examples in this course. Although all browsers can run JavaScript, Chrome has extensive built-in developer tools. In the course, we will be using Chrome's JavaScript console, which will allow us to run quick little examples without the need to create and edit files.
Notepad++ (Recommended): Notepad++ is a free, open-source text editor. Although JavaScript and HTML can be written using any text editor, Notepad++ is highly recommended because of features such as syntax highlighting and auto-complete.