JavaScript快速入門

時間 2019-12-06

原文原文鏈接

函數有return，可是沒有返回值聲明。javascript

function myFunction()  //函數名前面沒有聲明返回值類型
{
var x=5;
return x;
}

var myVar=myFunction();

局部 JavaScript 變量，只能在函數內部訪問它，只要函數運行完畢，本地變量就會被刪除。html

全局 JavaScript 變量，在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它，在頁面關閉後被刪除。。java

向未聲明的 JavaScript 變量來分配值，若是您把值賦給還沒有聲明的變量，該變量將被自動做爲全局變量聲明。node

如需把兩個或多個字符串變量鏈接起來，請使用 + 運算符。若是把數字與字符串相加，結果將成爲字符串。瀏覽器

a="What a very";
b="nice day";
c=txt1+txt2;

if語句服務器

<button onclick="myFunction()">點擊這裏</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

JavaScript 錯誤 - Throw、Try 和 Catch

//
try{
  adddlert("Welcome guest!");
}
catch(err){
  txt=err.message;
  alert(txt);
}

//throw自定義錯誤，能夠是 JavaScript 字符串、數字、邏輯值或對象。

try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }

JavaScript 表單驗證

JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。cookie

被 JavaScript 驗證的這些典型的表單數據有：app

用戶是否已填寫表單中的必填項目？
用戶輸入的郵件地址是否合法？
用戶是否已輸入合法的日期？
用戶是否在數據域 (numeric field) 中輸入了文本？

有時候，我在一個程序代碼中，屢次須要使用某對象的屬性或方法，照之前的寫法，都是經過:對象.屬性或者對象.方法這樣的方式來分別得到該對象的屬性和方法，着實有點麻煩，學習了with語句後，能夠經過相似以下的方式來實現：
with(object)
{
       var str = 屬性1;
} 去除了屢次寫對象名的麻煩。 dom

下面驗證Email表哥是否爲空：函數

<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>

DOM - 改變 HTML

//改變 HTML 輸出流
document.write(Date());
//改變 HTML 內容
document.getElementById("p1").innerHTML="New text!";
//改變 HTML 屬性
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>
//

DOM - 改變 CSS

//改變 HTML 樣式
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById('p2').style.visibility='visible'
</script>

DOM Style 對象的全部屬性：

http://www.w3school.com.cn/jsref/dom_obj_style.asp#text

JavaScript HTML DOM 對事件作出反應

html的元素能夠擁有事件，下面的兩個例子都擁有onclick事件：

<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>
<button onclick="displayDate()">點擊這裏</button>

使用 JavaScript 來向 HTML 元素分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。onload 和 onunload 事件可用於處理 cookie。

onchange 事件常結合對輸入字段的驗證來使用。下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

<input type="text" id="fname" onchange="myFunction()">

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

onmouseover 和 onmouseout 事件，可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

更多DOM 事件對象查詢：http://www.w3school.com.cn/jsref/dom_obj_event.asp

添加和刪除新的 HTML 元素

如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素。必定要按照順序來添加。而刪除已有的 HTML 元素，您必須首先得到該元素的父元素下面是例子：

<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>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

這是經常使用的解決方案：找到您但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。