slide môn học HDJ bài 7 the foundation of javascript syntax
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 (400.76 KB, 30 trang )
The Foundation of
JavaScript Syntax
Session 7
1
Objectives
Describe JavaScript
Understand foundation of JavaScript
syntax
2
What is JavaScript
It is a scripting language that can be used to
create client-side scripts and server-side scripts.
For HTML developers, JavaScript is a boon, which
helps in building HTML systems that interact with
the user
JavaScript
makes
it
easier
to
dynamic and interactive Web pages.
JavaScript is a scripting language developed by
Sun Microsystems and Netscape.
JavaScript developed from Netscape's Livescript.
Where is JavaScript running ?
Client applications run in a browser such as
3
Netscape Navigator or Internet Explorer.
create
JavaScript effects and rules
►
JavaScript can enhance the dynamics
interactivity of the site by using its effects.
►
and
Provide User Interaction
Dynamically Change Content
Validate data
Provide Database Interaction
Similar to any other language, JavaScript also
follows some basic grammar rules like:
Using Caps JavaScript is case sensitive
Using Pairs Open and closed symbols need to work in pairs
Using Spaces JavaScript ignores extra white space
Using Comments make notes to yourself about what the script
is doing
4
JavaScript Tools and Run- Time
Environment
► The
JavaScript code-generating tools and
IDE helps in creating useful JavaScript
code. A few of these include:
Dialog Box
Pop – up Menu Builder
Remotes
► Run
Time Environment
Client Side Scripting
Java Script on Web Server
5
Client-Side JavaScript
► If
a client-side script is embedded in the
page, the server forwards the full content of
the HTML document – The JavaScript
statements and the HTML content
► When the browser receives the document, it
executes the HTML and JavaScript
statements without any interaction with the
server
6
Server-Side JavaScript
► We
can embedded JavaScript statements in
an HTML document that are executed on
the server
All the files are then compiled into a single
executable in bytecode format.
When the client browser requests the
executable, the run-time engine executes the
server-side JavaScript statements and returns
the HTML page to the browser.
► Some
of the uses of server-side scripts
7
Embedding JavaScript in Web Page
► The
JavaScript can be inserted into an HTML
document in the following ways :
Using SCRIPT tag:
<script language="JavaScript">
//-->
</script>
Using an external File
<script language="JavaScript" src="filename.js">
</script>
Using JavaScript Expressions within HTML Tag
Attribute Values
Using JavaScript in event handlers
8
Program Using Msg box and write
method
Example:
Output:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
confirm ("Are you Sure?");
alert("OK");
document.write(" Thank You !");
</SCRIPT>
</HEAD>
</HTML>
9
Variables
A variable is a container that refers to a memory
location.
► It is used to hold values that may change while the
script is executing.
► Variables follow some naming conventions.
► A variable is declared using the keyword ‘var’.
►
eg. var A = 10;
►
Variables have a scope that is determined by where
they are declared in the script.
Global Variable
Local Variable
►
Literals are fixed values that can be used10in the script.
Data Types
► JavaScript
has a relatively small set of data types.
Numbers
Logical or Boolean
Strings
Null
► JavaScript
is case-sensitive.
► In
JavaScript, two variables of different types can
be combined.
example: A = “ This apple costs Rs.” + 5
will result in a string with the value "This apple costs Rs. 5".
11
Data Type - Example
Example:
Output:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
var A = "12" + 7.5;
document.write(A);
</SCRIPT>
</HEAD>
</HTML>
12
Literal - Types
►
►
►
►
►
Integer – These can be expressed in decimal,
hexadecimal and binary number system.
Floating- point - These number can have a decimal
point or an “e” or “”E” followed by an integer.
String - A string literal is zero or more characters
enclosed in single or double quotation marks.
Boolean - This can take only two values: True or
False.
null - The null type has only one value: null. Null
implies no data.
13
Operators
►
Operators take one or more variables or values
(operands) and return a new value.
►
JavaScript uses both binary and unary operators.
►
Operators are classified depending on the relation
they perform like:
Arithmetic Operator
Comparison Operator
Logical Operator
String Operator
Evaluation Operator
Operator Precedence
14
Arithmetic Operator
►
►
Arithmetic operators take numerical values
(either literals or variables) as their operands
and return a single numerical value.
Arithmetic Operators include:
Addition (+)
Subtraction (-)
Division (/)
Modulus (%)
Unary increment (++)
Unary decrement (- -)
Unary negation (-)
15
Comparison Operator
►
A comparison operator compares its operands
and returns a logical value based on whether the
comparison is true or not.
►
Comparison Operators include:
Equal to (==)
Not Equal to (!+)
Greater than (>)
Greater than or equal to (>=)
Less than (<)
Less than or equal to (<=)
16
Logical Operators
►
Logical operators are typically used to combine
multiple comparisons into a conditional
expression.
►
It includes:
17
Logical Operators - Example
Example:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var x = 10;
var y = 5;
alert ("The value of x is "
+ x + "The value of y is
alert("x AND y = " + (x && y));
alert("x OR y = " + (x || y));
alert("NOT x = " + (!x));
</SCRIPT>
</HEAD>
</HTML>
Output:
" + y);
18
String Operator
►
The string operator takes two string operators as
operands and creates a new string, which is
same, as the two original strings run together.
Example:
x = ‘yellow’;
y = ‘green’;
z = x + y + ‘white’;
which means z is “yellowgreenwhite”
w = y + 9, which means w is “green9”
19
Evaluation Operator
►
These operators generally includes:
Conditional operator
condition) ? trueVal : falseVal
Assigns a specified value to a variable if a condition is
true, otherwise assigns an alternate value if condition
is false.
eg.
status = (age >= 18) ? "adult" : "minor“
Typeof operator
The typeof operator returns a string indicating the
type of the operand.
eg.
var x = 5;
document.write(typeof(x));
20
Operator Precedence
►
When there are several operators to be evaluated in
an expression, the precedence of the operator
determines the sequence in which the operators are
evaluated.
►
The following table lists the
operators, from lowest to highest:
precedence
21
of
Expressions
►
►
►
Expressions are used to manipulate and evaluate
variables in different contexts.
An expression is any valid set of literals, variables,
and operators which evaluates to a single value.
Expression types available in JavaScript includes:
►
Arithmetic: evaluates to a number
Logical: evaluates to a boolean value
String: evaluates to a string
Expressions combine variables and literals
together via operators.
22
Regular Expression
►
►
►
A regular expression is defined pattern that can
be used to match the character combinations of a
string.
Regular expressions can be used to search for
character patters in a string input by the user.
Regular expression can include:
►
Simple patterns
Combination of simple and special characters
Regular expressions can be created in one of two
ways:
Using an object initializer
Calling the constructor function of the RegExp
object
23
Using Regular Expression
►
The methods that can be used with Regular
Expression includes:
►
Exec, Test, Match, Search, Replace, Split
The syntax to use a method:
objectname.method = function_name
►
The syntax for calling the method in the context
of the object is:
objectname.methodname(parameters)
24
Regular Expression - Example
Example:
Output:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
re = /Time/
str = re.test ("Time and Tide
wait for none");
window.alert(str);
</SCRIPT>
</HEAD>
</HTML>
25
