Javascript basics (I) core basic syntax and event model

One.Javascript core basic syntax

Javascript is a programming language for increasing interaction. It was first invented by netscape and finally submitted to ECMA (European computer manufacturers association), which standardized Javascript and named it Javascript.

Javascript is an interpreted language that runs directly in the browser without compilation.

3. What is Javascript for?

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

  2. You can put dynamic text in HTML.

  3. Respond to events that occur when users use the web page.

  4. Verify the data entered by the user.

  5. Detect the user's browser.

  6. Used to create cookies.

4. Three ways in which Javascript is created in HTML pages

1. External style:

Create a file named: xx.js file through < Script SRC = "xx. Js" > < Script> To link to

2. Inline style:

Use < in HTML head or body The script type = "text/javascript" > < / script> Or use directly < Script> < / script> load

3. Inline style:

Add events directly to the tag :< Input the onclick = "alert (' the helloworld! ') "> load

5.Javascript data type:

Its data types fall into two broad categories: 1. Primitive data types 2. Referential data types (objects)

Primitive data type: 1. Typeof 2. Number 3. String 4

Reference data type: there are three kinds of predefined Object) 1. The native objects (Object, number, string, Boolean, function, Array, the Date, etc.) 2. The built-in objects: don't need to display initialization (math, Global) 3. The host Object (main BOM and DOM)

6. BOM and DOM

BOM: Browser Object Model

DOM: Document Object Model

Javascript event model

1.Javascript event model: 1. Bubble type: < 2. Input type = "button" > When the user clicks the button: input-body-html-document-window (bubbling from the bottom up) IE just bubbles

      2. Capture type: < Input type = "button" > When the user clicks the button: window-document-html-body-input

2. Three ways of writing traditional events:

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

2. < Input type = "button onclick = name1 ()" > = = = = = = < Script> The function name1 () {alert (' helloword! '); } < / script> // named function

3. < Input type = "button" id = "input1" >   // anonymous function

<script>

 Var button1=document.getElementById("input1");

 button1.onclick=funtion(){

 alert('helloword!')

 }

</script>

3. Writing style of modern events:

<input type="button" id="input1">  //Add an event 
 in IE
<script>

 var fnclick(){

 alert(" I got clicked ")

 }

 var Oinput=document.getElementById("input1");

 Oinput.attachEvent("onclick",fnclick);

 --------------------------------------

 Oinput.detachEvent("onclick",fnclick);//Delete event 
 in IE
</script>

<input type="button" id="input1">  //Add an event 
 to the DOM
<script>

 var fnclick(){

 alert(" I got clicked ")

 }

 var Oinput=document.getElementById("input1");

 Oinput.addEventListener("onclick",fnclick,true);

 --------------------------------------

 Oinput.removeEventListener("onclick",fnclick);//Delete event 
 in the DOM
</script>

<input type="button" id="input1"> //Compatible with IE and DOM add events 

<script>

 var fnclick1=function(){alert(" I got clicked ")}

 var fnclick2=function(){alert(" I got clicked ")}

 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>