2022-07-11 第三小组 黄均睿 前端学习笔记(day4)

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

        编程语言的分类:

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

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

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

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

外部引入JS:       

<script src="js的地址"></script>
JS的简单数据类型:     
        1.数字(number):整数,正数,小数….

        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>中得到应用,整个页面变得灵活

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值