Introduction to JavaScript
JavaScript is the most popular scripting language on the Internet. This language can be used in HTML and web, and can be widely used in servers, PCs, laptops, tablets, and smartphones.
JavaScript is A Scripting Language
JavaScript is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
After JavaScript is inserted into the HTML page, it can be executed by all modern browsers.
JavaScript is easy to learn.
What You Will Learn
Below are the main things you will learn in this tutorial.
JavaScript: write directly to the HTML output stream
Example
document.write("<h1>This is a title</h1>"); document.write("<p>This is a paragraph.</p>");
![]() | You can only use document.write while HTML is loading. If you use this method after the document is loaded, the entire document will be overwritten. |
---|
JavaScript: Reacting to Events
Example
<button type="button" onclick="alert('Welcome!')">Click me!</button>
The alert() function is not commonly used in JavaScript, but it is very convenient for code testing.
The onclick event is just one of the many events you will learn about them in this tutorial.
JavaScript: Change HTML Content
Using JavaScript to process HTML content is a very powerful feature.
Example
x = document.getElementById("demo"); //Find element x.innerHTML = "Hello JavaScript"; //Change content
You will often see document.getElementById("some id ") . This method is defined in HTML DOM.
The DOM (Document Object Model) is the official W3C standard for accessing HTML elements.
You will learn about HTML DOM in multiple chapters of this tutorial.
JavaScript: Change HTML Image
This example will dynamically change the source (src) of HTML <image>:
Light up the bulb
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/demos/pic_bulboff.gif"; } else { element.src="/demos/pic_bulbon.gif"; } } </script> <img loading="lazy" id="myimage" onclick="changeImage()" src="/demos/pic_bulboff.gif" width="100" height="180">
Use above codes, and click on the light bulb to turn the light on or off.
The function of the code element.src.match("bulbon") in the above example means: search <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height ="180">, to check whether the value of the src attribute in the src, contains the string bulbon.
If the string bulbon exists , the image src is updated to bulboff.gif , and if it does not match the bulbon string, the src is updated to bulbon.gif
JavaScript can change most attributes of any HTML element, not just images.
JavaScript: Change HTML Style
Changing the style of HTML elements is a variant of changing HTML attributes.
Example
x=document.getElementById("demo") //Find the element x.style.color="#ff0000"; //Change the style
JavaScript: Validate Input
JavaScript is often used to validate user input.
Example
if isNaN(x) { alert("not a number"); }
The above examples are just ordinary verification. If you want to use it in a production environment, you need to make strict judgments. If you enter a blank or continuous blank isNaN, it cannot be distinguished. You can add regular expression to verify (the following chapters will explain):
Example
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert("not a number"); }
Do You Know?
![]() | JavaScript and Java are two completely different languages, both in concept and design. Java (invented by Sun) is a more complex programming language. ECMA-262 is the official name of the JavaScript standard. JavaScript was invented by Brendan Eich. It appeared in Netscape in 1995 (the browser has stopped updating), and was adopted by ECMA (a standards association) in 1997. |
---|
ECMAScript Version
JavaScript has been standardized by ECMA (European Computer Manufacturers Association) through ECMAScript.
Years | Version | Description |
---|---|---|
1997 | ECMAScript 1 | First version |
1998 | ECMAScript 2 | Version change |
1999 | ECMAScript 3 | Add regular expressions to add try / catch |
ECMAScript 4 | Not released | |
2009 | ECMAScript 5 | Add "strict mode", add JSON support for strict mode |
2011 | ECMAScript 5.1 | Version change |
2015 | ECMAScript 6 | Add classes and modules |
2016 | ECMAScript 7 | Add exponent operator (**) add Array.prototype.includes |
ECMAScript 6 is also known as ECMAScript 2015.
ECMAScript 7 is also known as ECMAScript 2016.