文章目錄
- 一,模擬服務器決議資料
- 二,實作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代碼的分離
–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的函式
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292066.html
標籤：其他
上一篇：淺談javascript的原型和原型鏈(新手懵懂想學會原型鏈？看這篇文章就足夠啦！！！)
下一篇：2021-8-5 VUE