html--前端javascript初识
一、JavaScript简介
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。
JavaScript的优点：
1.简单性
JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
3.跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。
4.节省CGI的交互时间
随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。
二、JavaScript的用法：
1、HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
2、脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
3、注意：每一行代码写完要写一个分号来分割开，谨记
2.1、JavaScript代码存在形式
1 <!-- 方式一：引入外部的javascript文件， --> 2 //注意：外部的js脚本不能包含 <script> 标签 3 <script type="text/javascript" src="xxx.js"></script> 4 5 <!-- 方式二：脚本放置在<head>和<body>部分中 --> 6 <script type="text/javascript"> 7 Js代码内容 8 </script>
2.2、JavaScript代码存放位置
1、HTML的head中
2、HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
2.3、实例一：脚本放置在<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="这是我的第一个段落。";优质内容筛选与推荐>>
1、NSIndexPath 延伸
2、spring-cloud-2.x(服务提供者)
3、MySQL查询计划学习
4、32位CPU寄存器
5、【SSO单点系列】（4）：CAS4.0 SERVER登录后用户信息的返回