Sunday, June 3, 2012

Java Script Beginner Tutorial 2 : How To Use

JavaScript is typically used to manipulate existing HTML elements. The HTML "id" attribute is used to identify HTML elements. The document.getElementById() method will access the HTML element with the specified id. For Example, in following code, the browser will access the HTML element with id="content", and replace the content with "Edited using JavaScript ".

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="content">My First Paragraph</p>
<script type="text/javascript">
document.getElementById("content").innerHTML="Edited using JavaScript";
</script>
</body>
</html>

The HTML <script> tag is used to insert a JavaScript into an HTML document. Inside the <script> tag use the type attribute to define the scripting language (e.g type="text/javascript"). The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript and are executed by the browser:

Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Add an HTML comment tag  (end of comment) after the last JavaScript statement, as follows

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

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

The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

The following example writes a <p> element into the HTML document:

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<script type="text/javascript">
document.write("<p>Added using JavaScript</p>");
</script>
</body>
</html>

The problem here is that, the entire HTML page will be overwritten if document.write() is used inside a function. So we must use document.getElementById() to avoid overwritten entire HTML page.

Java Script Beginner Tutorial 1 : Introduction

Introduction :
JavaScript is the most popular scripting language on the internet, and works in all major browsers. It can be used without purchasing a license.

JavaScript was designed to add interactivity to HTML pages. It is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages.

Java and JavaScript :
Java and JavaScript are two completely different languages in both concept and design. Java is a powerful and much more complex programming language , such as C and C++.
Java is server side language while Java Script is client side language.

Usage of Java Script :
Java Script is used for following purposes.

Java Script gives HTML designers a programming tool.
Java Script can react to events.
Java Script can manipulate HTML elements.
Java Script can be used to validate data.
Java Script can be used to detect the visitor's browser.
Java Script can be used to create cookies.

What is ECMAScript :
JavaScript is an implementation of the ECMAScript language standard. ECMA-262 is the official JavaScript standard.
JavaScript was invented by Brendan Eich at Netscape, and has appeared in all browsers since 1996.
The official standardization was adopted by the ECMA organization in 1997.
The ECMA standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

Thursday, May 10, 2012

CSS Advanced tutorial 14 : CSS Pseudo Elements

There are four pseudo elements. These are :

First letters
First lines
Before
after

First letter :
The first-letter pseudo element applies to the first letter of an element. for example

p:first-letter {
font-size: 2em;
float: left;
}

This will create drop caps for paragraph.

First line :
The first-line pseudo element applies to the top line of an element. For example

p:first-line {
font-weight: bold;
}

This will create a bold first-line for paragraph.

Before and after :
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML. The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imgname). For example

blockquote:before {
content: open-quote;
}

blockquote:after {
content: close-quote;
}

li:before {
content: "Dragon : "
}

p:before {
content: url(images/img.jpg)
}

CSS Advanced tutorial 13 : Page Layout in CSS

Page layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't, it's just different and actually makes much more sense.

What is Positioning :
The position property is used to define whether an element is absolute, relative, static or fixed. The value static : is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative : is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.
absolute : pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. The absolute element can be placed anywhere on the page using top, right, bottom and left.
fixed : behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, fixed elements should stay exactly where they are on the screen even when the page is scrolled.

Floating :
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks. For example

<div style="float:left; width:200px;">
<p>
This is paragraph inside first div.
</p>
</div>

<div style="float:right; width:300px;">
<p>
This is paragraph inside second div.
</p>
</div>

This will float the first div to the left side of web page, and float the second div to the right side of web page.

CSS Advanced tutorial 12 : The Display Property

The 'Display' property is used for visual representation of HTML elements. The most fundamental types of display are inline, block-line and none and they can be manipulated with the 'display' property and the values inline, block and none.

inline : Elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline. For example

#title {
display : inline;
color : blue;
}

#desc {
display : inline;
color : black;
}

The HTML elements with id 'title' and 'desc' will display next to each other.

block : puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line. For example

#title {
display : block;
color : blue;
}

#desc {
display : block;
color : black;
}

The HTML elements with id 'title' and 'desc' will display above and below to each other.

none : It doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations , alternate stylesheets or advanced hover effects. For example

#title {
display : none;
color : blue;
}

The HTML element with id 'title' will not display in browser.

Difference between display and visibility :
The display and visibility property behaves differently in browser. The 'display: none' and 'visibility: hidden' vary in that 'display: none' takes the element completely out of play, where as 'visibility: hidden' keeps the element and its flow in place without visually representing its contents. For example

<p> This is first paragraph. </p>
<p style="display:none;"> This is second paragraph. </p>
<p > This is third paragraph. </p>

Above code will display the first and third paragraph above and below to each other. If you remove the display:none; from second paragraph then there will be some re-arrangement done with HTML elements. Third paragraph will move down and there will be shown some text between first and third paragraph.

<p> This is first paragraph. </p>
<p style="visibility:hidden;"> This is second paragraph. </p>
<p > This is third paragraph. </p>

Above code will display first and third paragraph above and below to each other. But there will be a gap between them, This gap is equal the size of second paragraph. If you remove visibility:hidden; from second paragraph then you will see the text in place of gap. No HTML element re-arrangement will be done.

Other display types :
There are some other types of display that you can use with HTML elements. These are

list-item : It displays as in the way that you would usually expect an li HTML element.
run-in : It makes an element either in-line or block-line depending on the display of its parent. It doesn't work on IE and Mozilla.
compact : It makes the element inline or block-line depending on the context.
marker : It is used exclusively with the :before and :after pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.