Chapter 1 Lesson 1 PDF

ICT1512
Chapter 1
Lesson 1
Exploring the
JavaScript Language
Writing a JavaScript
Program
Objectives
• You will have mastered the material in this lesson

when you can:
– Explain the history of JavaScript and scripting languages
and how each has been developed for its current use.
– Write content into a web page using JavaScript.
– Add JavaScript code to a web page.
– Create and apply JavaScript variables.
Exploring the JavaScript Language
• JavaScript: a programming language that adds

complex interactive features to a website
– Developed to handle customer data validation for online
commerce
– World Wide Web (web) allows data sharing across a
network of linked documents
Introducing Scripting Languages
• JavaScript is a type of programming language,
specifically a scripting language
• Programming language: a set of instructions
directing the actions of the computer
– Typically must be compiled into machine code by a
program called a compiler
• Scripting languages: subcategory of programming
languages that run directly from a program or script
(are not compiled)
– Must be interpreted (read and scanned line-by-line) by
an interpreter
Introducing Scripting Languages (continued)
• Markup languages: languages that define the
content, structure, and appearance of a document
– HTML (Hypertext Markup Language) defines the
content and structure of a web page
– CSS (Cascading Style Sheets) defines how a web
page will appear on a specified device
Figure 1-1
JavaScript and ECMAScript
• Developers struggled to reconcile JavaScript and
JScript in the late 1990s
• JavaScript was submitted as a proposal for a
standardized scripting language to the European
Computer Manufacturers Association (ECMA) in
1997
• An ECMA committee developed a set of scripting
language standards
• The specification for this scripting language, called
ECMAScript (ECMA-262), is updated to a new
edition annually
The DOM and The BOM
• Three foundations of the full implementation of JavaScript:
– ECMAScript (core of the language: syntax, keywords, properties, methods, etc.)
– Document Object Model (DOM): describes how to access the contents of a
web page and user actions within that page
– Browser Object Model (BOM): describes how to access the features and
behaviors of the browser itself
• DOM and BOM are Application Programming Interfaces (APIs)
• DOM specifications are managed by the World Wide Web
Consortium (W3C)
– Current version is DOM Level 4, described as an ongoing “living standard”
• BOM is implemented by each browser application (largely the same
among them)
Understanding Client/Server Architecture
• Traditionally, a two-tier system consisting of:
– Server (back end): a device or application from which a
client requests information; responsible for data storage,
management, communication with external services, and
heavy processing
– Client (front end): a device or application that presents
an interface to the user and requests information from a
server; responsible for gathering information from the
user, submitting it to a server, then receiving, formatting,
and presenting the results, and sometimes some related
data processing
(continued 1)
• Web’s two-tier client/server system consists of a
web browser and web server that communicate via
Hypertext Transfer Protocol (HTTP)
Figure 1-4
(continued 2)
• Adding databases and other applications to a web server
yields a three-tier client/server system (a.k.a. multitier
client/server system, n-tier client/server system): client
tier, processing tier (a.k.a. middle tier), and data storage
tier
Figure 1-5
JavaScript and Client-side Scripting
• HTML produces static documents, whereas client-

side scripting provided by JavaScript can respond
dynamically to user actions because it runs on a
local browser (client)
• Security concerns limit where JavaScript can be
used, what files it can access/ commands it can run
on the client’s system, and its direct interactions
with web servers operating at the processing tier
Understanding Server-side Scripting
• Server-side scripting: programming using a

scripting language (e.g., PHP, ASP.NET, Python,
Ruby) that is executed from a web server
• These languages work in the processing tier and
can handle communication between the client and
data storage tiers, often preparing and processing
data
Understanding Server-side Scripting (continued)
• JavaScript and server-side scripts operate in

separate environments but must work together to
deliver interactive websites to users
Figure 1-6
Should you use client-side or server-side
scripting?
• Allow the client to handle the user interface processing and
other light processing such as data validation
• Allow the web server to perform intensive calculations and
data storage
• Performing some processing on the client is beneficial
because:
– Processing power is not limited to the capabilities of the server
when processing is distributed among multiple client devices using
a web application
– Transfer times across the Internet are minimized, increasing
speed
– Server resource requirements (infrastructure, power use) are
decreased, reducing costs
Writing a JavaScript Program - IDEs and Code
Editors
• IDEs and code editors

– Use an Integrated Development Environment (IDE) to
manage all of the facets of website development
– Use a code editor
The script Element
• Syntax for embedding JavaScript code in a web

page’s HTML file:
<script>
statements
</script>
• Browser stops loading the page and processes the
statements when it encounters an embedded script
JavaScript Statements
• A JavaScript program is composed of statements

(lines of code)
• Sample statement showing optional (but desirable
per convention) ending semicolon:
document.write("<p>Plant choices</>");
Understanding JavaScript Objects
• JavaScript is considered an object-based programming language
• Object: programming code (including methods) and data
(properties) that can be treated as an individual unit or component
• Procedure: logical unit of a computer program consisting of a
group of statements that perform a specific task
– Sample carLoan object: carLoan.calcPayments()
• Method: a procedure associated with an object
– Sample method call on carLoan object:
carLoan.calcPayments(60)
– Methods often require that you provide data (argument[s]) within
the parentheses, which is known as passing arguments
• Property: a piece of data associated with an object
– Sample statement assigning a value for the interest property of
the carLoan object: carLoan.interest = .0349;
Using the write() Method
• DOM's Document object represents the entire
content of the web page
• The Document object's write() method writes
new content to a web page while it is being loaded
– Performs essentially the same function that you perform when
you manually add text to the body of a standard web document
– Useful for incorporating constantly-changing data at load time
– Requires a text string (a.k.a. literal string), which is text
contained in double or single quotation marks, as an argument
– Will overwrite the entire web page if used after the browser
finishes loading the page
Case Sensitivity in JavaScript
• Object names must always be all lowercase

• Incorrect capitalization, e.g.
Document.write("Plant choices"); or
document.WRITE("Plant choices");, will
cause errors
Adding Comments to a JavaScript Program
• Comments: lines of code that are not processed by

browsers, which you can use to add notes about
your code
• Line comment syntax:
let apple = "Fuji"; // Variable
assignment
• Block comment syntax:
/*
Here comes a function!
*/

Chapter 1 Lesson 1 PDF

Uploaded by

Copyright:

Available Formats

Chapter 1 Lesson 1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 1 Lesson 1 PDF

Uploaded by

Copyright:

Available Formats

ICT1512

• You will have mastered the material in this lesson

• JavaScript: a programming language that adds

• HTML produces static documents, whereas client-

• Server-side scripting: programming using a

• JavaScript and server-side scripts operate in

• IDEs and code editors

• Syntax for embedding JavaScript code in a web

• A JavaScript program is composed of statements

• Object names must always be all lowercase

• Comments: lines of code that are not processed by

You might also like