当前位置：网站首页>2022/07/11 第五小组丁帅学习笔记 day04

2022/07/11 第五小组丁帅学习笔记 day04

2022-07-17 05:13:00 【激进的黄瓜】

JavaScript是什么？
编程语言。脚本语言。依赖于某种容器来运行
浏览器来解释执行

编程语言的分类：
1.解释型：JS Python
2.编译型：C++ C#
3.半解释半编译:JAVA
js是运行在浏览器上的，可以帮助我们去控制页面

js的数据类型：
   1.数字：number
   2.字符串：string
   3.布尔型：boolean
   4.空：null（相当于声明了值为空）
   5.undefined：未定义（没有值）

typeof 获取数据类型
isNaN() 判断是否是数字

函数：
定义一个函数，用来执行一系列代码。
函数定义以后，不会自己执行的。需要我们手动调用函数

1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值

《函数内部不可以再声明函数，但是可以调用函数，调用的方式和正常调用的方式相同》

return除了可以返回结果，还可以终止函数的继续执行。
开发中，尽量不要在return后面继续写语句

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

逻辑判断，流程控制
夹杂着去讲运算符

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

三元运算符（三目运算符）：
语法是固定的，只能有一个条件，两个选项

+号的特殊性：
除了可以进行加法计算之外，连接符。
如果先入为主的认定+号为连接符，那它就一直是连接符

- * / %：可以进行类型转换，如果转不了，结果为NaN（not a number）

逻辑判断：
1.if...else：
语法：
   if(条件表达式){
       要执行的代码;
   }else{
       要执行的代码;
   }
if...else结构和多重if结构有什么区别？

if...else是可以嵌套的，可以无限嵌套，原则上要求不超过3层。

switch..case结构：
语法：
switch(表达式){
   case 选项1:
       要执行的代码;
       break;
   case 选项2:
       要执行的代码;
       break;
   ....
   default:
       要执行的代码;

}
当表达式的值在case中匹配成功，会执行对应的代码，但是停不下来，后面的代码会继续执行。

怎么选？
1、当需求为区间范围时，switch...case根本无法使用。
2、if...else...基本上啥都能干
3、switch...case效率高
4、当需求为固定值，且值不多，switch...case
5、能用switch..case解决的不要用if...else

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

不同之处：
1、switch需要break
2、switch里面的选项可以杂乱无章

总结：
1、JS的引入，应该写在什么位置
2、数据类型（数组）
3、变量的定义和声明 var let const
4、3种弹窗
5、函数*****
6、return的作用
7、变量的作用域
8、运算符
9、typeof isNaN
10、三元运算符
11、流程控制语句，两个流程控制之间的互相配合嵌套关系*****

以下是今日作业：

<!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>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
        
        }

        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }


        button {
            outline: none;
            border: 0;
            padding: 6px 15px;
            margin: 5px;
            margin-right: 1px;
            background: #6215f0;
        }
        td {
            padding: 5px;
        }
       table{
        padding: 50px ;
       }
    </style>
</head>
<body>
    <form action="">
        <table bgcolor="#f04c15">
            <tr>
                <td colspan="3"  style="color: rgb(33, 12, 18); font-size: 18px; margin-bottom: 8px; text-align: center;">新用户注册</td>
            </tr>
          
            <tr>
                <td>姓名：</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="grender" checked>男<input type="radio" name="grender">女</td>
                <td></td>

            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="text" placeholder="按格式yyyy-mm-dd"></td>
                <td>按格式yyyy-mm-dd</td>
            </tr>
            <tr>
                <td>学校：</td>
                <td><input type="text"></td>
                <td></td>

            </tr>
            <tr>
                <td>专业：</td>
                <td>
                    <select name="zhuanye" id="">
                        <option value="jk">计算机科学与技术</option>
                        <option value="wl">网络工程</option>
                        <option value="sm">数字媒体</option>
                    </select>
                </td>
                <td></td>

            </tr>
            <tr>
                <td>体育特长：</td>
                <td>
                    <input type="checkbox" name="hobby" checked>篮球
                    <input type="checkbox" name="hobby" checked>排球
                    <input type="checkbox" name="hobby">足球
                    <input type="checkbox" name="hobby">游泳
                </td>
                <td></td>

            </tr>
            <tr>
                <td>上传文件：</td>
                <td><input type="file"></td>
                <td></td>

            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
                <td></td>

            </tr>
            <tr>
                <td>个人介绍：</td>
                <td><textarea name="" id="" cols="30" rows="5" placeholder="请输入内容"></textarea></td>
                <td></td>

            </tr>
            <tr>
                <td colspan="3" >
                    <div class="container" style="position: relative; left: 100px;">
                        
                        <button type="submit">提交</button>
                        <button type="reset">重置</button>
                    </div>
                    <!-- <input type="submit" name="提交">
                    <input type="reset" name="重置"> -->
                </td>  
            </tr>
            <tr>
                <td colspan="3" >
                   <div class="fr">已有账号？<a href="">立即登录</a></div>
                </td>  
            </tr>
        </table>
    </form>
</body>
</html>

原网站

版权声明
本文为[激进的黄瓜]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Dshuai7191/article/details/125729861