HTML的學習-CSDN博客
從html的學習中 其實我已經用到了 JavaScript的腳本 （GPT）
例如
echo '<script>alert("賬號密碼錯誤"); window.location="index.html";</script>';彈窗 然后定位到 index.html
這里能夠讓我們更加快速執行一些操作
JS 用法
首先 JS代碼 需要通過 <script></script>包裹其次 可以寫入在 head 和 body中最簡單的JS就是類似XSS的彈窗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript學習</title>
</head>
<body><script>alert("這是一個簡單的彈窗");</script></body>
</html>JS 寫html信息
document.write("<h1>這是通過JS document輸出的語句</h1>");我們可以發現 通過document 可以加上html的標簽 然后輸出內容
然后我們可以通過id的指定 實現javascript的調用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function check(){var check123 = document.getElementById('check');if(check123.innerHTML === '這是一個js腳本'){check123.innerHTML='6666';}else{check123.innerHTML='這是一個js腳本';}}</script>
</head>
<body><p id="check">這是一個js腳本</p><button type="button" onclick="check()">點我一下咯</button>
</body>
</html>發現 這個就很簡單的寫法 通過 getID 獲取到目標地點 然后inner 替換成666
在下面的button時觸發
這就是一個最簡單的javascript腳本
外部引用的話就是下面這個例子
?這樣就實現了javascrip的運行
在瀏覽器中執行javascript
這里要學習在瀏覽器中執行
我們看看我們定義的是check函數
所以我們可以通過開發者工具打開控制臺
執行完后可以發現 他已經在頁面中進行了跳轉
在這里可以實現多行執行
?JS的輸出
存在這些輸出格式
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。一個一個實現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<script>window.alert("WARNING!!!");
</script>
</body>
</html>?下面可以寫入一個時間在html中
寫入參數 需要文檔加載完畢后操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<script>document.write(Date())
</script>
</body>
</html>
?下面是對元素的控制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p id="check">我的第一個段落。</p><button type='button' onclick="myFunction()">點我</button><script>function myFunction() {document.getElementById('check').innerHTML = Date();}</script>
</body>
</html>JS的語法
首先就是定義參數
var a,ba= 4
b = 'four'JS的注釋是 //
在 // 后面的JS 不會執行
JavaScript 語法 | 菜鳥教程
var length = 16;???????????????????????????????? ?// Number 通過數字字面量賦值
var points = x * 10;????????????????????????????? // Number 通過表達式字面量賦值
var lastName = "Johnson";???????????????????????? // String 通過字符串字面量賦值
var cars = ["Saab", "Volvo", "BMW"];????????????? // Array? 通過數組字面量賦值
var person = {firstName:"John", lastName:"Doe"};??// Object 通過對象字面量賦值JavaScript 對大小寫是敏感的。
break 用于跳出循環。
catch 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。
continue 跳過循環中的一個迭代。
do ... while 執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。
for 在條件語句為 true 時，可以將代碼塊執行指定的次數。
for ... in 用于遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。
function 定義一個函數
if ... else 用于基于不同的條件來執行不同的動作。
return 退出函數
switch 用于基于不同的條件來執行不同的動作。
throw 拋出（生成）錯誤 。
try 實現錯誤處理，與 catch 一同使用。
var 聲明一個變量。
while 當條件語句為 true 時，執行語句塊。這是JS函數的介紹
多行注釋 /**/
對于變量的命名 這里也需要注意
變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）其次注意一下數組的創建
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
對象的創建
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};對象屬性有兩種尋址方式：
實例
name=person.lastname;
name=person["lastname"]; ?這里注意對象的尋址即可
??JS的對象
這個就比較重要了
這里直接引用菜鳥教程的例子
屬性就是汽車的組成
方法就是使用汽車的方式
對象就是一個大的汽車
在JS中任何事務都可以是一個對象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};這里 我們可以通過person.firstName 獲取到 John其他同理或者可以使用person[firstName] 獲取到 John下面是函數作為方法存儲在對象內
var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;}
};我們發現 fullName 是一個函數
這里就是方法
我們可以通過person.fullName() 調用document.getElementById("demo1").innerHTML = "不加括號輸出函數表達式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函數執行結果：" + person.fullName();兩個調用方式 不一樣輸出內容是不加括號輸出函數表達式：function() { return this.firstName + " " + this.lastName; }加括號輸出函數執行結果：John Doe
這些就是JS最基礎的對象了
我寫的也很基礎
JS函數
最簡單的調用函數方式
function test(){//代碼段
}
如果是帶參數的函數
function test(a,b){alert(a+b);
}這樣就可以執行帶參數的內容
然后就是返回值
使用return即可
function test(a,b){retrun a+b;
}然后就是全局和局部變量
這里還有一個 可配置全局和不可配置全局
var var1 = 1; // 不可配置全局屬性
var2 = 2; // 沒有使用 var 聲明，可配置全局屬性console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2delete var1; // false 無法刪除
console.log(var1); //1delete var2;
console.log(delete var2); // true
console.log(var2); // 已經刪除 報錯變量未定義JS的作用域
其實就是全局變量這些
myFunction();
document.getElementById("demo").innerHTML = "carName 的類型是：" + typeof carName;
function myFunction()
{var carName = "Volvo";
}這里我們發現 我們在局部變量 定義前就已經通過innerHTML 輸出 這里是不可以的輸出內容是carName 的類型是：undefined但是這里注意
myFunction();
document.getElementById("demo").innerHTML = "carName 的類型是：" + typeof carName;
function myFunction()
{carName = "Volvo";
}
這里是可以的 有什么區別呢 就是 carName前是否存在var
如果沒有var? 就默認為全局變量
GPT的回答
當使用 var 關鍵字聲明變量時，該變量會被限定在當前的函數作用域或全局作用域中。
但是，如果在聲明變量時沒有使用 var、let 或 const，JavaScript 引擎會將其視為全局變量
并將其添加到全局對象（在瀏覽器環境下是 window 對象）的屬性中?JS的事件
這里我感覺是目前用戶遇到js最多的地方了
通過html的事件 執行js指令
HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊
<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>這里是通過點擊 修改 id=demo的內容<button onclick="this.innerHTML=Date()">現在的時間是?</button>而通過 this 是修改當前 button的指令
下面是可以操作的事件
onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 鼠標指針移動到指定的元素上時發生
onmouseout 用戶從一個 HTML 元素上移開鼠標時發生
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載就是 上面的內容執行的時候 就會執行js
JS字符串
我們可以通過類似python的format的方式 在字符串中加入變量const name='hel'const year='17'const message= `My name is ${name} and I'm ${year} years old.`;我們發現是使用 ${}來進行操作
JS條件運算符
其他都是一樣的
這里知識介紹一下 條件運算符
name=(age<18)?"Vam":"Same"這里通過比對age是否小于18來輸出如果小于 就輸出Vam 如果大于 就輸出 SameJS IF ELSE? For
<script>
function myFunction(){var x="";var time=new Date().getHours();if (time<20){x="Good day";}document.getElementById("demo").innerHTML=x;
}
</script>通過javascript 獲取到時間（精確到小時） 然后通過document輸出這里介紹一下for循環
其實和c差不多
for(var i-0;i<cars.length;i++){decoument.write('cars[i]')}for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
break 語句用于跳出循環。continue 用于跳過循環中的一個迭代。這些在其他代碼中也都學過了
基礎內容差不多就這些了，這個文章只是個人不做開發了解javascrip
所以東西是很簡單的
照樣
我們來編寫一個js文件完善之前html的頁面
1.js
function check() {var name = document.getElementById("name");var passwd = document.getElementById("passwd");var oError = document.getElementById("error");var isError = true;if (name.value.trim() === '') {window.alert("賬號不能為空");isError = falsereturn}else if (passwd.value.trim() === '') {window.alert("密碼不能為空");isError = falsereturn}else if (name.value.length > 20 || name.value.length < 3) {oError.innerHTML = "賬號長度不對";isError = false;return} else {// 向后端發送驗證請求// 假設使用AJAX進行異步請求var xhr = new XMLHttpRequest();xhr.open('POST', '/test-web/dir.php', true); xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {var response = JSON.parse(xhr.responseText);if (response.success) {window.alert("登錄成功");} else {oError.innerHTML = response.errorMessage;}} else {window.alert("登錄請求失敗");}}};var data = JSON.stringify({username: name.value.trim(),password: passwd.value.trim()});xhr.send(data);}setTimeout(function() {error.innerHTML = "";}, 2000);
}
index.html
<<!DOCTYPE html>
<html lang="en">
<!---flag{fuc3-yo3}-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <script type="text/javascript" src="js/1.js"></script> --><title>學習測試一下網站解法</title>
</head>
<body><h1> 我需要學會html語言基本 </h1><hr><h2> 基礎的東西我也要會</h2><p> 段落和標題的區別就是這個 其實我就是正文 </p><hr><p> 不同段落需要 重新獲取p標簽</p><a href="帥照.jpg" download>下載帥照</a><p>這是一個段落標簽<br>但是我使用br分段</p><p> 這里介紹一下表格</p><table border="12"><thead><tr><th> id</th><th> name</th><th> passwd</th></tr></thead><tbody><tr><td> 1</td><td> admin</td><td> admin123</td></tr></tbody></table> <p> 這里介紹一下列表</p><ul><li>1111111:</li><li>2222222:</li></ul><form action="/test-web/dir.php" method="post"> <label for="name">用戶名</label><input type="text" name="name" id="name"><br><label for="passwd">密碼:</label><input type="password" name="passwd" id="passwd"><br><button type="submit" onclick="check()">登入</button><p id="error"><br></p><a href="http://127.0.0.1:3000/test-web/zhuce.php">注冊</a>
</form></body>
</html>這里是修改后的 后面的js鏈接后端是通過gpt生成的
)
+數據集（一）)
