MTA understanding java script and coding essentials

Understanding JavaScript and
Coding Essentials
Lesson 8

Exam Objective Matrix
Skills/Concepts

MTA Exam Objectives

Managing and Maintaining
JavaScript
Updating the UI by Using
JavaScript

Manage and maintain JavaScript. (4.1)
Update the UI by using JavaScript. (4.2)

Introduction to JavaScript
• JavaScript is a programming language
that provides action in applications.
• Interactivity enables an end user to take
an action in an application, usually by
clicking a button or pressing a key.
• A dynamic application adjusts and
responds to such actions by end users.
• JavaScript also expands the opportunities
to animate content.

Alert Boxes
• Alert boxes are commonly used to test the
operation of JavaScript programs.
• Generally not used in production code.
• An alert box can help you ensure
information is displayed to the user.
• A user has to click OK to close an alert
box.

JavaScript Statements
• An ordinary JavaScript program is a
sequence of statements.
• Statements are separated by semi-colons.
alert('This is the first alert');
alert('This is the second alert');

Create a Simple JavaScript Application

Enabling JavaScript in a Web Browser
• Enabling JavaScript
in Internet
Explorer

Functions
• A function is a segment of a program
defined and performed in isolation from
other parts.
• JavaScript programmers sometimes
identify functions that return no value as
subroutines.

Functions (Continued)
• The expression of a function—the
―function example1() {. . .}‖ part—doesn’t
perform any of the code within the
function.
• What you see in the source code is only
the definition of a function.
• When the function is invoked, executed, or
launched, something useful happen.

Links between HTML and JavaScript
• Can include JavaScript code in <script>
tags in <head> section of HTML file for
small to medium-sized projects
• For large amounts of code, reference a
separate JavaScript file within the
<script> tag:
<script type = "text/javascript" src =
path/filename.js"></script>

Variables
• A JavaScript variable stands for a piece of
data.
• You use the var syntax to define a new
variable in JavaScript:
var firstname;

Identifiers
• JavaScript identifiers are the names of
variables and functions.
• Identifiers cannot be the same as
keywords already used in JavaScript.
• For example, ―if ‖ has a special meaning in
JavaScript statements and is not available
as a variable name.

JavaScript Libraries
• A library is collection of resources, like
pre-written function code and subroutines,
that developers use to create programs.
• A JavaScript library is pre-written
JavaScript code.
• jQuery is the leading JavaScript library.
• Other popular libraries include Dojo,
MooTools, and YUI.

JavaScript Libraries (Continued)
• When using a third-party library, include
an element such as the following to
reference the library:
<script type = "text/javascript" src =
"web or local address of the JavaScript
library source"></script>

getElementById() Method
• One important way to access display
elements is with the getElementById()
method.
• This method returns a reference to the first
object with the specified id or NAME
attribute.

Methods
• Methods are JavaScript functions that belong to
objects.
• Methods differ from functions in that methods are
always associated and used with a particular object.
• isNaN() is an example of a JavaScript function.

– Tests for ―not a number‖; if value = 0 (false),
value is a number
• document.getElementById() is an example of
a JavaScript method; you can effectively only use
getElementById with the special document
object.

Events
• Events are actions that trigger other
actions to occur.
• An event handler is an optional script or
executable that handles input received in a
program. Handlers are JavaScript code
inside the <html> tags (rather than the
<script> tags) that execute other
JavaScript code in response to an event.

Events (Continued)
• A callback is a response to an event,
such as a script execution in response to a
mouse click.

onLoad Event Handler
• The onLoad event handler ―belongs‖ to
HTML items; it triggers when its owner is
complete.
• The onLoad for an <img> image occurs
when the image is fully rendered and
visible.
• The onLoad for a <table> fires once all the
cells in that table have been drawn.

Flawed JavaScript Programs Are Erratic
• Flawed JavaScript programs are erratic—
they give different results at different times.
• Reasons:
– If the program depends on the existence of a
particular screen element but doesn’t assure
that the element exists
– Launching the program at different times,
resulting in slightly different loading order

• Fix: Begin calculations only after onLoad has
fired.

Showing and Hiding Elements
• The HTML display attribute shows the
user pertinent information and hides the
information when no longer needed.

HTML display Attribute Example

HTML display Attribute Example (Cont.)

Updating the Content of Elements
• JavaScript uses the innerHTML property to
change the current content of HTML
elements (referred to as ―inner content‖) or
insert new content.

Recap
• Introduction to JavaScript
– Alert boxes
– JavaScript statements

•
•
•
•
•
•
•
•
•
•

Creating a simple JavaScript application
Functions
Links between HTML and JavaScript
Variables
Identifiers
JavaScript libraries
Methods
Events
Showing and hiding elements
Updating the content of elements

MTA understanding java script and coding essentials

More Related Content

What's hot

Viewers also liked

Similar to MTA understanding java script and coding essentials

Recently uploaded

MTA understanding java script and coding essentials

Editor's Notes