Javascript和SQL语句基础

最新推荐文章于 2024-05-15 20:43:52 发布

笑着脸酷似*

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量1.7k

点赞数 1

文章标签： javascript 前端开发语言 mysql

本文链接：https://blog.csdn.net/qq_55866862/article/details/124765375

版权

周总结

文章目录

周总结

JavaScript

JavaScript简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

JavaScript组成部分

ECMAScript语法
文档对象模型（DOM Document Object Model）
浏览器对象模型(BOM Browser Object Model)

JavaScript发展史

它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公
司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器
对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名
为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因
此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自
Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系
统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。
两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了
ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript
6（ES6）

JavaScript的使用方式

	 script的type属性可以不写,如果要写的话使用
		type="text/javascript" 
	方式1:js的内部方式	
	<script>
			//单行注释
			/*多行注释*/
			
			//在js常见的函数
			//向浏览器打印内容,类似于Java中的控制台输出语句
			document.write("hello,JavaScript我来了!") ;
			
			//还可以在浏览器中控制台中打印内容
			console.log("hello,JavaScript我来了") ;
			
			//在浏览中弹出一个提示框  
			//window对象是浏览器中顶级对象,可以省略不写!
			//window.alert("helloworld") ;
			//简写为:
			alert("helloworld") ;
	</script> -->
	方式2:外部方式
		 实际开发中(前端开发人员开发使用的!)
		 需要在js文件夹中单独创建一个后缀为.js的文件
		 书写js代码,在当前html页面中将js文件导入即可!
		 
		 导入外部js文件 
			 <script src="js/01.js"></script>

JavaScript中的变量以及数据类型

内部方式

定义变量的注意事项
	1)在js中定义变量,使用var来定义,var可以省略不写(刚开始,建议写上)
	2)javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将前面的变量值覆盖掉
	3)查看js的变量的数据类型,使用一个函数 typeof(变量名)
	4)var可以任意数据类型!
	
js的基本数据类型
	1)无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
	2) 无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
	3)boolean类型                      ----js引擎会自动提升为 Boolean 对象类型
	4)object类型   (创建一个对象 )  ---- js引擎会自动提升为Object对象类型
									在Js中,Object对象代表所有js对象的模板!
	5)undefined类型 :未定义类型 (这种没有意义),因为没有赋值!
	
			var a = 10 ;
			var a = 20 ;
			var b = 3.14 ;
			 c = "hello" ;
			var d = 'A' ; 
			var e = true ;
			var f = false ;
			var g = new Object() ;
			var h ;
			
			
			//在浏览器中输出内容
			document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;
			document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
			document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;
			document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;
			document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;
			document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"<br/>") ;
			document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ;
			document.write("h的值是:"+h+",h的数据类型是:"+typeof(h)+"<br/>") ;

JavaScript中的运算符

Js是弱类型,语法结构不严谨
	true,false在运算的时候都自己默认值 true是1,false是0
	实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!

			算术运算符
				+,-,*,/,%
				++,--
			赋值运算符
				=:基本赋值
				+=,-=,*=,/=,%=
			比较(关系运算符)
				<,<=,>,>=,==,!=
				
			逻辑运算符
				实际开发中:逻辑双与&&,逻辑双或||
			三元(三目)运算符
					(表达式)?执行true的结果:false的结果
		
        <script>
			//算术运算符
			//定义两个变量
                var a = 3 ;
                var b = 4 ;

                document.write((a+b)+"<br/>") ;
                document.write((a-b)+"<br/>") ;
                document.write((a*b)+"<br/>") ;
                document.write((a/b)+"<br/>") ; //Java中是默认取整,js是不会的
                document.write((a%b)+"<br/>") ;
                document.write((a+true)+"<br/>") ;
                document.write((b-false)+"<br/>") ;
                document.write((++a)+"<br/>") ;
                document.write((--a)+"<br/>") ;
                document.write("<hr/>") ;
			
			//赋值运算符
                var c = 20 ; //将20赋值给c这个变量
                c+=10; // 等价于 c = c + 10 ; //将左边的变量和右边的值相加,在赋值给左边变					量c
                document.write("c的值是:"+c) ;
                document.write("<hr/>") ;
			
			//比较(关系运算符)
                var x = 3 ;
                var y = 4 ;
                var z = 5 ;
                document.write((x+y)>=(x+z)) ;
                document.write("<hr/>") ;
                document.write(((x+y)<(x+z))+"<br/>") ;

                document.write(((x+y)<=(x+z))+"<br/>") ;

			//==不能写成=
                document.write((x==y)+"<br/>") ;
                document.write("<hr/>") ;
			
			//逻辑双与&&:有false,则false
			//逻辑双或||:有true,则true
			
			//逻辑双与&&和逻辑双或||和Java的&&和||一样
			//&&:左边的表达式为false,则右边不执行了,具有短路效果
			//||:左边的表达式为true,则右边不执行了,具有短路效果
			//实际开发:这种&&,|| 效率非常高!
                document.write(((x>y) && (x>z))+"<br/>") ;
                document.write(((x>y) && (x<z))+"<br/>") ;
                document.write(((x<y) && (x>z))+"<br/>") ;
                document.write(((x<y) && (x<z))+"<br/>") ;
                document.write("<hr/>") ;
                document.write(((x>y) || (x>z))+"<br/>") ;
                document.write(((x>y) || (x<z))+"<br/>") ;
                document.write(((x<y) || (x>z))+"<br/>") ;
                document.write(((x<y) || (x<z))+"<br/>") ;
                document.write("<hr/>") ;

                var m = 5 ;
                var n = 6 ;
                document.write("m:"+m+",n:"+n+"<br/>") ;
                document.write((((++m)==5) && ((--n)==6))+"<br/>")  ;
                document.write("m:"+m+",n:"+n+"<br/>") ;
                document.write("<hr/>") ;
			
			//(表达式)?执行true的结果:false的结果
                var age = 20 ;
                document.write((age>=18)? "成年人!":"未成年人!") ;
			
			
		 </script>

JavaScript中的流程控制语句

三大类
	1)顺序结构:js代码从上而下依次加载
	2)选择结构
		if结构
			if(表达式){
				语句
			}
						
			if(表达式){
							
			}else{
							
			}
						
			if(表达式1){			
				语句1;				
			}else if(表达式2){			
				语句2 ;
				...
				...
			}else{
				语句n;
			}
                //比较两个数据的最大值
                var a = 10 ;
                var b = 20 ;
                //定义一个结构变量
                var max ;
                //if格式2
                if(a>b){
                    max = a ; 
                }else{
                    max = b;
                }
                document.write("最大值是:"+max+"<br/>") ;
                //选择结构之if格式2 :针对两种情况进行判断
                //实际开发中,if里面一个表达式---true或者false
                //因为js是弱类型语言,
                //1)如果if里面是一个非0的整数,条件是成立的;
                //2)如果是非空字符串,条件成立;
                //3)如果是非null的对象,条件成立的;
                /* if(new Object()){
                    alert("条件成立") ;
                }else{
                    alert("条件不成立")
                } */
		switch结构
			switch(表达式){
			case 可以变量/也可以常量:
					语句1;
					break ;
			...
			...
			default:
					语句n;
					break ;
			}
                //switch语句:判断星期
                /*
                    switch语句的结束条件
                        1)遇见break结束
                        2)程序默认执行到末尾
                    case语句后面没有break,会造成"case穿透现象!"
                    case后面跟Java语言的case语句不一样的地方就是这个case后面可以是变量!
                    而Java中只能是常量!
                */
	3)循环结构		
		for(使用居多),while(其次while),do-while
		//循环
			//for循环
			/*
			 for(初始化语句;条件表达式;控制体语句){
				 循环体语句;
			 }
			*/
		   		//在控制台输出5次"helloworld"
                for(var i = 1 ; i <=5 ; i ++){
                    document.write("helloworld<br/>") ;
                }
                document.write("<hr/>") ;
          /*
			while循环
			初始化语句;
			while(条件表达式){
				循环体语句;
				
				控制体语句;
			}
		  */
              //需求:浏览器中输出5次"我爱高圆圆"
              var x = 1 ;
              while(x<=5){
                  document.write("我爱高圆圆<br/>") ;
                  x++ ;
              }
               document.write("<hr/>") ;
                //do-while
		   /*
			初始化语句;
			do{
				循环体语句;
				控制体语句;
			}while(条件表达式) ;
			和for,while,循环体至少执行一次!
			
		   */
                  //需求:浏览器中输出5次"我爱高圆圆"
                  var j = 7 ;
                  do{
                      document.write("我爱高圆圆<br/>") ;
                      j++ ;
                  }while(j<=5) ;

JavaScript事件编程三要素

1)事件源 ----就是html标签  的单击,双击....

2)编写事件监听器-- 就是编写一个函数	 
        function 函数名称(){

        }
	事件监听器
    		*/function testSerach(){
				//alert("触发了这个点击事件") ;
				
				//需要获取文本输入框的内容  获取的input标签的value属性
				//dom操作:  
				//1)通过特别的方式获取标签对象   最常用的 document.getElementById("id属					性值") ;
				//2)使用标签对象改变标签的属性
				
				//获取id="month"所在的input标签对象
				var inputObject =document.getElementById("month") ;
				//获取到value属性,获取文输入框的内容
				var content = inputObject.value ;
		方式1:if...else if...else
		//js中,数字字符串 在和number进行==,string会自动转换成number
		//方式2:switch语句,利用case穿透
			//case语句后面: string类型数字字符串 无法自动转换为number进行对比
			//js中有一个函数: js提供的 parseInt(数字字符串) ----->number类型
			content = parseInt(content) ;
3)绑定事件监听器-- 就在事件源上加上onxxx属性="函数名称()"

for-in语句

for-in类似于增强for循环
	应用场景:
			1)遍历数组
			2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
for-in语句的格式
		for(var 变量名 in 数组或者对象名称){
			使用变量名;
		}
		
		 for(var i in arr){
			 document.write(arr[i]+"&nbsp;&nbsp;") ;
		 }

在JavaScript如何创建一个数组

方式1:  var 数组对象 = new Array() ;  //不指定长度

方式2: var 数组对象 = new Array(长度) ;//指定长度
		var arr = new Array(2) ;
方式3:静态初始化,
		arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
		简写格式  :var 数组对象名称=  [元素1,元素2,元素3,.....] ;
		在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致!

JavaScript中的函数定义以及调用

定义函数的 格式1	        形式参数列表
		function 函数名称(参数名称1,参数名称2....){
				函数的里面业务逻辑
				直接在这输出document.write("xxx") ;
		}
		格式1调用:
				单独调用
				函数名称(实际参数列表) ;
	
		定义函数,两个数据求和
		格式1的写法:
				function sum(var a, var b ){//不能带var
                function sum( a,  b ){
					var c = a+b ;
					document.write("c:"+c);
				}
			//调用
        		sum(10,20) ; 
格式2:(推荐)
		function 函数名称(参数名称1,参数名称2....){				
				函数的里面的业务逻辑
				return 结果;
		}
		格式2调用:
				赋值调用
				var 最终结果变量 = 函数名称(实际参数列表) ;
				
		格式2的写法
			function sum(a,b){
				var c =a+b ;
				return c;
			}
            function sum(a,b,c){ //a=10,b=15,c=20
					//隐藏一个数组名称:arguments
					//作用:将实际参数绑定给形式参数
					for(var i = 0 ; i< arguments.length;i++){
						document.write(arguments[i]+"&nbsp;&nbsp;<br/>");
					}
					var d = a+b+c ;
					return d ;
				}
				//赋值调用
				var result = sum(10,15,20) ;
				document.write("result:"+result) ;
定义函数的注意事项:
		1)js是弱类型语言,定义函数的时候,参数名称不能携带var
		2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
		3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了	
		4)实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
		实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
		5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

JavaScript内置对象Date

Js内置对象:
		Date日期,String字符串,Array数组,正则表达式对象..
		浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
日期对象的基本使用 :
		dateObj = new Date()
        创建一个日期对象
			var date = new Date() ;
		//输出
		//document.write(date) ;//Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间)  原生Date格式
		//获取年份
			//getYear() :当前的年份与 1900 年之间的差距
			//改用getFullYear()
			//var year = date.getYear() ;
			var year = date.getFullYear() ;
			document.write(year+"年") ;
			
			//获取月份
			//getMonth() :返回一个处于 0 到 11 之间的整数
			var month = date.getMonth()+1 ;
			document.write(month+"月") ;
			
			//月中的日期 getDate( ): 1 到 31 之间的整数
			var monthWithDate = date.getDate() ;
			document.write(monthWithDate+"日&nbsp;&nbsp;") ;
			
			//getHours() 获取小时值
			document.write(date.getHours()+":") ;
			
			//getMinutes():获取分钟值
			document.write(date.getMinutes()+":") ;
			//getSeconds() :getSeconds()
			document.write(date.getSeconds()) ;

inner Text和inner-HTML属性有什么区别

span:行内标签,
			任何标签都有这俩个innerText和innerHTML
			j
			这两个属性代表设置标签的文本内容
			innerHTML可以加入html标签,可以被解析 (推荐)
			innerText只是普通的文本内容,不能够解析html标签,如果加入html标签
			就会原封不动的解析成普通文本!

Dom操作:

1)获取span标签对象 : 通过id属性获取
	var spanObject = document.getElementById("tip") ;
2)通过标签对象改变属性  :innerHTML属性
	spanObject.innerHTML = "<h2>系统时间</h2>" ;
	innerText属性
	spanObject.innerText = "<h2>系统时间</h2>";

网页时钟

<body>
		<h3>当前系统时间是:</h3>
		<span id="spanTip"></span>
	</body>
	<script>
		function generateDate(){
			//1)获取当前系统时间
			//1.1)创建日期对象
			var date = new Date() ;
			//1.2)拼接出来时间字符串
			var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
			+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+
			date.getSeconds() ;
			
			//2)dom(文档对象模型编程)操作: 
			//2.1)获取id="spanTip" 所在的span标签对象
			var span = document.getElementById("spanTip") ;
			//2.2)设置span标签的文本内容
			span.innerHTML ="<h3>"+dateStr+"</h3>"  ;
		}
		
			//3)开启网页定时器
			//setInterval("定时任务()",时间毫秒值):每经过时间毫秒值重复执行这个定时任务..
			//setTimeout("定时任务()",时间毫秒值):经过这个毫秒值之后,执行一次定时任务..
			
			setInterval("generateDate()",1000) ; //每1秒重复执行生成时间的任务
	</script>

JavaScript中DOM操作

JavaScript内置对象

JavaScript的String 对象
    charAt(index):获取指定索引处的字符
    concat(str) :字符串拼接功能
    substring(beginIndex,endIndex):截取,从指定位置开始截取到指定位置接收(不包含endIndex,而是endIndex-1)
    其他功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript内置对象</title>
			<script>
				//在Js中如何创建字符串对象
				//var 对象名 = new String("字符串") ;
				var s1 = new String("hello") ;
				var s2 = new String("hello") ;
				
				document.write((s1==s2)+"<br/>") ; //比较是两个对象的地址值是否相同,false
				
				//js中的valueof()比较的是两个js对象的原始值是否相同
				document.write((s1.valueOf() == s2.valueOf())+"<br/>") ;
				
				document.write("<hr/>") ;
				
				//Js中创建对象String,简写格式就直接 字符串常量赋值给变量
				var s3 = "hello张三" ;
				var s4 = "hello张三" ;
				
				document.write((s3==s4)+"<br/>") ;
				
				document.write("<hr/>") ;
			   
				//常用的方法在js中
				var str = "helloworldJavaEE" ;
				
				//charAt(index):获取指定索引处的字符
				document.write("指定索引处的字符为："+str.charAt(4)+"<br/>") ;
				
				//concat 方法（String）:字符串拼接功能
				document.write("字符串拼接后为："+str.concat("豆三岁")+"<br/>") ;
				
				//fontcolor 方法:给字符串颜色标记 ("参数英文单词或者#xxxxxx")
				document.write("字符串颜色为："+str.fontcolor("greenyellow")+"<br/>") ; 
				
				//substring(start, end):截取功能 跟Java中的String一样
				document.write("截取后的字符串为："+str.substring(5,10)+"<br/>") ;
				
				//split 方法:拆分,分割,获取到的字符串数组
				var str2 = "JavaEE-PhP-Go-R-C-C++" ;
				var strArray = str2.split("-") ;
				
				//遍历 for-in语句
				for(var i in strArray){
					document.write(strArray[i]+"&nbsp;");
				}
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript自定义对象

使用js这种方式如何定义Person对象 ,还需要使用Js创建Person对象;
四种方式
	1)类似于Java中有参构造
	2)类似于Java中的无参构造
	3)使用Object对象(代表所有js对象)
	4)字面值的方式: "Json数据格式"  (后期的重点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript自定义对象</title>
		<script type="text/javascript">
		/* 方式一 */
			function student01(id,name,age){
				this.id = id;
				this.name = name;
				this.age = age;
				this.work = function(workName){
					document.write(this.name + "的工作是：" + workName + "<br />")
				}
			}
			var stu01 = new student01(183010207,"豆三岁",22);
			document.write("学号：" + stu01.id + "，姓名：" + stu01.name + "，年龄：" + stu01.age + "<br />");
			stu01.work("学习");
			
			document.write("<hr />")
		/* 方式二 */
			function student02(){}
			var stu02 = new student02();
			stu02.id = 183010201
			stu02.name = "柠柠融";
			stu02.age = 21
			stu02.live = function(liveStyle){
				document.write(stu02.name + "的生活方式是：" + liveStyle)
			}
			document.write("学号：" + stu02.id + "，姓名：" + stu02.name + "，年龄：" + stu02.age + "<br />");
			stu02.live("睡觉");
			
			document.write("<hr />")
		/* 方式三 */
			var stu03 = new Object();
			stu03.id = 183010202
			stu03.name = "豆小宝贝";
			stu03.age = 18
			stu03.likeWomanPeople = function(lover){
				document.write(stu03.name + "喜欢的人是：" + lover)
			}
			document.write("学号：" + stu03.id + "，姓名：" + stu03.name + "，年龄：" + stu03.age + "<br />");
			stu03.likeWomanPeople("赵大宝贝");
			
			document.write("<hr />")
		/* 方式四 */
			var stu04 = {
				"id" : 183010203,
				"name" : "赵大宝贝",
				"age" : 18,
				"likeManPeople":function(lover){
					document.write(stu04.name + "喜欢的人是：" + lover) ;
				}
			}
			document.write("学号：" + stu04.id + "，姓名：" + stu04.name + "，年龄：" + stu04.age + "<br />");
			stu04.likeManPeople("豆小宝贝");
			
			document.write("<hr />")
		</script>
	</head>
	<body>
		
	</body>
</html>

JavaScript中json的复杂类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json_复杂类型</title>
		<script>
		  //复杂格式  
		   //var 对象名 =   [{},{},{}...]  描述类似数组或者集合
		   var students = 
		   [
			    {"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
				{"name":"王宝强","age":35,"gender":"男","address":"北京市"},
				{"name":"文章","age":32,"gender":"男","address":"渭南市"},
				{"name":"姚笛","age":25,"gender":"女","address":"西安市"}
		   ]  ;
		   //json对象[索引值].key 获取对应value值
			document.write(students[0].address+"<br />") ;
		    document.write(students[1].address+"<br />") ;
			document.write(students[2].address+"<br />") ;
			document.write(students[3].address+"<br />") ;
		   
		   //第三方解析方式:jsonlib,gson,fastJson,Springmvc的jackson这些jar包
		   //后端将List---->json
		   //后端Map----Json
		   //后端实体----Json   {"username":"xx","password":"xxx"}
		  
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript中DOM操作

什么是DOM,核心思想 :获取元素对象(标签对象),改变标签对象属性
    举例:
        img src属性
        input type="text" value属性
        div/span常见的标签都有 innerHTML或者innerText属性
        ....

        推荐的方式: (原生Js)
            使用document的方法来获取标签对象
                document.getElementById("id属性值") ;  推荐
                document.getElementsByClassName("所有的同名的class属性值") 

JavaEE中有一种技术:dom4j ---- dom for java
就是后期处理xml文件读取使用dom4j(基于面向对象编程思想)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过docuement方法获取标签对象</title>
	</head>
	<body>
		<!-- 1)事件源 -->                            <!-- 失去焦点onblur-->
		用户名:<input type="text" id="username" 
		class="cl_username" name="name" 
		placeholder="请输入用户名" onblur="getUserName()" /> <!-- 3)绑定事件监听器-->
	</body>
	<script>
	
			//2)事件监听器:编写一个函数
			function getUserName(){
				//alert("触发了失去焦点事件了") ;
				
				
				//方式1:在标签中给定id属性值,必须唯一 (推荐)
				//document.getElementById("id属性值") 获取标签对象
				var username = document.getElementById("username") ;
				
				//方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表
				//var username = document.getElementsByClassName("cl_username")[0] ;
				
				//方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表
				//var username = document.getElementsByName("name")[0] ;
				
				//方式4:通过标签名称获取标签对象
				//docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表
				//var username = document.getElementsByTagName("input")[0] ;
				
				//标签对象获取value属性:内容可以获取到
				alert(username.value) ;
			}
		
	</script>
</html>

JavaScript常见事件

点击相关的 
	单击事件 (重点)

	双击事件

焦点事件 (重点)
	获取焦点
	失去焦点
选项卡发生变化的事件 (重点)
    select标签 下拉菜单
    	option 下拉选项
    	
鼠标经过事件
鼠标移出事件

页面载入事件 (重点)
	onload:在body中用,表示页面的body内容加载完毕触发的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 单击事件 -->
		<input type="button" name="" id="" value="点击一下" onclick="textButton()"/><br />
		<!-- 双击事件 -->
		<input type="button" name="" id="" value="双击一下" ondblclick="textDBbutton()"/><br />
		<!-- 下拉列表 -->
		<select onchange="testChange()" id="testChangProvince">
			<option value="请选择">请选择</option>
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="广东省">广东省</option>
		</select>
		<select id="city">
			<!-- <option value="城市名称">城市名称</option> -->
		</select>
	</body>
	<script type="text/javascript">
		//单击事件
		function textButton(){
			location.href="text_button点击事件.html";
		}
		//双击事件
		function textDBbutton(){
			location.href="text_button点击事件.html";
		}
		//选项卡事件
		function testChange(){
			var testchangprovince = document.getElementById("testChangProvince").value;
			var city = document.getElementById("city");
			city.innerHTML = "";
			if(testchangprovince == "陕西省"){
				var arr = ["西安市", "咸阳市", "宝鸡市", "延安市", "榆林市", "渭南市", "商洛市", "安康市", "汉中市"];
				for(var i = 0; i < arr.length; i++){
					city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option>";
				}
			}
			if(testchangprovince == "山西省"){
				//太原、大同、朔州、忻州、阳泉、吕梁、晋中、长治、晋城、临汾、运城
				var arr = ["太原市", "大同市", "朔州市", "忻州市", "阳泉市", "吕梁市", "晋中市", "长治市", "晋城市", "临汾市", "运城市"];
				for(var i = 0; i < arr.length; i++){
					city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option>";
				}
			}
			if(testchangprovince == "广东省"){
				//广州、深圳、佛山、东莞、中山、珠海、江门、肇庆、惠州、汕头、潮州、揭阳、汕尾、湛江、茂名、阳江、云浮、韶关、清远、梅州、河源
				var arr = ["广州市", "深圳市", "佛山市", "东莞市", "中山市", "珠海市", "江门市", "肇庆市", "惠州市", "汕头市", "潮州市",
							"揭阳市", "汕尾市", "湛江市", "茂名市", "阳江市", "云浮市", "韶关市", "清远市", "梅州市", "河源市"];
				for(var i = 0; i < arr.length; i++){
					city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option>";
				}
			}
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		<input type="button" value="点我试试" id="btn"  /><br/>
		
		<div id="div1" onmouseover="testMouseOver()" onmouseout="testOut()">
			<img src="img/2.jpg" width="100%" height="100%" />
		</div>
	</body>
	<script>
		//页面载入事件
		function init(){
			document.getElementById("btn").onclick=function(){
				alert("点击事件触发了") ;
			}
		}
		//鼠标移出事件
		function testOut(){
			alert("触发鼠标移出事件") ;
		}
		     
	    function openHtml(){
		    location.href="01.html" ;
	    }
		//鼠标经过事件
	    function testMouseOver(){
		    //setTimeout("任务函数()",毫秒值) ; 经过这个毫秒值之后执行一次任务
		    setTimeout("openHtml()",3000);
	    }
	</script>
</html>

JavaScript正则表达式

正则表达式:js引擎是能够识别这些语法				
    1)数量词相关的语法
        x:代表任意字符
        x+: 表示X字符串出现一次或者多次
        x*:表示X字符出现0次或者多次
        x?:表示X字符出现0次或者1次

    2)范围相关的语法
        X{n}: 表示X字符恰好出现n次
        X{n,}:表示X字符至少出现n次
        X{n,m}:表示X字符至少出现n次,但是不超过m次

    3)匹配字符相关的
        X[a-z] :X字符可以是a-z中任何的一个小写字母字符
        X[0-9] :x字符是一个数字字符
        X[A-Za-z0-9_]:X字符可以是任意的大小字母均可或者数字或者_

正则表达式:有一个函数  test("接收用户输入的文本框的内容字符串")匹配是否成功

创建一个正则规则:var 正则对象名 = /书写正则语法/ ;    不完全匹配 (会出现安全漏洞!)
正则对象名.test(字符串),true,匹配成功,false,失败!

在Java语言中和在javascript中,如果要完全匹配,必须加入边界匹配器

^:以....开头
$:以...结尾

var 正则表达式对象 = /^ 正则语法 $/ ;

//创建正则对象
//var reg = /[0-9]{2}/ ;
var reg = /^[0-9]{2} $/
//创建一个字符串
var str = "asd12mns" ;
if(reg.test(str)){
	alert("条件成立");
}else{
	alert("条件不成立") ;
}

JavaScript表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript的表单校验</title>
		<!-- 
			正则规则:
				用户名:4-14位的数字或者字母(不区分大小写)组成
				密码:6-10位的数字或者英文大小字母组成
				确认密码和密码一致
				邮箱:满足邮箱的格式
					数字或者字母@数字或者字母.com/.cm/.com.cn
						919081924@qq.com
								 @163.com
								 @Istone.com.cn
	 
								 本身字符就是.  需要\. 转义
		 -->
		
	</head>
	<body>
		<!-- 
			form表单一个事件:onsubmit:表单是否你能够提交成功!
			携带的值如果true,能够提交成功
			false,提交失败!
		 -->
		<form action="server.html" method="get" onsubmit=" return checkAll()"> 
			用户名:<input type="text" id="username"  placeholder="请输入用户名" onblur="checkUserName()" /><span id="userTip"></span><br/>
			密&ensp;&ensp;码:<input type="password" id="pwd" placeholder="请输入密码" onblur="checkPwd()" /><span id="pwdTip"></span><br/>
			确认密码:<input type="password" id="repwd" placeholder="两次密码一致" onblur="checkRepwd()" /><span id="repwdTip"></span><br/>
			邮&ensp;&ensp;箱:<input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()" /><span id="emailTip"></span><br/>
			<input type="submit" value="注册" />
		</form>
	</body>
	<script>
		//校验用户名
		function checkUserName(){
			//1)获取 用户名的内容  (id="username"的input标签对象同时获取内容)
			var username = document.getElementById("username").value ;
			//2)定义用户名的正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成
			var reg = /^[A-Za-z0-9]{4,14}$/ ;
			//3)获取 id="userTip"的span标签对象
			var span = document.getElementById("userTip") ;
			//4)正则表达式校验用户名的内容 username
			if(reg.test(username)){
				//成立
				span.innerHTML = "√".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "×".fontcolor("red") ;
				return false ;
			}
			
		}
		
		//校验密码
		function checkPwd(){
			//1)获取密码输入框的内容 dom操作
			var pwd = document.getElementById("pwd").value;
			//2)密码正则:6-10位的数字或者英文大小字母组成
			var reg = /^[A-Za-z0-9]{6,10}$/
			//3)获取id="pwdTip"所在的span标签对象
			var span = document.getElementById("pwdTip") ;
			
			//4)正则校验
			if(reg.test(pwd)){
				//成立
				span.innerHTML = "密码格式满足".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "不符合格式".fontcolor("red") ;
				return false ;
			}
		}
		
		//校验确认密码
		function checkRepwd(){
			//1)获取密码框的内容
			var pwd = document.getElementById("pwd").value;
			//2)获取当前确认密码框的内容
			var repwd = document.getElementById("repwd").value ;
			//3)获取id="repwdTip" 所在的span标签对象
			var span = document.getElementById("repwdTip") ;
			//4)判断
			if(pwd == repwd){
				//成立
				span.innerHTML = "两次密码一致".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "两次密码不一致".fontcolor("red") ;
				return false ;
			}
		}
		
		//校验邮箱
		function checkEmail(){
			//1)获取邮箱的内容
			var email = document.getElementById("email").value ;
			//2) 邮箱的正则:数字或者字母@数字或者字母.com/.cn/.com.cn
			var reg  = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/
			//3)获取id="emailTip"的span标签对象
			var span = document.getElementById("emailTip") ;
			//4)校验
			if(reg.test(email)){
				//成立
				span.innerHTML="邮箱格式正确".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML="不满足格式,重新输入".fontcolor("red") ;
				return false ;
			}
		}
        
		//将所有的表单项的都满足条件,才能提交
		function checkAll(){
			if(checkUserName() && checkPwd() && checkRepwd() && checkEmail()){
				return true ;
			}else{
				return false ;
			}
		}
	</script>

Mysql数据库

1.数据库的简介,以及市面上常见的数据库

简介

1) 存储数据的仓库
2) 本质上是一个文件系统，还是以文件的方式存在服务器的电脑上的。
3) 所有的关系型数据库都可以使用通用的 SQL 语句进行管理 DBMS DataBase Management System

之前怎么存储数据?
	1)定义变量,类似局部变量,随着方法调用而结束;
	2)容器存储:
			数组--->查询快,增删慢
			集合--->单列集合Collection/双列集合Map
					长度可变,
							List<Student>
			字符串缓冲区:StringBuffer/StringBuilder  
						最终可能需要将字符串缓冲区类型---String
						
   3)IO流
   		Input
   		Output  
   			可以将内容存储磁盘上 文件中 (读写复制---很耗时)
	
   4)数据库来存储数据
   		  执行效率高
   		  底层有树结构在里面
   		  数据库支持 "事务",来解决 业务中存在问题  "转账操作"!
   		  即使关机了,数据永久保存!

数据库的分类

关系型数据库

书写sql语句  (Structure Query Language:结构化查询语言)
		oracle  :收费  大型公司企业居多(西安银行,汇丰,神州数码...)
					买数据库,买oracle第三方服务...
mysql   :免费  中小型公司使用居多
		sqlserver:跟.net平台兼容性比较好一些
		sqllite: 轻量级的关系数据库,嵌入式里面居多
		mariaDB:跟mysql同级别的

非关系型数据库

NoSQL数据库
		键值(Key-Value)存储数据库 : redis 做数据缓存------ 分布式系统架构 使用redis 分布式缓存
		文档类型数据库:
					MongoDb
分布式缓存
		文档类型数据库:
					MongoDb

2. Mysql数据库—安装Mysql-Server 服务器端(windows)

MySQL安装教程

3.现在dos窗口中使用—客户端登录Mysql

安装mysql之后
 1)方式登录 dos窗口登录
 2)方式登录 mysql自带的客户端登录
 
 
 C:\Users\Administrator>mysql -uroot -p
Enter password: ******
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 19
Server version: 5.5.40 MySQL Community Server (GPL)

Copyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

4.DDL语句: 数据库操作语句

数据库的DDL语句(数据库的定义语句)之库的操作

-- :普通注释 当行注释
/* mysql的多行注释*/
#特殊注释
-- 查询当前mysql中自带的所有库有哪些
库在我们电脑磁盘上----> 文件夹
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |   mysql的默认配置库
| mysql              |   有user表 (管理员用户表) :root用户就在这个库中
| performance_schema |   mysql其他库(性能相关)
| test               |   测试库,但是不用它,自己创建新的库
+--------------------+
4 rows in set (0.00 sec)

-- 创建库
-- create database 库名;
mysql> create database myEE_2203 ;
Query OK, 1 row affected (0.00 sec)
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| myee_2203          |
| mysql              |
| performance_schema |
| test               |
+--------------------+
5 rows in set (0.00 sec)


-- create database if not exists 库名;
mysql> create database if not exists  ee2203;
Query OK, 1 row affected (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| ee2203             |
| myee_2203          |
| mysql              |
| performance_schema |
| test               |
+--------------------+
6 rows in set (0.00 sec)


-- 查询创建库的字符集
-- show create database  库名;
mysql> show create database myee_2203;
+-----------+--------------------------------------------------------------------+
| Database  | Create Database                                                    |
+-----------+--------------------------------------------------------------------+
| myee_2203 | CREATE DATABASE `myee_2203` /*!40100 DEFAULT CHARACTER SET utf8 */ |
+-----------+--------------------------------------------------------------------+
1 row in set (0.00 sec)

-- 修改库的字符集
-- alter database 库名 default character set 字符集名称;
mysql> alter database myee_2203 default character set gbk;
Query OK, 1 row affected (0.00 sec)
mysql> show create database myee_2203;
+-----------+-------------------------------------------------------------------+
| Database  | Create Database                                                   |
+-----------+-------------------------------------------------------------------+
| myee_2203 | CREATE DATABASE `myee_2203` /*!40100 DEFAULT CHARACTER SET gbk */ |
+-----------+-------------------------------------------------------------------+
1 row in set (0.00 sec)

-- 删除库
-- drop database 库名 ;
mysql> drop database ee2203;
Query OK, 0 rows affected (0.01 sec)
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| myee_2203          |
| mysql              |
| performance_schema |
| test               |
+--------------------+

-- drop database if exists 库名 ; 如果存在这个库删除
mysql> drop database if exists myee_2203;
Query OK, 0 rows affected (0.00 sec)
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| test               |
+--------------------+
4 rows in set (0.00 sec)

数据库DDL语句(数据库定义语句)之建表,修改表,查询表,删除表…

mysql常见的数据类型
     int :整数类型 默认最大长度11位字符,给int类型的数据的时候,当前存储的是值的真实长度
     	举例
     			年龄字段age  int类型
     			
     int(字符数):  整数类型, 	给int(3)这个值的时候,实际存储3位,但是赋值的时候不够3位  (使用很少)
     				id字段 1-----int(3) -------------------001
     				
     varchar(最大支持255个长度): 	字符串类型 
     		指定varchar(指定长度)
     date:仅仅是日期类型
     datetime:日期+时间类型 
     timestap:时间戳 (举例:管理员添加一个商品,商品上架的时间:当前系统瞬时时间 :2021-5-11 16:50分)
     double:小数类型 
     	double(几位数,小数点后保留的位数)
     	
     	举例:
     			double(4,2): 4位,小数点后保留2位
     clob:大字符类型  
     		支持 "大文本"
     blob:大字节类型
     		 最大支持4G
-- 建表之前,必须使用哪个库
-- use 库名;
mysql> use ee_2203;
Database changed
mysql>
/*
  create table 表名(
  		字段名称1 字段类型1,
  		字段名称2 字段类型2,
  		...
  		...
  		字段名称n 字段类型n
  ) ;

*/
mysql> create table student(
    -> id int,
    -> name varchar(10),
    -> age int,
    -> gender varchar(2),
    -> address varchar(50),
    -> socre double(3,1)
    -> );
    Query OK, 0 rows affected (0.02 sec)
    
-- 查询当前库中有哪些表
-- show tables ;
mysql> show tables ;
+-------------------+
| Tables_in_ee_2203 |
+-------------------+
| student           |
+-------------------+
1 row in set (0.00 sec)

mysql>

-- 查看表的结构 
-- desc 表名;
mysql> desc student;
+---------+-------------+------+-----+---------+-------+
| Field   | Type        | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| id      | int(11)     | YES  |     | NULL    |       |
| name    | varchar(10) | YES  |     | NULL    |       |
| age     | int(11)     | YES  |     | NULL    |       |
| gender  | varchar(2)  | YES  |     | NULL    |       |
| address | varchar(50) | YES  |     | NULL    |       |
| socre   | double(3,1) | YES  |     | NULL    |       |
+---------+-------------+------+-----+---------+-------+
6 rows in set (0.01 sec)

-- 修改表的字段名称 
-- alter table 表名 change  旧字段名称 新的字段名称 以前的字段数据类型;

mysql> alter table student change gender sex varchar(2) ;
Query OK, 0 rows affected (0.03 sec)
Records: 0  Duplicates: 0  Warnings: 0
mysql> desc student;
+---------+-------------+------+-----+---------+-------+
| Field   | Type        | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| id      | int(11)     | YES  |     | NULL    |       |
| name    | varchar(10) | YES  |     | NULL    |       |
| age     | int(11)     | YES  |     | NULL    |       |
| sex     | varchar(2)  | YES  |     | NULL    |       |
| address | varchar(50) | YES  |     | NULL    |       |
| socre   | double(3,1) | YES  |     | NULL    |       |
+---------+-------------+------+-----+---------+-------+
6 rows in set (0.01 sec)

-- 修改表的字段类型 modify
-- alter table 表名 modify 字段名称 新的字段类型 ;
mysql> alter table student modify address varchar(100) ;
Query OK, 0 rows affected (0.03 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> desc student;
+---------+--------------+------+-----+---------+-------+
| Field   | Type         | Null | Key | Default | Extra |
+---------+--------------+------+-----+---------+-------+
| id      | int(11)      | YES  |     | NULL    |       |
| name    | varchar(10)  | YES  |     | NULL    |       |
| age     | int(11)      | YES  |     | NULL    |       |
| sex     | varchar(2)   | YES  |     | NULL    |       |
| address | varchar(100) | YES  |     | NULL    |       |
| socre   | double(3,1)  | YES  |     | NULL    |       |
+---------+--------------+------+-----+---------+-------+
6 rows in set (0.01 sec)

-- 修改表:给表中添加一个新的字段
-- alter table 表名 add 字段名称 字段类型;
mysql> alter table student add description varchar(200) ;
Query OK, 0 rows affected (0.04 sec)
Records: 0  Duplicates: 0  Warnings: 0

-- 复制一张表
-- create table  新表名  like 旧表名;
mysql> create table teachear like student ;
Query OK, 0 rows affected (0.02 sec)

mysql> show tables;
+-------------------+
| Tables_in_ee_2203 |
+-------------------+
| student           |
| teachear          |
+-------------------+
2 rows in set (0.00 sec)

-- 删除表
-- drop table 表名;
-- drop table if exists 表名;
mysql> drop table if exists teachear;
Query OK, 0 rows affected (0.01 sec)

mysql> show tables;
+-------------------+
| Tables_in_ee_2203 |
+-------------------+
| student           |
+-------------------+
1 row in set (0.00 sec)

5.DML数据:数据库操作语句 :操作表的记录

-- 查询这个库中有哪些表
SHOW TABLES ;

-- 创建一张新的表学生表,id,姓名,年龄,性别,住址
CREATE TABLE student(
    id INT ,  -- 学号
    NAME VARCHAR(10), -- 姓名
    age INT,  -- 年龄
    gender VARCHAR(5), -- 性别
    address VARCHAR(50) -- 住址
) ;

-- 查询学生的表的结构
DESC student ;

插入数据

-- 给学生表中插入数据 
--  插入数据的语法1:insert into 表名 values(值1,值2,值3,值4...值n); 插入全部数据
INSERT INTO student VALUES(1,'高圆圆',42,'女','西安市') ;

-- 插入表的数据支持 :一次插入多条数据
-- insert into 表名 values(值1,值2,值3,值4...值n),(值1,值2,值3,值4...值n),(值1,值2,值3,值4...值n);
INSERT INTO student VALUES(2,'文章',35,'男','咸阳市'),
(3,'马伊琍',40,'女','上海市'),(4,'马保国',56,'男','宝鸡市') ;

-- 语法2:插入部分字段,没有插入的字段,默认值就是null, 也支持一次性插入多条数据
-- insert into 表名(字段名称1,字段名称2....) values(值1,值2...) ;
INSERT INTO student(id,NAME,age,gender) VALUES(5,'王宝强',35,'男') ;
INSERT INTO student(id,NAME,age,gender) VALUES(6,'张三丰',60,'男'),(7,'令狐冲',38,'男') ;

/*
注意事项:
	1)插入的这些值必须要和表中的字段对应上; 先后顺序保证一致!
	2)目前没有加入"数据库约束",可以插入非法数据,举例:id重复 ,
	后期需要使用数据库约束来限定用户的操作表的行为!
*/
-- 插入一个学生id为7的
INSERT INTO student VALUES(7,'张佳宁',32,'女','西安市') ;

修改数据

--  一般实际开发中修改:都是带条件修改  (推荐)
-- update 表名 set 字段名称 = 值 where 条件 ;

-- 需求:将name为张佳宁的学生id改为8
UPDATE student SET id = 8 WHERE NAME = '张佳宁' ;

-- 需求: 修改id为6的学生的姓名为 '姚笛' (id字段在实际开发中:都是非业务字段,以后唯一的)
UPDATE student SET NAME = '姚笛' WHERE id =  6 ;


-- 语法2:一次性修改多个字段
-- update 表名 set 字段名称1 = 值 ,字段名称2 =值2.... where 条件;

-- 需求:将id为6的学生 的年龄改为25,性别改为女,地址改为上海
UPDATE student SET age = 25,gender ='女',address='上海市' WHERE id = 6 ;


-- 语法3:不带条件 属于批量修改 (部分场景可以用的)
-- update 表名 set 字段名称= 值,字段名称2 =值2....
UPDATE student SET address = '鄠邑区' ;

删除数据

-- delete  from 表名 where 条件 ; 带条件删除记录 (使用的非业务字段id删除)
-- 需求:删除id为7的学生信息
DELETE FROM student WHERE id = 7 ;

-- delete from 表名 :删除全表数据
DELETE FROM student ;


-- truncate table 表名; 删除全表数据
TRUNCATE TABLE student;

/*
   面试题:
      delete from 表名 和 truncate table 表名 :两个区别?
      共同点:都是可以删除全表的记录的;
      不同点:
		delete from 表名 ; 仅仅只是将表的全部记录删除了,表还在!
它针对id(非业务字段:设置主键并且自增长),它不影响自增长主键的这个值; (数据库约束后面讲)
		truncat table 表名; 将表所有数据删除,而且还会把删除之后,
		自动创建一个张一模一样的表,影响自增主键的值!
*/

DROP TABLE student ;
SHOW TABLES ;
-- 创建一个学生表,id 加入主键(非空且唯一)和自增长(不断的自增1)约束
CREATE TABLE student(
	id INT PRIMARY KEY AUTO_INCREMENT , -- id主键并且自增长
	NAME VARCHAR(20),-- 姓名
	age INT 
);
-- 一次插入4条
INSERT INTO student(NAME,age) VALUES('高圆圆',42),('张佳宁',32),('文章',35),('王宝强',38) ;

-- 自增长的id可以自己给个值
INSERT INTO student  VALUES(15,'高圆圆2',42);
INSERT INTO student(NAME,age) VALUES('姚笛',35) ;

6DQL语句:(数据库查询语句)

-- DQL语句最通用的语法:查询表的全部数据
-- -- * 代表所有字段,仅仅是自己玩的时候可以用,实际开发中不能用*,需要写上全部的字段名称
SELECT * FROM student ; 




CREATE TABLE student3 ( 
	 id INT, -- 编号
	 NAME VARCHAR(20), -- 姓名
	 age INT, -- 年龄 
	 sex VARCHAR(5), -- 性别 
	 address VARCHAR(100), -- 地址 
	 math INT, -- 数学
	 english INT -- 英语
  );
 INSERT INTO student3(id,NAME,age,sex,address,math,english) 
 VALUES (1,'马云',55,'男',' 杭州',66,78),
 (2,'马化腾',45,'女','深圳',98,87),
 (3,'马景涛',55,'男','香港',56,77),
 (4,'柳岩 ',20,'女','湖南',76,65),
 (5,'柳青',20,'男','湖南',86,NULL),
 (6,'刘德华',57,'男','香港 ',99,99),
(7,'马德',22,'女','香港',99,99),
(8,'德玛西亚',18,'男','南京',56,65);

1)最基本的查询语句 select

-- 查询全表数据:select * from 表名;
SELECT * FROM student3 ;
-- 实际开发中查询全部字段,把字段名称全部写上
SELECT 
	id,
	NAME,
	age,
	sex,
	address,
	math,
	english

FROM 
	student3;
	
-- 查询全部字段的时候,给字段起一个别名  as '别名名称' ,as省略
SELECT 
  id AS '编号',
  NAME AS '姓名',
  age AS '年龄',
  sex AS '性别',
  address AS '地址',
  math AS '数学成绩',
  english AS '英语成绩' 
FROM
  student3 ;
-- as 可以省略的

SELECT 
  id  '编号',
  NAME  '姓名',
  age  '年龄',
  sex  '性别',
  address  '地址',
  math  '数学成绩',
  english  '英语成绩' 
FROM
  student3 ;
 -- 当表的名称比较长的时候,可以给表名起一个别名;
SELECT 
  s.`id` '学生编号',
  s.`name` '学生姓名',
  s.`age` '学生年龄',
  s.`sex` '学生性别',
  s.`address` '学生地址',
  s.`math` '数学成绩',
  s.`english` '英语成绩' 
FROM
  student3 s ;-- 起了一个别名s 
    
  -- 可以查询部分字段
 -- 需求:查询学生的姓名以及数学和英语成绩
 SELECT 
	NAME '姓名',
	math '数学成绩',
	english '英语成绩'
 FROM
     student3 ;
-- 需求:查询学生的地址信息
SELECT 

	address

FROM 
	student3;
-- 发现:字段冗余(重复度大) 字段去重      DISTINCT 后面跟上字段名称  
SELECT  DISTINCT address FROM student3;

2DQL语句之条件查询 where 关键字

 -- 2.1)使用 赋值运算符=,比较运算符 <,<=,>=,>,!=,   mysql中的不等于 <>
 -- 2.2)Java中逻辑运算符:&&,||  mysql推荐使用 and , or
 -- 2.2)针对两个范围查询: 可以使用&&,可以使用and, 也可以 "字段名称 between 值1 and 值2"
 -- 需求:查询年龄大于20岁的学生所有信息     
SELECT
	 *
FROM
	student3 
	
WHERE  
	age > 20 ;

-- 需求:查询年龄在20到30之间的学生的姓名,年龄,住址 ,数学和英语成绩信息

SELECT 
  NAME '姓名',
  age '年龄',
  address '住址',
  math '数学成绩',
  english '英语成绩' 
FROM
  student3 
WHERE age >= 20 && age <= 30 ; -- && 逻辑双与

-- mysql中使用and 并列关系
SELECT 
  NAME '姓名',
  age '年龄',
  address '住址',
  math '数学成绩',
  english '英语成绩' 
FROM
  student3 
WHERE age >= 20 AND age <= 30 ; -- and 连接


-- 使用的between 值1 and 值2
SELECT
    NAME '姓名',
    age '年龄',
    address '住址',
    math '数学成绩',
    english '英语成绩' 
FROM
    student3 
WHERE 
	age BETWEEN 20  AND 30 ;

-- 需求:查询年龄是20岁学生的所有信息
SELECT  * FROM student3 WHERE age = 20 ;

-- 需求:查询年龄不是20岁的学生的所有信息
SELECT * FROM student3 WHERE age != 20 ; -- != Java中 的用法

SELECT * FROM student3 WHERE age <> 20 ;-- mysql中的不等于 <>


-- 需求:查询年龄是18岁或者是20或者是45岁的学生的所有信息
SELECT 
	* 
FROM 
	student3
WHERE 
	age = 18 || age =20 || age = 45 ;-- Java中逻辑双或||
	
	
SELECT 
	* 
FROM 
	student3
WHERE 
	age = 18 OR age =20 OR age = 45 ; -- Mysql中的or这个表示 或(并集)

-- 上面这个格式优化为 in(值1,值2,值3..值n) ;in集合语句	
	
SELECT  
    *
FROM
    student3
WHERE 
	age IN(18,20,45) ;
	
	
-- Java语言中:去判断某个条件的内容为null ,mysql语言不支持这个格式 ==null
-- 需求:查询学生的英语成绩为null的学生所有信息
-- select * from student3 where english == null ;
-- mysql中判断某个字段为null,使用的语法是 is null 
-- 判断某个字段不为null,使用的语法是 is not null

SELECT * FROM student3 WHERE english IS NULL ;
-- 需求:查询学生的英语成绩不为null的学生的所有信息
SELECT * FROM student3 WHERE english IS NOT NULL ;	



-- 关于int类型字段求和的时候,注意: int类型的值 + null 值 = null;

-- 查询学生的姓名以及英语和数学总分
SELECT  
    NAME '姓名',
    (math+english) '总分'
FROM
    student3 ;
-- 上面这种情况:不太友好,数学成绩有值,但是结果求和是null
-- mysql提供函数 ifnull(字段名称,值);  如果字段名称是null,给一个默认值
SELECT  
    NAME '姓名',
    (math+IFNULL(english,0)) '总分'
FROM
    student3 ;
    
SHOW VARIABLES LIKE '%character%' ;

3)DQL语句之 where条件后面加入模糊查询 —关键字 like

-- select 字段列表 from 表名 where 字段名称 like '%xxx%' ;
-- %:代表任何多个字符或者某个字符   (使用居多):网站门户系统---"搜索商品" ,模糊搜索
-- _:代表某个单个字符

-- 需求:查询所有姓马的学生信息

SELECT
    *
FROM
    student3
WHERE 
    NAME LIKE   '%马%'
    
-- 查询学生姓名三个字符并且第二个字符是化的人
SELECT 
    *
FROM 	
     student3
WHERE 
     NAME  LIKE '_化_' ;
     
-- 查询姓名为三个字符的学生信息
SELECT 
    *
FROM 
	student3
WHERE 
	NAME LIKE '___' ;

4)聚合函数查询

针对int类型:
		单行单列数据
-- select  聚合函数 from 表名 where 还可以指定条件;

-- count(字段名称):查询表中记录 ,字段名称使用都是id,非业务字段
-- avg(字段名称): 查询这个字段中平均值 
-- sum(字段列表):求和函数
-- max(字段名称):最大值
-- min(字段名称):最小值

-- 需求:查询表的总记录数
-- select count(english) '总记录数' from student3; -- 前提条件使用业务字段查询,不能有null值
-- select count(ifnull(english,0)) '总记录数' from student3; 
SELECT COUNT(id) '总条数' FROM student3 ;
-- 查询数学平均分 avg(字段名称)
SELECT AVG(math) '数学平均分' FROM student3;
-- 数学和英语成绩求和的学生信息(姓名,和总分)
SELECT  
	SUM(math+IFNULL(english,0)) '总分'
FROM
        student3;
-- max()和min()
SELECT MAX(math) '数学最高分' FROM student3 ;


-- select语句嵌套select语句 --- 子查询
-- 需求:查询出学生数学成绩大于 数学平均分的学生所有信息;
-- 使用where 条件 后面带上 比较运算符...

--  Java中
-- int x =10,y ;
-- y = y+x ; 将10代入

-- 1)查询数学平均分是多少
SELECT AVG(math) FROM student3; -- 79.5000
-- 2)查询大于数学平均分的学生信息
SELECT 
	*
FROM 
	student3
WHERE 
	math > 79.5000;
	
-- 一步走
SELECT 
	*
FROM 
	student3
WHERE 
	math >  (SELECT AVG(math) FROM student3) ;
	
-- 查询数学成绩最高分的学生的姓名,年龄,地址以及数学成绩;
-- 1)查询最高分是多少
SELECT  MAX(math) FROM student3; -- 99
-- 2)查询最高分是这个成绩的学生信息
SELECT 
    NAME '姓名',
    age '年龄',
    address '地址',
    math '数学成绩'
FROM 
    student3 
 WHERE 
	math = 99 ;


-- 一步走
SELECT 
    NAME '姓名',
    age '年龄',
    address '地址',
    math '数学成绩'
FROM 
    student3 
 WHERE 
	math = 
	(SELECT  MAX(math) FROM student3) ;

5)DQL之排序查询 order by

 select 字段列表 from 表名 order by 字段名称 排序规则(asc(默认值就是升序)或者desc 降序)

UPDATE student3 SET english = 88  WHERE id = 5 ;
UPDATE student3 SET english = 94 WHERE id = 6 ;

-- 需求:按照数学成绩升序排序 单个字段
SELECT 
   *
FROM 
    student3
ORDER BY 
	math ASC ; -- 默认不写排序规则,就是asc 升序

-- 同时条件和order by,order by在where的后面
-- 需求:数学成绩大于56分的学生进行数学的降序排序
SELECT
   NAME ,
   math
FROM
    student3 
WHERE  math > 56    -- 先满足条件,才能排序!where 必须order by之前
ORDER BY math DESC ;

-- 多个字段要同时排序,首先第一个字段排序规则,然后才是第二个字段
-- 需求:数学成绩降序,英语成绩升序排序
SELECT 
    *
 FROM 
    student3 
 ORDER BY 
	math DESC , english ASC ;

SELECT * FROM student3 ;

6)DQL语句之分组查询:group by

-- select 字段列表 from 表名  group by 分组字段名称;

-- 注意事项:  1)查询的字段列表中可以使用 分组字段
     --       2)group by之后不能使用聚合函数

-- 需求:按照性别分组,查询出他们的数学成绩的平均分
SELECT  
     sex '性别', -- 查询的分组字段
     AVG(math) '数学平均分' -- 查询每一个组的数学平均分
FROM
	student3 
GROUP BY 
	sex ;
	
-- 带条件分组查询的语法:  where 条件 必须放在group by 之前,否则语法错误!
-- select 字段列表包含分组字段,聚合函数.. from 表名 where 条件  group by 分组字段;

-- 需求:按照性别分组,查询出他们的数学成绩的平均分,数学成绩大于70分的参与分组

 SELECT
     sex '性别',
     AVG(math) '数学平局分'
 FROM

	student3

WHERE 
	math > 70    -- 先满足条件,然后才能分组;

GROUP BY 	
	sex   ;

7)筛选查询 having

-- where条件,group by,having  必须先有条件,分组,然后才筛选!
-- 注意:筛选的后面可以使用聚合函数,group by的后面是不能使用聚合函数的
-- 需求:按照性别分组,查询数学平局分,条件:数学成绩大于70的人参与分组, 筛选出人数大于2的这一组
SELECT 
     sex  '性别',
     COUNT(id) '总人数',
     AVG(math) '数学平均分'
     
FROM
    student3	
WHERE 
	math > 70
GROUP BY 
	sex 
HAVING      -- 后面可以使用聚合函数
	COUNT(id) > 2 ;
	
-- 优化为
SELECT 
     sex  '性别',
     COUNT(id) 人数,
     AVG(math) '数学平均分'
     
FROM
    student3	
WHERE 
	math > 70
GROUP BY 
	sex 
HAVING      -- 后面可以使用聚合函数
	人数 > 2 ;

8)分页查询 limit

-- select 字段列表 from 表名   limit 起始行数,每页显示的条数;
	
-- 起始行数:从0开始算的,    
-- 起始行数 = (当前页码-1)*每页显示的条数
-- 前提条件:每页显示2条, 
-- 第一页数据
SELECT * FROM student3   LIMIT 0,2;

-- 第二页数据
SELECT * FROM student3 LIMIT 2,2 ;

-- 第三页数据
SELECT * FROM student3 LIMIT 4,2 ;

-- 第四页数据
SELECT * FROM student3 LIMIT 6,2 ;

-- 第五页数据
SELECT * FROM student3 LIMIT 8,2;

-- 第六页数据
SELECT * FROM student3 LIMIT 10,2;

-- 第七页数据

SELECT * FROM student3 LIMIT 12,2;

7数据库的备份和还原

-- 插入4条数据
INSERT INTO student3 VALUES
(10,'张佳宁',32,'女','咸阳市',97,100),
(11,'文章',22,'男','渭南市',90,88),
(12,'盲僧',20,'男','宝鸡市',87,96),
(13,'ez',18,'男','艾欧尼亚',67,77);

方式1:图形界面化工具

备份:选中库名,右键----->BACKUP/Export 备份导出---->
			选中Sql脚本,存储到本地某个磁盘上----->StructureAndData:表的结构和数据都需要备份
			
*/
/*
还原:先在SqlYog将myee_2203删除了,新建库右键---->Import 导入---->选中执行execute sql 脚本

方式2：数据库的备份和还原命令

备份:
		以管理员身份进入dos,不需要登录mysql
						  保存到指定路径上
		mysqldump -uroot -p你的密码  库名 >  磁盘上的路径xx\xx\xx.sql
还原: 
		进入dos控制台,登录mysql
        先将库删除,新建一个库
        使用这个库 use库名;

        加载指定路径的sql脚本
        source 备份的sql脚本路径(D:\EE_2203\day9\code\mysql_01.sql)

8数据库的约束

概念:限制用户操作数据库的一种行为(非法行为)
-- 直接插入null值或者某个非业务字段id一直在重复
-- 创建一张表stu表
CREATE TABLE stu(
	id INT,
	NAME VARCHAR(20),
	gender VARCHAR(3) DEFAULT '男'    -- 加入默认约束

);
INSERT INTO stu VALUES(1,'高圆圆','女'),(2,'文章','男') ;
INSERT INTO stu(id,NAME) VALUES(3,'王宝强') ;

-- 上面gender字段没有插入数据,默认就是null,空值(没有意义)

1)默认约束 default :如果某个字段没有插入数据,那么默认约束起作用了

DROP TABLE stu ;

-- 通过sql语句将默认约束去掉
ALTER TABLE stu MODIFY gender VARCHAR(3) ;
INSERT INTO stu(id,NAME) VALUES(4,'赵又廷') ;

-- 通过sql语句给gender字段加上默认约束
ALTER TABLE stu MODIFY gender VARCHAR(3) DEFAULT '男' ;
DELETE FROM stu WHERE id = 4;

2)非空约束 not null,当前这个字段值不能为null

CREATE TABLE stu(
   id INT, -- 编号
   NAME VARCHAR(20), -- 姓名
   age INT, -- 年龄
   address  VARCHAR(50) NOT NULL-- 地址 ,加入非空约束
) ;
INSERT INTO stu VALUES(1,'高圆圆',42,'西安市'),(2,'赵又廷',45,'北京市') ;

-- 地址插入一个null值
INSERT INTO stu VALUES(3,'张佳宁',32,NULL) ;  -- 这种直接插入null也属于非法行为
-- 当address字段设置not null约束,直接限定用户不能插入null值
-- Column 'address' cannot be null

-- insert into stu(id,name,age) values(3,'张佳宁',32) ; 'address' doesn't have a default value:地址没有默认值

-- 通过sql语句将非空约束去掉--修改表的类型
ALTER TABLE stu MODIFY address VARCHAR(50) ;
DELETE FROM stu WHERE id = 3;

-- 通过sql语句将非空约束加上
ALTER TABLE stu MODIFY address VARCHAR(50) NOT NULL  ;

DROP TABLE stu ;

3)唯一约束unique (属于一种index :索引)

CREATE TABLE stu(
	id INT , -- 编号
	NAME VARCHAR(20), -- 姓名
	phone_number VARCHAR(11) UNIQUE -- 电话号码 必须设置唯一的
) ;
INSERT INTO stu VALUES(1,'高圆圆','13388886666'),(2,'张三','13255559999') ;
INSERT INTO stu VALUES(3,'张佳宁','13388886666') ;-- 重复值 Duplicate entry '13388886666' for key 'phone_number'

-- 通过sql语句将唯一约束删除

-- alter table stu modify phone_number varchar(11) ; -- 修改表的字段类型
-- 删除唯一约束的语法:atler table 表名 drop index  索引的字段名称(就当前类的字段名称一致的) ;
ALTER TABLE stu DROP INDEX phone_number ;

-- 删除id为3的数据
DELETE FROM stu WHERE id = 3 ;

-- 通过sql语句添加唯一约束,此时语法就和修改表的字段类型的语法一致了
ALTER TABLE stu MODIFY phone_number VARCHAR(11) UNIQUE ;

DROP TABLE stu ;

4)主键约束 primary key(非空且唯一的) 一般和auto_increment(自增长约束)使用多一些

-- 设置在id非业务字段上
CREATE TABLE stu(
      id INT PRIMARY KEY AUTO_INCREMENT , -- 编号   加入主键约束,加入自增长
      NAME VARCHAR(20) -- 姓名
);

DROP TABLE stu ;
INSERT INTO stu VALUES(1,'高圆圆'),(2,'文章') ;
INSERT INTO stu VALUES(1,'赵又廷') ;-- Duplicate entry '1' for key 'PRIMARY' id是一个主键,值不能重复
INSERT INTO stu VALUES(NULL,'王宝强') ;-- Column 'id' cannot be null



-- 通过sql将主键约束删除
-- alter table 表名 drop PRIMARY  KEY ;
ALTER TABLE stu DROP PRIMARY  KEY;

DELETE FROM stu  WHERE NAME = '赵又廷' ;

-- 通过sql语句将主键约束加入(唯一起作用)
ALTER TABLE stu MODIFY id INT PRIMARY KEY  ;





-- 加入自增长约束之后,不需要给id赋值了,自己自增
INSERT INTO stu(NAME) VALUES('高圆圆'),('文章') ;
-- 自增长约束可以自己插入新的id,然后在之前id上继续自增
INSERT INTO stu VALUES(17,'赵又廷') ;

INSERT INTO stu(NAME) VALUES('张三') ;
-- mysql有一个函数:获取最后一次自增长主键的id值
SELECT LAST_INSERT_ID() ;

SELECT * FROM stu ;

5)外键约束 foreign key

在这里插入图片描述

SHOW TABLES ;

DROP TABLE employee ;

-- 描述员工信息,创建一个表,员工编号,员工姓名,员工性别,员工所在部门
CREATE TABLE emp(

	id INT PRIMARY KEY AUTO_INCREMENT, -- 员工编号
	emp_name VARCHAR(10) , -- 员工姓名
	emp_gender VARCHAR(5), -- 员工性别
	emp_dept_name VARCHAR(10) -- 员工所在的部门名称

) ;

-- 插入员工表数据
INSERT INTO emp(emp_name,emp_gender,emp_dept_name)
VALUES('文章','男','开发部'),
('高圆圆','女','测试部'),
('王宝强','男','运维部'),
('姚笛','女','测试部'),
('赵又廷','男','开发部') ,
('马保国','男','运维部') ;
DROP TABLE emp;

-- 上面存在的问题:员工表中包含员工信息以及部门信息,这种情况不能在数据库中出现
-- 查询出来的数据部门信息存在冗余,重复性大,优化改进:一张表始终描述一件事情
-- 将员工表拆分出来:将部门信息放在部门表中

-- 创建一张部门表 dept表
CREATE TABLE dept(
	id INT PRIMARY KEY AUTO_INCREMENT, -- 主键自增长约束 部门编号
	dept_name VARCHAR(20)   -- 部门名称
) ;
-- 插入三个部门
INSERT INTO dept(dept_name) VALUES('开发部'),('测试部'),('运维部') ;



-- 创建员工表
CREATE TABLE emp(

	id INT PRIMARY KEY AUTO_INCREMENT, -- 员工编号
	emp_name VARCHAR(10) , -- 员工姓名
	emp_gender VARCHAR(5), -- 员工性别
	dept_id INT -- 员工的部门id

) ;

INSERT INTO emp(emp_name,emp_gender,dept_id)
VALUES('文章','男',1),
('高圆圆','女',2),
('王宝强','男',3),
('姚笛','女',2),
('赵又廷','男',1) ,
('马保国','男',3) ;

-- 插入了一条员工数据
INSERT INTO emp(emp_name,emp_gender,dept_id) VALUES('张三丰','男',4) ;

-- 问题2:员工表中插入一条不存在的部门,两种表没有建立关系
-- 解决:外键约束 foreign key ,员工表dept_id 和部门表主键id进行关联
-- 外键所在的表----从表   (员工表)
-- 部门表: 主表 

-- 员工表:从表
CREATE TABLE emp(

```sql
id INT PRIMARY KEY AUTO_INCREMENT, -- 员工编号
emp_name VARCHAR(10) , -- 员工姓名
emp_gender VARCHAR(5), -- 员工性别
dept_id INT,  -- 员工的部门id
CONSTRAINT  -- 声明 
 dept_emp_fk -- 外键名称  命名规则:主表名称_从表名称_fk
 FOREIGN KEY (dept_id)   -- 作用在这个dept_id字段上 
 REFERENCES dept(id)  -- 关联主表的主键id
```

) ;


DROP TABLE emp ;


-- 删除3号部门
-- 加入外键约束:修改和删除是很麻烦,需要先修改或者删除从表数据,然后修改/删除主表数据
-- 将id为3的和id为的3清除
DELETE FROM emp WHERE id= 3 OR id = 6 ;
DELETE FROM dept WHERE id = 3;

SELECT * FROM dept ;
SELECT * FROM emp ;

;

笑着脸酷似*

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Javascript和SQL语句基础

周总结文章目录周总结JavaScriptJavaScript简介JavaScript组成部分JavaScript发展史JavaScript的使用方式JavaScript中的变量以及数据类型内部方式JavaScript中的运算符JavaScript中的流程控制语句JavaScript事件编程三要素for-in语句在JavaScript如何创建一个数组JavaScript中的函数定义以及调用JavaScript内置对象Dateinner Text和inner-HTML属性有什么区别Dom操作:网页时钟Jav
复制链接

扫一扫