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

今天是正式学习的第三天,每天一大部分前端的新知识,吐瘦两斤,听课晕乎乎的.不过小事,靠笔记和视频苟活
知识点:
JavaScript是什么?
编程语言、脚本语言。依赖于某种容器(浏览器)运行
有浏览器解释执行

编程语言的分类:
1、解释型:JS Python
2、编译型:C++,C#
3、半解释半编译:Java

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:未定义,没有值

定义变量:
变量
《开发中尽量减少使用字面量,后期维护更改困难》

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

JS的复杂数据类型
1、数组:一个变量对应多个值
(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>

逻辑判断,流程控制
夹杂着讲运算符:

三元运算符(三目运算符)(必须得到一个布尔类型的结果)
语法是固定的,只能有一个条件。两个选项

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

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

JS的一个原理解析:
所有非空的变量都会被解析成1->false

逻辑判断:
if...else结构

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

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

if....return:

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

                                       switch.case结构:

语法:
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不同之处:
1、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)
posted @   华丽转身撞到墙  Views(32)  Comments(0Edit  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示