Learning Javascript - Tutorial 1
- 0
- Add a Comment
This is a very small scale step into javascript. The main purpose here is to first differentiate the two languages that people often get confused with, HTML and javascript.
HTML is short for Hypertext Markup language. HTML, while being a language, is not considered a programming language. Think of HTML as the designer. HTML allows one to place the components of the web page where they need to be, as well as handling formatting. No logic conditions can be achieved by HTML alone.
Javascript is a scripting language that gives web developers the chance to add programmable elements to their web pages. With that said, this means that you can add logic and functionality to web pages to make them more dynamic and interesting to the user.
For a first tutorial I decided to stick to the convention of “Hello World”. However, I also wanted it to be something that was also actually usable. What we have is a web page that will check the screen resolution of the users monitor and make a decision on what to say depending on that value. We want to do this as soon as the page loads so the user knows if he/she meets the optimal resolution. So, let’s start!
You can simply write this in Notepad if you are using windows. If you want a nice editor google for Notepad ++. This is one of my favorites that supports many languages.
First we need to set up a little HTML
<html>
<head><title>My First Javascript Enabled Webpage</title></head>
<body> </body>
</html>
We want this code to trigger before the rest of the page is loaded. For this we add the javascript code in the header section like so.
<html>
<head><title>My First Javascript Enabled Webpage</title>
<script type = “text/javascript”>
if((screen.width >= 800) && (screen.height >=600))
{
alert(”Your screen resolution is greater than 800×600 \n You meet the optimal resolution for this site”);
}
else
{
alert(”Your screen resolution is less than 800×600 \n You do not meet the optimal resolution for this site”);
}</script>
</head>
<body>
<p>Hello World! This will appear after the javascript code has been run through</p>
</body>
</html>
A few things to go over here. We said we wanted to use javascript by using script type = “text/javascript”. Since every HTML tag typically has a ending tag, we end the script after the code like this </script>.
We use a simple if statement to say, “If the users screen width is greater than or equal to 800 AND (&&) the screen height is greater than or equal to 600, let the user know they meet the optimal resolution, else, just let the user know they do not meet the optimal resolution”.
The alert statement will send a pop-up dialog to the users browser with the text passed in. the “\n” you see simply creates a new line. You will see the separation when you open the site in your browser. This example is very simple but it is a good introduction to a few concepts in javascript and programming in general. Note that when you click OK the text in the body appears. This is because the javascript code gets executed before the program takes notice of what is in the body.
To save this as a web page simply save it with the extension of .html. Example: MyJavascriptPage.html
Now you should be able to double click on the page and see it work. I hope you enjoyed this quick first tutorial of javascript and there will be more as soon as time allows me to write them.
