A, JavaScript Introduction
JavaScript is an object-based and event-driven and has a scripting language safety performance, with JavaScript, can make the page come alive. Its purpose is to use the hypertext markup language HTML, Java scripting language to achieve link together multiple objects in a web page, customers interact with the network, which can develop client applications. It is implemented in the standard HTML language embedded or transferred.
JavaScript advantages:
1. Simplicity
JavaScript is a scripting language, it uses a small block of programming to achieve, like other scripting languages, JavaScript is an interpreted language has been the same, it provides a simple development process. Its basic structure with C, C ++, VB, Delphi is very similar. But it is not like these languages, you need to compile, but is interpreted line by line in a program is running. It combines with the HTML markup together, so as to facilitate the user using the operation.
2. dynamic
JavaScript is dynamic, it can respond directly to the user or customer input, without going through the Web service program. It reflects the user's response, it is carried out using an event-driven way. The so-called event-driven, meaning the implementation of some kind of action generated by the operation of the home page, called "event." For example, pressing the mouse button, move the window, select the menu and so can be seen as an event. When an event occurs, it may cause the appropriate incident response.
3. Cross-platform
JavaScript is dependent on the browser itself, regardless of the operating environment, as long as the computer running the browser and JavaScript-enabled browser can execute properly.
4. Save time interaction of CGI
With the rapid development of the WWW service WWW server has promised to provide viewers with the exchange, indeed view of identity, and so on-demand services in this work usually consists of CGI / PERL preparation of the corresponding interface program interacts with the user to carry out. Obviously, through interaction with the user's network on the one hand increases the network traffic, on the other hand affect the service performance of the server. When the server runs a CGI to a user, it needs a process for the service, it should take up server resources (such as CPU service, memory consumption, etc.), an error occurs if the user fill in a form, interactive services takes time will increase accordingly. The more hot spots hosts interact with the user being accessed, the greater the impact server performance.
JavaScript is a client-based browser language, the user fill in a form in a browser, the verification process of interaction only be interpreted by the browser to complete the redeployment of the HTML document JavaScript source code, even if you must call the CGI part, the browser will only submit user input information to a remote server after verification, greatly reducing server overhead.
Two, JavaScript usage:
1, HTML script must be located between the <script> and </ script> tag.
2, the script may be placed in the HTML page <body> and <head> section.
3, note that: each line of code written to write a semicolon separated, remember
2.1, JavaScript code exists in the form of
1 <-! Way: introduction of external javascript files, -> 2 // NOTE: external script does not contain js < Script > tag . 3 < Script type = " text / javascript " the src = " xxx.js " > </ script > . 4 . 5 <-! way: script at <head> and <body> section -> . 6 < script type = "text / JavaScript" > . 7 Js content codes . 8 </ script >
2.2, JavaScript code is stored position
1, HTML in the head
2, the bottom of the body of the HTML code block (recommended)
Since Html code that is executed from top to bottom, if the Head of js code takes seriously, it will lead the user can not see the page for a long time, if at the bottom of the block body, even if it takes serious js code, it will not users see the impact of the results page, just slow it js achieve special effects.
2.3, an example: the script at block <head>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript用法1</title> <!-- 脚本放置在<head>块内--> <script type="text/javascript"> function show() { document.getElementById("show").innerText="我在努力学习javascript"; } </script> </head> <body> <p id="show">my name is yusheng_liang</p> <button type="button" onclick="show()">点我一下</button> </body> </html>
实例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript用法1</title> </head> <body> <p id="show">my name is yusheng_liang</p> <button type="button" onclick="show()">点我一下</button> <!-- 脚本放置在<body>块内,放到了页面代码的底部--> <script type="text/javascript"> function show() { document.getElementById("show").innerText="我在努力学习javascript"; } </script> </body> </html>
三、JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
3.1、使用 window.alert() 弹出警告框实例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript输出</title> </head> <body> <h1>这是我的第一个web页面</h1> <script type="text/javascript"> window.alert(5+6); </script> </body> </html>
结果图示：
3.2、使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript输出</title> </head> <body> <p id="show">my name is yusheng_liang</p> <button type="button" onclick="show()">点我一下</button> <!-- 脚本放置在<body>块内,放到了页面代码的底部--> <script type="text/javascript"> function show() { document.getElementById("show").innerText="我在努力学习javascript"; } </script> </body> </html>
3.3、使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript输出</title> </head> <body> <h1>这是我的第一个web页面</h1> <script type="text/javascript"> document.write(Date()) </script> </body> </html>
3.4、使用 console.log() 写入到浏览器的控制台。
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript输出</title> 6 </head> 7 <body> 8 <h1>这是我的第一个web页面</h1> 9 10 <script type="text/javascript"> 11 a = 5;
b = 6;
c = a + b;
console.log(c); 12 </script> 13 14 </body> 15 </html>
四、javascript注释
在JS中也有注释，//表示单行注释，/* ...注释内容... */表示多行注释，此注释仅在Script块中生效
// 输出标题： document.getElementById("myH1").innerHTML="欢迎来到我的主页"; // 输出段落： document.getElementById("myP").innerHTML="这是我的第一个段落。";
/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="欢迎来到我的主页"; document.getElementById("myP").innerHTML="这是我的第一个段落。";