7.网页前端之javascript二-CSDN博客

本文链接：https://blog.csdn.net/d3582077/article/details/136009438

js文件的编写

这个文件存储的是Javascript的代码，可以把Javascript脚本写到一个文件里，然后网页要使用的话，用script标签导入就行了，跟操作css文件的方式是一样的，如my.js文件里的内容为：

document.write("Hello!");

那么网页中就是：

script标签的src属性指明js文件地址

对象的定义
使用Object创建一个对象，如：var stuObj=new Object();
但是怎么给对象添加属性和方法呢，直接添加就行了，比如我添加姓名，年龄属性。
就是
stuObj.name="ZhengYong";
stuObj.age=20;
就像变量类型一样，可以不用定义，直接使用（但暗地里还是定义了）
函数也是一样如：
stuObj.OutInfo=function()
{
alert("name:"+stuObj.name,"age:"+stuObj.age);
}
完整的例子：
<script type="text/javascript">
var stuObj=new Object();
stuObj.name="ZhengYong";
stuObj.age=20;
stuObj.OutInfo=function()
{
alert("name:"+stuObj.name+",age:"+stuObj.age);
}
//上面就像定义了一样，接着就可以使用stuObj里的属性和方法了
stuObj.OutInfo();
</script>
但上面的有个不足之处，就是如果我想再定义一个stuObj对象，又要重新定义一次了，有没有什么方法像C#的class一样，
先定义好呢，当然有，使用function创建对象的模板
看下示例：
<script type="text/javascript">
function fOutInfo()
{
alert("name:"+this.name+",age:"+this.age);
}
//定义对象模板，这样就可以用这个模板来制造对象了
function Student(Name,Age)
{
this.name=Name;
this.age=Age;
this.OutInfo=fOutInfo;
}
//new一个对象
var stuObj1=new Student("ZhengYong",20);
//再new一个
var stuObj2=new Student("Sean",24);
stuObj2.OutInfo();
</script>
记住函数里访问对象的属性或方法要加this，这一点我估计跟C++一样，函数还有一个隐性参数this,
比如这两句：
var stuObj2=new Student("Sean",24);
function fOutInfo()
上面函数暗地里还传进了this，这个this就指向调用它的对象，这样就可以确定访问的是哪个对象了。

使用window对象的open方法打开一个窗口

(PS：关于window的详细属性和方法可以查看html dom手册）
打开一个窗口，等于说又新建了一个window对象，open方法返回的是window对象。
open方法有四个参数，都是可选的，可以不写。如下：
window.open(URL,name,features,replace)
URL是网页的地址，如果为空，则document文档里不会有任何内容，网页是空的，可以调用document.write给新网页添加内容。
name窗口名，这个名称就如同iframe框架的名称一样，用于给a等标签的target做属性值,比如：
<script type="text/javascript">
window.οnlοad=function()
{
window.open('',"mywin");
}
</script>
</head>
<body>
<a href="http://www.baidu.com" target="mywin">百度</a>
</body>
features这个指定新窗口的属性，它的外观，大小，位置等，属性项用逗号隔开，示例如下：
<script type="text/javascript">
window.οnlοad=function()
{
window.open('','',"width=200,height=400");
}
</script>
设置了新窗口的大小后，状态栏和菜单栏等都不见了，如果想要显示的话，设置属性为yes就可以了，如：menubar=yes,
status=yes。还有一点要说明的是，这个大小是可见页面的大小。
features的属性表如下:(来自w3school.com.cn)

channelmode=yes|no|1|0是否使用剧院模式显示窗口。默认为 no。directories=yes|no|1|0是否添加目录按钮。默认为 yes。fullscreen=yes|no|1|0是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。height=pixels窗口文档显示区的高度。以像素计。left=pixels窗口的 x 坐标。以像素计。location=yes|no|1|0是否显示地址字段。默认是 yes。menubar=yes|no|1|0是否显示菜单栏。默认是 yes。resizable=yes|no|1|0窗口是否可调节尺寸。默认是 yes。scrollbars=yes|no|1|0是否显示滚动条。默认是 yes。status=yes|no|1|0是否添加状态栏。默认是 yes。titlebar=yes|no|1|0是否显示标题栏。默认是 yes。toolbar=yes|no|1|0是否显示浏览器的工具栏。默认是 yes。top=pixels窗口的 y 坐标。width=pixels窗口的文档显示区的宽度。以像素计。
window对象的setTimeout和setInterval方法
setTimeout可以指定函数的调用时间，比如这句：
setTimeout("alert('Hello')",2000);当执行这个语句后，2000毫秒（也就是两秒）后就会执行alert方法。
setInterval是每隔一段时间执行一次方法,如：setInterval("alert('Hello')",3000)就是每隔3秒执行一次alert方法。
clearInterval方法可以取消setInterval设置的定时器，setInterval方法调用后，会返回一个数值ID。用这个ID指定
要取消设置的定时器：如：
<script type="text/javascript">
var timeId=setInterval("alert('Hello!')",2000);
function StopTimer()
{
clearInterval(timeId);
}
</script>
</head>
<body>
<a href="#" οnclick="StopTimer()">取消弹出提示框</a>
</body>