cgb2106-day08

古城微笑少年丶 2021-09-11 03:22 317阅读 0赞

### 文章目录 ###

*   *  一,模拟服务器解析数据
     *  二,实现CSS代码和HTML代码的分离
     *   *  \--1,新建css文件
         *  \--2,在HTML网页文件中,引入css文件
     *  三,JS
     *   *  \--1,概述
         *  \--2,入门案例
         *  \--3,基础语法
         *  \--4,js的语句
         *  \--5,js的数组
         *  \--6,JS的函数

## 一,模拟服务器解析数据 ##

package cn.tedu.test;
    
    public class TestUrl { 
        public static void main(String[] args) { 
    String url="http://127.0.0.1:8848/cgb2106/test04.html?" +
            "user=1&age=123&sex=1&like=ppq&like=ps&edu=2";
    // 1,把字符串按照?切割split("?"),得到数组a,两个字符串
            String[] a = url.split("\\?");
    // 2,重点解析a[1],得到user=1&age=123&sex=1&like=ppq&like=ps&edu=2
            String s = a[1];
    // 3,把字符串按照&切割split("&"),得到数组b
            String[] b = s.split("&");
            //[user=1,age=123,sex=1,like=ppq,like=ps]
    // 4,遍历数组,再按照=切割,又得到数组c
            for(String str : b){ 
                String[] c =str.split("=");
    // 5,只获取c[1]就是用户从浏览器输入的数据
                String data = c[1];
                System.out.println(data);
            }
    // TODO 6,利用jdbc把数据入库/查库
        }
    }

## 二,实现CSS代码和HTML代码的分离 ##

![在这里插入图片描述][0b70395255e34f10b37d4bb77c546fb3.png]

### –1,新建css文件 ###

/* 1.标签名选择器: 选中网页中所有标签名是div的元素*/
    div{ 
    	background-color: skyblue;/* 给div加背景色 */
    }
    span{ 
    	font-size: 40px; /* 给span加大字号 */
    }
    /* 2. class选择器: 给指定元素加class属性 , 通过.获取class的值 ,值可以相同 */
    .a{ 
    	color: crimson;/* 给第一个span元素,改变字的颜色 */
    }
    /* 3. id选择器: 给指定的元素加id属性 , 通过#获取id的值 , 值不要相同 */
    #b{ 
    	font-family: "微软雅黑";/* 字体 */
    }
    /* 4. 分组选择器: 把多个选择器的结果组成一组,统一设置样式 */			
    #b,.a{ 
    border:2px solid red; /* 指定宽度,实线,边框颜色 */
    border-radius:5px;    /* 圆角边框 */
    }
    /* 5. 属性选择器: 按照指定属性选中元素 */
    input[type="text"]{ 
    text-shadow: 5px 5px 5px #FF0000;/* 加阴影 */
    text-align:center;/* 文字居中 */
    }

### –2,在HTML网页文件中,引入css文件 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 css选择器</title>
    		
    		
    		<link rel="stylesheet" href="1.css"/>
    		
    	</head>
    	<body>
    		<input type="text" placeholder="用户名" />
    		<input type="text" placeholder="密码" />
    		<input type="number" placeholder="年龄" />
    		
    		<div id="b">我是div1</div>
    		<div class="a">我是div2</div>
    		<span class="a">我是span1</span>
    		<span>我是span2</span>
    		<a href="#">点我</a>
    	</body>
    </html>

## 三,JS ##

### –1,概述 ###

js全称是JavaScript, 只能在浏览器被执行  
基于对象的事件驱动的脚本语言  
特点 : 弱类型 , 直译式  
好处 : 增强了用户的交互性 , 相对安全 , 跨平台  
位置: 行内js , 内部js , 外部js

### –2,入门案例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 js的语法</title>
    		
    		
    		<script> alert(666); </script>
    	</head>
    	<body>
    		
    		<a href="#" onclick="alert(100)">onclick单击</a>	
    		<a href="#" ondblclick="alert(200)">ondblclick双击</a>	
    		<a href="#" onmouseenter="alert(300)">鼠标划入</a>	
    		<a href="#" onmouseout="alert(400)">鼠标划出</a>	
    	</body>
    </html>

### –3,基础语法 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 JS的语法</title>
    		
    		<script> // 1. JS的数据类型: 是弱类型的语言,也有几种:number string boolean null undefined var a = 10 ; a = 1.9+2.6 ; a = 1.9+2.1 ; a = "hello js" ; a = 'hello js'; a = true ; a = null ; alert("a的值:"+a) ; var b = '123'+'456'; //JS也可以拼串 alert("b的值:"+b);//只定义而不赋值的变量,会得到提示undefined // 2. JS的运算符 // % ++ -- var c = 10%3 ; c = c++; alert(c); //1 //alert(++c); var d = 1; //d = d+1; d += 1 ; alert(d); var e = 1 ; var f = '1' ; alert(e==f); //数据的值,true alert(e===f); //数据的值+类型,false //三元运算符: 比较两个数里的大值 var g = prompt("输入数字") ; //从浏览器输入的值 var h = prompt("输入数字") ; alert(g>h?1:0); //typeof: 获取数据的类型 alert(typeof 100);//number alert(typeof '100');//string </script>
    	</head>
    	<body>
    	</body>
    </html>

### –4,js的语句 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 JS语句</title>
    		
    		
    		<script> // 3. while //需求: 如果给你1个亿,每天花一半,能花多少天 var c = 0 ;//记录天 var d = 100000000 ;//记录钱 while(d > 1){ d = d/2 ; //每天花一半 c++; //天数++ } console.log("总共花几天: "+c); // 2. for // 打印1~10 for(var i=1;i<11;i++){ console.log(i);//在浏览器用f12打开控制台 } //计算1~100里4的倍数的和 var sum = 0; for(var i=1;i<101;i++){ if(i % 4 == 0){ sum += i ; } } console.log("总和是: "+sum); // 1. if...else var a = prompt("请输入名字"); if(a == 'wyf' ){ //alert("大碗牢饭"); console.log("大碗牢饭"); }else{ alert("大碗宽面"); } // 例子: 接收用户输入的成绩，判断成绩所属的等级 var b = prompt("请输入成绩"); if(b>=80 && b<=100){ alert("优秀"); }else if(b>=60 && b<80){ alert("中等"); }else if(b>=0 && b<60){ alert("不及格"); }else{ alert("输入有误"); } </script>
    	</head>
    	<body>
    	</body>
    </html>

### –5,js的数组 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试js的数组</title>
    		<script> // 1.定义数组 var a = new Array(); //js是弱类型的语言,对数据的类型要求并不高.可以存各种类型的数据,在java里要用Object[] var b = new Array(1, 1.1, true, null, 'jack' ); var c = [ ] ; //js里的数组,长度可以随时改变 c = [1, 1.1, true, null, 'jack']; console.log(c); //获取数组的数据 console.log(c.length); //获取数组的长度 console.log(c[2]); // 2.遍历数组 for(var i = 0 ; i < c.length ;i++){ console.log(i + "---" + c[i] ); //下标 和 根据下标获取数据 } // 3.for ... in for(var i in c){ //i是下标 console.log(i+"~"+c[i]); } </script>
    		
    	</head>
    	<body>
    	</body>
    </html>

### –6,JS的函数 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 js的函数</title>
    		
    		<script> // 语法: function 函数名(参数列表){ 函数体 } //方式1: //1, 定义函数 function a(){ //不需要参数 console.log(100); } function a2(a,b){ //需要参数 console.log(a+b); } function a3(a){ //有返回值的函数 return a ;//通过return返回结果 } //2, 调用函数 var v = a3('jack'); console.log(v+'你好'); a2(1, 1.2); a2('jack', 10); a(); //方式2: //1, 定义函数 var b = function(){ console.log(1000); } var b2 = function(a,b){ console.log(a*b); } var b3 = function(a){ return 'hello js' ; } //2, 调用函数 var va = b3(10); console.log(va); b2(2,10); b(); </script>
    	</head>
    	<body>
    	</body>
    </html>

[0b70395255e34f10b37d4bb77c546fb3.png]: /images/20210911/79ca6c312f3d48eebcff4bdd88c50cc0.png