Wednesday, January 31, 2018

String and Regular Expression Object in JavaScript




Hi, I Ankita Saini pursuing JavaScript course from ADMEC Multimedia Institute. String and Regular expression object was the topic of my last JavaScript class. So, I decided to share my knowledge with you as it is an important topic. So, let’s start with an introduction of string object.


String Object:

In JavaScript Strings are mainly used for storing and for manipulating the text like “Nitya Sharma”. String can be any text inside the quotes and the quotes can be single as well as double quotes. Also, we can use quotes inside the string but the condition is that the quotes surrounding the string should not match the quotes inside the string.

A String Object allows us to work with a series of characters and it wraps the JavaScript string using a number of methods.

Properties of String: -
A String Object has these properties:
•    Constructor – A constructor returns a reference to the String function.
•    Length – Length property returns the length of the String.
Ex –
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
   <head>
      <title>JavaScript String Length Property</title>
   </head>
   <body>
      <script type="text/javascript">
         var str = new String( "This is string" );
         document.write("str.length is:" + str.length); 
      </script>
   </body>
</html>
  • Prototype – A prototype property allows us to add properties and methods to an object.
String Methods: -
Here are few String Methods which are mainly used in JavaScript:

Finding a String into a String – Two methods comes under this:
1.    IndexOf()
2.    LastIndexOf()

IndexOf() – This method returns the index of the first occurrence of a particular text in a String:
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<body>
     <h2>JavaScript String Methods</h2>
     <p id="demo"></p>
     <script>
          var str = "Please locate where 'locate' occurs!";
          var pos = str.indexOf("locate");
          document.getElementById("demo").innerHTML = pos;
     </script>
</body>
</html>

Output:
This method returns the position of the first occurrence of a specified text and that is : 7

lastIndexOf() – It is as same as IndexOf, only it starts from the right and moves left:
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
Ex:-
<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript String Methods</h2>
   <p>The lastIndexOf() method returns the position of the last occurrence of a specified text:</p>
   <p id="demo"></p>
   <script>
       var str = "Please locate where 'locate' occurs!";
       var pos = str.lastIndexOf("locate");
       document.getElementById("demo").innerHTML = pos;
   </script>
</body>
</html>

Output:
This method returns the position of the last occurrence of the specified text and that is: 21

search(): - The Search method searches the string for a specified value and returns its position
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript String Methods</h2>
   <p>The search() method returns the position of the first occurrence of a specified text in a string:</p>
   <p id="demo"></p>
   <script>
       var str = "Please locate where 'locate' occurs!";
       var pos = str.search("locate");
       document.getElementById("demo").innerHTML = pos;
   </script>
</body>
</html>

Output:
This method returns the position of the first occurrence of a specified text in the string and that is: 7

Extracting String Methods:
We use three methods for extracting a part of string:
1.    Slice Method
2.    substring Method
3.    substr Method

slice()– This method extracts a part of String and it returns a extracted part in a new string. This method uses two parameters the starting position and the ending position.
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript String Methods</h2>
   <p>The slice() method extract a part of a string and returns the extracted parts in a new string:</p>
   <p id="demo"></p>
   <script>
       var str = "Apple, Banana, Kiwi";
       var res = str.slice(7,13);
       document.getElementById("demo").innerHTML = res;
   </script>
</body>
</html>

Output:
This method extracts a part of the string and returns the extracted part of the string as a new string and that is “Banana”

substring() - This method is as same as the Slice Method, the only difference is that it does not accept negative indexes.
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript String Methods</h2>
   <p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>
   <p id="demo"></p>
   <script>
       var str = "Apple, Banana, Kiwi";
       var res = str.substring(7,13);
       document.getElementById("demo").innerHTML = res;
   </script>
</body>
</html>

Output:
This method extracts a part of the string and returns the extracted part in a new string and that is: “Banana”

replace(): - This method replaces the specified value with another value in a string:
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript String Methods</h2>
   <p>Replace "Microsoft" with "Google" in the paragraph below:</p>
   <button onclick="myFunction()">Plz Click</button>
   <p id="demo">Please visit Microsoft!</p>
 
   <script>
       function myFunction() {
          var str = document.getElementById("demo").innerHTML;
          var txt = str.replace("Microsoft","Google");
          document.getElementById("demo").innerHTML = txt;
        }
   </script>
</body>
</html>

Output:
In this output on clicking the button Microsoft will be replaced with Google.

These Methods does not end up here, rather there are even more methods to manipulate the string. We are just covering most important and useful one.


Regular Expression: -

When we search any data in the text, we can use search pattern to describe what we are searching for. It is a sequence of characters that forms a search pattern. It can be a single character or more. Also, it can be used for performing all types of text search and text replace operations.

Many a times regular expressions are used with String Methods and are search() and replace().

Regular Expression Modifiers: - Modifiers can be used to perform case-intensive matching.
i = for performing case-intensive matching.
g = for performing a global matching.
m = for performing multiline matching.

Regular Expression Patterns: - Brackets: These are used to find a range of characters
[abc]    Find any of the characters between the brackets
[0-9]    Find any of the digits between the brackets
(x|y)    Find any of the alternatives separated with |

Metacharacters: These characters are special meaning characters
\d    Find a digit
\s    Find a whitespace character
\b    Find a match at the beginning or at the end of a word
\uxxxx    Find the Unicode character specified by the hexadecimal number xxxx

Quantifiers: Defines the Quantities
n+    Matches any string that contains at least one n
n*    Matches any string that contains zero or more occurrences of n
n?    Matches any string that contains zero or one occurrences of n

Syntax: -
var name = /pattern/modifiers;


Methods in Regular Expression: -

test() Method:-
test() method is a regular expression method. This method searches a string for a pattern and returns True or False, it depends on the result.
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
  <p>Search for an "e" in the next paragraph:</p>
  <p id="p01">The best things in life are free! </p>
  <button onclick="myFunction()">Click On</button>
  <p id="demo"></p>
  <script>
  function myFunction() {
     var text = document.getElementById("p01").innerHTML;
     document.getElementById("demo").innerHTML = /e/.test(text);
 }
  </script>
</body>
</html>

Output:
In this output on clicking the button we get this output “true”.

exec() Method:-
This Method searches a string for a specified pattern, and returns the text found. If no match is found it returns the null.
Ex:-
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
  <p>Search for an "e" in the next paragraph:</p>
  <p id="p01">The best things in life are free!</p>
  <button onclick="myFunction()">Click On</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      text = document.getElementById("p01").innerHTML;
      document.getElementById("demo").innerHTML = /e/.exec(text);
 }
  </script>
</body>
</html> 

Output:
In this output on clicking the button we will get the following answer ‘e’.

After going through the different methods of String Object and Regular Expression we can say these all these terms helps a lot in the programming a high-level UI and being a beginner, it is quite necessary to clear all the aspects carefully and then implement them in the script.

I hope this blog will be advantageous for you while learning JavaScript from any Web Design Training Institute.

Thursday, January 25, 2018

Types of Functions in JavaScript- A Very Easy Explanation

Web designing or UI Development is one of the best industry to join if you love challenges and want to lead a happy life. This industry is one of the top highly paying industry for youth. JavaScript is the key language either you are a web designer or UI developer. So, knowledge of JavaScript matters when you want to make your career here.

A function is a group of reusable code which can be called anywhere in your program. It eliminates the need of writing the same code repeatedly. It helps in writing modular codes. Mainly JavaScript has 2 types of functions:
  1. Built-in functions:
Already defined in the JavaScript language, we invoke them again and again.
Examples: window.alert( ), document.write( ), parseInt( ) etc.
  1. User-defined functions:
Custom functions defined by user.
Below, we will see how to define our own user-defined functions. 
1. Function Definition
Before we use a function, we need to define it.
Syntax:
function functioName(parameter-list)
{
  statements
 }

To define a function in JavaScript, use the function keyword, followed by a unique function name, a list of parameters (that can be empty), and a statement block surrounded by curly braces.
Example:
function sayHi()  
{  
      Var x=10;
            alert(x);  
}

This example above does not have any parameters.

2. Calling a Function
To call a function specify the function name with parenthesis in front of it in the body section. Similarly, a function can be called inside another user defined function too.

Syntax:

<script type="text/javascript">
function functionName( )  
{
 ….code to execute…..
 } </script>

<script type="text/javascript"> functionName(); <script>

Example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">  
function helloAlert( )
 {
alert("Hello World!");
}  
</script>
</head>
 <body>  
<script type="text/javascript">  
helloAlert();
<script>
</body> </html>

In the above example we have defined a function “helloAlert()”, this function is later called in the body of the code and outputs a pop up that says “Hello world”;
3. Function with Parameters/Arguments
When you call a function, you can pass along some values to it, these values are called parameters or arguments. Parameters are the variables we specify when we define the function. When the function is later called somewhere else in the code, arguments are the values passed as parameters. We can specify multiple parameters, separated by commas (,). The parameters then serve as variables that can be used inside the function.
Syntax:

function functionName( parameter1 , parameter2 . . . parameter n)
{ some code to be executed }

Example:

<script>
function Hello( user )
{ alert( "Hello " + user +”!”); }
</script> <script> welcome( "Rav" ); </script>


In this example, we define a function named Hello( ) that takes in one parameter, named user. When the function is called, we pass the argument "Rav”. The function above when invoked will display the message box "Hello Rav!" on the webpage.
4. Functions with a return Value
Sometimes you want your function to return a value back to where the call was made. This can be done by using return statement. When using return statement, the function returns the specified value. Return is an optional statement.
Syntax:
function returningFunc(parameter) { Result= …. Execute code… return result; }

Example:
<html>  
             <head>
<script type="text/javascript">
function concatStrings(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatStrings (‘raveen’, ‘anand’);
document.write(result );
}
</script>
</head>
Try above example we defined a function that takes two parameters and concatenates them before returning the resultant in the calling program.
5. Nested Functions
JavaScript allows function definitions to be nested within other functions as well. Still there is a restriction that function definitions may not appear within loops or conditionals. These restrictions on function definitions apply only to function declarations with the function statement.
  1. Scope of the nested function is limited to its parent function
  2. The inner functions can access its parent variables but not otherwise.
Syntax:
 
function outerFunction()
      { var a, d, e;
 function innerFunction()
   {  
var f;  
}  
innerFunction ();
 }  
OuterFunction();

Example:

function hypotenuse(a, b) { function square(x)
{
return x*x;
} return Math.sqrt(square(a) + square(b)); } hypotenuse(1,2); In the above example we are calculating the hypotenuse of 2 numbers. Formula for hypotenuse is , here we calculate the square of the numbers in a nested function “square” which tales a number as input and returns its square.
6. Anonymous Functions
anonymous function is a function that is declared without any name. These functions can be assigned to variables when they are created, which gives the same capabilities as using a name within the function head. One common use for anonymous functions is as arguments to other functions.

Example:
var anon = function() { alert('I am anonymous'); } anon();

Differences between creating a named function and an anonymous function :
An anonymous function assigned to a variable only exists and can only be called after the program executes the assignment.

Named functions can be accessed anywhere in a program.

Can change the value of a variable and
assign a different function to it at any point
Not flexible-fixed name
Self-executing anonymous functions or IIFE
Another use for anonymous functions is as self-executing functions. A self-executing anonymous function is a function that executes as soon as it’s created. To turn a normal anonymous function into a self-executing function, you wrap the anonymous function in parentheses and add a set of parentheses and a semicolon after it.

The benefit of using self-executing anonymous functions is that the variables you create inside of them are destroyed when the function exits. In this way, you can avoid conflicts between variable names, and you avoid holding variables in memory after they’re no longer needed.
var myVariable = "I live outside the function."; (function() {
var myVariable = "I live in this anonymous function"; document.write(myVariable);
})();
document.write(myVariable);

In the example above, we have a variable myVariable declared globally. We have an anonymous self-executing function using the same variable name. The output of this is
I live in this anonymous function. I live outside the function”
7. Functions as Closures in JavaScript
A closure is the local variable for a function, kept alive after the function has returned. It is a function having access to the parent scope, even after the parent function has closed. An inner function is defined within an outer function. When the outer function returns a reference to the inner function, the returned reference can still access the local data from the outer function.
function greetVisitor(phrase) {  
var welcome = phrase + "Folks!"; // Local variable
 var sayWelcome = function() {
  alert(welcome);
}
return sayWelcome;
} var personalGreeting = greetVisitor('Hi');
 personalGreeting(); // alerts "Hi Folks!"
 
Conclusion is that functions in JavaScript are must to know as they are the building blocks in it for a web designer. There are many types of functions, you will understand their importance as you will use them in your JavaScript courses. You can learn it separately from any training center or you can join a complete course in web designing from a reputed web designing institute.

Promising WordPress and Drupal Courses to Learn in 2018


If you are a beginner and trying to set up your career in web development industry or just want to learn to create rich featured dynamic websites in just few weeks, then this blog is for you. Our institute is an amazing platform, where you learn about high level concepts of WordPress and Drupal from our experts. Both are the most popular CMS (Content Management System) of the world. 
 
CMSs are one of the fastest growing platforms to develop websites and applications in the world. These CMS are the simplified graphic interfaces of PHP. They offer tremendous features to web designers and PHP programmers. Most of the web developers use these for their clients to provide web developing services for good earning. One can set a successful career with the good knowledge CMS. The right way to learning these CMS, is to choose best training institute which imparts training according to IT industry 
standard.

Let Me Introduce You to WordPress and Drupal

WordPress is very easy to utilize and its simplicity is the reason which makes it most popular CMS in the world. It's an open source which is completely free to all, used by every web developer now a days. It has built to make everything from simple website, blogs to complex one even application can be build using WordPress. Without any good knowledge of programming languages one can create a huge websites, blogs and applications.


Features of Word Press
  • Simplicity
  • Publish with Ease
  • Search Engine Friendly
  • Flexibility
  • Easy Installation
  • Publishing Tools
  • User Management
  • Freedom
  • Large Community
  • Own Your Data
  • Extend with Plugins

Drupal is best the platform where you can build amazing websites without any single line of code. It is a content management  framework which has been written in PHP. It is completely free and  open source. Everyone can use it. It's mega modules like views make it one of the popular and trust able CMS in the world.

Features of Drupal

  • A variety of e-commerce module and functionality
  • Easily create a website or blog in a small duration
  • Featuring the multi-language capability
  • Provide the thousands of plug-ins to make website more 
    dynamic
  • Various free and paid themes to be used
  • Search engines friendly
  • Mobile optimization
  • Easy to maintain and deploy on server etc.
  • Easy Authoring
  • Best Support For Accessibility

Promising WordPress and Drupal Courses  

Web Development Institute is imparting highly advanced training of WordPress and Drupal. Courses offered by our institute are well designed by experts who have 10+ years experience in IT industry. 

Offered courses are:

WordPress Standard Course
It is a short-term certificate course which is of 1 month. This course has specially planned for the non-programmers who have not any programming background. In this course you will learn the 
followings concepts.
  • Installation and Configuration
  • Creating Content Using Posts and Pages
  • Managing Themes
  • Working with Plug-ins
  • Exploring Widgets
  • Custom Content Types
  • Custom Fields
  • Making SEO Friendly
  • Uploading on Live Server

Drupal Standard Course
This is a short term course of 1 month duration. With this course students will be able to perform following acts during their classes.
  • Installing and Setting Up
  • Site Building
  • Administration- Configuration, Modules, and Reporting
  • Administration- Blocks, Menus, and Themes
  • Administration- Blocks, Menus, and Themes
  • CMS and User Management
  • Taxonomy
  • On Page SEO Implementation
  • Moving Your Website from Localhost to Server

Master Courses   

These are the advanced master courses for the programmers, which will be helpful for students and professionals who want to get an in-depth and advanced insight of these CMS. Here we will explorethe development of themes and extensions or plugins. So if you have good amount of knowledge of HTML5, CSS3, JavaScript, Ajax, PHP, and MySQL then you are a complete eligible person forour advanced WordPress and Drupal Courses.


WordPress Master
Duration of this course is 2 months. It is for programmers and web developers who have knowledge of programming languages and web development. This course will be covering cover below
 mentioned content in WordPress training.
  • Theme Development
  • The Loop
  • Creating Widget Area
  • Template
  • Plugin and Widget Development
Drupal Master
This is short term certificate course of 2 months which imparts highly advanced training in Drupal. These courses are specially for the professional web developers and programmers who want to make more dynamic, semantic, mobile friendly websites, blogs and application with real world features. Aren’t they amazing! Sounds good. Lets have a look at course content will be covering in your 

Drupal classes.
  • Internationalization
  • Exploring Themes (Concepts, Switching)
  • Contributed Modules
  • Custom Modules
  • Development Hooks
  • Advanced Installations
  • Pref light Checklist

Career Options 
· WordPress Developer
· WordPress Theme Developer
· WordPress Programmer
· Extension Developer
· Widget Developer
· Drupal Developer
· Advanced Drupal Expert
· Drupal Architect

I really hope that my efforts will be beneficial for you and this blog will help you to find out the best course. This is the right time for you if you want to make your career as Drupal and WordPress developer. You will get a platform for working as a professional in MNC (multi-national company) companies after completing the course from Web Development Institute.


Featured Post

ADMEC Multimedia Institute Scholarship Program

The ADMEC Multimedia Institute scholarship program aims to select and trained talented non working female, married woman and non married m...