Saturday 7 June 2014

Open a new web page to show content using javascript.

Goal

In my last post I showed how can we get started with Web development by making a simple "Hello World" HTML web page. In  this post we will see how can we open a new window to show some content.

Getting Started

 Lets first create a web page that meets our requirement and then we can look at the javascript part.
Again create a file called index.html and add following content in it.

<html>
<header><title>Open Source For Geeks Tutorial</title></header>
<body>
<center>
<h1>Open Source For Geeks Demo</h1>
<table>
<caption>Demo Table</caption>
<tr>
<td>
Enter Some Text : 
</td>
<td>
<input type="text" name="textContent">
</td>
</tr>
<tr>
<td>
Click to Submit : 
</td>
<td>
<input type="button" value="Submit">
</td>
</tr>
</table>
</center>
</body>
</html>



Now view the page in the browser. You should see something like below


What we want to achieve is to enter some text in the text field then click the Submit button and we should be able to see the text content entered on a new page.

Following code is fully functional with javascript function.

<html>
<header>
<title>Open Source For Geeks Tutorial</title>
<script>
function openNewPage() {
    top.consoleRef=window.open('','myconsole',
        ',menubar=0'
       +',toolbar=1'
       +',status=0'
       +',scrollbars=1'
       +',resizable=1');
    top.consoleRef.document.writeln(
      '<html><head><title>Open Source For Geeks Tutorial</title></head>'
       +'<body bgcolor=white onLoad="self.focus()">'
       + '<h1><b><i>This is a new Window!</i></b></h1>'
       + '<textarea rows="40" cols="100">'
       + document.getElementById("SubmitTextID").value
       + '</textarea>'
       +'</body></html>'
     );
    top.consoleRef.document.close();
}
</script>
</header>
<body>
<center>
<h1>Open Source For Geeks Demo</h1>
<table>
<caption>Demo Table</caption>
<tr>
<td>
Enter Some Text : 
</td>
<td>
<input type="text"  id="SubmitTextID" name="textContent">
</td>
</tr>
<tr>
<td>
Click to Submit : 
</td>
<td>
<input type="button" value="Submit" onclick="openNewPage()">
</td>
</tr>
</table>
</center>
</body>
</html>


and lets try it out

Enter some text in the text field and click Submit button. The entered text should now come in the new window.



Now click the submit button. New Window will open as shown below


That was it! It's that simple.Just a java script function. There is a reason I have put the content inside <textarea> tag. This is because you can even have tags inside text area and they will be displayed as tag. That means if your text has <b> in it same will be displayed and will not be interpreted as bold tag. This was just a simple example but you can show complex data that is fetched from the server. You can also show some xml content in it.

Carefull!!!!

Be careful though. document.writeln() method takes a html input. So all your escaped characters will be "un-escaped". Meaning if your display text contains something like &amp; it will be replaced by  & and shown. If you really want to show the escaped characters you need to do something like below - 

function writeConsole(content,idx) {

     top.consoleRef=window.open('','myconsole' + idx,

        ',menubar=0'

       +',toolbar=1'

       +',status=0'

       +',scrollbars=1'

       +',resizable=1');

     top.consoleRef.document.writeln(

      '<html><head><title> Generated Content</title></head>'

       +'<body bgcolor=white onLoad="self.focus()">'

       + '<textarea rows="500" cols="500">'

       + '</textarea>'

       +'</body></html>'

     );

     top.consoleRef.document.close();

    

     var doc = top.consoleRef.document;

     var textarea = doc.getElementsByTagName('textarea')[0];

     textarea.value = content;

    }


I encountered this scenario and corresponding stack overflow question asked is

HTML Hello World Tutorial

Introduction

Our live as we are living now would not be the same without the internet. What we see while browsing internet are called web pages. What we use to browse these pages is called a browser (client). These pages are written using various technologies like HTML, CSS, JavaScript, JQuery etc. which are client side technologies. There are various backed (server side) technologies like JSP, Servlets that are used to build application that are deployed on the servers eg. Tomcat which help server users/clients request to browse a particular page. What user types in an address bar to fetch a web page is called URL(Universal resource locator). For example you may type http://google.com/. What you see before colon ':' (i.e http or Hypertext Transfer Protocol) is the protocol used to communicate with the server. It can also be https which is secure version of http protocol.You may see the use of this protocol when you browse a page to do some secure action like payments or transactions. Both HTTP and HTTPS fall under application layer in OSI model. Both of them have TCP as their underlying protocol. So basically when browser it to request a web page it first creates a TCP connection with the server and then uses HTTP or HTTPS to get the required pages to display.

Goal

Most of the basic tutorials can be found on W3Schools. Prior to moving to some advance tutorials on web development let me provide this basic Hello World HTML tutorial. Here we will simply crate a web page and open it in our browser that shows "Hello World!" text.

Getting Started

  • Create a file name index.html . Notice the extension html. It is required so that the browser and OS understands it is a web page and will be opened in a web browser.
  • Next add the following text in your file

    <html>
    <header><title>Open Source For Geeks Tutorial</title></header>
    <body>
    <center>
    <h1><b><i>Hello World!!</i></b></h1>
    </center>
    </body>
    </html>
    
  • Simply double click the file. It should open up in your default browser and should look like below

  • See how easy that was? Web pages that you visit in day to day life are much more complex. They have animations, dynamic contexts, logins etc but it all starts from Hello world :)

Understanding the language

  1. HTML is stands for Hyper Text Markup Language. You have bunch of tags that the browser understands and renders.
  2. Notice the <html></html> tag. This is the root element of your web page. Or kind of was. Modern browsers detect the html page even if this tag is not present.
  3. Next comes your tag <head></head> and <body></body>. As the name suggests head tag has your meta info like page titile. you can put it under <title></title> tag in your head. Notice the text on the tab in above image. Your java scripts also go in this head section.
  4. Body as the name suggests has your actual page content to be shown. Here we are simply displaying "Hello World !!" text. But notice the font ? Looks different ? That is because I used some tags.
  5. <center><center/> tag tell the browser that the element/tag that come in between must be rendered in the center of the browser. <b> is for bold and <i > is for italics. <h1> is the size tag that shows text with different size. You can go ahead and try <h2>... etc.
As I told earlier you will find much help on W3Schhools.  So do go through it if you are beginning with Web development. Let me know if you still have any doubts.
t> UA-39527780-1 back to top