JAVASCRIPT 1
1
Objectives
2
Describe JavaScript
Understand foundation of JavaScript syntax
Control Structure
Functions
What is JavaScript
3
It is a scripting language that can be used to create client-side
scripts and server-side scripts.
JavaScript makes it easier to create dynamic and interactive Web
pages.
JavaScript is a scripting language developed by Sun Microsystems
and Netscape.
JavaScript developed from Netscapes’s Livescript.
Client applications run in a browser such as chrome, MS Edge,
Firefox, Opera ….
JavaScript effects and rules
4
JavaScript can enhance the dynamics and interactivity
of the site by using its effects.
• Provide User Interaction
• Dynamically Change Content
• Validate data
• Using function
JavaScript run-time environment
5
Run Time Environment
– Client Side Scripting
– Java Script on Web Server
Enabling JavaScript in Browsers
6
JavaScript in Internet Explorer
Tools → Internet Options → Security → Custom Level →
Scripting → Active scripting
JavaScript in Firefox
New tab → type about: config → javascript.enabled → select
toggle
JavaScript in Chrome
Settings → Show advanced settings → Privacy → Javascript →
Allow
Embedding JavaScript in Web Page
7
The JavaScript can be inserted into an HTML document
in the following ways :
• Using <script> tag
• Using an external File
• Using JavaScript in event handlers
Program Using Msg box and write method
8
<html>
<head>
<script language = "JavaScript">
confirm ("Are you Sure?");
alert("OK");
document.write("Thank You!");
</script>
</head>
</html>
JavaScript Comments
9
JavaScript comments can be used to explain JavaScript code,
and to make it more readable.
JavaScript comments can also be used to prevent execution,
when testing alternative code.
// line comment
/* Block comment */
Variables
10
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’. ex. var x = 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 used in the script.
Data Types
11
JavaScript has a relatively small set of data types.
Numbers
Logical or Boolean
Strings
Null
Array
Object
Data Types
12
In JavaScript, two variables of different types can be
combined.
Example: var x = 'This apple costs = ' +
5;
will result in a string with value "This apple costs =
5".
Primitive Data Type
13
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
Operators
14
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
Arithmetic Operator
15
Arithmetic operators take numerical values (either literals or variables)
as their operands and return a single numerical value.
Arithmetic Operators include:
– Addition (+)
– Subtraction (-)
– Multiple (*)
– Division (/)
– Modulus (%)
– Increment (++)
– Decrement (- -)
– Exponentiation (**)
Comparison Operator
16
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 (<=)
Logical Operators
17
Logical operators are typically used to combine
multiple comparisons into a conditional expression.
Logical Operators include:
– AND (&&)
– OR (||)
– NOT (!)
String Operator
18
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”
Evaluation Operator
19
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.
status = (age >= 18) ? "adult" : "minor"
– Typeof operator: The typeof operator returns a string indicating the
type of the operand.
var x = 5;
document.write(typeof(x));
Operator Precedence
20
When there are several operators to be
valuated in an expression, the precedence of
the operator determines the sequence in
which the operators are evaluated.
https://www.w3schools.com/js/js_arithmetic.asp
Regular Expression
21
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
Using Regular Expression
22
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)
https://www.w3schools.com/js/js_regexp.asp
Method for JS regular expressions
23
Function
24
JavaScript has several pre-defined functions that we can use within the script.
Some of pre-defined JavaScript functions includes:
– eval function
– isNaN function
Creating User Defined Functions function
function funcName(argument1, argument2, etc){
statements;
}
• Calling a Function
• Return Statement
Q&A
25
Exercise
26
https://www.w3schools.com/js/js_exercises.asp
http://
www.asmarterwaytolearn.com/js/index-of-exercises.h
tml
Debugging
27
