What is the basic syntax of JS and JS

Date: December 15, 2016

Talk about basic grammar first;

Most are to operate the form;

JS dynamic effects and data interaction (Ajax? ）

JS also has its own API

JS most of the DOM operations are for input.

Case study, a simple check on the registration page, a box for null values or incorrect values, and then learn to write the data on the page later.

JS is a scripting language, lightweight, can be inserted into the HTML page to run the language, and Java half-penny relationship is not.

JS has three pieces of content:

ECMAScript basic syntax for Java

BOM Browser Object Model

DOM Document Object Model

jquery is used a lot later, but it's important to understand the basic syntax of JavaScript first.

JS can make the page move up, improve interactivity.

All types are replaced with Var, just like the object in Java.

<script type= "Text/javascript" >
Console.log ("Hello, world!");
</script>

Add JS tags to the head of the HTML

If there is an error in JS, then the subsequent statements will not run.

JS variable definition

JS operator

var a = "a";

Console.log (a-2); Print Nan

Console.log ("3"-2); The print is 1

Console ("3" +0+2); It's 5 printed.

The JS array can store any type of data.

The true and false judgment of an expression:

JS Array also has the length property

JS Array traversal: for (i in arr) {}

I is the index of ARR, from 0 to Arr.length ()-1.

JS method

Declaration: Function test () {} This is the method of JS.

function Fun (obj) {} Here obj is the equivalent of a formal parameter, no more than a dead var.

<input type=text onblur= "Show (This)"/> This refers to this input, so to do.

<input type= "text" value= "xx" class= "xx is the great God! "id=" input "name=" newtow\ ' s name "onblur=" Show (This.value) "onclick=" Show (this.name) "onbeforecopy=" Show (This.id) " Onbeforecut= "Show (This.class)"/>

The pass parameter is generally this, and then the method faces the object to operate. Oh, this is quite fun, did not understand Ah, was JS pit miserable.

I feel JS can take HTML as Tangram to operate, in fact, I have never played Tangram.

Can't I include an exclamation mark in a class plane?

JS is case-sensitive;

JS is the language of the weak variable type, if the type is not equal to no type;

JS semicolon is optional;

JS annotations are the same as Java annotations;

The declaration of the JS variable is VAR, which can be followed by one or more variables after Var;

JS basic data type and reference data type, the original type only 5: undefined,boolean,number,string,null;

= = = (all equals) is equal when the value is equal and the same type, = = Equal if the value is consistent.

JS Common development steps: usually triggered by the event, and all trigger a function, so we need to define a function, get control of the object to be controlled, and then manipulate the object.

Learn about the events commonly used in JS

How to introduce JS:

1. Write directly within the page

<script></script>

2. Compile JS into JS file, then introduce to the page

There are two ways to use JS in a Web page:

First: Write directly on the <Script> </Script> tag in the page;

The second type: the introduction of JS from the outside:

<script src=>

</Script>

Chestnut: JS Complete simple validation of the page form

<form Action=action?action=heheda method=post onsubmit=return checkform ();>

</form>

There are many practical ways to document objects:

getElementById ()

Getelementbyname ()

Getelementbytagname ()

There are two types of regular expressions for JS:

The first is to use a string to validate, string

The second is to use the regular expression object to verify that the REGEXP

Two can go to match the regular, one is the match method in string, and the other is the test method in RegExp.

Learn how to break points on JS

In the case of a checkbox, the value inside the checkbox can be onsubmit into a string and sent to the background.

JS is also an object-oriented language, the bottom is object-oriented; If you have a chance, you can find some JS number.

When an array is passed back to the table, the address value of the array is passed, so the value of the checkbox is then spelled into a string.

function Checkform () {
var clearinfo = document.getelementsbyclassname ("check");
var i = 0;
for (i=0; i<clearinfo.length; i++) {
Clearinfo[i].textcontent = "";
}
var username = document.getElementById ("username"). Value;
var hu = document.getElementById ("userid");
if (username = = "") {
hu.textcontent= "User name is empty! ";
return false;
}
var passwd = document.getElementById ("password"). Value;
var passwdid = document.getElementById ("Passwdid");
if (passwd = = "") {

Passwdid.textcontent = "Password is empty!";
return false;
}
var repasswd = document.getElementById ("Repassword"). Value;
var repasswdid = document.getElementById ("Repasswdid");
if (repasswd! = passwd) {

Repasswdid.textcontent = "Two times input password inconsistent!";
return false;
}
var email = document.getElementById ("Getemail"). Value;
var checkemail = document.getElementById ("Emailid");
if (!/^ ([a-za-z0-9_-]) [email protected] ([a-za-z0-9_-]) + (. [ A-za-z0-9_-]) +/.test (email)) {

checkemail.textcontent = "Email format does not meet the requirements!" ";
return false;

}
var C1 = document.getElementById ("C1"). Checked;
var C2 = document.getElementById ("C2"). Checked;
var C3 = document.getElementById ("C3"). Checked;
var C4 = document.getElementById ("C4"). Checked;
Alert (c1 + "#" + C2 + "#" + C3 + "#" + C4);
if (C1 = = False && C2 = = False && C3 = False && C4 = = False) {
var check = document.getElementById ("Checkid");
Alert (c1 + "#" + C2 + "#" + C3 + "#" + C4);
check.textcontent = "Please select at least one item!" ";
return False
}
Jiguan = document.getElementById ("Jiguan"). Selected;
alert (Jiguan);
if (Jiguan = = True) {
var Jiguanid = document.getElementById ("Jiguanid");
Jiguanid.textcontent= "Please choose your hometown! "
return false;
}
}

In JS, some of the object's properties and objects are also separated by an object, such as the Div has a style property, the style below the property height and weigth, not through the div to directly manipulate its height, But to do so by: Div.style.height.

In addition, the function is usually passed directly into the object, and then in the function to get or manipulate various properties of the object, instead of just passing in the object's properties, I feel a little object-oriented!

JS to achieve the scrolling effect of the picture

Experience the effect of JS to make the page move up.

The Dom window object in JS is used.

Timing function of Window object:

SetInterval (), every few milliseconds to execute an expression, will be executed;

SetTimeout () is executed only once, but can be performed by calling itself.

SetInterval ("Change ()", 5000); The code inside the double quotes is executed as a JS code.

SetTimeout ("Change ()", 5000); The timers actually use less.

In the onload () event of <body>, the method is to change the value of the SRC attribute of the image, or it can be written as an anonymous function.

Loading order of HTML and JS and CSS

The difference between writing and writing on the outside of the function is that the variables are referenced to content that has not yet been loaded.

Timed pop-up ads

To use the Display property of CSS

Two timing all want to have words put in a onload inside.

<script src= "Js/check.js" ></script>
<script>
var time;
Window.onload = function () {
Time = Window.setinterval ("Show ()", 10);
};
Function Show () {
var addiv = document.getElementById ("Addiv");
AdDiv.style.display = "block";
Window.clearinterval (time);
Time = Window.setinterval ("Hide ()", 10);
}
function Hide () {
var addiv = document.getElementById ("Addiv");
Addiv.style.display= "None";
Window.clearinterval (time);
Time = Window.setinterval ("Show ()", 10);
}
</script>

Introduction to BOM and Dom objects

BOM objects are:

1. Window

2. Navigator

3. Screen

4. History

5. Location

Dom objects are:

1. Document

2. Element

3. Attribute

4. Event

5 objects in a BOM in JS:

1. Window: Represents the browser of the windows, upper-level object

Window's confirm () method is also useful.

Can be manipulated based on the return true or false.

Describes the Window object

Location can achieve a page jump effect, there is an href method to jump page, location.href

Location.reload () can be used at the time of refresh;

The main memory of history is go method, history.go;

The Check property for the note option such as checkbox or option is true or false, not checked or otherwise.

Make sure that Tomcat is turned on and the project is left in Tomcat when you visit the page of the Tomcat server.

What is the basic syntax of JS and JS