MVC 4 Web Application Tutorial – First part – Second Step – Introduction to JavaScript

There is no escape, Javascript is everywhere! Very few web pages are not using it. We are going to quickly discover what is Javascript and show a few examples of its use. In the same way than for CSS, learning javascript is not the purpose of this tutorial, so this introduction will be more a presentation than an in depth look. If I manage to give you a nudge to start with it, this paper will have reached his goal

If there was only one concept  to remember about this introduction to Javascript, it would be in this sentence: “Javascript is a client side scripting language, in other words the code is interpreted/run by the Browser“.

No need for a server and Internet to be able to use a Javascript application, in theory. Practically, chances are that your code will use external ressources, but that does not change the fact that the code run when the browser load the page, and its execution stop when the page is closed.

Your script can do many different tasks:

  • Modify the DOM (Document Object Model) and its elements
  • React to events, like a click on a button, opening a page, drag and drop, and so on.
  • Read global variables, linked to the document or the browser

We are going to create a simple script doing all of the above, step by step.

First, open in Visual studio the HTML file from the previous step and add a SCRIPT tag:

To begin with, let’s test Javascript in your browser, using the alert function:

After saving the file, once we open the page in our browser, an alert window, similar to a message box, display the famous “Hello World”. If it’s not the case, check your Internet settings to be sure Javascript is authorized. This window look will slightly change depending on which browser you use, proof, if needed, that your browser run the code, and not Window.

Hello World is fine, but we can do slightly better, right? What if we tried to display the current date in our little message window, for example:

OK, good. But I am displaying the date in a US format. Would not it be possible to detect which is the user language, do adapt date formatting accordingly? Yes, it’s doable, but we need a little trick here as not all browsers use this feature in the same way:

Well, that’s not bad for a first start with Javascript! We have using builtins functions to get today’s date, display it in a more human readable manner than with the default format (Up to you to modify the code to see how it looks like “raw”), and adapt that format to user’s language.

Still, so far we choose to use the easy way with alert() to display the results. What about reacting to events, modifying the DOM with Javascript to display in the page itself, rather than in an external window?

So, we are going to start changing our code so that it display the current date once the user ask for it, not just when the page load. Still using Javascript, we are going to create a new HTML element, a button, in the page, then call alert() when the user click that button:

As you can see, I added a second script tag, instead of modifying the first too heavily. As for now I don’t use any function beside the builtins one, all my variables scope is the page. So there is no problem to use formattedDate, from the first script, in the second one.

Here is how the whole page looks like now:

Second script code create a new button element, affect 2 attributes to it, type, and event onclick, add a text content to the element, then add the new element to the page body. If you look at the source for the page, in your browser, you will not see any button element in HTML, while it’s right there under your eyes! To see the GENERATED Html, press F12 (dev tools), to see it in the console window. Depending on your navigator, you may have to install an extension to have this feature.

Now, we know how to create dynamically a new Html element, react to an event, but we are still using the easy way with alert(). Let’s see how to display this date in the page body, rather than in a popup window. Let’s start by transforming the first script into a function:

Then create a 2nd function, to add the date to the content of the “firstParagraph” element

Now we need to change the action linked to the onclick event:

A click on the button add the date to the bottom of the paragraph instead of opening a window, as desired. You may have noticed, while we were doing this, that creating and using a Javascript function is quite simple.

Here is our full page after these last changes:

The code is not perfect, as the date is added each time the button is clicked. It would be better to find a way to know if the date was added already, instead of doing it again. Great exercise for you! Please post your solution in the comments. (hint, there is a solution in the video, but there are other ways to achieve the same goal)

before leaving you for now at the end of this second step, I would like to show a very handy tool to test interactively your Javascript code:

Tutorial Part One – Step Two

Thank you for watching! Don’t forget to subscribe to our updates via email if you want to know when a new step is added to this tutorial.

Take care!

This work is licensed under a Creative Commons license.
Posted in ASP.NET MVC 4.0, Tutorial
2 comments on “MVC 4 Web Application Tutorial – First part – Second Step – Introduction to JavaScript
  1. Hey there! Would you mind if I share your blog with my zynga group?
    There’s a lot of people that I think would really enjoy your content.
    Please let me know. Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *

*

NewsLetter

On Site Search

Custom search