文章目錄
- 一,HTML和CSS的練習
- --1,效果
- --2,HTML
- --3,css
- 二,JS
- --1,概述
- --2,入門案例
- 三,JS的語法
- --1,基礎語法
- --2,JS的分支陳述句
- --3,JS的回圈陳述句
- 四,JS的陣列
- --1,測驗
一,HTML和CSS的練習
–1,效果
–2,HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶注冊</title>
<!-- link引入一個外部的css檔案
rel用來說明檔案的型別,href用來指定檔案的位置
-->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<form>
<h1>用戶注冊</h1>
<div>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</div>
<div class="b">
支持中文、字母、數字、“-”、“_”的組合，4-20個字符
</div>
<div>
<input class="a" type="password" placeholder="設定密碼" name="pwd"/>
</div>
<div class="b">
建議使用數字、字母和符號兩種以上的組合，6-20個字符
</div>
<div>
<input class="a" type="password" placeholder="確認密碼" name="repwd"/>
</div>
<div class="b">
兩次密碼輸入不一致
</div>
<div>
<input class="a" type="number" placeholder="驗證手機" name="phone"/>
或
<a href="#">驗證郵箱</a>
</div>
<div id="c">
<input type="checkbox"/>
我已閱讀并同意
<a href="#">《京淘用戶注冊協議》</a>
</div>
<div>
<input type="submit" value="立即注冊"/>
</div>
</form>
</body>
</html>
–3,css
/* 輸入框:寬度 高度 字的顏色 字的大小 */
.a{
width: 350px;
height: 30px;
font-size: 20px;
color: gray;
padding:10px ;
}
/* 提示文字:字的大小 縮進 透明度 */
.b{
font-size: 8px;
/* 內邊距,是指內容和盒子邊框的距離 */
padding-left:20px;
/* 外邊距,是指盒子間的距離 */
margin:10px;
}
/* 按鈕:寬度 高度 字的顏色 背景色 */
input[type="submit"]{
width: 370px;
height: 50px;
color: white;
background-color: red;
border-color: red;
font-size: 25px;
}
/* 我已閱讀 */
#c{
/* margin: 30px; 上下左同時生效*/
margin-left: 30px;/* 單獨設定左邊距 */
margin-top: 20px;/* 單獨設定上邊距 */
margin-bottom: 20px;/* 單獨設定下邊距 */
}
/* 標題居中 */
h1{
/* text-align: center; */
margin-left: 110px;
}
二,JS
–1,概述
1,全稱是javascript,是腳本語言,只能在瀏覽器中運行.
2,js是一個基于物件和事件驅動的腳本語言.
基于物件:js也能像java一樣通過new自定義js物件
事件驅動:js可以讓網頁動起來,什么時候要觸發執行js代碼
3,js的特點
直譯式: 不需要編譯程序
弱型別: js不關心型別
4,js出現位置:
行內JS:
內部JS:
外部JS:
–2,入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js的用法</title>
<!-- 內部js,使用script標簽包裹著js代碼 -->
<script>
alert('hello js....')
</script>
</head>
<body>
<!-- 總結:
1,js的位置:行內JS,內部js,外部js
2,事件驅動:通過什么方式來觸發JS執行,這種方式就是事件
3,onXXX屬性:是HTML提供的一些屬性,用來添加js的動態效果
-->
<!-- 滑鼠點擊事件 -->
<div onclick="alert('歡迎點擊div')">我是div1</div>
<!-- 滑鼠雙擊事件 -->
<div ondblclick="alert(100)">我是div2</div>
<!-- 滑鼠劃入事件 -->
<div onmouseenter="alert(200)">我是div3</div>
<a onmouseenter="alert(300)">我是a</a>
</body>
</html>
三,JS的語法
–1,基礎語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js的基礎語法</title>
<!--在網頁中加入一段js代碼 -->
<script>
//3.JS的運算子
//? :
//練習:求兩數里的大值
var h = 10;
var i = 20;
var j = h > i ? h : i ;
alert(j);
//&& ||
//1 && 2 ,要求1和2都是true,結果才是true
當1為false時,后面的2倍短路提高了效率
//1 || 2 ,要求1或者2有一個true,結果是true
當1為true時,后面的2倍短路提高了效率
//== != === !==
//===比較型別和值,==只比值
alert(1=='1');//true
alert('1'=='1');//true
alert(1==='1');//false
alert('1'===1);//false
alert(1===1);//true
//+= -=
var count = 1;
count++;
count=count+1;
count+=1;
//% /
alert(5%2);//取余
alert(5/2);//2.5
//++ --
var z = 5;
var c = z+++z;//相當于拿著z++的結果再+z,因為++優先級高
alert(c);//11
var x = 10;
x = ++x;
alert(x);//11
var y = 10;
y = y++;
alert(y);//10
//2.JS的變數:JS是弱型別的語言
//練習:交換變數值
var m = 10;
var n = 5;
var o = n;
n = m;
m = o;
alert(m);
alert(n);
var a = 10;//number
a = 1.1 ;//number
a = true ;//boolean
a = 'javascript' ;//string
alert(a);//javascript
//1.JS的資料型別:number/string/boolean/null/undefined
alert(2.4+3.6);//6,number
//在JS中,字串可以用'' ""
alert('hello js');//string
alert("hello js");//string
alert(true);//boolean
alert(false);//boolean
alert(null);//null
alert(undefined);//undefined
</script>
</head>
<body>
</body>
</html>
–2,JS的分支陳述句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js的陳述句</title>
<script>
//1.分支結構
//if..else
// 例子: 判斷成績所屬的等級
var score = prompt('請在這里輸入分數...') ;
if(score>=80 && score<=100){
// alert('優秀');
//輸出到瀏覽器的控制臺中
console.log('優秀');
}else if(score>=60 && score<80){
alert('中等')
}else if(score>=0 && score<60){
alert('不及格')
}else{
alert('輸入有誤')
}
//switch..case --- 了解!!
//判斷用戶輸入的是幾,提示今天是星期幾...
var day = prompt('請輸入星期幾');
console.log(typeof day);//typeof查看day的型別,string
switch(day){
case '1':console.log('今天星期一');break;
case "2":console.log('今天星期二');break;
case "3":console.log('今天星期三');break;
case '4':console.log('今天星期四');break;
case '5':console.log('今天星期五');break;
case '6':console.log('今天星期六');break;
case '7':console.log('今天星期日');break;
}
//了解:typeof運算子查看型別
console.log(typeof 123);//number
console.log(typeof "123");//string
console.log(typeof true);//boolean
console.log(typeof 123+"abc");//numberabc
console.log(typeof 123+100);//number100
console.log(typeof (123+100));//number
</script>
</head>
<body>
</body>
</html>
–3,JS的回圈陳述句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js的陳述句</title>
<script>
//2.while回圈
//練習1:如果你有1個億,每天花500w,算算能花多少天
let days = 0;//記錄天數
let money = 100000000;//記錄錢
while(money>0){
money=money-5000000;//花錢
days++;//天數++
}
console.log(days);
//1.for回圈
//練習3:列印1~10的里奇數的個數
let count=0;//奇數的個數
for(let i=1;i<=10;i++){
if(i%2 == 1){//過濾奇數
count++;//修改個數
}
}
console.log(count);
//練習2:列印1~10的總和
let sum = 0;//記錄總和
for(let i=1;i<=10;i++){
sum = sum + i;//修改總和
}
console.log(sum);
//練習1:列印1~10
// for(var i=1; i<11 ; i++){//問題:變數的作用范圍太大,超出范圍還能用?????!!
for(let i=1; i<11 ; i++){//定義了有作用域的變數
console.log(i);
}
console.log(i);//var的i可以用(這是錯誤現象!),let的i會報錯(這才是對的現象!)
</script>
</head>
<body>
</body>
</html>
四,JS的陣列
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 js的陣列</title>
<script>
//練習2:找出陣列里的奇數資料
let m = [1.1,2,3,4,5,"張三"];
for(let i in m){//i是下標
if( m[i] % 2 == 1 ){//奇數
console.log(m[i]);
}
}
//練習1:統計整數陣列中,偶數的總和
let x = [1,2,3,4,5,6];
let y = 0;//記錄和
for(let i in x){//i是下標
if( x[i] % 2 == 0 ){//偶數
y = y + x[i];
}
}
console.log(y);
//1,定義陣列
//方式1:
let a = new Array();//創建陣列
console.log(a);//列印陣列
console.log(a.length);//獲取陣列長度
//方式2:
let b = [];//創建陣列
console.log(b);
console.log(b.length);
//2,添加資料
let c = new Array(1,1.1,true,"jack",null);
let d = [1,1.1,true,"jack",null];
console.log(c);
console.log(d);
//3,獲取資料--根據下標遍歷
//i是下標,c[i]是根據下標獲取資料,c.length是陣列的長度
for(let i = 0; i<c.length ;i++){
console.log(c[i]);
}
//foreach : for(int a : b)//a是陣列里的資料,b是陣列名
//forin : for(let a in b)//???
for(let i in c){//i是下標
console.log(i);//下標
console.log(c[i]);//下標對應的資料
}
//優勢1:js是弱型別的語言,js的陣列可以存放各種型別的資料(java里的Object[]也可以)
//優勢2:js里的陣列長度,隨時可以變
c[100]='ok';
console.log(c);//
console.log(c.length);//101
</script>
</head>
<body>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374808.html
標籤：其他
上一篇：JavaScript之存盤
下一篇：從零開始搭建自己的個人博客