javaScript学习笔记概述

最新推荐文章于 2013-08-24 15:04:19 发布

hacksuper

最新推荐文章于 2013-08-24 15:04:19 发布

阅读量9.2k

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

又是一个两天，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能请求本地文件，一定要去服务器请求，好像就是这样。希望可以帮助到和我遇到同样烦恼的问题！

转于博客园，奇米影视

hacksuper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript学习笔记概述

又是一个两天，javaScript,学习了基本的一点点内容，下面就当作一个复习吧。在 HTML 页面中插入 JavaScript，使用标签。和会告诉 JavaScript 在何处开始和结束，他们之间的代码行包含了 JavaScript。从 JavaScript 访问某个 HTML 元素，我们使用 document.getElementById(id) 方法，比如下面一
复制链接

扫一扫

专栏目录