Getting Started with ECMAScript for Browsers
Foreword: In this part of the series, I introduce you to the programming of ECMAScript.
By: Chrysanthus Date Published: 20 Sep 2014
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at firstname.lastname@example.org. That is, contact me for the slightest problem you have about what you are reading.
Purpose of ECMAScript
HTML 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 is able to serve your users or customers. However, you might want that when the user clicks 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, making a mistake, an alert box should pop up indicating that the user made an error. In fact, such desires today are so many. These features are not offered by HTML and CSS. The solution is for a web designer to study ECMAScript.
In order to study ECMAScript, you should have basic knowledge in HTML and Cascaded Style Sheet (CSS). If you do not already have such knowledge, check the relevant link below.
Also, in order to study ECMAScript, your level of mathematics should be at least that of Middle School (British O’ Level). However, if you went through middle school and did not pass in mathematics, if you are serious, you should still understand my series (volume). If you want to study middle school mathematics, click the corresponding link at the bottom of the page.
Requirements to Study ECMAScript
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 is coded as part of the web page.
Your First ECMAScript Code
This is the script:
HTML has a double tag element called, the SCRIPT element. The sample code above shows the start and end tags of the script element. If the tags of the script element are typed without errors, you do not see the content of the tags in the HTML document at the browser; you also do not see the content of the script. 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 code, instead of code 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 between the two HTML tags. 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.
Note: the ECMAScript has to be coded inside an HTML document.
Testing the Script
The following is the above script in an HTML document:
Type, or 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.
That is it for this part of the series. We take a break here and continue in the next part.
Related LinksECMAScript Basics
Expressions and Statements in ECMAScript
Custom Object in ECMAScript
ECMAScript Global Object
The ECMAScript Array
The ECMAScript String Object
ECMAScript Regular Expressions
ECMAScript Date Object
ECMAScript Error Basics
Number Objects in ECMAScript
Inheritance in ECMAScript
Advanced ECMAScript Regular Expressions
More Related Links
Major in Website Design
Web Development Course