目录
函数特点：封装代码，代码的重用性强！
什么是函数
在程序设计中，可以将一段经常使用的代码“封装”起来，在需要时直接调用，这种“封装”就是函数。
函数：为完成某一功能的程序指令(语句)的集合。
执行特定任务的语句块。
预定义函数
在js中，函数分为两种: 自定义函数、系统函数(内置函数)
系统函数里还包括预定义函数。
预定义函数是指不属于任何对象，他们的使用也不需要通过任何对象来应用。全局的函数
1.eval() 将字符串数字转换成数字，可进行直接执行js代码
2.isNaN() 用来计算一个参数以确定它是否为非数字ES6:
isNaN() 函数用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。isNaN本意是通过Number方法把参数转换成数字类型，如若转换成功，则返回false，反之返回true，它只是判断参数是否能转成数字，不能用来判断是否严格等于NaN。，如果要判断某个值是否严格等于NaN不能用这个方法
ES6提供了Number.isNaN方法用来判断一个值是否严格等于NaN，它会首先判断传入的值是否为数字类型，如不是，直接返回false。
区别：
isNaN方法首先转换类型，而Number.isNaN方法不用；
isNaN不能用来判断是否严格等于NaN，Number.isNaN方法可用3.parseInt()/parseFloat() 将数字字符串转化为一个数值
4.isFinite() 用来确定参数是否是一个有限数值.也就是说,如果该参数为非数字NaN,正无穷数,或负无穷数,则返回false,否则返回true;如果是字符串类型的数字,将会自动关转化为数字型.
5. escape函数/unescape() 将字符串进行编码和解码，这样就可以在所有的计算机上读取该字符串。
返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列
isNaN()函数
<script>
//isNaN(参数) 判断参数是否是NaN，如果是，返回true，否则返回false
console.log(isNaN(NaN));//true
console.log(isNaN("abc"));//false 类型转换
console.log(Number.isNaN(NaN));//true
console.log(Number.isNaN("abc"));//false
console.log(Number.isNaN(123));//false
var a = 123 + undefined;
console.log(Number.isNaN(a));//true
console.log(Number.isNaN(123 + null));//false
console.log(Number.isNaN("abc" + 123));//false
console.log(Number.isNaN("abc" - 123));//true
isNaN(参数) 全局方法 会进行类型转换 再判断是否是NaN
(1).参数是NaN,会返回true
(2).参数进行类型转换，转数字失败也会得到NaN,也会返回true
Number.isNaN(参数) 不会进行类型转换 只有参数是NaN才返回true ,否则返回false
</script>isFinite()
<script>
console.log(isFinite(123));//true
console.log(isFinite('123'));//true
console.log(isFinite('123a'));//true
console.log(isFinite(true));//NaN false
console.log(isFinite(1 / 3));//true
console.log(isFinite(1 / 0));//false
console.log(isFinite(-1 / 0));//false
// isFinite(参数) 判断参数是否是一个有限数值 如果是有限数值，返回true，否则返回 false(NaN,Infinity,-Infinity,..)
//会进行类型转换
// Number.isFinite(参数) 判断参数是否是一个有限数值
//不会进行类型转换
// encodeURI(参数) 参数：字符串
// 把字符串转义为计算机编码
console.log(encodeURI('welcome中国'));
document.write(decodeURI('welcome%E4%B8%AD%E5%9B%BD'));
// decodeURI(参数) 参数：字符串
//解码.
</script>URL和URI之间的主要区别
URL是统一资源定位器，用于标识资源；URI（统一资源标识符）提供了更简单和可扩展的标识资源的方法。URL是URI的子集，下面我们就来看看一下URL和URI的主要区别是什么。
1、作用的区别
URL（统一资源定位符）主要用于链接网页，网页组件或网页上的程序，借助访问方法 （http，ftp，mailto等协议）来检索位置资源。
URI（统一资源标识符）用于定义项目的标识，此处单词标识符表示无论使用的方法是什么（URL或URN），都要将一个资源与其他资源区分开来。
2、可以说URL是URI（URL是URI的子集），但URI永远不能是URL。
3、协议区别
URL指定要使用的协议类型，而URI不涉及协议规范。
JavaScript decodeURI() 函数
函数定义
函数调用
函数定义好后，不能自动执行，需要调用它，直接在需要的位置写函数名。
定义函数方法：
1. 第一种情况,在<script>标签内调用
function 函数名(){
函数体;
}
函数名();//函数调用，直接写函数名2.在HTML文件中调用，例如通过点击按钮后用定义好的函数
如：<input type=“button” value=“click” οnclick=“add() ”/>
<body>
<button onclick="sayHello()">按钮</button>
</body>
<script>
var count = 0;
function sayHello() {
count = count + 1;
alert("hello world" + count);
}
//调用函数
sayHello();
一个函数定义好了后，不会自动执行，需要调用
驼峰试命名法
定义函数
function 函数名(){
函数体
}
</script>匿名函数.
没有名字的函数就是匿名函数
<script>
// function box(){}
// box()
//匿名函数
var box = function(){
alert("Hello world")
}
// console.log(box);
box();
</script>自我执行函数
<script>
// IIFE() 立即执行调用表达式
// 自我执行函数
(function(){
alert("hello");
})(); //把function用括号括起来，用最后面的括号引用
+function(){
alert("hello");
}(); //把function用+号括起来，用最后面的括号引用
-function(){
alert("hello");
}(); //把function用-号括起来，用最后面的括号引用
~function(){
alert("hello");
}(); //把function用~号引起来，用最后面的括号引用
!function(){
alert("hello");
}(); //把function用~号引起来，用最后面的括号引用
</script>带参数的函数
<script>
//定义函数
function zhazhi(a){ //形参
alert(a+"汁"); //"苹果" + "汁"
}
// 调用函数
zhazhi("苹果"); //实参
zhazhi("桃子"); //实参
</script>
<script>
//定义函数
function zhazhi(a,b){ //形参
alert(a+b+"汁"); //"苹果" + "汁"
}
// 调用函数
zhazhi("苹果","葡萄"); //实参
zhazhi("桃子","橘子"); //实参
</script>
<script>
//复用高
//求2个数的和
function add(x,y){
return x+y;
}
//调用函数
var sum=add(96,5)
console.log(sum);
document.write(add(53,53))
</script>应用
<script>
复用高
求2个数的和
function add(x,y){
return x+y;
}
//调用函数
var sum=add(96,5)
console.log(sum);
document.write(add(53,53))
function fun(a,b,c){
console.log(arguments); //参数对象
console.log(arguments.length); //实参个数
console.log(arguments.callee); //函数本身
arguments.callee();
fun(); //递归 函数自己调用自己
}
//fun(1,2)
function jieceng(n){
if(n<=1){
return 1; //跳转函数 终止函数 找出口
}
//return n* jieceng(n-1);
return n*arguments.callee(n-1);
//5*4*3*2*1
}
//console.log(jieceng(5)) 5的阶层
console.log(jieceng(10)) //10的阶层
</script>预编译
// 预编译：代码解释之前
// 全局预编译
// 第一步创建GO对象(global object)
// 第二步找变量声明,将变量声明作为GO对象的属性值传进去,赋值为undefined.
// 第三部找函数声明（不要找函数表达式),赋值于对应的Go属性值
// var a=10;
// var c="hello"; var 声明提前，值不提前
// function b(){ //声名提前
// b();
// //伪代码
// GO{
// a:undefined;
// c:undefined;
// }
// }
//作用域：变量起作用的范围
//1.全局作用域
//2.局部作用域（函数作用域）
//局部预编译
//1.创建Ao （Active object）对象
//2.找函数的形参和变量声明，将变量声明和形参作为Ao属性名，值为undefined,
//3.将实参值和形参统一
// 4.在函数体里面找函数声明（只找函数声明，不找函数表达式)，值赋予函数体
// function box(a,b){
// console.log(a,b);
// var c=100;
// function d(){}
// }
// box(1,2)
//伪代码
// AO{
// a:1
// b:2
// c:undefined
// d:undefined d(){}
// }
使用document制作简易计算器
方法一
<body>
第一个数：<input type="text" id="num1" value=""><br>
第二个数：<input type="text" id="num2" value=""><br>
     <button onclick="fun()">+</button>
<button onclick="fun2()">-</button>
<button onclick="fun3()">*</button>
<button onclick="fun4()">/</button><br>
  结果：<input type="text" id="sum" value="">
</body>
<script>
var ipt1 = document.getElementById("num1");
var ipt2 =document.getElementById("num2");
var ipt3 = document.getElementById("sum");
function fun(){
ipt3.value = Number(ipt1.value) + Number(ipt2.value)
}
function fun2(){
ipt3.value = Number(ipt1.value) - Number(ipt2.value)
}
function fun3(){
ipt3.value = Number(ipt1.value) * Number(ipt2.value)
}
function fun4(){
ipt3.value = Number(ipt1.value) / Number(ipt2.value)
}
</script>方法二
<body>
第一个数：<input type="text" id="num1" value=""><br>
第二个数：<input type="text" id="num2" value=""><br>
     <button onclick="calc('+')">+</button>
<button onclick="calc('-')">-</button>
<button onclick="calc('*')">*</button>
<button onclick="calc('/')">/</button><br>
  结果：<input type="text" id="sum" value="">
</body>
<script>
var ipt1 = document.getElementById("num1"); //标签对象 input
var ipt2 =document.getElementById("num2");
var ipt3 = document.getElementById("sum");
function calc(fh){
var n1 =+ipt1.value //第一个input里的输入值
var n2 =+ipt2.value
if(fh==="+"){
ipt3.value = n1 + n1;
}else if(fh==="-"){
ipt3.value = n1 - n1;
}else if(fh==="*"){
ipt3.value = n1 * n1;
}else if(fh==="/"){
ipt3.value = n1 / n1;
}
}
可以通过 .value 来获取值的标签
input
textarea
selsct
</script>使用select下拉选择框实现简易计算器
<body>
<input type="text" id="num1" value="">
<select name="select" id="select">
<option value="+" >+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" value="">
<button id="btn" onclick="fun()">=</button>
<input type="text" id="sum" value="">
</body>
<script>
var ipt1 = document.getElementById("num1");
var ipt2 = document.getElementById("num2");
var ipt3 = document.getElementById("sum");
var sel = document.getElementById("select");
function fun(){
if(sel.value==="+"){
ipt3.value=Number(ipt1.value) + Number(ipt2.value);
}else if(sel.value==="-"){
ipt3.value=Number(ipt1.value) - Number(ipt2.value);
}else if(sel.value==="*"){
ipt3.value=Number(ipt1.value) * Number(ipt2.value);
}else if(sel.value==="/"){
ipt3.value=Number(ipt1.value) / Number(ipt2.value);
}
}
//第二种方法封装函数 了解即可
// var oInput1 = document.getElementById( "num1" );
var oInput1 = getEl( "num1");
// var oInput2 = document.getElementById( "num2" );
var oInput2 = getEl("num2");
//var oInput3 = document.getElementById("res");
var oInput3 = getEl("res" );
//var osel = document.getElementById( "symbol");
var osel = getEl( "symbol");
// var oBtn = document.getElementById("cal");
var oBtn = getEl( "cal");
function getE1(id){ //封装函数
return document.getElementById(id)
}
实现计算器方法二：body是一样的，只不过去掉btn的onclick；js代码
var ipt1 = document.getElementById("num1");
var ipt2 = document.getElementById("num2");
var ipt3 = document.getElementById("sum");
var sel = document.getElementById("select");
var oBtn = document.getElementById("btn")
oBtn.onclick= function(){
var v1 = +ipt1.value;
var v2 = +ipt2.value;
console.log(v1);
if(isNaN(v1)||isNaN(v2)){
alert("请输入正确的数字")
return
}
var fh = sel.value;
switch (fh){
case "+":
ipt3.value = v1 + v2;
break;
case "-":
ipt3.value = v1 - v2;
break;
case "*":
ipt3.value = v1 * v2;
break;
case "/":
ipt3.value = v1 / v2;
break;
}
}
</script>初识Dom
document.write（参数）：把参数写到文档内部
document.getElementByid(id值) ：通过id值来获取元素对象
dom对象.value【值】：获取/设置表单里元素的值
dom对象.innerText【=内容】：获取/设置元素内部的文本(纯文本)
dom对象.innerHTML【=内容】：获取/设置元素内部的文本(可以识别标签)
dom对象.id【=id值】：获取/设置元素的id
dom对象.className【=值】：操作元素类
<body>
<!-- <button id="btn" onclick="func()">按钮</button> -->
<!-- <button id="btn">按钮</button> -->
<input type="text" id="num1" value="1">
<button onclick="fun()">按钮</button>
</body>
<script>
var ipt = document.getElementById("num1") //获取input元素对象
function fun(){
alert(ipt.value); //通过input对象.value 可以获取input输入框值
}
// var b= document.getElementById("btn")
//console.log(b)
// alert(b)
// document.getElementById()
// document 文档对象
// get 获取
// Element 元素（标签）
// Id
</script>简易计算器
<body>
第一个数：<input type="text" id="num1" value=""><br>
第二个数：<input type="text" id="num2" value=""><br>
     <button onclick="calc('+')">+</button>
<button onclick="calc('-')">-</button>
<button onclick="calc('*')">*</button>
<button onclick="calc('/')">/</button><br>
  结果：<input type="text" id="sum" value="">
</body>
<script>
var ipt1 = document.getElementById("num1"); //标签对象 input
var ipt2 =document.getElementById("num2");
var ipt3 = document.getElementById("sum");
function calc(fh){
var n1 =+ipt1.value //第一个input里的输入值
var n2 =+ipt2.value
if(fh==="+"){
ipt3.value = n1 + n1;
}else if(fh==="-"){
ipt3.value = n1 - n1;
}else if(fh==="*"){
ipt3.value = n1 * n1;
}else if(fh==="/"){
ipt3.value = n1 / n1;
}
}
// 可以通过 .value 来获取值的标签
// input
// textarea
// selectdom元素内容获取
<body>
<!-- <button id="btn" onclick="fun()">按钮</button> -->
<button id="btn" >按钮</button>
<div id="box">中国</div>
</body>
<script>
// function fun(){ }
var oDiv = document.getElementById("box")
var obtn = document.getElementById("btn"); //命名1
// var _btn = document.getElementById("btn"); //命名2
//给button按钮添加onclick事件
// obtn.onclick =fun; //写法1
// function fun(){
// alert(123)
// }
// obtn.onclick = function fun(){ //写法2
// alert(123)
// }
obtn.onclick= function(){
// console.log(oDiv.innerText); //用来获取元素内部的纯文本
// console.log(oDiv.innerHTML); //获取元素的内部内容
// oDiv.innerText = "hello world";
oDiv.innerHTML = "<a href='#''>hello world</a>"; //识别标签
}
//obtn=== object button
</script>obtn替换类名
<body>
<button id="btn" class="continer">开始</button>
</body>
<script>
var obtn = document.getElementById("btn");
// obtn.onclick = function(){
// // alert(obtn.innerText);
// if(obtn.innerText==="开始"){
// obtn.innerText="停止";
// }else{
// obtn.innerText="开始";
// }
// }
var count=0; //写法2
obtn.onclick = function(){
count++;
if(count %2===1){
obtn.innerText="停止";
obtn.className="green";
}else{
obtn.innerText="开始";
obtn.className="red";
}
}
// var count=0;
// obtn.onclick=function(){
// // alert(obtn.className); //获取button上的类名
// obtn.className="red"
// }构造函数
new操作符具体干了什么事:
1．创建─个空的简单Javascript对象(即0);
2.为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象;3．将步骤1新创建的对象作为this的上下文;
4．如果该函数没有返回对象，则返回this。定义：function 函数名(形参，...){
this.属性名 = 值；
}
注意，函数名首字母一般大写
调用
var 变量= new 函数名(实参，..);
this指向：1.this指向函数的调用者2.在构造函数里，this指向new出来的实例对象
<script>
// function box(){
// }
// box(); //普通函数
// var b= new box();//构造函数
// function Box(){ } //类
// var b=new Box(); //实例化对象
// console.log(b);
//new 操作符 做了什么？
// 1.创建一个空对象
// 2.把构造函数里的this强制指向空对象
// 3.把this作为返回值返回
//我要通过这个animal构造函数 创建小动物类
function animal(x,y){
this.name = x ;
this.gender = y;
}
var dog = new animal("狗蛋","公"); //实例化对象
// var cat = new animal("猫蛋","母");
console.log(dog instanceof animal); //检测某个实例是否从属于某个类
// 实例 instanceof 类
// console.log(dog);
// console.log(cat);
// 对象是由属性与方法构成的集合
</script>
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
