table of Contents
Brief introduction
JavaScript is a browser scripting language, have the characteristics of dynamic languages and interpreted two, in addition to his name, and Java does not matter much.
use
Generally it is used to perform the following operations:
- Manipulate HTML elements
- Handling user access to the HTML element event
- Validate user input
- Access the user's browser
- Create cookies (small browser persistent data)
- There are many new uses
composition
General browser supports JavaScript language consists of three different parts of:
JavaScript core language (ECMAScript): JavaSrcript grammar and basic object;
Document Object Model (DOM): processing methods and interfaces HTML document;
browser object model (BOM) : browser-related methods and interfaces.
ECMAScript
JavaScript ECMAScript specification describes the lexical data type, statement, keywords, reserved words and operators, the JavaScript core object.
Document Object Model (DOM tree)
DOM is HTML documents and XML document application program interface (API), DOM will plan the entire document into a document consisting of a node level. For example, the following code:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
At the same time can be changed by modifying the DOM tree node style. example:
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function changeStyle(){
$("#firstLabel").css("color","red");
}
</script>
</head>
<body>
<h1 id="firstLabel">hello world</h1>
<button onclick="changeStyle();">修改CSS</button>
</body>
</html>
After clicking the button, the text turns red:
Browser Object Model BOM
Of the browser window to access and operate, only a part of the BOM JavaScript, without any relevant standards. BOM main browser window and frame processing associated with browser JavaScript extensions are seen as part of the BOM. These extensions include:
- The new pop-up browser window
- Mobile, close the browser window and resizing of windows
- Web browser provides detailed information
- It provides users details screen resolution screen objects
- Support for access to the cookie
- IE extends the BOM, the added class ActiveXObject, ActiveX objects can be instantiated by JavaScript
position
child element of the head element script
Child elements may be defined in the script in the head of the function and the code segment .
Javascript function defined in the script sub-element head, the entire document can be referenced. example:
<!DOCTYPE html>
<html>
<head>
<title>在head中定义js函数</title>
<script language="javascript" type="text/javascript">
function fun(){
document.write("<h1>Hello World</h1>");
}
</script>
</head>
<body>
<button type="button" onclick="fun();">按我</button>
</body>
</html>
Snippet may be defined in the head, but this code fragment will be executed when the head loading finish, and then to load the body.
script sub-elements of the body element
Script can be defined in the same sub-elements in the body functions and snippets .
<html>
<body>
<script language="javascript" type="text/javascript" >
document.write("<h1>helllo world</h1>");
</script>
</body>
</html>
Because the browser is parsing html from top to bottom, so on the head of js code to read and execute (prior to loading on the implementation of the body) before the page is loaded, and js code on the body of the tail, reads and executes after the entire page loads.
External JavaScript
The JavaScript code snippet written to a function or external file, then save the file suffix .js, and code segments js function is introduced by the src attribute of the script tag. Examples:
hello.html
<!DOCTYPE html>
<html>
<head>
<title>外部js</title>
<script src="./js/hello_world.js"></script>
</head>
<body>
<button type="button" onclick="fun();">按我</button>
</body>
</html>
hello_world.js
function fun(){
document.write("<h1>Hello World</h1>");
}
