1. Javascript core basic syntax
1. Javascript is a programming language that increases interaction effects. It was originally invented by Netscape and was finally submitted to ECMA (European Association of Computer Manufacturers). ECMA standardizes Javascript and is named Javascript.
2. Javascript is an interpreted language that can be run directly in the browser without compilation.
3. What is Javascript use?
1. You can control all elements in the web page and add, delete and modify the attributes of elements.
2. You can put dynamic text in the html.
3. Respond to events generated by users when using web pages.
4. Verify the data entered by the user.
5. Detect the user's browser.
6. Used to create cookies.
4. Three ways to create Javascript in html web pages
1. External style:
Create a file with the file name: xx.js links through <script src="xx.js"><script>
2. Embed style:
Use <script type="text/javascript"></script> in the head or body in the html or directly load it with <script></script>
3. Inline style:
Add events directly to the tag: <input onclick="alert('helloworld!')">Load
5. Javascript data type:
Its data types have two categories: 1. Primitive data types 2. Reference data types (objects)
Original data type: 1.typeof 2.number 3.string 4.boolean 5.null 6.undefined
Reference data types: (There are three types of predefined objects) 1. Native objects (Object, number, string, boolean, function, Array, Date, etc.) 2. Built-in objects: no need to display initialization (math, Global) 3. Host objects (mainly BOM and DOM)
6.BOM and DOM
BOM:Browser Object Model
DOM: Document Object Model
2. Javascript event model
1. Javascript event model: 1. Bubble type: <input type="button">When the user clicks the button: input-body-html-document-window (bubble from bottom to top) IE browser just uses bubble
2. Capture type: <input type="button">When the user clicks the button: window-document-html-body-input (from top to bottom)
After ECMA standardization, other browsers support two types, and capture occurs first.
2. Three ways to write traditional events:
1.<input type="button" onclick="alert('helloworld!')">
2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //Name function
3.<input type="button" id="input1"> //Anonymous function
The code copy is as follows:
<script>
Var button1=document.getElementById("input1");
button1.onclick=funtion(){
alert('helloword!')
}
</script>
3. Modern event writing method:
The code copy is as follows:
<input type="button" id="input1"> //Add events in IE
<script>
var fnclick(){
alert("I was 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 events in DOM
<script>
var fnclick(){
alert("I was clicked")
}
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 addition events
<script>
var fnclick1=function(){alert("I was clicked")}
var fnclick2=function(){alert("I was 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>