2022-07-11 第三小组黄均睿前端学习笔记（day4）-CSDN博客

本文链接：https://blog.csdn.net/weixin_56982770/article/details/125794344

JavaScript
简称JS，bianchen该语言，脚本语言，依赖于某种容器来运行。运行在浏览器上，浏览器来解释执行，帮助我们控制页面。

编程语言的分类：

1.解释型：JS、Python等...

2.编译型：C++、C#等...

3.半解释、半编译：JAVA。

JS一般放在body结束标签上方，用来确保再执行JS的时候要加载的元素已经加载完成。

外部引入JS：

2.字符串(String):a,中文，特殊符号

3.布尔型(boolean):用来进行判断的，true（1）,false（0）。

4.空(null).

5.underfined:未定义,（没有值）。

定义变量：
变量：开发中尽量减少使用字面量，后期维护困难的问题。

在ES6(JS新版本)中，新推出了两个词代替var

1.let,变量用let声明。无法重复定义。—–推荐

2.const:有let的特点，const声明的变量就是一个常量。如果接下来定义的常量又重新附值，会报错。

JS的复杂数据类型
警告弹窗：alert();

控制台打印输出：console.log();

数组：一个变量对应多个值

使用数组：let arr=Array();

使用new关键字:let arr=new Array();

使用字面量(直接附值):let arr=[1,2,3,4]

函数:定义一个函数，：function a(){}

函数不会自己执行，如要使用，需要手动调用函数。:a();

无参无返回值

无参有返回值

有参无返回值

有参有返回值

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

return除了有返回值得作用，还有结束函数执行得作用。

弹窗：

alert：警告弹窗,无返回值。

confirm：带有确定和取消的有返回值的弹窗，返回true false.

prompt：带有输入框的弹窗，返回值为文本框输入的内容,可以传两个值。后面的是默认值

运算符：

算术运算符 + - * / %

赋值运算符 = += -= /= %= *=

a=a+1 a+=1 a++ ++a

比较运算符 > < >= <= != == ===会带着数据类型判断。

逻辑运算符：与或非，并且：&&，或者：|| 非：!

三目(元)运算符：条件表达式？表达式1：表达式2

+号的特殊性，除了可以进行加法计算外，连接符。如果先入为主认定+为连接符，后面就都按照连接符算。

*/-%可以进行类型转换，如果转不了。结果为non（no one number）；

逻辑判断，流程控制。

当需求为区间范围时，switch根本没法使用，if…else…啥都能用，switch case快。需求为固定值且值不多，switch,

if…else…

switch(表达式){
case 值1: break;case 值2: break;default;

}

获取数据类型：typeof a

判断是否为数字:isNaN(a),如果是数字就是false，如果不是就是true。

思考：

JS的引入，应该写在什么位置。

数据类型

变量的定义和声明。

3种弹窗

函数

return作用

变量的作用域

运算符

typeof isNaN

三元运算符

流程控制语句

补充

JavaScript:编程语言。脚本语言（依赖于某种送死来运行）浏览器来解释执行。作用：给网页加功能。写在body之间

js的数据类型
1.数字 2.字符串 3.布尔型：true/false
2.空（null） 5.未定义(undefined)
js复杂数据类型
1.数组：使用数组函数 2.函数样式:单词()

开发中尽量减少使用字面量，后期维护困难

逻辑运算符：
与：&&
或：||
非：！

练习题

自己制作表格

表格代码：

<!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>
    <link rel="stylesheet" href="CSS/rng.css">
   
</head>
<body>
<div class="rg_layout">
    <div align="center">
        <table id="hanhan">
            <tr>
                <td>新用户注册</td>
            </tr>
        </table>
    </div>
    <div>
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table align="center">
                    <tr>
                        <td class="td_left"><label for="username">姓名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="text" name="birthday" id="birthday" placeholder="请输入出生日期">&nbsp&nbsp&nbsp按格式yyyy-mm-dd</td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">专业</label></td>
                        <td class="td_right"><select name="name" id="name"><option value="">计算机科学与技术</option></select></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">体育特长</label></td>
                        <td class="td_right"><input type="checkbox">篮球
                            <input type="checkbox">足球
                            <input type="checkbox">排球
                            <input type="checkbox">游泳
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>上传照片</label></td>
                        <td class="td_right">
                            <input type="button" name="gender" value="请选择图片"> 未选择任何文件
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">密码</label></td>
                        <td class="td_right"><input type="text" name="birthday" id="birthday" placeholder="请输入密码"></td>

                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >个人介绍</label></td>
                        <td class="td_right"><textarea rows="2" cols="21"></textarea>
                            
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                        <td colspan="2" align="center"><input type="submit" id="btn_sua" value="重置"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>
    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>

</div>
</body>

</html>

页面弹窗

弹窗代码

<!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>
   
</head>
<body>
    <script>
        // 数字型
        var v1 = 11;
        // 字符型
        var v2 = "帅比";
        //    布尔型
        var v3 =true;
        // 空
        var v4 =null;
        // 未定义
        var v5 =undefined;
        // 字面量
        alert(v2);
    </script>
    <!-- <script src="js/7111.js"></script> -->
</body>

</html>

总结

JS就像是HTML的画布上，加上了CSS的色彩装饰，最后经过JS的加工变成美丽的动画，当附加功能在<script>中得到应用，整个页面变得灵活