简介
JavaScript语言是基于对象的(Object-Based)、事件驱动的(event driven),而不是面向对象的 (object-oriented)。JavaScript没有提供继承、多态等功能,但它仍具有一些面向对象的基本特征,JavaScript中提供了非常丰富的内部对象,另外它还可以根据需要创建自己的对象。
ECMA联合多个公司制作了标准化的ECMAScript。
语法要点
JavaScript严格区分大小写。
在作为html标签属性值时,JavaScript代码的最后一句后的分号是可选的。
JavaScript中使用同java语言一样的注释符。
弱类型的变量形式,也可以不先用var声明变量,而直接使用。
除法运算符/的结果是实型数,没有余数,这与java不同。
位移动运算符
>> 右移,左边补上原来最高位的二进制值。
<< 左移,右边补0。
>>> 右移,左边补0。
对象和数组的简写方式
var obj={};是var obj=new Object()的简写,
var arr=[];是var arr=new Array("","","");的简写。
对象成员的访问直接使用.属性方式,例如:obj.name;
MDN技术文档网站
https://developer.mozilla.org/zh-CN/
3.脚本代码的位置
3.1.script标签对:多个<script>段中的变量可互相访问。有些旧版本浏览器不支持<script>标签,所以使用注释标签,以防止被当成文本显示<script><!--js内容--></script>
3.2. js脚本文件:
3.3.将脚本程序代码作为属性值 :<a href="javascript:alert()"></a> <input type=button οnclick="alert()">
作为事件属性值时不用加javascript:,作为链接属性值时要加javascript:。
3.4defer属性,指示了script中的代码要在页面加载完成后,再执行。
src属性可以指定一个地址,这个地址返回的内容是js内容,网页再执行这段js。可以用这个性质还做来自地区显示,统计访问量显示。
3.JavaScript常数 有下列几个:
null 一个特殊的空值。undefined表示变量不存在。
NaN “Not a Number”。出现这个数值比较少见,以至于我们可以不理它。当运算无法返回正确的数值时,就会返回“NaN”值。NaN 值非常特殊,因为它“不是数字”,所以任何数跟它都不相等,甚至 NaN 本身也不等于 NaN 。
true 布尔值“真”。
false 布尔值“假”。
只有六种类型。number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined
可以用typeof()查看类型。
对象属性的引用可由下列三种方式之一实现:
(1)使用点(.)运算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一个已经存在的对象,Name、City、Date是它的三个属性,并通过操作对其赋值。
(2)通过对象的下标实现引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
通过数组形式的访问属性,可以使用循环操作获取其值。
function showunievsity(object)
{for (var j=0;j<2; j++)
document.write(object[j]);}若采用For...in则可以不知其属性的个数后就可以实现:
function showmy(object)
{for (var prop in this)
(3)通过字符串的形式实现
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"
5.流程控制
var x;没有对x赋值,x值为null,类型为undefined。
if(x==null || typeof(x)==”undefined“)来判断x为空。或者简写为if(!x)
for循环 for(var i=0;i<5;i++),而不是for(int i=0;i<5;i++)
10.事件
指定事件处理程序有三种方法:
方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是:
<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>
例子:
<body ... οnlοad="alert('网页读取完成,请慢慢欣赏!')" οnunlοad="alert('再见!')">
这样的定义<body>标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。
方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是:
<script language="JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>
<script language="JavaScript" for="window" event="onload">
alert('网页读取完成,请慢慢欣赏!');
</script>
方法三 在 JavaScript 中说明。方法:
<事件主角 - 对象>.<事件> = <事件处理程序>;
用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。
function ignoreError() {
return true;
}
window.onerror = ignoreError; // 没有使用“()”
这个例子将 ignoreError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误(由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的)。
事件详解:
• onblur 事件 发生在窗口失去焦点的时候。应用于:window 对象
• onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。应用于:Password 对象;Select 对象;Text 对象;Textarea 对象
• onclick 事件 发生在对象被单击的时候。单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象(Button)通常会有 onclick 事件处理程序,因为这种对象根本不能从用户那里得到任何信息,没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序,可以模拟“另一个提交按钮”,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。即,如果有一个这样的连接:<a href="http://www.a.com" οnclick="return false">Go!</a>,那么无论用户怎样点击,都不会去到 www.a.com 网站,除非用户禁止浏览器运行 JavaScript。应用于:Button 对象;Checkbox 对象;Image 对象;Link 对象;Radio 对象;Reset 对象;Submit 对象
• onerror 事件 发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:function ignoreError() {
• return true;
• }
• window.onerror = ignoreError;
应用于:window 对象
• onfocus 事件 发生在窗口得到焦点的时候。应用于:window 对象
• onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在<body>标记中的。应用于:window 对象
• onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于:Button 对象;Link 对象
• onmouseout 事件 发生在鼠标离开对象的时候。参考 onmouseover 事件。应用于:Link 对象
• onmouseover 事件 发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料, 看起来这些资料是可以随时更改的。它们是这样做出来的:<a href="..." οnmοuseοver="window.status='Click Me Please!'; return true;" οnmοuseοut="window.status=''; return true;">
应用于:Link 对象
• onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。如果按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。应用于:Button 对象;Link 对象
• onreset 事件 发生在表单的“重置”按钮被单击(按下并放开)的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。应用于:Form 对象
• onresize 事件 发生在窗口被调整大小的时候。应用于:window 对象
• onsubmit 事件 发生在表单的“提交”按钮被单击(按下并放开)的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return false)可以阻止表单提交。应用于:Form 对象
• onunload 事件 发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。与 onload 一样,要写在 HTML 中就写到<body>标记里。 有的 Web Masters 用这个方法来弹出“调查表单”,以“强迫”来者填写;有的就弹出广告窗口,唆使来者点击连接。我觉得这种“οnunlοad="open..."”的方法 很不好,有时甚至会因为弹出太多窗口而导致资源缺乏。有什么对来者说就应该在网页上说完,不对吗? 应用于:window 对象
1.获取页面中的元素
getElementById()
getElementsByName()
getElementsByTagName()
注意:没有getElementsById这个方法。
参考 http://www.cnblogs.com/happyday56/archive/2008/01/15/1039866.html
获取第一个子节点:
element.firstChild
在iPhone分类的UIWebView文章中,还有一些介绍。
2.image的请求
只设置style="display:none;"并不能阻止它请求图片地址。
不设置src或设置src为""时,仍会响应onError事件,可以设置onError="if(this.src!=""){this.src='http://...jpg';this.οnerrοr=null;}"
在加载图片时,请求中的Referer的值就是用的baseurl的值。
3.框架:一个页面中的所有框架以集合的形式作为window对象的属性提供,window.frames表示该页面内所有框架的集合.
要引用一个子框架,可以使用如下语法:
每个框架都对应一个HTML页面,所以这个框架也是一个独立的浏览器窗口window,它具有窗口的所有性质,所谓对框架的引用也就是对window对象的 引用。有了这个window对象,就可以很方便地对其中的页面进行操作,例如使用window.document对象向页面写入数据、使用 window.location属性来改变框架内的页面等。
http://blog.chinaunix.net/u2/65993/showart_576137.html
4.浏览器对象
(1)Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
注:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。
http://www.w3school.com.cn/htmldom/htmldom_reference.asp
alert阻止了页面继续显示内容。
10.
录制于2004年6月左右
video6.3
http://www.youku.com/playlist_show/id_1095101_ascending_1_mode_pic_page_3.html
http://www.webjx.com/special/20071203/1621.html
11.设置属性值
element.setAttribute("src_temp","");
element.attributes["username"].nodeValue=username;
12.加密
使用document.write和escape做加密
13.使用javascript定时侦测图片的尺寸状态,可能在onload被调用之前就可以获取到图片尺寸。
http://www.blueidea.com/tech/web/2011/8335.asp
但一般有默认图片,且对图片尺寸显示有最大限制,所以不需要提早取得图片实际尺寸。
14.判断元素是否在屏幕内
var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离
var se = document.documentElement.clientHeight //浏览器可见区域高度。
if(top <= se ) {
//code
}