<h2>Introduction to the course</h2><p>JavaScript, formally known as JS, is a programming language that births dynamic user interfaces. As one of the core scripting languages on the World Wide Web,  JavaScript executes dynamic functionality like you’ve never seen before.</p><h2>Who is the course for?</h2><p>If your dream job’s somehow associated with web development (front-end and back-end), then there’s no doubt you need JavaScript on your side as one of the most popular programming languages. JavaScript helps web developers execute pure creativity and interactivity that knows no limits in their modern work.</p>

JavaScript

<h2>What does this lesson cover?</h2><p>The windows object in JavaScript represents the browser&#x27;s window. This lesson unlocks the long list of properties of the object that are associated with the user&#x27;s screen resolution, length, and width of the window, etc.</p><p>With the help of corresponding quizzes per property, you&#x27;ll digest the topic to its core.</p>

Window & screen

<h2>What does this lesson cover?</h2><p>The Document Object Model represents how HTML and XML documents are read by the browser. We&#x27;ll be looking into the module to manipulate javascript files. </p><p>The lesson will give you in-depth knowledge of events (the different types of events) and how exactly a web page responds to user interaction.</p>

Basics

<h2>What does this lesson cover?</h2><p>The most basic, yet fundamental concept in programming languages (not only JavaScript) is functions. It&#x27;s easy to understand the idea behind functions and at the same time crucial. In the following lesson, we&#x27;ll be identifying this core aspect of JavaScript.</p>

<h2>What does this lesson cover?</h2><p>We&#x27;ve referred to JavaScript Operators in prior lessons. However, a more detailed and advanced overview was definitely crucial.</p><p>Variables are a core feature of JavaScript hence modifying variable value is useful and developers constantly work on it. The manipulations are carried out with operators and the specifics of this operation is mentioned in the lesson thoroughly. </p><p>We&#x27;ll also get into other advanced operators and their features, namely logical operators and comparison operators.</p>

Advanced operators

<h2>What does this lesson cover?</h2><p>JavaScript arrays (arrays in general) store various values under a single variable name. </p><p>This section covers arrays in-depth with steps on creating your first JS array, learning about elements and how to add/remove them to/from your array, merging arrays, etc.</p>

Array

<h2>What does this lesson cover?</h2><p>Variables are isolated containers that store data in the memory and can be modified in the future.</p><p>This section teaches us how to work with variables in JavaScript. Meaning, declaring variables with and without initial values, getting to know some most-used keywords, and so on.</p>

Variables

<h2>What does this lesson cover?</h2><p>In a sentence: The Overview of JavaScript. That entails, the introduction to JavaScript paired with an introduction to the entire course itself and all the key features and concepts that we&#x27;ll be covering in the future.</p><p>The JS world has opened doors for front-end developers since the beginning of time as one of the crucial need-to-know programming languages for web development, it&#x27;s time you take advantage of that as its popularity continues to rapidly grow.</p>

Introduction

<h2>What does this lesson cover?</h2><p>The location object in JavaScript is an homage to the location property of a window.</p><p>This lesson unlocks the long list of properties of the object that are associated with the URL of the current page, hostname, port, pathname, search, etc.</p>

Location

<h2>What does this lesson cover?</h2><p>Modifying elements located in HTML documents entails the usage of selectors. The lesson thoroughly covers the selection process of elements by tag/class name, i.e. with the help of corresponding methods that specify exact tag/class names.</p><p>We&#x27;ll also be identifying the term topmost element, which we&#x27;ll bump into frequently when further working with JavaScript.</p>

Selectors

<h2>What does this lesson cover?</h2><p>Functions accept parameters, parameters accept corresponding arguments that are passed on to the function. This pattern follows all JavaScript applications, not unlike a protocol.</p><p>This lesson follows the functions and the functional properties, namely returning values, as all functions are equipt to return a value and modify data.</p>

Function Parameters

<h2>What does this lesson cover?</h2><p>if / if-else statements can be found in every standard, basic JavaScript application code. This lesson covers the syntax of if / if-else, how, and when to use them with the help of code examples that you can learn from. </p><p>We&#x27;ll also cover the short way of writing the if-else statement with its three operands. </p>

If statements

<h2>What does this lesson cover?</h2><p>We&#x27;ll be talking about a very special data type in this section that goes by the null data type. What makes this type special is that it can only take on one single value– null.</p><p>We&#x27;ll assess the intricacies of this data type and how to avoid potential mix-ups that come from incorrectly differentiating between undefined and null.</p>

Null Data Type

<h2>What does this lesson cover?</h2><p>This lesson will be all about defining operators and learning why and how to use them in your JavaScript code.</p><p>Operators are a core concept in JS and they control the JavaScript engine by &quot;telling&quot; it to perform some sort of action.</p><p>We&#x27;ll also get into all the types of Operators that JS offers and their corresponding introductions as well (+examples)!</p>

Operators

<h2>What does this lesson cover?</h2><p>We&#x27;ll be referring to the implementation of JS code to web pages and the three different methods that are provided to do so. </p><p>The three methods are expanded upon in the lesson and come paired with their corresponding examples.</p>

Embedding JavaScript Code

<h2>What does this lesson cover?</h2><p>The history object in JavaScript is a reference to the history property of the Window object</p><p>This lesson unlocks the list of properties of the object that give access to the number of pages in the session history of the browser, the page that is already loaded at that point in time, previous pages in the session history, etc.</p>

History

<h2>What does this lesson cover?</h2><p>You can apply a style to HTML elements to change the visual presentation of HTML documents dynamically using JavaScript.</p><p>This lesson will focus on setting an element&#x27;s style in JavaScript with the style attributes and properties, and finally, extracting the said styling information. </p><p>The lesson comes equipt with lesson quizzes to test your newly gained knowledge surrounding the subject.</p>

Styling

<h2>What does this lesson cover?</h2><p>There are two different ways to call functions, the one we&#x27;ve assessed in the previous lesson and the one we&#x27;ll be focusing on as of now. </p><p>Differentiating the two methods is what we&#x27;ll achieve in the following lesson with the help of code snippets of any typical JavaScript application.</p>

Function Expressions

<h2>What does this lesson cover?</h2><p>The JavaScript switch statement takes in a value and compares it will several matching patterns. The following concept follows both a simple form and a complex form. We&#x27;ll be getting into both of them in this lesson. Furthermore, we&#x27;ll assess the switch statement&#x27;s default keywords and some same-case action examples.</p>

Switch statements

<h2>What does this lesson cover?</h2><p>We&#x27;ve briefly referred to the undefined data type when diving into the Null data type, however, it&#x27;s necessary to circle back to this concept as it&#x27;s once again, one of the special JS types.</p><p>This section will propose code-snippet examples and definitions of the undefined data type at its finest.</p>

Undefined Data Type

<h2>What does this lesson cover?</h2><p>Textual data in JavaScript is located in strings.</p><p>Strings are an important concept in JavaScript, we&#x27;ll get into the features of strings such as their length, lowercase, or uppercase lettering, etc.</p><p>String also comes with a wide range of methods, we&#x27;ll specifically concentrate on concentration string, string interpolations, and others.</p>

Strings

<h2>What does this lesson cover?</h2><p>Comments are a topic that is widely used it JavaScript and this lesson expands on all the perks that comments can offer. </p><p>Comments as most developers know serve as non-executable code that&#x27;s main purpose is reminding developers of certain aspects of the web application. </p><p>Additionally, we&#x27;ll be expanding on the two different types of comments future developers will most likely find in their JavaScript code.</p>

Comments

Lesson Challenge

<h2>What does this lesson cover?</h2><p>The additional characteristics or properties of a given element are called attributes. JavaScript provides a specific method that gets the current value of the said attribute on an element.</p><p>The lesson depicts getting, setting, and deleting attributes with practical examples that guide you through each step. </p>

Attributes

<h2>What does this lesson cover?</h2><p>While loops, not unlike if / if-else statements are very common even in the simplest JavaScript applications.</p><p>In this lesson, our main focus will be on defining, and assessing the functionality perks and variations (type-wise) of while loops.</p><p>We&#x27;ll also be mentioning the do-while loop paired with code snippets for a better and easier way of learning.</p>

While loops

<h2>What does this lesson cover?</h2><p>Of the data types we&#x27;ve talked about so far object data is the most complex of the bunch. This stems from the fact that collecting data and thus storing it in the object is a complex process to follow. </p><p>This section aims to simplify the complexities the object data type is &quot;known for&quot; through a step-by-step guide of how it works. From creating objects to accessing, setting, and deleting their properties.</p>

Object Data Type

<h2>What does this lesson cover?</h2><p>We&#x27;ll be focusing on how numbers work in JavaScript. JavaScript supports both integer and floating-point numbers that can be represented in decimal or hexadecimal notation.</p><p>Other features we&#x27;ll be expanding on include a wide range of properties that make working with numbers easier and more efficient, precision, and how Numbers and Strings work together (more specifically conversions).</p>

Numbers

<h2>What does this lesson cover?</h2><p>At some point in time, most developers face the desire to generate output for your JavaScript code. That could be circumstantial, or could really need to see a variable&#x27;s value. Outputs also come in handy in the debugging process. </p><p>Therefore, JavaScript offers multiple methods to introduce outputs and this lesson provides a compact summary of the said methods.</p>

Output

<h2>What does this lesson cover?</h2><p>Elements, as presumed, can be added and manipulated in an HTML document with the use of the method that we&#x27;ll distinguish in the following lesson.</p><p>The lesson follows every step developers take to add and thus change certain aspects of elements with methods in JavaScript.</p>

Manipulation

<h2>What does this lesson cover?</h2><p>For loops run multiple tasks for a set number of times. This lesson will expand on the structure of for loops, namely keywords dsuch as initialization, condition, and increment with corresponding examples to support the ideas.</p><p>For loops entail knowledge in for-in and for-of loops as well. </p>

For loops

<h2>What does this lesson cover?</h2><p>We&#x27;ll be introducing the concept of JavaScript conditions and mostly focusing on the Bool data type (for now)</p><p>Boolean is equipt with two values.</p><p>We&#x27;ll be providing the syntax of the said data type along with supporting examples. </p>

Boolean

Adding JS to web pages

<p>There are 3 ways to add JavaScript to a web page.</p>

<p>• <strong>Embedding</strong> the JS code between <strong><samp>&lt;script&gt;</samp></strong> and <strong><samp>&lt;/script&gt;</samp></strong> tags.</p>

<p>•<strong> Creating an external JS file</strong> and loading it within the page through the <strong><samp>src </samp></strong>attribute of the <strong><samp>&lt;script&gt;</samp></strong> tag.</p>

<p><strong>• Placing code directly inside an HTML tag</strong> using unique tag attributes such as <strong><samp>onclick</samp></strong>, <strong><samp>onmouseover</samp></strong>, <strong><samp>onload</samp></strong>, etc.</p>

<p>We&#x27;ll be discussing these attributes in further lessons.</p>

Embedding JS Code

<p>Developers can embed the JS code directly within the web pages by placing it between the <strong><samp>&lt;script&gt; </samp></strong>and <strong><samp>&lt;/script&gt;</samp></strong> tags. The <strong><samp>&lt;script&gt;</samp></strong> tag indicates to the browser that the contained statements are to be interpreted as executable script and not HTML, like so:</p>

<p>The JavaScript code in the above example will simply output a text message on the web page.</p>

<p>We&#x27;ll get into outputs more in the next lessons.</p>

Fill Missing

<p><strong>Embed </strong>the JS code inside the HTML document.</p>

External JavaScript file

<p>Alternatively, developers can place the JavaScript code into a separate file with a <strong>.js </strong>extension, and declare that file in their document via the <strong><samp>src </samp></strong>attribute of the <strong><samp>&lt;script&gt;</samp></strong> tag.</p>

<p>This is the most common option. It is very useful if you want the same scripts to be available for multiple documents. It saves you time from repeating the same task over and over again.</p>

Placing the JavaScript Code Inline

<p>Finally, developers can place the JavaScript code <strong>inline </strong>by inserting it directly inside the HTML tag using special tag attributes such as <strong><samp>onclick</samp></strong>, <strong><samp>onload</samp></strong>, etc. This is demonstrated in the code example below:</p>

<p>A common thing to avoid is placing JavaScript code inline. The content and structure of your web page (i.e. <strong>HTML</strong>) should be separated from presentation (<strong>CSS</strong>), and behavior (<strong>JavaScript</strong>).</p>

Write Missing

<p>Write a JS code to show an alert when <strong><samp>onclick</samp></strong> event is triggered.</p>

<h2>What does this section cover?</h2><p>We&#x27;re going to be taking our first steps with JavaScript in this section. Starting from an overall introduction to JS, its works, and thus combining that knowledge with its most well-known and simple features that developers will be using all throughout their careers.</p>

<h2>What does this lesson cover?</h2><p>Through the introduction of rather global concepts in all programming languaes, we&#x27;ve covered the basics that every developers (front-end or back-end) needs to get started. </p><p>JavaScript code examples will guid beginngers develop technique and learn through the help of valid examples.</p>

Values & Types

<h2>What does this section cover?</h2><p>After getting to know the basics of JavaScripts, it&#x27;s time we get into a more advanced approach to assessing and learning about its Data Types.</p><p>This section introduces arrays, null data types, undefined data types and object data types. Each lesson empathizes a data type with examples and in-depth defintions.</p>

Advanced Data Types

<h2>What does this section cover?</h2><p>The Control Flow of JavaScrip entails strong knowledge of operators, all the different types of loops (extensions included), and statements, namely the if statement and switch statement. </p><p>We&#x27;ve referred to operators in the past, however, due to their validity in the Control Flow of JS, it&#x27;s crucial to dive deeper into some core, complex concepts we&#x27;ve left out in the introduction. </p><p>Loops and Statements are what control your JavaScrip application, for a smooth action flow, it&#x27;s crucial for beginners to digest these concepts fully.</p>

Control Flow

<h2>What does this section cover?</h2><p>We&#x27;ll be assessing functions in the simplest terms and escalating onto more complex concepts regarding JavaScript functions and operations.</p><p>Complex in terms of function parameters, and expressions that are simple to comprehend if you dive into the core, and with the help of hands-on examples/quizzes, you&#x27;ll have the down.</p><p>It&#x27;s important to note functions are persistently present in most programming languages so if you pursue other spheres of programming, you&#x27;ll have proficiency in the base knowledge of functions.</p>

Functions

<h2>What does this section cover?</h2><p>In this section, we&#x27;ll be getting into the basics of the Document Object Module (the DOM), and thus, slowly transitioning to manipulating the elements in DOM efficiently, and effectively.</p><p>We&#x27;ll be thoroughly examining how to Select Elements, Style Elements, Retrieve the Attributes of Elements, and Maniupate Elements.</p><p>The DOM indicates the way HTML and XML documents are read by the browser. By allowing JavaScript to make the above-mentioned manipulations to the DOM elements, structure will be added to your website.</p>

Document Object Model

<h2>What does this section cover?</h2><p>We&#x27;ll be referring to the core, fundamental JavaScript objects, and their corresponding properties.</p><p>The objects remain the following: the History object, the Window Object, and the Screen Object.</p><p>This lesson will expand on those objects further to uncover properties that will be of further use when structuring your website.</p>

JavaScript

Achievements

Embedding JS Code

Learn programming and get hired