Getting Started with ECMAScript
ECMAScript Basics - Part 1
Forward: In this toturial I introduce you to the computer language called, ECMAScript.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Purpose of ECMAScript
HTML or XHTML gives you a functional web page. CSS makes the web page presentable. ECMAScript makes the web page interactive. Now, with HTML and CSS your web page will be able to serve your users or customers. However, you might want that when you click a button on the page some text should appear on the page immediately, without being downloaded. You might also want that when the user types into the field of a Form, an alert box should pop up if the user made an error, indicating that the user made an error. These two objectives and many others are not offered by HTML and CSS. You need the browser scripting language, ECMAScript for that.
Prerequisite
In order to study ECMAScript, you should have basic knowledge HTML and Cascaded Style Sheet (CSS).
Also, in order to study ECMAScript, your level of mathematics should be at least that of Middle School. If you went through middle school and did not pass in mathematics, if you are serious, you may manage to understand my series.
Here, I give you the requirements to study ECMAScript from my series. You need:
- A Personal Computer with its operating system
- A Browser
- A text editor
In this series there are many code samples that you will be trying (with your browser). The ECMAScript code is part of your web page.
Your First ECMAScript Code
This is the script:
<script type="text/ECMAScript">
document.write('Hello World!');
</script>
Script Explanation
HTML has a double tag element called, the SCRIPT element. If the tags of the script are typed without errors, you do not see the content of the tags in the HTML document at the browser. There is one important attribute that must go into the start tag of the SCRIPT element. This is the, type, attribute. The value of this attribute should be "text/ECMAScript" as in the code above. It means the script contains ECMAScript text, instead of text of some other scripting language. "text/ECMAScript" can also be typed as "text/ecmascript" in lowercase.
The script element above has just one line of code. This line of code ends with a semicolon. In the line the first word you have is “document”. This is followed by a dot, then the word, “write”. You must type those two words in that order and in lowercase. You must have the dot in-between the two words.
After the word, “write” you have a pair of parentheses (opening and closing brackets). Inside the parentheses you have the phrase, 'Hello World!' in single quotes. This line, as it is, is called a statement. It prints the phrase, 'Hello World!' on the web page. The phrase can be in single quotes or double quotes.
The following is the above script in an XHTML document:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
document.write('Hello World!');
</script>
</body>
</html>
Copy and past the whole code in an empty text editor window. Save the file in a directory, giving it a name with an HTML extension, that is .htm or .html. Open the file in your browser (File|Open) and you should see 'Hello World!' displayed as the only content. You can also open the file by going to the directory and double-clicking on it.
Script Version
The version of the script we are studying in this series is, version 5, that is, ECMAScript 5.
That is it for this part of the series. We take a break here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT