<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head> <body> <button onclick="test()">Button</button> <script type="text/javascript">
var test = function()
{
document.write("javascript");
}
</script>
</body>
</html>

点击按钮后就会显示javascript。这里设置了一个监听,点击onclick,会执行test的内容,但有一点应该知道,onclick的属性值并不是简单的函数名,而是可以放多条语句,以下写法也是正确的:

  <button onclick="document.write('javascript');
document.write('maybe');">Button</button>

点击后的结果为javascriptmaybe,所以千万不要误以为onclick的值是函数。

但是有的时候,我们onclick 和 script脚本写在html里,更改后的html如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head> <body>
<button id="button1">Button</button> <script type="text/javascript" src="maybe.js">
</script>
</body>
</html>

新建一个javascript文件,文件名为src属性的值maybe.js代码如下:

var test = function ()
{
document.write("i am the one");
}; document.getElementById("button1").onclick = test;

运行结果:i am the one。注意被document添加的相应只能是一个函数,所以等号右边是test,而不是test();如果写成test();我们还需要设置一个返回值,比如:

var test = function ()
{
document.write("i am the one"); return function()
{
document.write("i am the two");
}
}; document.getElementById("button1").onclick = test();

执行过程如图所示:

i am the one的出现应该不难理解,因为test() 就代表了函数的执行。

javascript函数的基础功能的更多相关文章

  1. 100多个很有用的JavaScript函数以及基础写法大集合

    100多个很有用的JavaScript函数以及基础写法大集合 1.document.write("");为 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:docume ...

  2. 让你的javascript函数拥有记忆功能,降低全局变量的使用

    考虑例如以下场景:假如我们须要在界面上画一个圆,初始的时候界面是空白的.当鼠标移动的时候,圆须要尾随鼠标移动.鼠标的当前位置就是圆心.我们的实现方案是:假设界面上还没有画圆,那么就新创建一个:假设已经 ...

  3. 常用Javascript函数与原型功能收藏

    // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String. ...

  4. javascript 函数的基础知识

    1. Why JavaScript functions always return a value? I'm taking a course in JavaScript programming, an ...

  5. javascript函数没有重载测试

    今天继续学习javascript系列教程,虽然是基础,但我觉得还是有必要用心来学习的,不要怕难,不用怕忘记,不要怕学不会.哪个高手不是从零开始的,我要坚定自己的学习信心,并且认真的走下去.虽然路途艰辛 ...

  6. JavaScript 函数基础

    1. JavaScript 函数基础 1. 定义方法 2. 函数的调用方法 3. 函数方法 apply : 将函数作为数组的方法来调用 将参数以数组形式传递给该方法 call   : 将函数作为对象的 ...

  7. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  8. 零基础讲解JavaScript函数

    一 JavaScript函数1 什么是函数  函数是一组代码(指令)的集合,通常用来完成某个单一的功能.(书的目录和章节,电视剧剧集的名称等)2 为什么要使用函数  2.1 把复杂程序划分成不同的功能 ...

  9. 基础的JavaScript函数

    基础的JavaScript函数 1.首字母大写 2.去除数组重复项 3.数组的排序 4.闭包 1. 把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字(使用JavaScript的map函 ...

随机推荐

  1. 前端开发面试题收集 css

    什么是CSS盒子模型 页面上的每个元素都被浏览器看做是一个矩形的盒子. 由内容.填充.边框.边界组成. 什么是 css sprite 将多个图片拼接在一个图片中,通过background-positi ...

  2. leetcode算法刷题(五)——动态规划(三)

    今天的题目不是leetcode上面的.只是觉得动态规划还是不算很熟练,就接着找了点DP的题练练 最长递增子序列的长度 题目的意思:传入一个数组,要求出它的最长递增子序列的长度.例如:如在序列1,-1, ...

  3. POJ 1052 Plato's Blocks

      Plato's Blocks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 734   Accepted: 296 De ...

  4. jQuery插入节点的方法

    注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容:  HTML代码:<p>我想说:</p>jQuery代码:$(" ...

  5. STM32与LPC系列ARM资源之比较

    由于有周立公开发板的影响,LPC系列的开发板在工程师心目中一般是入门的最好型号之一.这次刚好有STM32的竞赛,正好将两者的资源进行比较一下(LPC系列以LPC213X为例). LPC213X包括LP ...

  6. android:TextAppearance.Material.Widget.Button.Inverse问题

    如果在刚够构建Android Studio项目的时候,运行发现,出现没找到资源的错误!找不到com.android.support/appcompat-v7/23.0.1/res/values-v23 ...

  7. SpringDataRedis事务处理

    public Long leftPush(V value) { return this.ops.leftPush(this.getKey(), value); } public Long leftPu ...

  8. 将Linux下编译的warning警告信息输出到文件中[整理笔记]

    Linux中,脚本语言环境中,即你用make xxx即其他一些普通linux命令,比如ls,find等,不同的数字,代表不同的含义: 数字 含义 标准叫法0 标准输入  stdin = standar ...

  9. java中读取程序运行时间

    第一种是以毫秒为单位计算的. Java代码 //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  // ...

  10. aix5.1 5.2 5.3 6.1 7.1运维技术总结

    ++++++++++++++++++++++++++++ + Ruiy 20014-10 zz + +Technology Area; + Tel:150 55198367 + QQ:5160 591 ...