Objects in JavaScript – Tutorial 23

Hello friends, in previous JavaScript tutorial, we have seen different event handlers in JavaScript. Today we are going to discuss object-oriented programming. What is mean by Object? What are some built-in objects in JavaScript? etc.

Objects are one of the coolest features in JavaScript as well as it is little confusing for most of the JavaScript learners. Let’s make it simple with some examples. The object is that piece of weird data which has some properties or methods. Don’t be confused now about what the heck are these properties and methods. Be calm, that’s what we are going to learn in next few minutes.

Let us first consider a real life example. If we consider a mobile phone as an object, then it would have properties like weight, color, size, etc. Methods are those things which object does. Methods for a mobile phone would be making a phone call, play game, listen to music, etc.

I hope now you have some basic idea about what object is and what properties & methods are. So let’s go ahead and see what are some built in JavaScript properties and methods.

Objects in JavaScript
Objects in JavaScript

In this example, we have created a variable named “mobile”. Did you know, this variable mobile is indeed an object with its own properties? To get some of the built in javascript properties we need to use a dot separator. In this example, we have checked the length of a variable using “length” property.

In the following example, we are going to learn what are methods in JavaScripts. For understanding methods, we don’t need to do anything new. We are already using the methods from beginning of this course.

For example, We have used document.write(“Some text goes here”); many times. So in this statement, the document is an object and write() is its method.

That’s what I wanted to discuss in this tutorial so far. To summarize it we can say there are some built in javascript objects. In order to use them, we can write it with our separator along with its properties or methods. See the following picture for clear understanding.

Objects in JavaScript
Objects in JavaScript

I hope you liked this tutorial. In the next tutorial, we are going to learn how to create our own JavaScript objects. If you have any queries feel free to ask in the comment section below. Please like our facebook page and subscribe to our newsletter for future updates. Have a nice day!

Event Handlers in JavaScript – Tutorial 22

Hi friends, In previous JavaScript tutorial, we have seen do while loops. Today we are going to learn about event handlers in JavaScript. Event handlers are very important in JavaScript to create more interactive and dynamic web pages. Event handlers basically used to run a bit of code based on user action. For example, pop up a message when the user clicks on a button.

We don’t need to write event handlers in those special script tags. We can use event handlers inline to HTML tags. Let us see one simple example for clear understanding.

Event Handlers in JavaScript
Event Handlers in JavaScript

In this example, we have used onclick event handler. This event handler will pop up a message “Submitted successfully” whenever the user clicks on a button.

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

Note: We can add more than one statement in inline event handlers also. For example, in above example, we have the user only one alert statement with the semicolon, so if we have to add more statement just write them after that semicolon.

Following is the list of all event handlers available in JavaScrit.

Event Handler Used In
onAbort image
onBlur select, text, text area
onChange select, text, textarea
onClick button, checkbox, radio, link, reset, submit, area
onError image
onFocus select, text, testarea
onLoad windows, image
onMouseOver link, area
onMouseOut link, area
onSelect text, textarea
onSubmit form
onUnload window

Just try now with some event handlers and let me know about your outputs. In next JavaScript tutorial, we are going to learn about objects in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

do while Loop in JavaScript – Tutorial 21

Hi friends, in previous JavaScript tutorials, we have seen for loop and while loop. Today we going to learn do while loop in JavaScript. As discussed in an earlier tutorial, all loops work similarly with some minor changes. similarly, do while loop works similar to a while loop. Only the difference is that do while loop first runs the code and then it check the condition. If the condition is true, it again runs a bit of code unless condition becomes false.

In short, do while loop performs an action at least one time. Let us see one simple example of do while loop in javaScript. In this example also, we will print a table of 21.

do while loop in JavaScript
do while loop in JavaScript

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

In next JavaScript tutorial, we are going to learn event handlers in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

while Loop in JavaScript – Tutorial 20

Hi friends, in previous JavaScript Tutorial we have seen for loop. In today’s JavaScript tutorial, we are going to learn one more loop in JavaScript which is while loop. While loop in JavaScript does the same job like for loop with some little changes.

The main difference between while and for loop is that we directly write some condition in while loop unlike for loop. In for loop, we first initialize some variable and then we increment it for a number of times. In while loop, we already have a variable and we just check the condition for it. while loop stops only when a condition becomes false.

Let us see one simple example of for loop in JavaScript for clear understanding. In this example, we will print a table of 21 using a while loop. It’s very simple to understand.

while loop in JavaScript
while loop in JavaScript

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

In next JavaScript tutorial, we are going to learn do while loop in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

For Loop in JavaScript – Tutorial 19

Hi friends, in the previous JavaScript tutorial we have seen Switch case statement in JavaScript. In this JavaScript tutorial, we are going to learn about for loop in JavaScript.

A loop is extremely helpful in any computer programming language. Whenever you want to do a repetitive task, a loop comes in handy. It saves time. I think we don’t need to waste more time on for loop, as most of you are already have some basic idea about it.

Let us directly see one example for printing table of 9. In this example, if you want to write a statement 10 times we can use a for loop. For loop will save time as we don’t need to write the statement 10 times in the code.

for loop in JavaScript
for loop in JavaScript

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

In next JavaScript tutorial, we are going to learn while loop in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

Switch Statement in JavaScript – Tutorial 18

Hi friends, in this JavaScript tutorial we are going to learn about Switch Statement in JavaScript. You may be familiar with Switch statement in C, JAVA, etc. Similarly, we can use Switch statement in JavaScript.

Switch case is used to avoid the use of if statements again and again. Let us see one simple example which will produce custom output depend on input provided using Switch statement.

Switch Statement in JavaScript
Switch Statement in JavaScript

Now in this example, we have one variable called name. Its value is set to Virat. Now our Switch case will check the value of the variable and will perform the specified action.

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

Why we use break action?

The reason behind using break action to stop checking remaining conditions if any condition becomes true.

In above example, if all conditions become false then it will not perform any action. So if we want to do something when conditions become false we need to use default statement. See following example for clear understanding.

Switch Statement with Default action in JavaScript
Switch Statement with Default action in JavaScript

In this example, we have set the variable as Sachin. But in any of the cases sachin is not available and it will print default action as Entry does not match. There is no need to write break acion for default as it is the last action.

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

In next JavaScript tutorial, we are going to learn for loop in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

Complex Conditions in JavaScript – Tutorial 17

Hi friends, in previous JvaScript Tutorial, we have seen how we can use nested if statements for checking multiple conditions. Nested if method, is easy but becomes difficult to implement if you have to check more than 3-4 conditions. In this JavaScript tutorial, we are going to learn about how we can use single if statement to check more than one condition.

Let us see one simple example which will check marks of 4 subjects and print the result.

Complex conditions in JavaScript
Complex conditions in JavaScript – AND Operation

In this example, if we want to check the marks of all 4 subjects, we can directly check all conditions in single if statement. Here we have used && (ampersand operator) for AND operation.

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

We can also use || for OR operator. Let us see one another example which will make use of OR operator.

Complex conditions in JavaScript - OR operation
Complex conditions in JavaScript – OR operation

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file.

In next JavaScript tutorial, we are going to learn switch case in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

Nested if Statement in JavaScript – Tutorial 16

Hi friends, in the previous JavaScript tutorial, we have seen how we can make use of if else statement to perform different actions. In this tutorial, we will see how we can use multiple if statements in JavaScript. It is also called as nested if statements in JavaScript.

For example, if we have to check two conditions and if they are true only then perform some action. So in such cases, we need to write one condition first and inside that condition write another. Let us see one simple example for clear understanding.

Nested if statement in JavaScript
Nested if statement in JavaScript

In this example, we have checked two parameters, firstname and lastname. First, we have checked firstname and if it’s true, only then the seond condition will be checked otherwise it will perform else operation.

This method is simple but useful only for checking 3-4 conditions. If we have more than 3-4 conditions to check, we can use one another way. We will see how to use complex if statements in next JavaScript tutorial.

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file

In next JavaScript tutorial, we are going to learn complex if statements in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

if else Statement in JavaScript – Tutorial 15

Hi friends, in the previous JavaScript tutorial we have seen if statements. Today we are going to learn if else statement in javascript. We have seen that if the assigned test is true, if statement will perform some action. If the condition is false it does not do anything. So in this JavaScript tutorial, we will learn if else statement. It will perform one action if a condition is a true or other action if a condition is false.

Let us see one simple example for if else statement. In this example, we have two variables named apple and mango. Both these variables are having different values, 74 and 43 respectively. Now we have used if else statement to print some text on the screen. If values of these variables are same then it will print : Values of apple and mango are same otherwise it will print : Values of apple and mango are not same.

if else statement in JavaScript
if else statement in JavaScript

 

similar to if statement, we can also use different operators in if else statement as follows:

  • !=       This is “not equal to” operator. It will run a code if one value is not equal to other.
  • >        Greate than operator
  • <        Less than operator
  • >=     Greater than or equal to
  • <=     Less than or equal to

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file

In next JavaScript tutorial, we are going to learn nested if statement in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!

if Statement in JavaScript – Tutorial 14

Hi friends, in this tutorial, we are going to learn if statement in JavaScript. We will also see compare operators in JavaScript. Basically, if statement is a simple way to have your computer to make decisions. It will check whether given condition is true or not. If it’s true, it will run a code else not.

Let us see one simple example. We will have two variables named apple and mango. This example will print some statement on the screen if values of both the variables are same.

if Statement in JavaScript
if Statement in JavaScript

If assigned condition false, it does take any action. If we want to perform some action when the condition is false, we need to use if else statement. We are going to use if else statement in next tutorial.

Here we have used double equal sign because the single equal sign is already reserved as assignment operator which we have seen in an earlier tutorial.

There are some more operators we can use in if statement as follows:

  • !=       This is “not equal to” operator. It will run a code if one value is not equal to other.
  • >        Greate than operator
  • <        Less than operator
  • >=     Greater than or equal to
  • <=     Less than or equal to

Download: Click here to see the output of this program in your browser. Right-click and select Save Link as to download the file

In next JavaScript tutorial, we are going to learn if else statement in JavaScript. If you liked this article then share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. If you have any questions, feel free to ask in the comment section below. Have a nice day!