JS和Mysql学习-day13
1. JS
1.1 js简单了解
//JS代码
function easymethod() {
//在浏览器的控制台打印测试数据
console.log("this is easymethod");
//声明对象
//js是弱类型语言，不用靠数据类型来声明变量
//局部变量
let obj = {};
//常量
const username = "张三";
//全局变量
var sex = "男";
//设置对象属性
obj.name = "李四";
//设置对象的新属性
obj["sex"] = "男";
obj.study = function() {}
var proName = "s'e'x";
obj[proName] = "女";
//删除对象属性
delete obj.sex;
obj = 1;
//转义符
obj = "ab\"\"c";
console.log(obj);
console.log(proName);
method(123);
}
const systemName = "super unversial duck manage system";
//随机数与java类似
console.log(Math.random() * 10);
//方法的变量可以不填，默认值位undefined
var method = function(a, b) {
if (a) {
console.log("这是a----------" + a);
}
console.log("这是b----------" + b);
console.log(arguments);
}
var str = "123";
console.log(typeof str); //typeof obj 返回这个变量的类型的名称 String
num = 123;
console.log(typeof num);//number
js的数组没有下标限制，下标可以是负数
对数组的处理，重点有五个函数
unshift(): 在数组的头部添加元素，其他元素依次后移
shift(): 删除数组头部元素，其他元素依次前移
push(): 在数组尾部添加元素
pop(): 删除数组尾部的元素
splice(): 填入一个参数，删除指定下标位置及其后面的所有元素；填入两个参数，删除指定下标位置的元素及其后面指定的元素个数；填入两个以上参数，删除下标位置删除指定个数，并添加元素
//对数组的处理 5个函数
arr = [1, "123"];
console.log(arr);
arr[8] = 99;
arr[3] = {};
console.log(arr)
//数组添加元素
//从头部添加元素
arr.unshift("头部");
console.log(arr);
//尾部添加
arr.push("尾部");
console.log(arr);
//头部删除
arr.shift();
console.log(arr)
//尾部删除
arr.pop();
console.log(arr);
//删除并插入
arr = [1, 2, 3, 4]
arr.splice(1); //删除下标位置以及其后所有元素
console.log(arr); //[1]
arr = [1, 2, 3, 4]
arr.splice(1, 2); //删除下标位置删除指定个数
console.log(arr);// [1,4]
arr = [1, 2, 3, 4]
arr.splice(1, 0, 33, 77, 55); //删除下标位置删除指定个数，添加元素
console.log(arr);//[1,33,77,55,2,3,4]
1.2 实现抽号器
setInterval(): 周期执行任务
setTimeout(): 延迟执行任务
/* function easymethod(){}
//周期执行
setInterval(easymethod()); */
setInterval(function() {
console.log(Math.random());
}, 300);
//延迟执行
setTimeout(function() {
console.log(Math.random())
}, 1000)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.maxBox {
padding: 4px 6px;
font-size: 16px;
color: #3EAFE0;
}
.clickBtn {
border: 1px solid #3EAFE0;
background-color: #3EAFE0;
color: #FFF;
font-size: 14px;
padding: 4px 6px;
}
.result {
font-size: 80px;
color: #3EAFE0;
font-weight: bold;
padding: 30px;
}
.txt_center {
text-align: center;
}
.exist {
border: 1px solid #EEE;
padding: 20px;
margin: 20px auto;
width: 600px;
min-height: 100px;
text-align: left;
}
.exist span {
display: inline-block;
padding: 2px 10px;
margin: 4px;
border-radius: 3px;
background-color: #3EAFE0;
color: #FFFFFF;
}
.info {
border: 1px solid blue;
color: #000;
font-weight: 500;
padding: 20px;
margin: 20px auto;
width: 600px;
}
</style>
</head>
<body>
<div class="txt_center">
<div class="result">
<span class="" id="result">0</span>
</div>
<input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值！">
<input class="clickBtn" type="button" id="btn" value="抽号">
<div class="exist">
<div>已抽取：</div>
<div id="exist">
<span>23</span>
<span>65</span>
<span>12</span>
</div>
</div>
</div>
<!--练习说明-->
<div class="info">
1、在文本框中输入抽号最大值
<br /> 2、点击按钮，开始抽号，随机生成1~最大值之间的整数
<br /> 3、已经抽取的号码存入一个数组
<br /> 4、为了保证号码的唯一性，每次生成一个号码，跟数组中的已抽取的号码比对
<br /> 5、如果已存在，重新生成号码
<br /> 6、如果不存在，放入数组中保存，并显示出来
<br /> 7、将号码结果放入result中显示出来
<br /> 8、将已经生成的号码（数组）存入exist中显示出来
<br /> 9、给抽号按钮添加一个3s倒计时，倒计时结束前不可点击按钮
</div>
<script>
const result = document.getElementById("result");
const txt = document.getElementById("txt");
const btn = document.getElementById("btn");
const exist = document.getElementById("exist");
const arr = [];
var start = false;
btn.onclick = method;
function method() {
var val = txt.value;
if (!val) {
alert("请输入数字");
} else {
if (!start) {
//初始化
start = true;
txt.setAttribute("readonly", "readonly");
for (var i = 1; i <= val; i++) {
arr[i - 1] = i;
}
exist.innerHTML = "";
} else if (start && arr.length > 0) {
//数字跳动起来
var interval = setInterval(function() {
btn.disabled = true;
var randomIndex = Math.floor((Math.random() * arr.length));
var num = arr[randomIndex];
result.innerHTML = num;
}, 100)
setTimeout(function() {
//清空之前跳动计时显示
clearInterval(interval);
var randomIndex = Math.floor((Math.random() * arr.length));
var num = arr[randomIndex];
result.innerHTML = num;
exist.innerHTML = exist.innerHTML + "<span>" + num + "</span>";
arr.splice(randomIndex, 1);
btn.disabled = false;
}, 800)
} else {
start = false;
txt.removeAttribute("readonly");
txt.value = "";
}
}
/* function easymethod(){
}
//周期执行
setInterval(easymethod()); */
/* setInterval(function() {
console.log(Math.random());
}, 300); */
//延迟执行
setTimeout(function() {
console.log(Math.random())
}, 1000)
}
</script>
</body>
</html>
2. Mysql
2.1 认识Mysql
Mysql是关系型数据库，是管理数据库的工具
命令行登录mysql
mysql -u 用户名 -p 用户密码
查看数据库，创建数据库，删除数据库，退出数据库
show databases;
create database data;
drop database data;
quit；
exit；
2.2 navicat连接mysql
连接成功后，双击建立的连接，结果如下图所示
新建查询，选择对应的表就可以输入sql语句来进行操作了
2.3 有关表的sql语句
注释
1.双横线加空格
2.井号
-- 空格不能省略
#这是一个注释
创建表
-- 表是数据库中存储数据的主题
-- 创建表 表名 t_user user
create table staff(
-- 表中字段
-- 主键 是表中数据唯一的标识 不可重复 PRIMARY KEY
-- auto_increment 在插入数据时，该列的值无需指定，会自动递增
id int auto_increment PRIMARY KEY,
-- varchar(最大长度) 可变字符串类型
-- not null定义该字段不能为空
code varchar(20) not null,
name varchar(20) not null,
-- 数值一共存储10位，其中两位用来存储小数
-- 工资数据类型用decimal
salary decimal(10,2)
)
在起名时(列名，表名)经常会用到一些关键字,可以用着重号(`)声明
create table `table`(
`varchar` varchar(20)
)
修改表 alter
-- 修改表名 rename
ALTER TABLE <原表名> RENAME TO|AS <新表名>
-- 设置表编码 character set
ALTER TABLE <表名> CHARACTER SET <编码格式>
-- 添加列 add
ALTER TABLE <表名> ADD <列名> VARCHAR (20) <约束>
-- 修改列 modify
-- 重新定义列
ALTER TABLE <表名> MODIFY <列名> VARCHAR (20) <约束>
-- 重新放置某列之后
ALTER TABLE <表名> MODIFY <列名> VARCHAR (20) AFTER<列名2>
-- 将某列放在表的第一列
ALTER TABLE <表名> MODIFY <列名> VARCHAR (20) FIRST
-- 修改列名 change
ALTER TABLE <表名> CHANGE <原列名> <新列名> VARCHAR (200)
-- 删除列
ALTER TABLE <表名> DROP COLUMN <列名>;
示例
-- 表是数据库中存储数据的主体
-- 创建表 表名 t_user user
create table staff(
-- 表中字段
-- 主键 是表中数据唯一的标识 不可重复
-- auto_increment 在插入数据时，该列的值可以不指定，会自动递增
id int auto_increment PRIMARY KEY,
-- varchar(最大长度) 可变字符串类型
code varchar(20) not null,
name varchar(20) not null,
-- 数值一共存储10位，其中两位用来存储小数
salary decimal(10,2)
)
-- 重命名表
alter table staff rename to t_staff;
alter table t_staff rename as staff;
-- 设置编码
-- mysql8.0 utf8 mb3 mb4 maxxbyte
-- 不同的字符占用的空间是不一样的
-- 数字,字母，欧洲部分语言字符占一个字节
-- 中东，阿拉伯语言字符占两个字节
-- 中文，韩文，日文，东南亚语言字符占三个字节
alter table staff character set utf8mb3;
-- 添加列
alter table staff add column sex varchar(3);
-- 重新定义列
alter table staff modify sex varchar(20) not null;
-- 定义列的位置
alter table staff modify sex varchar(20) not null after name;
-- 列重命名
alter table staff change sex age int not null;
-- 删除列
alter table staff drop column age;
-- 在起名时(列名，表名)经常会用到一些关键字,可以用着重号声明
create table `table`(
`varchar` varchar(20)
)
删除表
DELETE TABLE <表名>
delete table staff；
er table staff add column sex varchar(3);
– 重新定义列
alter table staff modify sex varchar(20) not null;
– 定义列的位置
alter table staff modify sex varchar(20) not null after name;
– 列重命名
alter table staff change sex age int not null;
– 删除列
alter table staff drop column age;
– 在起名时(列名，表名)经常会用到一些关键字,可以用着重号声明
create table table(
varchar varchar(20)
)
删除表
```mysql
DELETE TABLE <表名>
delete table staff；
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
