The days of pure HTML, CSS and Javascript are over. Now we must learn CSS pre-processors and frameworks, multiple Javascript libraries (usually based on jQuery) HTML templating engines based in Javascript, task runners such as grunt and gulp, etc. With all of these tools available, and becoming an ‘industry standard’, it’s easy to misuse them and make a real mess of your website coding.

The reality is, you don’t need any add-on technologies. You can always create websites with highly organised, easily maintainable code, even when using the base technologies.

Modern web development often involves over-engineering. By this, I mean that too much time is spent on setting things up, writing and configuring tools and finding ‘smart’ ways of doing things instead of just doing what needs to be done in a logical manner.

CSS Preprocessors


We all know the rule that selectors shouldn’t be nested more than 4 levels deep. However, I disagree with this, as I find that nesting selectors at all will make the code less readable. It’s easy to scan code in a vertical manner, but when my eyes need to also scan horizontally, it makes scanning much less efficient.

If I am looking through a style sheet and I find a class nested a few levels deep, I need to know the parent selectors to understand how the class is being applied. I need to scroll up to see the parent selector, then scroll up again to see its parent selector, then again. It’s not immediately obvious or straight-forward how it will be applied, I need to scan entire blocks of code to understand one line. It’s not a problem if the blocks are small, but there are usually quite a few child selectors under the parent block.

What I often see is a top-level class being used like a namespace. While it may seem neat to organise code this way, it takes more time and effort to understand it. It doesn’t add anything to the code organisation that you couldn’t do with a few line-breaks or comments. The only benefit is reduction of selector repetition. If organising CSS like programming code was that important, we would have adopted JSS instead of CSS.

I prefer to only use nesting for states and, sometimes, pseudo elements.

Media Queries

Another issue I sometimes come across is the use of multiple repeated media queries. Should each selector have its own media query? What about when they’re nested? It can become a bit messy and hard to see the big picture if so much functionality is separated into multiple super small media queries.

I prefer to use a set of media queries per ‘module’ or ‘feature’, so I don’t have a million media queries and yet I also don’t have one big monolithic set of media queries at the end of the file.

Useless complexity

One of the worst examples of investing time into making something that is often unnecessary, useless or even detrimental, would be the idea of wrapping media queries in pre-processor functions or mixins. I can understand the desire to use this when you have a lot of very complex media queries, used often. However, in most cases it’s just not necessary. You will see a line of code like this:

@include respond-to($medium) { }

What exactly does this do? It’s media query related, but you will need to go looking for the definition of $medium to know if it is just a pixel value, a query or a key relating to a keymap. Either way, you need to find the query text, the associated pixel values, how to use this function and what options are already available.

You will need to read and understand the definition of the function to see how it implements these variables. Does it use min-width or max-width as a default? Does it have default functionality?

What benefits does this function hold over a set of variables? You don’t need to type the word ‘@media’ anymore, instead you need to write ‘respond-to’. This is replacing a universally understood piece of fundamental CSS with a lesser-known custom implementation.

It’s always interesting to see what you can do with the tools available and how far you can go. However, we are replacing a straight forward set of readable statements with a slightly more cryptic line of code that needs to be investigated and understood by a programmer.

The benefit of this technique relies largely on how complex your media queries are, and how often your media queries are used. For sites that use simple media queries, storing the pixel value in a variable will be just as effective. For slightly more complex queries, you can store the entire query in a variable.

The creator of this technique warns his readers about finding a balance and picking the right tool for the job. I’ve seen this technique used in a way that is detrimental to the project many times.

Before using this technique, you need to consider if it’s the right thing to use for your project. Consider your development environment, project size, tooling and style of coding. Don’t just use this because it’s ‘good / standard practice’. Use it only if it suits your project.



When you want to read a book, you go to the library and borrow one. However, common practice with Javascript is to borrow the whole library just to read one book. Often, libraries like Bootstrap are included and used just for one feature. One feature that you could write in three lines of code. It’s important to justify the inclusion of an entire library before you do so.

Insane code

A previous company that I used to work for, had outsourced a project to an overseas company. One feature of the website was a little call to action button that would stick to the top right of the screen when the user scrolled past a certain point.

The developers had implemented this by using a collision detection system about a page long. It detected when any part of the element collided with the banner above it, so they knew when to remove the fixed position if the user was scrolling upwards. It was probably ripped from some game engine. I’m surprised they didn’t go one further and program some sort of self-learning AI to achieve the same task.

How many lines of code would it take you to implement that functionality?

Lack of programming knowledge

If (I == true)
     I = false
 } else if (I == false) {
     I = true

Actual code. From a teacher in a web development course. This was back in 2008. It’s memorable, but not in a good way.

This is not as common nowadays as most people know about the ‘not’ operator, but I have seen people implement code to replicate the functionality of the ‘modulus’ operator.

It’s important to know the features of the languages you use.


There are many motivations to complicate your code. To improve maintainability, improve functionality, boredom, being a smartypants, to annoy people for fun etc. However, keep in mind that in a year’s time, you may be the one working with your own code, cursing the developer who made this mess, only to find out that it was you who screwed you over. Yes, I’ve been in that situation, which is how I know. It’s also why I do things simpler and, for the lack of a better term, slightly more old-school than most people when possible.

“Hello ReactJS” – Let’s Start with React JS

Screen Shot 2017-02-15 at 9.33.43 PM

We already know ReactJS is for frontend development. React JS is not a framework, it is just a Library. We use ReactJC for creating User Interfaces (UI). It renders your UI and responds to the events. In simple language it is just the ‘V’ of MVC.

Here are some differences between Angular and React JS:

  • Angular is actually a framework whereas React is a library.
  • Choosing between Angular and React is like choosing between buying an off-the-shelf computer and building your own with off-the-shelf parts.
  • Angular means conforming to its structure, its view on how your application should be architected and very often its choice of internal components such as routing, http services etc. With React you’re very much free to choose your own internal components and your own application architecture. This is why there are so many ‘starter kits’ that bundle react with a bunch of other off the shelf components and frameworks such as Flux, Reflux, Redux etc.
  • Depending on your project this is a blessing or a curse, with Angular you know that you can get off the ground quickly and other Angular developers are going to be able to join your team and contribute very quickly. With React you might have to spend time bringing new team members up to speed on whatever architecture decisions the project started with, and the choice of components is a minefield of immature components or incompatibilities.

So after reading this you can decide, which one you should chose?

In my experiences it also have many other benefits like:

  1. Modularity and Reusability of Codebase
  2. Productivity
  3. SEO
  4. Performance
  5. debugging

It helps in above things and Increase your productivity.

Before starting with React you should have knowledge of basic things:

  • HTML
  • Basic Javascript
  • CSS
  • How to write CODE
  • Webpack

And Your machine should have:

  • Node JS
  • Any Programming tool – IDE, Sublime –

Here we build components not templates, So same components can be used in many other templates using simple logics. Data can come from anywhere. One more thing you shold know before starting – JSX,  So JSX allows you to write JS & XML together. Re-render of components takes place:

  • Every component has “state” and “props”.
  • Acts as an “Immutable DOM”.
  • Re-render the whole app once the state changes.

Let’s write “Hello ReactJS”.


  1. Open terminal.
  2. Create a folder: mkdir reactJSScreen Shot 2017-02-15 at 7.24.34 PM
  3.  Go inside the folder: Screen Shot 2017-02-15 at 7.24.50 PM
  4. Now install npm, here I’m assuming your system already has, latest version of NodeJS: Use command- npm init: Screen Shot 2017-02-15 at 7.33.39 PMSo in above command, when you will write- npm init for node package manager installing, it will ask few questions- like Name , description, Author and licence. Fill these fields and other fields may leave vacant.
  5. Now you should install all the dependencies. First we focus on production dependencies and then deployment dependencies, which will be useful in Deployment time. Use Command:npm install react react-dom –saveThese are production dependencies. It will take some time. –save is telling us- this is for production dependencies.Screen Shot 2017-02-15 at 8.28.10 PM


  6. Now we’ll go for development dependencies. Write command: npm install webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2 –save
    1. We need some server side functionality for this because this is not a simple HTML file which can be opened by double click on browser, so for this we need to do something on server side.
    2. After running above command for deployment dependencies, we’ll some additional dependencies here: Screen Shot 2017-02-15 at 8.33.59 PM
  7. Now created a simple src folder, src/App – App folder then src/index.html ! Note- here we are creating index.html. just for our fist App. In react no HTML. We use JSX only.in index.html file make HTML5 skeltan. And create a file named – config.jsHere I am not telling abour webpack, Just sharinf the webpack file which have all the dependencies: Screen Shot 2017-02-15 at 8.53.46 PM
  8.  So after creating webpack, Created a index.js file inside the App folder and this will so as result. For now I am just priting :console.log (“hello ReactJS”);
  9. Then I have to set the path for server side, where the result will show up: So in package.json I deleted : “test”: “echo \”Error: no test specified\” && exit 1″, And written the Start command for server side: Screen Shot 2017-02-15 at 9.01.24 PM
  10. So after building the start and build dependencies our Code is ready to run with npm run start: Screen Shot 2017-02-15 at 9.11.23 PM
  11. So here http://localhost:8080/ is local address to run our App.So here we can see out Output in console: Screen Shot 2017-02-15 at 9.13.38 PM

    Hello ReactJS 

    I have used many new thigs here so you can just ask the question related to thos things. Comment Below. Thanks. Code Code Code. 🙂 

How to use CSS in a HTML document

We are much aware what is CSS, and it’s uses in previous blogs, Now Let’s try to understand How to use CSS or Style sheet in a HTML document. CSS present the good presentation in a document and Web page or App.
We can use Style sheet using three methods:
·        We can use an external style sheet, either by importing it or by linking to it.(External Style Sheet)
·        Directly embed a document-wide style in the head element of the document. (Document – Wide Style)
·        Set an inline style rule using the style attribute directly on an element. (Inline Style)
Each of these style sheet approaches has its own pros and cons, as listed below:

   Now let’s some work using all three method

1.       External Style Sheet: An external style sheet is simply a plain text file containing CSS style   
Rules. The common file extension .css indicates that the document provides style sheet information. As an example, the following CSS rules can be found in a file called sitestyle.css, which defines a style sheet used site-wide:
After above sheet we will work with HTML doc…
So now we are done with both files Let’s see the Output:
CSS is, at least theoretically, not the only style technology we could use, though as it stands, by default, most browsers assume that CSS is being used. We set type to be specific but that may get a bit redundant. The HTML specification suggests you can set a default style sheet language in the head element of the document by using the <meta> tag, as
shown here,
<meta http-equiv=”Content-Style-Type” content=”text/css”>
by outputting this value in the HTTP headers delivered to a site. Interestingly, many sites
set the <meta> tag and use the type attribute, which is particularly appropriate as of this
edition’s publication as the specification dictates that the type attribute must be set and
thus the W3C validator will complain if the attribute is not set regardless of the appearance
of the <meta> tag.
2.      Embedding Style Sheets: The second way to include a style sheet is to embed it. When you embed a style sheet, you generally write the style rules directly within the document with a <style> tag found within the <head> </head> of the document.
The basic syntax of the <style> tag is as follows:
<style type=”text/css” media=”all | print | screen” >
* Style Rules….*
Now let’s do an Example:

You can have multiple occurrences of the style element within the head of the document, and you can even import some styles with these elements.
OutPut for the above code:

While this technique is common practice and used for script masking as well, there are some subtle issues, particularly when including non-comment-friendly content like multiple dashes or trying to address XML strictness. (McGraw-Hill CSS)
3.      Inline Styles:  Instead of using a style sheet for a whole page, you can add style information directly within a single element. Suppose you want to set one particular <h1> tag to render in extra-large, green, Arial font. You could quickly apply the style to only the tag in question using its style attribute, which is a core attribute common to nearly any HTML element.
As an example, the following markup shows an inline style applied to a heading:
<h1 style=”font-size: xx-large; font-family: Arial; color: green;”>
This sort of style information doesn’t need to be hidden from a browser that isn’t style sheet-aware, because browsers ignore any attributes that they don’t understand.
Although using inline styles seems to be an easy route to using CSS, it does have a number of drawbacks. The largest problem is that inline rules are bound very closely to a tag. If you want to affect more than one <h1> tag, you have to copy and paste the style attribute into every other heading of interest. The separation of markup from CSS presentation is not optimal with an inline style. However, for quick and dirty application of CSS rules, this might be appropriate, particularly for testing things out.
The second and lesser-known concern with inline CSS rules is that you simply cannot perform every task with them. For example, if you want to change the look of various link states, this is easily accomplished in a document-wide or linked style sheet with pseudo-class rules like
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}
However, if you attempt to put such rules in an <a> tag, how are other states indicated? The simple example here would appear to set the color to blue for any state:
<a href=”http://www.w3.org” style=”color: blue;”>Inline Link Styles?</a>
Similarly, in order to change the first letter of a paragraph to large, red text, you might use a pseudo-element rule like
 p:first-letter {color: red; font-size: xx-large;}
However, when you attempt to do this inline, you are forced to introduce an element to hold the first letter:
<p><span style=”color: red; font-size: xx-large;”>T</span>his is a test.</p>
While these examples indicate why these selectors were given the names pseudo-class and pseudo-element, they don’t really show us how to use such inline styles.
<a href=”http://www.w3.org/”
style=”{text-decoration: none;}
:link {color: blue;}
:visited {color: red;}
:hover {color: red; text-decoration: underline;}
:active {color: red;}”>Inline Link Styles?</a>
To set the first letter on paragraphs, we would use:
<p style=”{text-indent: 1em;
text-align: justify;
line-height: 150%;}
:first-letter {color: red; font-size: xx-large;}”>
This is the set of <p></p>
The emerging specification even suggested the importation of style sheets directly inline:
<div id=”navbar” style=”@import url(navigationstyles.css);”>just an example</div>
While all these ideas are quite interesting, more than seven years after the working draft was authored, not a single browser supports this syntax at the time this edition is being completed. So, besides being too closely bound to tags, understand that unless this situation has changed by the time you read this edition, only using inline styles is going to limit your application of some of the more useful CSS selectors. (Reference McGrill CSS)
These were some methods for using CSS, there are many other methods for using CSS but includes above three parent methods.  So for more Stay tune for next blogs mean while keep doing your coding work with different examples.
Do more exercises and ping back your problems.

Let’s know about CSS Error Handling

Sorry writing this blog after very long time, Yet this is not my original I was reading about Error handling in google and find some important points, which are presented here, We know the use of syntactically correct markup is certainly not encouraged by permissive browser parsers that correct mistakes or guess intent when faced with malformed markup. The situation for CSS is a bit better, and the CSS 2.1 specification does describe what browsers should do in the case of various errors, but then again, making the assumption that browsers are not permissive and correctly implement all aspects of Web specifications is dangerous.
Unknown Properties
If an unknown property is encountered, a CSS-conforming user agent should ignore the declaration. Given
h1 {color: red; trouble: right-here;}
the property trouble would simply be ignored and the rule would simply set the color. It does not matter what the position of the bogus property declaration is, the result should be the same as long as the declaration is otherwise well formed.
h1 {trouble: right-here; color: red;}
The case is obviously different if the various separators are missing.
Malformed Rules
In the case where semicolons (;), colons (:), quotes (‘or”), or curly braces ( { } ) are misused, a browser should try to handle any unexpected characters and read the properties until a matching value can be found. As an example, consider the simple case of forgetting a semicolon:
h1 {color: red text-decoration: underline; font-style: italic;}
In this case, we should see the browser continue to parse the value of color as “red text decoration: underline” before it sees a closing semicolon. The font-style property that follows would then be used. Because the color property has an illegal value, it should be ignored.
Other cases are a bit more obvious. For example, here we see the colon missing in a style rule declaration:
h1 {color red; text-decoration: underline; font-style: italic;}
In this case, the color property is simply ignored and the text is underlined and italic.
The situation for quotes and braces is the same, with compliant browsers working to find a matching closing character for any open construct, potentially destroying anything in between. Consider this set of rules, where quite a large amount of style may be lost:
h1 {color: green; font-family: “Super Font;}
h2 {color: orange;}
h3 {color: blue; font-family: “Duper Font”;}
Be careful, though, because in this case you might assume that the rule closes off with a quote, but that may introduce more open construct errors later on in the style sheet.
Unclosed Structures and End of File :
A CSS browser should close all braces and quotes when it reaches the end of a style sheet. While quite permissive, this would suggest that
<style type=”text/css”>
h1 {color: green
should render properly, as the open rule would be closed automatically by the end of the style sheet. Open quotes would also be closed in a similar manner when the end of the style sheet is reached. Testing reveals this action is actually the case in browsers, but creating a syntactically correct style sheet is obviously far superior than understanding the expected failures of a conformant browser.
Illegal or Unknown Property Values
CSS-conforming browsers must ignore a declaration with an illegal value. For example,
h1 {font-size: microscopic; color: red;}
would simply not set the font-size value but h1 elements would be red. Usage of illegal characters can turn what would appear to be a correct value into an incorrect one. For example,
h1 {color: green;}
is incorrect not because green is an illegal color, but because it is not the same as the keyword green when it is quoted.
Do not assume that a CSS-compliant browser will fix such small oversights. For example, a browser given
h1 {color: green forest;}
should not use green but instead ignore the whole rule. Of course, what browser vendors actually do in the face of malformed Web documents varies.
Incorrect @ Keywords and Media Values:
When an @ media value or media type for a <style> tag is used, incorrect values should be ignored. For example, if you specify <style type=”text/css” media=”tri-corder”>, the browser is supposed to ignore the entire <style> block unless it understands such an odd type. Media types will be discussed in depth later, but for now understand that when faced with syntax problems, a CSS-compliant browser should simply ignore anything related to misunderstood values.
Ignoring Network Failures
When style sheets are linked rather than placed within the page, the browser must apply all
types it is able to fetch and simply ignore those it can’t. So if you had
<link rel=”stylesheet” href=”global.css” type=”text/css”>
<link rel=”stylesheet” href=”pagelevel.css” type=”text/css”>

and the first was fetched by the browser, but the second failed, it would simply apply the rules it had. Obviously, such transitory errors are hard to account for, but other considerations presented in this section should have been caught in the validation of markup and style, discussed next.

Let’s work with JavaScript Events

As we discussed in previous blog (Basics of  Events in JavaScript) about some event names, There are some many other events are in JavaScript ,
Some Events are used with Media Elements in HTML: 
  • ·         onabort
  • ·         oncanplay
  • ·         oncalplaythrough
  • ·         ondurationchange
  • ·         onended
  • ·         onerror
  • ·         onlodeddata
  • ·         onloadedmetadata
  • ·         onloadstart
  • ·         onpause
  • ·         onplay
  • ·         onplaying
  • ·         onprogress
  • ·         onratechange
  • ·         onreadystatechange
  • ·         onseeked
  • ·         onseeking
  • ·         onstalled
  • ·         onsuspended
  • ·         ontimeupdate
  • ·         onvalumechange
  • ·         onwaiting

Some Events which are very important for our Browser:
  • ·         onafterprint
  • ·         onbeforeprint
  • ·         onbeforeload
  • ·         onblur
  • ·         onerror
  • ·         onfocus
  • ·         onhaschange
  • ·         onload
  • ·         onmessage
  • ·         onoffline
  • ·         ononline
  • ·         onpagehide
  • ·         onpageshow
  • ·         onpopstate
  • ·         onredo
  • ·         onresize
  • ·         onstorage
  • ·         onundo
  • ·         onunload

So these are some important events which are used in JavaScript for making a webpage more interactive.
Now Let’s do some live work with these events, Yet we can’t discuss all events but some important event can be discussed.

onload   Event:  The online event triggers when a Website loads in a browser. This event is defined in the BODY element. Let’s write some HTML code

Here we have defined the onload event in the BODY element, which displays an alert box showing the text, Welcome to My World!, when a web page loads. The output for the above code will be:

So this was a little bit about the onload Event, do some more Exercise from yourself and put the problems.

onsubmit  Event:  The onsubmit event is used with the FORM element and triggered  when the form is submitted. Let’s create a form and understand the onsubmit event, HTML code :

The above code is for FORM, here we added some fields like Name, Phone, Address, Email id. Next we have defined the onsubmit event in the FORM element, which displays the some message.
After filling this form when we click on submit button then alert box appears and shows the Text message:

So these are the examples of JavaScript Events.

Note : Now do exercise from yourself and put the question in Comment.

Basics of Events in JavaScript

Events refer to the actions that are detected by a programming language when you perform a particular task.
Example: the onclick event detected by the programming language when you click the mouse button.
Events are generally used in combination with the function, implying that when an event occurs, it calls a specified function. An event commonly occurs when a user clicks the mouse button , web page is loaded, or from field is changed. Events are handled by a special function, known as event handler, which handles a particular event when the event is triggered.
How to Create an Event handler  :
In the above code OnEvent  refers to the name of an event  followed by an equal sign and the code that executes when the event is triggered.
Let’s do some Exercise :
Working with onclick Event :
The onclick event triggers when you click a particular control, such as button control. Let’s create a webpage to understand the onclick event  :
 Here we defined the onclick event that occurs when we click on ‘Click me ‘ button.
See Output.
Here this alert box appears because of onclick  event and this event occurs when we hit on ‘Click me’ button.
So this is a basic concept of Event,. There are so many Events which are used in JavaScript with HTML. Like some JavaScript  events used in HTML forms are given below :
Some Keyboard Events which are used in HTML:
·         onkeydown
·         onkeypass
·         onkeyup
Some JavaScript mouse events used in HTML
·         onclick
·         ondblclick
·         ondrag*
·         ondragend*
·         ondragenter*
·         ondragleave*
·         ondragover*
·         ondragstart*
·         ondrop
·         onmousedown
·         onmousemove
·         onmouseout
·         onmouseover
·         onmouseup
·         onmousewheel*
·         onscroll*

      *New in HTML5

Etc there are many other Events in JavaScript Which are used in Media elements of HTML and browser. Try with these events yourself. I will discuss these and many other events with working in my Next Post.



Calling Function with Timer in JavaScript

In JavaScript timer is the most important feature, it allows us to execute JavaScript function after a specified period; thereby, making it possible to add a new dimensions, time, to our website. With the help of timer , we can run a command at the specified intervals, run loops repeatedly at a predefined time, and synchronize multiple events in a particular time span.

There are various methods for using it:

           1.      The setTimeout() method:  Executes code at a specified interval. Syntax for this : 
                                                           setTimeout(function, delayTime)
In the above syntax the setTimeout() method contains two parameters – function and delayTime. The function parameter specifies the method that the timer calls and the delayTime parameter specifies the number of milliseconds to wait before calling the method.

Example :Let’s try with an example, this method is useful when we want to delay the execution of a particular code.  Let’s write a code :

The setTimeout(“alert(‘Hi, Welcome! Ankur Here.’)”, 5000) method is used to create a timed alert box. The first parameter of the setTimeout() method is a string that contains a JavaScript statement, alert(‘Hi, Welcome! Ankur Here.’), and 2ndparameter , 5000 , specifies the time in milliseconds after which the first parameter will esecute.
So output of this code will be:

      2.      The clearTimeout() method:  Deactivates or cancels the timer that is set using the setTime() method.    Syntax for this :

in the above syntax , timer is a variable that is created using the setTimeout() method.
      3.      The setInterval() method : Executes a function after specified time interval. The syntax for this :
setInterval(function, intervalTime)

In above syntax the setInterval() is the method contains two parameters- function and intervalTime. The function parameters specifies the method to be called; whereas, the intervalTime parameter specifies the time interval between the function calls.
Example :Let’s try with an example, this method is used to execute the code after every specified time intervals.  Let’s write a code:

In given code the setInterval() method is used to create a timer that calls the alert() method repeatedly. In the setInterval() method, the first parameter is a string that contains a JavScript statement, alert(‘Sorry ! 1 seconds.’). The second parameter specifies the time in milliseconds, 1000, after which the first parameter is displayed.

So the Output of this code will be :

      4.      The clearInterval() method: Deactivates or cancels the timer that is set using the setInterval() method.     The syntax for this :
The preceding syntax deactivates the inner timer variable that is created using the setInterval() method.

So Enjoy and work with Timer in JavaScript.

Function in JavaScript

All of us know function is a collection of statements that is executed when it is called at some point in a program. A function performs a specific task within a program independent of the rest code in the program. We can call the function from anywhere within a program. We can also define the parameters to be passed with function while calling the function. The parameters in a function are used to exchange information between a calling statement and function. We can define a function by using the function keyword.
Syntax for a function :

Above syntax has name of function, and parameters of a function.

JavaScript functions are divided into two categories:

Function without Parameters: Does not contain parameters. This code written in these function is static, implying that the values of members of these function cannot be changed at runtime.
Function with parameters:  Contains parameter in its parenthesis, such as integer and string. Unlike function without parameters, the values of members of these function can be changed at run time by passing different values of their parameters.

Now let’s understand the JavaScript function using a simple example:

We have created a function named simple under the head section.

The simple() function an alert message with Thank you.

The onload event handler under the BODY element calls simple() function when the document is loaded in the browser.
Output :

Selection Statements in JavaScript

Suppose there is  a web page in our shopping website, which accepts a price range from the users. When the users provide a price range, the items or products that lie within the specified price range displayed. Such functionality and logic can be incorporated by using selection statement in the script.
Selection statement use a condition to selector determine the statement that are to be executed. These statements help us to make decisions and change the flow of execution of the statements. In the JavaScript, there are three selection statements :
  1.         If
  2.       .  If….else
  3.      .   Switch

Let’s know more about these statements:

The if Statement : The if statement is one of the most basic and simplest control flow statement. We can use the if statement when we want to execute a group of one or more script statements only when a particular condition is met.
Syntax :
              Statement 1
In the preceding syntax, if JavaScript keyword that signifies an if statement and contain a condition, which need to be evaluated to true, then the script statement, represented by statement 1, enclosed within the curly braces is executed. If the condition evaluates to false, then the statement enclosed within the curly braces skipped and the statement immediately after closing curly brace(}) is executed.

Let’s Understand :  A simple example for If Statement is given below:

                                <TITLE>Using if Statement</TITLE>
                                <H1>Using the if Statement in the script </H1>
                                <SCRIPT type=”text/javascript”>
                                                var Number=45;
                                                if((Number%2) != 0)
                                                                document.write(Number + ” is an odd number”);
                                                document.write(“<BR/>Thank you!”);

The if…..else statement:As we know the if statement allows us to execute a set of statements only when a particular condition is true. However, if we want to execute another set of statements when the condition is false, then we can use the if….else statement.
            Statement 1
Statement  2
In the given syntax, if and else keywords that signify the if…else statement. The condition of the if….else statement if enclosed within parentheses. If the condition is true, then the group of statements represented by statement 1 enclosed within the first curly braces is executed. If the condition is false, then the statement 1 is skipped and the group of statements, represented by statement 2 of the else block is executed.

Let’s Try: A simple if else Statement is given below :

                                <TITLE>if…else Statement</TITLE>
                                <H1>Using the if…else Statement in the Script</H1>
                                <SCRIPT type=”text/javascript”>
                                                var Number=44;
                                                if((Number%2) != 0)
                                                                document.write(Number + ” is an odd number”);
                                                                document.write(Number + ” is an even  number”);
                                                document.write(“<BR/>Thank you!”);
Out Put :

The switch statement:A switch statement is used to select a particular group of statements to be executed among several other groups of statements. The group of statements that is to be executed is selected on the basis of a numeric or string expression.
case value1:statement 1
case value2:statement 2
case value3: statement 3
In given syntax, switch case, and break are JavaScript keywords. The switch keyword indicates the switch statement. In a switch statement the expression that is to be evaluated is specified within parentheses. This expression is checked against each of the case values specified in the case statements. If any of the case values match the value of the expression, the group of statement (statement 1, statement 2 or statement 3) specified in the respective case statement is executed. If none of the case values matches the value of the expression, then the default statement, specified by the default keyword, is executed. The default statement is generally placed at the end of the switch statement; however, we can place it anywhere within the switch statement.

   Let’s Try: A simple example for Switch statement is given below :

                                <TITLE>Using switch Statement</TITLE>
                                <H1>Using switch Statement in the script</H1>
                                <SCRIPT type=”text/javascript”>
                                                var letter=”I”;
                                                                case “A”:document.write(“A is a vowel”);
                                                                case “E”:document.write(“E is a vowel”);
                                                                case “I”:document.write(“I is a vowel”);
                                                                case “O”:document.write(“O is a vowel”);
                                                                case “U”:document.write(“U is a vowel”);
                                                document.write(“<BR/>Thank You!”);

JavaScript in HTML Document

For this we can follow three ways, which are given below:
1.      JavaScript in HEAD Element
2.      JavaScript in BODY Element
3.      As an External Script File
JavaScript in HEAD Element:  We can use JavaScript in HEAD section by given Method. The script placed inside the HEAD element runs when you perform some action, such as click a link or the submit button.
Code Syntax:
<SCRIPT type=”text/javascript”>
Script code here
                                <TITLE>JavaScript in HEAD Element</TITLE>
                                <H1>Adding script in the HEAD Element</H1>
                                <SCRIPT type=”text/javascript”>
                                                document.write(“Welcome to the World of JavaScript
                                                document.write(“In this example we have used the
JavaScript in the HEAD element.”);
JavaScript in BODY Element:  We can use JavaScript in BODY section by given Method. The script placed inside the BODY element runs when a web page start loading ia a web browser.
Code Syntax:
<SCRIPT type=”text/javascript”>
Script code here
                                <TITLE>JavaScript in BODY Elementt</TITLE>
                                <H1>Adding JavaScript in Body Element</H1>
                                <SCRIPT type=”text/javascript”>
                                                document.write(“Welcome to the World of JavaScript
                                                document.write(“In this example we have used the
JavaScript in the BODY element.”);

JavaScript as an EXTERNAL Script File:  When JavaScript code created in an HTML file is very lengthy; It affects the readability of the HTML file. In addition, at times we may need to use the same JavaScript code in several Web pages. In such cases, we can store the JavaScript code in an External file and save that file using the ‘.js’ extension. Next we need to link the external file with the HTML document by using ‘src’ attribute of the SCRIPT element to access the script file.
Code Syntax:
<SCRIPT src=URL of the External .js file>
Script code here
                                <TITLE>JavaScript as an EXTERNAL Script File</TITLE>
                                <H2>The sum of First Four Number is:</H2>
                                <H2><script src=”MyScript.js”></H2>
External JavaScript :
var i, count=0;