Java Script
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.28 MB, 71 trang )
LOGO
JAVASCRIPT
Computer Science & Engineering
LOGO
JavaScript and Client-Side Scripting
When HTML was first developed, Web pages
were static
Static Web pages cannot change after the
browser renders them
HTML and XHTML could only be used to
produce static documents.
JavaScript
Client-side scripting language that allows Web
page authors to develop interactive Web
pages and sites
csehui.wordpress.com Computer Science & Engineering
LOGO
JavaScript and Client-Side Scripting
Client-side scripting:
Scripting language that runs on a local
browser (on the client tier)
JavaScript gives you the ability to:
Turn static Web pages into applications such
as games or calculators
Change the contents of a Web page after a
browser has rendered it
Create visual effects such as animation
Control the Web browser window itself
csehui.wordpress.com Computer Science & Engineering
LOGO
The <script> Element
Scripts
JavaScript programs contained within a Web
page
<script> element
Tells the Web browser that the scripting
engine must interpret the commands it
contains.
The type attribute tells the browser which
scripting language and which version of the
scripting language is being used.
csehui.wordpress.com Computer Science & Engineering
LOGO
Understanding JavaScript Objects
Object
Programming code and data that can be
treated as an individual unit or component
Procedures
Individual statements used in a computer
program grouped into logical units
Used to perform specific tasks
Methods
Procedures associated with an object
For example: loan.calcPayments();
csehui.wordpress.com Computer Science & Engineering
LOGO
Understanding JavaScript Objects
Property
Piece of data associated with an object
Assign a value to a property using an equal
sign.
loan.interest = .08;
Argument
Information that must be provided to a
method.
Providing an argument for a method is called
passing arguments
loan.calcPayments(800);
csehui.wordpress.com Computer Science & Engineering
LOGO
The write() and writeln()
Document object represents the content of a
browser’s window
You create new text on a Web page with the
write() method or the writeln() method of
the Document object
Both methods require a text string as an
argument.
Text string or literal string: text that is
contained within double or single quotation
marks.
document.write(“Welcome to Javascript!");
csehui.wordpress.com Computer Science & Engineering
LOGO
Case Sensitivity in JavaScript
JavaScript is case sensitive.
Within JavaScript code, object names must
always be all lowercase.
csehui.wordpress.com Computer Science & Engineering
LOGO
Comments to a JavaScript Program
Comments
Nonprinting lines that you place in your code
to contain various types of remarks
Line comment
Hides a single line of code
Add two slashes // before the comment text
Block comments
Hide multiple lines of code
Add /* before the first character you want
included in the block and */ after the last
character in the block
csehui.wordpress.com Computer Science & Engineering
LOGO
Structuring JavaScript Code
When you add JavaScript code to a document,
you need to follow certain rules regarding the
placement and organization of that code
The following sections describe some important
rules to follow when structuring JavaScript code.
Include as many script sections as you like
within a document.
When you include multiple script sections in a
document, you must include a <script> element
for each section.
csehui.wordpress.com Computer Science & Engineering
LOGO
Placing JavaScript in the Document
You can place <script> elements in either the
document head or document body
Good idea to place as much of your JavaScript
code as possible in the document head
Important to put JavaScript code in document
head
When code performs behind-the-scenes tasks
required by script sections in the document
body
csehui.wordpress.com Computer Science & Engineering
LOGO
Placing JavaScript in the Document
<head>
<Script language=”JavaScript”>
Javascript Comments
</script>
</head>
csehui.wordpress.com Computer Science & Engineering
LOGO
Placing JavaScript in the Document
<HTML>
<HEAD>
<script language="javascript" >
document.write(“What is your name? ”);
</script>
</HEAD>
<BODY>
content of page
</BODY>
</HTML>
csehui.wordpress.com Computer Science & Engineering
LOGO
Creating a JavaScript Source File
JavaScript source file
Usually designated by the file extension .js
Does not contain a <script> element
To access JavaScript code saved in an external
file, assign to the src attribute of the <script>
element the URL of the JavaScript source file
Use a combination of embedded JavaScript code
and JavaScript source files in your documents
csehui.wordpress.com Computer Science & Engineering
LOGO
Creating a JavaScript Source File
<Script SRC=”fileJavascript.js” Language="javascript" >
JavaScript program
</Script>
csehui.wordpress.com Computer Science & Engineering
LOGO
Data Types and Operators
Variable
Specific location in computer’s memory
Before using a variable:
Write a statement that creates the variable
and assigns it a name
Variable names are case sensitive
myVariable, myvariable, MyVariable, and
MYVARIABLE are all different variables
csehui.wordpress.com Computer Science & Engineering
LOGO
Declaring and Initializing Variables
Use the reserved keyword var to create
variables
To create a variable named myVariable:
var myVariable;
Declaring a variable
Using a statement to create a variable
Initializing a variable
Assigning a specific value to it
Can be done when you declare the variable
var
variable_name
=
value
;
csehui.wordpress.com Computer Science & Engineering
LOGO
Declaring and Initializing Variables
Assignment operator
Equal sign (=)
Assigns the value on the right side of
expression to the variable on the left side of
expression.
Value assigned to a variable:
Literal string must be enclosed in quotation
marks
var myName = "Don“;
Numeric value is not enclosed in quotation
marks.
csehui.wordpress.com Computer Science & Engineering
LOGO
Displaying Variables
Can declare multiple variables using a single var
keyword
Ex: var customerName = "Don Gosselin",
orderQuantity = 100, salesTax = .05;
Can assign value of one variable to another
Ex:
var salesTotal;
var curOrder = 40;
salesTotal = curOrder;
csehui.wordpress.com Computer Science & Engineering
LOGO
Displaying Variables
To print a variable, pass variable name to
document.write() or
document.writeln() method
Example:
document.write("<p>Your sales total is $“ +
salesTotal + ".</p>");
csehui.wordpress.com Computer Science & Engineering
LOGO
Modifying Variables
To change a variable’s value, use a statement
with variable’s name, equal sign, and new value
Example:
var salesTotal = 40;
document.write("<p>Your sales total is $" +
salesTotal + ".</p>");
var shipping = 10;
salesTotal = salesTotal + shipping;
document.write("<p>Your sales total plus
shipping is $" + salesTotal + ".</p>");
csehui.wordpress.com Computer Science & Engineering
LOGO
Modifying Variables
csehui.wordpress.com Computer Science & Engineering
LOGO
Data Types
Data type
Category of information that a variable
contains.
Primitive types
Data types that can be assigned only a single
value.
csehui.wordpress.com Computer Science & Engineering
LOGO
Data Types
JavaScript supports two numeric data types:
Integers and floating-point numbers
Integer
Positive or negative number with no decimal
places
Floating-point number
Decimal places (or written in exponential notation)
Exponential notation, or scientific notation
Shortened format for writing very large
numbers or numbers with many decimal
places
csehui.wordpress.com Computer Science & Engineering
LOGO
Boolean Values
Boolean value
Logical value of true or false
In JavaScript, words true and false indicate
Boolean values
Example
var repeatCustomer = true;
var corporateDiscount = false;
document.write("<p>Repeat customer: " +
repeatCustomer + "</p>");
document.write("<p>Corporate discount: " +
corporateDiscount + "</p>");
csehui.wordpress.com Computer Science & Engineering
