js基礎語句

2019-11-07 23:58:10

字體：大中小

來源：轉載

供稿：網友

整理一下學習js過程中的基礎知識，陸續的會深入學習并記錄~<!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>。如果您在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。</p></body></html>Javascript：對事件作出反應<button type="button" onclick="alert('Welcome!')">點擊這里</button>JavaScript：改變 HTML 內容<script>function myFunction(){x=document.getElementById("demo"); // 找到元素x.innerHTML="Hello JavaScript!"; // 改變內容}</script><button type="button" onclick="myFunction()">點擊這里</button>JavaScript：改變 HTML 圖像點擊燈泡就可以打開或關閉這盞燈<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>點擊燈泡來點亮或熄滅這盞燈</p>JavaScript：改變 HTML 樣式<script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000"; // 改變樣式}</script><button type="button" onclick="myFunction()">點擊這里</button>JavaScript：驗證輸入<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()">點擊這里</button><head> 或 <body> 中的 JavaScript通常的做法是把函數放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件：<script src="myScript.js"></script>JavaScript 對大小寫敏感。JavaScript 會忽略多余的空格可以在文本字符串中使用反斜杠對代碼行進行換行document.write("Hello /World!");JavaScript 注釋（同java）// 輸出標題：document.getElementById("myH1").innerHTML="Welcome to my Homepage";// 輸出段落：document.getElementById("myP").innerHTML="This is my first paragraph.";單行注釋以 // 開頭。多行注釋以 /* 開始，以 */ 結尾。使用注釋來阻止執行在行末使用注釋變量是存儲信息的容器。變量必須以字母開頭變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）變量名稱對大小寫敏感（y 和 Y 是不同的變量）一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明。JavaScript 擁有動態類型var x// x 為 undefinedvar x = 6;// x 為數字var x = "Bill";// x 為字符串極大或極小的數字可以通過科學（指數）計數法來書寫：var y=123e5;// 12300000var z=123e-5;// 0.00123JavaScript 對象var person={firstname:"Bill", lastname:"Gates", id:5566};var person={firstname : "Bill",lastname : "Gates",id : 5566};對象屬性有兩種尋址方式：name=person.lastname;name=person["lastname"];條件運算符JavaScript 還包含了基于某些條件對變量進行賦值的條件運算符。greeting=(visitor=="PRES")?"Dear President ":"Dear ";如果變量 visitor 中的值是 "PRES"，則向變量 greeting 賦值 "Dear President "，否則賦值 "Dear"。JavaScript 表單驗證必填（或必選）項目下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，并且函數的返回值為 false，否則函數的返回值則為 true（意味著數據沒有問題）：<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 驗證輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號：<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 （文檔對象模型）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。JavaScript%20能夠改變頁面中的所有%20HTML%20元素JavaScript%20能夠改變頁面中的所有%20HTML%20屬性JavaScript%20能夠改變頁面中的所有%20CSS%20樣式JavaScript%20能夠對頁面中的所有事件做出反應通過%20id%20找到%20HTML%20元素var%20x=document.getElementById("intro");通過標簽名找到%20HTML%20元素var%20x=document.getElementById("main");%20var%20y=x.getElementsByTagName("p");通過類名找到%20HTML%20元素通過類名查找%20HTML%20元素在%20IE%205,6,7,8%20中無效。修改%20HTML%20內容的最簡單的方法時使用%20innerHTML%20屬性。document.getElementById("p1").innerHTML="New%20text!";修改html的屬性值document.getElementById("image").src="landscape.jpg";改變元素的樣式<button type="button" onclick="document.getElementById('id1').style.color='red'">點擊這里</button>對事件做出反應HTML 事件的例子：當用戶點擊鼠標時<html><head><script>function changetext(id){id.innerHTML="謝謝!";}</script></head><body><h1onclick="changetext(this)">請點擊該文本</h1></body></html>當網頁已加載時當圖像已加載時當鼠標移動到元素上時當輸入字段被改變時當提交 HTML 表單時當用戶觸發按鍵時onload 和 onunload 事件onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。onload 和 onunload 事件可用于處理 cookie。<body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("已啟用 cookie")}else{alert("未啟用 cookie")}}</script><p>提示框會告訴你，瀏覽器是否已啟用 cookie。</p></body>onchange 事件onchange 事件常結合對輸入字段的驗證來使用。onmouSEOver 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件。添加和刪除節點向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。<div id="div1"><p id="p1">這是一個段落。</p><p id="p2">這是另一個段落。</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