其他分享
首页 > 其他分享> > 20220711 第二组 刘世琦 学习记录

20220711 第二组 刘世琦 学习记录

作者:互联网

JavaScript

今日内容

*JS的引入,应该写在什么位置
*JS的数据类型(数组)
*变量的定义和声明 var let const
*3种弹窗
*函数(重点!)
*return的作用
*变量的作用域
*运算符
*typeof和isNaN
*三元运算符
*流程控制语句:两个流程控制质检的互相配合嵌套关系(重点!)

JavaScript是什么?JS

通用的编程语言。脚本语言。依赖于某种容器来运行。
浏览器来解释执行。

编程语言的分类:

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

JS是运行在浏览器上的,可以帮助我们去控制页面。

vue.js react.js jquery.js angular.js
nodejs前端的服务器语言

这里可以尝试实现一个计算器!不知道我自己能不能钻研出来

J##S解释器:是由浏览器解释执行的,不是直接解释,浏览器中有直接解释器
火狐:spidermonkey
Chrom、node:v8
Safari:JavaScriptcore
edge:chakra

JS可以在哪里执行?写在网页的什么位置?

在head里引入js使用标签
出现弹窗内容为1

因为每个网页的解释器都不一样,显示也不一样,所以我们要用css自己做弹窗

这个弹窗不局限于位置单独出现都会显示,规定:JS放在结束body标签的上方!
js是给网页添加功能的,所以应该先有一个网页,所以写在body结束上面可以确保网页信息全部加载完毕。
外部引入JS!新建一个.js不需要再写
直接写alert(“。。。”);

位置依旧是body结束上方

弹窗:(实质上就是函数)

1.alert:警告弹窗,没有返回值
2.confirm:带有确认和取消的弹窗,有返回值。点确定,返回true;点取消,返回false。
3.prompt:带有文本框的弹窗,有返回值,返回文本框输入的内容
·\n可以在弹窗里换行,换行符

src引入页面其他链接地址或者img

CSS引入背景图片使用url,a标签使用href

JS的简单数据类型:

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

定义变量:

变量:开发中尽量减少使用字面量,后期维护困难
字面量:alert(1)这是1就属于字面量
定义一个变量:使用var 变量明=一个值
例:

number类型

<script>
    var v1=10;
        alert(v1);
</script>

这样会显示10

字符串类型

var v2 = '你好'; //加引号会把变量变成自变量

布尔类型

var v3 = true;

var v4 = null;

undefined

var v5;

修改变量的值:

<script>
    var v1=10;
    v1=11;  显示11
        alert(v1);
</script>

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

1、let:变量用let声明,无法重复定义的
2、const:有let的特点,const声明的变量就是一个常量,不能再变

三元运算符(三目运算符)

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

+号的特殊性:

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

- * / % :

可以进行类型转换,如果转不了,结果为NaN(not a number)
例:10 - * / % “10”会自动对“10进行类型转换”

两个工具:

1.typeof:获取数据类型(不是函数,是运算符)

2.nan:判断是否为数字

·字符串的拼接

JS的复杂数据类型:

数组:一个变量对应多个值
(1)使用数组函数(所有的函数一定都有“( )”)

(2)使用new关键字

(3)使用字面量的方式

·先定义数组,再赋值

函数:可以定义一个函数,用来执行一系列代码。关键字:function

函数定义后不会自己执行,需要我们手动调用函数

作用域找大括号,只在作用域里有用

带有返回值的函数:return
1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值

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

return除了可以返回结果,还可以终止函数的继续执行。

在开发中,尽量不要在return后写语句。

逻辑判断:流程控制

JS的原理解析:

所有的非空的变量都会被解析成1(1代表true)

判断:

1.if...else:
语法:

·多重if

·if...else结构和多重if结构有什么区别?
·if...else是可以嵌套的,可以无限嵌套(但是原则上不要超过三层)
如果在一个函数中需要使用if。。。else。。。可以使用if。。。return。。。来实现
2.switch...case结构:
语法:

·当表达式的值在case中匹配成果,汇之星对应的代码以及后面的代码
,但是停不下来,后面的代码会继续执行,所以要添加break。

怎么选?

1.当需求为区间范围时,switch根本无法使用
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...case需要break
2.Switch...case里面的选项可以杂乱无章

上机题

<!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>新用户注册1</title>
</head>
<body>
    <table border="1" width="400" align="center">
        <caption><h4>新用户注册</h4></caption>
        <tr>
            <td>姓名:</td>
            <td>
                <input type="text" name="name">
            </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex">男
                <input type="radio" name="sex" checked>女
            </td>
        </tr>
        <tr>
            <td>出生日期:</td>
            <td>
                <input type="date" name="begin" placeholder="yyyy-mm-dd" value=""min="1997-01-01" max="2030-12-31">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp按格式yyyy-mm-dd
            </td>
        </tr>
        <tr>
            <td>学校:</td>
            <td>
                <input type="text" name="school">
            </td>
        </tr>
        <tr>
            <td>专业:</td>
            <td>
                <select>
                    <option check>计算机科学与技术</option>
                    <option>软件工程</option>
                    <option>通信工程</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>体育特长:</td>
            <td>
                <input type="checkbox" nam="hobby">篮球
                <input type="checkbox" nam="hobby">足球
                <input type="checkbox" nam="hobby">排球
                <input type="checkbox" nam="hobby">游泳   
            </td>
        </tr>
        <tr>
            <td>上传照片:</td>
            <td>
                <input type="file" name="upload_image" accept="image/gif,image/jpeg,image/png,image/jpg">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>个人介绍:</td>
            <td>
                <textarea name="textarea" cols="25" rows="3"></textarea>
            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <button type="submit">提交</button>
                <input type="reset" value="重置">
           </td>
        </tr>
    </table>
</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>
    <style>
        .div1 {
            height: 500px;
            width: 500px;
            background-color: white;
            padding: 50px;
            margin-left: 375px; 
            border: 10px gray solid;
            box-sizing: border-box;
            float:left;
        }
        .div2{
            height: 560px;
            width: 1250px;
            background-color:lightblue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <table  width="400" align="center">
            <caption><h4 style="color:orange;">新用户注册</h4></caption>
            <tr>
                <td>姓名:</td>
                <td>
                    <input type="text" name="name">
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" checked>男
                    <input type="radio" name="sex" >女
                </td>
            </tr>
            <tr>
                <td>出生日期:</td>
                <td>
                    <input type="date" name="begin" placeholder="yyyy-mm-dd" value=""min="1997-01-01" max="2030-12-31">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp按格式yyyy-mm-dd
                </td>
            </tr>
            <tr>
                <td>学校:</td>
                <td>
                    <input type="text" name="school">
                </td>
            </tr>
            <tr>
                <td>专业:</td>
                <td>
                    <select>
                        <option check>计算机科学与技术</option>
                        <option>软件工程</option>
                        <option>通信工程</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>体育特长:</td>
                <td>
                    <input type="checkbox" nam="hobby">篮球
                    <input type="checkbox" nam="hobby">足球
                    <input type="checkbox" nam="hobby">排球
                    <input type="checkbox" nam="hobby">游泳   
                </td>
            </tr>
            <tr>
                <td>上传照片:</td>
                <td>
                    <input type="file" name="upload_image" accept="image/gif,image/jpeg,image/png,image/jpg">
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td>
                    <textarea name="textarea" cols="15" rows="2">请输入内容...</textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <button type="submit" style="background-color: yellow;">提交</button>
                    <button type="reset" style="background-color: yellow;">重置</button>
               </td>
            </tr>
            <tr>
                <table width="100">
                    <a href="../index.html" target="_blank" align="right"><h4>立即登录</h4></a>
                </table>
            </tr>
        </table>
    </div>
    <div class="div2"></div>
</body>
</html>

总结

掌握情况:
掌握了弹窗,JS的引入,数组,变量的定义和声明,return的作用,运算符,函数
在逻辑判断中,对ifelse和Switchcase存在具体情况不会使用的问题,在老师讲解课上作业时,更进一步理解。
在今天的测试中,感觉客观题答案存在错误,上机题中90%对题目进行了编写,但是链接的使用以及按键的设置存在问题,希望在明天的询问以及视频回看中得以解决终止,今天的心情可能因为听懂并且成功运用到实际中而开心!

标签:case,...,20220711,JS,nbsp,var,刘世琦,弹窗,第二组
来源: https://www.cnblogs.com/Liusq11/p/16472453.html