JS 自定义函数/方法

函数简述及作用

如果代码需要被重复的利用,那么为了统一编写使用,可以将其封装在一个函数/方法中;
作用:增强代码的复用性;

函数的格式

function 方法名(参数列表)

{
    
    

方法体

}

注意事项:

js函数定义一定要用function ,且一定是小写;
js函数无需定义返回值类型,直接在function之后书写即可;
JS定义函数中参数列表中无需使用var关键字,否则报错;
js函数体重,return可以不写,也可以return具体值,或者近近些return也可以;
函数调用执行完毕一定有返回值,返回值的类型根据return来决定,函数中若没有返回具体值,则默认返回undefined.

举例:
function getSum(a,b)         //Sum:z综合;
{
    
    
return a+b;
}

js中不存在函数重载,如果函数同名,只有方法相互覆盖,最后定义的函数覆盖之前的定义
因为js不存在函数重载,所以js中仅根据方法名来调用函数,即便实参与函数的形参不匹配,也不会影响正常使用;

如果形参没有赋值,那么默认传入为undefined

例如:

 <script>
        function getNum(a,b)//不需要var
        {
    
    
            return a+b;
        }
        function getNum(a,b,c)
        {
    
    
            return a+b+c;
        }
        alert(getNum(1,2));
        //得出结果为NaN,因为没有第三个参数值的出现,所以a+b+c没有正确的值;
        
    </script>

自定义对象

创建

第一种创建

function 对象名（）

｛

函数体

｝

function Person()//定义/声明了一个对象
{
    
    
//此处this一定要写；
this.name;
//this.name="张三";
this.age;
}
var p=new Person();//创建一个person对象；
alert(p.name);
alert(p.age);

为属性赋值:

//为属性赋值:
function Person(n,a)//定义/声明了一个对象
{
    
    
//此处this一定要写；
this.name=n;
//this.name="张三";
this.age=a;
}
var p=new Person("张三",16);//创建一个person对象；
//此处既然可以用构造函数来赋值,而且没有private和public之分,就可以直接在创建对象之后调用属性来进行赋值;
alert(p.name);
alert(p.age);

属性定义方式:

this关键之,在对象声明阶段,定义一个属性
创建对象之后,适用对象.属性 方式,动态定义属性

例如:

function Person()//定义/声明了一个对象
{
    
    
//此处this一定要写；
this.name;
//this.name="张三";
this.age;
}
var p=new Person();//创建一个person对象；
p.sex="男";
alert(p.name);
alert(p.age);
alert(p.sex());//输出"男";

第二种创建

格式:var 对象名={属性名1:“属性值”,属性名2:“属性值”-----------};

var person={
    
    
    name:"小李",age:13
};
alert(person.age);
alert(person.name);
//可以在之后重新创建一个属性
//可以在之后将属性值更改;

注意:

该方式直接可以创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可;
此处一定要用":“而不能用”=";

typeof(parameter)判断对象类型

number: 数字型(NaN也是数字型)
string: 字符串型
boolean: 布尔型
function: 函数型
object: 对象型
undefined: 一个没有定义的变量,函数,或者undefined

parseInt和parseFloat数制转换

parseInt(string,num):将字符串转变为整数,string表示需要转换的字符串,num表示转换的进制------其实,就是在解析中将num进制的string字符串转化为10进制字数字(这是个人实践所得的猜测,但是书中所写与个人实践不相同,相比来说,我更相信自己实践所得,当然,可能会出现错误,如果日后发现此处错误,我会更改;)

在进行转换时,是从字符串第一个数字开始连续的所有数字的组合,如果其中有一个不是数字,那么直接转变前边的字符串,后面的省略,如果字符串的第一个字符就不是数字,那么直接返回NaN;
parseFloat(string,num)与parseInt(string,num)类似记住,在JS中参数少于原给定的参数,一般不会报错,当然,必要参数除外

isFinite(parameter)与isNaN(parameter)

用于检查其参数是否为无穷大, 也可以理解为是否为一个有限数值.

如果参数是NaN,无穷大,则返回false,其他返回true--------finite有限的,函数中文可以理解为是否是有限的;

与isNaN()正好相反

Array对象

创建

var arry1=new Array();//创建一个空数组
var arry2=new Array(size)//创建一个指定数组长度的数组，每个元素都是undefined；
var arr3 =new Array(e1,e2……)//创建一个附有初始值的数组，初始值为e1，e2……
var arr4=[e1,e2……]//创建含有e1……的数组，此处一定要注意，这里和C++和java有些不一样.若arr4=[10],不是一共有十个空间，而是只有一个元素为10，此处是个坑；

属性

length：返回数组长度
pop：删除数组中的最后一个元素并返回该元素值
reverse：翻转元素
join(separator):返回字符串，这个字符串将数组的每一个元素都连接在一起，用separator来隔开
push（e1，e2……）：将一个或多个元素添加到数组结尾，返回数组的长度；

sort():对数组元素排序，排序结果是一个位一个位来排序的，就像字符串的字典序排序差不多；需要自写个函数来达到我们想要实现的从小到大或者从大到小的排序；

 <script>
        function compare(a,b)
   {
      
           return a-b;}
        var a=[];
        a.push(301);
        a.push(20);
        a.push(4,3,233);
        a.sort(compare);//如果想要实现从小到大，一定要重写，否则会出现错误；
        alert(a.join());
    </script>

特性

js可看作java中的ArrayList集合
数组的长度可以自动修改
数组中没有类型限制，可以存放任意类型，比如var a=[1,2,true,“a”];

BOM对象

BOM (Browser Object Model)浏览器对象模型

浏览器:IE,火狐,谷歌等

作用:用来执行浏览器的相关操作.(例如:浏览器的地址,弹出消息等 )

window对象是JS的内置对象,使用Window对象调用方法是,可以省略Window不写.

alert()

警告窗:用来弹出警告消息.

confirm()

确认框:用于告知用户信息,并收集用户的选择

//有返回值,boolean类型

//点击确定–>true

//点击取消–>false

alert(confirm("你好"))

定时器

循环定时器-setInterval()

//interval—间歇,休息时间,时间间隔

//setInterval()----设置间隔时间

循环定时器:调用一次就会创建并且循环执行一个定时器

格式: setInterval(调用方法(此处为string字符串),毫秒值);

例如:setInterval("run1()",2000);

clearInterval(循环定时器的ID);

setInterval的返回值就是id;****

function run1()
{
    
    
    alert("jiangming");
}
   
   run1();
  var id= setInterval("run1()",2000);
   clearInterval(id);//此处可以取消循环定时器

一次性定时器

格式:

setTimeout(调用方法,毫秒值)

//timeout----超时,暂停,


function run1()
{
    
    
    alert("jiangming");
}
   

  var id= setTimeout("run1()",2000);//只会执行一次

clearTimeout(一次性定时器的ID);

location对象

获取URL地址:

var p= location.href;

//href-----链接,超链接

设置URL地址:

location.href=“5.html”;

//内网----直接跳转到5.html这个网页;

location.href=“http://www.baidu.com”

//外网----跳转到百度搜索

DOM对象

DOM (Document Object Model) 文档对象模型

文档: 标记类文档

DOM是将标记型文档中所有内容(标签,文本,属性)封装成对象

通过操作对象的属性或者方法,来达到操作或者改变展示效果的目的

//DOM对象的相关方法:

// document:

// getElementById(string);通过元素id获取元素对象;若找不到,则返回null

var t1=document.getElementById("t1");

alert(t1);//[object HTMLInputElement]

//getElementsByName();通过元素的name属性获取符合要求的所有元素;如果找不到,返回空数组
 <input type="text" id="t1"/>
    <input type="checkbox" name="hobby" value="read"/>
    <input type="checkbox" name="hobby" value="code"/>
    <input type="checkbox" name="hobby" value="wirte"/>
    <script>
      //通过name属性来获取所有需要的元素;
      //返回的是一个元素结点对象数组
   var arr=   document.getElementsByName("hobby");
alert(arr.length)   ;//3
//getElementsByTagName();通过元素的元素名属性获取符合要求的所有元素;
  <ul>//无序列表
        <li>jiangming</li>
        <li>android</li>
        <li>ios</li>
        <li>php</li>
    </ul>
    <script>
//通过标签名获取所有需要的元素;
var a=document.getElementsByTagName("li");
alert(a.length);//4
alert(a[0]);
    </script>
//getElementsByClassName();通过元素的class属性获取符合要求的所有元素
<input type="radio" name="sex" value="male" class="h1"/>
<input type="radio" name="sex" value="female" class="h1">
    <script>
//通过class属性值获取所有需要的元素;
var a=document.getElementsByClassName("h1");
alert(a.length);//2
    </script>
注意:获取某个/某些元素结点对象,必须保证元素节点对象被先加载到内存之中

元素对象常见属性:

value:

<input type="text" id="t1" value="你好"/>

  <script>

   var t1=document.getElementById("t1");

   //获取value;

   alert(t1.value);//你好

   //修改value

   t1.value="你好吗";

   alert(t1.value);

 </script>

className:

//由于class是关键字,所以不能直接利用class来获取或者设置,只能使用className来设置或者获取;

  <span id="s1" class="ys1">今天天气不错</span>
    <script>
      
        var arr=document.getElementById("s1");
        //获取class名称
        alert(arr.className);
   //设置class名称
   arr.className="ys2";
      </script>

checked:

// html中checked=“checked”,Js中返回true/false;

 <input type="checkbox" id="hobby"/>
  <script>
      var arr=document.getElementById("hobby");
      //获取checked
      alert(arr.checked)  ;//false;
      //设置
      arr.checked=true;
      alert(arr.checked);
  </script>

innerHTML:

获取内容体;

 <span id="s1">今天天气不错</span>
      <script>
          //获取
          var s1=document.getElementById("s1");
          alert(s1.innerHTML);//今天天气不错
          //设置:
          s1.innerHTML="几天";
          alert(s1.innerHTML);//几天
                </script>

JS事件

通常鼠标或热键的动作我们称之为事件

点击,表单提交,值发生改变,鼠标移入,鼠标移出

通过JS事件,可以完成页面的指定特效

JS事件驱动机制

事件源:产生事件的组件
事件:由事件源所产生的动作或者事情
监听器:专门处理事件源所产生的事件
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件发生,如果事件源产生指定时间,则调用监听器处理;

常见的JS事件

点击事件

点击事件:鼠标或者热键点击元素组件时触发;

   <script>
function run1(){
    alert("点击完成");
}
        </script>
<body>
    <input type="button" value="点我啊" οnclick="run1()"/>
</body>

焦点事件

焦点:整个页面的注意力

默认一个正常页面最多仅有一个焦点

获取焦点事件(onfocus)

<input type="text" onfocus="run1()"/>
    <script>
        function run1(){
    
    
            alert("获取到焦点");
        }
    </script>

失去焦点事件(onblur)

失去焦点事件:元素组件失去焦点时触发

<input type="text" onblur="run1()"/>
    <script>
        function run1(){
    
    
            alert("失去了焦点");
        }
    </script>

域内容改变事件(onchange)

域内容改变事件:元素组件的值发生改变时触发

 <select onchange="run()">
       <option value="bj"> 北京</option>
       <option value="sh"> 上海</option>
       <option value="gz" selected> 广州</option>
       <!-- selected是默认选中, -->
   </select>
   <script>
       function run()
       {
    
    
           alert("值发生改变");
       }
   </script>

加载完毕事件(onload)

加载完毕事件:元素组件加载完毕时触发

<body onload="run()">
  你好
  今天不错
  <script>
      function run()
      {
    
    
          alert("加载完毕");
      }
  </script>
</body>

表单提交事件

表单提交事件: 表单的提交按钮被点击时触发

<form onsubmit=" return run()">
        <!-- 此处和其他的时间不大一样,return是因为之后还会返回来一个boolean类型数值,以判断是否提交表单. -->
        <!-- onsubmit多用于表单的校验 
        该事件也可以控制表单的提交
    true====允许表单提交,
false=====阻止表单提交-->
        <input type="text" name="uname"/>
        <br>
        <input type="submit" value="提交"/>
    </form>
    <script>
        function run(){
    
    
            alert("提交按钮被点击");
            return true;
            //返回true的时候说明允许表单提交
        }
    </script>

注意: 该事件需要返回boolean类型的值来执行/阻止表单数据的操作.

事件得到true,提交表单数据
事件得到false,阻止表单数据提交

键位弹起事件(onkeyup)

键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件

  <input type="text"/ onkeyup="run1()">
    <script>
        function run1(){
    
    
            alert("键位弹起");
        }
    </script>

常用鼠标事件

鼠标移入事件(onmouseover)

鼠标移入元素组件时触发

 <input type="text" onmouseover="run1()">
<script>
    function run1()
    {
    
    
        alert("触发事件")
    }
</script>

鼠标移出事件(onmouseout)

鼠标移出时元素组件触发

 <input type="text" onmouseout="run()"/>
 <script>
     function run()
     {
    
    
         alert("触发了");
     }
 </script>

元素事件句柄绑定

将事件以元素属性的方式写到标签内部,进而绑定对应函数

   <!-- 绑定一个无参函数 -->
<input type="text" value="hello" onclick="run1()"   />
<!-- 绑定一个有参函数 -->
<input type="text" value="hello" onclick="run2('你好啊')"   />
<!-- 绑定一个有参函数,参数就是一个元素对象 -->
<input type="text" value="hello" onclick="run3(this)"   />
<script>
    function run1(){
    
    
        alert("hell0");
    }
    function run2(str)
    {
    
    
        alert(str);
    }
    function run3(obj)
    {
    
    
        alert(obj.value);
    }
</script>

优点:

开发快捷

传参方便

可以绑定多个函数

缺点:

js和html代码高度揉在一起,不利于多部门的项目开发维护

DOM绑定方式

    <script>
        function run1(){
            alert("加载完毕");

        }
      
            </script>
    <!-- DOM 绑定方式 对象.事件属性       一次只能绑定一个函数,且不能够传递参数 -->
    window.οnlοad=run1;
        <!-- DOM 绑定方式 匿名函数       可以绑定多个函数,可以传递参数 -->
    window.οnlοad=function(){
        <!-- 注意没有函数名 -->
        run1();
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    function run1(){
    
    
        alert("run1");
    }
    function run2(){
    
    
        alert("run2");
    }
    // 当页面加载完毕时,元素对象已经加载到内存之中
window.onload=function(){
    
    
    //用DOM方式获取到元素对象
 var t1=   document.getElementById("hello");
 t1.onclick=function(){
    
    
     run1();
     run2();
 }
}
</script>
</head>
<body>
    <!-- 为文本框 onclick事件绑定两个函数,run1(),run2() -->
<input type="text" id="hello"/>


    
    
</body>

</html>

DOM绑定方式

优点:

使得html代码和js代码完全分离

缺点:

不能传递参数解决:匿名函数可以
!-- 注意没有函数名 -->
run1();
}


```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    function run1(){
        alert("run1");
    }
    function run2(){
        alert("run2");
    }
    // 当页面加载完毕时,元素对象已经加载到内存之中
window.onload=function(){
    //用DOM方式获取到元素对象
 var t1=   document.getElementById("hello");
 t1.onclick=function(){
     run1();
     run2();
 }
}
</script>
</head>
<body>
    <!-- 为文本框 onclick事件绑定两个函数,run1(),run2() -->
<input type="text" id="hello"/>


    
    
</body>

</html>

DOM绑定方式

优点:

使得html代码和js代码完全分离

缺点:

不能传递参数解决:匿名函数可以

一个事件只能绑定一个函数解决:匿名函数内部可以绑定多个函数