cgb2106-day08
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2106-day08相关的知识，希望对你有一定的参考价值。
文章目录
一,模拟服务器解析数据
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代码的分离
–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>
<!-- 引入外部的css文件 -->
<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>
<!-- 2. 内部js -->
<script>
alert(666);
</script>
</head>
<body>
<!-- 1. 行内js
事件驱动: 必须触发才会执行JS的动态效果
-->
<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>
<!-- 内部js -->
<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>
<!-- HTML中引入JS代码 -->
<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的函数
在这里插入代码片
–7,JS的对象
在这里插入代码片
以上是关于cgb2106-day08的主要内容，如果未能解决你的问题，请参考以下文章