第二周学习内容总结

最新推荐文章于 2022-12-27 11:25:16 发布

RorscH4cH-

最新推荐文章于 2022-12-27 11:25:16 发布

阅读量245

点赞数

文章标签：学习 html css

本文链接：https://blog.csdn.net/RORSCHACH1123/article/details/124565695

版权

4.24

CSS的定位属性

position:fixed(固定定位,不会随着滚动条而移动)
relative(相对定位,针对原来的位置定位)

absolute(绝对定位,根据页面左上角定位)

js的使用方式

1.内部方式:就是在head标签中指定script标签书写,js的代码;

2.外部方式:

                1)单独在js文件夹中,单独创建后缀为.js的文件
               2)在xxx.js文件中,书写js代码
               3)在当前某个html页面中,导入这个xxx.js文件
                       必须有开始标签,有结束标签
                       <script src="导入外部xxx.js文件的路径"></script>

js中定义变量以及数据类型划分

1.在js中,定义变量使用var来定义,var可以省略(因为js是弱类型语言)
弱类型语言:主要体现在语法结构非常不严谨
2.因为js是弱类型语言,定义一个变量可以重复定义,后面的值会将前面的值覆盖掉!
3.var可以定义任何数据类型!

注意事项:
在js中,查看一个变量的数据类型? 使用函数 typeof(变量名)

1)无论是整数还是小数,都是number类型 (基本类型) --- 自动提升为 js内置对象 Number 整数对象
2)无论是字符串还是字符,都是string类型(基本类型)--- 自动提升为 js内置对象 String字符串对象
3)undefined:未定义类型,就是定义变量,没有给变量赋值! (没有意义,没有数据值)
4)object类型,(对象类型),自动提升为---- Object :所有Js内置对象的模板!

js中的运算符

1.算术运算符:+,-,*,/,%(模:求余数) 赋值运算符:=

2)比较运算符: <,<=,>,>=,!=,==

这些符号不管连接的表达式是复杂的还是简单的,最终要么就true,要么就false

3)逻辑运算符
                   基本符号:& 逻辑单与,有false,则false
                       | 逻辑单或,有true,则true

                           ! 逻辑非
                                       非true,则false
                                       非false,则true

4)三元运算符(三目)

               语法格式:
                   表达式可以是简单的或者复杂,要么是true,要么false
                   (表达式?)执行true的结果:执行false的结果;
                   执行流程:
                       首先判断表达式是否成立,如果成立,则执行true的结果
                       如果不成立,则执行false的结果;

流程控制语句

顺序结构语句: js代码从上而下加载,比较简单的一类

选择结构语句:
                   if语句
                       三种格式
                       格式1
                               if(表达式){
                                   语句1;
                               }
                               执行流程:
                                   表达式是否成立,如果成立,才能执行语句1

                       格式2:开发中使用最多(针对两种结果判断)
                               if(表达式){
                                   语句1;
                               }else{
                                   语句2;
                               }
                               执行流程:
                                   1)先判断表达式是否成立
                                   成立,则执行语句1
                                   2)否则不成立,执行语句2

                       格式3:针对多种结果判断的
                       if...else if...else

                           if(表达式1){
                               语句1;
                           }else if(表达式2){
                               语句2;
                           ...
                           ...
                           ...
                           }else{
                               语句n;
                           }
                           执行流程:先判断表达式1是否成立,
                           如果成立,执行语句1
                           如果不成立,继续判断表达式2是否成立,
                           如果成立,执行语句2,不成立,依次执行下面的语句..

                           如果上面都不成立,执行else中的语句n;

在js中if中的内容,跟js数据类型有关系,(特例)
               * 1)整数类型number,如果是非0的整数,if成立;否则,不成立
               * 2)字符串类型string,如果是非空字符串,if成立;否则,不成立
               * 3)对象类型object,如果是对象,new Object(),if成立;如果是null,空对象!

switch语句

js中的switch语句
           switch(变量){

           case 值1:                   //js中的case语句后面既可以是常量,也可以是变量!
                                       //java中的case语句后面只能是常量!
                   语句1;
                   break ; //结束,中断的意思
           case 值2:
                   语句2;
                   break ;
           ...
           ...
           default:
                   语句n;
                   break ;

           }
           执行流程:
           1)首先判断变量的值和值1是否匹配
               如果匹配,执行语句1,switch语句结束!
       2)如果不匹配,继续和case后面的值2进行比较,成立,则执行语句2,break结束
       ...
       3)如果上面都不匹配,则执行语句n,语句结束


       switch语句结束条件:
           1)遇见break结束
           2)程序默认执行末尾


           default语句可以在语句中的任何位置,但是如果在语句中,break最后别省略,否则如果case都不成立,执行
           default语句,会有case穿透现象!
           ;如果在语句的末尾,break可以省略

事件编程三要素

1)事件源---指的就是html标签要么空参/要么带参
2)编写事件监听器----就写一个函数 (js代码) function 函数名称(形式参数名1,形式参数名2......)
3)绑定事件监听器----就是在标签中有一些onxxx属性和函数名称进行绑定

                       事件:
                               单击点击       click
                               双击点击 dbclick

                               失去焦点       blur
                               获取焦点       focus

                               选项卡发生变化的事件....       change

4.25

循环语句

for循环

               循环遍历(遍历,就是将元素数据一一获取出来)
               然后使用这些数据,完成业务逻辑判断!


           * for(初始化语句;条件表达式;控制体语句){
               循环体语句;
           }
               执行流程:
                       1)首先初始化语句执行一次,给变量赋值
                       2)判断条件表达式是否成立,如果成立,就执行循环体语句
                       3)继续执行控制体语句(也称为"步长语句"),++或者-- 对变量自增或者自减1
                       4)继续判断条件表达式是否成立,如果成立,继续执行循环体语句,执行控制体语句,
                       ...
                       ...
                       5)直到条件表达式不成立,for循环结束!

while格式
初始化语句;
while(条件表达式){
               循环体语句;
               控制体语句(步长语句) ;
           }

           执行流程:
               1)初始化语句对变量赋值
               2)判断条件表达式是否成立,
               成立,则执行循环体,一次执行步长语句;
               3)再次判断条件表达式是否成立,....
               ..
               4)条件不成立,循环结束!

js内置对象之Date

var dateStr = new Date() ; //创建日期对象

var year = dateStr.getFullYear() ;
           document.write(year+"年") ;

var month = dateStr.getMonth()+1 ;
           document.write(month+"月") ;

var date = dateStr.getDate() ;
           document.write(date+"日&ensp;&ensp;") ;

innerHTML和innerText属性

任何标签都有这俩个属性innerHTML
                               innerText
                               都表示设置标签的文本内容

如何动态给span标签或者div块标签等等添加文本内容呢?
要使用dom操作了
1)给标签设置id属性
通过一个固定的语法:获取id="属性值"的标签对
var 标签对象 = docuement.getElementById("id属性值") ;
2)标签对象.innerHTML = "<h1>hello</h1>" ;常用的) //可以加入常用的html标签进行渲染
标签对象.innerText = "设置普通文本" ,"<h1>hello</h1>",不会渲染标签!会将标签输出浏览器中

js内置对象之String

           js语言中,String对象,指的就是字符串数据值

           给的格式:创建一个js的字符串对象
           var 对象名 = new String("字符串值") ;

           要表示一个字符串的简写格式
           var 对象名 = "字符串值" ;

1)常用的功能 charAt() 获取指定索引处的字符
           alert(s.charAt(1)) ;

2)concat(字符串):拼接功能,将原始内容和当前字符串进行拼接
           没有学习这个功能之前
           使用"+"进行拼接
           document.write(s+"高圆圆") ;

拼接功能
           alert(s.concat("mysql")) ;

3)可以给字符串进行颜色标记 fontcolor ("颜色值(rgb(255,198,255),颜色单词..)")

js中的函数定义以及调用

写法1:
               function 函数名称也就是你的方法名(形式参数列表....){
                   //业务代码,直接输出

               }
               调用函数:
               单独调用
                   函数名称(实际参数列表) ;

写法2:
           function 函数名称也就是你的方法名(形式参数列表....){
               return 具体结果;

           }
               赋值调用
                       var 结果变量 = 函数(实际参数) ;
                       直接输出结果变量;

4.26

js内置对象Array

创建Array对象三种方式
                   var 数组对象名 = new Array() ;//不指定长度
                   var 数组对象名 = new Array(size) ;//指定数组长度

                   var 数组对象名 = new Array([元素1,元素2,...]) ;
                   它可以简化为
                   var 数组对象名 = [元素1,元素2,...] ;

//遍历数组,获取arr数组对象的运算
           for(var i = 0 ; i < arr.length ;i++){ //i就是角标 0,1,2,3,4
               document.write(arr[i]+"<br/>") ;//i=0,0<3,arr[0]
           }

常用的dom操作_通过方法获取标签对象

//方式1:docuement.getElementById("id属性值") ,常用的,需要在标签中给定id属性值(唯一的)

//方式2:docuement.getElementsByClassName("页面中所有同名的class属性值"),需要在标签中给定class属性值
           // 获取的不是单个标签对象,而是标签对象列表,理解为一个数组,
           //var input = document.getElementsByClassName("c1")[0] ;

//方式3:docuement.getElementsByName("页面中所有同名的name属性值") ;
           //在标签中给定name属性值
           //var input = document.getElementsByName("name")[0] ;

//方式4:docuement.getElementsByTagName("页面中所有同名的标签名称") ;
           //var input = document.getElementsByTagName("input")[0] ;

常用事件编程

这些所有的事件在标签上只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上

           1)点击相关的事件
                   单击 click -- onclick属性
                   双击 dbclick -- ondblick属性
           2)焦点事件
                   获取焦点 focus -- onfocus属性
                   失去焦点 blur -- onblur

           3)选项卡发生变化的事件,一般用在select下拉菜单中
                   事件名称 change --onchange属性

4.27

学习Mysql的DDL语句(数据库的定义语句) 库的操作

查看mysql数据库本身自带的所有数据库

show databases ;

创建库,

create database 库名;

or create database if not exists 库名;

查询创建的数据库的默认字符集

show create database 库名;

修改数据库的字符集(不常用),

alter database 库名 default character set gbk(utf8) ;

删除库

drop database 库名;

or drop database if exists 库名;

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

mysql数据库中常用的数据类型

int():整数,默认11可自定义长度(使用较多)

varchar(最大支持255字符):使用最多,表示字符串数据

datetime:日期时间,可以指定日期时间
tempstamp:时间戳(系统当前时间)
double(几位数,小数点后保留的位数):小数类型,

创建表的前提是选择使用一个库 use 库名;

创建表:

create table 表名(

字段1 类型1,

字段2 类型2,

....

);

查询表:查询这个库中所有表,

show tables ;

查询表的结构,

desc 表名 ;

修改的表的字段类型,

alter table 表名 modify 字段名称新的字段类型;

给表中新添加一列,

alter table 表名 add 列名称字段类型;

将表中的某一列删除,

alter table 表名 drop 列名称;

复制一张一模一样的表 ,

create table 新表名 like 旧表名;

重命名表,

alter table 旧表名 rename to 新表名;

删除表,

drop table 表名;

SQLyog图形界面化中操作sql语句--插入表记录
注释符号

#(特殊注释)

/*注释内容*/ 多行注释

--命令行的注释

DML语句:

插入数据,删除数据,修改数据,查询数据....

插入数据 ,

insert into 表名 values(值1,值2,....值n) ,(值1,值2,....值n),......(值1,值2,....值n);

注意:插入的值必须和当前字段顺序要对应,而且还有符号这个字段数据类型

插入部分字段,未插入的字段的默认值就是null,

insert into 表名(字段名称1,字段名称2,,,) values(值1,值2....) ;

同样支持一次插入多条数据,

查询表的记录,

select *(所有字段) from 表名;(一般情况下企业中禁用)

DML语句,数据库操作语句,修改表的记录
修改数据,

update 表名 set 字段名称1 = 值1,字段名称2 = 值2,...,字段名称2 = 值 n where 字段名称 = xx

批量修改,(一般不用)

update 表名 set 字段名称= 值;

带个多个条件同时修改 ---- 相当于编程语言并列关系

update 表名 set 字段名称 = 值 where 条件1 =xx and 条件2 and.....

删除表中指定记录以及全表记录
删除表指定的记录,都是带条件删除,

delete from 表名 where 字段名称 = 值;

delete from 表名;

truncate table 表名;

这两个都是删除全表记录,有什么区别呢?

共同点:都能够删除全表记录
不同点:
delete from 表名 ; 仅仅只是删除全表数据,而不是删除表,如果表中id(非业务字段
如果有自增长约束),不会影响自增长约束!意味着下次插入数据的时候,id继续自增!

truncate table 表名; 会将表中的全部记录删除并且同时删除表,而且会自动创建一张一模一样的表,它直接影响了自增长约束的值下一次插入数据的时候,自增长id字段从1开始;

4.28

查询表的数据并且可以给别的字段起别名

SELECT
s.id AS '编号',-- 编号
s.`name` AS '姓名',-- 姓名
s.`age` AS '年龄',-- 年龄
s.sex AS '性别',-- 性别
s.`address` AS '地址', -- 地址
s.`math` AS '数学成绩',-- 数学
s.`english` AS '英语成绩' -- 英语
FROM
student3 AS s ;(AS可以省略)

通过关键字DISTINCT,可以去重

SELECT
DISTINCT address
FROM student3;

查询的时候,可以将字段为整数类型进行求和

SELECT
   id '员工编号' ,
   NAME '员工姓名',
   age '员工年龄',
   sex '员工性别',
   (math+english) '总分'

注意事项:两个整数类型求和,如何一个字段是null值,结果null(没意义,空值)

在mysql里面有函数 ifnull(字段名称,期望值) ; 如果当前字段名称为null值,给一个期望值

带条件查询

情况1:select 指定的字段名称 from 表名 where 条件 ;
-- where 后面可以使用赋值运算符=, 比较运算符<,<=,>,>=,!=

如:
                SELECT
                            *
                FROM
                            student3
                WHERE
                            age = 20 ;

-- mysql里面判断某个条件不等于,<>(不等于)

-- where后面跟多个条件,并列条件或者或的条件
-- 可以使用逻辑符号 &&(并列),||(或),mysql中可用 and 和 or

        其中and也可以用 between 值1 and 值2 ;

or也可以用in(值1,值2,值3) ;

where 条件后面可以跟某个字段为null 的格式

english == null ; */ -- 这个语法格式不支持的!

应该为 where 字段名称 is null ;

模糊查询(模糊搜索):关键字 like

select 指定字段列表 from 表名 where 字段名称 like '%字符%'

%:就是匹配任意字符(代表多个字符),(使用最多)

_:一个下划线代表一个任意字符值 (包含关系) ,使用不多

                SELECT
                        *
                FROM
                        student3
                WHERE
                        NAME
                        LIKE '%马%' ;

聚合函数查询:------ 单行单例的数据

语法 select 聚合函数(字段名称) from 表名 ;
count(字段名称):查询当前表的记录数
       字段名称:一般非业务字段 id,如果业务字段的有些值null,数据存在漏洞的!
sum(字段名称):求和,针对某列字段值进行求和(整数)
avg(字段名称):平均分函数
max(字段名称) :最大值函数
min(字段名称) :最小值函数

通用写法:统计有多少条信息

        SELECT COUNT(id) '总记录数' FROM student3 ;

        求和

                SELECT
                            SUM(math) '数学成绩总和'
                FROM student3 ;

        平均分

                SELECT
                 AVG(math) '数学平均分'
                 FROM
                student3;

         最值

                SELECT
                         MAX(math) '最高分',
                         MIN(math) '最低分'
                 FROM student3 ;

排序查询关键字order by

-- 语法:select 字段列表 from 表名 order by 字段名称排序规则
-- 排序规则: asc :升序(默认值) desc :降序

如:

需求:查询数学成绩降序,英语成绩是升序的所有学生信息
-- 如果数学成绩相同,按照英语成绩排序规则进行操作

                SELECT
                        *
                FROM
                         student3
                ORDER BY

                        math DESC ,english ASC ;