程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> javascript基礎【一】

javascript基礎【一】

編輯:關於PHP編程

javascript基礎【一】


2015/11/13 16:10:04

javascript自誕生之初就處於爭論之中,但是這依舊不影響其成為今天WEB編程的主流語言。最初的javascript設計用於在浏覽器端提供數據交互、畫面渲染、會話認證等動態功能,如今node.js的流行使得javascript擴展到了服務器端。

javascript作為一門弱類型的腳本語言,語法並不復雜,作為今時代的程序猿們,無論是否進行WEB開發,熟悉了解javascript都百利無一害。所以今天就讓我們來干淨利落地認識下javascript吧!

一、什麼是javascript?

javascript是一種動態腳本語言,專門用於Web應用開發,最主要的功能是為頁面添加動態行為效果,具體有:

  • 將動態文本嵌入到HTML頁面;
  • 響應浏覽器事件(javascript是一種事件相應語言,對於用戶鼠標點擊、移動等行為都可以進行響應);
  • 讀寫HTML元素(如表單提交等);
  • 在數據提交到服務器前驗證數據;
  • 檢測訪客的浏覽器信息;
  • 控制cookie,包括創建和修改等;
  • 基於Node.js技術進行服務器端編程;

可以說,javascript是在客戶端針對HTML頁面動態行為進行編程的直譯型腳本語言,使得Web浏覽器不僅僅是顯示用戶頁面那麼簡單。但是也正是由於javascript部署在客戶端,因此其安全性一直是人們關注的焦點。

二、javascript調試

javascript腳本的執行主要通過各大浏覽器廠商自主開發的解析引擎實現。現有的主流javascript解析引擎主要有:Chrome的V8引擎、IE9的JS引擎以及Firefox的TraceMonkey;

進行javascript開發,我們往往習慣有個類似於VS那樣的IDE可以直接使用,但是由於javascript本身就是一種“輕量級”語言,因此我們只需要簡單的文本編輯器 + javascript解析引擎就可以進行開發調試了。

大家當然可以使用Windows下的記事本或者Linux的Vim編輯器,但是我建議大家還是使用專門的代碼編輯器比較好,因為具有語法高亮提示、自動補全等諸多便利。這裡我使用的文本編輯器是nodepad++,而搭配的調試器就是簡答的Firefox,當然你也可以使用IE、Chrome甚至Safri,因為nodepad++支持多種浏覽器調試。

在Notepad++中的“運行”菜單下可以選擇在哪種浏覽器中運行調試javascript腳本,也可以使用上面的快捷鍵。

三、javascript測試程序

接下來,我們提供一個非常簡答的javascript腳本,裡面涉及的知識點會逐一講解。

首先是我們的javascript腳本:program.js,我們先來看一段代碼:


  1. document.writeln('');
  2. document.writeln("Hello, world!");
  3. var a = 100000000000000000000e400;
  4. if (a < Infinity)
  5. {
  6. document.writeln(a);
  7. document.writeln('a less than Infinity, 3Q~~');
  8. }
  9. else
  10. {
  11. document.writeln(a);
  12. document.write('Sorry, a more than Infinity!\n');
  13. }

第1行:document.writeln()與document.write()都用來向終端(浏覽器)輸出信息,區別在於“ln”版本自帶換行符;
第3行:定義一個變量,無需聲明其類型,只需要使用關鍵字“var”即可;
第4行:javascript中依舊可以使用基本的控制結構,如if-else, while以及for等;javascript的數字統一用64位的浮點表示,所以1.0與1表示的值相同;此外,NaN表示一個不能產生正常結果的運算結果,而所有大於1.798e308的數值統一用Infinity表示,e308表示10的308次冪;所以當輸入的值大於定義值時,統一顯示為Infinity;


  1. var a = 10, b = 9;

  2. document.writeln(a);

  3. function add(x,y)
  4. {
  5. return x + y;
  6. }

  7. function subtract(x,y)
  8. {
  9. return x - y;
  10. }

  11. document.writeln(add(a,b));

第5行開始定義了一個簡單的函數,一個是加法(add),另一個則是減法(subject),然後在終端輸出時調用該函數;


  1. document.writeln("Global Object...");
  2. var MyObj = {};

  3. MyObj.member = {'first-name': "Alice", last_name : "Winston"};

  4. MyObj.record = {
  5. airline: 'T2B',
  6. number: 777,
  7. departure: {
  8. Date:"Sunday",
  9. Time:"2015-11-01",
  10. City:"Taiwan"
  11. },
  12. arrival: {
  13. Date:'Monday',
  14. Time:"2015-11-02",
  15. City:"Beijing"
  16. }

  17. };

  18. document.writeln("Retrive a non-exit attribute value ..exa..MyObj.people..");
  19. document.writeln(MyObj.people);

  20. document.writeln("typeof MyObj.member is ...");
  21. document.writeln(typeof MyObj.member);

  22. document.writeln("MyObj.record.number is ...");
  23. document.writeln(typeof MyObj.record.number);

  24. document.writeln('MyObj.record.airline is ...');
  25. document.writeln(typeof MyObj.record.airline);

由於javascript的函數中沒有局部域,因此經常使用全局域。有編程經驗的大伙兒都知道,全局變量非常容易混亂,所以建議像本文一樣在開頭統一建立一個全局對象,然後所有的操作作為其中的一部分,也就是說我們定義的全局對象其實是一個“全局容器”。
javascript中簡單數據類型包括數字、字符串、布爾值、null值和undefined五種,其它所有的值都是對象,如數組、函數以及正則表達式。簡言之,javascript中對象就是可變的鍵控集合(keyed collections)。對象由不同的屬性組成,屬性的名字可以是包括空字符串在內的任意字符串,屬性值可以是除undefined之外的任何值。

第2行初始化一個空的全局對象MyObj;
第4行為對象MyObj添加一個屬性member,而member又是一個對象,包含兩個鍵值對,每個鍵值對用','分隔,最後一個屬性不用加符號;
第7-8行的屬性名為一個字符串,這裡建議使用javascript的標識符規范(數字、字母與下劃線,首字符只能是字母),因為這樣寫可以省略掉“”來表示字符串,如“first-name”不能省略“”,而可以寫成first_name;不僅如此,在對象的屬性檢索時可以方便的使用引用符號“.”進行,比如MyObj.member.last_name,而非規范標識符只能用MyObj.member.["first-name"],非常麻煩;

  1. //對象屬性值的更新
  2. document.writeln('Attribute value update...');
  3. document.writeln(' Once Date is ' + typeof MyObj.record.departure.date);

  4. MyObj.record.departure.Date = 'Saturday';

  5. document.writeln(MyObj.record.departure.Date);

  6. //對象枚舉
  7. document.writeln('Object enume...')
  8. var name;
  9. for (name in MyObj.record)
  10. {
  11. document.writeln(name + ':' + MyObj.record[name]);

第3行使用typeof獲得對象的類型,typeof運算符的值只有"string"、"boolen"、"undefined"、"function"和"object"五種;
第5行直接對已有的屬性更新,若已存在,則更新;若沒有,則創建該屬性鍵值對;
第9行展示了枚舉一個對象的所有屬性,借助for-in結構,我們可以枚舉出所有的屬性(包括函數和原型中的屬性),而且得到的枚舉不一定是按順序的,所以一般建議使用for()的形式規定遍歷方式;

接下來是我們的program.html







  • 這裡關鍵就是第4行中嵌入了一個javascript腳本,
    第3行的告訴浏覽器按照源碼的樣式顯示;
    最後我們來看看結果:
      不足之處歡迎大家批評指正!  Refer:《Javascript語言精粹》,Douglas Crockford, 電子工業出版社 


    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved