JavaScript – Strict mode

Strict mode is new feature in ECMA Script 5. This mode allows you to run program, piece of program (context) in strict mode.

This mode will help your code by throwing error if your program violets standard.

Let’s see example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use Strict mode</title>
</head>
<body onload="loadDoc()">
<div id="content1"></div>
<div id="content2"></div>
<script type="text/javascript">
var ele1 = document.getElementById("content1");
foo1 = "Hello";
ele1.innerHTML = "" + foo1;
function loadDoc() {
"use strict";
var ele2 = document.getElementById("content2");
foo2 = "Hello from page load";
ele2.innerHTML = "" + foo2;
}
</script>
</body>
</html>

In above example we have used foo1 and foo2 variables without declarations.
Here we put “use strict”; statement in loadDoc() function then it will throw error like below(tested in chrome). Uncaught
ReferenceError: foo2 is not defined Just add declaration of foo2 in loadDoc() function and browser will not throw any error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use Strict mode</title>
</head>
<body onload="loadDoc()">
<div id="content1"> </div>
<div id="content2"> </div>
<script type="text/javascript">
var ele1 = document.getElementById("content1");
foo1 = "Hello";
ele1.innerHTML = "" + foo1;
function loadDoc() {
"use strict";
var ele2 = document.getElementById("content2");
var foo2 = "Hello from page load";
ele2.innerHTML = "" + foo2;
}
</script>
</body>
</html>

Output is:

JavaScript Strict Mode

If you put “use strict” at top of file, then it will enable strict mode in entire file. It keeps your code safe and standard.

Note: You will not see any error in IE9 or below browser. IE 10 will support strict mode.

http://msdn.microsoft.com/en-us/library/ie/hh673540(v=vs.85).aspx

JavaScript – Ternary Operator

Following is syntax of ternary operator in JavaScript.

test?expression1:expression2

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ternary Operator</title>
</head>
<body> <p id="demo"> </p>
<script type="text/javascript">
var ele = document.getElementById("demo");
var now = new Date();
var greeting = "Current time: " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + " " + ((now.getHours() < 11) ? "am" : "pm"); 
ele.innerHTML = "" + greeting;
</script>
</body>
</html>

Output is:

Current time: 17:33:14 pm

Here we have used ternary operator to show ‘am’ or ‘pm’ next to current time. It checks hours is less than 11 then it add am or add pm next to time

app_offline.htm, make your application offline in minute

Some time you need to change/update database or update back end services or just shut down the application. During this activity you need to make your application offline. So, no user can access your web application during this activity.

app_offline.htm file make your work easier. This is very quick solution to make your application offline.

Create html file named app_offline.htm and write some custom message into the file just like ‘Application is down due to maintenance’. Place this file in the root directory of your application. As soon as you place file, application will be made offline to users and will show content of the app_offline.htm file for all the requests. Also the application will shut down and application domain will be unload from the server.

Existing request to the application will continue as it is. Only new request to the application  will get the content of the app_offline.htm file.

If you have added the reference of the JavaScript and the style sheets to your app_offline.htm file, this will not work. The request to these files will not be processed. So make your scripts and style inline. For the image you can use base 64 data of the image. Here you will find the various tool to convert image to base 64 from Google search.

 

JavaScript – Hello world! example

In this post we are going to see simple hello world example. Below example writes “Hello world” to html document.

<html>
<body>
<h1>Hello world example</h1>
<script type="text/javascript">
document.write("<p> hello world!</p>");
</script>
</body>
</html>

Output is:

Hello world example
hello world!

In above example JavaScript code is written in <script> tag. Use type=” text/javascript” attribute to declare JavaScript language.
Statements inside <script> tag are executed by browser.

What is document?

This is object of html document loaded into browser. We have used write method to write content into html page. We will see all methods and properties in next post. Note: Don’t use document.write(“’); method in real life.. It will overwrite entire page with  contents provided in the method. We have used for demo purpose. We will see other techniques to write content on html page.

Introduction to JavaScript

JavaScript developed by Netscape in 1995. JavaScript is structured language much similar to ‘C’ language. Today JavaScript is
essential and popular language.

What is JavaScript?

JavaScript language is scripting language and known to all major browsers like IE, Mozilla, Chrome, Safari, and Opera. This language used
for client side scripting. It executes at client side i.e. into browser.

What JavaScript provides?

Client side events:

JavaScript supports client side events of an HTML element. For example, button is clicked, page finished loading.

JavaScript can interact with elements:

JavaScript can access, change content of element.

Validate user input:

JavaScript makes easy to validate the user input at client side. We can save call to server. We can make page more interactive using
JavaScript.

To run JavaScript code, you need browser which supports JavaScript.