JavaScript交互式网页设计—

<1>.函数的定义

函数：为完成特定的功能而定义的一段程序代码

函数的定义： function 函数名（参数列表）{ 程序代码 }

1.JavaScript函数不必说明返回值类型，列表参数不用var

2.函数名的命名规则与变量一致

3.参数列表可以传若干参数，也可以不传，传入的实际参数会被函数内部实际获取，无关参数会被放入argument数组中

<script>//定义一个计算面积的方法function getArea(width,height){var area = width*height;document.write("面积为："+area);}</script>

<2>.函数的调用

函数的调用需要通过函数名来完成调用，并且括号中需传入所需要的参数值；

<3>.函数的返回值

函数的返回值通过return关键字来完成，可以将函数内部语句的结果返回给外部语句，函数外部语句通过参数来与函数内部进行信息传递,return关键字返回结果值之后，return以下的代码则不会再执行，函数不一定需要返回值，但返回值可以停止后续的代码的执行

<script>function getArea(width,height){return width*height;    }var result = getArea(3,4);document.write("面积为："+result);
</script>

<4>.匿名函数

匿名函数顾名思义为没有名字的函数也被称为拉姆达函数，如下

     <script>(function(width,height){document.write("面积为："+height*width);})(3,4);</script>

JavaScript中，函数也是一种数据类型，即function型，其也可以赋值给变量，如下

     <script>var area =  function(width,height){return width*height;};document.write(area(3,4));</script>

<5>.变量的作用域

变量分为全局变量和局部变量，全局变量为函数外声明的变量，整个script脚本中都可以使用，局部变量为函数内部的变量，只能在函数内部中使用，如果函数输出名变量名称相同的全局变量和局部变量，函数优先输出局部函数

    <script>var result =10;function getResutlt(){var result = 20;document.write(result);}getResutlt();</script>

<6>.JavaScript系统函数

1.parseInt（）函数：将字符串转换整数，从字符串开头开始解析，在第一个非整数的位置停止解析并返回前面读到的所有整数，若开头不是整数，则返回NAN；

2.parseFloat（）函数：与parseInt函数相同，不过返回的是浮点数

3.isNaN（）函数：判断字符串是否不是数字，不是返回true，否则返回false，NaN即为not a number(不是数字) , isNaN("空格")返回为false,即空格默认为数字

4.eval () 函数：即返回执行代码串的结果，例如输入文本框的值为5+1*3,则eval（）函数返回8，即返回的是计算结果

<7>.事件

事件（event）：通过鼠标或按键在浏览器窗口或页面元素的操作。

例如：鼠标在按钮上进行了点击，这就是一个鼠标点击事件，按钮就是事件源。将一段程序代码与事件进行绑定，触发事件时将自动执行代码程序，整个过程叫做事件驱动（event driver），对事件绑定的代码程序或函数称为事件处理程序（event handler）

<8>.事件与处理程序的绑定

1.在元素标签内增加一个处理事件的属性，属性值为函数名（带参数列表

<body><h3 onclick="getFont()">点击改变颜色</h3><script>function getFont(){document.getElementsByTagName("h3")[0].style.color = "red";}</script></body>

）

2.在脚本代码中设置元素的事件属性，属性值为函数名（不带参数列表）

<body><h3>点击改变颜色</h3><script>//获取页面元素对象var h3 = document.getElementsByTagName("h3")[0];//定义一个改变颜色的函数function changeColor() {h3.style.color ="red";};h3.onclick = changeColor; console.log(changeColor());console.log(changeColor);</script></body>

说明：changeColor()有()表示函数的调用，而changeColor没有()表示函数的代码语句，h3.onclick是一个点击事件，需要绑定的是代码程序而不是函数的调用

<body><h3>点击改变颜色</h3><script>    //定义一个改变颜色的函数function changeColor() {h3.style.color ="red";};document.getElementsByTagName("h3")[0].onclick = function(){this.style.color ="red";};</script></body>

3.页面元素的事件直接绑定一段代码程序

<9>.常用的事件

1.鼠标点击事件 onclick

2.鼠标的移入和移出事件 onmouseover(移入) onmouseout(移出)

3.鼠标移动事件，以像素为单位 onmousemove

4.页面加载完成的监听事件 onload

5.鼠标聚焦离焦事件,常用于表单验证 onblur(离焦) onfocus(聚焦)

6.输入框或下拉框值发生改变触发的事件 onchange

7.表单提交事件 onsubmit return一个boolean型的值给浏览器，表示浏览器是否对表单进行默认处理，而表单的默认处理是跳转至action的指定页面

<body><form action="info.html" onsubmit="return avlid()"><input type="submit" value="提交" /></form><script>function avlid(){return true;}</script></body>

JavaScript交互式网页设计——函数与事件相关推荐

JavaScript交互式网页设计简介
JavaScript交互式网页设计 JavaScript简介: JavaScript诞生于1995年,主要是进行用户输入的合法性验证. JavaScript的概念: JavaScript可以嵌入到HT ...
JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...
JavaScript交互式网页设计笔记
一.JavaScript基本语法 1.简介 JavaScript诞生于1995年,主要是进行用户输入的合法性验证 Web脚本语言轻型的.解释性的浏览器内 2.执行原理当客户端向服务器请求某个 ...
JavaScript交互式网页设计 • 【第6章初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
Javascript交互式网页设计试题（一）
精选JS 50道试题,答案在首尾,喜欢收藏吧! 1.在JQuery中,下列( )方法能够获取或设置元素的文本内容,不含HTML标签. A attr() B text() C value() D rep ...
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
JavaScript交互式网页设计——jQuery
<一>.jQuery概述 <1>.概述:由于不同浏览器对JavaScript解析方式有所区别,随着浏览器的不断更新,JavaScript出现了兼容性问题.为解决此问题,出现了许 ...

JavaScript交互式网页设计——函数与事件

JavaScript交互式网页设计——函数与事件相关推荐

最新文章

热门文章