Gizmo385 Technovations Tutorials



JavaScript Tutorials

  1. JavaScript Tutorials
    1. Lesson 1: Information from HTML Forms
      1. Calculator Example:
    2. Lesson 2: JavaScript Files and External Functions
      1. JavaScript External File Example:
        1. scripts.js
        2. index.html
    3. Lesson 3: Image Viewer Widget
      1. Image Viewer Widget Code:
        1. scripts.js
        2. styles.css
        3. ImageViewer.html
    4. Lesson 4: If Statements
        1. Index.html
    5. Lesson 5: JavaScript and HTML IDEs
    6. The End

   
    Welcome to the second installment of the JavaScript tutorials provided by the web developer of Gizmo385 Technovations. Most of the next lessons will be widgets and helpful code snippets that I will explain to you. In this installment we will go over several things. These things include but are not limited to:


    If you are a beginner in JavaScript and have not read my first guide, then you can check out that guide here.

Lesson 1: Information from HTML Forms


    Now we will continue learning about using JavaScript to interface with the HTML on your website. In this lesson we will put together a few simple functions that will pull information from HTML forms. Lets begin:

Calculator Example:


<style type="text/css">

*{color:black;
font-family:Maiandra GD
}

#calculator{width:160px;
height:195px;
border: 5px inset;
background-color:tan;
}

</style>
<div id="calculator">
<center>
<form id="calc">
Calculator<hr>
<input type="text" id="form1" readonly><br><br>
<input type="button" value="1" onClick="calc.form1.value += 1">
<input type="button" value="2" onClick="calc.form1.value += 2">
<input type="button" value="3" onClick="calc.form1.value += 3">
<input type="button" value="4" onClick="calc.form1.value += 4"><br>
<input type="button" value="5" onClick="calc.form1.value += 5">
<input type="button" value="6" onClick="calc.form1.value += 6">
<input type="button" value="7" onClick="calc.form1.value += 7">
<input type="button" value="8" onclick="calc.form1.value += 8"><br>
<input type="button" value="9" onClick="calc.form1.value += 9">

<input type="button" value="0" onClick="calc.form1.value += 0">
<input type="button" value="+" onClick="calc.form1.value += '+'">
<input type="button" value="-" onClick="calc.form1.value += '-'"><br>
<input type="button" value="*" onClick="calc.form1.value += '*'">
<input type="button" value="รท" onClick="calc.form1.value += '/'">
<input type="button" value="=" onClick="calc.form1.value=eval(calc.form1.value)">
<input type="button" value="C" onClick="calc.form1.value = ''">
<sup><a href="http://www.gizmo385tech.com">Gizmo385 Technovations</a></sup>
</div>

    Your probably looking at this snippet and wondering, "Wait, where are the script tags?" Well there are none. I know, I know your confused but just hold on a second. This snippet uses built in form functions tagged on to the "onClick" parameter of a button."

    In this snippet we have a form called calc, we also have a text field labeled as "form1". Basically all we do is when a user clicks a button we have an onClick function to access the "form1" inside of the form "calc" and add the value of that button into the field. We also have a clear button to empty the text field and an eval button to evaluate the equation in the text field. A very simple script that is very very functional. This will conclude this lesson.

Lesson 2: JavaScript Files and External Functions


    In this lesson we will be talking about external functions and JavaScript files. We are just talking a short break from interfacing with HTML to discuss this very helpful bit of JavaScript knowledge.

    So far our snippets have been enclosed within script tags in the head section of our HTML document, well now I will introduce one more way that we can call our functions, while saving space in our HTML documents. A .js file is a JavaScript file. In a .js file you don't need your script tags and you can declare function after function and just include it in your HTML documents and call them whenever you need to. Let me show you an example:

JavaScript External File Example:

scripts.js
function alertTime()
{
var currentTime = new Date();
alert(currentTime);
}

index.html
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<script type="text/javascript">
alertTime();
</script>
</body>
</html>

    Now as you can see this is very simple. All you do is copy your functions into you .js file and put it in the same directory as your .html file and call .js file in your .html file and you can use the functions whenever you want. This is extremely helpful when you start getting into longer and longer snippets of code and you don't want to clog your .html file with random scripts that you could just put into a .js file. That will now conclude this lesson.

Lesson 3: Image Viewer Widget


    In this lesson I will show you a widget from Gizmo385 Technovations. The widget I will show you is the image viewer widget. Our widget will contain three files. A cascading style sheet(.css) file, a JavaScript(.js) file, and our HTML file. The code from this widget can be downloaded here.

Image Viewer Widget Code:

scripts.js

function changeImageOneUrl()
{
    var ImageOneUrl = prompt("Please enter the new image URL","New Image URL");
    document.getElementById("ImageOne").src = ImageOneUrl;
}

function changeImageOneFile()
{
    var ImageOneFile = document.getElementById("ImageOneUp").value;
    document.getElementById("ImageOne").src = ImageOneFile;
}

function changeImageTwoUrl()
{
    var ImageTwoUrl = prompt("Please enter the new image URL","New Image URL");
    document.getElementById("ImageTwo").src = ImageTwoUrl;
}

function changeImageTwoFile()
{
    var ImageTwoFile = document.getElementById("ImageTwoUp").value;
    document.getElementById("ImageTwo").src = ImageTwoFile;
}

styles.css

*{color:black;
font-family:Maiandra GD
}

#ImageOne{border:inset 5px};

#ImageTwo{border:inset 5px};

ImageViewer.html

<html>
<head>
<title>
Image Viewer 3.0 - Gizmo385 Technovations
</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>

<img src="" id="ImageOne" alt="Image One"><br>
<input type="file" id="ImageOneUp" onchange="changeImageOneFile()"><br>
<input type="button" value="Change Image URL" onclick="changeImageOneUrl()"><br><br>

<img src="" id="ImageTwo" alt="Image Two"><br>
<input type="file" id="ImageTwoUp" onchange="changeImageTwoFile()"><br>
<input type="button" value="Change Image URL" onclick="changeImageTwoUrl()"><br><br>
 
Viewing a local image is a feature only available on Internet Explorer right now.
</body>
</html>

    Now I will breakdown the code in these files. I will break down the .js file first.

    Our .js file contains our JavaScript code. We have defined two sets of two functions. The first set deals with the first image section on the .html file. The second set is a mirror of the first but changed slightly to deal with the second image section on the .html file with different variable names respectively. Our two functions that we define are changeImageOneUrl() and changeImageOneFile(). The first function, which is a works on all JavaScript browsers, prompts the user for a image location. It then takes that image location and changes the source location for the image on the .html file. The second function, which currently functions only on Internet Explorer, allows the user to choose a file from the local computer and changes the image source location to display that image. Very simple functions. What is handy about displaying the images this way is that you can see how the image behaves in a live web page environment without having to upload it to a image hosting website.

    Our .css file contains our style code. I will not go over it extensively because this is a JavaScript tutorial, but it defines our font color and family for the page and then puts the borders around where the images will show up in our page.

    Last but not least, our .html file. In our .html file we create our image sections and insert buttons and file upload boxes. We label them with there respective names corresponding to the ones in the .js file.

    Those are all the files involved in that function. Simple functions that provide valuable and useful functions in our website code. Remember that all code from this lesson can be downloaded here. That will now conclude this lesson.

Lesson 4: If Statements


If statements are a way to test conditions in JavaScript and then execute a snippet of code if your conditions are met. Here is our snippet of code we will be working with today.

Index.html
<html>
<head>
<title>
If Statement Example
</title>
<script type="text/javascript">
<!-- Use this to hide code from browsers that do not have JavaScript enabled
//If Statement Example
function promptTest()
{
    var promptInfo = document.getElementById("prompt").value;
    if(promptInfo == "Fail")
    {
        alert("You entered Fail!");
    }
    else if(promptInfo == "Win")
    {
        alert("You entered Win!");
    }
    else
    {
        alert("You entered something completely random! What the heck is: " +promptInfo);b
    }
}
</script>
<style type="text/css">
*{
font-family: Maiandra GD;
}
</style>
</head>
<body>
Input "Fail", "Win", or something completely random <br>
<input type="text" id="prompt" value= "">
<input type="button" value="Click Me!!" onClick="promptTest()">
</body>
</html>

Basically this code has a variable that uses the DOM (Document Object Model) to get the value of the text box on the page. It then compares the input to two different possibilities, "Fail" and "Win". Based on its value, it executes a function depending. Now we must remember a few conditions with this:

This is a very simple function that will provide a massive benefit to you when you are programming. This will now conclude the 4th lesson.

Lesson 5: JavaScript and HTML IDEs

In this lesson we will be discussing IDEs. An IDE is an Integrated Development Environment. There are several items that fall under that classification.

Let me explain those four things a little more in depth.
  1. Source Code Editor: A software program that allows editing of scripting and computer programming languages. Some include special features such as selective text highlighting and auto completion functions.
  2. Compilers: Compilers are used to change your computer programming code into an executable file (.exe). It is used in programming languages such as C++, C, etc.
  3. Build Tools: Build Tools are software programs that can do multiple things: Compile code, package code, create build/release notes for software, etc.
  4. Debugging Tools will search your code and find bugs in your programming and aid your in fixing and patching those bugs. They are very useful an I will be introducing you to one in this lesson.

To aid you in your programming I recommend you download the following programs.

These two tools are very helpful and will aid you by helping your debug your programming and help you program all together.

The End

    This will now conclude our five lessons. In the past fire lessons you have learned about interfacing with HTML, External Functions, a new widget example, If statements, and programming IDEs. Remember that if you would like to suggest tutorials for us. Email us here.