函数
- 函数的定义
<script>
/* 定义一个函数
function 函数名(){
代码块
}
需求1：写一个函数，实现1到100相加
*/
function sum(){
var num = 0;
for(i=1;i<=100;i++){
num += i;
}
console.log(num);
}
/* 调用函数，使用函数
函数名();
*/
sum();
function fist(){
var a = 0;
for(j=50;j<=500;j++){
a += j;
}
document.write(a+'<br>');
}
// 使用函数
fist();
</script>
- 函数的类型
<script>
function sum(){
console.log('sum函数');
}
sum();
// 函数的数据类型是function,是一种特殊的对象；
console.log('sum的类型是'+typeof sum);
console.log('alert的类型是'+typeof alert);
console.log('document.write的类型是'+typeof document.write);
console.log('console.log的类型是'+typeof console.log);
// 对象里的函数(一般称为对象的方法)
var dog = {
color:'白色',
age:2,
bark:function(){
console.log('汪汪汪');
}
}
// 调用对象中的函数(方法)
dog.bark();
dog.bark();
dog.bark();
var drink ={
waterType:'热水',
amount:'25L',
pour:function(){
console.log('您喝水');
}
}
drink.pour();
</script>
- 函数绑定事件调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 绑定一个点击事件，通过事件调用函数
onclick:点击事件
onkeydowm:按下事件
-->
<button onclick="sum();">计算</button>
<input type="text" onkeydown="sum();">
</body>
</html>
<script>
function sum(){
var count = 0;
for(var i =0;i<=100;i++){
count += i;
}
console.log(count);
}
sum();//手动调用
</script>
- 函数绑定事件调用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>实现1-xxx相加的计算</h3>
<input type="text" value="" onkeyup="showSum();">
<button onclick="sum();">计算</button>
<p>1-<span id="num">xxx</span>相加的结果是：<span id="total">50</span></p>
</body>
<script>
function sum(){
/*
获取input的节点并且取名为$input,
这里要注意的是为了方便可以在前面用$后面接该标签的名字便于查看
*/
var $input = document.querySelector('input');
// 获取输入框的值
var num = $input.value;
console.log(num);
var total = 0;
for(var i =0;i<=num;i++){
total += i;
}
console.log(total);
// 教训：innerHTML后面接的是等于号不是逗号
document.querySelector('#total').innerHTML=total;
document.querySelector('#num').innerHTML=num;
}
</script>
</html>
- 有参函数
<script>
// 无参函数
// function add(){
// var a = 10;
// var b = 20;
// var num = a+b;
// console.log(num);
// }
// add();
// 有参函数
function add(a, b) {
var num = a + b;
console.log(num);
}
add(1, 2);
function sum(a){
var num = 0;
for(var i = 1;i<=a;i++){
num += i;
}
console.log(num);
}
sum(100);
</script>
- 函数返回值
<script>
// 函数返回值
function add(a,b){
var sum = a +b;
// return 函数返回值
return sum;
}
var sum = add(10,10);
document.write(sum);
function add2(o, p) {
var sum = o + p;
// 没有return时，默认返回undefined
}
var sum = add2(10, 10);
document.write(sum);
</script>
- 声明全局变量
<script>
/* 声明全局变量
全局变量，全局都可以使用引用的变量
*/
var man = {
name : '勇'
}
</script>
- 全局变量的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 把全局变量放在头部，这样的话下面的js才能访问到
代码的顺序从上到下
-->
<script src="demo5-2.js"></script>
<script>
// 全局变量
var dog = {
name: '小黑'
}
console.log(arr);
</script>
</head>
<body>
<script>
console.log(dog);
var cat = {
name: '咖啡猫'
}
</script>
</body>
</html>
外部js
var arr = [123,4,4,5,5,56];
- 局部变量
<script>
// add(){}里的变量为局部变量
function add(){
var a = 10;
var b = 5;
var sum = a+b;
console.log(sum);
// 局部作用域，局部变量，里面可以访问
}
console.log(b);
// 外部访问不到
</script>
- 全局变量变局部变量
<script>
var a = 100; //全局变量
function cal() {
var b = 200; //局部变量
function add() {
var b = 300; //局部变量 必须得加var 不然即使在函数里面也是全局变量
var c = 300; //局部变量
var sum = a + b + c;
return sum;
}
var result = add();
document.write(result);
}
cal(); //将上面的var a注释的话，这里打印不出结果
</script>
面向对象编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="name"></div>
</body>
</html>
<script>
/* 面向对象：根据需求要对某个区域进行js动态处理，
定义一个对象来代表这个区域，然后把这个区域里用到的动态方法包装在函数里，
系统化编程，当用到方法时 对象.函数名
*/
// 定义一个名字为home的对象
var home = {
// 定义一个名字为fist的函数，用于存放功能实现的代码
// 这里需要 函数名:function(){},否者会报错
fist:function(){
// 往name标签里添加算式的功能
var a = 1;
var b = 2;
var sum = a+b;
document.querySelector('.name').innerHTML=sum;
}
}
//然后要实现这个功能的话直接调用就可以了
home.fist();
/*
面向对象编程的好处，定义对象的名称是便于区别这个作用到哪个对象身上
然后把该对象要用到的功能全部以函数的方式放在对象里面
然后到引用的时候只需要引用对象里的函数就行
好处便于管理功能，便于调用功能
使得编程流程化(套路化)
*/
</script>
大纲-总结
(一)函数的定义和作用
1.封装多行语句，可以重复使用
2.类型:function，对象里的一种特殊类型
(二)函数的调用方式
1.手动调用
2.绑定一个事件调用
(三).函数传递参数(条件)
(四).函数返回值
1.使用return返回计算的结果
2.没写return，默认返回undefined
(五).作用域
1.什么是作用域
在某区域有作用的，成为作用域
2.全局作用域，在全局作用域下声明的变量是全局变量，在script标签里面（子级）声明的变量为全局变量
/*自我总结：通过全局变量可以方便js代码的处理，全局变量的可以放在
头部按顺序来排，(类似这个用到卖座项目里面的话，后台数据的代码由于是属于全局变量
可以放在home.html的body上面，这样一来home.js文件里的代码块就可以很好的管理)*/
3.局部作用域和局部变量
// 函数就是一个局部作用域，里面的变量为局部变量
a.函数内部可以访问函数外部的变量
b.函数外部不可以访问函数内部的变量
c.多个作用域用作用域链进行链接
d.没有块级作用域(区分作用域是以函数作为区分条件)
(六).面向对象编程
定义:面向对象：根据需求要对某个区域进行js动态处理，
定义一个对象来代表这个区域，然后把这个区域里用到的动态方法包装在函数里，
系统化编程，当用到方法时 对象.函数名
作用:面向对象编程的好处，定义对象的名称是便于区别这个作用到哪个对象身上
然后把该对象要用到的功能全部以函数的方式放在对象里面
然后到引用的时候只需要引用对象里的函数就行
好处便于管理功能，便于调用功能
使得编程流程化(套路化)
对象里的函数格式:
函数名:function(){
}
面向对象编程的顺序：创建对象->定义获取后台数据的函数方法名->根据需求进行定义功能函数名->引用后台数据达到想要的效果
整个编程都是围绕着创建的对象进行编程
小记.函数里的变量是不限量创建的，根据要储存的东西来取名，然后到引用的时候
格式都是为${变量名}，
html里的代码虽然引用到js里面之后没什么效果，但是留在html页面的话
可以预防以后要更改代码的时候有个参照。
局部变量是在函数里面用var 声明的变量，如果函数里面没有用var声明变量
那么那个变量虽然在函数里面但却是全局变量，会对后面相同的局部变量造成影响
路径传参是在路径后面加 ? 然后在写所传参数的 变量名称=值
也就是http//:baidu.com?username=fanyong&age=20
其中&为连接其他参数的符号
突然想到了寻找想要传进去的变量名的问题，根据后台传过来的数据表，
找到一个对应的变量要看清楚对应的对象或数组下，要指定到对应的下面才能
不报错，对象下的属性(数组)后接点 对象名.属性 数组后的属性(对象)
数组名[对应的属性名] 其中要注意的是属性名，可以是数字或单词，根据
对应的写进去
网友评论