SPINOTUTS: 2017

Friday, 10 November 2017

Why the JavaScript can be a case sensitive

In JavaScript, the case sensitivity does not just apply to variable names but also to JavaScript keywords, event handlers, and object properties or methods.

Example: Example to say JavaScript is a case senstive

Copy

<! DOCTYPE html>
<html>
<head>
<title>Javascript Case Sensitivity</title>
</head>
<script type="text/javascript">
var customerName = "Peter write";
var CustomerName = "Charlie S write";
var CUSTOMERNAME = "Tom write";
document.write(customerName + '</br>' + CustomerName+ '</br>' + CUSTOMERNAME);
</script>
<body>
</body>
</html>

E.g. Description

Why Javascript is a case-sensitive:

JavaScript is a case-sensitive language.This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed "while", not "While" or "WHILE". Similarly, online, Online, OnLine, and ONLINE are four distinct variable names.

In JavaScript, the case sensitivity does not just apply to variable names but also to JavaScript keywords, event handlers, and object properties or methods. Keywords in JavaScript are all lowercase, for example, while, for, if, else, and so on. On the other hand, methods (properties) use "camel-back" naming convention ( the first word is in lowercase and each successive first letter of each word is capitalized), for example, toArray(), lastModified(), and so on.

General Information about Method and Property attributes in JS using OOP

Properties are variables contained in the class.In every instance of the object has those properties. Properties are set in the constructor of the class so that they are created on each instance.

Example: Code Snippet for Method and Property Attibute

Copy

//Example for Method attibute
<script type="text/javascript">
var Person = function (firstName) {
this.firstName = firstName;
console.log('Person instantiated');
};
var person1 = new Person('Allen boult');
var person2 = new Person('Chris Jordan');

// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Allen boult".
console.log('person2 is ' + person2.firstName); // logs "person2 is Chris Jordan".
//Example for Property attibute
//Define the class Car
function Car(speed) {
alert("Class CAR is Instantiated");
this.speed = speed;
}
Car.prototype.speed= 'Car Speed';
Car.prototype.setSpeed = function(speed) {
this.speed = speed;
alert("Gradually Car speed changed");
}

var car1 = new Car(40);
var car2 = new Car(70);

car1.setSpeed(130);
car2.setSpeed(140);

</script>

E.g. Description

The Property (Object attribute):

Properties are variables contained in the class. In every instance of the object has those properties. Properties are set in the constructor of the class so that they are created on each instance.

The keyword this refers to the current object, lets you work with properties from within the class. Accessing a property outside of the class is done with the syntax: InstanceName.Property, just like in C++, Java, and several other programming languages.

From the above example mentioned we define the firstNameproperty for the Person class at Instantiation in which we use the variables of person1 and person2.output displayed on the screen as follows

"person1 is Allen Bolt".
"person2 is Chris Jordan".

Methods:

Methods are same as function and they are defined like functions. To define a method, assign a function to a named property of the class's prototype property. Later, you can call the method on the object by the same name as you assigned the function to.

To define methods in a Class, all you have to do is just define an attribute and assign a function to it.From the above example mentioned we defined a method setSpeed() for the class Car. When the speed is changed compare to car1 it alerts the message as "Gradually Car Speed Changed".

How Can String Datatype Executed in Javascript

JavaScript string data type represent textual data surrounding to single / double quotes. Each character is represented as an element that occupies the position of that string.

Example: Simple Code for String Datatype

Copy

<! DOCTYPE html>
<html>
<body>
<p id="string"></p>
<script>
var carName1 = "Etios";
var carName2 = 'RangeRover';
var answer1 = "It's alright";
var answer2 = "My self 'Matt Henry'";
var answer3 = 'He is called "Robert"';
document.getElementById("string").innerHTML =
carName1 + "<br>" +
carName2 + "<br>" +
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>

E.g. Description

Whatever quote you use to represent the string, but you should take care that quote can't repeat in string statement.

Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string.

Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.

Above example describes you to execute the string datatype using the keyword called "var", assigned the function class names as a car with respective to the functioning of that.The getElementById() method returns the element that has the ID attribute with the specified value. We assigned the content in single and double quotes which we wanted to display on the output screen.

What are Different Datatypes in JavaScript

JavaScript is a dynamic typed (or termed as Loosely Typed) scripting language which means that same variable can be assigned data of different types.

Description

Javascript Datatypes:

JavaScript is a dynamic typed (or termed as Loosely Typed) scripting language which means that same variable can be assigned data of different types. JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.

Primary Data Types (Primitive)

String
Number
Boolean

Composite Data Types (reference)

Object
Array
Special Data Types
Null
Undefined

String: A strings of any characters enclosed in quotes is a string primitive.

Number: A number by itself is a number primitive, all numbers in JavaScript are 64-bit floating point numbers.

Boolean: It will store Variables or expressions which are either true or false.

Object: A collections of properties and methods. In Javascript, anything that is not a primitive is an Object.

Arrays: Arrays are regular objects, both objects and arrays can have properties and methods.

Null: It has only one value in JavaScript: null.

Undefined: It treated as a variable that has been declared, but has never had a value assigned to it.

Wednesday, 8 November 2017

What are Different Datatypes in JavaScript

JavaScript is a dynamic typed (or termed as Loosely Typed) scripting language which means that same variable can be assigned data of different types.

Description

Javascript Datatypes:

Primary Data Types (Primitive)

String
Number
Boolean

Composite Data Types (reference)

Object
Array
Special Data Types
Null
Undefined

String: A strings of any characters enclosed in quotes is a string primitive.

Number: A number by itself is a number primitive, all numbers in JavaScript are 64-bit floating point numbers.

Boolean: It will store Variables or expressions which are either true or false.

Object: A collections of properties and methods. In Javascript, anything that is not a primitive is an Object.

Arrays: Arrays are regular objects, both objects and arrays can have properties and methods.

Null: It has only one value in JavaScript: null.

Undefined: It treated as a variable that has been declared, but has never had a value assigned to it.

How Can String Datatype Executed in Javascript

JavaScript string data type represent textual data surrounding to single / double quotes. Each character is represented as an element that occupies the position of that string.

Example: Simple Code for String Datatype

Copy

E.g. Description

Whatever quote you use to represent the string, but you should take care that quote can't repeat in string statement.

Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.

Simple Information about Javascript Comments

In JavaScript comments can be used to explain JavaScript code, and to make it more readable.These javascript comments can also be used to prevent execution, when testing alternative code.

Description

JavaScript supports three different types of comments:

Multiple-line C-style comments. Everything between /* and */ is a comment

For example:
/* This is a comment */
/* C-style comments can span
as many lines as you like,
as shown in this example */

Single-line comments of C++ style. These comments begin with // and continue up to the next line break:

// This is a one-line comment

One-line comments with the HTML comment-opening sequence (< --). Note that the JavaScript interpreter ignores the closing characters of HTML comments (-->).

<! -- This is treated as a one-line JS comment
<! -- It works just like a comment beginning with //
<! -- -->This is also a one-line JS comment
<! -- --> because JS ignores the closing characters
<! -- --> of HTML-style comments

HTML-style comments are not usually found in the middle of JavaScript code.(The // comments are simpler and easier to read.)

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.

How to Declare and Name the Variables in JS

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).

Tuesday, 7 November 2017

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.

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

Description

Variables (JavaScript)

Declaring Variables

Naming the variables:

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"> 
<strong>Great !</strong> Your Transaction was successfully Completed.
</div>
<div class="alert alert-info"> 
<strong>Heads up!</strong> Your Password Looks weak, consider changing it.
</div>
<div class="alert alert-warning"> 
<strong>Warning!</strong> Something went wrong, wait till the problem get resolved.
</div>
<div class="alert alert-danger"> 
<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.

Representing a SVG rectangle in html 5 Canvas

SVG stands for Scalable Vector Graphics.All of the SVG tags that actually write on the image area occur between the <svg> and a closing tag </svg>.

Example: Representing svg rectangle

<! DOCTYPE html>
<html >
<head>
<title>rectangle</title>
</head>
<body>
<svg width="300" height="150">
<rect x = "100" y = "100" width = "400" height = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
</svg>
</body>
</html>

E.g. Description

rect -The rectangle is declared using a rect element.
x, y-These are the co-ordinates of the top left the corner of the rectangle.
Width, Height -The width and height of the shape. In some cases, these can be expressed as percentages (such as "20%").
Fill -The color to use for the interior of the shape. Colors are explained in more detail in a later section.
Stroke-The color for the line actually drawn for the rectangle.
Stroke-width-The thickness of the line used to draw the rectangle.

For MORE