Java Web 回顾-HCJ

盒子模型
数据类型
自定义函数
自定义对象

盒子模型
  • 所有的HTML元素都可以看作一个四边形盒子
  • marign:外边距
  • padding:内边距
  • 边框,内边距,外边距(上下左右)

在这里插入图片描述

  • 行内样式
  • 标签样式
  • css样式表
    • 首先建立一个css文件,里面写css样式
    • 然后再目标文件中引入
/*css文件中样式*/
div{
    border: 1px solid rebeccapurple;
}

<head>
    <meta charset="UTF-8">
    <title>haode </title>
    /*引入css样式文件*/
    <link rel="stylesheet" style="css" href="./demo.css"/>
</head>
js使Java Web强大的脚本语言
  • js引入的俩种方式
    • 内部脚本方式:可在头部中引入也可以在尾部
    • js文件引入方式
  • 注意当使用第二种方式引入时,script标签内写的js内容不会被执行,只会执行src引用js文件中的内容
//js文件内容
alert("hello");

    <head>
        <meta charset="UTF-8">
        <title>haode </title>
        <script src="demo.js"></script>
    </head>
  • 脚本语言:无法直接执行,必须结合其它语言执行,可以直接被浏览器解析执行
  • Java script 语言特点
    • 无需编译,直接被浏览器解释执行
    • 不能独立执行,必须嵌套在html文件中
    • 执行顺序,由上到下
    • 没有访问系统文件的权限
    • 在保证可读情况下可以使用链式编程
  • Java Script由三部分组成
    • ECMA Script(核心):规定了js语法和基本对象
    • Dom:文档对象模型,处理网页内容的方法和接口
    • Bom:浏览器对象模型,与浏览器交互的方法和接口
  • 注意事项:
  • 保证html展示内容优先加载,最后加载脚本,增强用户体验性,可将script标签放在body标签中且放在尾部
  • 练习时可放在head中
js变量
  • js变量规则和和c一样
var a;   //默认值undefined(未定义)
基本数据类型
  • string:字符串类型:js中用“” 或‘’ 表示字符串,并没有单个字符
  • boolean:布尔类型
  • number:数字类型
  • null:空,一个占位符
  • undefined:未定义类型,该类型只有一个固定值,即undefine,表示声明却未定义的具体值
  • 因为undefine是从null派生出来的,所以undefi == null;
  • 注意:
    • js时若类型语言,变量的使用不严格遵循规范,所以一个变量声明好之后,就可以赋予任何数据类型的值
    • typeof(a) ;用来辨别是什么基本数据类型
    • typeof(null); null属于基本数据类型,但是会返回object
    <script>
        var a  = "你好";
        var b = '啊';
        alert(typeof (a));
        alert(a);
        alert(b);

        var num1 = 12;
        var num2 = 1.3;
        alert(num1);
        alert(num2);

        var flag1 = true;
        var flag2 = false;
        alert(flag1);
        alert(flag2);

        var r1;  //默认值赋值undefine
        var r2 = null;
        alert(r1);
        alert(r2);

        var  t1 = undefined;
        alert(t1);
    </script>
引用数据类型
  • 引用数据类型一般称之为类,但js语言不存在编译的过程,所以没有类的概念,所以处理的引用类型都是对象
  • 标准创建方式
    • var str = new String();
    • var str2 = new String;
比较运算符
  • == 逻辑等:仅仅比较值
  • === 全等:比较值且数据类型
逻辑运算符
  • js中逻辑运算符没有 & 和 |
正则对象的创建
  • var reg = new RegExp(“表达式”); 此种方式在开发中基本不用
  • var reg = /^表达式$/; (直接量,开发中常用)
  • 注意:直接量存在边界:^代表开始,$代表结束
  • 直接量方式的正则时对象,不是字符串,不用引号
  • 直接量和普通方式区别
    <script>

        //直接量方式(必须全部字符都符合)
        var reg = /^\s*$/;   //正则表达式,匹配0到多个空格
        var flag = reg.test("   ");   //用来匹配字符串
        var flag2 = reg.test("   a  ");
        alert(flag);  //trye
        alert(flag2);  //false

        //普通方式(除非全部字符否不符合正则,返回false,只要由字符符合返回true)
        var reg2  = /\s+/;
        var flag = reg.test("  a ");
        alert(flag);  //true

    </script>
js数组
  • 数组中每个成员类型没有限制
  • 数组的长度可以修改
  • js数组的字中创建方式

在这里插入图片描述

        var arr = [1, 2, "fff"];  //前俩种最常用

        var arr2 = new Array();  //创建默认长度0的数组

        var arr3 = new Array(4);   //创建长度为4的数组

        var arr4 = new Array(1,2,3);

        alert(arr.length); //打印数组长度
        a[1] = "hello";  //修改元素值
        a[4] = "world";  //动态追加数组长度
        alert(arr.length)   //5

        //将数组按照特定分隔符构成字符串
        var res = arr.join("+");   //1+2+fff
        alert(res);
        alert(arr);  //不会对当前的数组改变

        var resvered = arr.reverse();
        alert(resvered);  //反转后的数组
        alert(arr);  //会改变当前的数组

        var p = arr.pop();   //删除且返回最后一个数组元素,原先数组收影响
        alert(p);

        arr.push("3");  //追加一个元素在尾部
        arr.push("2", "4", "5");   //追加多个元素按顺序
        alert(arr);

全局函数
    <script>

        eval("var a = 10;");   //eval(string)将传入的字符串,作为js脚本代码来执行
        //注意:只能传入基本数据类型字符串,而不能传入对象
        alert(a);   //10

    </script>
编码和解码
  • 对中文和特殊符号进行编码
  • URL和URI区别
  • URI是统一资源标识符,标识资源唯一名称
  • URL是统一资源定位器,定位资源的网络位置
  • 资源:可以通过浏览器访问的信息统称为资源(图片、文本、HTML)
  • URI是标识资源的详细名称,包含资源名
  • URL是定位资源的网络位置包含http://

    <script>

        eval("var a = 10;");   //eval(string)将传入的字符串,作为js脚本代码来执行
        //注意:只能传入基本数据类型字符串,而不能传入对象
        alert(a);   //10

        //encodeURL(string)  对传入的字符串和特殊符号进行编码
        var msg = "http://www.baidu.com?username = 张三 & passwo = 123";
        var temo = encodeURI(msg);
        alert(temo);

        //对传入的字符串解码
        var t = decodeURI(temo);
        
    </script>
字符串转数字
  • 如果某个字符串的字符从字面值无法转换为数字,那么就从该字符停止转换,仅返回前面正确的转换值
  • 若从第一个字符就无法转换,则停止转换且返回NaN
    <script>

        eval("var a = 10;");   //eval(string)将传入的字符串,作为js脚本代码来执行
        //注意:只能传入基本数据类型字符串,而不能传入对象
        alert(a);   //10

        //encodeURL(string)  对传入的字符串和特殊符号进行编码
        var msg = "http://www.baidu.com?username = 张三 & passwo = 123";
        var temo = encodeURI(msg);
        alert(temo);

        //对传入的字符串解码
        var t = decodeURI(temo);
        
    </script>
自定义函数
  • function必须是小写
  • 无需定义返回值类型
  • 参数定义无需使用返回值类型
  • return可以不写也可以return具体值或仅仅写return
  • 函数体中无论写不写return,都可以使用变量接收结果,但是不写return返回undefined即js函数执行之后一定有返回值
    <script>

        //函数创建格式
        /*
        *  function 函数名(形参列表) {
        *    函数体
        * }
        * */
        //函数求和
        function getSum(a, b) {
            return a+b;
        }

        var res = getSum(1, 2);
        alert(res);  //3

        function getSum(a, b) {

        }
        var res = getSum(1, 2);  //undefined  //说明js中函数无论加不加return必有返回值
        
    </script>

    <script>

        function getSum(a, b) {
            return a+b;
        }

        function getSum() {
            return "你好的";
        }

        var res = getSum(1, 2);
        alert(res);   //你好的

    </script>

  • 注意:
  • 对于js中函数,根本不存在重载,只有函数覆盖,即对于重名函数,后定义的会覆盖掉前定义的,即只会执行重名的最后的一个函数
  • 因为js中不存在函数重载,仅仅通过函数名来调用函数,即使实参与形参不匹配,也不会影响正常使用,若形参未赋值,使用默认值undefined
自定义对象
  • function定义对象
    <script>
        //1义/声明了一个对象
        function Person() {

        }
        
        //2声明对象
        function Person(n, a) {
            //定义且初始化对象属性
            this.name = n;
            this.age = a;
        }
		
		//3声明对象
		 function Person() {
            //定义且初始化对象属性
            this.name = "校长";
            this.age = 16;
        }
        //创建一个对象
        var p = new Person();
        alert(p);
    </script>


  • 声明属性且赋值
        <script>
        //定义/声明了一个对象
        /**
         *  定义了对象中的属性
         *  this:代表当前对象Person
         *
         * @constructor
         */
        /**
         *  1、使用this关键字,在对象声明阶段定义一个属性
         *  2、创建对象后的,使用对象.属性方式动态定义属性
         * */
        //1、在对象内部声明属性且赋值
        function Person(n, a) {
            //定义且初始化对象属性
            this.name = n;
            this.age = a;
        }

        //创建一个对象
        var p = new Person("下哦昂", 18);
        p.name = "小娃";
        alert(p.name);
        alert(p.age);

        //2、声明属性并赋值方式
        p.sex = "男";   //未Person对象声明并赋值属性
        alert(p.sex);
    </script>
对象直接量
  • 创建对象
    <script>

        //person对象创建完毕
        var person = {name : "校长", age : 18};

        alert(person.name);
        alert(person.age);

    </script>
  • 声明且赋值属性值
    <script>

        //person对象创建完毕
        var person = {name : "校长", age : 18};

        alert(person.name);
        alert(person.age);

        //属性赋值方式2
        person.name = "效力";

        //属性创建且赋值2
        person.sex = "男";
        alert(person.name);
        alert(person.sex);

    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
毕业设计,基于SpringBoot+Vue+MySQL开发的公寓报修管理系统,源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本公寓报修管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到事半功倍的效果。此公寓报修管理系统利用当下成熟完善的Spring Boot框架,使用跨平台的可开发大型商业网站的Java语言,以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。公寓报修管理系统有管理员,住户,维修人员。管理员可以管理住户信息和维修人员信息,可以审核维修人员的请假信息,住户可以申请维修,可以对维修结果评价,维修人员负责住户提交的维修信息,也可以请假。公寓报修管理系统的开发根据操作人员需要设计的界面简洁美观,在功能模块布局上跟同类型网站保持一致,程序在实现基本要求功能时,也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时,也实现了数据信息的整体化,规范化与自动化。 关键词:公寓报修管理系统;Spring Boot框架;MySQL;自动化;VUE
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值