1.Java Script
Java Script,简称JS
注意：js的语言在html页面中写在body中，在</body>这个标签的上部写
2.Java Script的基本语法：
1.定义变量：
let a=10;
var b=20;
2.也可以通过let声明对象：
let obj ={};
对象中属性的赋值：
obj.name="张三";
3.定义常量：
var sex="男";
obj.name="李四";
4.定义方法：
function method(){
}
在HTML的body中：如果有一个按钮，在按钮中添加一个onclick属性="方法名()"，用户在点击这个按钮时就可以调用已经定义好的方法
也可以通过var定义方法：
但是通过var定义方法时，只能在定义好的方法后才能调用使用var定义的方法
//这种写法定义函数，只能在这段代码后面调用此方法
var method=function(a,b){
if(a){
console.log(true);
}else{
console.log(false);
}
console.log(a+"-----");
console.log(b+"------");
console.log(arguments);
}上面这种带参的方法调用时，参数列表可以写很多数，但是会按前两个数来当作实参
5.返回参数的类型：
typeof
var str="123";
console.log(typeof str);//typeof obj 返回这个变量的类型
num=123;
console.log(typeof num);//数字都是number类型返回string
返回number（注意：JS中数字都是Number类型）
6.数组：
定义数组时不用定义数据类型，任何类型的数据都可以存入数组中
arr=[13,2,100];
使用中括号[ ]就可以
arr=[13,1];
console.log(arr);
arr[8]=[100];
arr[3]="你好";
arr[4]={};
console.log(arr); 
JS中的数组不会出现下标越界的情况
超出数组原长度的数据数组中空的位置会用null补齐
7.JS中数组的五个函数
5个函数(从头部放，从尾部放，从头部删，从尾部删，从中间添加)
1.从头部添加：unshift
2.从尾部添加：push
3.从头部删除：shift
4.从尾部删除：pop
5.从任意位置删除并插入数据：splice：
arr.splice(1)为删除下标1以及之后的所有元素
arr.splice(1,2)为删除下标1及之后共两个元素
arr.splice(1,1,33,44,55)为删除下标1及之后共一个元素，并插入33，44，55三个元素在下标为1的位置
//从头部添加
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,5];
arr.splice(1);//删除下标位置及其之后的所有元素
console.log(arr);
arr=[1,2,3,4,5];
arr.splice(1,1,33,44,55);//删除下标位置，删除指定个数，添加元素在刚才删除的下标位置上
console.log(arr);8.DOM操作：
DOM：Document Object Model
设计一个div和按钮button
<body>
<div id="box" >tskdsg</div>
<button type="button" id="btn">请点击我</button>
</body>获取dom组件对象：
通过btn.οnclick=clickme;设置，用户点击按钮button时会调用clickme的方法
//获取dom组件对象
var btn=document.getElementById("btn");//通过id属性来获取
btn.onclick=clickme;
document.getElementsByClassName("");//通过class属性来获取
document.getElementsByName("");//通过name属性来获取
document.getElementsByTagName("");//通过标签名来获取
box.innerHTML="这里可以自动识别Html语句";
box.innerText="这里就直接输出文本";
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box" >tskdsg</div>
<button type="button" id="btn">请点击我</button>
<script>
//DOM操作 Document Object Model
function clickme(){
console.log("ok");
let box=document.getElementById("box");
box.innerText="<h1>大家很帅</h1>"
}
//获取dom组件对象
var btn=document.getElementById("btn");
btn.onclick=clickme;
document.getElementsByClassName("");//通过class属性来获取
document.getElementsByName("");//通过name属性来获取
document.getElementsByTagName("");//通过标签名来获取
</script>
</body>
</html>
3.一个网页实例：
下面是这个网页默认时的情况：
<!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 btn=document.getElementById("btn");
const txt=document.getElementById("txt");
const result=document.getElementById("result");
const exist=document.getElementById("exist");
var start=false;
btn.onclick=method;
const arr=[];
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;
}
console.log(arr)
//清空已抽取出来的部分
exist.innerHTML="";
}
//如果是开始状态，并且数组中没有可选元素
//恢复可填入状态
if(start&&arr.length==0){
//输入框清空
txt.value="";
//输入框删除readonly
txt.removeAttribute("readonly");
//状态改为false
start=false;
//结束方法
return;
}
//让数字跳动起来
var interval=setInterval(function(){
let ran=Math.floor(Math.random()*(arr.length));
let num=arr[ran];
result.innerText=num;
},100);
setTimeout(function() {
//清空之前的跳动计时显示
clearInterval(interval);
//如果是开始状态，就开始抽号
//随机下标
let ranIndex=Math.floor(Math.random()*arr.length);
//获取下标位置的内容
let num=arr[ranIndex];
//将内容显示在result中
result.innerText=num;
//然后追加到exist组件中
exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>";
//将该位置的元素删除掉
arr.splice(ranIndex,1);
console.log(arr);
}, 800);
}
}
//定时器1 每过..时间，然后执行
// funtion easymethod(){
// console.log(Math.random());
// }
// setInterval(easymethod,300)
//定时器2,延迟..时间，然后执行
// setTimeout(function() {console.log(Math.random())}, 1000);
</script>
</body>
</html>下面是运行了5项后的内容：
4.MySQL
以下代码都是在Navicat中的查询界面编写的！！！！
MySQL是一门关联型数据库，各个表中的数据是有关联的（同一个数据在多个表中）
1.MySQL中的注释写法：
1.-- 两个-一个空格（空格千万不要缺！！！）
2.#后接注释
2.创建库：
create database easydata；
创建了一个名为easydata的数据库
3.创建表
表是数据库操作中存储数据的主体
create table staff();
注意：staff()中的括号内要声明表中的字段，下面我重新写一下：
create table staff(
-- id是表中数据的主键，是表中数据唯一的标识（不可重复，不可为null）
-- auto_increment 在插入数据时，该列的值可以不指定，自动递增
id int auto_increment PRIMARY KEY,
-- varchar(最大长度) 可变字符串类型
code varchar(20) not null,
name varchar(20) not NULL,
-- 数值一共可以存储10位，其中两位用来存储小数位
salary DECIMAL(10,2)
)id是表中数据的主键，是表中数据的唯一标识（不可重复，不可为null）
auto_increment 是指在插入数据时，该列的值可以不设定，此值会自动递增
primary key 声明该值为主键
varchar是可变（var）字符串（char）类型
not null 可以设定该值不能为空
decimal 为浮点型数据
salary decimal(10,2) 意思为：工资salary一共可以存储10位，其中有2位用来存储小数位
注意：声明数据库中的内容时，要用逗号“，”分隔各个属性
4.重命名表
有两种方式重命名表：
alter table staff rename to t_staff;
alter table t_staff rename as staff;1.rename to
alter table t1 rename to t2;
2.rename as
alter table t2 rename as t1;
5.设置编码
alter table staff character set utf8;-- 设置编码
-- mysql8版本 utf8 mb3 mb4 maxbyte
-- 不同的字符占用的空间是不一样的
-- 数字、字母、欧洲的语言字符 占一个字节
-- 中东，阿拉伯语言 占两个字节
-- 中文，朝鲜文，日文，东南亚地区字符 占三个字节
6.添加列
alter table staff add column sex varchar(2)7.对列的重新定义
alter table staff modify sex varchar(20) not null8.定义列的位置
alter table staff modify sex varchar(20) not null after name9.对列重命名
alter table staff change sex age int not null 10.删除列
alter table staff drop column age;11. 在起名时的特殊情况
-- 在起名时，通常会用到一些常用的关键字 name
create table `table`(
`varchar` varchar(20)
)要加`，即强调符标识关键字
12.删除表
drop table `table`
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
