javascript自学成果

2009年1月7日 3:42 下午

昨天终于都考完试~我马上就回到宿舍继续研究javascript，其实之所以学javascript是因为现在我还在做HTML网页，没办法，ASP、PHP感觉比较深奥，而且也没人教，于是从低学起嘛呵呵~HTML的交互性实在是低，学javascript便非常重要了！通过研究之前发过的javasript学习资料发现JS和C语言极其相似，语法结构基本一样，这可省了不少功夫。直到刚才做出了一个网页右键菜单（半成品）。由于添加了渐变模块，性能不够的机浏览时可能会比较卡。在考虑关闭渐变模块。先贴出代码吧。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>patpat-menu</title>
</head>
<link rel="stylesheet" rev="stylesheet" href="http://l-patpat.cn/css/menu.css"
type="text/css" media="all" />
<script type="text/javascript" LANGUAGE="JavaScript1.2">
//"patpat-menu" for www.l-patpat.cn <by l-patpat 2009.1>
function menu(number,title)//菜单模块
{
document.writeln("<tr><td class=normal onMouseDown=this.className='down'
onMouseOver=this.className='up',high(this),Show(menu"+number+") onMouseOut=this.className='normal',low(this),menu"+number+".style.visibility='hidden'
style=filter:alpha(opacity=50) onMouseUp=this.className='up'><div
align=center>"+title+"</div></td></tr>")
}
function link(url,title,target,mode,x,y)//连接模块
{var href
x=x-3;
y=y-3;
if(mode=="box")
//窗口模式
阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

利用javascript控制打开网页窗口的大小,关闭窗口（1）

2009年1月5日 3:02 下午

打开窗口即最大化
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>

----------------------------------------------------------------
window.open方法
<a href="#"
　onclick="javascript:window.open('文件路径/文件名','newwindow',
　'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
　width=400,height=300');">文字或图片</a>

top=0,left=0,是打开网页的坐标定位
width=400,height=300' 是打开的网页的大小

我的窗口，我控制.....

【1、普通的弹出窗口】
其实代码非常简单：
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT>
　　因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE=javascript>标签和</script>之间。<!-- 和
-->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
　window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。

　　用单引号和双引号都可以，只是不要混用。
　　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

　

【2、经过设置后的弹出窗口】
　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0,
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>

　　参数解释：
阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

利用javascript控制打开网页窗口的大小,关闭窗口（2）

2009年1月5日 2:55 下午

　　4.网页对话框

<html>
<SCRIPT LANGUAGE=javascript>
<!--
showModalDialog('http://www.pconline.com.cn','example04','dialogWidth:400px;dialogHeight:300px;

dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')

//-->
</SCRIPT>
<b>www.e3i5.com</b>
</body>
</html>

<html>
<SCRIPT LANGUAGE=javascript>
<!--
showModelessDialog('http://www.pconline.com.cn','example05','dialogWidth:400px;dialogHeight:300px;

dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')

//-->
</SCRIPT>
<b> target=_blank>http://www.pconline.com.cn<;/b>
</body>
</html>

　　showModalDialog()或是showModelessDialog() 来调用网页对话框，至于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog()（简称无模式窗口），打开后不必关闭也可访问父窗口打开的窗口。

dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。 　　
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。
help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。 　　
resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。
status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是
“no”。

阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

JavaScript学习资料(1) 初识html

2009年1月3日 1:27 下午

参考书籍 《JavaScript 入门与提高》 杨浩 编著 清华大学出版社

1，html基本标注
BASE标注
用来指示网页的基地址，这样有关该网页中的所有文档地址都是基地址的相对地址。
例：
<BASE HREF="http://www.mysite.com/docs/mydoc.html">
...
<IMG SRC="images/me.gif">
等价于：
<IMG SRC="http://www.mysite.com/docs/images/me.gif">

TITLE标注
指定文档的题目

ISINDEX标注
可选，通知浏览器，该文档是可索引的索引文档

2，版面设计标注
（1）段落标注<P>
中间的回车符忽略
<P>具有控制属性ALIGN，表示对齐方式
例如：
<P ALIGN = CENTER>
This is a CENTERed paragraph
</P>

（2）换行标注<BR>和不换行标注<NOBR>

（3）预排版标注<PRE>
所有输入的空格和回车都会被浏览器完全显示出来

（4）部分定义标注<DIV>
只是定义了一个文本区域，与其他文本没有任何区别。可以使用ALIGN控制对齐方式。

（5）块引用标注<BLOCKQUOTE>或<BQ>
改变改标注内的文本的页边距，让它从周围的文本中突出的显示出来。

（6）定义列表标注<DL>
显示有两个部分的列表，与<DT>和<DD>连用。
例子：
<DL>
<DT>Hamlet:<DD>You should believed me.
<DT>Ophelia:<DD>I was the more deceived.
<DT>Hamlet:<DD>Get thee to a nunery.
</DL>

（7）闪烁标注<BLINK>

（8）地址标注<ADDRESS>
文本为斜体，起突出作用

（9）水平分割线<HR>
SIZE属性：SIZE=“n”来控制分割线长度，n为自然数，单位为像素
WIDTH属性
ALIGN属性
NOSHADE属性：使分割线为实线

阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

JavaScript学习资料(2) 语法基础

2009年1月3日 1:24 下午

1，数据类型和变量
（1）数据类型
数字，特殊的数字NaN，表示不是一个数字
逻辑值：true，false
字符串
undefined类型：已经创建，但是没有初值的变量
对象

（2）类型转换
JavaScript是弱类型语言，类型可以根据当前的值变化。会尝试完成自动转换。表达式总是从左到右进行转化计算。

例如：
var Astring = "7";
var Anumber = 42;
x = Astring + Anumber; //x="742"
y = Anumber + Astring; //y=49

（3）变量区分大小写

（4）null变量
声明的同时可以赋值为null，例如：
var Init = null;

（5）变量的使用
建议使用之前先声明，并尽可能的赋初值。

也可以用直接赋值的方法定义变量。

不复制也不声明就使用变量会导致一个运行错误。

2，常量
与Java类似

3，表达式
与Java类似

4，操作符
与Java类似

特殊的有：
delete：从一个对象中删除一个属性，或者从数组中删除一个元素，如果不存在，返回false
typeof：用法：typeof(expr)，返回指示表达式类型的字符串，可能的取值为：
"number","string","boolean","object","function","undefined"
===：只有两个值完全一样才返回true，而“==”会将两个表达式转化成同一种类型然后比较
!==

阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

JavaScript学习资料(3) 浏览器对象和事件处理

2009年1月3日 1:20 下午

1，浏览器对象概述
浏览器会根据网页的内容产生一些与页面相对应的对象提供给JavaScript使用，这些对象主要包括：
navigator：浏览器版本号等信息
window：从属表的最顶级位置，浏览器窗口
frame：在拥有帧的网页中，提供帧的各种管理方法
document：当前网页的各种特性，例如标题、背景等
location：当前网页的URL
history
forms：document的一个数组，为处理表单和其中的界面对象提供属性和方法。
anchors：document的一个数组
links：document的一个数组，为处理超链接提供属性和方法

2，navigator对象
有用的属性包括：
appName：浏览器名称
appVersion：浏览器版本
appCodeName
userAgent：用户代理
mineTypes
plugins：可以使用的插件信息
language
platform

3，浏览器对象Window
Window是浏览器对象中其他大部分对象的共同祖先。一般可以隐式的引用Window。比如不用写成Window.document

Window对象有以下方法：
open(URL,WindowName,parameterList)：创建一个新的浏览器窗口，并载入指定的url
close()
alert(text)：弹出消息框
confirm(text)：弹出确认框
prompt(text,Defaulttext)：输入框
setTimeout(expr, time)：定时设置，一定时间后执行expr描述的代码
clearTimeout(timer)
setInterval(expr, time, [args])：设定一个时间间隔，定时反复执行expr描述的代码
clearInterval(timer)
moveBy(horiz, vert)：窗口移动指定的位移量
moveTo(x, y)
resizeBy(horiz, vert)
resizeTo(x, y)
scrollBy(horiz, vert)
scrollTo(x, y)
find(["string"] [, true | false] [, true | false])：在浏览器中查找一个字符串
back()
forward()
home()
stop()
print()：打印当前的网页

Window具有下列属性值：
frames
status：浏览器的状态行信息
defaultstatus
location
history
closed：指出窗口是否关闭的逻辑值
parent：包含当前窗口的父窗口
self
top：一系列浏览器上层的窗口
Window：当前窗口
locationbar：地址栏
memubar
personalbar
scrollbar
statusbar
toolbar

阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

JavaScript学习资料(4) 高级使用技巧

2009年1月3日 1:20 下午

1，使用帧对象
（1）帧
一个浏览器窗口可以分成好几个矩形区域，每一个区域都可以显示HTML文档，这些Web文档的装载和卸载都是独立的。这样的矩形区域叫做帧（frame）。使用帧，可以实现对网页的一部分进行更新。

用<FRAMESET><FRAME>标记生成帧。
<FRAMESET>：定义如何把一个窗口划分成行和列，有如下属性：
ROWS：两个帧垂直方向的位置
COLS
BORDER：边界粗细

<FRAME>标记的属性：
NAME
SRC：载入的网页文件
MARGINWIDTH
MARGINHEIGHT
SCROLLING：是否允许滚动
NORESIZE：不能改变大小

示例：
<HTML>
<HEAD>
<TITLE>帧的嵌套</TITLE>
<HEAD>

<FRAMESET ROWS="64,*">
<FRAME NAME="banner" norresize target = "contents" src = "book1.gif">
<FRAMESET COLS="150,*">
<FRAME name = "contents" target = "main" src = "book2.gif">
<FRAME name = "main" target = "main" src = "book3.gif">
</FRAMESET>
</FRAMESET>

</HTML>

（2）JavaScript中的使用
frame对象通过window.frames[0]引用，具有如下属性：
name
parent：父类窗口
self：帧本身
具有的方法：
blur()
focus()
setInerval()：定义定时器，在一定时间间隔后重复执行操作
clearInterval()
setTimeout()：定义定时器，在一定时间间隔后执行一次操作
clearTimeout()

阅读全文...

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部

利用JS让PNG在IE中正常显示

2008年11月16日 2:52 下午

 png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。
　　解决这个的方法是增加javascript。具体方法如下：
　　把下面的代码放在head区就可以解决问题了。
以下是引用片段：

<script language="javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
  var img = document.images[i]
  var imgName = img.src.toUpperCase()
  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle +

";"
  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
   img.outerHTML = strNewHTML
   i = i-1
  }
}
}
window.attachEvent("onload", correctPNG);
 </script>

　　也可以把这段代码单独加在一张图片上：
以下是引用片段：
<span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src='male.png',sizingMethod='scale');"></span>

本文来源【学网】网站链接是http://www.xue5.com

推荐(0)
收藏

标签：， | 分类：网页制作 | 发表一下你的评论 | 返回顶部