JavaScript-基础语法

来源：互联网发布：网站建设方案书阿里云编辑：程序博客网时间：2024/06/09 18:41

三部分语法
1.基础语法
2.DOM (Document Object Model)
把HTML当对象（标签树）
3.BOM (Brower Object Model )
把浏览器当对象

一.怎么在网页中加JavaScript

1.直接定义

<head>    <script type="text/javascript">        ···    </script></head>

2.文件引入（两种写法一样）

<script language="javascript" scr="01.js"></script><script type="text/javascript" scr="01.js"></script>

二.基础语法

1.变量声明-var
不同部分的变量可以共享声明变量名区分大小写
弱类型语言 var定义变量（也可以不定义但不建议这么做）

    var greeting;    greeting="today is sunday "

IE报错-工具-Internet选项高级禁用脚本调试不选显示脚本错误选

2.数组可以定义长度但是超出界限依旧不出错

var a=new array(3)a[0] =0;<!--成员变量名字为0 值为0-->a[1] =1;a[2] =2;a[3] =3;document.write(a[3]);

3.其他的语法（大部分和java语法类似）

document.write(a[1]+a[2]);<!--字符串的连接和java一样->document.write(greeting.substring(3,9));<!--从第三个字符起截取到第九个字符前 ->result=(3>4)?"Y":"N";<!--条件操作->

4.函数

function test(){}function test(a){}function test(y){return y;}

5.事件处理

事件处理应用场所 onFocus 用户在使用select text textarea时 onBlur select text textarea password失去焦点时 onClick 对象（button checkbox radio link reset submit text textarea）被鼠标点中时 onLoad 完成对一个窗口的载入 onUnload 用户退出一个文档时（被别的窗口替代比如刷新） onMouseOver 鼠标移动到某一个对象上时 onMouseOut 鼠标从某个对象移开时 onSelect form中的内容被选中时 onSubmit 按提交（submit）按钮提交一个表单前用来表单验证

例子

<img src="01.jpg" onclick="alert('OK')"></img><form name="01" onsubmit="return false"></form><!--程序不再往下执行，所以无法提交 用于表单的验证--><form name="01" onsubmit="return true"></form><!--程序正常提交-->

表单验证1 空字符串无法提交

<html> <head> <script language="javascript">     function check(){         if( document.test.t.value==""){            alert("空串不允许");             return false;             }        return true;    }</script> </head> <body>     <form name="test" onsubmit="return check()">     <input type="text" name="t">     <input type="submit" value="OK"></form>   </body></html>

表单验证2 密码长度小于8位无法提交不以窗口提醒

<html><head><script language="javascript">    function checkpw(ss){        if(ss.length<8){            document.getElementById("pwErr").innerHTML="密码不得小于8位";            return false;        }    }</script></head><body><form name="form1" >     <table width="700" size="20%,*" border="3">  <tbody>    <tr>      <td>密码 </td>      <td><input type="password" name="pw" size="15" maxlength="12" onBlur="javascript:checkpw(this.value)">      <div id="pwErr"></div>      </td>    </tr>     </tbody></table><input type="submit"><input type="reset"></form></body></html>

这里写图片描述

6.各种对话框

名称作用 alert 警告框出现提示信息 prompt 返回输入值 confirm 返回true/false

例子删除文件确认框

<html>    <head><title></title>        <script language="JavaScript">        function del(){            if(confirm("确认删除")){<!--confirm()函数跳出一个对话框 点确定 返回值为TRUE 执行下一步提交 取消则为FALSE-->                document.test.submit();            }        }        </script>        </head>    <body>    <form name="test">        <input name="a"  value="删除" type="button" onClick="javascript:del()">    </form>    </body></html>

这里写图片描述

三.内置对象

1.this—->该标签

<img src="01.jpg" onclick="alert(this.src)"></img><!--这里的this指的是此img--><input name="a"  value="删除" type="button" onClick="javascript:checkit(this)"><!--这里的this指的是此input-->

2.for…in—->循环

<script language="javascript">a=new Array("alice","bob","trudy");for(e in a){<!--e是下标值，a为进行循环的对象-->    document.write(e+"---");    document.write(a[e]+"<br>");    }</script>

结果为

0—alice
1—bob
2—trudy

3.with —->为一段代码建立缺省对象

with(document){        write("HTML WITH"+"<br>");        write("hello"+"<br>");        write("<font color=\"red\">");        write("this is document");        write("</font>");    }

结果为

HTML WITH
hello
this is document

4.new

var today=new Date();    alert(today.getDate());

结果为日期
这里写图片描述

5.窗口中的对象和元素

a)status 状态栏

window.status("hello");

b)location 地址栏

alert(window.location);<!--地址栏,和document.location一回事-->

<body>  <!--点击按钮turn to转到1.html--><script language="javascript">function goto(){        window.location="1.html";    }</script><input type="button" value="turn to" onClick="javascript:goto()"></body>

c)open

<body><script language="javascript">var win=window.open("1.html","newWin","toolbar=no,left=200,top=100,menubar=no,width=300,height=100");</script><input type="button" onclick="javascript:win.close();" value="close" ></body>

d)后退

history.back();

0 0