Introduction
Introduction.
In this tutorial I hope to show you what Javascript is, and what it can do for you and your visitors. Before I continue I must point out that i'm not an expert in javascript, the things you read from here are what i've read over the last year or so. Most of this introduction contains basic explanations and examples found across the internet and in books. Few things I would like to point out first before you continue on. When you come to viewing an example of code, don't just copy and paste it, type it out. From doing this you will learn to debug your code and fix any problems that arise, just a small thing that I suggest, but if you want to copy and paste, feel free to do so. :tongue:
What is Javascript and what can it do?
Javascript is a scripting language, which means that scripts included in the webpage are read by the web browser's javascript engine when the page is loaded. Javascript was created by Netscape which was originally called Livescript. There are loads of things you can do with Javascript to make your website more interesting for your visitors. From validating forms, interactive scripts, random images, popups, even make Javascript games.
The Script Block. In order to include Javascript in a web page, a script block must first be defined in the HTML code. The script block can be put anywhere within the HTML code, but usually it would go into the head part of the web page between the <head> tags. When the web page loads in the browser it reads the code, so placing it in the head of the web page ensures that the Javascript code is read before the HTML content, though you can place a script block inside the <body> tags. Example of a script block:
<script type="text/javascript">
<!--
//-->
</script>
Note: you might see some script blocks that contain the language attribute, this was used to specify the scripting language but I believe it has been removed in HTML 4.0. The actual code you make would go between <!-- and //-->. These are to hide the script from really old browsers that cannot interpret Javascript. You may also separate the Javascript code from the HTML code by putting the Javascript code into a Javascript file. A Javascript file is just a text document with the Javascript code in it but without any <script> tags or HTML tags. A Javascript file is saved with the extension ".js". To call the Javascript file to be loaded into the web page, you would use a script block like so:
<script type="text/javascript src="http://www.mydomain.com/myscript.js"></script>
Putting Comments in Scripts.
It's always a good idea to add comments to your scripts, why? well, come months later when you decide to make changes to your script it will be easier to find the block of code to change. I have a bad habit of not adding comments to my scripts but have found it very awkward making changes to a script. Here are 2 javascript examples: One line comment:
<script type="text/javascript">
<!--
//this is a one line comment
-->
</script>
Multi line comment:
<script type="text/javascript">
<!--
/* this is an example of a comment that can be added to multiple lines. */
//-->
</script>
For the one line comment you use // followed by your comment, this is fine for short comments, but when you need to add a much longer comment you can use example 2. For example 2 you start with /* which tells Javascript to ignore everything that follows until you reach */ to close the comment. Simple enough? :)
Hello World. For your first script we will look at the Javascript alert dialogue box. Take a look at the script below, then I will explain it.
<script type="text/javascript">
<!--
alert("Hello World");
//-->
</script>
For this small script we use the Javascript alert() function within the script block. When the web page is loaded the Javascript code causes the browser to open an alert box containing your message withing the quotes. So that's all it is, to have your message appear just place it within the alert function inside quotes. Note: it's good coding practise to end statements with the semi colon ;, although Javascript doesn't require it like some language (PHP) it's good to get in the habit of adding it.
Variables.
What's a variable? I hear you say.... Answer: A variable is a place in which you can store data. When you come to naming variables you must be aware of certain things. A variable can have any letter, digit and even the underscore _ may be used, but the variable may not begin with a digit. Example of valid variables: abcd my_variable var32123 To create a new variable, you use the Javascript "var" keyword. I'll show you with a small script.
<script type="text/javascript"> <!--
var my_message = "My First JavaScript Variable";
alert(my_message);
//-->
</script>
The text string is stored inside the variable called my_message. Then the variable name is called to the Javascript alert function that we talked about earlier, so when you run the script you will get an alert box displaying the string which is stored in the variable.
Art Group ~ Collection 17: Lyrical Life
UrbanCinderella | Tommy Huynh | Eternity | Britt |
Comments
Post new comment