Sunday, May 14, 2017

Learn JavaScript - String and its methods - 16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String and it's methods - JS</title>
</head>
<body>
<h3>String and it's methods</h3>
<h4>Please view browser console.</h4>
<span id="time_now"></span>

<script type="text/javascript">
// Simple Strings
var name = 'Ramasamy K'; // Simple string.
var name_2 = 'தமிழ்'; // Simple string.
var subject = "Ramasamy's Tutorial"; // String with single quote in double quotes. Reverse also will work.
var subject_2 = 'Ramasamy\'s Tutorial 2'; // String with single quote in single quotes. Double quote also possible in same manner.
var info = 'I am RamasamyK.\nAnd I am from India\t-\tIN.'; // String with single quote in single quotes. Double quote also possible in same manner.
console.log(name);
console.log(name_2);
console.log(subject);
console.log(subject_2);
console.log(info);

// String Properties.

// 1. Length
console.log('Name length: '+name.length);

// 2. Prototype
console.log('Name prototype: '+name.prototype); // Will output as undefined.

// String Functions.

// 1. charAt
// Will return the character at the given position.
console.log('Char at 4: '+name.charAt(4)); // Start from 0.
console.log('Char at last: '+name.charAt(name.length-1)); // Getting last character of a string.
console.log('Char location not given: '+name.charAt()); // Default parameter value is 0.
console.log('Char at 999: '+name.charAt(999)); // Return empty if not found.

// 2. charCodeAt
// Will return the character code at the given position.
console.log('Char code at 4: '+name.charCodeAt(4)); // Start from 0.
console.log('Char code at last: '+name.charCodeAt(name.length-1)); // Getting last character's code of a string.
console.log('Char location not given: '+name.charCodeAt()); // Default parameter value is 0.
console.log('Char code at 999: '+name.charCodeAt(999)); // Return NaN if not found.

// 3. concat
// Will concatenate a string with given string(s).
// DON'T USE "concat" or "join". Always use "+" operator.
// Because "+" operator was more and more faster than other two.
var age = ' - 28';
console.log('Single concatenate: ' + name.concat(age)); // Single concatenate.
console.log('Multi concatenate: ' + name.concat(age, ' single.')); // Multi concatenate.
console.log('Single concatenate using array: ' + name.concat([age, ' single.'])); // Multi concatenate using array.
console.log('Concatenate using +: ' + name+age+' single.'); // ALWAYS RECOMMENDED.

// 4. endsWith
// Check a string ends with given string. Return true or false.
// Case sensitive.
// Second parameter denote length of the string to be consider. Default if string full length.
console.log('Simple endWith: '+name.endsWith('my K')); // true.
console.log('endWith case sensitive proof: '+name.endsWith('my k')); // false. Since endWith is case sensitive.
console.log('endWith with length: '+name.endsWith('ma', 4)); // true. Here length start from 1.

// 5. fromCharCode
// Will return the string of given decimal code.
console.log('Simple fromCharCode: '+String.fromCharCode(65)); // A
console.log('fromCharCode with multiple input: '+String.fromCharCode(82,65,77,65,83,65,77,89,32,75)); // RAMASAMY K

// 6. includes
// Check whether given string is found on a string.
console.log('Simple includes: '+name.includes('Ram')); // true.
console.log('Includes case sensitive proof: '+name.includes('Samy')); // false. Case sensitive.
console.log('Includes with starting position: '+name.includes('Ram', 1)); // false. Start from length start with 0.

// 7. indexOf
// Search a string on a string and return its first occurred location.
// Location start from 0. Return -1 if not found.
// Case sensitive.
// Second optional parameter will specify the search start from. Starting from 0.
console.log('Simple indexOf: '+ name.indexOf('samy')); // 4. Start from 0.
console.log('indexOf when not found: '+ name.indexOf('Samy')); // -1. Not found. Since case sensitive.
console.log('indexOf with start point: '+name.indexOf('a', 1)); // 1. Since search will skip first one character only. And will start from second char.
console.log('indexOf with start point: '+name.indexOf('a', 2)); // 3. Since search will skip first two characters. And will start from 'm'.

// 8. lastIndexOf
// Search a string on a string and return its last occurred location.
// Location start from 0. Return -1 if not found.
// Case sensitive.
// Second optional parameter will specify the search start from. Searching backwards.
console.log('Simple lastIndexOf: '+name.lastIndexOf('m')); // 6. Start from 0.
console.log('lastIndexOf with start point: '+name.lastIndexOf('m', 4)); // 2. Start from 's' and in reverse direction. That is search in [Ramas]amy K.
console.log('lastIndexOf with start point and external match: '+name.lastIndexOf('masamy K', 4)); // 2. Will also return same result. Start from 's' and in reverse direction. That is search in [Ramas]amy K.

// 9. localeCompare
// Compare two string an will return -1, 0 or 1 respectively is the main string coming in previous, on or after on sorting order.
var s1 = 'ab';
var s2 = 'cd';
console.log('Coming befor: '+s1.localeCompare(s2)); // -1. Since 'ab' is coming before 'cd'.
console.log('Coming on: '+s2.localeCompare(s2)); // 0. Since 'cd' is in same order of 'cd'.
console.log('Coming after: '+s2.localeCompare(s1)); // 1. Since 'cd' is coming after 'ab'.

// 10. match
// Search for a string using regular expression and returns it as it appears. If multiple appears and used g, returns in comma separated.
var str = 'The rain in SPAIN stays mainly in the plain';
console.log('Simple match: '+str.match(/ain/i)); // ain. Return first appears alone.
console.log('Multiple match: '+str.match(/ain/g)); // ain,ain,ain. Return all appears.
console.log('Case insensitive match: '+str.match(/ain/gi)); // ain,AIN,ain,ain. Do case insensitive search and return all appears.

// 11. repeat
// Repeat and return the string in no. of times which is given.
// Parameter is mandatory.
var str = 'Hi.. ';
console.log('Repeat: '+str.repeat(3)); // Hi.. Hi.. Hi..
console.log('Single Repeat: '+str.repeat(1)); // Hi..

// 12. replace
// Replace a specified string on a string.
// Case sensitive.
// Can use regular expression on string selection.
// By default the first occurrence only will be replaced. To replace all use global replace by regular expression.
var str1 = 'I know English and english is my second language.';
console.log('Simple replace: '+str1.replace('English', 'Spanish')); // I know Spanish and english is my second language.
console.log('Case insensitive replace using reg. exp.: '+str1.replace(/english/i, 'Spanish')); // I know Spanish and english is my second language.
console.log('Global replace using reg. exp.: '+str1.replace(/English/ig, 'Spanish')); // I know Spanish and Spanish is my second language.

// 13. search
// Search for a string or regular expression and return the postion of first occurrence.
// Case sensitive.
// -1 denote string not found.
var str = "Mr. Blue has a blue house";
console.log('Simple search: '+str.search('blue')); // 15. Case sensitive.
console.log('Simple search: '+str.search(/blue/i)); // 4. Return first occurrence location.

// 14. slice
// Extract a part from a string.
// param 1: 0 based index, from where have to start slice. Can also be negative. When negative its start from -1 not 0.
// param 2: 0 based index, BEFORE which have to stop slicing. Can also be negative. Optional.
// param 1 always need to be greater than param 2.
var str = 'Hello Javascript';
console.log('Simple slice: '+str.slice(2,7)); // llo J
console.log('Single argument: '+str.slice(6)); // Javascript
console.log('With negative end: '+str.slice(1,-2)); // ello Javascri
console.log('With negative start and end: '+str.slice(-4,-1)); // rip
console.log('Single negative argument: '+str.slice(-4)); // ript

// 15. split
// Convert a string into an array.
// param 1: separator; can also be an regular expression. empty will split by char by char.
// param 2: limit. Optional.
var str1 = "He is an artist.";
console.log('Simple split: '+str1.split(' ')); // ['He','is','an','artist.']
console.log('Split with limit: '+str1.split(' ', 3)); // ['He','is','an']
console.log('Split with no sparator: '+str1.split('', 5)); // ['H','e',' ','i','s']
console.log('String reverse using split: '+str1.split('').reverse().join('')); // .tsitra na si eH

// 16. startsWith
// Check whether a string start with some specific string.
// param 1: string which we need to search. case sensitive.
// param 2: optional. Begin search on. start with zero.
var str = 'She is good.';
console.log('Simple startswith: '+str.startsWith('She')); // true
console.log('Simple startswith: '+str.startsWith('He')); // false
console.log('startswith with an index point: '+str.startsWith('good', 7)); // true

// 17. substr
// Extract a part from a string.
// param 1: Where to start. Start from zero. Can also be negative.
// param 2: no.of characters to select. Cannot be negative or zero. Optional.
var str = 'He is fine.';
console.log('Simple substr: '+str.substr(3,2)); // is
console.log('substr with out limit: '+str.substr(3)); // is fine.
console.log('substr with negative start: '+str.substr(-5,4)); // fine

// 18. substring
// Extract a part from a string.
// param 1: 0 based index, from where to start. Negative value will treated as zero.
// param 2: 0 based index, BEFORE which have to stop(like slice). Negative value will treated as zero.
// Small value will treated a start point and greater will treated as end point.

// 19. toLocaleLowerCase
// Convert a string to lower case.
// The conversation is based on local browser settings conversion mechanism. Because some languages has different type of conversions(Ex: Turkish).
var str = 'I am a Legend.';
console.log('toLocaleLowerCase: '+str.toLocaleLowerCase());

// 20. toLocaleUpperCase
// Convert a string to upper case.
// The conversation is based on local browser settings conversion mechanism. Because some languages has different type of conversions(Ex: Turkish).
var str = 'I am a Legend.';
console.log('Upper: '+str.toLocaleUpperCase());

// 21. toLowerCase
// Convert a string to lower case.
var str = 'I am a Legend.';
console.log('toLowerCase: '+str.toLowerCase());

// 22. toString
// Returns a string representing the specified object. Same like "valueOf" function.
var str = 'Hi.. JS,';
console.log('toString: '+str.toString());

// 23. toUpperCase
// Convert a string to upper case.
var str = 'I am a Legend.';
console.log('toUpperCase: '+str.toUpperCase());

// 24. trim
// Trim the string.
var str = ' I am a Legend. ';
console.log('trim: '+str.trim());

// 25. trimLeft
// Trim the string on left side alone.
var str = ' I am a Legend. ';
console.log('trimLeft: '+str.trimLeft());

// 26. trimRight
// Trim the string on right side alone.
var str = '  I am a Legend.  ';
console.log('trimRight: '+str.trimRight());

// 27. valueOf
// returns the primitive value of a String object.
var str = 'Hi.. JS,';
console.log('valueOf: '+str.valueOf());
</script>

</body>
</html>

Thursday, May 11, 2017

Learn Javascript - Call, Apply and Bind - 15

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Call, Apply and Bind - JS</title>
</head>
<body>
<h3>Call, Apply and Bind</h3>
<h4>Please view browser console.</h4>
<span id="time_now"></span>

<script type="text/javascript">
function sum(name, dep)
{
var c = this.a + this.b;
console.log(name + ' : ' + dep + ' : ' + c);
}
var obj = {a:55, b:67};
sum.call(obj, 'Ramasamy K', 'CSE');
sum.apply(obj, ['Kali K', 'EEE']);
var raj = sum.bind(obj, 'Raj S', 'ECE');
raj();
</script>

</body>
</html>

Monday, April 10, 2017

Priority on CSS styles

When we have multiple styles(ex: color) for a single element the style will apply in following manner or order.

Thing 1:
The first thing is style will apply in what order they have rendered in browser. The last one will be applied.

There are three ways to define styles there, 1. External Style, 2. Internal Style 3. Inline Style

One thing you have to understand clearly, always inline style will be loaded at last(Even you have loaded style sheets at the end of page). So inline style always having the highest priority than all two others.

With respect to other two styles the priority will be decide as per the order they have loaded.

Ex:
<head>
.my_color{
color: red;
}
<link rel="stylesheet" type="text/css" href="external_style.css" /> /* Imagine this will having the style color as "blue" for the same class.
</head>
In above example blue color will be applied for element which having the class my_color, since external style will be loaded after the internal style.
If we have loaded external style before the internal style, the color red will be applied.

In case if you have multiple styles for element in same level style(Which may inline style or external style. Cannot be inline style). What will happen?
Fid it on, below section "Thing 2".

Thing 2:
The style will be applied with respect to the selector priority, if browser meet multiple styles for a same element in same level of style sheet. The below are the priority levels of selectors.

Selector Priority Levels:
1. ID
2. Class
3. Tag name

Friday, July 8, 2016

Different between UI and UX

UI: This is an acronym for ‘User Interface’. It deals with how a website or an application looks. It covers the entire look of the application including the colors, fonts, icons and images used. The user interface is entirely about the visual and interface design.

UX: It deals with how easily a user can, well, use the app and how easily the app would serve to satisfy his requirements.
Consider this example: Say, you’re making a mobile app. When designing the interface (UI) of your app, you should not only consider how great your app will look, but also how easy it will be to use, i.e. how great the User Experience (UX) will be.


Learn JavaScript - String and its methods - 16

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>String and it's methods - JS&l...