2022-07-11 第一小组 张明旭 前端JS学习记录

目录

心情

知识点

JS基本性质

JS解释器

*《JS所有的引用都用script》

JS的简单数据类型

定义变量

JS的复杂数据类型

弹窗

逻辑判断,流程控制

运算符

JS的一个原理解析:

逻辑判断:

if...else语法:

switch语法:

switch...case和if...else怎么选?

switch...case和if...else相似之处:

switch...case和if...else不同之处:

总结


心情

今天是正式学习的第三天,每天一大部分前端的新知识,吐瘦两斤,听课晕乎乎的.不过小事,靠笔记和视频苟活


知识点


编程语言、脚本语言。依赖于某种容器(浏览器)运行
有浏览器解释执行

编程语言的分类:


1、解释型:JS Python
2、编译型:C++,C#
3、半解释半编译:Java

JS基本性质

JS是运行在浏览器上的,帮助控制页面
JS框架:vue.js react.js jquery.js angular.js
前端服务器语言:node js

JS解释器


火狐:spidermonkey
chrom、node:V8
Safari:Javascriptcore
edge:chakra

JS在哪里执行?写在网页什么位置
不成文规定:JS放在body的最后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 用script写JS,一般放在body的结尾 -->
    
</head>
<body>
  ...
  ...
  <scrip>
    
  </script>
</body>
</html>

*《JS所有的引用都用script》

JS的简单数据类型


1、数字(number):整数,正数,小数,负数
2、字符串(string) :a,中文,@
3、布尔型(boolean):ture false/1 0
4、空(null):相当于声明了值为空
5、undefind:未定义,没有值

定义变量


1.变量

2.《开发中尽量减少使用字面量,后期维护更改困难》

3.在ES6(JS新版本)中,有两个新词定义变量
         let :用let声明,无法重新定义
         const :有let 的特点,const声明的变量是常量

JS的复杂数据类型


1、数组:一个变量对应多个值
使用数组函数

函数:可以定义一个函数用来执行一系列代码
函数定义之后不会自己执行。需要手动调用函数

四大类:


1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值
《函数内不可以在声明函数,但是可以调用函数,调用方式正常调用即可》

return出来可以返回结果,还可以中指函数进行
开发中,尽量不要在return后面继续写语句

弹窗

实质上就是函数。 \n、\r换行符,弹窗里的回车
1、alert:警告弹窗,没有返回值
2、control:带有确认和取消的弹窗,有返回值,点击确定,返回ture,点击取消返回false
3、prompt:带有文本框的弹窗,有返回值,就是文本本框内容

<script>
        // 使用数组函数,函数都有小括号
        // let arr =Array();
        // // 警告弹窗
        alert(arr);
        console.log(11111);
        console.log(arr);
    </script>

逻辑判断,流程控制


运算符

1.三元运算符(三目运算符)(必须得到一个布尔类型的结果)

语法是固定的,只能有一个条件。两个选项

2.+号的特殊性:

除了可以进行加法运算之外,还可以当做连接符。
如果先入为主的认定为+号为连接符,那他就一直是连接符

    • / %:可以进行类型转换成数字,如果转不了,结果为NAN

JS的一个原理解析:


所有非空的变量都会被解析成1->false

逻辑判断:


if...else结构

if...else语法:


if(条件表达式){
要执行的代码:
}else{
要执行的代码:
}
if...else结构与多重结构有什么区别?

if...else是可以嵌套的,可以无限嵌套(原则上不超过三层)

if....return:

if(条件表达式){
要执行的代码:
}return ;
return;

                                       switch.case结构:

switch语法:


switch(能得值表达式){
case 选项一:
要执行的代码
break;
case 选项二:
要执行的代码
break;
.......
default :
要执行的代码
}
特点:当表达式的值在case中匹配成功,会执行相应代码,但是会继续运行后面代码,需要用break使其停止

switch...case和if...else怎么选?


1、当需求为区间范围时,switch...case根本无法使用。

2、if...else...基本上啥都能干

3.switch...case比if...else效率高(指效率不同代码执行时间)

4、当需求为固定值,且值不多时用switch...case

5、能用switch...case解决的不用if...else

switch...case和if...else相似之处:


1、几乎所有的switch...case都可以转化为if...else
2、default几乎相当于else
3、case几乎相当于if
4、都可以无限嵌套

switch...case和if...else不同之处:


switch需要break

总结


1、JS的引入,应该写在什么位置
2、JS的数据类型(数组)
3、变量的定义和声明 var let const
4、三种弹窗(三个的意思,有无返回值)
5、函数*****
6、return作用
7、变量的作用域
8、运算符
9、typeof isNaN
10、三元运算符
11、流程控制语句:
两个流程控制语句的相互嵌套*****
if。。。else
switch。。。case
if。。。return
问题: 判断一个年份是否为闰年?(能被4和400整除,不能被100整除)
结果在网页的开发者工具的控制台

<script>
    // 判断一个年份是否为闰年
    // 能被4和400整除,不能被100整除
    let year = 2000;
    switch(year){
        case year % 4 ===0 && year % 100 != 0 || year % 400 ===0:
            console.log(year+"是闰年");
            break;
        default:
            console.log(year+"不是闰年");
    }
    
   </script>





   <script>
    // if  else  语句
    let year1 = 2000;
    if(year1 % 400 ===0){
        console.log(year1+"是闰年");
    }else{
        if (year1 % 4 ===0 && year1 % 100 != 0){
            console.log(year1+"是闰年");
        }else{
            console.log(year1+"不是闰年");
        }
    }
    // 函数+if  return
    function isRun(year){
        if(year1 % 400 ===0){
        console.log(year+"是闰年");
        return ;
        if(year % 4 ===0 && year % 100 != 0){
            console.log(year+"是闰年");
        }
        return ;
        console.log(year+"不是闰年");
    }
    }
    isRun(2100)
   </script>




<script>
    // 函数+switch。。。case + if
    function isRun2(year){
        switch(year % 4){
            case 0:
            console.log(year+"是闰年");
            return ;
            default:
                if(year % 4 ===0 && year % 100 != 0){
                    console.log(year+"是闰年");
                }
                return ;
                console.log(year+"不是闰年");
        }
    }
    isRun2(2000)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值