2021-07-13 7月12日以来进度记录/学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_44540109/article/details/118702579

文章目录

前言
一、完成了负责的最后一张界面——数据与图片上传、下载、删除
二、js学习

前言

因为不在学校进行实训，由于环境的变化和气氛的变化，效率有所下滑，进度进展几乎可忽略不计了，真是惭愧！

一、完成了负责的最后一张界面——数据与图片上传、下载、删除

只是完成了大致的样子与布局，交互什么的都暂时没有实现，上传、下载、删除等操作查资料查的实在是晕头转向，最后没有进行进一步的界面布局设计，所以这个界面还是个半成品。因为对于这个界面实在是不满意，外加这个界面所涉及到的js很多，如果不先进行js的学习很难写好这个界面。是以决定先把这个界面大致布局写明，就先去进行js的学习。

二、js学习

1.alert和document

alert是弹出弹窗，document是在当前文本处输出内容，还有就是js代码通过script标签添加，该标签一般写在head标签中，也可以写到body里。type也可以不写，但是写上更规范。一个HTML里可以有多个script标签添加js文件，也可以导入外部js文件，在type后加上src=“路径”。（！+tab键可以生成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>

    <script type="text/javascript">
    alert("Hello World!");
    document.write("Hello!")
    </script>
</head>
<body>
    
</body>
</html>

结果：
在这里插入图片描述

在这里插入图片描述

2.数据处理

包括声明（var)、自动转换、强制转换等。

1.基本数据类型：
<1>数字 number 100 3.14
<2>字符串 string ‘hello’ “hello”
<3>布尔值 boolean true false
<4>特殊数据类型 null空 undefined未声明
2.复合数据类型

1.声明变量通过关键字（系统定义的有特殊功能的单词）var
<1>声明变量的时候，同时给变量赋值，叫做初始化 var age=18;
2.变量赋值var age=10; age=20;
3.可以同时定义多个变量，变量之间要用逗号隔开 var age=10,sex=“boy”;

标识符：用户自定义的所有名字叫做标识符。变量名
规律：
1.标识符必须由数字、字母、下划线和美元符号$组成
2.不能以数字开头
3.标识符区分大小写，age和Age这是两个变量
4.标识符必须见名思意

输入当前变量/常量的数据类型
【格式】 typeof 变量/常量
【注】js是弱语言
var name=“xxx”;
alert(typeof name);

自动数据类型转换：
布尔值：
true=>1
false=>0
特殊数据类型中：
null=>0
undefined=>NaN

强制数据类型转换：
1.数字0转成布尔值为false, 非0数字转成布尔值全为true
2.空字符串转成布尔值为false，非空字符串转成布尔值为true
3.null和undefined转成布尔值都是false

var tmp=Boolean(1);//true

Number() 将别的数据类型转成数字
1.布尔值 true=>1 false=>0
2.字符串纯数字字符串=>对应的数字，否则NaN
3.特殊数据类型 null=>0 undefined=>NaN
parseInt() 兼容Number的功能，取整
parseFloat() 取浮点数带小数的数字可以将别的数据类型转换成带小数的数字

3.程序三大流程控制

顺序、分支（选择）、循环
许多代码规范、编写与C++的要求十分相似！

顺序——从上朝下执行的代码

<!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 type="text/javascript">
    //题目：输入两个数，然后交换这两个数的值，输出交换后的结果
    var num1=10;
    var num2=20;
    var tmp=num1;
    num1=num2;
    num2=tmp;
    alert("num1="+num1+", num2="+num2);
    
    </script>
</head>
<body>
    
</body>
</html>

结果：
在这里插入图片描述

选择——根据不同的情况，执行对应代码

if语句、switch语句
三目运算符：p1?p2:p3
若p1=true，运算p2，若p2=false，则运算p3
例如：

<!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 type="text/javascript">
    //题目：比较大小，输出最大值
    var num1=10;
    var num2=20;
    var max=num1>num2?num1:num2;
    alert(max);
    
    </script>
</head>
<body>
    
</body>
</html>

结果：
在这里插入图片描述

循环——重复做一件事情
分类：while、do…while、for循环

<!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 type="text/javascript">
    //题目：1+2+3+4+......+100=？
    var i=1;
    var sum=null;
    while(i<=100)
    {
        sum+=i;
        i++;
    }
    alert(sum);
    
    </script>
</head>
<body>
    
</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>

    <script type="text/javascript">
    //打印100以内7的倍数

    var i=1;
    while(i<=100)
    {
        if(i%7==0)
        {
            document.write(i+"<br />");
        }
        i++;
    }
    
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述