Javascript函数与BOM-阿里云开发者社区

🎁一.Javascript函数

👨‍🎓1.1概述

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块

一个 JavaScript 函数用“function“关键字定义，后面跟着函数名和圆括号。

函数：**系统函数**和**自定义函数**

✍️1.2函数分类

🏫1.2.1系统函数

常见的系统函数有：

eval：javascript中eval函数的作用是用于计算一个字符串，并将其作为脚本代码执行。如下：

eval("x=10;y=20;document.write(x*y)")//返回200
document.write(eval("2+2"))//返回4
var x=10
document.write(eval(x+17))//返回27

parseInt：

作用：从一个字符串提取整数。

提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。

parseFloat：

作用：从一个字符串提取小数。

提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

isNaN：

如果是NaN就返回true，如果不是的就是false

function 函数名（参数1，参数2）{
}

作用：先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true，如果是一个数字就得到false。如下：

document.write(isNaN(5-2)); //返回false
document.write(isNaN(0)); //返回false
document.write(isNaN("Hello")); //返回true

🏷️1.2.2自定义函数

（1）无参函数。用法如下：

function 函数名（）{
}

（2）有参函数。用法如下：

function 函数名（参数1，参数2）{
}

（3）有返无参。用法如下：

function 函数名（）{
return 返回值或变量；
}

（4）有返有参。用法如下：

function 函数名（参数1，参数2）{
return 返回值或变量；
}

🏅1.2.3自定义函数的定义方式

（1）显示定义 function 函数名（）{ }

（2）匿名定义 var method=function（）{ }

（3）function定义 var calSum3 = new Function（'num1','num2',' 'return num1 + num2'）

💯1.2.4函数的调用方式

直接调用方式。方法如下：

//直接调用方式
function a(){}
a();

函数内调用函数方式。方法如下：

//函数内调用函数方式
function a(){}
function b(){
    a();
}

事件属性调用。方法如下：

//事件属性调用
function a(){}
<button onclick = "a();">点击</button>

匿名函数通过变量调用。方法如下：

//匿名函数通过变量调用
var sb = function(){
}
console.log(sb);

这里需要提一下，如果调用函数的时候，实参个数大于形参，则只会以形参个数为准；
如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined。

📚1.2.5返回值

函数执行完毕后，只完成里边的代码，如果我们想要获取到函数运行中产生的数据，就需要用到返回值。如下：

function getResult(){
    return 666;
}
console.log(getResult());

📔二.JavaScript局部变量和全局变量

局部变量：写在方法体的里面的变量称为局部变量；
全局变量：写在方法体之外的变量称为全局变量。

📓三、BOM编程（Browser Object Model）

📘3.1BOM概述

（1）BOM（Browser Object Model）即浏览器对象模型。

（2）BOM提供了独立于内容而与浏览器窗口进行交互的对象；

（3）由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

（4）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

（5）BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

📒 3.2BOM的构成

首先我们要知道的是，BOM 比 DOM 更大，它包含 DOM。

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；

📙3.3常用方法：

prompt: 显示可提示用户输入的对话框
alert: 显示带有提示信息和确定按钮的对话框
confirm: 显示一个带有提示信息、确定和取消的对话框
window.open("1.html");//打开新的指定页面【注意路径级别】
location.href("1.html");//不打开新页面的前提下直接进入新页面
location.reload();//刷新当前页面
window.close();//关闭当前页面
history.back();//返回必须有历史记录 history.go(-1)
history.forward();//前进必须有历史记录 history.go(1)
setTimeout: 指定的延迟时间之后来执行代码（一次性计时器）
setInterval: 每隔指定的时间执行代码（间隔性触发计时器）

📜1.然后现在让我们来玩一下定时器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM编程</title>
  <script type="text/javascript">
    //js组成：  ECMAScript核心，BOM，DOM
    //BOM：浏览器对象模型 属于js的三大部分组成之一
    //BOM作用：可以获取浏览器上的一些相关信息（屏幕，导航，历史记录等等操作）
    //BOM下的常用对象：window，history，location
    //1.window对象是BOM中的顶层对象.
    //2.history和location属于window对象的子对象
    //3.window对象中的常用方法：alert,confirm,prompt
    //4.自定义的所有方法和属性最终都会成为window对象的一部分。
    //alert(123);
    // window.alert(123);
    // window.confirm('我很喜欢你');
    // 自定义一个方法
    function akjshfdsalfjsalkjfdsadsadlkfsa(){
      alert(123);
    }
    //window.akjshfdsalfjsalkjfdsadsadlkfsa();
    //open方法   来源于window对象
    //作用：打开一个新窗口
    function myF(){
      window.open("http://www.baidu.com","helloworld","width=300,height=300");
    }
    //当网页加载完毕后，直接自动弹窗广告窗体
    //onload 加载事件
    // window.onload = myF();
    // 
    //window的定时器
    // 设置定时器 
    // setTimeout(一次性)   setInterval（永久性）
    // 清除定时器
    // clearTimeout(一次性) clearInterval（永久性）
    //需求:利用setTimeout实现3秒后输出好好学习即可。
    var timer = null;
    function myB(){
      // Timer
      timer = window.setTimeout(function(){
        console.log("好好学习");
      },3000);
    }
    function myC(){
      window.clearTimeout(timer);
    }
    var timer2 = null;
    function myG(){
      timer2 = window.setInterval(function(){
        console.log(1);
      },1000);
    }
    function myH(){
      window.clearInterval(timer2);
    }
  </script>
</head>
<body onload = "myF();">
  <!-- 需求：点击某按钮，打开新窗口 -->
  <button onclick = "myF()">点击弹出</button>
  <button onclick = "myB()">点击setTimeout</button>
  <button onclick = "myC()">点击取消setTimeout</button>
  <button onclick = "myG()">点击setInterval</button>
  <button onclick = "myH()">点击取消clearInterval</button>
</body>
</html>

📑2.之后是介绍location使用的案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- location的使用 -->
  <script type="text/javascript">
  function add(){
    window.location.href = "http://www.4399.com";
  }
  function update(){
    var aa = document.getElementById("aa");
    aa.href = "http://www.baidu.com";
  }
  </script>
</head>
<body>
  <a id = "aa" href="http://www.4399.com">小游戏</a>
  <button onclick = "add()">点击跳转到4399小游戏</button>
  <button onclick = "update();">修改超链接的地址</button>
</body>
</html>

📄3.以及用window方法实现跳转的前进与后退的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>history对象的使用</title>
  <script type="text/javascript">
    // history对象  历史记录   
    // 作用：可以实现跳转前进和后退
    function nextDemo(){
      //能否使用history直接调用  当然
      // window.history.forward();//跳转到下一页
      window.history.go(1);
    }
    //回退
    function backDemo(){
      // history.back();//回退
      window.history.go(-1);
    }
  </script>
</head>
<body>
  <a href="2.html">下一章节</a>
  <a href="1.html">返回上一章节</a>
  <button onclick = "nextDemo();">前进</button>
  <button onclick = "backDemo();">回退</button>
</body>
</html>

🌐4.时间方法的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  function myd(){
    window.setInterval(function(){
      var oDiv = document.getElementById("oDiv");
      //获取当前的系统时间
      var date = new Date();
      var year =  date.getYear()+1900;
      var month = date.getMonth()+1;
      var day = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      //.innerHTML 获取非表单元素的内容
      // oDiv.innerHTML=date.toLocaleString();
      oDiv.innerHTML = year+"年"+month+"月"+day+"日 "+h+":"+m+":"+s;
    },1000);
  }
  //通过加载函数调用
  window.onload = myd();
  </script>
</head>
<body>
  <div id="oDiv"></div>
</body>
</html>

⚙️5.随机数的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  // Math的使用
  console.log(Math.abs(-10));
  console.log(Math.ceil(12.999));
  console.log(Math.floor(12.999));
  console.log(Math.random());//随机数   介于0-1之间。
  //生成随机数
  var sj = Math.random()*10;
  console.log(Math.floor(sj));
  var names = ["称心","陈亚神","杨瑞","增加成","黄佳程","林凡","汤圆","梨园","六元","黄锐"];
  var sj2 = Math.floor(Math.random()*10);
  console.log(names[sj2]);
  console.log(Math.sqrt(25));
  console.log(Math.round(12.99));
  </script>
</head>
<body>
</body>
</html>

🧱6.计算器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算器案例</title>
    <script type="text/javascript">
      //根据标签的id属性获取该id所在的标签上的对象
      // document.getElementById('id的属性值')
      //定义一个函数
      function add(mytype) {
        console.log(mytype);
        //获取第一个数字和第二个数字
        var a = document.getElementById('num1').value;
        var b = document.getElementById('num2').value;
        // !a.value 自动判断非空
        if(!a && !b){
          alert("请输入合法的数据后再参与计算");
        }else{
          //判断a和b是否为非数字
          if(!isNaN(a) && !isNaN(b)){
            var result = document.getElementById('result');
            if(mytype === '+'){
              var c = parseFloat(a)+parseFloat(b);
              result.value = c;
            }else{
//parseFloat：取小数
              eval(`result.value = parseFloat(a)${mytype}parseFloat(b)`);
            }
          }else{
            alert('数据不合法');
          }
        }
        //alert(a.value+"   "+b.value);
      }
    </script>
  </head>
  <body>
    <!-- 输入框中的内容最终会保存到input标签上的value属性 -->
    第一个数字 <input type="text" value = "" id="num1"> <br>
    第二个数字 <input type="text" value = "" id="num2"> <br>
    <button onclick="add(this.innerHTML)">+</button>
    <button  onclick="add('-')">-</button>
    <button  onclick="add('*')">*</button>
    <button  onclick="add('/')">/</button><br>
    结果: <input type="text" id="result">
  </body>
</html>

最后为了大家更方便,更有效地学习JS，给大家带来了Javascript02所有内容的思维导图：

Javascript函数与BOM

🎁一.Javascript函数

👨‍🎓1.1概述

✍️1.2函数分类

🏫1.2.1系统函数

🏷️1.2.2自定义函数

🏅1.2.3自定义函数的定义方式

💯1.2.4函数的调用方式

📚1.2.5返回值

📔二.JavaScript局部变量和全局变量

📓三、BOM编程（Browser Object Model）

📘3.1BOM概述

📒 3.2BOM的构成

📙3.3常用方法：

📜1.然后现在让我们来玩一下定时器，代码如下：

📑2.之后是介绍location使用的案例：

📄3.以及用window方法实现跳转的前进与后退的例子：

🌐4.时间方法的使用：

⚙️5.随机数的使用

🧱6.计算器

今天的不开心就到此于止吧，明天依旧光芒万丈。加油，奥里给！

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Javascript函数与BOM

🎁一.Javascript函数

👨‍🎓1.1概述

✍️1.2函数分类

🏫1.2.1系统函数

🏷️1.2.2自定义函数

🏅1.2.3自定义函数的定义方式

💯1.2.4函数的调用方式

📚1.2.5返回值

📔二.JavaScript局部变量和全局变量

📓三、BOM编程（Browser Object Model）

📘3.1BOM概述

📒 3.2BOM的构成

📙3.3常用方法：

📜1.然后现在让我们来玩一下定时器，代码如下：

📑2.之后是介绍location使用的案例：

📄3.以及用window方法实现跳转的前进与后退的例子：

🌐4.时间方法的使用：

⚙️5.随机数的使用

🧱6.计算器

今天的不开心就到此于止吧，明天依旧光芒万丈。加油，奥里给！

热门文章

最新文章

相关课程

相关电子书

相关实验场景