jQuery Syntax

With jQuery, we can select HTML elements and perform some actions in it.

jQuery Syntax

The jQuery syntax is used to select the HTML elements and perform some action in it.

The Basic Syntax is : $(selector).action()

• The $ sign is used to define or access jQuery
• The (selector) is used to find or select HTML elements.
• The action() is the jQuery action to be performed in the HTML element.

For example:

$("p").hide()

The Document Ready Event

The document ready event is used to prevent any jQuery code from running before the document had finished loading. It is good practice for the document to be loaded before working with it. This also allows you to place the jQuery code before the body of the document, that is in the head section.

For example:

$ (document).ready(function() {
   // jQuery method goes here...
});

The jQuery team has also created an even shorter method for the document ready event.

For example:

$ (function () {
   // jQuery method goes here...
});

Read More

JavaScript Syntax

Just like all programming language,in JavaScript also, the Syntax defines how to construct the language. It is the principle by which the language is constructed. The sentences of a programming language is called statements.

JavaScript Character Set

JavaScript uses Unicode character set. Unicode cover almost all characters, punctuations, and symbols in the world. Unicode enables processing, storage, and transport of text, independent of platform and language. Unicode can be implemented by different character set. The most commonly used encoding are UTF-8 and UTF-16. A character set contains the following:

1. Letters: The English alphabets (A to Z and a to z)
2. Digits: The Numerals (0 to 9)
3. Special Characters: + - * / \ ! @ # $ % ^ & * ( ) _ - = [ ] { } | ; : " ' , . ? etc
4. White spaces: Blank Space (Space bar), Tab, Return etc
5. Other characters: Non-Graphic Symbols.

JavaScript Functions

A function is a block of code designed to perform a particular task. JavaScript statements written inside a JavaScript function, can be invoked many times as the user desires. To invoke a function means to call upon the function or asking up the code in the function which is being called to be executed.

For example:

function myFunction (a, b) {
 return a + b;
}

JavaScript Data Type

JavaScript data types are the data's provided to an variable. It can be anything like number, characters, text string, arrays, objects, and much more. A programming language like JavaScript has to deal with all kinds of data. Data types are defined to differentiate the nature and size of incoming data. JavaScript is flexible enough to allow user to define data types therefore increasing its demand in the programming world.

For example:

var number = 10;
var name = "Edwin";
var language = ["HTML","CSS","JavaScript","jQuery"]

JavaScript Keywords

A JavaScript statement always starts with a keyword. The words that convey a specific meaning to the language compilers are called keywords. These are also known as reserved words as they are reserved by the language for special purpose and cannot be redefined for any other purpose.

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

For example:

var x = 5 + 6;
var y = a * b;

JavaScript Identifiers

All programming languages must identify variables, functions, and objects with unique name. These unique names are called identifiers. Identifiers are the user defines words that are used to name different program elements such as memory locations, functions, statements, objects, classes etc. These are the fundamental building blocks of the program. The identifiers of memory locations are called variables; of functions are called function names; of statements are called labels and so on.

JavaScript Literals

Literals are tokens that represent data items that never change their value during the program run. They are often referred to as constants. In programming language, literals are constants. Number literals can be written with or without decimal points, and wit or without scientific notations. String literals can be written with double or single quotes.

For example:

3.14
1001
123e5
"Edwin Ronald Lambert"
'Edwin Ronald Lambert'

JavaScript Operators

Data processing is a sequence of operations. Operators are predefined symbols that can carry out operations. Operators are the token that triggers some kind of operations on the data. The data on which the operations are carried out are called operands. The operands may be either a constant or a variable. Generally operators perform the operations and return some results.

For example:

x = 5;
y = 6;
z = x + y;

JavaScript Statements

JavaScript statements are commands to the browser. It tells the browser what function it has to do. JavaScript ignores spaces, tabs and newlines that appears in a JavaScript program. Because of that, it allows you to format and indent the program in a neat and consistent way that make the code easy to read and understand. Semicolon separates the JavaScript statements. Therefore we add semicolon at the end of each executable statements.

For example:

x = 5 + 6;
y = x * 10;

JavaScript Variables

In JavaScript, variables are the named memory locations capable of storing constants or data. in fact, variables are containers for storing informations or data. A variable can be defined in any data type. The size and nature of data stored in a variable depends on the data type , it is declared. The equal sign assigns a value to a named variable.

For example:

x = 5;
y = 6;
z = x + y;

JavaScript Comments

JavaScript comments are used to explain the code and make the code more readable. It can also be used to prevent execution during testing alternative codes.

For example:

//This is a single line comment. I will not be executed.

/*
This is a double line comment.
I will not be executed.
*/

Read More

JavaScript Statements

A JavaScript consist of statements that are placed inside the <script> and </script> HTML tags. The <script> tag tells the browser that everything inside the tag is a script. In HTML, JavaScript is a sequence of statements that can be executed by a web browser.

JavaScript Statements

JavaScript statements are commands to the browser. It tells the browser what function it has to do. JavaScript ignores spaces, tabs and newlines that appears in a JavaScript program. Because of that, it allows you to format and indent the program in a neat and consistent way that make the code easy to read and understand. Semicolon separates the JavaScript statements. Therefore we add semicolon at the end of each executable statements.

JavaScript Code

JavaScript code is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. JavaScript code can be grouped together in blocks. A block starts with the left curly bracket and ends with the right curly bracket. The purpose of the block is to make the sequence of the statement execute together. You can break up the code using a backslash within the text string.

For example:

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>
<p id="myPar">This is a paragraph</p>
<div id="myDiv">This is a Div</div>
<p><button type="button" onclick="myFunction()">Try it</button></p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World!";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>

</body>
</html>

JavaScript Identifiers

All programming languages must identify keyords, variables, methods, properties and labels with unique names. In JavaSript, these unique names are called identifiers. In JavaScript, these identifiers should begin with a letter, or an underscore (_) or a dollar sign ($). The other characters can be letters, digits, underscore or dollar sign. Some JavaScript identifiers are reserved as keywords and cannot be used as identifiers in a script.

JavaScript is case Sensitive

JavaScript is Case Sensitive. All identifiers, keywords, variables, methods, properties, and functions are case sensitive. A variable named myVariable is different from MyVariable, also the function getElementById is different from getElementbyID.

Read More

Introduction to jQuery

jQuery is a lightweight "write less, do more" JavaScript library. The purpose of jQuery is to make JavaScript easy to use on our website. jQuery take a lot of common task that requires a lot of JavaScript code and wraps them into less code or just a single line. jQuery also simplifies a lot of complicated things from JavaScript like AJAX calls, and DOM manipulation. The jQuery library contains the following features.

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and Animations
• AJAX
• Utilities

There are a lot of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most expendable. This is because the jQuery team have written the knowledge of cross-browser issues into the jQuery library. Therefore, it will exactly the same in all browsers, including Internet Explorer 6. Many of the biggest companies use jQuery:

• Google
• Microsoft
• IBM

Addding jQuery to your webpage

There are several ways to add jQuery on your website.

• Download the jQuery library from jQuery.com
• Include jQuery from a CDN

Downloading jQuery

There are two versions of jQuery available for downloading:

• Production Version
• Development Version

The jQuery library is a single JavaScript file and should be linked with the HTML <script> tag

<head>
<script src="jquery-1.11.0.min.js"></script>
</head>

Alternatives to Downloading

If you don't want to download and host jQuery directly, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/<br />jquery.min.js"></script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>

Read More

JavaScript in HTML

JavaScript is mainly used to manipulate the HTML elements. JavaScript gives us the full freedom to add interactivity and responsiveness to our web page. As all of you know, HTML is used to give a structure to our web page and CSS is used to change the appearance of our page. But do you know why JavaScript is used? If you don't there is no problem. JavaScript is a web programming language that enables us to control how a webpage behaves. This make this language very crucial in web designing. Using JavaScript, we can do many things such as:

• Put text in HTML page anytime.
• Make your web page responsive and efficient.
• Used to detect visitor's browser.
• Create cookies
• Validate Form
• and much more.

Writing JavaScript code

Writing a JavaScript code is easy but one simple mistake can lead you to scratching your head. So whenever you type a code be sure that the code you are writing is completely perfect. JavaScript code is written between the <script> tag. A JavaScript code starts with document.write and the code is written between a pair of parenthesis. Note that, when you execute a text using document.write on a HTML page, the HTML element will be overwritten.

For example:

<!DOCTYPE html>
<html>

<body>
<h1>My Webpage</h1>

<script>
document.write("<p>My first JavaScript text</p>");
</script>

</body>
</html>

We can also write a document.write code by calling out a function.

For example:

<!DOCTYPE html>
<html>

<body>
<h1>My Webpage</h1>

<script>
function myFunction()
{
document.write("<p>My first JavaScript text</p>");
}
</script>

<button onclick="myFunction()">Try it<button> 

</body>
</html>

Accessing a HTML element

To access a HTML element, we use the document.getelementById() method. We use the id attribute to denote which HTML element to be accessed upon.

For example:

<!DOCTYPE html>
<html>

<body>
<h1>My Webpage</h1>
<p id="demo">A paragraph</h1>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My JavaScript text";
}
</script>

<button type="button" onclick="myFunction()">Try it<button> 

</body>
</html>

Read More

Introduction to JavaScript

JavaScript is denoted as the language for the web, for HTML, for servers, for PC, laptops, tablets and more. It is one of the most important language in the world. Today, most of the modern HTML pages uses JavaScript. JavaScript is used to denote the behaviour of the webpage.

JavaScript was invented by Brendan Eich. ECMA-262 is the official standard of JavaScript. JavaScript is a scripting language, that is a lightweight programming language that can be inserted into an HTML page and can be executed by all type of web browsers. One of the most important thing that we should remember is that Java and JavaScript are both different.

In HTML, JavaScript must be inserted between <script> and </script> tags. It is possible to put unlimited scripts in an HTML document. They can be put in both head section and body section. It is the common practise that the scripts be put in the head section or at the bottom of the page separating HTML code and JavaScript code, by putting the code at one place.

The <script>

To insert a JavaScript code in our HTML page, we use the <script> tag. The JavaScript code can be inserted between these tags.

For example:

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My first 
 JavaScript Function";
}
</script>

JavaScript in <head>

For example:

<!DOCTYPE html>
<html>

<head>
<script>
function.myFunction()
{
document.getElementById("demo_1").innerHTML="My first 
 JavaScript Function";
}
</script>
</head>

<body>
<h1>A Web Page</h1>
<p id="demo_1">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>

</html>

JavaScript in <body>

For example:

<!DOCTYPE html>
<html>

<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction1()">Try it</button>

<script>
function myFunction1()
{
document.getElementById("demo").innerHTML="My first 
JavaScript Function";
}
</script>
</body>

</html>

External JavaScripts

JavaScript can also be placed as external files. External files contain code to be used by many web pages. External JavaScript files are created with extension .js.

For example:

<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>

Read More