KEMBAR78
Javascript analysis | PPTX
JAVASCRIPT ANALYSIS
GROUP NUMBER: 03
THE SCOPE
• JavaScript Objects
• JavaScript Functions
• JavaScript DataTypes
JavaScript Objects
INTRODUCTION TO JAVASCRIPT OBJECTS
• JavaScript is designed on a simple object-based paradigm. An object is a
collection of properties. In JavaScript almost everything is an object.
Here are some of the examples of JavaScript objects
• Numbers can be objects (or primitive data treated as objects)
• Strings can be objects (or primitive data treated as objects)
• Dates are always objects
• Math's are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are objects
Objective Overview
• Objects in JavaScript, just as in many other programming languages, can
be compared to objects in real life. (Example : Car/person )The concept of
objects in JavaScript can be understood with real life, tangible objects.
• EXAMPLE. A cup is an object, with properties. A cup has a color, a design,
weight, a material it is made of, etc.The same way, JavaScript objects can
have properties, which define their characteristics.
Further Explanations
• Basically you can see, Objects are variables too. But objects can
contain many values.The values are written as name: value pairs
(name and value separated by a colon)
• Example
• var person = { firstName:"Uchitha ", lastName:"Bandara", age:25, eyeColor:"blue"
};
Creating Objects in JavaScript
There are different ways to create new objects: but
• Define and create a single object, using an object literal.
• Define and create a single object, with the keyword new.
• Define an object constructor, and then create objects of the constructed type.
How to Use an Object Literal.
• This is the easiest way to create a JavaScript Object. Using an object literal, you both
define and create an object in one statement. An object literal is a list of name: value pairs
(like age:25) inside curly braces {}.
• Example
• var person = {firstName:"Uchitha", lastName:"Bandara", age:25, eyeColor:"blue"};
How to Use the JavaScript Keyword “new”
The following example also creates a new JavaScript object
with four properties:
Example
var person = new Object ();
person.firstName = "Uchitha ";
person.lastName = "Bandara";
person.age = 25;
person.eyeColor = "blue";
Using an Object Constructor
The examples above are limited in many situations.They only create a single object.
Sometimes we like to have an "object type" that can be used to create many objects of one
type.The standard way to create an "object type" is to use an object constructor function:
Example
function person(first, last, age, eye)
{
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
JavaScript Functions
A JavaScript function is a block of code designed to perform a particular task. A
JavaScript function is executed when "something" invokes it (calls it).You can
reuse code: Define the code once, and use it many times.You can use the same
code many times with different arguments, to produce different results
Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ()
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: { }
Function Invocation
The code inside the function will execute when "something"
invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code
after the invoking statement.
Functions often compute a return value.The return value is "returned" back to the "caller":
Functions Used asVariables
Example
We can use:
var text = "The temperature is " + toCelsius(77) + " Celsius";
Instead of:
var x = toCelsius(32);
var text = "The temperature is " + x+ " Celsius";
 JavaScript allows the same variable to contain different types of data
values.
 Primitive data types
– String : a sequence of alphanumeric characters
– Number: integer & floating-point numbers
– Boolean: logical values “true” or “false”
 Composite data types (or Complex data types)
– Object : a named collection of data
– Array : a sequence of values
 Special data types
– Null : an initial value is assigned
– Undefined: the variable has been created by not yet assigned a value
JavaScript Data Types :
String Data Type
Ex:
var crsName = “MIT“ ; // Using double quotes
var crsName = ‘MIT‘ ; // Using single quotes
var result = “ It's nice "; // Single quote inside double quotes
var result = “ It is called ‘B.Sc in MIT‘ "; // Single quotes inside double quotes
var result = ‘ It is called " B.Sc in MIT“ '; // Double quotes inside single quotes
 A string variable can store a sequence of alphanumeric characters,
spaces and special characters.
 String can also be enclosed in single quotation marks (‘) or in double
quotation marks (“).
 It is an important part of any programming language for doing arithmetic
calculations.
 JavaScript supports:
– Integers: A positive or negative number with no
decimal places.
 Ranged from –253 to 253
– Floating-point numbers: usually written in exponential
notation.
 3.1415…, 2.0e11
Number Data Type
<script language=“JavaScript”>
var integerVar = 100;
var floatingPointVar = 3.0e10;
// floating-point number 30000000000
document.write(integerVar);
document.write(floatingPointVar);
</script>
 The integer 100 and the number 30,000,000,000
will be appeared in the browser window.
 A Boolean value is a logical value of either true or false. (yes/no, on/off)
 Often used in decision making and data comparison.
 In JavaScript, we can use the words “true” and “false” directly to indicate
Boolean values.
 Booleans are often used in conditional testing.
 Ex:
var x = true;
var y = false;
Boolean Data Type
 An Array contains a set of data represented by a single variable name.
 Arrays in JavaScript are represented by the Array Object, we need to
“new Array()” to construct this object.
 The first element of the array is “Array[0]” until the last one Array[i-1].
Array :
<html>
<script language="JavaScript">
Car = new Array(3);
Car[0] = "Ford";
Car[1] = "Toyota";
Car[2] = "Honda";
document.write(Car[0] + "<br>");
document.write(Car[1] + "<br>");
document.write(Car[2] + "<br>");
</script>
</html>
 JavaScript objects are written with curly braces.
 Object properties are written as name:value pairs, separated by commas.
 An object is a thing, anything, just as things in the real world.
– E.g. {cars, dogs, money, books, … }
 All objects have properties.
– Cars have wheels.
– Browser has a name and version number.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Object :
 In JavaScript, a variable without a value, has the value undefined.
 An “undefined” value is returned when you attempt to use a variable that has
not been defined or you have declared but you forgot to provide with a value.
 var person; //Value is undefined, type is undefined
 Null refers to “nothing”
 We can declare and define a variable as “null” if you want absolutely nothing
in it, but you just don’t want it to be “undefined”.
 var person = null; //Value is null, but type is still an object
Undefined & Null

Javascript analysis

  • 1.
  • 2.
    THE SCOPE • JavaScriptObjects • JavaScript Functions • JavaScript DataTypes
  • 3.
    JavaScript Objects INTRODUCTION TOJAVASCRIPT OBJECTS • JavaScript is designed on a simple object-based paradigm. An object is a collection of properties. In JavaScript almost everything is an object. Here are some of the examples of JavaScript objects • Numbers can be objects (or primitive data treated as objects) • Strings can be objects (or primitive data treated as objects) • Dates are always objects • Math's are always objects • Regular expressions are always objects • Arrays are always objects • Functions are always objects • Objects are objects
  • 4.
    Objective Overview • Objectsin JavaScript, just as in many other programming languages, can be compared to objects in real life. (Example : Car/person )The concept of objects in JavaScript can be understood with real life, tangible objects. • EXAMPLE. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc.The same way, JavaScript objects can have properties, which define their characteristics.
  • 5.
    Further Explanations • Basicallyyou can see, Objects are variables too. But objects can contain many values.The values are written as name: value pairs (name and value separated by a colon) • Example • var person = { firstName:"Uchitha ", lastName:"Bandara", age:25, eyeColor:"blue" };
  • 6.
    Creating Objects inJavaScript There are different ways to create new objects: but • Define and create a single object, using an object literal. • Define and create a single object, with the keyword new. • Define an object constructor, and then create objects of the constructed type.
  • 7.
    How to Usean Object Literal. • This is the easiest way to create a JavaScript Object. Using an object literal, you both define and create an object in one statement. An object literal is a list of name: value pairs (like age:25) inside curly braces {}. • Example • var person = {firstName:"Uchitha", lastName:"Bandara", age:25, eyeColor:"blue"};
  • 8.
    How to Usethe JavaScript Keyword “new” The following example also creates a new JavaScript object with four properties: Example var person = new Object (); person.firstName = "Uchitha "; person.lastName = "Bandara"; person.age = 25; person.eyeColor = "blue";
  • 9.
    Using an ObjectConstructor The examples above are limited in many situations.They only create a single object. Sometimes we like to have an "object type" that can be used to create many objects of one type.The standard way to create an "object type" is to use an object constructor function: Example function person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } var myFather = new person("John", "Doe", 50, "blue"); var myMother = new person("Sally", "Rally", 48, "green");
  • 10.
    JavaScript Functions A JavaScriptfunction is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).You can reuse code: Define the code once, and use it many times.You can use the same code many times with different arguments, to produce different results Syntax A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses () Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: { }
  • 11.
    Function Invocation The codeinside the function will execute when "something" invokes (calls) the function: • When an event occurs (when a user clicks a button) • When it is invoked (called) from JavaScript code • Automatically (self invoked)
  • 12.
    Function Return When JavaScriptreaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement. Functions often compute a return value.The return value is "returned" back to the "caller":
  • 13.
    Functions Used asVariables Example Wecan use: var text = "The temperature is " + toCelsius(77) + " Celsius"; Instead of: var x = toCelsius(32); var text = "The temperature is " + x+ " Celsius";
  • 14.
     JavaScript allowsthe same variable to contain different types of data values.  Primitive data types – String : a sequence of alphanumeric characters – Number: integer & floating-point numbers – Boolean: logical values “true” or “false”  Composite data types (or Complex data types) – Object : a named collection of data – Array : a sequence of values  Special data types – Null : an initial value is assigned – Undefined: the variable has been created by not yet assigned a value JavaScript Data Types :
  • 15.
    String Data Type Ex: varcrsName = “MIT“ ; // Using double quotes var crsName = ‘MIT‘ ; // Using single quotes var result = “ It's nice "; // Single quote inside double quotes var result = “ It is called ‘B.Sc in MIT‘ "; // Single quotes inside double quotes var result = ‘ It is called " B.Sc in MIT“ '; // Double quotes inside single quotes  A string variable can store a sequence of alphanumeric characters, spaces and special characters.  String can also be enclosed in single quotation marks (‘) or in double quotation marks (“).
  • 16.
     It isan important part of any programming language for doing arithmetic calculations.  JavaScript supports: – Integers: A positive or negative number with no decimal places.  Ranged from –253 to 253 – Floating-point numbers: usually written in exponential notation.  3.1415…, 2.0e11 Number Data Type
  • 17.
    <script language=“JavaScript”> var integerVar= 100; var floatingPointVar = 3.0e10; // floating-point number 30000000000 document.write(integerVar); document.write(floatingPointVar); </script>  The integer 100 and the number 30,000,000,000 will be appeared in the browser window.
  • 18.
     A Booleanvalue is a logical value of either true or false. (yes/no, on/off)  Often used in decision making and data comparison.  In JavaScript, we can use the words “true” and “false” directly to indicate Boolean values.  Booleans are often used in conditional testing.  Ex: var x = true; var y = false; Boolean Data Type
  • 19.
     An Arraycontains a set of data represented by a single variable name.  Arrays in JavaScript are represented by the Array Object, we need to “new Array()” to construct this object.  The first element of the array is “Array[0]” until the last one Array[i-1]. Array :
  • 20.
    <html> <script language="JavaScript"> Car =new Array(3); Car[0] = "Ford"; Car[1] = "Toyota"; Car[2] = "Honda"; document.write(Car[0] + "<br>"); document.write(Car[1] + "<br>"); document.write(Car[2] + "<br>"); </script> </html>
  • 21.
     JavaScript objectsare written with curly braces.  Object properties are written as name:value pairs, separated by commas.  An object is a thing, anything, just as things in the real world. – E.g. {cars, dogs, money, books, … }  All objects have properties. – Cars have wheels. – Browser has a name and version number. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; Object :
  • 22.
     In JavaScript,a variable without a value, has the value undefined.  An “undefined” value is returned when you attempt to use a variable that has not been defined or you have declared but you forgot to provide with a value.  var person; //Value is undefined, type is undefined  Null refers to “nothing”  We can declare and define a variable as “null” if you want absolutely nothing in it, but you just don’t want it to be “undefined”.  var person = null; //Value is null, but type is still an object Undefined & Null