Shadow Wizard
There Is No Magic: JavaScript Tutorial, Part I
by
on November 11th, 2008 at 05:32 PM (1203 Views)
Introduction to JavaScript
What? Why? How?
What is it?
JavaScript is client side scripting language.
This one sentence contains three phrases that need further explanation:
- Client side: this means code that is under the responsibility of the browser (to differ from Server Side language such as PHP which is under the responsibility of the server)
Client side code is under the responsibility of the browser and this means the code is executed on the client machine (the computer of the user visiting the website, to differ from Server Side code that is executed on the Server machine) and it run as part of the browser process.
Client side has another important meaning: since it's executed by the browser itself, it becomes browser dependent. What it means? It means the same code might work on one browser and fail on other browser. (Sounds familiar?)- Scripting: the scope of this is much bigger than this article but I'll try to describe it in short.
Scripting language code is not compiled before it's executed, to differ from programming languages like C++ or Pascal or even .NET code.
Scripting language has no .exe or .dll associated file, it consists of pure text file that is the whole code.
Whenever scripting language code needs to execute, the RTE (Run Time Engine) load the whole code into memory, compile it on the fly and execute the commands in that code.
For server side scripting languages like classic ASP or PHP, the RTE is part of the server itself while in client side code, the RTE is part of the browser.
Being free of pre compiling, scripting language does not have variable types. It simply does not need them, because the compiler does not need to allocate memory in advance for the code. It's all going to run on the memory "heap" anyway.
With no variable types available, it's also not required to declare any variables in scripting language. Many see this as blessing (less code you know) but I see this as huge curse. (Read the next part of the tutorial to learn more)
Big advantage of scripting language is the ability to easily write code that write itself. It enables the programmer do wonderful things, that are not possible in full scale programming language.
(More about Scripting Language in the next part of the tutorial)- JavaScript
What is the meaning of the language name?
It consist of two words:This pretty much explain the name.
- Java: Yes indeed, that's the famous programming language created by Sun corporation in the beginning of the 90's.
How is it related? Syntax. The syntax of JavaScript is much alike to the syntax of Java.
Apart of syntax, JavaScript is very far from being like Java: it does not have "class" files. It's not object oriented. JavaScript is FOP: Function Oriented Programming.- Script: because JavaScript is Scripting Language with all the meanings explained above.
Why JavaScript?
For various reasons:
- Being client side, it runs directly on the browser thus not bound to any server.
- This is the only way to deal with client events, like mouse click or key press, in real time.
- Client side form validation is essential part of any respectable website. The user will prefer to know of mistakes before the data is actually submitted to the server.
- Cool things like image roll over are possible only with client side code.
- Cool things like "live" clock, simple games.
- Just in case you need to mess with elements on the page during run time. For example, replacing the URL of all the links on the page in one go.
How do I start?
Under Windows OS click Start --> Run --> type "notepad" in the textbox and click OK.
For non Windows OS just open your favorite text editor.
Copy and paste the following code into the text editor:
Save the file under the name "nomagic.html" in your desktop.Code:<html> <head> <title>The Magic Of JavaScript</title> <script type="text/javascript"> alert("hello world"); </script> </head> <body> This page will eventually contain some nice things that can be done with JavaScript. </body> </html>
Double click the file to launch your default browser and execute it.
If you have IE7 you'll have to click the yellow bar that appear on top of the contents and choose "Allow Blocked Content". (See attachment IE7_warning)
You should see JavaScript alert box with the message "hello world". Attached are "hello_world_IE and hello_world_Firefox that show how it should look like in those browsers. If it looks different, it means you've done something wrong.
Congratulations! You've just wrote custom JavaScript code that is fully under your control.
Keep tuned to this article to learn the real stuff.
Coming next: Going Technical, Difference between JavaScript and VBScript and answer to questions.
If you have any comments or questions, don't be shy! Post comment and say it.
Happy Programming!
>>Second part of tutorial
Email Blog Entry
Go to Profile
Mark as Read
