第一个月第三周_学习js、html+css

20240722周一

内容写到第二周的最后了!
第一种移动端布局
小丸子作业
–设计图有三种大小(宽度px):640,750,1080,常用的是750
–父级是div,下面有个图片,同级有个span,里面有文字。快速生成代码:(div>img[src=“images/pic.jpg”]+span{小丸子呀小丸子})*x
–图片会向下撑开3-6px的间距,给图片标签设一个display:block或者vertical-align:top,其中top为任意值
–不能写div p,span 但可以写div p,div span
–flex:1.的作用
1.占据主轴上剩余的空间
2.???当主轴内容过多的时候,会把当前空间撑大???解决方法:在flex:1的标签内部写一个overflow:auto,即直接设置一个滚动的区域
中间拍照的处理,ctrl+n新建一个图层,宽高随便设置,后面跟像素,背景颜色调为透明,footer右键复制组,把副本拖到新建的图层里,把不要的东西都点掉,切片工具,图片格式选png-8(透明格式),所有的用户切片
第二种移动端布局
一、总结第一种移动端布局的方法【不推荐】
1、使用媒体查询结合rem单位实现的,好理解
2、缺点:计算麻烦、有误差、并且一个终端就需要设置一个媒体查询
二、第二种移动端布局的思路:vw
1、vw(viewportWidth) 视口的宽度,有点像百分比单位
2、100vw等于浏览器宽度的100%,1vw等于浏览器的百分之一
三、如何设置vw前面的数值呢?
1、100vw等于浏览器的视口宽度,如果有一张设计图750px
2、100vw=750px => 100vw=375px
3、100vw=375px => 1px=0.2667vw
4、设计图中导航高度88px => 88px/2= 44px * 数学中的x = ?vw
5、设计图中底部高度90px => 90px/2= 45px * 数学中的x = ?vw
6、44px * 共用的值 => 44rem
7、45px * 共用的值 => 45rem
8、把共用的值提到html{font-size:共用的值}
四、关于第二种方法的总结
1、750px: html{font-size:0.2667vw}
2、计算:物理像素/2 = ? rem
例子:前程无忧
面向前端开发免费的工具:jq22,swiper专门做轮播图的(在线演示->基础演示。api文档->loop)
在线格式化工具:

在这里插入图片描述

第三种移动端布局
一、移动端的布局方式
1、媒体查询+rem
2、vw单位
3、flexible.js插件方式
二、flexible.js:自动的生成dpr
1、淘宝前端团队,淘宝插件,计算方便,不稳定
2、使用场景:只能在阿里系软件中
3、使用方法
3.1 删除视口标签
3.2 引入文件
3.3 物理像素/100=?rem
精灵图主要用background-position: 14px -23px

过渡属性:
动画属性:
一、动画就是一个工具,需要创建和使用
1、创建:@keyframes 自定义动画名称{ 动画的运动方式 }
2、使用:动画的属性

20240723周二

学js的目标:能看懂代码,会复制粘贴,锻炼逻辑,计算机的思维
js的特点:单线程的语言,碰到了错误,后面的代码就不会执行了
字符串和变量之间使用加号

一、js基础介绍

javascript的组成部分:
DOM:Document Object Model 文档对象模型,学如何操作文档
BOM:Browser Object Model 浏览器对象模型,学如何操作浏览器
ECMAScript 语言的规范,学语法
注释://单行注释 /* */多行注释
一、JS的创建方式:行内式、内部式、外部式
js是嵌套在html中的,直接在html中打开浏览器
二、行内式的创建:很少使用
1、在a标签中设置
2、在非a标签中设置:直接书写一个事件然后写js代码即可
三、内部式
1、只需要把js代码书写在一个script标签中即可
2、直接在script标签中书写代码,打开浏览器之后就会执行
四、外部式
1、在HTML文件中引入外部的js代码使用script标签
2、script标签建议书写在代码的最下面(html外面):HTML+CSS+JS
3、script标签在引入外部方式之后,标签内的代码就不生效了
js的输出方式
js的结果是不会显示在浏览器中,我们需要使用一些方法把js的过程和结果呈现在浏览器的控制台,观察代码

输出方式功能
alert()提示。浏览器弹窗
document.write()文档书写。表示输出在浏览器的显示区域。可以将指定的文本、HTML标签直接写入网页
console.log()浏览器控制台输出
confirm()
prompt()提示。浏览器弹窗
为什么document.write(content)里面能写html标签:content可以是文本和html标签

二、变量

一、变量是什么?
1、可以变化的一个量:程序在运行的过程中可以用来记录中间值,可以理解为一个容器
二、如何定义/创建/声明变量
1、使用一个关键字:variable表示可变的,在定义变量的时候使用简写var
2、var 变量名称
三、关于变量名称在定义时候需要注意的点
1、不要使用中文汉字和一些特殊符号
2、不要使用数字开头的变量名
3、在HTML和CSS中出现的属性和属性值也不要用
4、关键字和保留字不要用
4.1 关键字:计算机在内部已经定义好的一些英文单词
4.2 保留字:计算机目前没用上,以后可能会使用上的一些英文单词
四、如何存储数据
1、使用一个符号 等号 =
2、表示把右侧的值赋值给左侧的变量
五、关于定义变量的注意点
0、变量名区别大小写
0、可以一次声明多个变量,使用一个var关键字,变量名用逗号隔开
1、定义变量的时候不要使用一些奇怪的符号
2、等号表示把右侧的值赋值给左侧的变量
3、var后面一定要加空格
4、如果值是字符串类型需要添加引号?
5、引号在使用的时候不在意单双引号,但是要注意的是一定要成双成对的出现
6、js是不严谨的,后面的分号是可以省略的

三、数据类型和数据类型转换

1、数据类型
一、在定义变量的时候需要赋值,值会有很多类型,需要区分数据类型
1、第一种方法 typeof(被检测的数据) 用来得到数据的数据类型
2、第二种方法 typeof 被检测的数据
二、关于数据类型的分类总结
1、Number 数字类型:正数、负数、0
2、String 字符串类型:只要有引号,在键盘上敲出来的字符都是字符串
3、undefined 未定义类型:表示定义了但是没有赋值
//var c
//console.log(c,typeof c) // undefined 未定义,定义了但是没有赋值
4、boolean 布尔类型:表示事物的两面性 只有两种取值true和false
5、Object 对象类型:包含对象、数组、null(虽然使用typeof检测出来的是object但是本质上还是基本数据类型)
三、基本数据类型和复杂数据类型
1、基本数据类型:Number、String、undefiend、boolean、null
2、复杂数据类型:Object
四、拓展:除了以上的这些数据类型还有很多
1、在ES6中symbol 唯一性
2、在ES10中bigInt 最大值
2、数据类型转换
将字符串类型 转换为 数字类型
将其他的数据类型 转换为 字符串类型
将其他数据类型 转换为 布尔类型
一、将字符串类型转换为数字类型
控制台:黑色的表示字符串类型10,蓝色是数字类型
Number和parseInt的区别
1、Number(转换的数据)
1.1 当字符串中是数字的是字符就可以转换得到想对应的数字
1.2 如果字符串中是非数字的字符得到的就是NaN(not a number 不是一个数字)
2、parseInt(转换的数据)
2.1 转换得到的是字符串中整数
3、parseFloat(转换的数据)
3.1 转换得到的是字符串中的浮点数(小数)
4、Math.round(转换的数据)
4.1 四舍五入方法
4.2 只看小数点的后一位数
二、字符串转换为数字类型的总结
1、当字符串中是纯数字的时候,随便使用哪个方法都可以实现
2、当字符串中含有字符的时候,建议使用parseInt和parseFloat,默认会从左往后依次选择转换直至有其他非数字字符出现才会停止
3、Number和parse两种方法的区别就是非数字字符
一、将其他的数据类型转换为字符串类型
1、第一种方法:String(转换的数据)
2、第二种方法:转化的数据.toString()
一、将其他数据类型转换为布尔类型
1、方法:Boolean(转换的数据)
2、得出的转换结果:true和false
二、转换的情况
1、转化数字的时候:非0数字得到都是true、是0的时候转换得到的都是false
2、转换undefiend的时候得到的是false
3、转换null的时候得到的是false
4、转换字符串的时候如果是空字符串得到的就是false,有内容(不考虑内容是什么,只要是键盘能敲出来的字符)的时候得到的就是true

四、运算符

数学运算符
赋值运算符
比较运算符
逻辑运算符
一元运算符
空值运算符
一、数学运算符:+ - * / %
二、数学运算符都是针对于数字类型进行计算的,如果是其他数据类型呢?
1、主要是针对于"+"特殊情况比较多
var c = “3”
var c1 = “4”
console.log(c+c1) // “34” 字符串的拼接
var d = 3
var d1 = “4”
console.log(d+d1) // “34” 当字符串一侧是数字字符串的时候,默认会转换为字符串再进行字符串的拼接
三、当null和undefined相加的时候
var e = null
var e1
console.log(e+e1) // NaN
四、除了加号可以进行拼接以外,其他的符号在运算的时候都会进行隐式转换(偷偷的悄悄的)转换为数字类型
var f = 10
var f1 = “10”
console.log(f-f1) // 0
五、关于数学运算的总结
1、数学运算符号的前提是只针对于数字类型,可以使用+ - * / %
2、加号在使用的时候:可以进行字符串的拼接
3、除了加号以外的运算符默认都是隐式转换为数字之后再进行计算的
4、注意:不要使用非数字的字符串进行计算
一、赋值运算符
1、= 表示将右侧的值赋值给左侧的变量
2、+=
3、-=
4、*=
5、/=
6、%=
一、比较运算符:> < >= <= = == === != !==
1、得到的结果只有一种数据类型为布尔类型,只有两种结果!!!!
2、= 赋值运算符,表示右侧的值赋值给左侧的变量
3、== 表示等于号,比较的时候表示比较值
4、= = = 表示强等/恒等/非常等,比较的时候表示比较的是类型和值
5、!= 不等于,比较的值
6、!== 不等于,比较的值和类型
二、字符串和字符串之间的比较
1、除了数字类型,其他数据类型不具有比较的必要
2、字符串和字符串进行比较的时候
2.1 如果都是数字字符串,会隐式转换为数字再进行比较
2.2 如果字符串是中文汉字的时候,比较的是ASCII和unicode编码表
三、NaN能不能进行比较?
console.log(NaN= ==NaN) false// 自己都不知道自己是什么是多少,不存在相等和全等的情况
一、逻辑运算符:&& || ! (与或非)
1、&& 表示并且关系:需要两个货真多个条件都得满足
2、|| 表示或者关系:只需要其中有一个条件就可以
3、! 表示取反
一、一元运算符
1、变量++ 、++变量
2、变量-- 、–变量
二、比较a++和a+=的区别
1、a++ 表示每次a都是+1
2、a+= 表示每次a加多少都是自己定义的
三、无论是加号还是减号情况是一样
1、如果加加和减减在独自计算的时候,符号在前和在后结果是一样的
2、如果在碰到输出的时候,符号在前的先计算后输出,符号在后的先输出后计算
一、空值运算符
1、结果1 ?? 结果2
2、??左侧是一个空值的情况下就会选择到右侧的值
3、??左侧不是一个空值的情况下就会选择到左侧的值

五、拓展

一、关于NaN的认识
1、not a number 不是一个数字,不知道它具体是什么,但是是数字类型
2、isNaN(数据) 判断当前是不是一个数字,是一个数字就会返回false
console.log(isNaN(“你好”))
isnan隐式转换
二、精度丢失
console.log((0.110+0.210)/10)
三、Object.is()
1、作用:比较两个数据是否是一样的
2、返回:如果是一样的就会返回true,否则返回false
3、NaN在进行对比的时候特殊情况结果是true
每日总结
一、JS的创建方式:行内式、内部式、外部式
二、JS的组成部分:ECMAscript、BOM、DOM
三、JS的变量认识:var 变量名称 = 值
四、JS的数据类型
1、基本数据类型:number、string、boolean、undefiend、null(typeof检测的时候属于object)
2、复杂数据类型:object(对象、数组、null)
五、JS的数据类型转换
1、转换为数字类型:Number()、parseInt()、parseFloat()、Math.round()
2、转换为字符串类型:String()、数据.toString()
3、转换为布尔类型:Boolean()
六、JS的运算符
1、数学运算符:+ - * / %
2、赋值运算符:+= -= *= /= %= =
3、比较运算符:> < >= <= == === != !==
4、逻辑运算符:&& || !
5、一元运算符:++,–
6、空值运算符:null ?? value 左侧为空取右、左侧有值取左侧
七、拓展:isNaN、精度丢失、Object.is()

20240724周三

1、普通闰年:公历年份是4的倍数,且不是100的倍数的,为闰年(如2004年、2020年等就是闰年)。
2、世纪闰年:公历年份是整百数的,必须是400的倍数才是闰年(如1900年不是闰年,2000年是闰年)。
3、质数/素数:只能被1和本身整除的数
一、选择结构
if单分支
一、在JS语言中,分支并不是根据代码的顺序去执行的,根据你的条件去选择执行
二、if单分支结构:只有一个选择
1、语法:
if(条件){
如果小括号内的条件是满足的就会执行这里的代码
}
2、在使用条件的时候需要注意:条件返回的结果是一个布尔类型的值
if(1){}里面的1会隐式转换为true!!!
双分支
一、单分支只能有一个选择,if双分支表示可以有两个选择:满足和不满足的条件
二、if双分支语法
if(条件){
条件满足时候执行的代码
}
else{
条件不满足时候执行的代码
多分支
一、if多分支结构:表示可以有很多的选择
二、if多分支结构的语法
注意:如果满足条件二。就不往下执行下面的代码了,如果是三个if,三个都会执行,和什么性能有关
if(条件1){
条件1满足的时候会执行这里的代码
}
else if(条件2){
条件一不满足条件2满足的时候会执行这里的代码
}
else if(条件3){
条件3满足的时候会执行这里的代码
}

else{
条件不满足的时候会执行这里的代码
}
在这里插入图片描述
嵌套
一、if分支的嵌套:表示会有很多选择,会同时选择多个条件
二、if的分支的嵌套语法
if(条件1){
if(条件2){
满足了条件1和条件2就会执行的代码
}
else{
满足条件1但是不满足条件2执行代码
}
}
else{
不满足条件1执行的代码
}
一、switch分支语句:控制开关(又叫多路判断,case穿透)
case穿透:switch语句中,如果没有显式的break语句,执行会继续进入下一个case块,不管case后面跟的值是几,直接执行case里面的代码
switchcase也可以看成ifelse,if小括号内的变量或者值和值1相等的情况下,会执行代码
二、switch分支语句的语法组成
switch(变量或者值){
case 值1:
小括号内的变量或者值和值1相等的情况下会执行这里的代码
break; // 中断,下面有再多的代码就不会执行了
case 值2:
小括号内的变量或者值和值2相等的情况下会执行这里的代码
break;
default:
上面的所有情况都不执行的时候就会执行这里面的代码
}
三、关于switch写法的注意以及和if分支语句的区别点
1、变量和值是一个确定的东西,if判断的是一个范围条件
2、switch在比较变量和值的时候使用的全等符号(类型和值都必须是一样的)
3、case表示选择值进行比较,值的后面记得要加一个冒号
4、break在switch中表示中断程序,如果下面有其他代码也不会继续执行了
二、三元运算符|三目运算符:if…else的简写方式
1、语法:判断条件 ? 条件为true执行这里的代码 : 条件为false执行这里的代码
2、?表示条件为true :表示条件为false
3、1判2真3假
作业
若有一个五位数,想去掉后四位数字,只留第一位数字,就÷10000,四个零一个一,然后parse
只留最后一位数字,%10
15.5%10=5.5
1、一天的时间换算成秒:24 * 60 * 60 = 86400
2、天:7896709887 / 60 / 60 / 24
3、时:7896709887 / 60 / 60
4、分:7896709887 / 60
5、秒:7896709887 % 60
变量的驼峰命名法:大驼峰 BoxLeft 、小驼峰 boxLeft

20240725 循环结构

一、循环的解释:在计算机中需要重复的执行一段代码就叫做循环
二、一、while循环:当xxx时候(设置一个条件,当有了xx条件就会执行代码)
1、语法组成
while(条件){
满足了条件就会执行的代码段
}
四、设置一个循环式需要几个条件的
1、循环设置初始值
2、走入循环体内,需要判断条件
3、走出循环体,退出循环,需要退出循环的条件

如果没有设置退出循环的条件,循环并没有结束会一直在这里继续执行,会在循环体内一直加载会陷入死循
一、while表示当xx时候满足条件就会执行循环语句
二、二、do…while【了解】
1、所有的循环本质都是一样的为了重复执行一段代码
2、语法构成以及和while的语法的区别点
do{
需要重复执行的代码段
}while(满足判断的条件)
while是条件满足了才会走进循环体内执行代码,但是dowhile不管你有没有满足条件就会先执行一次代码
【重点】三、for循环语句:所有的循环语句本质都是一样为了重复执行一段代码,for循环式while循环的语法改写
1、for关键字:在计算机中就表示传参重复执行一段代码
2、for循环语法:变量初始值、判断条件、退出循环
for(变量的初始值;判断条件;变量的变化){
重复执行的代码段
}
3、关于for的执行顺序描述:首先变量的初始值,执行满足判断条件就会走进循环体内,再去执行变量的变化
一、四、for循环中的控制语句
1、break 中断/终止:满足条件后直接中断程序
2、continue 继续/跳过:满足条件后继续执行程序
二、关键字的解释
1、break表示程序在运行的过程中,碰到某些原因会停止执行,后面就不会再继续执行了
2、continue
五、for循环的嵌套
一、for循环表示重复执行一段代码,循环
二、如果有多个for循环,表示多次重复循环执行
语法组成
for(){
for(){}
}
表格标签table。行tr内容td,table需要设置宽高,tr和td不用,会平均分配,
清除表格之间的间距 :border-spacing: 0;合并表格边框:border-collapse: collapse;
六、调试程序的方法
// 1、debugger
for(var i=1;i<=5;i++){
debugger
console.log(i)
}
// 2、在浏览器的源代码中直接打断点
七、计数器

<script>
    /*
        质数:只能被1和本身整除的数字 2 3 5 7 11 13
        思路:用7这个数除以前面的所有 6 5 4 3 2
    */
   var num = +prompt("请输入一个数字")
   var k = 0 // 计数器
   for(var i =2;i<=num-1;i++){
        if(num%i==0){
            // 如果当前能走进来表示不是
            k++ // 当循环执行一次的时候k就会累加一次 在外面去判断这个k是否等于0 表示是质数
            break
        }
   } 
   if(k==0){
    alert("是质数")
   }
   else{
    alert("不是质数")
   }
</script>

八、开关法

<script>
    // 开关法:编程思维
    // for(var i=1;i<=5;i++){
    //     if(i==3){
    //         console.log(i)
    //         break
    //     }
    // }
    // console.log(i<=5)
    /* 
        循环如果需要结束,有两种情况
        1、循环正常结束了
        2、在循环体内使用了关键字break提前中断了循环

        如果在循环外面再去打印循环的条件,有两种情况
        1、如果是正常结束循环的,外面设置循环条件输出的时候就是false
        2、如果是非正常结束的循环,例如使用了break,在外面输出条件的时候就是true
    */
    var num = +prompt("请输入一个数")
    var flag = true // 默认你设置这个数就是质数
    for (var i = 2; i <= num - 1; i++) {
        // 如果能走进来就表示当前这个数不是质数
        if (num % i == 0) {
            flag = false
            console.log("不是质数")
            break
        }
    }
    if (flag == true) {
        alert("是质数")
    }
</script>

20240726周五 函数上

作业:
var sum = 0 // 循环内部计算是加减的时候定义为0,乘除定义为1
&nbsp;是空格
用*画三角形,9-i
阶乘和

var sum = 0
    for (var j=1;j<=5;j++) {
        var res = 1
        for (var i = j; i >= 1; i--) {
            res = res * i
            //第一遍 i=5 1*5
            //第二遍 i=4 1*5*4
            //第三遍 i=3 1*5*4*3
            //第四遍 i=2 1*5*4*3*2
            //第五遍 i=1 1*5*4*3*2*1
            
            //j=1 i=1 1*1
            //j=2 i=2 1*2
            //j=2 i=1 1*2*1
            //j=3 i=3 1*3
            //j=3 i=2 1*3*2
            //j=3 i=1 1*3*2*1
        }
        sum = sum + res
    }

一、函数
四、JS中的函数就是一个小盒子,存放一段的代码放在这个盒子内(重复使用,共有代码)
五、如何定义函数
1、直接创建式/声明式
function 函数名(){

        }

2、赋值式/匿名函数
var 函数名 = function(){

        }

六、如何调用函数
1、声明式的调用方法:函数名()
2、赋值式的调用方法:函数名()
关于函数书写的注意点
1、函数名取名规范要和之前一样(不能使用中文汉字、特殊符号、纯数字)
2、使用语义化单词或者是驼峰式命名
3、两种函数创建调用的区别和使用
3.1 直接创建式方法随便在页面的任意地方都是可以调用的
3.2 赋值式创建方式只能在函数体的下面调用,不然就会报错:xxx is not a function
一、关于xxx is not defined和unfiend的区别
1、undefined 声明但是没有赋值,未定义(未赋值)
2、not defined 无中生有
一、二、函数的参数有什么作用:设置参数可以进行传递参数,实现模块化开发,封装函数
二、函数参数的认识
1、形参:形式上的参数(假的) 写在函数创建时候函数名后面的小括号内的 接收参数
2、实参:真实上的参数(真的) 写在函数调用时候函数名后面的小括号内的 传递参数
三、关于参数写法的问题
1、函数在设置形参的时候,有多少参数之间都需要使用逗号隔开
2、在函数形参设置参数的时候就相当于在函数的内部定义当前的变量
3、函数的形参是可以设置默认值的,当实参没有设置的时候,如果实参设置就会覆盖形参的默认值
四、关于形参和实参在传递过程中遇到的一系列问题
1、原则上:形参和实参的个数以及数据类型都需要一致
2、当实参的个数比形参的个数多的时候,默认会从左到右进行选择,多出来的参数不会影响当前函数内部的计算结果
3、当实参的个数比形参的个数少的时候,默认会从左到右进行选择,少的参数默认的数据类型是undefiend
五、当实参的个数比形参的个数多的时候:数组就是存储数据的(很多数据)
1、会在函数内部生成一个类数组(长得像数组但是没有数组的方法)
2、多出来的实参会存在函数的内部类数组中,这个类数组是没有方法的
调试:
报错之后函数就不执行了

三、函数的返回值
一、函数是一个封闭的空间,在函数内部定义使用的变量只能在函数内部获取到,函数外面是获取不到的
二、如何在函数的外面拿到函数内的变量或者结果值?
2、在函数内部需要返回出去变量或者结果值,在函数的外部需要使用变量进行接收
3、如果将函数内部的变量或结果"返回"出去:使用一个关键字 return 变量或者结果值
4、返回结果值之后再浏览器中是观察不到的,在函数的外面需要接受:var 变量 = 函数
5、return不仅仅可以将函数内部的结果返回出去使用**,还可以表示终止当前的函数内部执行(后面的代码就不会再继续执行了)**
四、函数的调试
在这里插入图片描述

函数下

一、函数的执行过程
一、函数在创建和调用的时候,在这两个阶段的时候分别做了哪些事?
二、第一个阶段是函数的创建阶段
1、在浏览器或者计算机的内存中开辟了一个新的空间
2、把函数的代码都存在这个栈的空间中
3、把存储代码的地址给到函数名
三、第二个阶段是函数的调用阶段
1、通过函数名的地址找到对应的函数
2、在浏览器的内存中开辟一个新的临时空间
3、在"执行空间"进行参数传递、赋值、预解析、代码执行、结果、销毁
4、当这个执行空间就已经不存在了
5、最终只能看见结果显示在浏览器中
二、函数的作用域:表示一个变量(变量名或者函数名)可以生效的范围
二、作用域的分类
1、全局作用域:在HTML页面中的任意位置都可以使用这个变量,window表示全局
2、局部作用域:在函数内部使用的变量叫做局部
三、局部和全局的使用关系
1、在函数内部定义的变量就是局部变量不可以在函数的外面去使用:使用return返回外面才是可以用的
2、在函数外面定义的变量就是全部变量可以在函数内部使用的
3、在函数内部定义变量的时候把var关键字给省略了,相当于当前这个变量就是全局变量
三、函数的预解析,变量的访问规则和赋值规则
函数的预解析
变量未声明直接赋值,会被转换成全局变量
变量提升是指把所有的变量声明提升到==当前作用域的最前面,不提升赋值操作
相关文章
1.JavaScript函数的预解析
2.JavaScript函数的预解析的练习题
函数的预解析:在写代码的时候会很少见,只是在面试的时候笔试题比较多
1、函数的预解析:是函数在执行调用时候浏览器偷偷的在做的一件事情(我们是看不见的,我们只能看到最终的结果)
2、函数的预解析过程
2.1 解释代码:预解析过程,浏览器在解析我们看不见
2.2 执行代码:预解析结束,浏览器上面有结果我们能看见
3、预解析的过程
3.1 规定把变量声明和函数声明会提到代码的最前面(分别叫做变量提升和函数提升)
3.2 其他的代码按照JS语法执行顺序从上到下执行的,位置不会变(赋值过程)
变量的访问规则
!!!!!!强调:正常不会写这样的代码,只为了分析函数解析的过程,以及面试!!!!!!
一、在函数里面获取到这个变量的值就叫做函数的访问规则
1、在函数里访问变量规则:如果当前作用域有变量值的时候就直接获取到
2、如果当前作用域没有变量值就会往上级进行查找,一直找到浏览器的全局作用域
3、如果全局中有变量有值的时候就获取到值,没有值的时候得到的就是undefiend
变量的赋值规则
一、变量的赋值规则:找到变量并且给变量赋值
1、在函数内部有定义直接使用函数内部定义的变量值
2、如果当前没有的情况下就会往上级查找,如果上级也没有的情况下就会自己定义一个变量并且赋值

  • 11
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值