Tag Archives: JavaScript tutorial for beginners

JavaScript Add String Newline Character


JavaScript Add String Newline Character : Sometimes we need to add the newline character using JavaScript. It is very easy to add newline character using JavaScript.Here in this tutorial we are going to explain how you can add the newline charcter using JavaScript. You can use our online editor to try and edit the code online.


JavaScript Add String Newline Character Example

You add break line in JavaScript as below –

JavaScript Add String Newline Character Example:

 





Print Array Using Break Line
Output = 

Try it »

br tag is used to add the break line between the array elements. The above function will add breakline in after each element of array. It adds the br tag after the array element & appends it to the paragraph with id “output”. It will print array elements line wise. On the same way you can add the break line anywhere you need.

If you run the above example it will produce the output something like this –

JavaScript Add String Newline Character

Capitalize first letter of string in JavaScript


Capitalize first letter of string in JavaScript – It is quite easy and simple to capitalize the first letter of string in Javascript. You can use toUpperCase() function to capitalize the first letter of the string. Here in this tutorial we are going to explain how to capitalize the first letter of the given string using the predefined toUpperCase() function. You can use our online editor to try & edit the example code & see output.


How to Capitalize first letter of string in JavaScript?

Capitalize first letter of string in JavaScript Example:


Try it »

The above function will accept the string and will format it into capitalize form. You can use this function anywhere to capitalize the string. Just pass the string it will return the capitalized string. If you run the above example it will produce the output something like this –

Capitalize first letter of string in JavaScript

Change Element class Using JavaScript


Change Element class Using JavaScript : You can use JavaScript to change the element’s class simply using the className attribute. You can also use this to add multiple classes to the element. Here in this tutorial we are going to explain how to change the element’s class using JavaScript. You can use our online editor to run the demo.


How to Change Element class Using JavaScript ?

JavaScript Replace(Change) All Classes By One(Single) Class

You can use className attribute to replace all classes by one class as below –

JavaScript className : Syntax

Syntax to change the className using the pure JavaScrpt is as Below –

JavaScript className Syntax:

document.getElementById("ElementId").className = "NewClass";

Where ElementId is id selector of the element. NewClass is class name you want to add.

JavaScript className : Example

JavaScript className Syntax:


Try it »

The above example changes the class of element which have id “myId”. It will add the new class YellowBg to the element. If you run the above example it will produce the output something like this –

Change Element class Using JavaScript

Note : The above method will change all classes and add only the provided class ie. YelllowBg. All Classes will be replaced by the new class YellowBg

More Examples

Let’s have look over more example and demo here.


JavaScript Add Additional Class

If you want to add additional class in the existing element without removing/affecting the existing classes, use the className method as in below example –

JavaScript Append className : Example


Try it »

Note : Add a blank space before the class name eg – +” borderBlack”.

The above example will append the given class “borderBlack” to the element. Make sure you add a blank space before the class name so that it is not collapsed with other existing class name.

Remove particular element from JavaScript Array


Remove particular element from JavaScript Array : Sometimes we need to remove particular element from the JavaScript Array. There are many methods to remove the selected element from the JavaScript array.
Here in this tutorial we are going to follow the simplest common used method. We will explain how to remove selected element from JavaScript array with example and online demo.


How to Remove particular element from JavaScript Array?

You can remove the particular element from the JavaScript array simply following the two steps as below –

Step 1

First find the index of the element you want to remove from array.

Remove particular element from JavaScript Array Example :

var array = [1, 7, 10, 11];
var index = array.indexOf(10);

Suppose you want to remove 10 then you can get the index of 10 as above.

Step 2

Now use splice method to remove the element by the index as below-

Remove particular element from JavaScript Array Example :

if (index > -1) {
    array.splice(index, 1);
}

The above exammple first checks that the element exists in array or not. Index is -1 if element is found in array. array.splice(index, 1) will remove one element from the given index.

Complete Example

Remove particular element from JavaScript Array By Index:


Try it »

The above exammple will remove the element 10 from the given array. If you run the above example it will produce output something like this –

Remove particular element from JavaScript Array

Enter key press event in JavaScript


Enter key press event in JavaScript : Sometimes we need to trigger some action based upon the key events such as key pess, key down etc and some specific case like trigger action on enter press. For this type of events we use key code to identify the key press, using key code you can perform the action as per your requirement. Here in this tutorial we are going to explain how you can bind some event action when enter button is pressed. You can also use the try it functionality to see the working demo.


Enter key press event in JavaScript

The key code for enter button is 13. You can use this to detect the enter button click. Here is example which shows alert when the enter button is clicked.

Enter key press event in JavaScript Example:






Press Enter Button in text box



Try it »

In the above example we have created a function which is called on keypress event. As soon as the enter key is pressed in the text box the function will be called and e.keyCode will give the 13 which will generate a alert as above.

Enter Key Press Event : Output Of Example

if you run the above example it will produce output something like this-

Enter key press event in JavaScript

JavaScript Check if Variable is Object


JavaScript Check if Variable is Object – While dealing with the object types variable we need sometimes to check that the variable is object so that we can avoid any other type of variables. You can use typeof method to check the variable type object. Here in this tutorial we are going to explain how you can check the object type variables in JavaScript. You use try it functionality to check the functionality online.


JavaScript Check if Variable is Object Example

You can use typeof() (variable instanceof Object) method to check the variable type whether it is object or not.

Using typeof()

Using typeof() method you can check variable if it is object as below –

JavaScript Check if Variable is Object:





myCar = {type:"Hundai", model:"1000", color:"white"};

Check Object-

Try it »

Using instanceof Object

Using instanceof Object method you can check variable if it is object as below –

JavaScript Check if Variable is Object:





myCar = {type:"Hundai", model:"1000", color:"white"};

Check Object-

Try it »

Remove empty null undefined values from JavaScript Array


Remove empty null undefined values from JavaScript Array : There are many ways to remove the null values from the javascript arrays. Sometimes null/empty or undefined values are inserted in the array which are useless. So we need to remove the null, undefined values from array so that it remain good without garbage values. Here in this tutorial we are going to explain how you can remove these values from the javascript. You can try this with our online editor.


Remove empty null undefined values from JavaScript Array Example

JavaScript filter method to remove the null values from the array. If you want to remove all null values such as –

  • null
  • undefined
  • 0
  • ” “

You can use the filter method as below –

Remove empty null undefined values from JavaScript Array Example:





array = ["Tutorialsplane",null, "0", "1", undefined, "9", "", "03"]; 
Clean Array-
Result array =

Try it »

If you run the above example it will produce the output something like this –

Remove empty null undefined values from JavaScript Array Example

Merge two Arrays In JavaScript


Merge two Arrays In JavaScript – There are many ways to merge two arrays in JavaScript. You can use built-in method to merge the two arrays in JavaScript. Here in this tutorial we are going to explain how to use the concat method to merge the two arrays in JavaScript. You can try the example with our online editor.


How to Merge two Arrays In JavaScript

You can use array.concat to merge two arrays in JavaScript. Here is an example of merging two arrays in javaScript.

Merge two Arrays In JavaScript Example:


Try it »

If you run the above example it will give you minimum value from array.

JavaScript Array Get Maximum Value-

You can use the following function to get the maximum value from the javascript array as below –

Find Array Min and Max value in JavaScript Example : Max Value


Try it »

If you run the above example it will give you the maximum value from the array.

You can use the above function frequently anywhere in javascript. This is the one of the optimal way to find the minimum and maximum value from an array in javascript.