`

JavaScript 函数

 
阅读更多
JavaScript 函数 

<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
}














分享到：
| java 代码优化（一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript函数式编程

    JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》，读者可以了解...

    JavaScript函数式编程.pdf

    不过，由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf"，我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富，涉及很多方面的内容，下面将详细介绍...

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    javascript函数速查

    JavaScript函数是编程语言的核心组成部分，它是一段可重复使用的代码块，可以接受参数并返回值。在JavaScript中，函数不仅可以作为表达式，还能作为变量赋值、作为参数传递以及作为返回值。本速查指南将深入探讨...

    javascript函数速查手册

    JavaScript函数是编程语言的核心组成部分，尤其在Web开发中起着至关重要的作用。这份"JavaScript函数速查手册"涵盖了JavaScript函数的各个方面，旨在帮助开发者快速查找和理解各种函数的用法和特性。 一、函数基础 ...

    QT和网页中的JavaScript函数进行相互调用的实现

    - 这里的回调函数用于处理JavaScript函数的异步返回结果，如果需要同步获取结果，可以使用`QWebEngineScript`来注册一个全局JavaScript对象，然后通过该对象调用JavaScript函数。 2. **JavaScript调用QT函数**： ...

    javascript 函数教程（由浅入深）

    以下是关于JavaScript函数的详细讲解： 1. **函数定义**： - 无参函数定义：`function 函数名 () { 代码... }` - 有参函数定义：`function 函数名 (参数列表) { 代码... }` - 参数列表中的参数可以是变量、常量...

    JavaScript函数式编程pdf

    JavaScript函数式编程是一种编程范式，它将计算视为数据处理，并强调使用无副作用的纯函数。在JavaScript中，函数式编程允许我们写出更简洁、可读性更强的代码，同时提高了代码的复用性和测试性。《JavaScript函数式...

    javascript函数式编程 underscore.js

    JavaScript函数式编程是一种编程范式，它强调使用函数来组织代码，将计算视为一系列惰性求值的操作。Underscore.js是一个轻量级的JavaScript实用库，它为开发者提供了大量函数式编程工具，使得在JavaScript中实践...

    JavaScript函数（源代码）

    JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）...

    JavaScript 函数式编程 (英文版)

    JavaScript函数式编程是一种编程范式，它强调将计算视为对数据进行操作的纯函数，而不是通过改变状态或显式指令来控制程序流程。在JavaScript中，函数式编程可以帮助我们写出更简洁、可读性强且易于测试的代码。下面...

    JavaScript函数式编程

    JavaScript函数式编程

    javascript指南和函数式编程

    而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合，函数式编程是一种编程范式，强调使用函数和避免改变状态。其中可能涵盖以下知识点： 1. **纯函数**：理解纯函数的定义，即给定相同的...

    JavaScript函数式编程_PDF电子书下载 高清 带索引书签目录

    JavaScript函数式编程_PDF电子书下载 高清 带索引书签目录

    javascript_函数大全

    ### JavaScript函数大全解析 在深入探讨JavaScript函数的广泛应用与特性之前，让我们首先明确一点：JavaScript函数不仅是编程语言中的核心组件，更是实现复杂逻辑、封装功能模块的关键所在。不同于许多传统面向对象...

Magicbox
Global site tag (gtag.js) - Google Analytics