🎁一.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所有内容的思维导图:
今天的不开心就到此于止吧,明天依旧光芒万丈。加油,奥里给!