Showing posts sorted by date for query javascript operators. Sort by relevance Show all posts
Showing posts sorted by date for query javascript operators. Sort by relevance Show all posts

Javascript: Objects

 A JavaScript Object may be a real life object or thing and its different kinds of looks, actions, varieties are the different properties of the object. The different ways of doing the actions are the methods of the object.

For example, a laptop is an object, its different model, size, color, memory are the properties and its processing speed, the way of functioning or different operating systems are the different methods.

The properties and method's name of different laptops are same but values of these properties and methods may be different.

An object may be a variable too, which can contain many values:

For example:

Try it yourself editor
 
Code
Output
An object may contain many values as a variable. The values are written by name:value pairs
For example: 
Try it yourself editor
 
Code
Output
A JavaScript object can be created as literals. 
For example: Try it yourself editor
 
Code
Output
In above examples, we can see that the laptop is an object, its type, model and color are properties. HP, pavilion and white are values of the properties.
We can access an object property by two ways. These are:
object.property or
object["property"]
See examples
Try it yourself editor
 
Code
Output
This is the first way as object.property 

Try it yourself editor
 
Code
Output
This is the second way as object["property"]
An object property can be defined as the container of the values.

Object Methods : Methods are the actions performed by an object or on an object. Methods are stored in a property as function definition.
For example:
var person = {
  firstName: "Peter",
  lastName : "Johnson",
  gender: "male",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
A methos is a function stored as a property.
In above example 'this' refers to the object.
this.firstName = firstName property of this=firstName property of object or person.

Here, 'this' keyword refers to the object depending on how it is used or how 'this' is being invoked.

Remember 'this' is a keyword not a variable, so we can't replace it with other words.
Now see the syntax, how 'this' keyword works.

Try it yourself editor
 
Code
Output
Do not declaire strings, numbers and booleans as objects.
 When any javaScript variable is assigned with 'new' keyword, it is created as an onject.
For example:
x = new strings();  It declaire x as an string object. 
x = new numbers();  It declaire x as an number object. 
x = new booleans();  It declaire x as an boolean object. 

By - No comments:
Labels: ,

JavaScript: Functions

 A JavaScript function is a group of codes, designed to perform a particular task. It can be called anywhere in the program. This substitutes the writing same code again and again. 

Syntax of Javascript Function: A JavaScript function is defined with function keyword, followed by a function name (it can be letters, digits, underscore and dollar sign), followed by parentheses (). A parentheses  contain parameter names separated by comma. Like (parameter1, parameter2, parameter3, etc) and finally followed by code to be executed inside curly braces{}.

For example:

function name(parameter1, parameter2){

// code to be executed
}
Function parameters are listed inside the parentheses() in function program. Function arguments are the values recieved by the  parameters, when function is invoked or called. Thus parameters behave like a variable inside that program, to hold the values given.
For example:
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Parameters A and B behave like variables, to hold the values</p>
<p id="demo"></p>
<script>
function myFunction(A, B) {
  return A * B;
}
var result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>

Try this example 
Try it yourself editor
 
Code
Output

Here variables A and B are parameters, behaving like variables and storing the value given here 4 and 3 respectively.

Use of a function in JavaScript: Uses of the functions are 

i. We can write the codes, can be used many times.
ii. With functions we can reuse the codes.
iii.We can use the same code with different arguments, to produce different results.

Invocation of a function: The code inside the function will execute, when "something" invokes the function. It is done, When

i.  An event occurs or a user clicks a button.

ii. It is invoked from JavaScript code.

iii. Automatically (self invoked).


i. When user clicks a button: In this method, a button is used to call a function. This button is given the name of the function 'myFunction', in its 'onclick' stage. Name of the button is 'Click Me!'.

<button type="button" onclick="myFunction()">Click Me!</button>

When a user clicks this, the function will performed.

For example:
<html>
<body>
<h2>JavaScript's function invocation, when clicked button by a user</h2>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="test"></p>
<script>
function myFunction() {
  document.getElementById("test").innerHTML = "Hello World!" + "<br>" + "I am your new friend";
  }
</script>
</body>
</html>

Try this Try it yourself editor
 
Code
Output

ii. Invoked by Javascript code: In this method, a function name 'myFunction' having two parameters x and y. Whenever the value of x and y will be given inside program, will return the value 'x + y'.

For example:

<html>
<body>
<h1>JavaScript Functions</h1>
<p>JavaScript invocation by JS code</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
  return x + y;
}
var result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
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. Function often compute a return value.

Try this Try it yourself editor
 
Code
Output

iii. Javascript code invoked automatically(self invoked): It can be written directly without any function name and parameters.

For example:
<html>
<body>
<p>Self-Invoking Functions</p>
<p id="demo"></p>
<script>
(function () {
  document.getElementById("demo").innerHTML = "Hi! I am calling myself";
})();
</script>
</body>
</html>

Try this Try it yourself editor
 
Code
Output
 
The () Operator:  The () operator is used to invoke the function.
For example:
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that will calculate interest</p>
<p id="demo"></p>
<script>
function interest(p, t, i) {
  return (p*t*i/100);
}
var value = interest(5000, 3, 7);
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>

Try this

Try it yourself editor
 
Code
Output

If we are not assigning any value in 'var value = interest( )' the parameter will be incorrect and returns an incorrect answer.

Try this
Try it yourself editor
 
Code
Output

Accessing a function without (), will return the function, not the function result.

Try this Try it yourself editor
 
Code
Output
In above example, we can see, function is shown as output and not showing the result.

Functions are used as variable values: Functions can be used as the same way, as we use variables, in all types of formulas and calculations.
For example:
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>
<p id="demo"></p>
<script>
var test2 = "The interest for principal rs. 5000, for 3 years at rate 7% is = " +  interest(5000, 3, 7);
document.getElementById("demo").innerHTML = test2;
function interest(p, t, r) {
  return (p*t*r/100);
} 
</script>
</body>
</html>

Try this

Try it yourself editor
 
Code
Output

TOP
By - No comments:
Labels: , ,

JavaScript: Data Types

Data type is the value, which we store in a variable in a program. These values may be of different kinds like string, number etc. In programming it is very important to know the data type perfectly. Only after this we will be able to operate on variables. Without understanding the data types a computer is not able to solve it safely.

JavaScript has eight datatypes:

1. String

2. Number

3. Bigint

4. Boolean

5. Undefined

6. Null

7. Symbol

8. Object

        The Object data type can contain an object, an array and a date.

1. String Data Type: String is the series of characters like "Peter Waterson". Strings are written with single or double quotes.

For example:

<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written with single or double quotes.</p>
<p id="demo"></p>
<script>
var Name = "Peter Waterson";var Address = 'z-10 milan road, Hawaii';
document.getElementById("demo").innerHTML =
Name + "<br>" + 
Address; 
</script>
</body>
</html>
Try it in try it editor.

Try it yourself editor
 
Code
Output

2. Number Data Type: Other programming languages have many number types like: 
Whole Numbers (Integers): These are byte(8 bit), short(16 bit), int(32 bit) long(64 bit).
Real Numbers (Floating Numbers): float(32 bit), double(64 bit).
Javascript Numbers are always one type:
double(64 bit floating point). All JavaScript numbers are stored as decimal numbers (floating point). Numbers can be written with or without decimal.
For example:
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
var x1 = 314.00;
var x2 = 314;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
Try above code in try it editor:
Try it yourself editor
 
Code
Output
Exponential Notation:
Extra large or extra small numbers can be written as exponential (scientific) notation.
For example:
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with scientific  notation:</p>
<p id="demo"></p>
<script>
var a = 111e5;
var b = 222e-5;
document.getElementById("demo").innerHTML =
a + "<br>" + b;
</script>
</body>
</html>
Try above code in try it editor:

Try it yourself editor
 
Code
Output

3. BigInt Data Type: All JavaScript numbers are  stored in a 64 bit floating number format. JavaScript bigInt is a new data type that is used to store integer values that are too big to be represented by  normal JavaScript number. Mathematical calculations can't be performed between bigInt and  number type.
For example:
<html>
<body>
<h1>JavScript Bigint</h1>
<p>A big integer value.</p>
<p id="demo"></p>
<p>Calculation can't be performed between bigInt and number datatype.</p>
<script>
var c = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = c; 
</script>
</body>
</html>
Try  above codes in try it editor.

Try it yourself editor
 
Code
Output

4. Boolean Data Type: Booleans can have only two values 'true' and 'false'. Booleans are often used in conditional testing.
For example:
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans are used for conditional testing</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
Try above code in try it editor.

Try it yourself editor
 
Code
Output

5. Undefined Data Type: In JavaScript the variable without a value, has the value undefined and it shows 'undefined' as output. We can also give the value 'undefined' to a variable. The output will be the same.
For Example:
<html>
<body>
<h2>JavaScript undefined data type</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var mobile;
document.getElementById("demo").innerHTML =
mobile + "<br>" + typeof mobile;
</script>
</body>
</html> 
Try above code in try it editor.

Try it yourself editor
 
Code
Output

6. Object Data Type: JavaScript object datatype is written with curly braces, in which properties of the object is written like:
person={firstname:"value", lastname:"value", age:value, eyecolor:"value"}
Here there are four properties (firstname, lastname, age and eyecolor) of an object "person" given.
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
 person = {
  firstName : "Peter",
  lastName  : "Waterson",
  age     : 50,
  eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Try the above code in try it editor.

Try it yourself editor
 
Code
Output

7. JavaScript Arrays: JavaScript arrays are written with square brackets under double quotes and separated from each other by comma.
The following program declare an array called "Asia" having three  items "India", "Japan" and "China".
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
Asia = ["India","Japan","China"];
document.getElementById("demo").innerHTML = Asia[0];
</script>
</body>
</html>
JavaScript Array indexes are zero(0) based, means first item is zero, second item is one and so one.
Try above code in try it editor.
Try it yourself editor
 
Code
Output

in above program, in following statement
document.getElementById("demo").innerHTML = Asia[0];
you can change Asia[1] or Asia[2] instead of Asia[0] and click 'Run Code' and see the output.

8. The typeof operator: JavaScript's typeof operator is used to find the type of JavaScript variable. It returns the type of variable or an expression.
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "Peter" + "<br>" + 
typeof "John Waterson";
</script>
</body>
</html>
Try above code in try it editor.

Concept of DataType in JavaScript:

TOP
By - No comments:
Labels: ,
Subscribe to: Posts (Atom)

Python: Functions