js基礎(chǔ)語(yǔ)句

2019-11-07 23:58:10

字體：大中小

供稿：網(wǎng)友

整理一下學(xué)習(xí)js過程中的基礎(chǔ)知識(shí)，陸續(xù)的會(huì)深入學(xué)習(xí)并記錄~<!DOCTYPE html><html><body><p>javaScript 能夠直接寫入 HTML 輸出流中：</p><script>document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");</script><p>您只能在 HTML 輸出流中使用 <strong>document.write</strong>。如果您在文檔已加載后使用它（比如在函數(shù)中），會(huì)覆蓋整個(gè)文檔。</p></body></html>Javascript：對(duì)事件作出反應(yīng)<button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button>JavaScript：改變 HTML 內(nèi)容<script>function myFunction(){x=document.getElementById("demo"); // 找到元素x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容}</script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button>JavaScript：改變 HTML 圖像點(diǎn)擊燈泡就可以打開或關(guān)閉這盞燈<script>function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/i/eg_bulboff.gif";}else{element.src="/i/eg_bulbon.gif";}}</script><img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"><p>點(diǎn)擊燈泡來點(diǎn)亮或熄滅這盞燈</p>JavaScript：改變 HTML 樣式<script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000"; // 改變樣式}</script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button>JavaScript：驗(yàn)證輸入<input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("Not Numeric");}}</script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button><head> 或 <body> 中的 JavaScript通常的做法是把函數(shù)放入 <head> 部分中，或者放在頁(yè)面底部。這樣就可以把它們安置到同一處位置，不會(huì)干擾頁(yè)面的內(nèi)容。也可以把腳本保存到外部文件中。外部文件通常包含被多個(gè)網(wǎng)頁(yè)使用的代碼。外部 JavaScript 文件的文件擴(kuò)展名是 .js。如需使用外部文件，請(qǐng)?jiān)?<script> 標(biāo)簽的 "src" 屬性中設(shè)置該 .js 文件：<script src="myScript.js"></script>JavaScript 對(duì)大小寫敏感。JavaScript 會(huì)忽略多余的空格可以在文本字符串中使用反斜杠對(duì)代碼行進(jìn)行換行document.write("Hello /World!");JavaScript 注釋（同java）// 輸出標(biāo)題：document.getElementById("myH1").innerHTML="Welcome to my Homepage";// 輸出段落：document.getElementById("myP").innerHTML="This is my first paragraph.";單行注釋以 // 開頭。多行注釋以 /* 開始，以 */ 結(jié)尾。使用注釋來阻止執(zhí)行在行末使用注釋變量是存儲(chǔ)信息的容器。變量必須以字母開頭變量也能以 $ 和 _ 符號(hào)開頭（不過我們不推薦這么做）變量名稱對(duì)大小寫敏感（y 和 Y 是不同的變量）一個(gè)好的編程習(xí)慣是，在代碼開始處，統(tǒng)一對(duì)需要的變量進(jìn)行聲明。JavaScript 擁有動(dòng)態(tài)類型var x// x 為 undefinedvar x = 6;// x 為數(shù)字var x = "Bill";// x 為字符串極大或極小的數(shù)字可以通過科學(xué)（指數(shù)）計(jì)數(shù)法來書寫：var y=123e5;// 12300000var z=123e-5;// 0.00123JavaScript 對(duì)象var person={firstname:"Bill", lastname:"Gates", id:5566};var person={firstname : "Bill",lastname : "Gates",id : 5566};對(duì)象屬性有兩種尋址方式：name=person.lastname;name=person["lastname"];條件運(yùn)算符JavaScript 還包含了基于某些條件對(duì)變量進(jìn)行賦值的條件運(yùn)算符。greeting=(visitor=="PRES")?"Dear President ":"Dear ";如果變量 visitor 中的值是 "PRES"，則向變量 greeting 賦值 "Dear President "，否則賦值 "Dear"。JavaScript 表單驗(yàn)證必填（或必選）項(xiàng)目下面的函數(shù)用來檢查用戶是否已填寫表單中的必填（或必選）項(xiàng)目。假如必填或必選項(xiàng)為空，那么警告框會(huì)彈出，并且函數(shù)的返回值為 false，否則函數(shù)的返回值則為 true（意味著數(shù)據(jù)沒有問題）：<html><head><script type="text/javascript">function validate_required(field,alerttxt){with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} }}function validate_form(thisform){with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} }}</script></head><body><form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>E-mail 驗(yàn)證輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)。同時(shí)，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個(gè)點(diǎn)號(hào)：<html><head><script type="text/javascript">function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){with (thisform){if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}}</script></head><body><form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>HTML DOM （文檔對(duì)象模型）當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。JavaScript%20能夠改變頁(yè)面中的所有%20HTML%20元素JavaScript%20能夠改變頁(yè)面中的所有%20HTML%20屬性JavaScript%20能夠改變頁(yè)面中的所有%20CSS%20樣式JavaScript%20能夠?qū)?yè)面中的所有事件做出反應(yīng)通過%20id%20找到%20HTML%20元素var%20x=document.getElementById("intro");通過標(biāo)簽名找到%20HTML%20元素var%20x=document.getElementById("main");%20var%20y=x.getElementsByTagName("p");通過類名找到%20HTML%20元素通過類名查找%20HTML%20元素在%20IE%205,6,7,8%20中無效。修改%20HTML%20內(nèi)容的最簡(jiǎn)單的方法時(shí)使用%20innerHTML%20屬性。document.getElementById("p1").innerHTML="New%20text!";修改html的屬性值document.getElementById("image").src="landscape.jpg";改變?cè)氐臉邮?lt;button type="button" onclick="document.getElementById('id1').style.color='red'">點(diǎn)擊這里</button>對(duì)事件做出反應(yīng)HTML 事件的例子：當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)<html><head><script>function changetext(id){id.innerHTML="謝謝!";}</script></head><body><h1onclick="changetext(this)">請(qǐng)點(diǎn)擊該文本</h1></body></html>當(dāng)網(wǎng)頁(yè)已加載時(shí)當(dāng)圖像已加載時(shí)當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)當(dāng)輸入字段被改變時(shí)當(dāng)提交 HTML 表單時(shí)當(dāng)用戶觸發(fā)按鍵時(shí)onload 和 onunload 事件onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁(yè)面時(shí)被觸發(fā)。onload 事件可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁(yè)的正確版本。onload 和 onunload 事件可用于處理 cookie。<body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("已啟用 cookie")}else{alert("未啟用 cookie")}}</script><p>提示框會(huì)告訴你，瀏覽器是否已啟用 cookie。</p></body>onchange 事件onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用。onmouSEOver 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmousedown 事件，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件。添加和刪除節(jié)點(diǎn)向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。<div id="div1"><p id="p1">這是一個(gè)段落。</p><p id="p2">這是另一個(gè)段落。</p></div><script>var para=document.createElement("p");var node=document.createTextNode("這是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script>

上一篇：如何使用repo/git提交代碼

下一篇：使用UIAlertControllerStyleActionSheet IPAD崩潰 swift