JavaScript Basics (i) Core basics syntax and event Model _ basics

A. JavaScript core basic syntax

1.Javascript is a programming language that adds interactivity, originally invented by Netscape, and finally submitted to ECMA (European Computer Manufacturers Association), which ECMA JavaScript, which is named JavaScript.

2.Javascript is an interpretive language that can be run directly in the browser without compiling it.

What is the purpose of 3.Javascript?

1. Can control all the elements in the Web page, add. Delete. Modify the attributes of an element.

2. You can put dynamic text in HTML.

3. Respond to events that occur when a user uses a Web page.

4. Verify the data entered by the user.

5. Detect the user's browser.

6. For creating cookies.

4.Javascript three ways to create in HTML Web pages

1. External style:

Create a file named: Xx.js files are linked by <script src= "Xx.js" ><script>

2. Inline style:

Use <script type= "Text/javascript" in the head or body in HTML ></script> or direct use <script></script> load

3. Inline style:

Add an event directly to the label: <input onclick= "alert (' helloworld! ')" > Loading

5.Javascript Data type:

Its data type has two main categories: 1. Raw data type 2. Reference data type (object)

Raw data type: 1.typeof 2.number 3.string 4.boolean 5.null 6.undefined

Reference data type: (three predefined objects) 1. Native Objects (object,number,string,boolean,function,array,date, etc.) 2. Built-in objects: Do not need to display initialization (Math,global) 3. Host Object (mainly BOM and DOM)

6.BOM and Dom

BOM: Browser Object Model Browser

DOM: Document Object Model

Two. JavaScript's event model

1.Javascript Event Model: 1. Bubble type: <input type= "button" > when the user clicks on the button: Input-body-html-document-window (bubbles up from the bottom) IE browser is just bubbling

2. Capture type: <input type= "button" > when the user clicks the button: Window-document-html-body-input (from top down)

After ECMA standardization, the other browsers support two types, and the capture occurs first.

2. Three ways of writing traditional events:

1.<input type= "button" onclick= "alert (' helloworld! ')" >

2.<input type= "button onclick=name1 ()" >======<script>function name1 () {alert (' helloword! ');} </script>//Famous function

3.<input type= "button" id= "INPUT1" >//anonymous function

Copy Code code as follows:

<script>
Var Button1=document.getelementbyid ("input1");
Button1.onclick=funtion () {
Alert (' helloword! ')
}
</script>

3. How to write modern events:

Copy Code code as follows:

Add events <input type= "button" id= "INPUT1" >//ie
<script>
var Fnclick () {
Alert ("I was clicked on")
}
var Oinput=document.getelementbyid ("Input1");
Oinput.attachevent ("onclick", Fnclick);
--------------------------------------
Oinput.detachevent ("onclick", Fnclick); Delete event in//ie
</script>
Add events <input type= "button" id= "INPUT1" >//dom
<script>
var Fnclick () {
Alert ("I was clicked on")
}
var Oinput=document.getelementbyid ("Input1");
Oinput.addeventlistener ("onclick", fnclick,true);
--------------------------------------
Oinput.removeeventlistener ("onclick", Fnclick); Delete event in//dom
</script>
<input type= "button" id= "INPUT1" >//Compatible with IE and DOM add events
<script>
var fnclick1=function () {alert ("I was clicked on")}
var fnclick2=function () {alert ("I was clicked on")}
var Oinput=document.getelementbyid ("Input1");
if (document.attachevent) {
Oinput.attachevent ("onclick", Fnclick1)
Oinput.attachevent ("onclick", Fnclick2)
}
Else (Document.addeventlistener) {
Oinput.addeventlistener ("click", Fnclick1,true)
Oinput.addeventlistener ("click", Fnclick2,true)
}
</script>