01_Javascript的使用方式
js的使用方式 ：
js的使用方式
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的文件
书写js代码,在当前html页面中将js文件导入即可!
导入外部js文件
<script src="js/01.js"></script>
02_javascript中的变量以及数据类型
内部方式
<script>
定义变量的注意事项
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类型 :未定义类型 (这种没有意义),因为没有赋值!
03_Js的运算符
Js是弱类型,语法结构不严谨
true,false在运算的时候都自己默认值 true是1,false是0
实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
算术运算符
+,-,*,/,%
++,--
赋值运算符
=:基本赋值
+=,-=,*=,/=,%=
比较(关系运算符)
<,<=,>,>=,==,!=
逻辑运算符
实际开发中:逻辑双与&&,逻辑双或||
三元(三目)运算符
(表达式)?执行true的结果:false的结果
04_Js中的流程控制语句
三大类
1)顺序结构:js代码从上而下依次加载
2)选择结构
if结构
if(表达式){
语句
}
if(表达式){
}else{
}
if(表达式1){
语句1;
}else if(表达式2){
语句2 ;
...
...
}else{
语句n;
}
switch结构
switch(表达式){
case 可以变量/也可以常量:
语句1;
break ;
...
...
default:
语句n;
break ;
}
3)循环结构
for(使用居多),while(其次while),do-while
选择结构之if格式2 :针对两种情况进行判断
实际开发中,if里面一个表达式---true或者false
因为js是弱类型语言,
1)如果if里面是一个非0的整数,条件是成立的;
2)如果是非空字符串,条件成立;
3)如果是非null的对象,条件成立的;
if(new Object()){
alert("条件成立") ;
}else{
alert("条件不成立")
}
switch语句的结束条件
1)遇见break结束
2)程序默认执行到末尾
case语句后面没有break,会造成"case穿透现象!"
case后面跟Java语言的case语句不一样的地方就是这个case后面可以是变量!
而Java中只能是常量!
switch(week){
case 1:
document.write("星期一") ;
break ;
case 2:
document.write("星期二") ;
break ;
case b: //b是变量
document.write("星期三") ;
break ;
case 4:
document.write("星期四") ;
break ;
case 5:
document.write("星期五") ;
break ;
case 6:
document.write("星期六") ;
break ;
case 7:
document.write("星期日") ;
break ;
default:
document.write("非法数据!") ;
break ;
}
2)事件监听器
function testSerach(){
alert("触发了这个点击事件") ;
需要获取文本输入框的内容 获取的input标签的value属性
dom操作:
1)通过特别的方式获取标签对象 最常用的 document.getElementById("id属性值") ;
2)使用标签对象改变标签的属性
获取id="month"所在的input标签对象
var inputObject =document.getElementById("month") ;
获取到value属性,获取文输入框的内容
var content = inputObject.value ;
Js事件编程三要素
1)事件源 ----就是html标签 的单击,双击....
2)编写事件监听器-- 就是编写一个函数 function 函数名称(){}
3)绑定事件监听器-- 就在事件源上加上onxxx属性="函数名称()"
06_for-in语句
for-in类似于增强for循环
应用场景:
1)遍历数组
2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
在js如何 创建一个数组
方式1: var 数组对象 = new Array() ; //不指定长度
方式2: var 数组对象 = new Array(长度) ;//指定长度
方式3:静态初始化,
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
简写格式 :var 数组对象名称= [元素1,元素2,元素3,.....] ;
在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致!
遍历数组
普通for
for(var i = 0 ; i < arr.length; i++){
document.write(arr[i]+"<br/>") ;
}
增强for循环for-in语句的格式
for(var 变量名 in 数组或者对象名称){
使用变量名;
}
07_Js中的函数定义以及调用
定义函数的 格式1 形式参数列表
function 函数名称(参数名称1,参数名称2....){
函数的里面业务逻辑
直接在这输出document.write("xxx") ;
}
格式1调用:
单独调用
函数名称(实际参数列表) ;
格式2:(推荐)
function 函数名称(参数名称1,参数名称2....){
函数的里面的业务逻辑
return 结果;
}
格式2调用:
赋值调用
var 最终结果变量 = 函数名称(实际参数列表) ;
定义函数的注意事项:
1)js是弱类型语言,定义函数的时候,参数名称不能携带var
2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
4)
实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没 有赋值
实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数
//定义函数,两个数据求和
格式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 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]+" <br/>");
}
var d = a+b+c ;
return d ;
}
赋值调用
var result = sum(10,15,20) ;
document.write("result:"+result) ;
08_Js内置对象Date
Js内置对象:Date日期,String字符串,Array数组,正则表达式对象..
浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
<script>
日期对象的基本使用 :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+"日 ") ;
getHours() 获取小时值
document.write(date.getHours()+":") ;
getMinutes():获取分钟值
document.write(date.getMinutes()+":") ;
getSeconds() :getSeconds()
document.write(date.getSeconds()) ;
</script>
09_面试题_innerText和innerHTML
span:行内标签,
任何标签都有这俩个innerText和innerHTML
这两个属性代表设置标签的文本内容
innerHTML可以加入html标签,可以被解析 (推荐)
innerText只是普通的文本内容,不能够解析html标签,如果加入html标签
就会原封不动的解析成普通文本!
<script>
dom操作:
1)获取span标签对象 : 通过id属性获取
var spanObject = document.getElementById("tip") ;
2)通过标签对象改变属性 :innerHTML属性
spanObject.innerHTML = "<h2>系统时间</h2>" ;
innerText属性
spanObject.innerText = "<h2>系统时间</h2>";
</script>
10_网页时钟
<html>
<head>
<meta charset="utf-8">
<title>10_网页时钟</title>
</head>
<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()+" "+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>
表单校验的步骤
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
<style>
/* 给表单添加背景颜色 格式 */
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
#one{
width: 99%;
height: 99%;
min-height: 600px;
min-width: 1240px;
position: relative;
}
#checkform{
width: 600px;
height: 500px;
border:2px solid darkgrey;
position: absolute;
left: 50%;
margin-left: -300px;
top: 180px;
text-align: center;
line-height: 100px;
border-radius: 7px;
font-size: 13px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<!-- form表单
action="server.html 跳转到某个窗口
method="get" 方法：get方法获取
onsubmit 提交事务 返回值必须是true才可以提交
-->
<div id="one">
<form id="checkform" action="server.html" method="get" οnsubmit="return checkAll()">
用户名： <input type="text" placeholder="请输入用户名" id="getusername" οnblur="checkusername()"/><span id="usenameTip"></span><br />
密 码： <input type="password" placeholder="请输入密码" id="getpassword" οnblur="checkpasswork()"/><span id="passwordTip"></span><br />
确认密码：<input type="password" placeholder="请再次输入密码" id="getpasswordaga" οnblur="checkpasswordaga()"/><span id="passwordTipaga"></span><br />
邮箱：    <input type="text" placeholder="请输入邮箱" id="getemail" οnblur="checkemail()"/><span id="emailTip" ></span><br />
         <input type="submit" value="注册"/><br />
</form>
</div>
</body>
<script>
/*
校验用户名是否可用
*/
function checkusername(){
var reg = /^[A-Za-z0-9]{4,14}$/; //设置正则表达式，判断用户输入用户名格式是否正确
var username = document.getElementById("getusername").value; //获取id为"getusername"的标签对象
var span = document.getElementById("usenameTip"); //获取id为"usenameTip"的标签对象
if(reg.test(username)){ //判断用户名格式是否正确
span.innerHTML = "用户名可用".fontcolor("green");
return true;
}else{
span.innerHTML = "用户名不可用".fontcolor("red");
return false;
}
}
function checkpasswork(){
var reg = /^[A-Za-z0-9]{6,14}$/ //设置正则表达式，判断用户输入密码格式是否正确
var password = document.getElementById("getpassword").value; //获取id为"getpassword"的标签对象
var span = document.getElementById("passwordTip"); //获取id为"passwordTip"的标签对象
if(reg.test(password)){ //判断用户密码是否正确
span.innerHTML = "密码可用".fontcolor("green");
return true;
}else{
span.innerHTML = "密码格式错误".fontcolor("red");
return false;
}
}
function checkpasswordaga(){
var password = document.getElementById("getpassword").value;//获取id为"getpassword"的标签对象的值
var passwordaga = document.getElementById("getpasswordaga").value //获取id为"getpasswordaga"的标签对象的值
var span = document.getElementById("passwordTipaga");
if(password == passwordaga){ //判断用户输入两次密码是否一致
span.innerHTML = "两次密码一致".fontcolor("green");
return true;
}else{
span.innerHTML = "两次密码不一致".fontcolor("red");
return false;
}
}
function checkemail(){ //设置正则表达式，判断用户输入邮箱格式是否正确
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,3}$/;
var email = document.getElementById("getemail").value; //获取id为"getemail"的标签对象
var span = document.getElementById("emailTip"); //获取id为"emailTip"的标签对象的值
if(reg.test(email)){
span.innerHTML = "邮箱可用".fontcolor("green");
return true;
}else{
span.innerHTML = "邮箱格式有误".fontcolor("red");
return false;
}
}
function checkAll(){ //必须所有表单都满足条件才可以提交任务
if( checkusername() && checkpasswork() && checkpasswordaga () && checkemail()){
return true ;
}else{
return false ;
}
}
</script>
</html>
数据库
1.什么是数据库:
数据库存放数据的一种容器,存放数据的仓库,
之前怎么存储数据?
1)定义变量,类似局部变量,随着方法调用而结束;
2)容器存储:
数组--->查询快,增删慢
集合--->单列集合Collection/双列集合Map
长度可变,
List<Student>
字符串缓冲区:StringBuffer/StringBuilder
最终可能需要将字符串缓冲区类型---String
3)IO流
Input
Output
可以将内容存储磁盘上 文件中 (读写复制---很耗时)
4)数据库来存储数据
执行效率高
底层有树结构在里面
数据库支持 "事务",来解决 业务中存在问题 "转账操作"!
即使关机了,数据永久保存!
2.数据库的分类
关系型数据库:
书写sql语句 (Structure Query Language:结构化查询语言)
oracle :收费 大型公司企业居多(西安银行,汇丰,神州数码...)
买数据库,买oracle第三方服务...
mysql :免费 中小型公司使用居多
sqlserver:跟.net平台兼容性比较好一些
sqllite: 轻量级的关系数据库,嵌入式里面居多
mariaDB:跟mysql同级别的
非关系型数据库:NoSQL数据库
键值(Key-Value)存储数据库 : redis 做数据缓存------ 分布式系统架构 使用redis 分布式缓存
文档类型数据库:
MongoDb
```
3.mysql的基本语法
数据库的DDL语句(数据库的定义语句)之库的操作
1)查询当前mysql中自带的所有库有哪些
show databases;
2)创建一个库
create database 库名;
3)查询创建库的字符集
show create database 库名;
4)修改库的字符集
alter database 库名 default character set 字符集名称
5)删除库(2两种方式)
drop database 库名;
drop database if exists 库名; //如果存在这个库 删除该库
数据库DDL语句(数据库定义语句)之建表,修改表,查询表,删除表...
1)
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(几位数,小数点后保留的位数)
2)使用某个数据库
use 库名:
3)建表 create table 表名(
字段名称1 字段类型1,
字段名称2 字段类型2,
...
...
字段名称n 字段类型n
) ;
4)- 查询当前库中有哪些表
show tables;
5)查看表的结构
desc 表名;
6)修改表的字段名称
alter table 表名 change 旧字段名称 新字段名称 旧字段的数据类型;
7) 修改表的字段类型 modify
alter table 表名 modify 字段名称 新的字段类型
8)修改表:给表中添加一个新的字段
alter table 表名 add 字段名称 字段类型;
9)复制一张表
create table 新表名 like 就表名;
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
