JavaScript : Function
Syntax
function functionName(argument1,argument2..argumentN)
{
// block of code in JavaScript
}
Declare a JavaScript function
you can do it in one of two ways:
方式一
function cube(n)
{
return n*n*n;
}
方式二
var cube = function(n)
{
return n*n*n;
};
Calling JavaScript functions
cube(2);
Function scope
// The following variables are defined in the global scope
var x = 12, y = 25;
// This function is defined in the global scope
function add(){
return (x + y);
}
add(); // Returns 37
Parameters
If you pass a primitive parameter to a function by value and if the function changes the value of the parameter, the changes is not reflected globally or in the calling function.
函数内部对原始类型数据进行改变,不会对全局变量的值造成影响
function primitive_parameter(a)
{
a = 100;
alert("Inside the function a is: " + a);//100
}
var a = 20;
alert("Before calling the function a is: " + a);//20
primitive_parameter(a);
alert("After calling the function a is: " + a);//20
If you pass an object as an non primitive parameter and the function changes the object's properties, the changes is reflected globally i.e. it is visible outside the function.
函数的参数是一个对象,在函数内部改变对象的属性值,这个改变会同步到全局的对象上。
function student(theObject)
{
theObject.name = "Sara";
}
var student1= {name: "Scott", standard: "V", roll_no: 1};
var x,y;
x = student1.name; // x gets the value "Scott"
student(student1);
y = student1.name; // y gets the value "Sara"
// (the name property was changed by the function)
function student(theObject)
{
theObject = {name: "Sara", standard: "VI", roll_no: 1};// a new Object
}
var student1= {name: "Scott", standard: "V", roll_no: 1};
var x, y;
x = student1.name; // x gets the value "Scott"
student(student1);
y = student1.name; // y still gets the value "Scott"
Using the arguments object
Using the arguments object, you can call a function with more arguments and it is useful if you don't know in advance how many arguments will be passed to the function. The individual arguments contained in the arguments object can be accessed in the same way array elements are accessed. You can access each argument in the following way :
arguments[i]
function adding_numbers(numbers) {
var result = 0, i;
// iterate through arguments
for (i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
alert(adding_numbers(1,2,3,-4));
Recursive function
递归函数
例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript: Recursive function.</title>
<script type="text/javascript">
function factorial(n)
{
if ((n==0) || (n==1))
return 1;
else
facn = (n * factorial(n-1))
return facn;
}
</script>
</head>
<body>
<h1 style="color: red">JavaScript Recursive function example</h1>
<hr />
<script type="text/javascript">
function factcal()
{
n=document.form1.text1.value;
result = factorial(n);
alert(" Factorial of "+n+" = "+result);
}
</script>
<form name="form1" action="#">
Input a number :
<input type="text" name="text1" size="5" />
<br />
<input type="button" value="Result" onclick="factcal()" />
</form>
</body>
</html>
一个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cube of a Number</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input a number and get it's Cube</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="cube(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="cube-number.js"></script>
</body>
</html>
function cube(inputtxt)
{
var numbers = /^[-+]?[0-9]+$/;
var x;
if(inputtxt.value.match(numbers))
{
alert('Cube of '+inputtxt.value+' is '+inputtxt.value*inputtxt.value*inputtxt.value);
document.form1.text1.focus();
return true;
}
else
{
alert('Please input numeric characters only');
document.form1.text1.focus();
return false;
}
}
PreDefined Functions---Javascript预定义的函数
isFinite()
判断一个数是否是有限范围内的
The isFinite is used to determine whether a specified number is finite or not. isFinite is a top-level function and is not associated with any object.
isFinite(number)
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
document.write(isFinite("Good Morning")+ "<br />");//false
document.write(isFinite("2009/01/01")+ "<br />");//false
document.write(isFinite(455)+ "<br />");//true
document.write(isFinite(-9.34)+ "<br />");//true
document.write(isFinite(15-12)+ "<br />");//true
document.write(isFinite(0)+ "<br />");//true
//]]>
</script>
isNaN()
The isNaN function is used to determine whether a value is "NaN" (not a number) or not. isNaN is a top-level function and is not associated with any object.
判断是否为非数字类型的值
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
document.write(isNaN("Good Morning")+ "<br />");//true
document.write(isNaN("2009/01/01")+ "<br />");//true
document.write(isNaN(455)+ "<br />");//false
document.write(isNaN(-9.34)+ "<br />");//false
document.write(isNaN(15-12)+ "<br />");//false
document.write(isNaN(0)+ "<br />");//false
//]]>
</script>
parseInt()
The parseInt is used to get a numeric value from a string.
parseInt is a top-level function and is not associated with any object.
parseInt(numString, radix)
parseFloat()
The parseFloat is used to get a floating value from a string.
parseFloat is a top-level function and is not associated with any object.
parseFloat(string)
NaN
NaN is a value represents not a number.
NaN不是一个数值
NaN is a top level property and is not associated with any object.
NaN不与任何对象关联,它是一个顶级属性
NaN is never equal to any other number, including NaN itself. It is not possible to check whether a value is number by comparing it with NaN using equal to operator. You have to use the isNaN function instead.
NaN与任何数字都不相等,包括它自己。不能通过与NaN比较是否相等来判断是否为数字类型
Methods like Number constructor, parseFloat, and parseInt return NaN if the argument passed to them are not numbers.
对于操作数字的方法,Number constructor,parseInt,parseFloat,如果发生异常,将返回NaN
NaN property can be used to refer an error for a function, provided the function returns a valid number.
NaN更多的是用来在发生异常的时候,返回一个数据给调用者
Number
The number function is used to converts a specified object to a number..
Number(obj)
obj : Required. An object.
Note :
If the object is a Date object the function returns a value in milliseconds calculated from 01 January, 1970 UTC (GMT).
The return value is positive if the given date is after the said date and negative if before the said date.
If the object is a string and if there is no well-formed numeric literal the function returns NaN.
String
The String function is used to converts a specified object to a string. String is a top-level function and is not associated with any object.
String(obj)
encodeURI function
对URI按UTF-8进行编码
以下字符不编码,原样传输
; , / ? : @ & = + $
alphabetic, decimal digits, - _ . ! ~ * ' ( )
#
encodeURI(uri)
decodeURI function
解码
decodeURI(encodedURI)
encodeURIComponent function
对URI进行编码,除了下面的字符
alphabetic, decimal digits, - _ . ! ~ * ' ( )
encodeURIComponent(str1)
decodeURIComponent function
解码
decodeURIComponent(encodedURI)
分享到:
相关推荐
- **JavaScript Exam**:在线认证考试,通过考试可以获得W3Schools颁发的证书。 以上内容为JavaScript教程的核心知识点概览,通过系统学习这些知识点,可以帮助开发者全面掌握JavaScript编程技术,无论是初学者还是...
在网页设计领域,CSS3的变形(transform)功能极大地提升了动态效果的创建效率,使得网页设计师无需依赖图片、Flash或JavaScript就能轻松实现各种变换效果。2012年9月,W3C发布的CSS3变形工作草案包括了2D和3D变形,...
Title: Beginning ...Beginning JavaScript, 5th Edition shows you how to work effectively with JavaScript frameworks, functions, and modern browsers, and teaches more effective coding practices using ...
JavaScript,作为全球最广泛使用的编程语言之一,是创建动态网页和交互式应用程序的关键工具。ES6,即ECMAScript 2015,是JavaScript语言的一个重要版本,引入了大量新特性和改进,极大地提升了开发效率和代码质量。...
W3Cschool的JavaScript参考手册是学习和查阅该语言特性的宝贵资源。它提供了全面、详细且易于理解的教程,适合初学者和经验丰富的开发者。 在JavaScript的世界里,了解基础语法是至关重要的。这包括变量(variables...
JavaScript 待办事项列表参考: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Modelhttp://www.w3.org/DOM/为所需功能添加 functions(){}: 新任务、编辑任务、删除任务、已完成和未完成的...
- **JavaScript的地位**:说明JavaScript在前端开发中的重要性,并介绍了JavaScript与其他编程语言的区别。 **2. Data Types and Variables** - **数据类型**:详细讲解JavaScript中的各种数据类型,包括但不限于...
It was written with this philosophy : best performances, more secured and brings a lot of new functions This plugin is developped on WordPress 3.3, with the constant WP_DEBUG to TRUE. * ...
- **JavaScript**: 脚本语言,用于实现网页上的交互功能,例如动态效果、用户输入响应等。 #### 3. 功能特性 - **动态雪花效果**: 使用JavaScript实现的动态雪花飘落效果,营造浪漫氛围。 - **爱心动画**: CSS3...
5. 模块化命名:在大型项目中,使用模块化命名空间,如myApp.utils.functions(),减少全局变量污染。 6. 注释清晰:良好的注释有助于理解代码逻辑,每个函数、类或复杂的代码块前都应有注释。 以上规范旨在提升代码...
W3School 提供的离线版文档包含了丰富的 JavaScript 知识点,涵盖了从基础语法到高级特性,旨在帮助开发者深入理解和应用这一广泛使用的脚本语言。 1. **基础语法** - 变量(Variables):JavaScript 中的变量无需...
10. **代码质量**:遵循W3C的编码标准,保证代码的整洁和可维护性。 在imco-archives-main这个压缩包中,可能包含了以下文件和目录: - `style.css`:主样式表,包含了主题的所有CSS规则。 - `functions....
JavaScript作为一个轻量级的解释型编程语言,其灵活性和强大的DOM操作能力使其成为实现网页动态效果的首选工具。本文将深入探讨JavaScript在动画制作中的应用,以及如何构建一个简单的动画引擎。 JavaScript动画的...
The Selectors API provides a set of functions for selecting elements from the DOM using CSS selectors. This is an alternative to the traditional DOM traversal methods and can be more efficient in ...
jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在学习开发HTML5网站时,jQuery的功能尤其重要,因为它能帮助开发者更高效地实现复杂的网页交互。 ### 1. jQuery的选择...
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/jsp http://java.sun.com/xml/ns/jsp/taglib_2_0.xsd" version="2.0"> <tlib-version>1.0</tlib-...
- `js`文件夹:JavaScript文件用于实现动态交互和功能,如表单验证、滑动效果、下拉菜单等。这些脚本可能在HTML文件中通过`<script>`标签引用,或者通过外部链接引入,如`main.js`或`functions.js`。 4. **图像...
- **性能优化**:缓存技术如W3 Total Cache可以显著提高网站速度;减少HTTP请求,合并CSS和JavaScript文件;使用CDN服务分发静态资源。 7. **社区支持** - **WordPress社区**:WordPress拥有庞大的开发者社区,...
<script type="text/javascript" src="my_jquery_functions.js"> jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名...
4. **JavaScript/jQuery**:为了实现多级菜单的交互效果,如下拉或滑出菜单,可能需要使用JavaScript或jQuery。这可能包括事件监听、DOM操作和动画效果。 5. **响应式设计**:考虑到现代网站需要适应不同设备和屏幕...