SAP Learning Journey

Introducing JavaScript Scopes and Context Execution

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Describe JavaScript scopes and context execution

JavaScript Scopes and Context Execution

Scope and Context

The differences between scope and context are as follows:

  • Every function invocation has both a scope and a context associated with it. Fundamentally, the scope is function-based and the context is object-based.
  • Scope pertains to the variable access of a function when it is invoked and is unique to each invocation.
  • Context is always the value of the keyword, which is a reference to the object that owns the currently executing code.

JavaScript is a single threaded language. Only one task can be executed at a time.

By default, when the JavaScript interpreter initially executes code, it enters into a global execution context (called Global Context).

From that point, each invocation of a function creates a new execution context (called Function Context).

Each time a new invocation context is created, it is appended to the top of the execution stack.

The browser always executes the current execution context at the top of the execution stack.

When it is completed, the context is removed from the top of the stack, and control returns to the execution context below it.

An execution context can be divided into a creation and execution phase.

In the creation phase, the interpreter first creates a variable object (also called an activation object). The variable object is composed of all the variables, function declarations, and arguments defined inside the execution context.

The scope chain initializes next, and the value of this is determined last. Then, in the execution phase, code is interpreted and executed.

For each execution context, there is a scope chain coupled with it.

The use of the reference in JavaScript is different from other programming languages, because of JavaScript's execution context.

Similar to other programming languages, JavaScript defines a keyword called this. However, the keyword works differently in JavaScript.

In JavaScript, this points to the execution context of the function, where this keyword is used.

In JavaScript, this is like the property of the function. When the function is executed, this fills with the object on which the function is called.

JavaScript - The 'this' Reference

In this example, the this reference in the handle function points to the window object of the browser BOM model.

The handle event is executed in the global context of the application.

The this reference points, in this example, to the window object of the BOM.

The method of a node always executes the callback in the context of the node to which the event handler is bound.

Call and Apply

All functions or objects in JavaScript inherit the methods call and apply.

With these two methods, inherent to all functions, you can execute any function in any desired context:

  • The call function requires that arguments are listed explicitly.
  • The apply function enables you to provide the arguments as an array.

ECMAScript 5 (ES5) introduces another method of setting the execution context, a bind function called the Function.prototype.bind method.

The method is used to manipulate context. It returns a newfunction that is permanently bound to the first argument of bind no matter which function is used.

Events

Overview - Events

JavaScript event handlers are statements or functions that perform actions in response to an event such as click, touch, or form submit.

In order for a simple statement or a function to be called when an event occurs - for example, when a form is submitted - the script must register an element for the event.

DOM events are sent to display codes of interesting things that have taken place. Each event is represented by an object based on the event interface and may contain additional custom fields and/or functions that are used to get additional information about what exactly happened. Events can represent anything from simple user interactions to automated notifications about processes that have taken place in the rendering model.

Registering Event Handlers

There are two recommended approaches for registering handlers. Event handler code can be made to run when an event is triggered by assigning it to the target element's corresponding onevent property, or by registering the handler as a listener for the element using the addEventListener() method. In either case, the handler will receive an object that conforms to the Event interface.

The main difference is that multiple event handlers can be added or removed using the event listener methods.

JavaScript Debugger

Programming code might contain syntax errors or logical errors.

Many of these errors are difficult to diagnose.

Frequently, when programming code contains errors, nothing will happen. In this case, there are no error messages and you will not get indications about where to search for errors.Searching for (and fixing) errors in programming code, which is called code debugging.

Debugging is not easy. Fortunately, all modern browsers have a built-in JavaScript debugger.

Built-in debuggers can be turned on and off, forcing errors to be reported to the user.

With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing.

Otherwise, in general, follow the steps at the bottom of this page, you activate debugging in your browser with the F12 key, and select Console in the debugger menu.

In the debugger window, you can set breakpoints in the JavaScript code.

At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.

After examining values, you can resume the execution of code (typically with a play button).

The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.

This has the same function as setting a breakpoint in the debugger.

If no debugging is available, the debugger statement has no effect.

With the debugger turned on, this code will stop executing before it executes the third line.

Add Functionality to the Site

Watch the following video (without audio) to learn how to add functionality to the site.

Business Scenario

Add functionality to your site. Give the user the possibility to add more contacts in the list.

Prerequisites

Steps

  1. Add a dialog with an input field in the HTML file in the DIV element under the heading.

    1. Use the appropriate method for a dialog and add the following attributes:

      Code snippet
      type="submit"
 value="Add new Contact" 
onclick="add()"/>
      Copy code

    2. Add the attribute ID with the value, "table-data," to the tbody in the table element. 

  2. Put the script.js file into the project folder.

    In this file, the JavaScript comes in.

    1. In addition, add the command to load the JavaScript file in the HTML file.

      This specifies a function in the dialog method for the event onclick. We will implement it now.

    2. Create the function with the name, "add," which does not expect any parameters.

    In the function body, create the constant with the name dataset, which calls the method querySelector of the document object as value. As the parameter, specify the ID that you just specified in the HTML file at the tbody in your table.

  3. Implement a dialog in the browser.

    This dialog should ask the user for three steps to access the information for a new contact. Create three constants with the names: name, last_name, and email.

    1. In the three constants, use a method from the window object for a dialog.

      Therefore, to ensure that the user knows what to enter in the dialog, give the three methods as parameters; these are the strings that will be displayed on the window: name, last name, and the email for the last constant email.

      We now have the values from the user stored in our three variables.

    2. Test the app.

  4. Create the new table row for the new contact.

    1. Create 4 more constants for this suggested name: tr, tdName, tdLastName, tdEmail.

    2. In the variable tr, create the table row. To do this, enter the correct HTML element for a table row as a parameter for the method.

    3. In the variables - tdName, tdLastName, and tdEmail, create the table cells. Use the HTML element for table cells as a parameter for the method.

  5. Add values to the variables, tdName, tdLastName, and tdEmail.

    1. Use the property, textContent, and assign the variables with the user input as values.

  6. Add the cells to the variable with the table row.

    1. Use the method for append an element as the last child of an element.to variable, in which you have created the table row. 

    2. As a parameter, specify the variable with the table cell.

    3. Call the method for each parameter separately.

  7. Add our new table row to the variable, data_set.

    1. Use the method for append an element as the last child of an element. and specify the variable with the new table row as parameter.

Save progress to your learning plan by logging in or creating an account

Login or Register
Continue to quiz