Getting Started with ECMAScript 2015
ECMAScript Basics – Part 1
ECMAScript 6
Foreword: ECMAScript is a scripting language that operates at the web client’s computer in the browser, and today, at the web server.
By: Chrysanthus Date Published: 12 May 2015
Introduction
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.
Pre-Knowledge
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 links 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.
The little mathematical skills you need to understand the course is taught to you in the course.
Here, I give you the requirements to study ECMAScript from my series. You need:
- A Personal Computer with its operating system
- A Modern 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:
<script type="text/ECMAScript">
document.write('Hello World!');
</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:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
document.write('Hello World!');
</script>
</body>
</html>
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.
Note: ECMAScript can now also be used as a server script, in Node.js – see later.
That is it for this part of the series. We take a break here and continue in the next part.
Chrys
Related Links
ECMAScript BasicsECMAScript Operators
Expressions in ECMAScript
Statements in ECMAScript
Custom Objects in ECMAScript
Functions in ECMAScript
ECMAScript Date Object
The ECMAScript String Object
ECMAScript String Regular Expressions
ECMAScript Template Literal
The ECMAScript Array
ECMAScript Sets and Maps
ECMAScript Number
Scopes in ECMAScript
Mastering the ECMAScript (JavaScript) eval Function
Sending Email with ECMAScript
ECMAScript Insecurities and Prevention
Advanced Course
Advanced ECMAScript Regular Expressions
Promise in ECMAScript 2015
Generator in ECMAScript 2015
ECMAScript Module
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course
NEXT