Article From:

Note -javascript

1.      brief introduction

JavaScriptA literal translation script language is a dynamic type, weak type, prototype based language, and built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a part of the browser and is widely used in the client’s scripting language, first in the HTML (Standard General Markup Language).Application) used on Web pages to add dynamic functions to HTML pages.

2.      Use

2.1.    start

HTML The script in it must be between < script> and < /script> tag.

Scripts can be placed in &lt, body&gt, and < head&gt parts of HTML pages.

<script> And < /script> will tell JavaScript where to start and end.

<script> The code line between &lt and /script&gt contains JavaScript:

If &lt, script&gt, and tags are placed in body, browsers will be executed when pages are loaded.


2.2.    javascriptFunction and event triggered running mechanism

The JavaScript statement in the above example will be executed when the page is loaded, but the main purpose of using JS is to dynamically change the content of the web page, not just loading time.

Usually, we need to execute code when an event occurs, such as when a user clicks a button.

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

We can put an unlimited number of scripts in the HTML document, and the script can be located in the &lt of HTML; body> or < head> in part, or at the same time in two parts.

A good practice is to integrate functions into &lt, head&gt, part, or at the bottom of the page.


You can also put scripts in external files with the extension of.Js.

Of course, this needs to be explained, setting up.Js files in the “SRC” attribute of < script>


<!DOCTYPE html>



<script src=”myScript.js”></script>




3.      grammar

3.1.    Basic grammar

JavaScript Sensitive to case and case;

JavaScript The superfluous space will be ignored.


A semicolon is used to separate the JavaScript statement.

You can use the backslash to wrap lines in text strings.

document.write(“Hello \


Such code is allowed;

3.2.    Notes

3.2.1.   Single-Line Comments

Single line annotations start with / / /

// Output Title:

document.getElementById(“myH1″).innerHTML=”Welcome to my Homepage”;

// Output paragraph:

document.getElementById(“myP”).innerHTML=”This is my first paragraph.”;


var x=5;    // Declare X and assign 5 to it

var y=x+2;  // Declare y and assign x+2 to it

This is also possible.


3.2.2.   multiline comment

The multiline annotations begin with / * to * / end.

The following example uses multi line annotation to explain the code:


The following code will be output

A title and a paragraph

And will represent the beginning of the home page


document.getElementById(“myH1″).innerHTML=”Welcome to my Homepage”;

document.getElementById(“myP”).innerHTML=”This is my first paragraph.”;


3.3.    Variable and variable declarations

var x=2;

var y=3;

var z=x+y;

A variable must begin with an alphabet

Variables can also start with $and C symbols (but we do not recommend them).

Variable names are sensitive to case sensitive (Y and Y are different variables).


Declarations (created) JavaScript variables

var carname;

3.4.    data type

Similar to python, JavaScript variables are dynamic types.

  1. Character string:
  2. Number: there is only one type, which can be decimal or not.

var x= 34; var y=34.00;

  1. Boolean: true, false
  2. Array:

var cars=new Array();





var cars=new Array(“Audi”,”BMW”,”Volvo”);


var cars=[“Audi”,”BMW”,”Volvo”];



  1. Object:

The object is separated by the braces. In parentheses, the properties of the object are defined in the form of names and value pairs (Name: value). Attributes are separated by a comma:

var person={firstname:”Bill”, lastname:”Gates”, id:5566};

Object property addressing mode:



3.4.1.   Declarations variable type

When declaring new variables, you can declare the type by using the keyword “new”.

var carname=new String;

var x=      new Number;

var y=      new Boolean;

var cars=   new Array;

var person= new Object;


3.4.2.   Variable scope of action, life cycle

Similar to python, not explained


3.5.    function

The function is the code block wrapped in curly braces. The keyword function is used in front of it.

function functionname()


Here is the code to be executed




3.6.    Process control

  1. if…else
  2. switch #Similar to case under c



case 1:

  Execute code block 1


case 2:

  Execute code block 2



  n Code that does not execute simultaneously with case 1 and case 2


  1. Cyclic for, while, break,


3.7.    exception handling

try The statement tests the error of the code block.

catch Statement processing error.

throw The statement creates a custom error.


function myFunction()




  var x=document.getElementById(“demo”).value;

  if(x==””)    throw “empty”;

  if(isNaN(x)) throw “not a number”;

  if(x>10)     throw “too high”;

  if(x<5)      throw “too low”;




  var y=document.getElementById(“mess”);

  y.innerHTML=”Error: ” + err + “.”;





<h1>My First JavaScript</h1>

<p>Please input a number between 5 and 10:</p>

<input id=”demo” type=”text”>

<button type=”button” onclick=”myFunction()”>Test Input</button>

<p id=”mess”></p>

4.      javscript HTML DOM

4.1.    Lookup element

4.1.1.   Find elements through ID

This example looks for the id= “intro” element:

var x=document.getElementById(“intro”);

4.1.2.   Lookup the HTML element by the label name

This example looks for the elements of id= “main”, then looks for all &lt in “main”; p> element:

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);


4.2.    Modifies the content

4.2.1.   document.write()

document.write() It can be used to write content directly to the HTML output stream.





Output: the output date and time of the above statement

4.2.2.   innerHTML

Modifying element content

document.getElementById(“p1″).innerHTML=”New text!”;


4.2.3.   Change the HTML property

To change the properties of HTML elements, use this syntax:

document.getElementById(id).attribute=new value



4.2.4.   Changing style

To change the style of the HTML element, use this syntax:

document.getElementById(id) style




4.3.    HTML DOMEvent

4.3.1.   Respond to an event

We can execute JavaScript when events occur, such as when users click on the HTML element.

If you want to execute code when the user clicks on an element, add a JavaScript code to a HTML event attribute:


HTML Examples of events:

When the user clicks on the mouse

When the web page has been loaded

When the image has been loaded

When the mouse moves to the element

When the input field is changed

When submitting the HTML form

When the user triggers the button


4.3.2.   HTML Event attributes

If you want to assign events to HTML elements, you can use event attributes.


Assign the onclick event to the button element:

<button onclick=”displayDate()”>Click here < /button>


4.3.3.   Using HTML DOM to assign events

HTML DOM Allows you to assign events to HTML elements by using JavaScript:


Assign the onclick event to the button element:



4.3.4.   Event description

  1. 1.      onload And onunloadEvent

onload And onunload events are triggered when the user enters or leaves the page.

onload Events can be used to detect the browser type and browser version of the visitor, and to load the correct version of the web page based on this information.

onload And onunload events can be used to handle cookie.


  1. 2.      onchange Event

onchange Events are often used in combination with validation of input fields.

Here is an example of how to use onchange. When the user changes the contents of the input field, the upperCase () function is called.


<input type=”text” id=”fname” onchange=”upperCase()”>


  1. 3.      onmouseover And onmouseoutEvent

onmouseover And onmouseout events can be used to trigger functions when the mouse moves over the HTML element or moves out of the element.


  1. 4.      onmousedown、onmouseup And onclickEvent

onmousedown, onmouseup And onclick forms all parts of the mouse click event. First, when the mouse button is clicked, the onmousedown event is triggered. When the mouse button is released, the onmouseup event is triggered. Finally, when the mouse hits the mouse, it triggers the on.Click event.



  1. onfocus

Triggering events when the focus is obtained;




——Appendix – —-

5.      javascriptlibrary

Common JavaScript libraries / frameworks have






jQuery It is the most popular JavaScript framework.

It uses CSS selectors to access and manipulate HTML elements (DOM objects) on Web pages.


6.      JAVASCRIPT/DOMobject

This section gives a brief list of JAVASCRIPT/DOM objects

6.1.    JavaScript Object reference manual



6.2.  Browser Object reference manual


6.3.    HTML DOM Object reference manual

This reference manual describes the properties and methods of each object and provides examples.














Input Button

Input Checkbox

Input File

Input Hidden

Input Password

Input Radio

Input Reset

Input Submit

Input Text











Link of this Article: Note -javascript

Leave a Reply

Your email address will not be published. Required fields are marked *