js06
目录
前言
day21-js06学习开始
一、函数
1.1创建函数的方式
函数声明： function fn(){ 函数体 }函数表达式:--把匿名函数赋值给变量，变量名称就是函数的名称 var fun = function(){ 函数体 }
注意：以上两种写法是等价的！
1.2面试题：如果变量名与函数名重复，该如何提升？
- 正常情况下，函数(整体)先提升，变量(声明)再提升
- 函数名称与变量名称相同时，函数提升后，变量声明就不再提升了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数面试题</title> </head> <body> <script> //正常情况下，函数(整体)先提升，变量(声明)再提升 /* b()//1 console.log(a)//undefined var a = 2 function b(){ console.log(1) } */ //思考：如果变量名与函数名重复，该如何提升？ // 第一步提升函数:c = function c() // 第二步:由于变量c与已提升的函数同名了，所以不提升 // 第三步：重新赋值c = 2 var c = 2 function c(){ console.log(666) } c()//因为变量c的值被覆盖成了数值2 //不能被当做函数调用TypeError: c is not a function </script> </body> </html>
1.3全局污染与解决方案
- 全局污染:全局变量在不同位置出现了同名，进而带来值相互影响的效果
- 全局作用域:在html中script标签下与每一个外部的JS文件，都在全局作用域之下
- 解决全局污染:匿名函数自调用
;(function() { 在函数作用域下的内容都属于局部内容 })() ; 在匿名函数自调用前加分号，结束上一行，就可以防止和上一行代码连到一起执行 ()前面的小括号把匿名函数包裹，表示这是一个整体 ()后面的小括号表示要调用当前的这个匿名函数<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>匿名函数调用</title> </head> <body> <button id="btn1">按钮1</button><span id="cont1"></span> <hr> <button id="btn2">按钮2</button><span id="cont2"></span> <hr> <button id="btn3">按钮3</button><span id="cont3"></span> <script> //全局污染: //全局生效的多个同名变量，值会互相影响 //方案1:尽量做到所有变量名不重复--不可能 //方案2:放到普通函数中-函数名也是名，还会发生冲突污染的问题--不推荐 //方案3:放在匿名函数中--即是局部作用域，又没有名字 //全局污染解决方案：匿名函数自调用 //格式：先用一对小括号把匿名函数整体包裹起来，表示这是一个整体 //再在后面跟一对小括号，表示要调用前面的这个匿名函数 //(function(){被包裹的变量与函数})() ;(function() { var a = 1 btn1.onclick = function() { cont1.innerHTML = ++a } })() ;(function() { var a = 2 btn2.onclick = function() { cont2.innerHTML = ++a } })() ;(function() { var a = 4 btn3.onclick = function() { cont3.innerHTML = ++a } })() //var a = 1 //如果后面的内容以括号开头，上下两行默认会连到一起执行 //为了防止和上一行代码连接到一起，要在匿名函数自调用前加分号结束上一行 // ;(function fn(){ // console.log(fn) // })() //console.log(fn())//fn()局部函数，只能在内部访问 //console.log(fn)//fn数据局部函数的名字也是一个局部变量，只能在内部访问 </script> </body> </html>
1.4回调函数
- 函数可以传的值：
fn(77) 函数的实参可以是数值类型
fn(‘hello world’) 函数的实参可以是字符串类型
fn(false) 函数的实参可以是布尔类型
- 前面我们讲过，函数function也是一种数据类型，那函数可以作为实参传递给别的函数吗？
可以。函数的实参可以是函数类型，分为两种：
fn(匿名函数)
fn(函数名称)—普通的函数直接传函数的名称就可以
- 回调函数的概念：
- 就是把一个函数类型的值作为参数传递，被传递的函数就称作回调函数
回调函数会自动调用
- 回调函数的格式：
function xin(madai){ madai() //调用传递进来的函数，传谁调用谁 } function ming(){ … } xin(ming) //普通函数直接传函数名 xin(function(){…}) //匿名函数传递的是全部内容
获取函数调用后结果的两种方式：
- 通过返回值 return 返回函数执行的结果
通过回调函数，把值放到回调函数的参数中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>回调函数</title> </head> <body> <script> function xin(madai){//用于接收调用函数时传递过来的实参 console.log('新哥开始跑第1棒') console.log('新哥到达第1棒终点') //console.log(madai)//打印的是传递过来的函数整体 //相当于:madai=ming madai()//相当于ming() } function ming(){ console.log('铭哥开始跑第2棒') console.log('铭哥到达第2棒终点') } function liang(){ console.log('亮哥开始跑第2棒') console.log('亮哥到达第2棒终点') } //调用时，传递的是函数名，没有小括号！ xin(ming)//小新老师带着小铭老师跑 xin(liang)//小新老师带着亮哥跑 //换成匿名函数--新哥的麻袋要装个陌生人跑接力赛 //调用时，传递的是匿名函数的全部内容 xin(function(){ console.log('陌生人被新哥套麻袋里疯狂跑') }) </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>回调函数练习</title> </head> <body> <script> //练习：创建函数getSum,传递任意一个数字，返回1~任意数字之间所有整数的和 /* function getSum(n) { for (var i = 1, sum = 0; i <= n; i++) { sum += i } return sum //通过返回值来获取最终结果 } console.log(getSum(100)) */ function getSum(n, cb) { for (var i = 1, sum = 0; i <= n; i++) { sum += i } //cb就相当于是我们调用getSum()是传递进来的匿名函数 cb(sum) //调用匿名函数，并将累加结果sum传递给下面匿名函数的形参r } //变量r用来接收调用回调函数时传入的sum变量的值 getSum(10, function(r) { console.log(r) }) //创建函数getCount,传递任意两个数字，查看两者之间闰年的数量 //要求:使用回调函数获取结果 function getCount(n1, n2, cb) { //循环从n1~n2之间所有的年份 for (var i = n1, count = 0; i <= n2; i++) { //判断当前循环到的年份是否是闰年 if(i%4===0 && i%100!==0 || i%400===0){ //是闰年，闰年的总数+1 count++ } } //调用传递进来的回调函数，并且将count的值作为参数传出 cb(count) } //res用来保存回调函数被调用时传入的参数值count getCount(2000,2100,function(res){ console.log(res) }) </script> </body> </html>
二、系统函数
isNaN() 用来检测用户输入的值是否含有非数字
- 如果有->true 如果没有->false
//系统函数:JS提供的函数 //检测输入的值是否含有非数字 console.log(isNaN('1a'))//true console.log(isNaN('a'))//true console.log(isNaN(NaN))//true console.log(isNaN(undefined))//true console.log(isNaN(null))//false console.log(isNaN(true))//false console.log(isNaN(false))//false console.log(isNaN(666))//false
- 更多函数将在js高级学习
三、Sass
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sass初体验</title> <link rel="stylesheet" href="../scss/01.css"> </head> <body> <!-- mydiv宽度250px,背景为浅蓝色 图片变块级，且占父级宽度的100%--> <div class="mydiv"> <img src="假装有图片" alt=""> <h3>标题18px</h3> <p>字体12px 红色字</p> </div> </body> </html>
- 安装sass插件，详情见day15-BOOT
/* body { background-color: #fff; } */ // p { font-size: 18px} // 01.sass .mydiv { width: 250px; background-color: lightblue; img { display: block; width: 100%; } h3 {font-size: 18px} p { font-size: 12px; color:red; } }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试变量</title> <link rel="stylesheet" href="../scss/02_var.css"> </head> <body> <div class="box"></div> <h2>我是一个测试标题</h2> <button>测试按钮</button> </body> </html>// 02.scss $a:400px; $b:center; $c:#fff; $shadow:5px 7px 5px rgba(0,0,0,.5); // $red:#DB221D; $red:#0aa1ed; .box { width: $a; height: $a; text-align: $b; background-color: $red; color:$red; //border-color: $hello; $hello:green; border-color: $hello; box-shadow: $shadow; } h2 { //background-color: $hello; background-color: $red; } button { background-color: $red; }
以上就是SASS的简单语法，更多内容将在实战中练习。
总结
da21-js06学习结束
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
