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>");

 Try It! 

lamp            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>

 Try It! 

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

 Try It! 

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">

bulb_example

Use above codes, and click on the light bulb to turn the light on or off.

 Try It! 

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

 Try It! 

JavaScript: Validate Input

JavaScript is often used to validate user input.

Example

if isNaN(x) {
     alert("not a number");
}

 Try It! 

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");
}

 Try It! 

Do You Know?

lamp            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.