javascript的理解及經典案例
js的簡介：
JavaScript是一種能讓你的網頁更加生動活潑的程式語言，也是目前網頁中設計中最容易學又最方便的語言。
你可以利用JavaScript輕易的做出親切的歡迎訊息、漂亮的數字鐘、有廣告效果的跑馬燈及簡易的選舉，還可以顯示瀏覽器停留的時間。讓這些特殊效果提高網頁的可觀性。
javascript現在可以再網頁上做很多很多事情，網頁特效，操作dom，html5遊戲（基於html5和JavaScript的結合），動畫等等特效，還可以實現拉去後臺數據（通過ajax）,不僅可以做前臺還可以做後臺，
比如node.js等等，再比如一些桌面引擎node-webkit可以將JavaScript渲染成桌面應用，在比如unity3d可以使用JavaScript寫遊戲（unity3d使用的JavaScript的語法，特性等等）
JavaScript語言的特點：
1）.JavaScript主要用來向HTML頁面中新增互動行為。
2）.JavaScript是一種指令碼語言，語法和Java相似。
3）.JavaScript一般用來編寫客戶端的指令碼。
4）.JavaScript是一種解釋型語言，邊執行邊解釋。
JavaScript知識點解釋：
1、運算子
運算子就是完成操作的一系列符號，它有七類： 賦值運算子、算術運算子、比較運算子、邏輯運算子、條件運算、位操作運算子和字串運算子。
2、表示式
運算子和運算元的組合稱為表示式，通常分為四類：賦值表示式、算術表示式、布林表示式和字串表示式。
3、語句
Javascript程式是由若干語句組成的，語句是編寫程式的指令。Javascript提供了完整的基本程式設計語句，它們是： if~else,賦值語句、switch選擇語句、while迴圈語句、for迴圈語句、do while迴圈語句、break迴圈中止語句和continue迴圈中斷語句。
注意：在判斷的時候，只有這幾種結果為false:即
如果邏輯物件無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN，那麼物件的值為 false。否則，其值為 true（即使當自變數為字串 "false" 時）！
4、函式
函式是命名的語句段，這個語句段可以被當作一個整體來引用不著和執行。使用函式要注意以下幾點：
1）函式由關鍵字function定義；
2）函式必須先定義後使用，否則將出錯；
3）函式名是呼叫函式時引用的名稱，它對大小寫是敏感的，呼叫函式時不可寫錯函式名；
4）引數表示傳遞給函式使用或操作的值，它可以是常量，也可以是變數；
5）return語句用於返回表示式的值，也可以沒有。
5、物件
Javascript的一個重要功能就是基於物件的功能，通過基於物件的程式設計，可以用更直觀、模組化和可重複使用的方式進行程式開發。 一組包含資料的屬性和對屬性中包含資料進行操作的方法，稱為物件。比如要設定網頁的背景顏色，所針對的物件就是document，所用的屬性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍色。
6、事件
使用者與網頁互動時產生的操作，稱為事件。絕大部分事都由使用者的動作所引發，如：使用者按滑鼠的按鍵，就產生onclick事件，若滑鼠的指標在連結上移動，就產生onmouseover事件等等。在Javascript中，事件往往與事件處理程式配套使用。
7、變數
如 var myVariable = "some value";
經典案例：
js抽獎
包含的知識點：計時器的使用，document物件的方法的使用，js陣列的使用，js內建物件的使用，js系統函式的使用，註冊事件。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"
var alldataarr = alldata.split(",");
var num = alldataarr.length - 1;
var timer;
function start() {
clearInterval(timer);h
timer = setInterval('change()', 10);
}
function change() {
document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
}
function GetRnd(min, max) {
return parseInt(Math.random() * (max - min + 1));
}
function ok() {
clearInterval(timer);
document.getElementById("showresult").value = document.getElementById("oknum").innerText;
}
</script>
</head>
<body>
<div id="oknum" name="oknum" >請單擊開始</div>
<button onclick="start()" accesskey="s">開始</button> <!--//accesskey 屬性規定啟用（使元素獲得焦點）元素的快捷鍵。-->
<button onclick="ok()" accesskey="o">停止</button>
您的選擇是：
<input type="text" id="showresult" value=""/>
</body>
</html背景圖片的切換
包含的知識點：計時器的使用，document物件的方法的使用
<script type="text/javascript"> window.onload = function () { setInterval(step, 1000); } var num = 1; function step() { if (num < 5) { num++; } else { num = 1; } var dom = document.getElementById("imgId"); //更改它images的src屬性 dom.src = 'images/' + num + '.jpg'; } </script> </head> <body> <img src="images/1.jpg" width="500" height="500" id="imgId"/> </body> </html>
跑馬燈：
包含的知識點：計時器的使用，document物件的方法的使用，系統函式的使用，滑鼠事件的使用，節點操作的使用，迴圈語句，判斷語句
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/JavaScript">
( function ($) {
$.fn.extend({
RollTitle: function (opt, callback) {
if (!opt) var opt = {};
var _this = this;
_this.timer = null;
_this.lineH = _this.find("li:first").height();
_this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10);
_this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000,
_this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000;
if (_this.line == 0) this.line = 1;
_this.upHeight = 0 - _this.line * _this.lineH;
_this.scrollUp = function () {
_this.animate({
marginTop: _this.upHeight
}, _this.speed, function () {
for (i = 1; i <= _this.line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
});
}
_this.hover(function () {
clearInterval(_this.timer);
}, function () {
_this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan);
}).mouseout();
}
})})(jQuery);
</script>
</head>
<body>
<ul id="RunTopic" style="list-style:none ;background:#0ff ;border:2px dashed blue;width:100px;" >
<li style="color:red">i love you</li>
<li style="color:pink">I LOVE YOU</li>
<li style="color:blue">I LOVE you</li>
<li style="color:green">i LOVE YOU</li>
<li style="color:yellowgreen">I love YOU</li>
</ul>
<br/>
<input type="button" onclick="test();" value="跑馬燈" >
<script type="text/javascript">
function test()
{
$("#RunTopic").find("li:first").appendTo($("#RunTopic"));
}
</script>
</body>
</html>javascript的一番理解，就到這了，以後有關於js的案例會放到這裡。希望能幫到大家！！！