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的案例會放到這裡。希望能幫到大家!!!
以上這篇javascript的理解及經典案例分析就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。