Scribd
Upload
16 views

Chapter 1 Lesson 1 PDF

Practice lessons

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Chapter 1 Lesson 1 PDF

Practice lessons

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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
Understanding Client/Server Architecture
(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
Understanding Client/Server Architecture
(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!
*/

You might also like