Tuesday, December 25, 2018

java script


Java script

Java script is the world's most popular programming language. It is the language for HTML and the web, for servers,PCs ,laptops, smart phones and more. 


Java script is a scripting language

➣A scripting language is a light weight programming language.
➢Javascript is a programming code that can be inserted into HTML pages.
➢Javascript inserted into HTML webpages, can be executes by all modern web browsers.
➢Javascript is easy to learn.

Javascript Variables

As with algebra, Javascript variables can be used to hold values (x=5) or expressions (z=x+y). Variables can have short names like x or y or more descriptive names (age, sum, total, volume)
➢Variable name must begin with a letter.
➢Variable names can be also begin with $ (but we donot use it)
➢Variable names are case sensitive( y and Y are different variables)
For example: var x=5; var y=6; var z=x+y;

Javascript function

➤It is a block of code designed to perform a particular task.
➤This function is executed when "something" calls it.
 Ex: 
<!DOCTYPE html>
<html>
<body>
<p id="function"></p>

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}
document.getElementById("function").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

  •                        The output is 12

Javascript objects

➤It have name and its properties like type,model... like that.
      Syntex:
      objectName.propertyName

<!DOCTYPE html>
<html>
<body>

<p id="object"></p>

<script>

var person = {firstName:"Araphi", lastName:"Jegan", age:21, eyeColor:"blue"};

document.getElementById("object").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>
                       ➤The output is Araphi is 21 years old.

Javascript array 

➤ JavaScript arrays are used to store multiple values in a single variable.
 Syntax:
var array_name = [item1, item2, ...];  

<!DOCTYPE html>
<html>
<body>

<p id="array"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("array").innerHTML = cars;
</script>

</body>
</html>
                     ➤The output is Saab,Volvo,BMW

➢The main difference between array and object is: In aray we store mant values related to the same; but in objects we store the values with different properties.
Javascript switch➤ switch statement is used to perform different actions based on different conditions like as loops.
Syntex:
switch(expression) {
  case x:
    // code block    break;
  case y:
    // code block    break;
  default:
    // code block
}  

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
                       ➤The output is Looking forward to the Weekend

Here,The value  is compared with the values of each case then,If there is a match, the related block of code is executed.

Javascript for loop 

Syntax:for (statement 1; statement 2; statement 3) {
  // code block to be executed
} 
 <!DOCTYPE html>
<html>
<body>

<p id="loop"></p>

<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("loop").innerHTML = text;
</script>

</body>
</html>

                  ➤ The output is BMW Volvo Saab Ford Fiat Audi



Javascript While loop

Syntax: 

do {
  // code block to be executed}
while (condition);

<!DOCTYPE html>
<html>
<body>

<p id="while"></p>

<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
  text += cars[i] ;
  i++;
}
document.getElementById("while").innerHTML = text;
</script>

</body>
</html>

                 ➤The output is BMW Volvo Saab Ford

Javascript break

➤The break statement breaks the loop and continues executing the code after the loop 

<!DOCTYPE html>
<html>
<body>
<p id="break"></p>

<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}
document.getElementById("break").innerHTML = text;
</script>

</body>
</html>

            ➤The output will be  :
                                           The number is 0
                                           The number is 1
                                           The number is 2

 

Javascript math 

➤Math.round: It round the decimal to near value

<!DOCTYPE html>
<html>
<body>

<p id="math"></p>

<script>
document.getElementById("math").innerHTML = Math.round(4.4);
</script>

</body>
</html>

                        ➤The output will be 4.

➤Math.sqrt: It find the number of given squareroot

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.sqrt(64);
</script>

</body>
</html>
                        ➤ The output will be 8

➤Math.min: It find the minimum number in the given task

<!DOCTYPE html>
<html>
<body>
<p id="min"></p>

<script>
document.getElementById("min").innerHTML =
Math.min(0, 150, 30, 20, -8, -200);
</script>

</body>
</html>

at No comments:

Wednesday, December 12, 2018

Bootstrap

Bootstrap

➢Bootstrap is a free front-end frame work.
➢It is free and it is an open sourse.
➢It includes HTML and CSS based design.
➢It only concern with  front-end frame work only.
➢It help to develop website more faster and easier.
➢It offers a lot of helper classes that make development of a responsive website easy and fast.

at No comments:

Sunday, December 2, 2018


Cascading Style Sheet





CSS

It is a computer language which describe the style of html.It describe how html elements work in web page.CSS stands for Cascading Style Sheets.To style an HTML element, you can add the style attribute directly to the opening tag.CSS can change the look of HTML elements.CSS can select HTML elements by tag,class or ID. Multiple CSS classes can be applied to one HTML elements. Classes can be reusable, while IDs can be only be used once.IDs are more specific than classes, and classes are specified with a space. Syntax


  Inside the sector's body, we types color: blue; 
  This line is reffered to as a CSS declaration. 
  CSS declaration consist of a property and a value.

In the above example, the property is color and the value is blue. The property and value are separated by a colon (:), A semicolon (;) always used at the end of a declaration.
  

  • Three ways to insert CSS

      1.Inline style.
      2.Internal style sheet.
      3.external style sheet.

Internal style sheet

An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page

Inline style

An inline style may be used to apply a unique style for a single element.To use inline styles, add the style attribute to the relevant element.The style attribute can contain any CSS property.

External style sheet

It used by connecting external CSS files.

1.CSS colors

➢Background colors:
<!DOCTYPE html>
<html>

 <body><h1 style="background-color:Tomato;">Tomato</h1>
</body>

 </html>

 ➢Font colors
 <!DOCTYPE html>
<html>
<body>

 <h3 style="color:Tomato;">Hello World</h3>

 <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

 </body>
</html> 

  1. Border color:

<!DOCTYPE html>
<html>
<body>

 <h1 style="border: 2px solid Tomato;">CSS border</h1>

 <h1 style="border: 2px dotted DodgerBlue;">CSS border</h1>

 </body>
</html>

 ➢Color Values:
         ⟹rgb, rgba, hsl, hsla

 02)Background
 ➢Backgroun color:
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightpink;
}
</style>
</head>
<body>

 <h1>Flowers</h1>

 <p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>

 </body>
</html>

 ➢Background image
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/alstroemeria-1520220681.jpg?crop=1xw:1xh;center,top&resize=480:*");
    background-repeat: no-repeat;
    background-position: center top;
    margin-right: 200px;
}
</style>
</head>
<body>

 <h1>flowers</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>

03)CSS border
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

 ➢If the border-style property has four values:

    border-style: dotted solid double dashed;
        top border is dotted
        right border is solid
        bottom border is double
        left border is dashed

➢If the border-style property has three values:

    border-style: dotted solid double;
        top border is dotted
        right and left borders are solid
        bottom border is double

➢If the border-style property has two values:

    border-style: dotted solid;
        top and bottom borders are dotted
        right and left borders are solid

➢If the border-style property has one value:

    border-style: dotted;
        all four borders are dotted
 
➢ border-style property
<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 5px solid red;
}
</style>
</head>
<body>

<h2>The flower</h2>

<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>

</body>
</html>

 

5)CSS margin

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 5px solid black;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: pink;
}
</style>
</head>
<body>

 <h2>Using individual margin properties</h2>

 <div>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</div>

 </body>
</html>

6)CSS text 

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid gray;
    padding: 8px;
    background-color: pink;
}

 h1 {
    text-align: center;
    text-transform: uppercase;
    color: #4CAF50;
}

 p {
    text-indent: 50px;
    text-align: justify;
    letter-spacing: 3px;
}
</style>
</head>
<body>

 <div>
<h1>text formatting</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>

 </body>
</html>

 7)CSS font
<!DOCTYPE html>
<html>
<head>
<style>
p.italic {
    font-style: italic;
     font-size: 20px;
}

 </style>
</head>
<body>
<p class="italic">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>

 8)CSS icon

 <!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

 <p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

 </body>
</html>

 9)CSS tables
➢ type1: 
<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
}

 table, td, th {
    border: 1px solid black;
}
</style>
</head>
<body>

 <h2>Let the borders collapse:</h2>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

 </body>
</html>

➢Type2:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

 <h2>Add a border to a table:</h2>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

 </body>
</html>

 ➢Type3:
<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    border: 1px solid black;
}
</style>
</head>
<body>

 <h2>Single Border Around The Table:</h2>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

 </body>
</html>
➢Type4:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
    border: 1px solid black;
}

 table {
    border-collapse: collapse;
    width: 100%;
}

 td {
    height: 50px;
    vertical-align: bottom;
}
</style>
</head>
<body>

 <h2>The vertical-align Property</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

 </body>
</html>

 10)CSS  align
<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>

 <h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

 <div class="center">
  <p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>

 </body>
</html>





 


at No comments:
Subscribe to: Posts (Atom)

React React  is a JavaScript library for building user interfaces created by Facebook. It is maintained by Facebook and a community of...

  • ER diagram
    What is an ER diagram? An Entity Relationship (ER) Diagram is a type of flowchart that illustrates how “entities” such as peop...
  • Node.js MongoDB
    Node.js MongoDB Now a days all web based application has some database to store the data at the back end. Nodejs frame work have t...
  • node.js
    Node.js is open source, completely free, and used by thousands of developers around the world. It is used to develop I/O i...