Forts are nothing but witness of Victory, Wars & Bloodsheds

Trip to Sinhgad

1 / 4

Raigad Top View

2 / 4

Beautiful Route

3 / 4

Raigad Greenery

4 / 4

Fog View

Reactive Form with validation

Write the following code under .html file

div class="container">
    <h2 style="color: crimson;">Product Registration</h2>
    <form [formGroup]="frmRegister">
        <legend>Basic Details</legend>
        <div class="form-group">
            <label for="">Product Name</label>
            <input type="text" formControlName="Name" class="form-control">
            <span class="alert alert-danger" *ngIf="Name.touched && Name.invalid">
                <div *ngIf="Name.errors.required">Name is Required</div>
                <div *ngIf="Name.errors.minlength">Name should be of {{Name.errors.minlength.requiredLength}} Characters</div>
            </span>
        </div>
        <div class="form-group">
            <label for="">Price</label>
           &#8377;<input type="text" formControlName="Price" class="form-control">
        </div>
        <div formGroupName="frmDetails">
            <legend>Stock Details</legend>
        <div class="form-group">
            <label for="city">Shipped To</label>
            <select name="City" id="city" formControlName="City" class="form-control">
                <option value="">Select City</option>
                <option >Pune</option>
                <option >Delhi</option>
                <option >Mumbai</option>
            </select>
        </div>
        <div class="form-group">
            <label for="IsInStock">IsInStock</label>&nbsp; &nbsp;
            <input type="checkbox" id="IsInStock" formControlName="IsInStock">Yes
        </div>
        <div class="form-group">
            <button [disabled]="!frmRegister.valid" class="btn btn-primary" type="submit" (click)="updateDetails()">Submit</button>
        </div>
        </div>
    </form>
    <br>
    Name: {{frmRegister.value.Name}}
    <br>
    Price: {{frmRegister.value.Price}}
    <br>
    City: {{frmRegister.value.frmDetails.City}}
    <br>
    IsInStock : {{frmRegister.value.frmDetails.IsInStock}}
</div>

Write the following code under .ts file

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-nestedform',
  templateUrl: './nestedform.component.html',
  styleUrls: ['./nestedform.component.css']
})
export class NestedformComponent  {

public frmRegister = new FormGroup({
Name: new FormControl('', [Validators.required, Validators.minLength(3)]),
Price: new FormControl('', Validators.required),
frmDetails: new FormGroup({
City : new FormControl(''),
IsInStock : new FormControl('')
}),
});

updateDetails() {
  console.log(this.frmRegister.value);
}

get Name(){
  return this.frmRegister.get('Name');
}

}

OutPut:

Posted By: pankaj_bhakre

Login Form using Template Driven Form with validation

write the following code in Formvalidation.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-formvalidation',

  templateUrl: './formvalidation.component.html',

  styleUrls: ['./formvalidation.component.css']

})

export class FormvalidationComponent {

  City = [

    {id: 1, name: 'Pune'},

    {id: 2, name: 'Mumbai'},

    {id: 3, name: 'Hyderabad'}

  ];

  onSubmit(form) {

    console.log(form.value);

  }

}

write the following code in Formvalidation.html

<div class="container">

    <h2 style="color: cadetblue;">Registration Form</h2>

    <form #form="ngForm" (ngSubmit)="onSubmit(form)" autocomplete="off">

        <div class="form-group">

            <label for="firstName">Name</label>

            <input required id="firstName" type="text" ngModel name="firstName" #firstName="ngModel"  placeholder="Name of Employee" class="form-control">

            <span class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">

                Name is required

            </span>

        </div>

        <div class="form-group">

            <label for="Password">Password</label>

            <input required minlength="3" maxlength="8" id="Password" type="password" ngModel name="Password" #Password="ngModel" placeholder="Enter Password" class="form-control"

            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{3,8}$">

            <span class="alert alert-danger" *ngIf="Password.touched && !Password.valid">

                <div *ngIf="Password.errors.required">Password is required</div>

                <div *ngIf="Password.errors.minlength">Minimum {{Password.errors.minlength.requiredLength}} characters are required</div>

                <div *ngIf="Password.errors.pattern">Pattern Not Matched</div>

            </span>

        </div>

        <div class="form-group">

            <label>gender</label>

            <br>

            <input type="radio" ngModel name="Gender" #Gender="ngModel" value="Male" >Male

            <input type="radio" ngModel name="Gender" #Gender="ngModel" value="Female">Female

        </div>

        <div class="form-group">

            <label><input type="checkbox" ngModel name="isSubscribed">Subscribe

            </label>

        </div>

        <div class="form-group">

            <label for="city">Choose City</label>

            <select name="" id="city" class="form-control" ngModel name="city">

                <option value="">Select City</option>

                <option *ngFor="let city of City" [value]="city.id">{{city.name}}</option>

            </select>

        </div>

        <div class="form-group">

            <button class="btn btn-primary" [disabled]="!form.valid">Submit</button>

        </div>

        <div>

            {{form.value | json}}

        </div>

    </form>

</div>

OutPut:

Posted By:  pankaj_bhakre

• SQL Theory

• SQL Query

• Introduction to SQL server

SQL Queries

1)Write a Query to display the employee details whose salary is equal to 10000
A: SELECT * FROM EMP WHERE SAL=10000

2)Write a query to change the deptno as „10‟whose employee id is 101
A: UPDATE EMP SET DEPTNO=10 WHERE EID=101

3)Write a query to delete a record whose employee id is 107
A: DELETE FROM EMP WHERE EID=107

4)  Nth Highest Salary

select * from Employee e1 where N-1 = (select count(distinct Salary) from Employee e2 where e2.Salary > e1.Salary )

Introduction To SQL Server

Definition: SQL Server is a collection of databases where database is a collection of various
 objects like Tables, Views, Procedures and Functions etc.

To work on SQL Server we use SQL Server Management Studio. It is a tool will provide Command
 Based Environment and GUI Based Environment to perform operations in SQL server.
If we connect to server it shows a window with ….
 Server Type
 Server Name
 Server Authentication
 Username & Password

Server Type: SQL server contains five types of servers those are
 Database Engine: The Database Engine is the core service for storing,processing, and securing
data (or) it is used to store, manage and to access the data from the database.

 Analysis Services (SSAS): It is used for data warehouse it will show the data in three dimensions
 (Rows, Columns and New dimension).

 Reporting Services (SSRS): It is a reporting tool used to generate reports in various formats
 such as creating interactive, tabular, graphical,multidimensional, or XML-based data sources.
 Reports can include rich data visualization, including charts, maps etc.

 Integration Services(SSIS): It is used to convert tables from relational database to another relational database for e.g. If we want to convert SQL Server tables to ORACLE tables
 or My SQL tables then will be used.

 SQL Server Compact Edition: It is used to develop mobile application or mobile software.


SQL Server Authentication:SQL Server have two types of authentications

Windows Authentication: Windows Authentication work on the user admin and when we
 work on window authentication there is no required user name and password because
 operating system will generate User Id and Password by default.

SQL Server Authentication: SQL Server will work on the current user and when we work on
 SQL Server authentication then user should enter User Id and Password (These User ID and Password will give at the time of SQL Server installation).

Object Explorer Window: This window contain Database, Security, Server Objects, Replication and
 Management options. SQL Server contains two types of databases these are

 System Database: The system database include the following four databases

 Master: It is used to manage system level information of SQL server.
 Model: It is used as a template for all new creating databases in SQL Server.

 Msdb: It is used to store the alerts and job information contains the SQL commands which
 are executed by user.

 Tempdb: When ever SQL server is started tempdb will be created in SQL server. It is used to
 store temporary tables once we restart the server the tempdb database is destroyed
.
 User Database: These databases are created and manage by the user for
storing their objects like tables, views, procedure etc.

Whenever we create a database on SQL Server, it will generate two
database files are

Primary Data file: It contain the start up information of the database and used
to store database objects like tables, views .This file will saved with an extension
.mdf(Master Data file).

Log File: This file contains transaction query information will saved with an
extension .Ldf (Log Data file).

Root Location for .mdf and .ldf files:
C:\Program Files\Microsoft SQL
Server\MSSQL10.MSSQLSERVER\MSSQL\DATA


Posted By: pankaj_bhakre

Use of onblur() event

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script>
            function Capital() {
              var x = document.getElementById("fname");
              x.value= x.value.toUpperCase();
            }
            function Small() {
              var x = document.getElementById("lname");
              x.value= x.value.toLowerCase();
            }
        </script>
    </head>
    <body>
       <div class="container">
           <div class="form-group">
               <label>First Name</label>
               <div>
                <input id="fname" type="text" placeholder="Enter Name in small letters" class="form-control" onblur="Capital()">
               </div>&nbsp; <br>
           </div>
           <div class="form-group">
            <label>Last Name</label>
            <div>
                <input id="lname" type="text" placeholder="Enter name in Capital letters" class="form-control" onblur="Small()">
            </div>
        </div>
         
       </div>
    </body>
</html>

Use of onmouseover() & onmouseout() events

<!DOCTYPE html>
<html>
    <head>
<script>
    function BigImage(x) {
x.style.width="300px";
x.style.height="300px";
    }
    function SmallImage(x) {
x.style.width="100px";
x.style.height="100px";
    }
</script>
    </head>
    <body>
        <img src="Images/flag.gif" width="100" height="100" onmouseover="BigImage(this)" onmouseout="SmallImage(this)">
    </body>
</html>

CSS 2D Transforms

- It allows the elements to be transformed in 2 Dimensional space.
- Transform along X and Y axis.
- Basic transform includes the actions like move, rotate, scale and skew the elements in 2D space.
- Transform uses a set of transform function to manipulate the co-ordignates [x, y].

Note: CSS 2D and 3D Transforms are not supported on every browser. Hence we have to use plugin's for various browsers.

  Plugin Name Browser
  --------------------------------------------------
   -webkit chrome, safari
   -moz Firefox
   -ms IE [Internet Explorer]
   -o Opera

Syntax:
transform: someMethod();
-webkit-transform:method();
-moz-transform:method();
-o-transform:method();
-ms-transform:method();

CSS Transform Functions:
1. translate() : It is used to move an element from its current position to a new position along x and y axis.

 Syntax:
            transform:translate(x, y);

 Note: To define delay time you can use "transition"
transition : timeInterval;


Ex:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
                width: 200px;
                height: 100px;
                border:2px solid darkcyan;
                background-color: yellow;
                transition: 2s;
            }
            .box:hover {
                transform: translate(300px,300px);
                -webkit-transform: translate(300px, 300px);
                -moz-transform: translate(200px, 100px );
                -ms-transform: translate(100px, 100px);
                transition: 2s;
            }
        </style>
    </head>
    <body>
        <div class="box">
         
        </div>
     
    </body>
</html>

2. rotate(): It rotates an element around its origin by specified angle. It rotates the elements clockwise direction from its actual origin by an defined angle.
You can define a negative value for degree in order transform counter-clockwise.

Syntax: transform:rotate(deg);
              transform:rotate(-deg);

Ex:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
                width: 200px;
                height: 100px;
                border:2px solid darkcyan;
                background-color: yellow;
                transition: 2s;
            }
            .box:hover {
                transform: rotate(360deg);
                transition: 2s;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../Images/earpods.jpg" width="100%" height="100%">
        </div>
     
    </body>
</html>

3.scale() : It increases or decreases the size of an element by specified units. It uses x-for width , y- for height.

Syntax:
transform:scale(xUnits, yUnits);

Note: scale() uses the units which are relative to existing size.
      transform:scale(2, 2);
      200% of existing or 2 times size the existing.

scale(2)     → both x and y
scale(1,2)  → only y [1 is standard 100%] - height
scale(2,1)   → only x -width

Ex:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
                width: 200px;
                height: 100px;
                border:2px solid darkcyan;
                background-color: yellow;
                transition: 2s;
                margin-left: 200px;
                margin-top: 100px;
            }
            .box:hover {
                transform: scale(2,1);
                transition: 2s;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../Images/earpods.jpg" width="100%" height="100%">
        </div>
     
    </body>
</html>


4. skew() : It is used to tilt any element by specified angle along x and y axis.

Syntax:
transform:skew(xDeg, yDeg)

Ex:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
                width: 200px;
                height: 100px;
                border:2px solid darkcyan;
                background-color: yellow;
                transition: 2s;
                margin-left: 200px;
                margin-top: 100px;
            }
            .box:hover {
                transform: skew(-30deg, -30deg);
                transition: 2s;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../Images/earpods.jpg" width="100%" height="100%">
        </div>
     
    </body>
</html>


5. matrix():  It is used to perform all of the 2D transformations, which include translate, rotate, scale and skew.
  It uses 6 parameters written as a matrix value.

Syntax:
matrix(a,b,c,d,e,f);

 Translate Matrix:      matrix(1,0,0,1, tx, ty);
  Scale Matrix :          matrix(sx, 0, 0, sy, 0, 0);
  Skew Matrix: matrix(0, skx, sky, 0, 0, 0);

  last 2 : Translate [move]
  1st & 4th : Scale [size]
  2nd & 3rd: Skew [ tilt]


Syntax: Without Matrix

 transform: translate(200px, 100px) rotate(180deg) scale(1.5) skew(0, 30deg);

Posted By: pankaj_bhakre

CSS Backgrounds

- CSS provides several properties for control the background of any element.
- You can set a color, image and change their size, position etc..
- The background properties are

1. Background-Color
2. Background-Image
3. Background-Repeat
4. Background-Position
5. Background-Attachement
6. Backgroud-size
7. background-clip
8. background

background-color: It sets a background color for any element.

Syntax:
  div {
            background-color: yellow;
        }

background-image: It uses a background image for any element.

   div {
         background-image:url("path");
      }

background-size: It is used to change the size of background image.

div {
            background-image: url("../Images/logo1.png");
            background-size: 100px;
        }

background-repeat: It controls the repeat style of background image.
-repeat
-no-repeat
-repeat-x
-repeat-y
Syntax:
div {
            background-image: url("../Images/logo1.png");
            background-size: 100px;
            background-repeat: no-repeat;
        }

background-position: It specifies where to display the background image.
position-x : left, center, right
position-y : top, center, bottom
position    : leftPixels, topPixels

Syntax:
div {
            background-image: url("../Images/logo1.png");
            background-size: 100px;
            background-repeat: no-repeat;
            background-position: center center;
        }

background-clip: It specifies the span of Image in the background, which can be set to
  a) content-box
  b) border-box
  c) padding-box
Syntax:
div {
            background-image: url("../Images/logo1.png");
            background-size: 100px;
            background-repeat: repeat;
            background-clip: content-box;
            border:12px double red;
            padding:20px;
        }

background-attchement: It specifies how background sholud behave with regard to the scrolling of content - fixed
- scroll
Ex:
 body {
            background-image: url("../Images/shoe.jpg");
            background-size: 200px;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
        }

background: It is a short hand method of applying backgroun effects like url, repeat, position, attachment, color.

Syntax:
 body {
            background: url("../Images/shoe.jpg") no-repeat center center fixed;
            background-size: 200px;
         
        }

Background Gradients:
A gradient is a combination of colors with different orientations in the background or border for any elements.

Types of Gradients:
1. Linear Gradient
2. Radial Gradient
3. Repeating Linear Gradient
4. Repeating Radial Gradient
5. Multiple Gradients

Linear Gradient : Two or more color in linear direction.
- top to bottom
- left to right
- top left corner to bottom right corner
- It can in degrees.

Ex:
 div {
          background: linear-gradient(green,yellow)
        }

Ex:
div {
          background: linear-gradient(60deg, green 10%,red 60%)
        }

radial-gradient: It applies multiple colors with circular or elliptical orbits.

Syntax:
 div {
          background: radial-gradient(green 20%, yellow)
        }

Note: Gradients are not supported on every browser  hence you have use pluigns
-moz
-o
-webkit

Ex:
 div {
          background: -moz-radial-gradient(green 20%, yellow)
        }


Posted By: pankaj_bhakre

Important Concept of CSS

 
             

• CSS Colors                       
• CSS Backgrounds
• CSS-2D-transforms

HTML & CSS

 Documentation and Practical Examples are listed below

• CSS Theory                  

• HTML Theory
  

CSS Colors

- Colors are used for backgrounds, borders and text.
- CSS supports RGB Colors and HSL Color. These are usually screen colors.
- Printing colors use "CMYK", which is not available in CSS.
- So CSS colors are screen colors.
- The colors in CSS can be defines in 3 ways
a) Color Name
b) RGB Color
c) Hexadecimal Color Code

1. CSS Color Names:
    -CSS supports 16 million colors
    -17 colors know by name.
    -Other colors are defined with Hexacode and RGB

Ex:
<head>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color: red;
      }
  </style>
</head>
<body>
    <div>

    </div>
</body>

2. RGB Color
- Red Green and Blue are screen colors
- Colors value range from 0 to 255.
- It can also be defiend from 0% to 100%.
- 0 can be defined as 0%
- 255  can be defined as 100%
- 255 allows 16 million color
- 100% allows only 1 million color.
- the method "rgb()" is used to apply color
- It is a set of red, green and blue values in left to right order.
  Syntax:
rgb(redValue, greenValue, blueValue)
rgb(0,0,0)   black
rgb(255,255,255) white
rgb(255,0,0)  red
rgb(0,255,0)  green
rgb(0,0,255)  blue

Ex:
<head>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color:rgb(231,112,237);
          border:2px solid black;
      }
  </style>
</head>
<body>
    <div>

    </div>
</body>

Hexadecimal Color Code:
- Hexadecimal color are rgb color but written in short form.
- RGB colors use upto 16 chars for defining color.
- Hexadecimal can apply color with just 3 to 6 chars followed by "#".
- Hexadecimal is a number system is 16 base number system, we use 16 different values.
- The range of color value in Hexadecimal
    0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
-  0 is minimum value and f is maximum value.
- The color code in hexadecimal contains a pair of
#RRGGBB;   or   #RGB;
Syntax
#FF0000;     - Red
#f00;

#00FF00;    - Green
#0F0;

#0000FF;     - Blue
#00F;

#FFFFFF     - White
#fff

#000000     - Black
#000

Ex:
<head>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color:#FF00FF;
          border:2px solid black;
      }
  </style>
</head>
<body>
    <div>

    </div>
</body>

HSL Colors or HSLA Color
- Hue, Saturation, Lightness
- Hue, Saturation, Lightness, Alpha [Opacity]
- You change the opacity of color, Increase or decrease the brightness by using HSL
- HSL values will be from 0 to 359 deg.
- 0 and 360 both are same.
- 0 - Red
- 60- Yellow
- 120 - Green
- 180 - Cyan
- 240 - Blue
- 300 - Magenta
- 360 - Red

You can apply HSLA by using the function "hsla()"

Syntax:
  hsla(hue, saturation, lightness, alpha);
  hue   - in deg 0 to 359
  sat    - in %  0 to 100%
  lightness - in % 0 to 100%
  alpha - in fractions 0 and 1 [0.2, 0.5, 0.9,]
               [0 is transparent]

Ex:
<head>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color:hsla(168,36%,36%,0.22);
          border:2px solid black;
      }
  </style>
</head>
<body>
    <div>

    </div>
</body>

Gradient Color:
- A gradient is a combination of various color with different patterns defined witin an area.
- There are so many types of gradients
1. Linear Gradient
2. Radial Gradient
3. Repeating Gradient
4. Repeating Linear Gradient
5. Repeating Radial Gradient
6. Multiple Gradients



Posted By: pankaj_bhakre

Use of sort() & reverse() Function

<script type="text/javascript">
function f1() {
    var Products = ['A','C','D','B'];
    Products.sort();
    Products.reverse();
    document.write(`${Products.toString()}`);
}
f1();
</script>

Using 'sort()'                    output:- A B C D
Using both 'sort()' & 'reverse()' output:- D C B A



Posted By: pankaj_bhakre

Given Statement: wElComE tO tyPeScrIpT
Required Output: Welcome to typescript


Program:
let msg: string = 'wElComE tO tyPeScrIpT';
let firstchar: string =msg.charAt(0);
let restchar: string = msg.substring(1);
let newmsg: string = firstchar.toUppercase() + restchar.toLowercase();

console.log(msg);

console.log(newmsg);



Posted By: pankaj_bhakre

• Angular Tutorials & Examples

• Angular Architecture

• template driven form with Validations

• Reactive form with validation

• CRUD operation on static data
  

• Budget Application In Angular

• @ViewChild New Syntax

• Allow only Two decimal places Directive

• Common Validator
  

• Date Validation for span of one year
  

Angular Architecture

1) Modules: It is collection of functions defined as factory.It resemble the single call mechanism

2)Service : It is predefined business logic with a set of factories. It uses singleton mechanism

3)Components: It comprises of UI ,styles & logic that can handle specific functionality in user interface

4) Directive:  It makes HTML more declarative. It converts static DOM into dynamic

5) Pipes: It is predefined function used to filter, sort, format the data.Angular aalows to create custom pipes

6)Selectors: It is responsible for handling component in the UI which includes injecting component & redirection etc

7)Templates: It is predefined component or custom component that can be rolled out  across various page

8)Materials:  It provides predefined component plugins which we can use in our angular application

9)Animations: It provides library to handle 2D & 3D animations of CSS in angular applications

10)Routing: It is technique used to configure user & SEO friendly navigation in application

11)DI (Dependancy Injection): It is software design pattern for handling Re-usability, Maintainability & Testability in application 

Posted By: pankaj_bhakre

• TypeScript Details

• Angular Details

• Typescript Architecture

• String manipulation with given condition

TypeScript Architecture

1) Typescript core compiler: It is responsible for compiling the typescript program & identify the compile time error related to syntax, datatype & conversion etc

2) Standalone Typescript  compiler: It is responsible for trans-compiling  typescript program into JavaScript program
    program.ts ===>trans-compile===> program.js

3)Language Service: It comprises of library of functions & keywords that are supported by typescript language

4)TS  Server: It will provide an enviornment to host , compile & deploy the typescript program

5)VS Shim: It provides the set of functions that are responsible for making typescript program to run cross platform

6)VS Managed Service: It provides different coding standards (rules) which is followed by typescript language

7)Editors: It resembles the configuration of typescript across various editors like webstrom, sublime VS code etc


Posted By: pankaj_bhakre 

Image slider using JavaScript function

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <script>
            var products = ["../Images/TV.jpg", "../Images/Lee.jpg","../Images/Ball.jpg","../Images/Tshirt.jpg","../Images/Reebok.jpg"];
            function changeImage(){
                var slidervalue = document.getElementById("slider").value;
                document.getElementById("pic").src=products[slidervalue];
            }
            function bodyLoad(){
                document.getElementById("pic").src= products[0];
            }
            var count = 0;
            function Prev(){
                count--;
                document.getElementById("pic").src= products[count];
               
            }
            function Next(){
                count++;
                document.getElementById("pic").src= products[count];
            }
        </script>
    </head>
    <body onload="bodyLoad()">
        <div class="container-fluid" >
            <div class="card">
                <div class="card-header text-center">
                    <h2 style="color: blueviolet;">Products Slider</h2>
                </div>
                <div style="text-align: center;" class="card-body">
                    <button onclick="Prev()" class="btn btn-outline-primary">
                    <span class="fa fa-chevron-circle-left"></span>
                   </button>
                    <img id="pic" width="300" height="200">
                    <button onclick="Next()" class="btn btn-outline-primary">
                        <span class="fa fa-chevron-circle-right"></span>
                    </button>
                </div>
                <br>
                <div style="text-align: center;" class="card-footer">
                    <input type="range" min="0" max="4" value="0" onchange="changeImage()" id="slider">
                </div>

            </div>
        </div>
    </body>
</html>

Output:

Posted By: pankaj_bhakre

Create html page & Write javascript function to display the textbox data.

<!DOCTYPE html>
<html>
<head >
    <title></title>
    <script>
        function f1(){
            show.innerHTML = "Name:" + form1.text.value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <p >Enter Name</p>
       <input id="text" type="text" >
       <input type="button" id="submit" value="Submit" onclick="f1()">

       <p id="show"></p>
     </form>
</body>
</html>

Output:

Posted By: pankaj_bhakre

Create html page and display the even numbers between 0 to 10 using for loop in javascript function.

<!DOCTYPE html>
<html>
<head >
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        <script type="text/javascript">
            var i = 2;
            for(i=2;i<=10;i++)
                 {
                     if(i%2==0)
                document.write("The number is: " + "<b>" +i + "</b>");
                document.write("<br/>");
            }
        </script>
        </div>
        </form>
</body>
</html>


Output:

Posted By: pankaj_bhakre

Display date & time using javascript function

<!DOCTYPE html>
<html>
<head >
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Display Date and Time</h1>
        <script type="text/javascript">
            document.write("<p>" + Date() + "</p>");
        </script>
    </div>
    </form>
</body>
</html>


Output:

Posted By: pankaj_bhakre

Create HTML page & display message using JavaScript Function

<!DOCTYPE html>
<html>
    <head>
        <script>
            function f1(txt){
           document.write(`Hello ! ${txt} Pankaj`);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="button" value="In Morning" onclick="f1('Good Morning')" >
            <input type="button" value="In Afternoon" onclick="f1('Good Afternoon')" >
            <input type="button" value="In Evening" onclick="f1('Good Evening')" >
        </form>

    </body>
</html>

Posted By: pankaj_bhakre

JavaScript Concepts & Examples

Offcial Website : JavaScript

Java-script is the only Programming language which can used as client side with react js or 

Angular , as server side with Node js & Express js ,and  as database side with MongoDb

• Difference between undefined & null

• Create HTML page & display message using JavaScript Function

• Display date & time using Javascript function

• Display even numbers using javascript function

• Create html page & Write javascript function to display the textbox data.

• Image slider using Javascript function

• Use of sort() $ reverse() function in Javascript

• Use of onmouseover & onmouseout events

• Use of onblur event

• Product register with dialog box

Difference Between undefined & null

undefined

• It is type defined for variables where value is not  defined during compile time
• Compiler uses 'undefined' as type for variables that are not defined with value
• "undefined" keyword is used to check whether value is defined or not 

Practical Approach:

In above code value of price is not supplied during compile time so price will be undefined..see output

If we use 'undefined' keyword in 'if statement' then output will be according to condition 

null

• Null is type defined for variable when value is not defined during runtime
• Variable is not supplied with value during runtime and you are trying to use variable then it returns null
• null is exception type used to tell that there is no value
• we can verify the null type by using the keyword "null" 

Practical Approach:

In above code if value of name is not supplied during runtime then output will be  like below

If we use 'null' keyword in if else statement then output will be according to condition

Posted By: pankaj_bhakre