Java script 4

Conditional Statements 

JavaScript we have the following conditional statements:

• if

• else

• else if 

• switch 

   

  The if Statement

  Syntax

  if (condition) 

  {
      block of code to be executed if the condition is true
  } 

   

   Example : 

   <hmtl>

  <script>

  var age=20;

  if(age>18)

  {

  document.write("Qualifies for driving");

  }

  </scritp>

  </html>

  The else Statement

  if (condition)

   {
      block of code to be executed if the condition is true
  } 

  else

   {
      block of code to be executed if the condition is false
  }

   

  Example : 

   <hmtl>

  <script>

  var age=20;

  if(age>18)

  {

  document.write("Qualifies for driving");

  } 

  else

  {

  document.write("doesnt qulify for driving");

  }

  </scritp>

  </html>

  
  

  The else if Statement

  Use the else if statement to specify a new condition if the first condition is false.
  

  Syntax

  if (condition1) 

  {
      block of code to be executed if condition1 is true
  }

   else if (condition2) 

  {
      block of code to be executed if the condition1 is false and condition2 is true
  }

   else

   {
      block of code to be executed if the condition1 is false and condition2 is false
  }

   

   

  Example:Simillar to if else.
  

  The JavaScript Switch Statement

   

  Syntax 

   

   switch(expression)

   {
      case n:
          code block
          break;
      case n:
          code block
          break;
      default:
          default code block
  }

   

   

Java script 3

JavaScript Arithmetic Operators

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulus
++	Increment
--	Decrement

 

JavaScript Assignment Operators

Operator	Example
=	x = y
+=	x += y
-=	x -= y
*=	x *= y
/=	x /= y
%=	x %= y

 

JavaScript  Logical Operators

Operator	Description
= =	equal to
= = =	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

 

JavaScript Function Syntax

 function name(parameter1, parameter2, parameter3)

 {
    code to be executed
} 

 

 Example:

var x = myFunction(5, 2);        // Function is called, return value will end up in x
function myFunction(a, b)

 {
    return a * b;                // Function returns the product of a and b }

 

Java script 2

JavaScript Syntax

Java script statements  are separated by semicolons (;)

Ex:

var x = 2; var y = 3; var z = x + y; 

the values (fixed) are also known as literals are written directly instead of putting them in a qoutes

20.2

03

string are written as

"Google"

"Blackfacers"

 

Variables can be assigned values using = operator :

var x;

x=50;

Arithmetic operators :
 

(5*2)+5

 The values can be of string type can also be joined using operator + like

"Black" + "  " + "facers"

Blackfacers will be the output.

Java script comments :

Code after double slashes  //  or between      /*  and  */     is treated as a comment.

  Javascript program ex:

 var x = 10;
var y =5;
var z = x + y;
document.getElementById("sample").innerHTML = z;

JavaScript Code Blocks :

JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

 function myFunction()
{
    document.getElementById("demo").innerHTML = "Hello CODERS.";
    document.getElementById("sample").innerHTML = "How are you?";
}

Here function is a keyword.
 

Java Script

Last Post was done with HTML,CSS .

Let Begin with Java Script

JAVA SCRIPT

 

 Why we need to study java script ?

 We learnt about HTML which is used to define the content of web pages
 And  CSS to specify the layout of web pages,now
 JavaScript to program the behavior of web pages
 This tutorial is about JavaScript.

 > Method to use Javascript in HTML : getElementById().

In This example uses the method to "find" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

 ( Notice the capital and small letters)


> Method to use Javascript in HTML,form of CSS: getElementById().

Example

document.getElementById("demo").style.fontSize = "20px";

 

 

 

 

The SCRIPT Tag :

 

 

In HTML, JavaScript code must be inserted between <script> and </script> tags.

Example

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

 

 

The next part will be continued in the next session of the blog...!!

Html #part3 

  CSS Tutorial

 CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

 

Example

body {
    background-color: #d0f5fs;
}
h1 {
    color: orange;
    text-align: center;
}
p {
    font-family: "Times New Roman";
    font-size: 30px;
}

 

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
• CSS also saves lot of work. 

   CSS Syntax

  A CSS rule set consists of a selector and a declaration block:
  
  H1 {color:blue; font-size:12px;}
  
  Selector : H1
  Declaration: Color:blue, font-size:12px
  
  The selector points to the HTML element you want to style.
  The declaration block contains one or more declarations separated by semicolons.
  Each declaration includes a property name and a value, separated by a colon.
  
  
  

  Three Ways to Insert CSS

  There are three ways of inserting a style sheet:
  
• External style sheet
• Internal style sheet
• Inline style

  External Style Sheet

  With an external style sheet, you can change the look of an entire website by changing just one file!
  Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section:
  
  
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
   
  An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "myStyle.css", is shown below:
   
  body {
      background-color: lightblue;
  }
  
  h1 {
      color: navy;
      margin-left: 20px;
  }
   

  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:
  
  

  <head>
  <style>
  body {
      background-color: linen;
  }
  
  h1 {
      color: maroon;
      margin-left: 40px;
  }
  </style>
  </head>

   

   

  Inline Styles

  An inline style may be used to apply a unique style for a single element.
  An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
  To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a <h1> element:
  
  

  <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

   

  include this code in html file itself.

  
  

Html #part2:

HTML Text Color

The color property defines the text color to be used for an HTML element:

<h1 style="color:blue">This is a heading</h1>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana">This is a heading</h1>

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

<h1 style="font-size:200%">This is a heading</h1>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center">Centered Heading</h1>
 <h1 style="text-align:left">Left Heading</h1 
><h1 style="text-align:right">Right Heading</h1>

HTML  Formatting : 

Subscript

The HTML <sub> element defines subscripted text.

 <p>This is _subscripted text.</p>

^Superscript:

^{<p>This is ^{superscripted} text.</p>}

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

<p>WWW.: <q>Tihs is text from www.blackfacers.blogspot.com.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.

<p>The <abbr title="End Of  File">EOF</abbr></p>

 

 

HTML Comment Tags

<!-- Write your comments here -->

 

 

Learning HTML: #part 1

What is HTML?

HTML is a markup language for describing web documents (web pages).

• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content</tagname>

• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a slash before the tag name

The tags used in above example are explained here:
Open the Notepad++ file
type the following code

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


save the file with .html extension
for example: sample.html


HTML can be edited by using professional HTML editors like:

• Microsoft WebMatrix
• Sublime Text

For learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

so on.....

HTML Links

HTML links are defined with the <a> tag:

<a href="www.blackfacers.blogspot.com">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

<img src="blackfacers.jpg" alt="blogspot.com" width="104" height="142">