又是一个两天,javaScript,学习了基本的一点点内容,下面就当作一个复习吧。
在 HTML 页面中插入 JavaScript,使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束, 他们之间的代码行包含了 JavaScript。从 JavaScript 访问某个 HTML 元素,我们使用 document.getElementById(id) 方法,比如下面一个例子:
<html> <body> <h1>My First Web Page</h1> <p id="demo">My First Paragraph</p> <script> document.getElementById("demo").innerHTML="My First JavaScript"; </script> </body> </html>
本来会输出My First Paragraph,使用了innerHTML改变了输出内容,变成了My First JavaScript。
在<script> 和 </script>标签中也可以直接输出HTML内容,用下面这个方法:
<
script
>
document.write("<
p
>html语言</
p
>");
</
script
>
|
还有比较重要的是javascript的对象,但是这两天我没有遇到,就没有看,等以后需要用的时候再来看。还有重要的,也是这两天练习得最多的就是HTML DOM 事件了。像下面的代码:
<html> <body> <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> </body> </html>
浏览器中会出现“点击该文本”,点击之后,也就触发了该点击事件,会执行相应的代码,浏览器中的内容会变成“谢谢!”
也可以把上面的"this.innerHTML='谢谢!'"改成一个函数,当我们点击触发事件时,会执行相应的函数,就像下面这样子:
<html> <head> <script> function changetext(id) { id.innerHTML="谢谢!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击该文本</h1> </body> </html>
点击之后,会调用changetext()函数,当然,你可以把函数定义在别的一个地方,但是肯定需要使用<script> 和 </script>。
下面这代码是像按钮分配事件,
<html> <head> </head> <body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button id="myBtn">点击这里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
把事件给button上面,当我们点击时,触发相应事件,调用对应的函数。
当天下午写了一个ajax的hello world程序,我承认自己智商太不够用了。为了读取本地的hello world文件花了几个小时的时间都没有搞定,现在看看电影,然后来梳理一下当时的情况。当时在桌面写了两个文件,一个html文件,一个xml文件,我的xml是如下这样:
<?xml version="1.0" encoding="UTF-8"?> <HelloWorld> <data> 我是后台的HelloWorld! </data> </HelloWorld>
,然后html文件如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var xmlHttp; function createXmlHttpRequest() { if(window.ActiveXObject)//针对IE浏览器 { try{ xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//针对IE高版本 } catch(e){ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对IE低版本 } } else if(window.XMLHttpRequest)//针对非IE浏览器 { xmlHttp = new XMLHttpRequest(); } xmlHttp.onreadystatechange = function() { //读取服务器的状态 if(xmlHttp.readyState == 4) { //判断服务器状态码,如果服务器端没有错误返回200 if(xmlHttp.status == 200) { var div = document.getElementById("div1"); //接收服务器响应的xml文档 var xmlDoc = xmlHttp.responseXML; //解析服务器响应的XML文档 var data = xmlDoc.getElementsByTagName("data")[0].firstChild.nodeValue; div.innerHTML = "<b>"+data+"</b>"; } } }; xmlHttp.open("GET","http://localhost/HelloWorld.xml",true); xmlHttp.send(); // document.getElementById("div1").innerHTML="test"; } </script> </head> <body> <div align="center" id="div1" style="width:100%"></div> <div align="center" style="width:100%"> <input type="button" value="Hello World" id="btnRequest" onclick="createXmlHttpRequest()"> </div> </body> </html>
我当时的做法是把他们放在同文件夹下面。双击html文件之后,点击浏览器的按钮,我以为会顺利的出现hello world。结果,我尝试了千遍百遍,无论我怎么点击,都没有反应。用Firebug查看,html连请求包都没有发出去。但奇怪的是,要是我是请求网上的某一个文件,可以顺利的输出。折腾了好久,无奈之下,把他们放在了tomact服务器下面,结果,顺利的输出。之后网上寻找原因,是应为js能请求本地文件,一定要去服务器请求,好像就是这样。希望可以帮助到和我遇到同样烦恼的问题!
转于博客园,奇米影视