Friday, June 21, 2013

SQL (Structured Query Language)

SQL (Structured Query Language) is a special-purpose programming language designed for managing data held in a relational database management system (RDBMS). sql IS based upon relational algebra and tuple relational calculus.

SQL consists of a data definition language and a data manipulation language. The scope of SQL includes data insert, query, update and delete, schema creation and modification, and data access control.
Although SQL is often described as, and to a great extent is, a declarative language (4GL), it also includes procedural elements. SQL was one of the first commercial languages for Edgar F. Codd's relational model, as described in his influential 1970 paper "A Relational Model of Data for Large Shared Data Banks".

Thursday, June 20, 2013

Digital Divide

This is more of a O/L ICT Topic, However related to A/L ICT in many ways. Describe how Wireless Technologies, Mobile Computing and Cloud Computing help bridge the digital divide in Society.

Monday, June 17, 2013

What is CSS? Lesson #1

Cascading Style Sheets (CSS) is a design language. It

simplify the presentation of web pages. CSS take care of the look and feel of a web page. CSS help control the color of the text, the style of fonts, spacing between paragraphs, background images and other effects. CSS enable presenting same content on different devices like mobiles , tabs, Web TV and desktops. CSS is combined with HTML and XHTML.

CSS Syntax
Selector: is an HTML element like <h1> for style to be applied.Property: is an attribute HTML element like width or border
Value: Values are assigned to attributes/properties. color:red etc.

Inline CSS
<p style="color:red;margin-left:10px;">This is a paragraph.</p>

Internal Style Sheet
Internal styles are defined in the <head> section of an HTML document, by using the <style> tag.

<style type="text/css">
body {background-color:brown;}
p {color:yellow;}

External Style Sheet
An external style sheet is used to apply same style to many pages. As each page links to a common style sheet, you can change look and feel of all web pages  by changing the external css.

<link rel="stylesheet" type="text/css" href="mystyle.css">

Importing an external style sheet
@import "mystyle.css";

Universal selector
The css renders the content of every element in black.
* {
  color: #000000;

The Descendant Selectors: style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {
  color: #000000;

The Class Selectors:
All the elements having "black" will have text in black.

.black {
  color: #000000;

Renders the text in black for <h1> elements with class name "black" {

  color: #000000;

<div class="centerbold">
This content will be styled by the class centerbold.

ID Selectors:
All the elements having same id will be formatted.

Renders the content in black for every element with id "black"

#black {
  color: #000000;

Renders only the H1 with id ="black"

h1#black {

  color: #000000;

Multiple Styling:
define multiple styles of single element, class or id.

h1 {
color: red;
margin-bottom: 1.1em;
text-transform: lowercase;

Grouping Selectors:
You can apply a style to many selectors in one go.

h1, h2, h3 {
color: #EFEFEF;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;

You can combine various class selectors together as shown below:

#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;

Sunday, June 16, 2013

HTML and WEB Short Notes

AJAX : Asynchronous JavaScript and XML
Web application use a combination of XHTML, CSS, DOM, XML. Gmail is one example of a web application that utilizes AJAX.

HTML Document is made of HTML Elements like <IMG>, <br> Tag. <br>
Attributes are additional information of HTML Elements
<IMG SRC="abc.jpg"  height="230" width="150">

CGI Common Gateway Interface
CGI allows users visiting a web page to send and receive information from a server.

CSS :Cascading Style Sheet
Help create consistence look and feel of web pages. It help defining the classes of fonts  colors, tables within a .css file/or inline. The developer ever wanted to change the look or feel of their pages could change the CSS file instead of editing each page. 

body { 
font: Arial, Helvetica, sans-serif;
a {
color: #000000;
A:visited { 
color: #005177;
a:hover {
color: #005177;

HTTP : HyperText Transfer Protocol
Is a set of standards that allow users of the World Wide Web to exchange information found on web pages. When wanting to access any web page enter http:// in front of the web address to tell the browser to communicate over HTTP.

Service provided by Internet Service Providers and other companies that allows a user to store and access their web page from the provider's servers.

An Icon, graphic, or word in a document that links to another file or object. The World Wide Web is comprised of hyperlinks linking millions of pages and files to one another.

ICANN Internet Corporation for Assigned Names and Numbers
ICANN is responsible for Internet Protocol (IP) address space allocation, protocol identifier assignment, and generic and country code Top-Level Domain names.

Meta tags
Tags within HTML that help define the contents of a web page. Meta tags help Internet search engines and browser display search results and web pages more appropriately.

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Identify the content type and charset of the web page being displayed and how to display it.

Contextual advertising
Placing Advertisments on the Internet based on content on the page. The advertising company scan the webpage for keywords to place ads. Google Adsense.

A program used to perform an automated task for the user based on an event, condition or state. an e-mail program can be setup to look for any new e-mail from a server and then tell you about it. Search engines use bots, Price bots help find best prices on internet.

(robots) a bot is a program designed do a specific task such as gather information form websites, Index them. Google Spider index web pages.

a spider software designed to query a web page and parse through all the information and collect information. Search engines use spiders/bots to gather keywords from web pages and sort them in their search engines. 

A bookmark is a method of saving a web page's address on the browser.

Affiliate program
A company or web site that directs customers to another business or web site and receives a percentage of what the customer purchases .

DOM : Document Object Model (DOM)
an Application Programming Interface (API) used in web to access the elements within HTML and XML documents.

Short for eXtensible Stylesheet Language, XSL is a stylesheet for XML documents.

Stylesheet (CSS)
defines the overall look and feel of the HTML elements with font type, colors, etc.

a markup language, similar to a standard language, utilizing various rules, statements and expressions. A good example  is XML.

eXtensible Markup Language,  is a specification developed by W3C.
uses Tags to markup a document, unlike HTML, XML language is unlimited and allows self-defined tags.

 a thread is a portion of a program that is executed in conjunction with the main program that performs another task. A program is capable of having multiple threads open at once and will either terminate or suspend the thread when the thread's task is complete or the program is closed.

Internet browser cache
 Internet cache is used to help improve how fast data is opened while browsing the Internet. each time a web page is opened, it is sent to your browser's temporary cache on your hard disk drive. If that page is accessed again and has not been modified, the browser will open the page from your cache instead of downloading the page again. This saves users a lot of time, especially if that the user is using a modem, and can also help save the web page owner on bandwidth.

PageRank helps sort web pages on the Internet by running the page through an algorithm and giving it a numerical weight that is used to sort results when a user uses the Google search engine.

Agents that automatically search the Internet to obtain information about prices and other attributes of goods and services.

Reciprocal link
Alternatively referred to as a link exchange, a reciprocal link is a link that is placed on a web page in exchange for the other web page to link to your web page.By participating in link exchanges with other popular pages you can increase your rank in search engine results.

A live broadcast of a video or audio presentation. conference calls for investors and live versions of radio shows. e learning.

Search engine
A software program available through the Internet that searches documents and files for keywords and returns the results of any files containing those keywords. (Google)

search engine optimization, SEO is a technique employed on websites otimize it for search engines to help increase the pages overall rank .

Site map
A page that contains a link to all sub pages or major sections of a web site. all what the web site has to offer.

Page Size
page size/weight is overall size of a Web page witall of the file s that are used when displaying the Web page in a browser:  a Web page that has an HTML document that is 10K in size, a 20K image file, and a 5K style sheet file, would have a page size of 35K.

A linked series of web pages, stored at a specific location in the internet.

Web page
A web page is a unit of information from a website, viewed on screen. Web pages are linked to form a website.

W3 Consortium
An international industry consortium founded in 1994 to develop common standards for the evolution of the web.

Home Page
The starting page of a web site. It is a web page can be accessed directly by typing website domain name. It  provides a starting point for a user to use the site. Some sites use a welcome page before home page.

URL : Uniform resource locator (URL)
The address for each data on the internet, which specifies the the location where it is stored. The URL includes the transfer protocol to be used, for example http, the domain name where it is stored, and other information such as its individual file name.

A graphic or piece of text which, when clicked, opens the page or a resource like image, file to which it is linked, on the same website or another site.

a website designed provide all information and links to pages the user is likely to want to access. It is  customisable by the user. ex: 

In HTML, used to indicate the part of a graphic which, when clicked, links to another document on the internet.

Image Map
In HTML, a graphic with invisible links (hot spots) within it. When the cursor is over one of the links, the cursor changes appearance. Clicking on different parts of the image will link to different places on the internet.

On the internet, proxy servers can provide a cache of internet pages, which are pages stored when first accessed so they can be supplied later without the delay of again accessing the internet. HTML resources also cached on local users computer.

frequently asked questions (FAQ)
A list of frequently asked questions and answers about a topic.

A small program that adds functionality to web browsers  to display different file types such as Flash animations. Plug-ins can be downloaded from the web.

Rich Site Summary or Really Simple Syndication. A way of subscribing to a website so that you automatically get notified when new information appears there.

The process of sending information, e.g. a podcast, to another computer. RSS feed.

Short for World Wide Web. Part of the internet, the web is comprised of all the websites which are accessed via the internet.

When information is sent to a client's browser, rather than the client requesting it.
A software filter used to identify spam emails before they reach an inbox.

Active Server Page (ASP)
An Active Server Page is an HTML page that includes one or more scripts (small embedded programs) that are processed on a Microsoft web server before the page is sent to the user.

A small program written in Java and included in an HTML page. It is independent of the operating system on which it runs. Examples are displaying animations, creating chat rooms, time and date functions, etc.

attribute (html tags)
The property of an HTML tag, e.g. "align=center" where align is the attribute, in this example set to centre text, an image, or a table, depending on the tag with which it is used.

Short for robot. An automated program that follows links on a web page, and then performs some action, e.g. indexing the words on a website.

A cookie is a piece of information sent to a browser by a web server when a particular site is visited. The browser then returns that information to the server when that particular website is revisited. For example, an online shopping site might use a cookie to remember which items you've placed in your online shopping cart.

dynamic hypertext mark-up language (DHTML)
An extension of HTML which allows more user interaction within the browser. It also allows the user to read from and write to specific database files. Normally it refers to a combination of Cascading Style Sheets, JavaScript and HTML.

The embed HTML tags <EMBED> </EMBED> allow for a variety of objects to be placed or "embedded" within HTML documents, e.g. Flash movies can be placed in web pages using the embed tags.

eXtensible Hypertext Markup Language (XHTML)
The next generation of HTML, combining HTML and XML.

eXtensible Markup Language (XML)
XML is a standard for creating mark-up languages which describe the structure of data. Website authors can use this to create their own, user-defined, tags.

An HTML page which describes how the frames are laid out, for example, how many there are.

A programming language which enables website authors to provide dynamic content to their sites. Not to be confused with Java.

An automated program that follows hypertext links and then performs some action, e.g. indexing the words on a website.

server side includes (SSI)
SSI scripts are embedded into web pages. The script is executed on the server before the page is delivered to the client machine. An example of use is to include external files inside a page.

meta tag
A particular form of HTML tag which provides information about the document itself, rather than information for the browser on how to display the document.

client side
On the internet, the client side is the user's computer, rather than the web server, and refers to when scripts, for example, are executed by the user's computer rather than the web server.

Tuesday, June 11, 2013

AL ICT Revision: Basic Concepts Part #1

Through study of this module is a very important as the MCQ paper is quite focused in your knowledge in fundamentals of  ICT.

The first part covers data, information and knowledge, how you use them and emphasizes the need of technology to manage data. It also asses your knowledge a how ICT is used in society and tool for accessing and using knowledge.

One good idea is to review your knowledge in theatrical as pect of following terms and practical application. While you need to understand the what, why, how of these keywords, you also need to remember some important information like protocols used in technologies, abbreviations etc.

Module 1 : Basic Concepts of ICT
1.1 Describe Role of ICT and Applicability in Knowledge Based Society

1.2 :  Explain the Need of Technology to manage data

1.3 Describe Drawbacks of manual Methods.
Think of a government office with file cabinets and many clerks Vs a mobile operator office with computers, fewer people, faster service and online connectivity.  Think of Slowness, Efficiency, Unreliability, Inaccuracy, Difficult to copy, Access Single person at a time, Security

1.4 Describe Importance of Information in daily life
Convenience, Accuracy, Management, Saving time, High quality, Communication

1.5 Availability of Electronic and other Technologies
Electronics, Communications, Visualization, Sensors, Fiber Optics, Satellites, Mobile Technologies, Wireless

1.6 Development of internet and WWW
In this section examiners expect you to demonstrate understanding of evolution of WWW. Starts with ARPANET to social networks like Face Book &amp; twitter.
Telegraph , Morse are earliest electrical communication uses.
Packet Switching (1964), Hyper Text (1965), ARPAnet (1969)
TCP by Vinton Cerf, IP, Internet (1984), email
HTML by Tim Burns Lee(), WWW (1989)
Mosic Browser (1993) by Mark Anderson, Yahoo,
e Commerce(1995), Amazon, eBay, Paypal,
Linux, mySQL, php, IIS, ASP, ASP.NET, Flash, Java Script
Ajax, Web 2.0,
Google, Facebook,  twitter
Flicker, Youtube, Blogger,
GPRS, 3G, Wi-Max, IPV6

1.7 Also understand how the WWW has impact lives of people.

 Special Note : 
In preparing for MCQ, best idea is to read the relevant theory, rather than attempting whole heap of part MCQs. Remember MCQ give 4 wrong answers and one right question. This makes students to panic at exams trying to put his all his knowledge for answering the question.  One good method is not trying to find right answer, but eliminating wrong ones considering facts and reaching the right answer automatically.

Thursday, June 6, 2013

Learning & Using ICT for Success

This is work of my ICT students 2011-2013. They learned ICT and digital media creation. This short film produced by them totally using ICT. They also won a Microsoft / World World Bank Youth Solutions award to win USD 20,000 to make 10 digital short films.

See more of ICT and Youth Development

Niranjan  Meegammana

Wednesday, June 5, 2013

AL ICT Paper 2013 - Ansering the HTML Question

In order to answer HTML Question You need to know following HTML Tags by Heart.

Basic HTML Document 

<title>Title of your </title>
Your Content Is here!

Basic Headline Tags

<h1>Largest Heading</h1>  H1
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6> h6

<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->


<b>Bold text</b>
<code> code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>

<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)


Basic link: <a href="">Link-text goes here</a>
Image-link: <a href=""><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="">Send e-mail</a>
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Inserting Images

<img src="URL" alt="Alternate Text" height="100" width="150">


<style type="text/css">
  h1 {color:green;}
  p {color:yellow;}
  h4 {color:#FF0000;}

#FF0000 - Red
#00FF00 - Green
#0000FF - Blue

<div>A block-level section in a document</div>
<span>An inline section in a document usually put inside a div</span>

Unordered list


Ordered list

  <li>First item</li>
  <li>Second item</li>

Definition list

  <dt>Item 1</dt>
    <dd>Describe item 1</dd>
  <dt>Item 2</dt>
    <dd>Describe item 2</dd>

List In a List

         <ul>       <li>Pumpkin</li>

List in a list is very popular among paper designers. Prepare for 3 Levels, usually they ask 2 levels


<table border="1">
    <th>table header</th>
    <th>table header</th>
    <td>table data</td>
    <td>table data</td>


<iframe src="demo_iframe.htm"></iframe>


<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<option selected="selected">Bananas</option>
<textarea name="comment" rows="60" cols="20"></textarea>


Understand the difference between radio and option buttons and check boxes.
Which are input elements?
What happens when you tick a check box?
What happens when you tick radio buttons?


&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©
&nbsp; used as space

<IMG src="image.jpg" height="20" width="30">
Remember to use double quotes in attributes>

Web 2.0 Notes
The web 2.0 requires all elements wriiten in lowercase other than DOCTYPE tage
All elements need to have a closing TAG. like <p> Text</p>
But hr, br, img does not have a closing tag. They are hence written as <br/>, <hr/>

HTML question is easy. You can get full marks.


  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a strict  version of HTML 4.01
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers.

XHTML Differences from HTML:

Document Structure

  • XHTML DOCTYPE is mandatory
  • The XML namespace attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> is mandatory

XHTML Elements

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden

    XHTML format
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<title>Title of document</title>



More !

You need to know what XML standfor, what it is used for and why?
You also need to know basic syntax for XML

Try this quiz it' will brush your XML knowledge

In addition to HTML you need to know following terms
WWW, Web Server, Web Hosting, Web Designing, Web Development
Knowing Java Script and how it is used and why it is used is an advantage

Tuesday, June 4, 2013

සමාජ අන්තර්සඹඳතා වල අනාගතය : Future of Engagement # 1

ලෝකයේ සමාජ මාධ්‍ය සහ සමාජ ජාලවලින් අනාගතයේ ගොඩ නැගෙන ලෝකයට සිදුවන බලපෑම ගැන ගවුරවු මිශ්‍රා (Gaurav Mishra),  පැස්කල් බියුකල් (Pascal Beucler) සමග නිධි මුකිජා(Nidhi Makhijaයන විද්වතුන් කළ පර්යේශණයක වාර්ථාව තුලින් උපුටා ගන්නා මේ කරුණු අපට ඉතා වැදගත් බැවින් සිංහල භාෂාවට පරිවර්ථනය කර ඔබට ඉදිරිපත් කරමි.  මෙය මූණුපොතේ බෙදාගන්න , කැමැත්ත ප්‍රකාශ කරන්න ගූගල් +1 කරන්න. අනාගත ලොකයේ සමාජ අන්තර්ක්‍රියා ගමන් මග ගැන දැන ගැනීම ඉන් ඵල නොලා ගැනීමට අපට අත්‍යවශ්‍යය.

පරිවර්ථනය සහ දේශීයකරණය නිරංජන් මීගම්මන
Translation & Localization Niranjan  Meegammana
කෙටියෙන් කියන්නේ නම් සමාජ සංවර්ධනය පිළිබඳව අපට ඇතිවන ප්‍රභල අන්තර්ඥාණයන් අනාගතයට වටිනා පෙරදැක්මක් දක්වා සංශ්ලේෂණය කරගැනීමට අප නව ක්‍රමයක් සොයාගත යුතුය. අපගේ සමාජ සංවර්ධන ප්‍රවේශයයන් අන්තර්ජාලයේ වියුණු පදනම තුල පුද්ගලික, සමාජයීය මෙන්ම ව්‍යාපාරික සන්නාම හා  බැඳුණු ජනඑකතුවක් (crowdsource) නිර්මාණය කිරීමට හේතුවේ. එම සමාජ ජාලා හා ජනඑකතුවද, සමාජ දත්ත, සමාජ ජාලා පුරවැසිභාවයන් හා විවිධාකාර තොරතුරැ ලබාදෙන කථාවස්තූන් තුලින්ද අනාගත සමාජමය එකඟතාවයන් සහ අන්තර්ක්‍රියාවන් කෙරෙහි මහත්වූ බලපැමක් වනු ඇත. 

එම සමාජ සඹඳතා තුල පවතින අන්තර්සඹඳතා, සමාජමය අනතර්ක්‍රියා හා එවන් සඹඳතා ගොඩනැගෙන රටාවන් හඳුනා ගැනීම තුලින් අනාගත සමාජ ව්‍යුහයන්, අවශ්‍යතා හා නව රටාවන් අවබෝධ කරගැනීමට අපට හැකිවේ. වසරකට වඩා කතුවරුන් විසින් විවිධ වියුණු පදනම්, සමාජ ජාල හා සන්නාම වැඩසටහන් ගැන කළ අධ්‍යයනකින් අනතුරුව අනාගතයේ සමාජ අන්තර්ක්‍රියාවන්(future of engagement)සිදුවන මායිම් 10 ක් හඳුනාගන ඇත.

 1. අනාගතය ලෝකය ජනතාව අයිතිය:
It’s a People’s World :

අනාගත ලෝකය මෙහෙයවනු ලබන්නේ සමාජ ව්‍යවසායයකයින් හා සමාජය වෙනස්කරන්නන් (Entrepreneurs and changemakers) විසිනි. සමාගම් හෝ ආයතන විසින් නොවේ. මේ සඳහා ආධාර(crowdfunding) සහ එකතුවීපරිහභෝජනය (collaborative consumption) යන සංකල්ප හේතුවේ. එමනිසා සමාගම් සහ ආයතන තම පැවැත්ම හා දියුණුව උදෙසා සමාජ ව්‍යවසායයකයින් හා සමාජය වෙනස්කරන්නන්ගේ සමාජමය ක්‍රමවේද ඉගෙන ගැනීමත් සහ ඒවා තම සමාජ අන්තර්ක්‍රියා උත්සාහයන් (own engagement efforts) කෙරෙහි යොදාගත යුතුවේ. 

 2. අනාගත ලෝකය සමාජ අව්‍යශතා මත දුවයි
It’s a Purpose-led World:
සමාජ අන්තර්ක්‍රියාවන් හා පුරවැසියන්ගේ පොදු අවශ්‍යතා මත අනාගත ලෝකය හැඩ ගැසේ. එනම් බිම් මට්ටමේ සමාජ වෙනස්කම් ඇතිකරන සහ එකතුවී සමාජ නව්‍යකරණයන් සිදුකරන ව්‍යාපාරයන් (grass roots change movements,collaborative social innovation) සමාජයේ ඉදිරි ගමනට මූලික වේ.
එමනිසා සෑම ආයතනයක්ම ඉතා ඉක්මණින් තමන් කුමන කරුණක් අරභයා සමාජයේ පවතින්නේද යන බව එකතුවී නැවත නිර්වචනය කරගනිමින් (collaboratively redefine), සමාජ අවශ්‍යතා පෙරදැරි කරගත් ව්‍යාපාර පදනමක් හා අනාගත වැඩසටහනක් නිර්මාණය කරගත යුතුය. (design  a purpose-inspired platforms and programs.)

 2. අනාගත ලෝක බැඳුම් රහිත ලෝකයකි:
it’s a Boundless World:
අන්තර්ජාලයේ සමාජ සඹඳතා හා අන්තර්ක්‍රියා නිසා ජනතාව තොරතුරු සඳහා සම්මත නාලිකාවන් කෙරෙහි අධික ලෙස (channel) බැඳී නොවතී. පෙරගමන් කරුවන් වන මාධ්‍ය ආයතන ඩිගිටල් නව්‍යකරණය තුලින් සම්ප්‍රේශිත මාධ්‍ය කතන්දරකරණය (transmedia storytelling), සමාජ ප්‍රතිකාරකරණය (social curation), සජීවී සමාජ අත්දැකීම් (social live experiences). ආයතන මේ නව පෙළගැස්ම උගත යුතු අතර නාලිකා මත බැඳී නොපවතින පදනම් සහ වැඩ සටහන් නිර්මාණය කල යුතුය. 

 3. එය සමාජමය ලෝකයකි:
It’s a Social World:

සමාජ සඹඳතා හා අන්තර්ක්‍රියා සමාජ තිරසාරභාවය (sustainability),සතුට සනීපය (wellness) හා දැනුම (learning) වැනි පොදු සමාජීය අවශ්‍යතාවන් මත සිදුවේ.  
මේ සඳහා ජනආධාර (crowdfunding), බිම්මට්ටමේ වෙනස්කම් සිදුකරන ව්‍යාපාර (grassroots change movements), එකතුවී සමාජ නව්‍යකරණය (collaborative social innovation) මෙන්ම ස්වකැමතැත්තෙන් ක්‍රියාකර ස්වකීය දියුණුවට හේතුවන හැසීරීම වෙනස්කරන ක්‍රීඩා (behavior change games) වල යෙදීමද , එකතුවී 
පරිභෝජනයද (Collaborative consumption) නව මායිම් වේ. 

මෙම පරිවර්ථනයේ දෙවන කොටස බලාපොරොත්තු වන්න.

මූලාශ්‍ර Source :

Monday, June 3, 2013

Learning jQuery in 24 Hours

jQuery is a JavaScript Library  It simplifies JavaScript programming.

efore you start studying jQuery, you should have a basic knowledge of:

You can use jQuery library online
or from your hard drive by including in the header section on your web page.

To use jQuery from Google, use one of the following:
Google CDN:

<script src="//">

The jQuery library contains the following features:
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery Syntax
The jQuery syntax selects HTML elements and perform action on the element(s).

Basic syntax is: $(selector).action()

$ sign is used to define the jQuery
selector is the id of HTML element
action() is the action to be performed on element(s)


$(this).hide() - hides the current element.
$("top").hide() - hides all elements of class="top"
$("p").hide() - hides all <p> elements.
$("#px").hide() - hides the element with id="px".

The element Selector
The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page  with 

When a you click on a button, all <p> elements will be hidden:


The #id Selector
The  #id selector finds a specific element with #id

When a user clicks on #test, it gets hidden


The .class Selector

$("*") Selects all elements
$(this) Selects the current HTML element
$("p.ix") Selects all <p> elements with class="ix"
$("p:first")  Selects the first <p> element
$("ul li:first") Selects the first <li> element of first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]")  Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

An event represents the precise moment when something happens.

Mouse Events
click, dblclick, mouseenter, mouseleave

Keyboard Events
keypress, keydown, keyup

Form Events
submit, change, focus, blur

Document/Window Events
load, resize, scroll, unload

Query Syntax For Event Methods
To assign a click event to all <p>s

The next step is to define what should happen when the event fires.  
You must pass a function to the event:

  // action goes here!!

Common Events 

//--------------------click event


//--------------------double click event


//--------------------mouseenter event

  alert("You entered p1!");

//--------------------mouseleave event

  alert("Bye! You now leave p1!");

//--------------------mousedown event

  alert("Mouse down over p1!");

//--------------------mouseup event

  alert("Mouse up over p1!");

//--------------------hoover event

  alert("You entered p1!");
  alert("Bye! You now leave p1!");

//--------------------focus event


//--------------------blur event


//-----------------------hide event

jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:



//-------------------- Toggle event

jQuery toggle()


//------------------jQuery Fading Methods




//------------------ jQuery Fading Out Methods


//---------------------jQuery fadeToggle() Method


jQuery fadeTo() Method


jQuery Sliding Methods






JQuery Animations 
The jQuery animate() method is used to create custom animations.



jQuery stop() Method
 stop() method is used to stop an animation or effect


//----------------jQuery Callback Functions
JavaScript statements are executed line by line. 
In effects, the next line of code can be run even though the effect is not finished. 
It can create errors. hence callback functions are used

    alert("The paragraph is now hidden");

//---------------jQuery Method Chaining

//--------Get Content - text(), html(), and val()

  alert("Text: " + $("#test").text());
  alert("HTML: " + $("#test").html());

//------------how to get the value of an input field 

  alert("Value: " + $("#test").val());

//----------------how to get the value of the href attribute in a link:


Callback Function for text(), html(), and val()

    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 

    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 

//------------how to change (set) the value of the href attribute in a link:


//---------- how to set both the href and title attributes at the same time:

    "href" : "",
    "title" : "Welcome to Chat"

//--- The jQuery append() method inserts content AT THE END of the selected HTML elements.

$("p").append("Some appended text.");

//------The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

$("p").prepend("Some prepended text.");

//-----Add Several New Elements With append() and prepend()

function appendText()
var txt1="<p>Text.</p>";               // Create element with HTML  
var txt2=$("<p></p>").text("Text.");   // Create with jQuery
var txt3=document.createElement("p");  // Create with DOM
$("p").append(txt1,txt2,txt3);         // Append the new elements 

//-----jQuery after() and before() Methods

$("img").after("Some text after");
$("img").before("Some text before");

function afterText()
var txt1="<b>I </b>";                    // Create element with HTML  
var txt2=$("<i></i>").text("love ");     // Create with jQuery
var txt3=document.createElement("big");  // Create with DOM
$("img").after(txt1,txt2,txt3);          // Insert new elements after img

//----The jQuery remove() method removes the selected element(s) and its child elements.


//----jQuery empty() method removes the child elements of the selected element(s).


//---- jQuery addClass() Method

  $("#div1").addClass("important blue");

//---- jQuery removeClass() Method

  $("#div1").removeClass("important blue");

//-------toggleClass() Method

// read and set a CSS property


//multiple CSS set

jQuery - Dimensions


//-------Width & Height

  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();

Outer width & Outer height

  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();

Query AJAX?

AJAX = Asynchronous JavaScript and XML.
AJAX help loading data in the background and display it on the webpage, without reloading the whole page.

jQuery - AJAX load() Method

      alert("External content loaded successfully!");
      alert("Error: "+xhr.status+": "+xhr.statusText);

HTTP Request: GET vs. POST

GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource

//---------------jQuery $.get() Method

    alert("Data: " + data + "\nStatus: " + status);

//---jQuery - The noConflict() Method

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

    jQuery("p").text("jQuery is still working!");

Good Animation Examples

Jquery Mobile