wangdun119
- 浏览: 197685 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
JavaScript 函数
事件是可以被 JavaScript 侦测到的行为。
JavaScript - 捕获错误
Throw 声明
throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
onerror 事件
我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。
只要页面中出现脚本错误，就会产生 onerror 事件。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
设置时钟：
detectBrowser
附一个老外写的js操作cookie的函数：
使用Cookie
E-mail验证
JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
创建你自己的对象
有多种不同的办法来创建对象：
1. 创建对象的实例
下列代码创建了一个对象的实例，并向其添加了四个属性：
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：
personObj.eat=eat
2. 创建对象的模版
模版定义了对象的结构。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
<html>
<head>
<script type="text/javascript">
function displaymessage() {
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>
事件是可以被 JavaScript 侦测到的行为。
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>
JavaScript - 捕获错误
<html>
<head>
<script type="text/javascript">
var txt = ""
function message() {
try {
adddlert("Welcome guest!")
} catch(err) {
txt = "There was an error on this page.\n\n"
txt += "Click OK to continue viewing this page,\n"
txt += "or Cancel to return to the home page.\n\n"
if(!confirm(txt)) {
document.location.href = "http://www.w3school.com.cn/"
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
Throw 声明
throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
<html>
<body>
<script type="text/javascript">
var x = prompt("Enter a number between 0 and 10:", "")
try {
if(x > 10)
throw "Err1"
else if(x < 0)
throw "Err2"
} catch(er) {
if(er == "Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>
onerror 事件
我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。
只要页面中出现脚本错误，就会产生 onerror 事件。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
<html>
<head>
<script type="text/javascript">
onerror = handleErr
var txt = ""
function handleErr(msg, url, l) {
txt = "error \n\n"
txt += "error: " + msg + "\n"
txt += "URL: " + url + "\n"
txt += "line:" + l + "\n\n"
txt += "click ok \n\n"
alert(txt)
return true
}
function message() {
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="view message" onclick="message()" />
</body>
</html>
设置时钟：
<html>
<head>
<script type="text/javascript">
function startTime() {
var today = new Date()
var h = today.getHours()
var m = today.getMinutes()
var s = today.getSeconds()
// add a zero in front of numbers<10
m = checkTime(m)
s = checkTime(s)
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s
t = setTimeout('startTime()', 500)
}
function checkTime(i) {
if(i < 10) {
i = "0" + i
}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
detectBrowser
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
{alert("Your browser is good enough!")}
else
{alert("It's time to upgrade your browser!")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
附一个老外写的js操作cookie的函数：
///设置cookie
function setCookie(NameOfCookie, value, expiredays)
{
//@参数:三个变量用来设置新的cookie:
//cookie的名称,存储的Cookie值,
// 以及Cookie过期的时间.
// 这几行是把天数转换为合法的日期
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可.
// 注意日期通过toGMTstring()函数被转换成了GMT时间。
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
///获取cookie值
function getCookie(NameOfCookie)
{
// 首先我们检查下cookie是否存在.
// 如果不存在则document.cookie的长度为0
if (document.cookie.length > 0)
{
// 接着我们检查下cookie的名字是否存在于document.cookie
// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在
//所以我们需要这一步看看是否有我们想要的cookie
//如果begin的变量值得到的是-1那么说明不存在
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{
// 说明存在我们的cookie.
begin += NameOfCookie.length+1;//cookie值的初始位置
end = document.cookie.indexOf(";", begin);//结束位置
if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置
return unescape(document.cookie.substring(begin, end)); }
}
return null;
// cookie不存在返回null
}
///删除cookie
function delCookie (NameOfCookie)
{
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间;
//剩下就交给操作系统适当时间清理cookie啦
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
使用Cookie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cookie</title>
<mce:style type="text/css"><!--
#welcome h3
{
font-weight:normal;
color:#800;
}
--></mce:style><style type="text/css" mce_bogus="1">
#welcome h3
{
font-weight:normal;
color:#800;
} </style>
<mce:script type="text/javascript" src="cookie.js" mce_src="cookie.js"></mce:script>
<mce:script type="text/javascript"><!--
//---------------使用cookie----------------------
function useCookie()
{
var username=getCookie("username");
if(username!=null){
document.getElementById('welcome').innerHTML="<h3>欢迎您,"+username+"</h3>"+"<button onclick='delusr();'>删除用户名</button>";
}else{
var str="<h3>欢迎您,游客!</h3>"+
"<input id='usrname' type='text' />"+
"<button id='saveusr' onclick='checksave();'>保存用户名</button>";
document.getElementById('welcome').innerHTML=str;
}
}
function checksave()
{
var el=document.getElementById('usrname');
if(el.value){
setCookie("username",el.value);
location.reload();//刷新页面
}
else
alert("输入框不能为空");
}
function delusr()
{
delCookie("username");
location.reload();
}
// --></mce:script>
</head>
<body onload="useCookie();">
<div id="welcome">
</div>
</body>
</html>
E-mail验证
<html>
<head>
<script type="text/javascript">
function validate_email(field, alerttxt) {
with(field) {
apos = value.indexOf("@")
dotpos = value.lastIndexOf(".")
if(apos < 1 || dotpos - apos < 2) {alert(alerttxt);
return false
} else {
return true
}
}
}
function validate_form(thisform) {
with(thisform) {
if(validate_email(email, "Not a valid e-mail address!") == false) {
email.focus();
return false
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email:
<input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
<html>
<head>
<script type="text/javascript">
function timedMsg() {
var t = setTimeout("alert('5 seconds!')", 5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
创建你自己的对象
有多种不同的办法来创建对象：
1. 创建对象的实例
下列代码创建了一个对象的实例，并向其添加了四个属性：
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：
personObj.eat=eat
2. 创建对象的模版
模版定义了对象的结构。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
分享到：
发表评论
-
Parasitic Inheritance
2012-04-13 09:00 895Here's an ordinary object, defi ... -
Multiple Inheritance
2012-04-12 16:44 819Let's create a multi() function ... -
Using a Mix of Prototypal Inheritance and Copying Properties
2012-04-12 16:06 923You can: Use prototypal inherit ... -
Object的copy
2012-04-12 15:41 1244the use of an object() function ... -
DeepCopy LightCopy
2012-04-12 15:38 10032、浅拷贝 除了使用”prototype链”以外，还有另一种 ... -
prototype模式
2012-04-12 15:37 853http://www.ruanyifeng.com/blog/ ... -
object-oriented_javascript_encapsulation
2012-04-09 00:08 0http://www.ruanyifeng.com/blog/ ... -
关于javascript中apply()和call()方法的区别
2012-04-04 20:13 840如果没接触过动态语言,以编译型语言的思维方式去理解javaSc ... -
Read OO JS
2012-03-23 17:34 977Most values convert to true wit ... -
学习JavaScript（二）
2011-12-09 17:05 841Checking if a Variable Exists ... -
JavaScirpt学习（一）
2011-11-28 17:46 1142js在线编辑网站：http://jsfiddle.net/ P ... -
JavaScript基本概念（二）
2011-09-11 03:27 669Passing Objects Here's an examp ... -
JavaScript基本概念
2011-09-08 23:44 815JavaScript 变量名称的规则： ----变量对大小写 ...
相关推荐
JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》，读者可以了解...
不过，由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf"，我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富，涉及很多方面的内容，下面将详细介绍...
C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用
JavaScript函数是编程语言的核心组成部分，它是一段可重复使用的代码块，可以接受参数并返回值。在JavaScript中，函数不仅可以作为表达式，还能作为变量赋值、作为参数传递以及作为返回值。本速查指南将深入探讨...
JavaScript函数是编程语言的核心组成部分，尤其在Web开发中起着至关重要的作用。这份"JavaScript函数速查手册"涵盖了JavaScript函数的各个方面，旨在帮助开发者快速查找和理解各种函数的用法和特性。 一、函数基础 ...
- 这里的回调函数用于处理JavaScript函数的异步返回结果，如果需要同步获取结果，可以使用`QWebEngineScript`来注册一个全局JavaScript对象，然后通过该对象调用JavaScript函数。 2. **JavaScript调用QT函数**： ...
以下是关于JavaScript函数的详细讲解： 1. **函数定义**： - 无参函数定义：`function 函数名 () { 代码... }` - 有参函数定义：`function 函数名 (参数列表) { 代码... }` - 参数列表中的参数可以是变量、常量...
JavaScript函数式编程是一种编程范式，它将计算视为数据处理，并强调使用无副作用的纯函数。在JavaScript中，函数式编程允许我们写出更简洁、可读性更强的代码，同时提高了代码的复用性和测试性。《JavaScript函数式...
JavaScript函数式编程是一种编程范式，它强调使用函数来组织代码，将计算视为一系列惰性求值的操作。Underscore.js是一个轻量级的JavaScript实用库，它为开发者提供了大量函数式编程工具，使得在JavaScript中实践...
JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）...
JavaScript函数式编程是一种编程范式，它强调将计算视为对数据进行操作的纯函数，而不是通过改变状态或显式指令来控制程序流程。在JavaScript中，函数式编程可以帮助我们写出更简洁、可读性强且易于测试的代码。下面...
JavaScript函数式编程
而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合，函数式编程是一种编程范式，强调使用函数和避免改变状态。其中可能涵盖以下知识点： 1. **纯函数**：理解纯函数的定义，即给定相同的...
第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数...