Simple Information about Javascript Literals

Literals are the way you represent values in JavaScript. These are fixed values that you literally provide in your application source, and are not variables.

Description

Literals

Literals are the way you represent values in JavaScript. These are fixed values that you literally provide in your application source, and are not variables. Examples of literals include:

42
3.1245
"To be or not to be"

Integers

Integers can be expressed in decimal (base 10), hexadecimal (base 16), or octal (base 8) format. A decimal integer literal consists of a sequence of digits (optionally suffixed as described below) without a leading 0 (zero).

An integer can be expressed in octal or hexadecimal rather than decimal. A leading 0 (zero) on an integer literal means it is in octal; a leading 0x (or 0X) means hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F. Octal integers can include only the digits 0-7.

JavaScript: Floating number literals

A floating number has the following parts.

A decimal integer.
A decimal point ('.').
A fraction.
An exponent.

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-").

Example of some floating numbers:

8.2935
-14.72
12.4e3
4E-3 [ Equivalent to 4 x 10-3 =>.004 ]

Boolean Literals

The Boolean type has two literal values: true and false.

String Literals

A string literal is zero or more characters enclosed in double (") or single (') quotes. A string must be delimited by quotes of the same type; that is, either both single quotes or double quotes. The following are examples of string literals:

"blah"
"hey"
"123456"
"one line \n another line"

Special Characters

You can use the following special characters in JavaScript string literals:

\b indicates a backspace.
\f indicates a form feed.
\n indicates a new line character.
\r indicates a carriage return.
\t indicates a tab character.

Escaping Characters

You can insert quotes inside of strings by preceding them by a backslash. This is known as escaping the quotes.

For example,
var quote = "He read \"Next Generation \" by C.W. Faraday"
document.write(quote)

The result of this would be

He read " Next Generation " by C.W. Faraday.

READ MORE

How to Declare and Name the Variables in JS

In JavaScript,a variable contains a value, such as "hello" or 5. When you use the variable, you refer to the data it represents.You use variables to store, retrieve, and manipulate values that appear.

Description

Variables (JavaScript)

In JavaScript, a variable contains a value, such as "hello" or 5. When you use the variable, you refer to the data it represents. You use variables to store, retrieve, and manipulate values that appear in your code. Try to give your variables meaningful names to make it easy for other people to understand what your code does.

Declaring Variables

The first time a variable appears in your script is its declaration. The first mention of the variable sets it up in memory, so you can refer to it later in your script. You should declare variables before using them. You do this using the var keyword.

In JavaScript
// A single declaration.
var count;
// Multiple declarations with a single var keyword.
var count, amount, level;
// Variable declaration and initialization in one statement. var count = 0, amount = 100;
If you do not initialize your variable in the var statement, it automatically takes on the value undefined.

Naming the variables:

When choosing a variable name, you must first be sure that you do not use any of the JavaScript reserved names Found Here. Another good practice is choosing variable names that are descriptive of what the variable holds. If you have a variable that holds the size of a shoe, then name it "shoe_size" to make your JavaScript more readable.

Finally, JavaScript variable names may not start with a numeral (0-9). These variable names would be illegal: 7lucky, 99bottlesofbeer, and 3zacharm.

A good rule of thumb is to have your variable names start with a lowercase letter (a-z) and use underscores to separate a name with multiple words (i.e. my_var,strong_man, happy_coder, etc).

READ MORE

General Information about what does AngularJs means

Angular.js is an MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps.

Example: Sample program to show the working of Angularjs

Copy

<! DOCTYPE html>
<html>
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body>
<div ng-app="">
<p>Address: <input type="text" ng-model="name"></p>
Hello <span ng-bind="name" style="color: red";> </span>

</div>
</body>
</html>

E.g. Description

Angularjs:

Angular.js is an MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps. Develop and maintained by Google and by a community of individual developers. It was originally developed in 2009 by Misko Hevery and Adam Abrons. Its latest version is 2.0.

In other words, you can say that the Angularjs adopts an extended form of HTML with new attributes.

AngularJS is built on the belief that declarative programming should be used to create user interfaces and connect software components, while imperative programming is better suited to defining an application's business logic.

By providing a framework for client-side model–view–controller (MVC) and model–view–view model (MVVM) architectures, along with components commonly used in rich Internet applications Angularjs aims to simplify both the development and the testing of mobile applications.

Read More

How to execute documents-window events in jquery

Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resize or scrolls the browser window, etc.

Example: Sample code to execute a function on scroll event

Copy

<!DOCTYPE html>
<html>
<head>
<title> Function on Scroll Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
p{
width: 100%;
padding: 50px 0;
text-align: center;
font: bold 34px sans-serif;
background: purple;
position: fixed;
top: 50px;
display: none;
}
.dummy-content{
height: 600px;
font: 34px sans-serif;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script> 
</head> 
<body>
<p>Scroll Happened!</p>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
</body>
</html>

E.g. Description

Document/Window Events:

Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resize or scrolls the browser window, etc.

 The ready() Method:

The jQuery ready() method specify a function to execute when the DOM is fully loaded.

 The resize() Method:

The jQuery resize() method attach an event handler function to the window element that is executed when the size of the browser window changes.

 The scroll() Method

The jQuery scroll() method attach an event handler function to the window or scrollable frames and elements that are executed whenever the element's scroll position changes.

The following above example will display a message when you scroll the browser window.

Read More

How to Declare and Name the Variables in JS

In JavaScript,a variable contains a value, such as "hello" or 5. When you use the variable, you refer to the data it represents.You use variables to store, retrieve, and manipulate values that appear.

Description

Variables (JavaScript)

In JavaScript, a variable contains a value, such as "hello" or 5. When you use the variable, you refer to the data it represents. You use variables to store, retrieve, and manipulate values that appear in your code. Try to give your variables meaningful names to make it easy for other people to understand what your code does.

Declaring Variables

The first time a variable appears in your script is its declaration. The first mention of the variable sets it up in memory, so you can refer to it later in your script. You should declare variables before using them. You do this using the var keyword.

In JavaScript
// A single declaration.
var count;
// Multiple declarations with a single var keyword.
var count, amount, level;
// Variable declaration and initialization in one statement. var count = 0, amount = 100;
If you do not initialize your variable in the var statement, it automatically takes on the value undefined.

Naming the variables:

When choosing a variable name, you must first be sure that you do not use any of the JavaScript reserved names Found Here. Another good practice is choosing variable names that are descriptive of what the variable holds. If you have a variable that holds the size of a shoe, then name it "shoe_size" to make your JavaScript more readable.

Finally, JavaScript variable names may not start with a numeral (0-9). These variable names would be illegal: 7lucky, 99bottlesofbeer, and 3zacharm.

A good rule of thumb is to have your variable names start with a lowercase letter (a-z) and use underscores to separate a name with multiple words (i.e. my_var,strong_man, happy_coder, etc).

READ MORE

Creating Different alert messages in the bootstrap

Alert boxes are used quite often to stand out the information that requires an immediate attention of the end users such as warning, error or confirmation messages.

Example: Example of Different alert messages

Copy

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap : Alert and its Variations</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.bootstrap-demo{margin:40px;}
</style>
<body>
<h4> Bootstrap : Alert and its Variations: </h4>
<div class="bootstrap-demo">
<div class="alert alert-success"> <!-- Success Alert -->
<strong>Great !</strong> Your Transaction was successfully Completed.
</div>
<div class="alert alert-info"> <!-- Information Alert -->
<strong>Heads up!</strong> Your Password Looks weak, consider changing it.
</div>
<div class="alert alert-warning"> <!-- Warning Alert -->
<strong>Warning!</strong> Something went wrong, wait till the problem get resolved.
</div>
<div class="alert alert-danger"> <!-- Danger Alert -->
<strong>Oh snap!</strong> The process is still in the continuation process,please wait.
</div>
</div>
</body>

E.g. Description

In the above Example specifies, the functioning of different alerts in the class '.alert' like information, success, warning, danger alerts which specifies us information regarding each alerts in alert class by the padding effect.

Creating Alert Messages with Bootstrap

Warning Alerts 

You can create a simple Bootstrap warning alert message box by adding the contextual class .alert-warning to the '.alert' base class

Error or Danger Alerts

Add the class alert-danger to the '.alert' base class to create error or danger alerts.

Success or Confirmation Alerts

Similarly, to create the success or confirmation alert message box add the contextual class.alert-success

Information Alerts

For information alert messages add the class alert-info to the '.alert' base class.

READ MORE

Simple way to understand about Adjacent Sibling Selectors in CSS

The adjacent sibling selectors can be used to select sibling elements. This selector has the syntax like E1 + E2, where E2 is the target of the selector.

Example: Example of CSS Adjacent Sibling Selectors

Copy

<! DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Adjacent Sibling Selectors</title>
<style type="text/css">
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>

E.g. Description

The selector h1 + p in the example above will select the <p> elements only if both the <h1> and <p> elements share the same parent in the document tree and <h1> is immediately precedes the <p> element. That means only those paragraphs that come immediately after each <h1> heading will have the associated style rules.

Read More