JavaScript Tutorial Archives - Page 4 of 5

JS: toUpperCase() method

The toUpperCase() method is member of class String. This function converts all the characters of a string into uppercase.

Here is an example program with output:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript:toUpperCase() method</title>
   <meta charset="utf-8">
</head>
<body>
<script>
   var myName = "Raju";

// convert to uppercase and display

   console.log(myName.toUpperCase());
//Output = RAJU
</script>
</body>
</html>

Output of the Above Program

RAJU

post

JavaScript Dynamic Table

JavaScript allows you to create tables in dynamic way by adding rows and cells using HTML 5 table API.

In this article, we will create two different table using table API and JavaScript.

dynamic table using rows
dynamic table using rows and cells.

HTML 5 Table

HTML 5 table store information in rows and columns. The table consists of rows, columns, and table data. You can also provide a title to the table. Here is the list of tags used to create table.

<table> – main table tag
<tr> – table row
<th> – table heading
<td> – table data
<legend> – a legend or title for table

Here is an example table.

<table>
   <tr>
      <th>fruit</th>
      <th>price</th>
      <th>in-stock</th>
   </tr>
   <tr>
      <td>Oranges</td>
      <td>Rs 200</td>
      <td>Yes</td>
   </tr>
 <tr>
      <td>Banana</td>
      <td>Rs 100</td>
      <td>No</td>
   </tr>
</table>

Visit codepen.io to see the output

See the Pen HTML 5 Table by Girish (@Girish2500) on CodePen.

Table Using Rows Only

In JavaScript, you can create table dynamically using rows only. To create a row for table, we will use insertRow() API.

HTML 5 Code

<table id="mytable">

</table>
<br/>
<button onclick="createRow()">Insert</button>

In the table above, we are not using any kind of rows or data. The table is an empty container and row and data will be dynamically generated.

JavaScript Code

function createRow(){
//access the table and store it in a variable
var table = document.querySelector("#mytable");
//create rows and store it in a variable
var row = table.insertRow();
//now need to give some data to the table
row.innerHTML = "<td>data1</td><td>data2</td><td>data3</td>";
}

Visit codepen to view the output.

See the Pen HTML5 Dynamic Table 1 by Girish (@Girish2500) on CodePen.

Table Using Rows and Cells

The method to create a dynamic table using rows and cells is the same. In this section, we will create the table will cells because we do not want to add HTML <td>.

<table id="myTable">
  <caption>Dynamic table row using Cells</caption>
  <tr><th scope="col">Name</th><th scope="col">Age</th></tr>
</table><br/>
<button onclick="insertrow()">Insert</button>
<button onclick="deleterow()">Delete</button>

JavaScript Code

function insertrow(){
  var table = document.querySelector('#myTable');
  var row = table.insertRow();
 
var cell1 = row.insertCell();
  cell1.innerHTML = "1";
   var cell2 = row.insertCell();
    cell2.innerHTML = "2";
}
  

function deleterow(){
  var table = document.querySelector("#myTable");
  table.deleteRow(1);
}

In the code above, we have created row and for each row we are adding two cell including dummy data.

Deleting a Row

It is also possible to delete the dynamic rows. The API that you use to delete row is deleteRow().

Visit codepen.io to see the result.

See the Pen HTML 5 Dynamic Table 2 by Girish (@Girish2500) on CodePen.

The deleteRow(1) API will take index value of the row that you want to delete. The very first row has index of 0.

post

JavaScript With HTML 5 Audio & Video

In this article, you will learn about the HTML 5 video and audio element. You will also learn how to control audio and video elements through JavaScript code.

You can add audio or video file in HTML 5 with special elements.

<audio>…</audio>
<video>…</video>

How to add video in HTML 5 document?

Use the following syntax:

  <video width="320" height="240" controls="controls">
       <source src="https://i.imgur.com/thdGMK3.mp4" type="video/mp4" />
       <source src="https://i.imgur.com/CcyBwFb.mp4" type="video/webm" />
       Your browser does not support the <video> element.
    </video>

View in Codepen

Codepen: https://codepen.io/Girish2500/pen/poxaQxp

Basic video embed

Some Rules for Audio & Video Element

Rule 1: add keyword “controls” this will enable the controls for your video
Rule 2: add multiple sources of video in different format.. the browser will select the suitable format to play the video.
Rule 3: make sure you define the type attribute with correct type of video.
Rule 4: define the width and height of the video.
Rule 5: all the above rules apply for audio also.
Rule 6: both video and audio are HTML DOM objects and have HTML 5 API, therefore, JavaScript can access them and manipulate them. You can also use CSS to style your audio or video player

Can You Embed YouTube Video?

You cannot embed a YouTube video in the video element, the special protection from YouTube prevent such actions. However, you may use iframe HTML element to embed YouTube videos.

<iframe width="560" height="315" 
src="https://youtu.be/cpvw_CRujg8"
frameborder="0" allowfullscreen></iframe>

What if the Browser do not understand the HTML audio
or video elements?

If the browser does not understand the audio or video tags. Create these elements in JavaScript only and set the different properties.

<script>
    let video = document.createElement(“video”);
    video.width=”400”;
    video.height=”500”;
    video.src =http://example.com/bunny.mp4;
    video.controls = true;
</script>

Audio and Video Player JavaScript API

The video and audio elements have methods, properties, and events so you can manipulate the HTML
elements using these DOM API.
In this section, we will write controls for our video.

HTML Code

<video id=”myVideo” width=”500” height=”500” >
    <source src=”bunny.mp4” type=”video/mp4”/>
    <source src=”bunny.ogg” type=”video/ogg”/>
</video>
<!—Now we will create 3 buttons for play, pause and rewind 
<button onclick=”playVideo()”>Play</button>
<button onclick=”pauseVideo()”>Pause</button>
<button onclick=”rewindVideo()”>Rewind</button>

JavaScript Code

let video = document.querySelector(“#myVideo”);
function playVideo(){
    video.play();
}
function pauseVideo(){
    video.pause();
}
function rewindVideo(){
    video.currentTime = 0;
}

See the Pen Custom Player With Stop Times by Girish (@Girish2500) on CodePen.

Another example: Play the next video automatically

In this example program, the video plays and then the JavaScript listener waits for an event called ‘ended’. This signal JavaScript code that the video has ended, and a function loads the next video source and plays it immediately.

HTML Code

<video id=”myVideo”>
<source src=”parrot.mp4” />
</video>

JavaScript Code

var video = document.getElementById(“myVideo”);
video.addEventListener(‘ended’,playNextVideo);
function playNextVideo(evt){
video.src = https://example.com/bunny.mp4;
video.play();
}

View in Codepen

See the Pen HTML 5 Video: Detect End of One Vid and Start Another by Girish (@Girish2500) on CodePen.

post

HTML 5 Semantic Elements and JavaScript Basics

There are two category of HTML 5 elements listed below.

Block level elements
Inline elements

Block elements such as<mark style="background-color:rgba(0, 0, 0, 0);color:#b61515" class="has-inline-color"> </mark><h1> and <p> tags take the entire width of the document.

Inline elements such as <b> and <em>,<i>,<img> element will take just enough space within a block
element.

Figure 1 – HTML 5 Block and Inline elements

HTML 5 Semantic Element

There is no concept of document design in HTML. There is not structural meaning to the HTML elements.
Hence, Introducing HTML 5 semantic web elements and here is the list.

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Each of these tags can define the content they hold.

JavaScript Data Types

JavaScript variables are container for values and can hold different types of data. Re-declaration is allowed, except in ECMAScript such as ES5, ES6 and so on. To declare a variable use following syntax:

var total = 234.80;

Now, we will check different types of variables.

//simple integer
var num = 34;
// floating point number
var secondNumber = 34.666;
//Strings
var name = " Peter Pan";
//You can use single quotes
var firstName = 'John';

When using a single quote or double quotes to enclose a string. Sometimes you need to use a single or double quote in the middle of the string. Use escape character (\”) or (\’).

var result = " You've Passed"; 
/*here not need to use escape character because double quote can enclose a single quote or single quote can enclose a double. Make sure inner quote is different from outer.*/
//Array
var arr = [34, 'tim', true, 33.77];

Array can contain different types of values. The array index starts with 0.

console.log(arr[0]);
//Will print the first element in the array.
//JavaScript Objects
//The JavaScript supports multiple type in the form of //key value pair.
//To declare a JavaScript object.
var car = {
     "Model No": "Hundai",
     "price": 2000,
};

To access an object property.

Use dot notation. Example: Console.log(car.Price);
Use bracket notation. Example: Console.log([‘Model No’]);

// store the property in a variable
 var res = "Model No";
 console.log(car[res]);

JavaScript Operators

Arithmetic Operators	Description
+	plus
–	minus
*	multiplication
/	division
%	modulo
++	increment
—	decrement

JavaScript Arithmetic Operators

Comparison Operators

Logical and Comparison Operators	Description
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
!=	not equal to
!==	strict not equal to
==	equal to
===	strict equal to
\|\|	logical or
&&	logical and
!	logical not

Logical operators

How to Check Data Type in JavaScript?

To check the data type of any data element, use the typeof keyword.

var roll = 4455;
console.log (typeof roll);
//returns number

What will happen if combine number and string type?

console.log ("Str" + 44) ;
// output Str44
console.log(44 + 20 + "STR");
//output 64STR

The //output 64STR because JavaScript thinks that it a number and adds two number and when string comes.
Everything is converted to string. JavaScript accept the latest type available.

post

JavaScript Introduction

JavaScript is a popular scripting language that control the behavior of the webpage using script.

Where to Place JavaScript Code?

You can place your JavaScript code in two places.

Inside the HTML document
Use an external file for JavaScript and link to HTML document.

JavaScript inside HTML page

When JavaScript is placed inside the HTML document, you must write your code between <script> …</script> tags.

Consider following example. The statement “hello world” is JavaScript code placed inside the <script>…</script> tags. The tags itself can be placed at three places in HTML document.

head
body
footer ( if exist)

<script>
   document.write("Hello world");
</script>

External JavaScript File

Sometime you want to keep HTML content, CSS style and JavaScript separate. You write all your JavaScript code in a separate file with an extension .js.

For external JavaScript file, you have to link it to HTML document.

Here is an example.

<script src="demo.js"></script>

Note that you don’t write your code between <script> tags, instead, you must use a source attribute (src) to refer to the external JavaScript file.

The JavaScript code when executed, will produce output or behavior change for HTML element. In the next section, you will know common JavaScript output methods.

Output Method in JavaScript

JavaScript programming output method in four different ways. They are listed below.

<mark style="background-color:rgba(0, 0, 0, 0);color:#bc1212" class="has-inline-color">document.getElementById(“demo”).innerHTML = ‘hello”;</mark>
<mark style="background-color:rgba(0, 0, 0, 0);color:#ba1010" class="has-inline-color">console.log(“Hello”);</mark>
<mark style="background-color:rgba(0, 0, 0, 0);color:#b61414" class="has-inline-color">alert(“hello”);</mark>
<mark style="background-color:rgba(0, 0, 0, 0);color:#b81414" class="has-inline-color">document.write(“Hello”);</mark>

The first method is using <mark style="background-color:rgba(0, 0, 0, 0);color:#b91515" class="has-inline-color">HTML DOM</mark> and <mark style="background-color:rgba(0, 0, 0, 0);color:#c70d0d" class="has-inline-color">selector API</mark> functions like <mark style="background-color:rgba(0, 0, 0, 0);color:#b01414" class="has-inline-color">getElementById</mark>, etc.

The second method prints the output to the browser console.

The third method usually used for creating error or warning for program that is displayed to users as a popup box.

The last method, is <mark style="background-color:rgba(0, 0, 0, 0);color:#bb1212" class="has-inline-color">document.write()</mark>, that simply write to the document body wiping everything out except the output.

JavaScript Functions

You have already seen the document.write() function.

A function is a block of code with its own name. JavaScript allows you to create functions like traditional programming languages – C, C++, Java, etc.

Functions are reusable and called when you want them to use.

For example,

function add(a, b){
return a + b;
}

// calling a function 

let c = add(10, 20);
console.log(c);

The add(a, b) function is declared using keyword – function. The braces shows that is a block of code separate from the rest of the program.

The function is called and assigned the returned value to variable c.

let c = add( 10, 20);

The input value to function is 10 and 20 and the returned value will be 30.

JavaScript Objects

The JavaScript also allows complex types such as objects. Each object represents some real world object with properties and methods.

For example,

const book = {title:"Harry Potter and the tablet of fire", Author:"J.K.Rowling", price:600};

We can call the individual properties of an object.

console.log(book.price); // this will print 600

JavaScript Arrays

JavaScript arrays are dynamic sequence of ordered values. The can be accessed via indices from 0 to length of the array.

For example,

const groceries = []; // empty array 

groceries = ["eggs", "milk", "sugar", "bread" , "fruits", "rice"];

// You can access any element using its index value 
let Item = groceries[0] ;
console.log(item); // print "eggs" because first index value is 0

JavaScript Arrays has many in-built functions.

push() – add element at the end of the array.
pop() – remove a last value in the array.
shift() – removes first element from the array
unshift() – add element from the beginning.
splice() – add/remove elements from any position.

JavaScript Strings

Strings in JavaScript store text information. You can find them between “double quotes” or ‘single quotes’. JavaScript strings are like arrays of characters. They too have built-in methods.

Here is a small list.

length property: Returns the length of the string.
includes(): Checks if a string contains a specified substring (case-sensitive) and returns a Boolean.
startsWith() / endsWith(): Checks if a string begins or ends with a specified sequence of characters.
indexOf() / lastIndexOf(): Returns the index of the first/last occurrence of a substring, or -1 if not found.
slice(): Extracts a section of a string and returns a new string.
replace() / replaceAll(): Replaces a specified value or pattern within a string.
toUpperCase() / toLowerCase(): Converts the entire string to uppercase or lowercase letters.
trim(): Removes whitespace from both ends of a string.
split(): Splits a string into an array of substrings based on a specified separator.

The are basic features of JavaScript language.

In coming posts, you will discover many more less common features of JavaScript language apart from when you learned here.

post

JavaScript : Truthy And Falsy

In JavaScript, we have two sets of values – truthy and falsy. The main difference between these two are:

Truthy – Always returns true when done a Boolean comparison.

Falsy – Always returns false when done a Boolean comparison.

What are Falsy values?

The following is list of falsy values:

undefined // variable is not having any values, returns false
null      // same as undefined- no values and returns false
NaN       // Not a number. NaN == NaN is incomparable.
0         //zero is falsy.
""        //empty string is falsy 
false     // false is a Boolean value that is by default false

Falsy and Truthy Concept

To understand the falsy and truthy concept consider the following example.

var A = "Mango";
if(A)              // is true 
{
   console.log(A); // therefore, print A
}

The if statement does not do any comparison, however, variable A consists of a value which is not falsy, therefore, returns true.

Example Program: Remove Falsy from an Array

In this example, we will receive an array with values that also contains falsy. We will write a function that will remove all the falsy and returns the short array.

<!DOCTYPE html>
<html>
<head>
   <title>JS: Check If A Value is Boolean</title>
   <meta charset="utf-8">
  <style>
  main{
     width:60%;
	 padding:2%;
	 margin:auto;
	 background:rgba(214,114,134,0.7);
	 text-align:center;
  }
  button{
  
  max-width: 100%;
  padding:1%;
  background:red;
  color:white;
  }
  #in{
  
  width: 30%;
  padding:1%;
  margin:10px;
  background:lightgrey;
  color:black;
  }
  </style>
</head>
<body>
<main>
<h3>Remove all falsy from Arr = [1, null, NaN, 2, undefined]</h3>
<h2 id="out">Output Here</h2><br/>
<button onclick="extractFalsy()"> Remove Falsy</button>
</main>
<script>

function extractFalsy() {
  // Don't show a false ID to this bouncer.
  var arr = [1, null, NaN, 2, undefined];
  var trueArr = [];
 for(let i = 0;i< arr.length;i++){
   if(arr[i])
   {
       trueArr.push(arr[i]);
   }
 }
 document.getElementById("out").innerHTML = trueArr;
}
</script>
</body>
</html>

Output To Browser

Output – Remove Falsy

post

JS: String.prototype.substring()

The JavaScript substring() function extract a part of a string. It is very useful in many string related programs.

The syntax for .substring() function is given below.

String.substring(startIndex[, endIndex]);

startIndex is number that represents the position of a character from where you want to begin extraction.

endIndex is the number that represents the position of the last character you want to extract. The position always starts at 0.

Note: that the endIndex is optional. If you do not specify endIndex, the substring() function will extract start from a position and extract rest of the string.

Example Program: Substring()

<!DOCTYPE html>
<html>
<head>
   <title>JS: substring() Function</title>
   <meta charset="utf-8">
  <style>
  main{
     width:60%;
	 padding:2%;
	 margin:auto;
	 background:rgba(234,44,144,0.4);
	 text-align:center;
  }
  </style>
</head>
<body>
<main>
<h1>Extract a Substring</h1>
<h2 id="out">Output Here</h2><br/>
<button onclick="extractString()">Extract</button>
</main>
<script>
function extractString() {

var Str = "Tiger is our national animal";

var output = Str.substring(1,10);

document.getElementById("out").innerHTML = output;
  
}
</script>
</body>
</html>

Output: Substring()

Output – Substring() function

post

JS: String.prototype.split()

The String.prototype.split() function divide the string into array of sub-strings. You can perform other array manipulation on the resultant string.

The syntax for split() function is given below.

String.split([separator, limit]);

Separator – it is a character that is used to separate the sub-strings. It is optional, however, a separator is required to divide the sub-strings.

Limit – it is the number of characters to be split. This is also optional.

Examples: split() function

Here are few examples of split function with and without separators.

var Str = "Hello World";
Str.split(''); 
// result in single character split 
//Output - "H","e","l","l","o", " ","W", "o", "r","l","d" 

Str.split(' '); 
//result in split between works rather than single characters
//Output - "Hello", "World"

Str.split();
//No arguments, the whole array is returned
//Output - Array["Hello World"]

Str.split('', 4);
//Limit set to 4, therefore, split only four letters 
//Output - "H","e","l","l"

Example Program: split() function

<!DOCTYPE html>
<html>
<head>
   <title>JS: split() Function</title>
   <style>
   main{
     width:60%;
	 padding:10%;
	 margin: auto;
	 text-align:center;
	 background:rgba(240,144,43,0.6);
    }
   
   </style>
</head>
<body>
<main>
<h1 id="out1"></h1>
<h1 id="out2"></h1>
<h1 id="out3"></h1>
<h1 id="out4"></h1>
</main>
<script>
var Str = "Fresh Start";
 
// result in single character split 
document.getElementById("out1").innerHTML = Str.split('');


//result in split between works rather than single characters
document.getElementById("out2").innerHTML = Str.split(' ');

//No arguments, the whole array is returned
document.getElementById("out3").innerHTML = Str.split();

Str.split('', 4);
//Limit set to 4, therefore, split only four letters  
document.getElementById("out4").innerHTML = Str.split('',4);

</script>
</body>
</html>

Output To Browser: split() function

Output – String Split() Function

post

JS: String.prototype.endsWith()

The JavaScript String.prototype.endsWith() function will receive a string as parameter and check if the given string ends with the parameter string. If it does end with parameter string, returns true otherwise, returns false.

The syntax to use endsWith() is given below.

String = "My Name is James Bond";
String.endsWith("ond");

The string “ond” is matched with “My name is James Bond” and if the string ends with “ond”, a boolean true is returned.

Usage

<!DOCTYPE html>
<html>
<head>
   <title>String.prototype.endsWith(endStr)</title>
   <meta charset="utf-8">
   <style>
   main{
   
   width:70%;
   margin: 10% auto;
   padding:4%;
   background:steelblue;
   text-align:center;
   }
   
   #in,#inTwo{
   
   padding:5px;
   margin:5px;
   
   }
   button{
     padding:10px;
	 
   }
   
   </style>
</head>
<body>
<main>
<p>Program to check a string using String.prototype.endsWith(endStr) javascript function.</p>
<h1 id="out">Output here</h1><br/>
<input type="text" id="in" value= "Enter a string"/><br/>
<input type="text" id="inTwo" value="Enter string ends with"><br/>
<button onclick="checkEnd()">Check String</button>

</main>
<script>
function checkEnd()
{
var str = document.getElementById("in").value;
var endStr = document.getElementById("inTwo").value;
document.getElementById("out").innerHTML = str.endsWith(endStr);
}

</script>

</body>
</html>

Output To Browser: endsWith() function

Output – JavaScript endsWith() function

post

JS: String.prototype.repeat() function

The String.prototype.repeat() function repeats a given string for a number of time. The count is given as parameter to the function.

The general syntax is given below.

string.repeat(count);

Usage

<!DOCTYPE html>
<html>
<head>
   <title>String.prototype.repeat()</title>
   <meta charset="utf-8">
</head>
<body>
<main>
<h1 id="out">Output here</h1>
<p>Program to repeat a string using String.prototype.repeat() JavaScript function.</p>
</main>
<script>
var str = "Elephant";

document.getElementById("out").innerHTML = str.repeat(3);

</script>

</body>
</html>

Output: repeat() function

Output – JavaScript repeat() function

post

JS: toUpperCase() method

JavaScript Dynamic Table

HTML 5 Table

Table Using Rows Only

HTML 5 Code

JavaScript Code

Table Using Rows and Cells

JavaScript Code

Deleting a Row

JavaScript With HTML 5 Audio & Video

How to add video in HTML 5 document?

Basic video embed

Some Rules for Audio & Video Element

Can You Embed YouTube Video?

What if the Browser do not understand the HTML audioor video elements?

Audio and Video Player JavaScript API

Another example: Play the next video automatically

HTML 5 Semantic Elements and JavaScript Basics

HTML 5 Semantic Element

JavaScript Data Types

JavaScript Operators

Comparison Operators

How to Check Data Type in JavaScript?

What will happen if combine number and string type?

JavaScript Introduction

Where to Place JavaScript Code?

JavaScript inside HTML page

External JavaScript File

Output Method in JavaScript

JavaScript Functions

JavaScript Objects

JavaScript Arrays

JavaScript Strings

JavaScript : Truthy And Falsy

What are Falsy values?

Falsy and Truthy Concept

Example Program: Remove Falsy from an Array

Output To Browser

JS: String.prototype.substring()

Example Program: Substring()

Output: Substring()

JS: String.prototype.split()

Examples: split() function

Example Program: split() function

Output To Browser: split() function

JS: String.prototype.endsWith()

Usage

Output To Browser: endsWith() function

JS: String.prototype.repeat() function

Usage

Output: repeat() function

What if the Browser do not understand the HTML audio
or video elements?