Scribd
Upload
14 views11 pages

WebPHP Unit21 - JS - PDF

The document discusses JavaScript, including how it can be added to HTML pages, its variables and data types, operators, and more. JavaScript can be added internally or externally to HTML. It has two variable scopes - global and local. The core data types in JavaScript are primitive (string, number, boolean, undefined, null) and non-primitive (object, array, regular expression). Various operators like arithmetic, logical, comparison, assignment and bitwise are covered.

Uploaded by

kiran23benny
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
14 views11 pages

WebPHP Unit21 - JS - PDF

The document discusses JavaScript, including how it can be added to HTML pages, its variables and data types, operators, and more. JavaScript can be added internally or externally to HTML. It has two variable scopes - global and local. The core data types in JavaScript are primitive (string, number, boolean, undefined, null) and non-primitive (object, array, regular expression). Various operators like arithmetic, logical, comparison, assignment and bitwise are covered.

Uploaded by

kiran23benny
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/ 11

Web Programming using PHP

Unit II
JS JavaScript is a client-side scripting language, which means the source code is processed by the
client's web browser rather than on the web server. It is lightweight and most commonly used
as a part of web pages. The JavaScript code can produce an error message before any
information is actually transmitted to the web server. It is an interpreted programming
language with object-oriented capabilities.

• allow client-side script to interact with the user and


make dynamic pages.
• it can calculate, manipulate and validate input data.
• it can change HTML Content
• it can change HTML Attribute Values
• it can change HTML Styles (CSS)
• it can Hide HTML Elements
• it can Show HTML Elements

NSS College Rajakumari, Dept. of Computer Applications 1


Web Programming using PHP
Unit II Adding JavaScript into HTML – 2 ways
JS External
Internal JavaScript codes are stored in an external file with
JavaScript codes are placed in extension .js. Then an external script reference
between the <script> and </script> to this file is placed in <head> or <body> section
tags, either in <head> or <body> of HTML using src attribute of <script> tag.
section of HTML or in both.
Advantages
• reusability of code in
more than one HTML file.
in <head> • easy code readability.
• time-efficient as web
browsers cache the
external js files, which
reduces page loading time.
in <body> • enables both web
designers and coders to Disadvantages
work with html and js files • stealer may download the coder's code using
parallelly and separately. the url of the js file..
• reduces the length of • If two js files are dependent, then a failure in exterjs.js
code. one file may affect the execution of the other
file.
• web browser makes an additional http
request to get the js code.
• tiny to a large change in js code may cause
unexpected results in all its dependent files.

NSS College Rajakumari, Dept. of Computer Applications 2


Web Programming using PHP
Unit II JavaScript - Variables
JS JavaScript variables are containers for storing data values. These variables are identified using unique
names called identifiers. Variables are declared using the keyword var. As JavaScript is an
untyped(dynamic) language (can hold any type of data), there is no need for type declaration. General
rules for constructing names for variables are
• Names can contain letters, digits, underscores, and dollar signs.
• Names can begin with a letter or $ or _(underscore)
• Names are case sensitive (y and Y are different variables)
• Reserved words cannot be used as names
Variables Scope
is the region of program in which variable is defined. JavaScript variables have only two scopes.
Global Variables − A global variable
has global scope which means it can
be defined anywhere in the JavaScript Global varaible
code.
Local Variables − A local variable will Local varaible
be visible only within a function where
it is defined. Function parameters are
always local to that function.
NSS College Rajakumari, Dept. of Computer Applications 3
Web Programming using PHP
Unit II
JS JavaScript – Data Types
There are two types of data types in JavaScript. Primitive(not an object and has no methods) and Non-Primitive

Primitive Descritpion typeof( ) operator


String represents sequence of characters. var nm = “Hello”; string
Number represents numeric values. var x = 5; number
Boolean represents boolean value either false or true boolean
Undefined represents a variable without a value, has the value undefined undefined
Null is "nothing". It is supposed to be something that doesn't exist. object

Non-Primitive Descritpion typeof( ) operator


Object represents instance through which members can be accessed. object
Array represents group of similar values object
RegExp represents regular expression

NSS College Rajakumari, Dept. of Computer Applications 4


Web Programming using PHP
Unit II
JS JavaScript – Data Types
Any variable can be
emptied by setting the
value to undefined. The
type will also be undefined
An object can be
emptied by setting
it to null. Its type
still remains as
object.

An object can also


emptied by setting
it to undefined.
Both value and type
will be undefined.

NSS College Rajakumari, Dept. of Computer Applications 5


Web Programming using PHP
Unit II
JS JavaScript – Operators
JavaScript operators are symbols that are used to perform operations on operands. JavaScript includes
following categories of operators.

Operators Description
Arithmetic Operators used to perform mathematical operations between numeric operands.
Logical Operators used to combine two or more conditions.
Comparison Operators used to compare two operands and return boolean value true or false.
Assignment Operators used to assign values to variables with less key strokes.
Bitwise Operators used to perform bitwise operations on operands.
Special Operators used to perform special operations.

NSS College Rajakumari, Dept. of Computer Applications 6


Web Programming using PHP
Unit II Arithmetic Operators
JS The + operator, and
Operator Description Example the += operator can
+ Addition 10+20 = 30 also be used for
- Subtraction 20-10 = 10 concatenate strings.

* Multiplication 10*20 = 200


/ Division 20/10 = 2 Multiplication (*) and division (/)
have higher precedence than
% Modulus (Remainder) 20%10 = 0 addition (+) and subtraction (-).
** Exponentiation 2**3 = 8 The precedence can be changed
++ Increment var a=10; a++; Now a = 11 by using parentheses. When many
operations have the same
-- Decrement var a=10; a--; Now a = 9 precedence (like addition and
Logical Operators subtraction), they are computed
Operator Description Example from left to right. When using
parentheses, the operations inside
&& Logical AND (10==20 && 20==33) = false the parentheses are computed
|| Logical OR (10==20 || 20==33) = false first.
! Logical Not !(10==20) = true
NSS College Rajakumari, Dept. of Computer Applications 7
Web Programming using PHP
Unit II Comparison Operators
JS Operator Description Example
• = is used for assigning values to a variable.
• == is used for comparison between two variables
== Is equal to 10==20 = false
irrespective of the datatype of variable.
=== strict, Identical (equal and of same type) 10==20 = false • === along with comparison it will also check the
!= Not equal to 10!=20 = true datatype of two variables.
!== Not Identical 20!==20 = false
> Greater than 20>10 = true More
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

Assignment Operators
Operator Description Example
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
NSS College Rajakumari, Dept. of Computer Applications 8
Web Programming using PHP
Unit II Bitwise Operators
JS Operator Name Description Example
& AND Sets each bit to 1 if both bits are 1 5&1=1
| OR Sets each bit to 1 if one of two bits is 1 5|1=5
^ XOR Sets each bit to 1 if only one of two bits is 1 5 ^1=4 More
~ NOT Inverts all the bits ~5 = -6
<< Zero fill left shift Shifts left by pushing zeros in from the right and let the leftmost bits fall off 5 << 1 = 10
(Sign preserving) Shifts right by pushing copies of the leftmost bit in from the
>> Signed right shift -5 >> 1 = -3
left, and let the rightmost bits fall off
>>> Zero fill right shift Shifts right by pushing zeros in from the left, and let the rightmost bits fall off 5 >>> 1 = 2

Special Operators
Operator Description Operator Description
Conditional Operator returns value based on the new creates an instance (object)
(?:)
condition. It is like if-else. typeof checks the type of object.
Comma Operator allows multiple expressions to be void it discards the expression's return value.
,
evaluated as single statement.
checks what is returned in a generator by the generator's
delete Delete Operator deletes a property from the object. yield
iterator.
in In Operator checks if object has the given property
instanceof checks if the object is an instance of given type
NSS College Rajakumari, Dept. of Computer Applications 9
Web Programming using PHP
Unit II JavaScript – Operators Example
JS

NSS College Rajakumari, Dept. of Computer Applications 10


Web Programming using PHP

References
1. https://www.tutorialspoint.com
2. https://www.geeksforgeeks.org
3. https://www.w3schools.com
4. https://www.javapoint.com
5. https://developer.mozilla.org
6. https://techterms.com
7. https://www.tutorialsteacher.com
8. https://www.c-sharpcorner.com
9. Background vector created by grmarc - www.freepik.com
https://www.freepik.com/free-photos-
vectors/background

NSS College Rajakumari, Dept. of Computer Applications 11

You might also like