CSS Unit I - Basics of JavaScript Programming

Basics of JavaScript
Programming
Prepared By
Prof. Rahul S. Tamkhane
Unit - I
Subject - Client Side Scripting Language (CSS-22519)

Compiled By - Prof. Rahul S. Tamkhane
Unit Outcomes (UOs)
1a. Create object to solve the given problem.
1b. Develop JavaScript to implement the switch-case statement for
the given problem.
1c. Develop JavaScript to implement loop for solving the given
iterative problem.
1d. Display properties of the given object using getters and setters.
1e. Develop program using basic features of JavaScript to solve the
given problem.
Unit I - Basics of JavaScript Programming (12 Marks) 2
Course Outcome (CO) – Create interactive web pages using program flow control
statements.

Content
■ Features of JavaScript
■ Object Name, Property, Methods, Dot Syntax, Main Event0
■ Values and Variables
■ Operators and Expressions - Primary Expressions, Object and Array initializers, function
definition expression, property access expressions, invocation expressions
■ If Statement, if...else, nested if statement
■ Switch...case Statement
■ Loop Statement - for loop, for…in loop, while loop, do...while loop, continue
■ Querying and setting properties and deleting properties, property getters and setters.

Introduction to JavaScript (Contd..)
■ A scripting language most often used for client-side web
development
■ A JavaScript (also name as ECMAScript) is an interpreted, client-
side, event-based, object-oriented scripting language that is use
to add dynamic interactivity to web page.
■ Developed by Brendan Eich at Netspace in Sept 1995
■ The language was initially called LiveScript and was
later renamed JavaScript.

Introduction to JavaScript (Contd..)
■ You can make your webpage more lively and interactive, with the
help of JavaScript.
■ JavaScript is also being used widely in game development
and Mobile application development.

Introduction to JavaScript
■ A script is a small piece of program
■ For example,
– pop up alert box message
– script to provide a drop down
– Menus
■ Some examples of most popular scripting languages are
JavaScript, Jscript, Perl, PHP, Python, VBScript

Features of JavaScript
■ Light-weight, interpreted language
■ Browser support
■ Object oriented language (provides predefined objects)
■ Gives more control over browser
■ Interpreter based
■ Most of control statements syntax same as C language

Advantages
■ Speed
■ Simplicity
■ Versatility
■ Server load
■ Less server interaction
■ Richer interface
■ Immediate feedback to visitors
■ Validate information in forms

Disadvantages
■ Security
■ Relying on end user
■ Reading or writing of files not allowed
■ Not used for networking applications
■ Does not have multitasking or multi-purpose capabilites

Applications
■ Websites
■ Web applications
■ Presentations
■ Server applications
■ Games, etc.

Types of Scripting Languages
■ There are two types of scripting languages
1) Client-side scripting
2) Server -side scripting

1) Client-side scripting (Contd..)
■ It is used to run scripts is usually a browser.
■ The processing takes place on the end users computer.
■ The source code is transferred from the web server to the users
computer over the internet & run directly in the browser.
■ Examples of client side scripting languages are:
JavaScript(primarily), VBScript, HTML, CSS.

1) Client-side scripting

2) Server-side scripting (Contd..)
■ The server-side environment that runs a scripting language is a
web server.
■ A user’s request is fulfilled by running a script directly on the web
server to generate dynamic HTML pages. This HTML is then sent
to the client browser.
■ It is usually based to provide interactive web sites that interface to
database or other data stores on the server.
■ Examples of server-side scripting are: PHP, ASP.Net in C#, C++,
or visual Basic.

2) Server-side scripting

Required softwares
■ You can use Notepad and Browser.
■ You can also choose following IDE or software
– Notepad++
– Sublime
– Atom
– Visual Studio Code (VS Code)
– Microsoft FrontPage
– Macromedia Dreamweaver
– WebStorm
– NetBeans, etc

How to Add JavaScript to a Page (Contd..)
■ Web browsers are built to understand HTML and CSS and
convert those languages into a visual display on the screen.
■ The part of the web browser that understands HTML and CSS is
called the layout or rendering engine. But most browsers also
have something called a JavaScript interpreter.
■ The web browser is usually expecting HTML, so you must
specifically tell the browser when JavaScript is coming by using
the <script> tag.

How to Add JavaScript to a Page
■ The <script> tag is regular HTML.
■ When the web browser encounters the closing </script> tag, it
knows it’s reached the end of the JavaScript program and can get
back to its normal duties.
■ You’ll add the <script> tag in the web page’s <head> section, like
this:

First JavaScript program
Step 1 – Open Notepad and type the following code
Step 2 – Save the file with name “MyJavaScript.html”
Step 3 – Now double click on HTML file, then it will open in browser
<html>
<head>
<title>My First JavaScript</title?
<script>
alert(“Hello World!”);
</script>
</head>
<body>
</body>
</html>

JavaScript Syntax (Contd..)
■ JavaScript code can be placed within the <script>...
</script> HTML tags in a web page.
■ You can place the <script> tags, anywhere within your web page
(recommended to keep it within the <head> tags).
■ The <script> tag alerts the browser program to start interpreting
all the text between these tags as a script.
■ A simple syntax of your JavaScript will appear as follows.

■ The script tag takes two important attributes −
 Language − Specifies what scripting language you are using.
Typically, its value will be javascript. (not used in recent versions of
HTML)
 Type − Indicate the scripting language in use and its value should
be set to "text/javascript".

■ Whitespace and Line Breaks - JavaScript ignores spaces, tabs, and
newlines
■ Semicolons are Optional – JavaScript allows you to omit semicolon
■ Case Sensitivity - JavaScript is a case-sensitive language.
■ Comments in JavaScript - JavaScript supports both C-style and C++-
style comments
– Single line comment //-----
– Multiple line comment /* */
– JavaScript Comment

JavaScript Output (Contd..)
■ JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.
 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

1.2 Object Name (Contd.)
■ A typical web page contains many objects.
■ For example, a web page has two forms which has objects like
buttons, textarea, etc.
■ Each object must be uniquely identified by name or ID.
■ In JavaScript, objects are created by using two ways
1) Using Constructor
2) Using Literal Notation

By Using Constructor
■ The new operator is used to create an instance of object
var obj = new Object(); // Generic object
var dob = new Date(1995, 4, 10); // Date object
var mycar = new Car(); // User-defined object

By Using Literal Notation
■ A object literal consists of comma separated list of name-value
pairs wrapped in curly braces.
var user = { }; // An empty object
var circle = { x:10, y:21, radius:4 }; // User-defined object

1.2 Property
■ The value that is associated with an object.
■ It is a kind of information
■ Object can have many values which are called as property.
■ For example, a form have properties like
– title,
– width,
– height, etc.

1.2 Methods
■ It is basically an action performed by an object.
■ An object is like a noun and method is like as verb
■ It is a kind of behaviour
■ For example,
– A submit button on login form will submit the form data to
server.
■ In JavaScript, we can create a method by using function keyword

1.2 Dot Syntax
■ An object is associated with properties and methods
■ For example,
– A document object has a property bgColor and method write
■ In JS, we can access object property and method using dot
syntax along with object name
document.bgColor // Accessing property
document.write( ) // Accessing method

1.2 Main Event (Contd.)
■ An event is something that causes JavaScript to start executing the code.
■ It is a specific circumstance which is monitored by JavaScript and that script can
respond to it.
■ Some examples of events are:
– A document loading
– User clicking a mouse button
– The browser screen changing size
■ An event handler which is a part of JavaScript that reacts to important events.
■ For example, an event handler on flipkart website will enlarge image when user
mouse over the product

Build-in objects in JavaScript (Contd.)
■ Web browsers have an object named window.
■ It is called as global object.
■ Some of objects are:
– window
– document
– navigator
– history

1.3 Values (Contd.)
■ In HTML, all values are treated as text
■ JavaScript uses six kinds of values
1) Number
2) String
3) Boolean
4) Null
5) Objects
6) Functions

1.3 Values
■ You can also use literals to represent values in JS. These are fixed values.
■ Different types of literals are
1) Array literals – a list of zero or more expressions enclosed in square
brackets ( [ ] )
2) Boolean literals – true or false
3) Integer literals – Expressed in decimal (without leading with 0),
hexadecimal (leading with 0x), octal (leading with 0) & binary (leading with
0b or 0B)
4) Floating-point literals – decimal integer, decimal point, fraction & exponent
5) String literals – zero or more characters enclosed in double or single quotes

1.3 Variables (Contd.)
■ Variables are the “containers” for storing information
■ Used to store values
■ Rules for creating variable in JavaScript
■ Declaring a variable
– Use var keyword, which tells browser that text follow will be the variable
name
– Syntax:
var variable-name;
– Example
var color;

1.3 Variables
■ Initializing a variable
– Use assignment operator to assign value to variable
– Syntax:
variable-name = value;
– Example
color = “Red”; or color = ’Red’;
■ Sample program
■ Make use of typeof

1.4 Operators (Contd.)
■ JavaScript statement contains mathematical expressions which is
used to tell the browser to do something
■ The expression contains two parts
– Operand
– Operator
■ An operand is the value or variable
■ An operator is a special symbol indicates an action or operation

■ Arithmetic operators
■ Comparison operators
■ Logical operators
■ Bitwise operators
■ Assignment operators
■ Conditional operators (Ternary)

■ Arithmetic operators
Arithmetic operators are used to perform mathematical operations between numeric
operands.
Operator Description
+ Adds two numeric operands.
- Subtract right operand from left operand
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two operands.
++ Increment operator. Increase operand value by one.
-- Decrement operator. Decrease value by one.

■ Comparison operators
JavaScript language includes operators that compare two operands and return Boolean
value true or false.
Operators Description
== Compares the equality of two operands without considering type.
=== Compares equality of two operands with type.
!= Compares inequality of two operands.
> Checks whether left side value is greater than right side value. If
yes then returns true otherwise false.
< Checks whether left operand is less than right operand. If yes
then returns true otherwise false.
>= Checks whether left operand is greater than or equal to right
operand. If yes then returns true otherwise false.
<= Checks whether left operand is less than or equal to right
operand. If yes then returns true otherwise false.

■ Logical operators
JavaScript language includes operators that compare two operands and return Boolean
value true or false.
Operator Description
&&
&& is known as AND operator. It checks whether two operands are non-zero (0,
false, undefined, null or "" are considered as zero), if yes then returns 1 otherwise
0.
||
|| is known as OR operator. It checks whether any one of the two operands is non-
zero (0, false, undefined, null or "" is considered as zero).
!
! is known as NOT operator. It reverses the boolean result of the operand (or
condition)

■ Assignment operators
JavaScript includes assignment operators to assign values to variables.
Assignment
operators
Description
= Assigns right operand value to left operand.
+=
Sums up left and right operand values and assign the result to the left
operand.
-=
Subtract right operand value from left operand value and assign the result
to the left operand.
*=
Multiply left and right operand values and assign the result to the left
operand.
/=
Divide left operand value by right operand value and assign the result to
the left operand.
%=
Get the modulus of left operand divide by right operand and assign
resulted modulus to the left operand.

– The JavaScript Bitwise Operators perform bit operations.
– All the decimal values converted into binary values (sequence of bits, i.e., 0100,
1100, 1000, 1001, etc.).
– Next, JavaScript bitwise operator will work on these bits such as shifting them left to
right or converting bit value from 0 to 1, etc.

Operator Name Description
& AND Sets each bit to 1 if both bits are 1
| OR Sets each bit to 1 if one of two bits is 1
^ XOR Sets each bit to 1 if only one of two bits is 1
~ NOT Inverts all the bits
<< Zero fill left shift
Shifts left by pushing zeros in from the right and let the leftmost
bits fall off
>> Signed right shift
Shifts right by pushing copies of the leftmost bit in from the 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

■ Ternary operator
– JavaScript includes special operator called ternary operator : ? that
assigns a value to a variable based on some condition.
– This is like short form of if-else condition.

1.4 Expressions (Contd.)
■ When one or more operators are combined with one or more
operands then it is called an expression.
■ JavaScript has following category of expressions:
1) Primary expressions
2) Object and Array initializers
3) Function definition expressions
4) Property access expressions
5) Invocation expressions

1.4 Expressions Primary Expressions
■ Standalone simplest expressions, don’t include any simpler
expression
■ In JavaScript these are constants, literal values, keywords &
variable references.
1.23 // A number literal
“hello” // A string literal
/pattern/ // A regular expression literal
true, false, null, this // Keywords
i, sum // Variables

1.4 Expressions Object and Array Initializers(Contd.)
■ These are newly created object or array sometimes called as
“object literals” and “array literals”.
■ An “array initializer” is a comma-separated list of expressions
contained within square brackets.
■ The value of an array initializer is a newly created array.
[ ] // An empty array: no expressions inside brackets means no elements
[1+2, 3+4] // A 2-element array. First element is 3, second is 7
var matrix = [[1,2,3], [4,5,6], [7,8,9]]; // Nested array

1.4 Expressions Object and Array Initializers
■ An “object initializer” (like array initializer expressions) but the square
brackets are replaced by curly brackets
■ Each subexpression is prefixed with a property name and a colon:
var p = { x:2.3, y:-1.2 }; // An object with 2 properties
var q = { }; // An empty object with no properties
q.x = 2.3; q.y = -1.2; // Now q has the same properties as p
■ Object literals can be nested. For example:
var rectangle = { upperLeft: { x: 2, y: 2 },
lowerRight: { x: 4, y: 5 } };

1.4 Expressions Function Definition Expressions
■ It defines a JavaScript function & the value of expression is newly
created function also known as “function literal”.
■ A function definition expression typically consists of
– the keyword function followed by a comma-separated list of
zero or more identifiers (the parameter names) in parentheses
and
– a block of JavaScript code (the function body) in curly braces.
■ For example:
// This function returns the square of the value passed to it.
var square = function(x) { return x * x; }

1.4 Expressions Property Access Expressions
■ Evaluates the value of an object property or an array element.
■ JavaScript defines two syntaxes for property access:
expression . identifier
expression [ expression ]
■ For example,
var o = {x:1, y:{z:3}}; // An example object
var a = [o, 4, [5, 6]]; // An example array that contains the object
o.x // => 1: property x of expression o
o["x"] // => 1: property x of object o
o.y.z // => 3: property z of expression o.y
a[1] // => 4: element at index 1 of expression a
a[0].x // => 1: property x of expression a[0]

1.4 Expressions Invocation Expressions
■ An invocation expression is JavaScript’s syntax for calling (or executing) a
function or method.
■ It starts with a function expression that identifies the function to be called.
■ The function expression is followed by an open parenthesis, a comma-
separated list of zero or more argument expressions, and a close
parenthesis. Some examples:
■ For example,
f(0) // f is the function expression; 0 is the argument expression.
Math.max(x,y,z) // Math.max is the function; x, y and z are the arguments.
a.sort() // a.sort is the function; there are no arguments.

1.5 Condition Statements
■ A condition statement is a type of JavaScript statement tells the
browser to evaluate a condition and based upon this evaluation,
either execute or skip one or more statements.
■ The three types of condition statements are the
1) if statement
2) switch... case statement and
3) the loop statement.

1.5 if statement (Contd.)
■ The if statement is most powerful statement that allows JavaScript used for
decision making.
■ There are four versions of the if statement.
■ The if statement has three parts:
– the if keyword,
– a conditional expression, and
– the code block statements
■ Syntax:
if (conditional expression)
{
// code block statements here.
}

1.5 if statement

1.5 if…else statement (Contd.)
■ The if...else statement simply tells the browser “if the condition is true, then
execute these statements, else execute these other statements.”
■ The if…else statement has five parts:
– the if keyword,
– a conditional expression, and
– the code block statements executed when condition is true
– the else keyword.
– a code block statements executed when the condition is false.
■ Syntax:
{
}
else
{
}

1.5 if…else statement

1.5 if…else if statement (Contd.)
■ The if...else if statement tells the browser, “If the condition is true, then execute
these statements, else evaluate another condition. If the other condition is true,
then execute these other statements.
■ Syntax:
{
//Place statements here.
}
else if (conditional expression)
{
}
else
{
}
if...else if...else statement

1.5 if…else if statement

1.6 switch…case statement (Contd.)
■ A switch...case statement tells the browser to compare a switch
value with a series of case values.
■ If the switch value matches a case value, then the browser
executes statements that are placed beneath the case value.

1.6 switch…case statement (Contd.)
■ A switch…case statement has eight parts:
1) The switch keyword
2) The switch value (must be placed within parentheses)
3) The case keyword
4) The case value (must be placed between the case keyword
and a colon
5) The case statements
6) The break keyword (optional)
7) The default keyword (optional)
8) The Open and close French braces define the
body of the switch...case statement.
switch (value)
{
case value1:
break;
case value2:
break;
default:
}

1.7 Looping Statement
■ You can also control how a browser makes a decision by using a loop.
■ A loop is used to execute one or more statements repeatedly, without
your having to duplicate those statements in your JavaScript.
■ You can use four types of loops in a JavaScript:
1) a for loop
2) for in loop
3) while loop
4) do...while loop

1.7 Looping Statement The for loop
■ The for loop tells the browser to execute statements within the for
loop until a condition statement returns false.
■ The for loop has five parts:
1) The for keyword
2) The initializer
3) The conditional expression
4) The post loop statements
5) The code block
for ( initializer; conditional expression ;
post loop
statements)
{
}

1.7 Looping Statement The for in loop
(Contd.)
■ The for in loop is a special kind of for loop that is used whenever you don’t
know the number of times that the browser should loop.
■ The for in loop tells the browser to execute statements within the code block
for each item on a list.
■ If the list has five items, then the browser executes those statements five
times.
■ The for loop has four parts:
1) The for keyword
2) The list, which is placed between parentheses
3) The Open and close French braces that define the code block
4) the code block
for(list)
{
}

(Contd.)
Write a program to use the for in loop to display the properties of the window object of a
browser
Run In Browser

(Contd.)
Write a program to use the for in loop to display the properties of the document object of a
browser
Run In Browser
For more details check JavaScript and HTML DOM Reference/

1.7 Looping Statement The while loop
■ The while loop tells the browser to execute one or more
statements continually as long as a condition is true.
■ A kind of entry-controlled loop.
■ Loop executes zero or more times.
■ The while loop has four parts:
1) The while keyword
2) The conditional expression
4) the code block
while (conditional expression)
{
}

1.7 Looping Statement The do…while loop
(Contd.)
■ The do…while loop is same as while loop, except that statements
within the code block executes at least once.
■ A kind of exit-controlled loop.
■ Loop executes one or more times.
■ The do…while loop has four parts:
1) The do keyword
3) The while keyword
4) The conditional expression placed within parenthesis
do
{
} while (conditional expression) ;

1.7 Looping Statement
Difference between while and do…while loop
while loop do…while

1.7 continue statement
■ The continue statement "jumps over" one iteration in the
loop.
■ The continue keyword instructs the browser
– to stop executing statements within the loop immediately and
– return to top of the loop to evaluate the conditional
expression
■ It breaks iteration in the loop and continues executing the next
iteration in the loop.
continue;

1.8 Querying and Setting properties
(Contd..)
■ To obtain (or query) the value of a object property
1) Use dot syntax
 While using dot operator, the RHS must be identifier
 For example
var author = book.author;
var name = student.surname;
2) Use square brackets
 While using square brackets, the value within brackets must be a property
name
 For example
var title = book[“main_title”];
var author = book[“author”];

1.8 Querying and Setting properties
■ To create (or set) a object property use dot or square brackets but put them on
LHS of an assignment expression.
■ For example
book.edition = 5;
book[“main_title”] = “ECMAScript”;

1.8 Deleting properties
■ The delete operator is used to remove the property from an object.
■ For example
delete book.author; // The object now has no author property
delete book[“main_title”]; // The object now has no main_title property

1.8 Getters and Setters (Contd.)
■ There are two kinds of object properties.
1) Data properties – These have a simple value
2) Accessor properties. They are essentially functions that
execute on getting and setting a value
■ Accessor properties are represented by “getter” and “setter”
methods.

■ In an object literal they are denoted by get and set:
■ The getter works when obj.propName is read
■ The setter – when it is assigned.

■ For instance, we have a user object with name and surname:
let user = {
name: "John",
surname: "Smith"
};

■ Now we want to add a fullName property, that should be "John Smith".
■ We don’t want to copy-paste existing information, so we can implement
it as an accessor:
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
}
};
alert(user.fullName); // John Smith

■ For adding a setter for user.fullName add the following:
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
},
};
// set fullName is executed with the given value.
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper

Program to create getter and setter for fullName

Compiled By - Prof. Rahul S. Tamkhane Unit I - Basics of JavaScript Programming (12 Marks) 80

CSS Unit I - Basics of JavaScript Programming

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a CSS Unit I - Basics of JavaScript Programming

Similar a CSS Unit I - Basics of JavaScript Programming (20)

Más de RahulTamkhane

Más de RahulTamkhane (8)

Último

Último (20)

CSS Unit I - Basics of JavaScript Programming