Cmst-388

The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and manipulate this tree programmatically. Why use DOM? The DOM is used to access and manipulate elements in an HTML document. But why do we need to use the DOM for this? Let’s understand this by use of an example. Let’s suppose we have an input field and a button next to it. When the button is clicked, whatever typed in the input field should appear below the input field. How can we do this with plain HTML? We need to dynamically access the value of the input field on the button click and then display the value below in a paragraph. We will implement this example, but first, we should discuss DOM methods that will be needed for accessing and manipulating elements. ...

The last couple of lessons focused on arrays, and hopefully by now you will have come to see the value of using them in your code. Objects expand on the concept of arrays, except for a few differences, which provide greater control of the data stored. It is said, in Javascript, “Almost everything is objects”. Dates are always objects, Arrays are always objects, functions are always objects, and regular expressions are always objects. Primitive data types such as Numbers, Boolean and Strings are also objects when defined with the new keyword. ...

We are going to cover some of the most commonly used properties and methods in JavaScript, for working with arrays. There are a lot of other methods which are not covered here, including newer ES6 methods. The goal here is to get you started working with arrays and gaining an understanding of the fundamental ways we can access and manipulate data. The table below summarizes the various methods we will cover in this lesson: ...

Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you group data, but they offer a range of tools or methods to update and manipulate their contents. They are used commonly across different programming languages and have become a routine way of passing around data within applications. ...

Scope determines what variables or bindings are available to JavaScript within its current context. For example, if a variable is defined outside of any functions within your code (often referred to as the main call stack), these variables are available to all other code embedded within other blocks and functions. Variables defined in main are often referred to as ‘Global Variables’ because they are globally available throughout your application. But what about those variables that are defined within functions? ...

In earlier lessons, we wrote code without using any functions. Now that you have been introduced to the various ways we can organize our code within function declarations and expressions, it is helpful to step back for a moment to understand the flow of execution within our code. JavaScript uses a call stack to in order to manage this flow, which is essentially a data structure (or to-do list) that keeps track of function calls using a Last In First Out (LIFO) ordering system. Let’s take a look at an example to help explain this concept. ...

Functions are repeatable blocks of code. They are fundamental to most programming languages and allow you to build applications with reusable code that can be called with different arguments. The best way to explain functions is through an example. Suppose you wanted a quick way to calculate how much your bill would be with tip (assume for this example the bill amount includes tax). → Try it out Create two files called index.html and script.js and enter the code below into each. Alternatively, if you followed along in the previous lesson, use the existing script.js file and replace its content with code below. ...

Often in programming, we need to carry out similar instructions a number of different times. Loops help reduce redundant code and let you quickly offload repetitive tasks to the computer. In JavaScript there are several types of loops. In this lesson we are going to examine while, do while, and for loops. While and Do While loops As their names suggest, while and do while loops carry out a number of tasks ‘while’ a certain condition is true. Take for example the need to display a series of numbers each incrementing by 1 until it we reach a certain limit (10). This could be carried out by writing the following code: ...

Conditional statements (commonly called if statements) provide a way for JavaScript to make decisions and run specified code based on a set of criteria. In JavaScript, the criteria or condition is surrounded in parenthesis and the resulting code to run is contained in a block. Up until now, we have been examining single line statements. In JavaScript, a block of code is surrounded by curly braces. Let’s look at an example. ...

JavaScript provides different kinds of operators which enable us to perform actions on given values or variables used in our code. As you develop more complex code, you will come to rely on operators for performing the various functionally you are building. Before we dive into operators, let’s clear up a couple of fundamental programming terms, statements and expressions. A statement is a line of code or action that consist of values, variables, and operators. In the last lesson you created several statements that assigned values to variables using the assignment = operator. Statements can set values but do not become values themselves. Statements end with a semi-colon. In contrast, an expression is a piece of code that resolves to a value, i.e. values, calculations resulting in other values, variables, and groups of variables. ...