javascript入门

来源：互联网发布：外貌协会知乎编辑：程序博客网时间：2024/05/17 22:30

JavaScript是什么呢？

JavaScript是一种很流行的脚本语言，虽然名字与java很像，不过完全不同于java。

它可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript开发需要什么环境呢？

只需要：普通的记事本和普通的浏览器

JavaScript基本结构：

JavaScript有三种基本结构如下：

1.独立的js脚本文件形式

这种方法将JavaScript程序语句保存到一个独立的js文件中，通过<script>标记在HTML文件中进行调用。如下示例代码：

文件一 first.js：

document.write("<b>Hello JavaScript</b>")

文件二 first.html :

<html>

<head>

<title>这是第一个JavaScript文件</title>

<body>

</script>

</body>

</head>

</html>

程序 first.html 通过<script>标记将JavaScript文件 first.js 嵌入到当前HTML文件中。浏览器运行文件时，从上至下解析文件，当解析到script标记时，逐句执行js文件中的程序。完成所有执行后，浏览器会再回到html文件中执行它的其他标记。

2.通过<script>标记和HTML结合

第一种方式适用于使用频率较高的JavaScript程序；而对于使用程度不高的JavaScript程序，可以采用方法二，直接将<script>块嵌入HTML文件，<script>语句块中的JavaScript程序可以在整个页面中被重用。代码示例如下：

文件 second.html :

<html>
    <head>
        <title>第二个JavaScript程序</title>
    </head>
    <body>
        <h1>这是body前面</h1>
        <script language="JavaScript">
            document.write("<b>Hello JavaScript</b>")
        </script>
        <h2>这是body后面</h2>
    </body>
</html>

这段代码中，通过<script>标记块将document.write 语句嵌套到HTML文件中，程序效果与1 中完全相同。

3.通过事件属性和HTML结合

这是一种特殊情况，它将JavaScript程序语句直接写在HTML标记的事件属性中，而不需要<script>标记。这是一种灵活的JavaScript程序设计方法。示例代码如下：

third.html

<html>
    <head>
        <title>第二个JavaScript程序</title>
    </head>
    <body>
        <h1>这是body1</h1>
        <h2>这是body2</h2>
        <input type="button" onclick="i=20;i=i+100;alert(i)"value="click me"/>
    </body>
</html>

程序中<input type="button">声明了一个button控件，其onclick属性表示button的单击事件处理程序，其中包括3条JavaScript语句：声明变量 i ；将 i 值增加100；使用alert系统函数显示 i 值。

JavaScript函数：

函数是JavaScript中最基本的代码组织单位。形式上，函数体现为一个命名了的带参数代码块，其语句只有在函数被调用才会执行，并将执行结果传给调用者。Javascript中的函数定义关键字就俩：function和return，前者申明函数，后者返回值给调用者。示例代码如下：

<html>
    <head>
        <title>第四个JavaScript程序</title>
        <script language="JavaScript">
            function sqrt(x)
            {
               return x*x;
            }
        </script>
    </head>
    <body>
        <h1>这是body前面</h1>
            <script language="JavaScript">
               var i=100;
               var result=sqrt(i);
                document.write("sqrt(100)="+result);
            </script>
        <h2>这是body后面</h2>
    </body>
</html>

程序中<head>标记定义了一个平方函数，<body>标记通过<script>标记块调用计算100的平方，并显示。

JavaScript事件：

javascript是一种基于对象的语言，它支持面向对象中的事件。所谓事件就是，事件发生者向事件处理者传递事件的现场信息的一种机制。例如button的Click事件就是button将鼠标click时的位置和状态信息传递给button所在页面的一种机制。

先介绍一下标记click事件，示例代码如下：

<html>
    <head>
        <title>第五个JavaScript程序</title>
        <script language="JavaScript">
            function bclick(strpath)
            {
               return confirm("真的要访问此链接吗？");
            }
        </script>
    </head>
    <body>
        <h1>这是body前面</h1>
        <a href="http://www.renren.com/308038848/profile" onclick="return bclick()">我的人人网</a>
        <h2>这是body后面</h2>e
    </body>
</html>

href="http://www.renren.com/308038848/profile定义了一个超链接，当超链接被点击时触发click事件，系统调用return bclick()方法，然后在bclick方法中运行confirm这个系统调用，弹出对话框，然后转向超链接。

再介绍鼠标事件，实例代码如下：

<html>
    <head>
        <title>第六个JavaScript程序</title>
        <script language="JavaScript">
            function showImage(strpath)
            {
               SampleID.src=strpath;
               SampleID.filters.revealTrans.Play();

            }
        </script>
    </head>
    <body>
        <h1>这是body前面</h1>
        <img id="SampleID" src="2.jpg"
             width="200" height="200"
             style="filter:revealTrans(duration=1)"
         onMouseOver="showImage('1.jpg');"
         onMouseOut="showImage('2.jpg');"/>
        <h2>这是body后面</h2>
    </body>
</html>

（需要1.jpg和2.jpg和本文件在同一目录）当鼠标移进图片时，onMouseOver触发；移出时，onMouseOut触发。

JavaScript的document对象：

document对象，即Document Object Model，简称“dom” ，实际上是一个不需要由我们来创建，而是当网页被加载时，浏览器会创建页面的文档对象模型。那它有什么用呢？

实际上我们前面的程序中已经悄悄用过几次document了，大家还记得我们干了什么吗？对，就是调用的document.write（）方法。

好了，知道了我们可以通过 dom 来访问JavaScript html 文档中所有元素的内容，让我们试试看：

<!DOCTYPE html>
<html>
<body>

<p>第七个JavaScript程序</p>

           <div id="main">
                <p>The DOM is very useful.</p>
                <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
            </div>

</body>
</html>

以上代码是干什么呢，是用了document对象来查找 id 为 "main" 的 div 中的第一段文本。

所以说，我们可以通过document对象访问文本中所有元素。既然能访问，当然我们也可以修改。

有这些常用的方法，大家了解一下：

document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集简体中文:gb2312
一些对象方法
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)

body-主体子对象
document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

现在我们来做一个使用了 dom ，函数，以及事件的程序：

<p>第七个JavaScript程序</p>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background- color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

        function mUp(obj)
        {
           obj.style.backgroundColor="green";
            obj.innerHTML="请按下鼠标按钮"
        }
        </script>

</body>
</html>

咦，话说我们熟悉的document对象跑哪去啦o(︶︿︶)o？别急，仔细看一看，在div中mDown传递的值不就是我们的document对象嘛，到了事件处理函数这个对象就有了新的名称obj啦。 innerHTML即是document的一个属性。好了快自己运行一下这个程序看看效果如何吧(*^__^*)

ps：所有程序都经过我亲自试验都能运行并达到预想的效果

我们的JavaScript学习就告一段落啦，敬请期待下一讲“jQuery”~~~

另外喜欢的话请顶一个(*^__^*)