Learning Source: https://www.runoob.com/js/js-tutorial.html

JavaScript Tutorial

JavaScript is a Web programming language.

All modern HTML pages using JavaScript.

JavaScript is very easy to learn.

This tutorial will teach you from beginner to advanced JavaScript knowledge.

JavaScript Introduction

JavaScript is the Internet's most popular scripting language, the language can be used for HTML and web, but also widely used for server, PC, notebook computers, tablet PCs and smart phones and other equipment.

document.write ( " <h1 of> This is a header </ h1 of> " ); 
document.write ( " <P> This is a paragraph </ P>. " );

JavaScript: reaction to events

<the Button of the type = " the Button " onclick = " Alert ( 'Welcome!') " > Point me! </ button>

JavaScript: changing the HTML content

Using JavaScript to handle HTML content is very powerful.

= document.getElementById the X-( " Demo " );   // Find element 
x.innerHTML = " the Hello JavaScript " ;     // change the content

JavaScript: changing the HTML image

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

JavaScript: changing the HTML style

Change the style of HTML elements, HTML attributes belonging to alter variants.

= document.getElementById the X-( " Demo " )   // find the elements 
x.style.color = " # FF0000 " ;            // change style

JavaScript: input validation

JavaScript is often used to verify the user's input.

IF isNaN (X) { 
    Alert ( " not a number " ); 
}

JavaScript Usage

HTML scripts must be located between the <script> and </ script> tag.

The script may be placed in an HTML page <body> and <head> section.

<Script> 
Alert ( " My first JavaScript " );
 </ Script>

<Body> in JavaScript

In this example, JavaScript will write the text to the HTML <body> when the page loads:

Examples

Those examples may use old type = "text / javascript" in the <script> tag. Now you do not have to do so. JavaScript is the default scripting language for all modern browsers and HTML5 in.

　　 <body>
        <script>
            document.write("aa");
        </script>
    </body>

JavaScript functions and events

JavaScript statements in the above example, will be executed when the page loads.

In general, we need to execute code when an event occurs, such as when the user clicks the button.

If we put JavaScript code in the function, you can call this function when the event occurs.

You will learn more about JavaScript functions and events in a later chapter.

The <head> or <body> of JavaScript

You can put in an unlimited number of scripts in an HTML document.

HTML scripts may be located in the <body> or <head> section, or exist in two portions.

The usual practice is to function into the <head> section, or on the bottom of the page. So that they can be placed into the same position, it does not interfere with the content of the page.

<Head> JavaScript functions

In this example, we placed a JavaScript function HTML page <head> section.

This function is called when the button is clicked:

　　<script>
        function myFunction(){
            document.getElementById("demo").innerHTML="Show";
        }
    </script>
    <body>
        <h1 id="demo"></h1>
        <button type="button" onclick="myFunction()">点击</button>
    </body>

<Body> JavaScript functions

In this example, we placed a JavaScript function <body> part of the HTML page.

This function is called when the button is clicked:

External JavaScript

You can also save the script to an external file. External code file typically contains a plurality of pages used.

File extension is external JavaScript file .js.

To use an external file, set the .js file "src" attribute <script> tag:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

You can place scripts in the <head> or <body>, the place <script> tag in the script and external references scripts run exactly the same effect.

myScript.js document code is as follows:

myFunction function () 
{ 
    document.getElementById ( " Demo " ) .innerHTML = " My first JavaScript function " ; 
}

JavaScript output

JavaScript does not have any function or print output.

JavaScript displays data

JavaScript may output data in different ways:

Use window.alert () pop-up warning box.
Using document.write () method to write the contents of an HTML document.
Use innerHTML written to the HTML element.
Use console.log () is written to the browser console.

Manipulate HTML elements

To access an HTML element from JavaScript, you can use document.getElementById ( the above mentioned id ) method.

Please use the "id" attribute to identify HTML elements, and innerHTML to get the contents or insert elements:

<! DOCTYPE HTML> 
<HTML> 
<body> 

<h1> My first Web page </ h1> 

<the p-the above mentioned id = " Demo " > My first paragraph </ the p-> 

<Script> 
document.getElementById ( " Demo " ) .innerHTML = " paragraph modified. " ;
 </ Script> 

</ body> 
</ HTML>

JavaScript statements can be executed in more than a web browser (in the <script> tag):

document.getElementById ( "demo") is to use the id attribute to find HTML elements JavaScript code.

innerHTML = "paragraph modified." is used to modify HTML content element (the innerHTML) JavaScript code.

<! DOCTYPE HTML> 
<HTML> 
<body> 

<h1> My first Web page </ h1> 

<the p-> my first paragraph. </ P> 

<Script> 
document.write (a Date ());
 </ Script> 

</ body> 
</ HTML>

Written to the console

If your browser supports debugging, you can use console.log () method to display the value JavaScript in your browser.

The browser using F12 to enable debug mode, click on the "Console" menu in the debug window.

<! DOCTYPE HTML> 
<HTML> 
<body> 

<h1 of> My first Web page </ h1 of> 

<Script> 
A = . 5 ; 
B = . 6 ; 
C = A + B; 
the console.log (C);
 < / Script> 

</ body> 
</ HTML>

Getting Started with Java Script