Sunday, 15 March 2015

Javascript Output

JavaScript does not have any built-in print or display functions.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:
  • Writing into an alert box, using window.alert().
  • Writing into the HTML output using document.write().
  • Writing into an HTML element, using innerHTML.
  • Writing into the browser console, using console.log().

Using window.alert()

You can use an alert box to display data:.

Using document.write()

For testing purposes, it is convenient to use document.write():

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Using console.log()

In your browser, you can use the console.log() method to display data.
Activate the browser console with F12, and select "Console" in the menu.




Posted by at No comments:
Labels:

What is Javascript

JavaScript is the programming language of the Web.
All modern HTML pages are using JavaScript.

 JavaScript Can Change HTML Content
One of many HTML methods is document.getElementById().
This example "finds" the HTML element with id="demo", and changes its content (innerHTML):

Example

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

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example

document.getElementById("demo").style.fontSize = "25px";
JavaScript can be placed in the <body> and the <head> sections of an HTML page.

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>

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

External JavaScript

Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:

 
Posted by at No comments:
Labels:

Css Floating

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
Posted by at No comments:
Labels:

Css Positioning

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position:

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Posted by at No comments:
Labels:

Css Dimension

The CSS dimension properties allow you to control the height and width of an element.

All CSS Dimension Properties

Property Description Values
height Sets the height of an element auto
length
%
inherit
max-height Sets the maximum height of an element none
length
%
inherit
max-width Sets the maximum width of an element none
length
%
inherit
min-height Sets the minimum height of an element length
%
inherit
min-width Sets the minimum width of an element length
%
inherit
width Sets the width of an element auto
length
%
inherit
Posted by at No comments:
Labels:

Css Padding

The CSS padding properties define the space between the element border and the element content.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element

The padding property can have from one to four values.
  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

  • padding: 25px;
    • all four paddings are 25px
Posted by at No comments:
Labels:

Css Margin

The CSS margin properties define the space around elements.

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element

The margin property can have from one to four values.
  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin: 25px;
    • all four margins are 25px
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)