函数:就是将一些语句进行封装,然后通过调用的形式,执行这段代码。
函数的作用:
1,将大量重复的语句写在函数里,可以直接调用函数,避免重复劳动。
2,简化编程,让编程模块化。
console.log("hello world"); sayHello(); // 由于是同时加载所以可以调用。 //调用函数 //定义函数: function sayHello(){ console.log("hello"); console.log("hello world"); }
函数的定义:
函数的语法:
function 函数名字(){ }
1,function:是一个关键字。
2,函数名字:命名规定和变量的命名规定一样。
3,参数:后面有一对小括号,里面是放参数。
4,大括号里面,是这个函数的语句。
函数的调用:
函数名().
函数的参数:形参和实参
函数的参数包括形参和实参
注意:实际参数和形式参数的个数,要相同。
例子:
sum(3,4); //7 sum("3",4); // "34" sum("Hello","World"); // HelloWorld //函数:求和 function sum(a, b) { console.log(a + b); }
函数的返回值:
console.log(sum(3, 4)); //函数:求和 function sum(a, b) { return a + b; }
伪数组 arguments:
arguments代表的是实参,且只在函数中使用。
1,返回函数实参的个数:arguments.length
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); //arguments接收所有参数且返回个伪数组 console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------"); }
之所以说argumes是伪数组,因为:arguments可以修改元素,但不能改变数组的长短:
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b) { arguments[0] = 99; //将实参的第一个数改为99 arguments.push(8); //此方法不通过,因为无法增加元素 }
清空数组的方式:
var arr = [1,2,3,4,5]; arr.splice(0); console.log(arr); //[] arr.length = 0; console.log(arr); //[] arr = []; console.log(arr); //[]
关于DOM的事件操作:
JavaScript基础分为三个部分:
1,ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
2,DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
3,BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。
事件的三要素:
JS是以事件驱动为核心的一门语言。
1,事件源。引发后续事件的html标签。
2,事件。js定义好的。
3,事件驱动程序。对样式和html的操作,也就是DOM。
代码的书写步骤:
1,获取事件源:documen.getElementById('id');
2,绑定事件:事件源box,事件onclick = function(){事件驱动程序};
3,书写事件驱动程序:关于DOM的操作。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> window.onload = function(){ var div = document.getElementById('box1'); // 2,绑定事件 div.onclick = function(){ // 3,书写驱动程序 alert('顾清秋') } } </script> <style type="text/css"> #box1{ 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box1"></div> </body>
常见事件如下:
1,获取事件源的方式(DOM节点的获取)
var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
2,绑定事件的方式:
方式一:直接绑定匿名函数
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1"); //绑定事件的第一种方式 div1.onclick = function () { alert("我是弹出的内容"); } </script>
方式二:先单独定义函数,在绑定。
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1"); //绑定事件的第二种方式 div1.onclick = fn; //注意,这里是fn,不是fn()。fn()指的是返回值。 //单独定义函数 function fn() { alert("我是弹出的内容"); } </script>
注意上方代码的注释。绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。
方式三:行内绑定。
<!--行内绑定--> <div id="box1" onclick="fn()"></div> <script type="text/javascript"> function fn() { alert("我是弹出的内容"); } </script>
注意第一行代码,绑定时,是写的"fn()"
,不是写的"fn"
。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
3,事件驱动程序:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color:red; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ oDiv.style.width = "200px"; oDiv.style.height = "200px"; oDiv.style.backgroundColor = 'yellow'; } } </script> </head> <body> <div id="box"></div> </body> </html>
上方代码的注意事项:
1,在js里写属性时,要用引号。
2,在js里写属性名时,都写成驼峰体。例如 background-color要写成backgroundColor.
有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。
建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。